.hintergrund.grau {
background-color: #ececec;
aspect-ratio: unset !important;
} .page-section .wpcf7,
.page-section .wpcf7-form {
text-align: left;
}  .form-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
}
.form-left {
flex: 1 1 66%;
max-width: 768px;
min-width: 300px;
}
.form-right {
flex: 1 1 260px;
min-width: 240px;
}
.form-right > p:first-child,
.form-right strong {
font-weight: bold;
}
.wpcf7-form label {
display: block;
font-weight: 400;
} .wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea {
width: 100%;
font-size: 14px;
box-sizing: border-box;
}
.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
display: block;
width: 100%;
padding: 13px 26px;
margin-top: 12px;
border: 1px solid rgba(189, 189, 189, 0.2);
border-radius: 12px;
background-color: #f5f5f5;
box-shadow: none;
outline: none;
line-height: 1.5;
min-height: 49px;
}
textarea {
resize: vertical;
min-height: 132px;
} .telefon-row {
margin-top: -25px;	
}
.telefon-fields {
display: flex;
gap: 10px;
align-items: center;
}
.telefon-fields select {
flex: 0 0 130px;
}
.telefon-fields input[type="tel"] {
flex: 1;
}
[data-name="your-telefon"] {
flex: 1;
} .wpcf7-list-item {
display: block;
margin: 4px 0;
}
.wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
display: inline-block;
width: 20px !important;
min-width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 2px solid #07445f;
border-radius: 6px;
background: #fff;
vertical-align: middle;
}
.wpcf7-form input[type="radio"] {
border-radius: 50%;
}
.wpcf7-form input[type="checkbox"]:checked::before {
content: "✓";
display: block;
color: #07445f;
font-size: 15px;
font-weight: 900;
line-height: 16px;
text-align: center;
}
.wpcf7-form input[type="radio"]:checked::before {
content: "";
display: block;
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #07445f;
} .form-footer {
margin-top: 20px;
}
.form-footer input[type="submit"] {
background-color: #07445f;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
}
.form-footer input[type="submit"]:hover {
background-color: #055080;
} .p {
margin-top: -25px;	
}
.firmendaten {
margin-top: 20px;
font-size: 14px;
}
.name-row {
display: flex;
gap: 10px; flex-wrap: wrap; }
.firstname-field {
flex: 1; } @media (max-width: 980px) {
.form-container {
flex-direction: column;
gap: 28px;
}
.form-left,
.form-right {
flex: 1 1 auto;
max-width: none;
min-width: 0;
}
.telefon-fields {
flex-direction: column;
gap: 8px;
}
.telefon-fields select {
flex: 1 1 auto;
}
.name-row {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 768px) {
.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
padding: 10px 18px;
font-size: 16px; }
.form-footer input[type="submit"] {
width: 100%;
padding: 14px;
}
}
.lastname-field {
flex: 1; } .firstname-field input,
.lastname-field input {
width: 100%;
}
.strasse-hausnummer-row {
display: flex;
gap: 10px; flex-wrap: wrap; }
.strasse-field {
flex: 2; min-width: 150px;
}
.hausnummer-field {
flex: 1; min-width: 80px;
} .strasse-field input,
.hausnummer-field input {
width: 100%;
}
.plz-ort-row {
display: flex;
gap: 10px; flex-wrap: wrap; }
.plz-field {
flex: 1; min-width: 80px;
}
.ort-field {
flex: 2; min-width: 150px;
}
#ort-vorschlaege .ort-select-dropdown {
display: block;
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
} #ort-vorschlaege p {
font-weight: bold;
color: #07445f; } #ort-vorschlaege-liste {
position: relative; z-index: 10; 
} .ort-vorschlag-item {
display: block;
padding: 8px 10px;
background-color: #fff; border: 1px solid #ccc;
cursor: pointer;
font-size: 1em;
line-height: 1.2;
margin-top: -1px; } .ort-vorschlag-item:first-child {
margin-top: 0;
border-top-width: 1px;
} .ort-vorschlag-item:hover {
background-color: #f1f1f1;
} .ort-vorschlaege-aktiv .ort-vorschlag-item { box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}  .suggestion-wrapper {
position: relative; display: block; 
} .suggestion-list {
position: absolute; top: 100%; left: 0;
z-index: 1000; width: 100%;
max-height: 200px;
overflow-y: auto; background: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
list-style: none; padding: 0;
margin-top: -1px; } .country-vorschlag-item,
.ort-vorschlag-item {
padding: 8px 10px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
transition: background-color 0.2s;
} .country-vorschlag-item:hover,
.ort-vorschlag-item:hover {
background-color: #f0f0f0;
}
@media (max-width: 900px) {
.page-section:has(.wpcf7) {
padding: 18px 16px;
}
.form-container {
gap: 24px;
}
.form-left,
.form-right {
max-width: none;
flex-basis: 100%;
}
}