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

.contact-form-wrap {
    /* Top half: matches the block above (--color-bt-light)
       Bottom half: matches the FAQ block below (--color-bt-dark)
       The hard stop at 50% ensures the clipped bottom corners show the correct color. */
    background: linear-gradient(
        to bottom,
        var(--color-bt-light) 50%,
        var(--color-bt-dark) 50%
    );


}

.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-4xl);
    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: 24px 0;
    background-image: url('../../assets/images/contact-form-bg.jpg'); /* Platzhalter — Bild noch ausstehend */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    width: clamp(1000px, 75vw, 100%);
    pointer-events: none;
    z-index: 0;
    height: auto;
    transform: translateX(-27vw);
    margin-top: 150px;
}

@media screen and (max-width: 768px) {
    .contact-form__bg {
        background-image: url('../../assets/images/key-facts-form-bg-cropped-mobile.jpg'); /* Platzhalter — Bild noch ausstehend */
        width: unset;
        transform:translateX(0);
        margin-top: unset;
    }
}

/* =============================================================================
   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-wrap {
    fieldset._form-fieldset {
        margin-top: 48px !important;
    }
}

.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;
}

/* Hide specific labels — firstname, lastname, email, newsletteranmeldung */
.contact-form__form label[for="firstname"],
.contact-form__form label[for="lastname"],
.contact-form__form label[for="email"],
.contact-form__form ._form-fieldset:has(input[data-name="newsletteranmeldung"]) legend._form-label,
.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) legend._form-label {
    display: none !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"] {
    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 input[type="text"]:focus,
.contact-form__form input[type="email"]:focus {
    border-bottom-color: var(--color-bt-dark) !important;
    outline: none !important;
}

.contact-form__form input::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: 16px !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"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !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 {
    outline: 2px solid var(--color-turquoise) !important;
    outline-offset: 2px !important;
}

.contact-form__form input[type="checkbox"]: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: 9px !important;
    top: 5px !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;
}

/* Newsletteranmeldung checkbox label — larger bold text */
.contact-form__form ._form-fieldset:has(input[data-name="newsletteranmeldung"]) ._row._checkbox-radio label,
.contact-form__form ._form-fieldset:has(input[data-name="newsletteranmeldung"]) ._row._checkbox-radio span label {
    font-weight: 700 !important;
    font-size: 24px !important;
}

/* Datenschutz (mailings) checkbox — transparent background, bt-dark border & checkmark */
.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) ._row._checkbox-radio {
    background: transparent !important;
    padding: 12px 0 !important;
    flex-direction: row !important;
}

.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border: 2px solid var(--color-bt-dark) !important;
    background: transparent !important;
    margin: 0 16px 0 0 !important;
}

@media screen and (max-width:667px) {

    .contact-form__form ._form-fieldset:has(input[data-name="mailings"]) ._row._checkbox-radio {
        gap: 16px !important;
    }
}

.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) label {
    font-size: 14px !important;
}

.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) input[type="checkbox"]:checked {
    background: transparent !important;
}

.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) input[type="checkbox"]:checked::after {
    border-color: var(--color-bt-dark) !important;
    left: 7px !important;
    top: 2px !important;
    width: 6px !important;
    height: 11px !important;
}
.contact-form__form ._form-fieldset:has(input[data-name="studienrichtungen_field_of_study"]) {

    border-bottom: 2px solid var(--color-bt-dark)!important;

    & legend {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !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;
}
/*.contact-form__form ._form-fieldset:has(input[data-name="newsletteranmeldung"]) {*/
/*    margin-top: 48px !important;*/
/*    margin-bottom: 48px !important;*/
/*}*/
.contact-form__form ._form-fieldset:has(input[data-name="mailings"]) {
    margin-top: 48px !important;
}

.contact-form__form button._submit {
    margin-top: 48px !important;
}

    /* Force all fields full width — override ActiveCampaign's inline 2-column layout */
.contact-form__form ._form_element._inline-style {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-right: 0 !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. */
/* Submit button wrapper — align right */
.contact-form__form ._button-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 0 !important;
}

.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;
    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-family: var(--font-body) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-bt-dark) !important;
    font-size: 12px !important;

    & a {
        font-family: inherit !important;
        font-size: inherit !important;
        color: inherit !important;
        text-decoration: underline !important;
    }

}

/* Thank you message */
.contact-form__form ._form-thank-you {
    font-family: var(--font-body) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-bt-dark) !important;
    line-height: 1.4 !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;
    }

    .contact-form {
        padding-block: 104px;
    }
}