/* =============================================================================
   CONTACT FORM BLOCK
   ============================================================================= */

.contact-form-wrap {
    background-color: var(--color-light-green);
}

.contact-form {
    position: relative;
    background-color: var(--color-light-green);
    clip-path: polygon(
            24px 0%,
            calc(100% - 24px) 0%,
            100% 24px,
            100% calc(100% - 24px),
            calc(100% - 24px) 100%,
            24px 100%,
            0% calc(100% - 24px),
            0% 24px
    );
    padding-block: var(--space-3xl);
    overflow: hidden;
}

/* =============================================================================
   HINTERGRUNDBILD
   Wird vom Designer als Bild-Asset geliefert.
   Sobald vorhanden: in assets/images/ ablegen und Pfad hier eintragen.
   ============================================================================= */

.contact-form__bg {
    position: absolute;
    inset: 0;
    background-image: url('../../assets/images/contact-form-bg.png'); /* Platzhalter — Bild noch ausstehend */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

/* =============================================================================
   INNER — 1-spaltig, zentriert, maximale Breite wie andere Blöcke
   ============================================================================= */

.contact-form__inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin-inline: auto;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* =============================================================================
   TEXT
   ============================================================================= */

.contact-form__headline {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: 64px;
    line-height: 1;
    color: var(--color-bt-dark);
}
.contact-form__headline .text-turquoise { color: var(--color-turquoise); }
.contact-form__headline .text-accent    { color: var(--color-accent); }

.contact-form__subtext {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-bt-dark);
    margin-top: 24px;
}

/* =============================================================================
   ACTIVECAMPAIGN FORM OVERRIDES
   Gilt für beide möglichen Form-IDs (Simple + Full Embed)
   ============================================================================= */

.contact-form__form {
    width: 100%;
}

.contact-form__form [id^="_form_"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    color: var(--color-bt-dark) !important;
}

/* Extra Spezifität um ActiveCampaign's eigenes !important zu überschreiben */
.contact-form__form form[id^="_form_"],
.contact-form__form div[id^="_form_"],
body .contact-form__form [id^="_form_"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Formular-Titel ausblenden (steht schon im Block-Headline) */
.contact-form__form ._form-title {
    display: none !important;
}

/* HTML-Code Blöcke (z.B. "INFO-TAG 26. März 2026") */
.contact-form__form ._html-code p {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 20px !important;
    color: var(--color-bt-dark) !important;
    margin-bottom: 16px !important;
}

/* Labels */
.contact-form__form ._form-label,
.contact-form__form ._form_element ._form-label,
.contact-form__form legend._form-label {
    font-family: var(--font-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 14px !important;
    color: var(--color-bt-dark) !important;
    margin-bottom: 4px !important;
}

/* Pflichtfeld-Stern */
.contact-form__form .field-required {
    color: var(--color-bt-dark) !important;
}

/* Text-Inputs — transparent */
.contact-form__form input[type="text"],
.contact-form__form input[type="email"],
.contact-form__form input[type="date"],
.contact-form__form input[type="tel"],
.contact-form__form textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--color-turquoise) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    color: var(--color-bt-dark) !important;
    padding: 8px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Select-Felder — weiß */
.contact-form__form select {
    background: var(--color-white) !important;
    border: none !important;
    border-bottom: 2px solid var(--color-turquoise) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    color: var(--color-bt-dark) !important;
    padding: 8px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

.contact-form__form input[type="text"]:focus,
.contact-form__form input[type="email"]:focus,
.contact-form__form select:focus {
    border-bottom-color: var(--color-bt-dark) !important;
    outline: none !important;
}

.contact-form__form input::placeholder,
.contact-form__form textarea::placeholder {
    color: #0E4C53 !important;
    opacity: 1 !important;
}

/* =============================================================================
   CHECKBOXES & RADIO — Custom Styling
   Eckig (border-radius: 0), Farbe: --color-turquoise, Haken via ::after
   Jede Zeile auf weißem Hintergrund, Checkbox rechts ausgerichtet
   ============================================================================= */

.contact-form__form ._row._checkbox-radio {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important; /* Checkbox rechts, Label links */
    gap: 0 !important;
    padding: 12px 14px !important;
    background: var(--color-white) !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
}

.contact-form__form ._row._checkbox-radio label,
.contact-form__form ._row._checkbox-radio span label {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-bt-dark) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
    cursor: pointer !important;
}

.contact-form__form input[type="checkbox"],
.contact-form__form input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--color-bt-light) !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 0 0 12px !important; /* Abstand zum Label */
    flex-shrink: 0 !important;
    transition: background 0.15s, border-color 0.15s !important;
    box-shadow: none !important;
}

.contact-form__form input[type="checkbox"]:focus-visible,
.contact-form__form input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-turquoise) !important;
    outline-offset: 2px !important;
}

.contact-form__form input[type="checkbox"]:checked,
.contact-form__form input[type="radio"]:checked {
    background: var(--color-bt-light) !important;
    border-color: var(--color-bt-light) !important;
}

/* Haken via ::after (Checkbox) */
.contact-form__form input[type="checkbox"]:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 7px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
    border: 2px solid var(--color-white) !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}

/* Punkt via ::after (Radio) */
.contact-form__form input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--color-white) !important;
}

/* Fieldset Legende */
.contact-form__form ._form-fieldset legend {
    font-family: var(--font-body) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 14px !important;
    color: var(--color-bt-dark) !important;
    margin-bottom: 12px !important;
}

/* Abstände zwischen Feldern */
.contact-form__form ._form_element {
    margin-bottom: 16px !important;
}

/* Submit Button — montanuni design: dunkelgrün mit türkisem Text, abgeschnittene Ecke rechts unten
   Inline-Styles vom ActiveCampaign-Tool (background: transparent !important) werden via
   [style]-Selektor + höherer Spezifität überschrieben. */
.contact-form__form button._submit,
.contact-form__form button._submit[style] {
    background-color: var(--color-bt-dark) !important;
    color: var(--color-turquoise) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: 24px !important;
    border: none !important;
    border-radius: 0 !important;
    width: 322px !important;
    height: 60px !important;
    padding: 0 32px !important;
    margin-top: 24px !important;
    float: inline-end !important;
    cursor: pointer !important;
    clip-path: polygon(
            0% 0%,
            100% 0%,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            0% 100%
    ) !important;
    transition: opacity 0.2s ease !important;
}
.contact-form__form button._submit:hover {
    opacity: 0.85 !important;
}

/* Datenschutz-Text */
.contact-form__form ._html-code p[style*="color: #999"] {
    font-size: 12px !important;
    color: var(--color-bt-dark) !important;
    opacity: 0.6;
}
.contact-form__form ._html-code a {
    color: var(--color-turquoise) !important;
    text-decoration: underline !important;
}

/* Fehler-Styling */
.contact-form__form ._error-inner {
    font-size: 12px !important;
    border-radius: 0 !important;
}

.contact-form__placeholder {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-turquoise);
    padding: 24px;
    border: 2px dashed var(--color-turquoise);
}

/* =============================================================================
   MOBILE
   ============================================================================= */

@media (max-width: 767px) {
    .contact-form__inner {
        padding-inline: var(--padding-x);
        gap: 32px;
    }
    .contact-form__headline {
        font-size: 48px;
    }
}