section.m10_kontakt {
position: relative;
background: #ebebeb;
}
section.m10_kontakt .m10_kontakt_main {
position: relative;
padding: 182px 0;
}
section.m10_kontakt .m10_allgemeine_daten_formular_container {
position: relative;
width: 100%;
}
section.m10_kontakt .m10_allgemeine_daten_formular_container .wpcf7 {
margin: 0;
padding: 0;
} section.m10_kontakt .form_headline h2 {
font-size: 45px;
font-weight: 700;
color: #111516;
text-transform: uppercase;
margin: 0 0 8px; } section.m10_kontakt .form_main_text_required_tag_container {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 35px;
}
section.m10_kontakt .form_main_text {
max-width: 420px;
}
section.m10_kontakt .form_main_text p {
color: #111516;
font-size: 15px;
line-height: 1.5;
}
section.m10_kontakt .form_required_tag p {
color: #888;
font-size: 15px;
white-space: nowrap;
}  @media (min-width: 992px) {
section.m10_kontakt .cf7_formular {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 89px;
row-gap: 18px;
align-items: start;
} section.m10_kontakt .cf7_formular .form_headline,
section.m10_kontakt .cf7_formular .form_main_text_required_tag_container {
grid-column: 1 / -1;
} section.m10_kontakt .cf7_formular .form_container {
display: contents;
}
section.m10_kontakt .cf7_formular .form_container > .form_item:nth-child(1) {
grid-column: 1;
}
section.m10_kontakt .cf7_formular .form_container > .form_item:nth-child(2) {
grid-column: 2;
} section.m10_kontakt .cf7_formular .form_textarea {
grid-column: 2 !important;
grid-row: span 2;
}
section.m10_kontakt .cf7_formular .form_textarea textarea {
min-height: 100%;
}
section.m10_kontakt .cf7_formular .submit_accept_container {
grid-column: 1 / -1;
}
} section.m10_kontakt .form_item input[type="text"],
section.m10_kontakt .form_item input[type="email"],
section.m10_kontakt .form_item input[type="tel"],
section.m10_kontakt .form_item textarea {
padding: 16px 20px;
border: 1px solid #c8c8c8;
background: #fff;
border-radius: 0;
font-size: 15px;
color: #111516;
font-family: inherit;
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
section.m10_kontakt .form_item input:focus,
section.m10_kontakt .form_item textarea:focus {
border-color: #1b9cd9;
}
section.m10_kontakt .form_item input::placeholder,
section.m10_kontakt .form_item textarea::placeholder {
color: #6b6b6b;
}
section.m10_kontakt .form_item textarea {
resize: vertical;
min-height: 140px;
line-height: 1.5;
} section.m10_kontakt .mM_custom_select {
display: block;
position: relative;
width: 100%;
}
section.m10_kontakt .mM_custom_select select.wpcf7-select {
position: absolute;
left: -9999px;
opacity: 0;
}
section.m10_kontakt .mM_select_selected {
width: 100%;
padding: 16px 60px 16px 20px;
border: 1px solid #c8c8c8;
background: #fff;
border-radius: 4px;
font-size: 15px;
color: #6b6b6b;
cursor: pointer;
position: relative;
transition: border-color 0.2s;
}
section.m10_kontakt .mM_select_selected:hover {
border-color: #999;
}
section.m10_kontakt .mM_select_arrows {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: #d8d8d8;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.2s;
}
section.m10_kontakt .mM_custom_select:hover .mM_select_arrows {
background: #c4c4c4;
}
section.m10_kontakt .mM_select_arrow_down img {
width: 8px;
height: auto;
}
section.m10_kontakt .mM_select_items {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #c8c8c8;
border-radius: 4px;
max-height: 280px;
overflow-y: auto;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
section.m10_kontakt .mM_select_items.mM_select_hide {
display: none;
}
section.m10_kontakt .mM_select_item {
padding: 12px 20px;
cursor: pointer;
transition: background 0.15s;
font-size: 15px;
color: #111516;
}
section.m10_kontakt .mM_select_item:hover {
background: #f4f4f4;
}
section.m10_kontakt .mM_select_item.mM_same_as_selected {
color: #6b6b6b;
} section.m10_kontakt .submit_accept_container {
display: flex;
justify-content: space-between;
justify-self: end;
align-items: center;
width: 50%;
gap: 30px;
margin-top: 25px;
flex-wrap: wrap;
padding-left: 44px;
}
section.m10_kontakt .form_accept p {
margin: 0;
font-size: 14px;
}  section.m10_kontakt .form_item {
position: relative;
} section.m10_kontakt .form_item label.mM_d_none {
display: block !important;
position: absolute;
left: 38px;
top: 23px;
font-size: 16px;
color: #111516;
pointer-events: none;
transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, background 0.2s ease, padding 0.2s ease;
background: transparent;
z-index: 1;
line-height: 1;
}
section.m10_kontakt .form_item p {
margin: 0;
} section.m10_kontakt .form_item label.mM_d_none + br {
display: none;
} section.m10_kontakt .form_item .hp-message {
display: none !important;
} section.m10_kontakt .form_item input[type="text"],
section.m10_kontakt .form_item input[type="email"],
section.m10_kontakt .form_item input[type="tel"],
section.m10_kontakt .form_item textarea {
padding: 16.5px 38px;
border: 1px solid #a9aaab;
background: transparent;
font-size: 16px;
color: #111516;
font-family: inherit;
outline: none;
transition: border-color 0.2s, color 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
section.m10_kontakt .form_item textarea {
resize: vertical;
min-height: 140px;
line-height: 1.5;
} section.m10_kontakt .form_item input::placeholder,
section.m10_kontakt .form_item textarea::placeholder {
color: transparent;
} section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):focus) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):not(:placeholder-shown)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(textarea:focus) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(textarea:not(:placeholder-shown)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(.mM_select_item.mM_same_as_selected:not(:first-child)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(.mM_select_items:not(.mM_select_hide)) > p > label.mM_d_none {
top: -7px;
left: 14px;
font-size: 14px;
color: #1b9cd9;
background: #ebebeb;
padding: 0 6px;
font-weight: 500;
letter-spacing: 0.3px;
} section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):not(:placeholder-shown)) input:not([tabindex="-1"]),
section.m10_kontakt .form_item:has(textarea:not(:placeholder-shown)) textarea,
section.m10_kontakt .form_item:has(.mM_select_item.mM_same_as_selected:not(:first-child)) .mM_select_selected {
border-color: #1b9cd9;
color: #1b9cd9;
font-weight: 500;
} section.m10_kontakt .form_item input:focus,
section.m10_kontakt .form_item textarea:focus {
border-color: #1b9cd9;
} section.m10_kontakt .mM_custom_select {
display: block;
position: relative;
width: 100%;
}
section.m10_kontakt .mM_custom_select select.wpcf7-select {
position: absolute;
left: -9999px;
opacity: 0;
}
section.m10_kontakt .mM_select_selected {
width: 100%;
padding: 18px 60px 21px 20px;
border: 1px solid #a9aaab;
background: transparent;
border-radius: 0;
font-size: 16px;
color: transparent; cursor: pointer;
position: relative;
transition: border-color 0.2s, color 0.2s;
min-height: 51px;
}
section.m10_kontakt .mM_select_selected:hover {
border-color: #1b9cd9;
} section.m10_kontakt .mM_select_arrows {
position: absolute;
top: 50%;
right: 28px;
transform: translateY(-50%);
width: 31px;
height: 31px;
background: #d7d7d8;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
section.m10_kontakt .mM_select_arrow_down img {
width: 8px;
height: auto;
} section.m10_kontakt .mM_select_items {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #c8c8c8;
border-radius: 0;
max-height: 280px;
overflow-y: auto;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
section.m10_kontakt .mM_select_items.mM_select_hide {
display: none;
}
section.m10_kontakt .mM_select_item {
padding: 12px 20px;
cursor: pointer;
font-size: 15px;
color: #111516;
}
section.m10_kontakt .mM_select_item:hover {
background: #f4f4f4;
}
section.m10_kontakt .mM_select_item.mM_same_as_selected {
color: #6b6b6b;
} section.m10_kontakt .wpcf7-acceptance label:has(input.checked):before {
background-color: #1b9cd9;
border-color: #1b9cd9;
} section.m10_kontakt .form_submit p {
margin: 0;
position: relative;
display: inline-block;
}
section.m10_kontakt .submit_btn,
section.m10_kontakt input[type="submit"].wpcf7-submit {
padding: 18px 56px 18px 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
border-radius: 0;
font-family: 'Oswald', sans-serif;
-webkit-appearance: none;
appearance: none;
}
section.m10_kontakt .submit_btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
section.m10_kontakt .form_submit p:after {
content: '';
position: absolute;
right: 22px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateY(-50%) rotate(-45deg);
pointer-events: none;
}
section.m10_kontakt .wpcf7-spinner { display: none; } section.m10_kontakt .hp-message,
section.m10_kontakt [class*="confirm_mail"] {
display: none !important;
} section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
position: relative;
pointer-events: none;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container {
position: relative;
pointer-events: auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
display: block;
max-width: 320px;
width: 100%;
height: auto;
margin: 0 auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
position: absolute;
background: #fff;
padding: 22px 26px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
max-width: 340px;
z-index: 2;
pointer-events: auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container p {
font-size: 14px;
line-height: 1.55;
color: #111516;
margin: 0;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container p span:first-child {
font-weight: 700;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container a {
color: #1b9cd9;
font-weight: 600;
text-decoration: none;
}
section.m10_kontakt .wpcf7-acceptance a {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container:after {
content: '';
position: absolute;
right: 5px;
bottom: -25px;
width: 70px;
height: 26px;
background: url(//symto.de/wp-content/themes/AZ-Ideen-xen/img/sprechblase_dreieck.png) no-repeat;
background-size: contain; filter: drop-shadow(2px 1px 1px rgba(0,0,0,0.06));
}  @media all and (min-width: 992px) {
section.m10_kontakt .m10_kontakt_main {
min-height: 580px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
position: absolute;
left: 0;
bottom: 0;
width: 50%;
display: flex;
justify-content: end;
align-items: flex-end;
padding-right: 44px;
z-index: 1; }
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img { max-height: 100%;
object-fit: contain;
object-position: bottom;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
top: 0;
left: 0;
}
}
@media (max-width: 1399px) {
section.m10_kontakt .cf7_formular {
column-gap: 18px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
top: -50px;
max-width: 250px;
}
section.m10_kontakt .submit_accept_container {
padding-left: 10px;
}
}
@media all and (max-width: 1199px) {
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
max-width: 250px;
}
} @media (max-width: 991px) {
section.m10_kontakt .m10_kontakt_main {
padding: 70px 0 0;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
display: flex;
justify-content: end;
padding-right: 100px;
margin-top: 50px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
top: 0;
max-width: 350px;
left: 0;
}
section.m10_kontakt .submit_accept_container {
width: 100%;
padding-left: 0;
}
}
@media (max-width: 767px) {
section.m10_kontakt .m10_kontakt_main {
padding: 50px 0 0;
}
section.m10_kontakt .form_main_text_required_tag_container {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
section.m10_kontakt .submit_accept_container {
flex-direction: column;
align-items: stretch;
}
section.m10_kontakt .form_submit p {
width: 100%;
text-align: center;
}
section.m10_kontakt .submit_btn {
width: 100%;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
padding-right: 50px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
max-width: 250px;
}
}
@media all and (max-width: 575px) {
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
padding-right: 0;
}
section.m10_kontakt .form_headline h2 {
font-size: 35px;
}
}
@media all and (max-width: 475px) {
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
max-width: 200px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
max-width: 200px;
}
}
@media all and (max-width: 375px) {
section.m10_kontakt .m10_kontakt_main {
padding: 50px 0 50px;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
flex-direction: column;
align-items: center;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
position: relative;
left: auto;
right: auto;
top: auto;
margin-top: -30px;
max-width: 100%;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container:after {
content: none;
}
}