/* ============================================================
   SENZAVI · Forms (Dynamics CI)
   ------------------------------------------------------------
   Kontaktformular (kf), Webinar (wn), Whitepaper (wp).
   ============================================================ */

/* ---------- Gemeinsame Basis ---------------------------------- */

.sen-kf--main,
.sen-wn--main,
.sen-wp--main {
    display:        grid;
    gap:            32px;
    background:     var(--e-global-color-secondary);
    padding:        24px;
    border-radius:  16px;
    color:          var(--e-global-color-e80687e);

    button {
        border: 1px solid white !important;
    }

    /* KF Consent */
    div.consentBlock {
        padding: 0px !important;

        div {
            display:        flex;
            align-items:    flex-start;
            flex-direction: row;
            font-size:      0.8rem;
            gap:            8px;
            font-family:    inter !important;
        }
    }
}


/* ---------- Kontaktformular Grid ------------------------------ */

.sen-kf--main {
    grid-template-columns: repeat(6, 1fr);

    grid-template-areas:
        "vorname vorname nachname nachname telefon telefon"
        "email email job job . ."
        "firma firma groese groese branche branche "
        "nachricht nachricht nachricht nachricht nachricht nachricht"
        "legals1 legals1 legals1 legals1 . ."
        "senden . . . . .";

    @media screen and (max-width: 768px) {
        grid-template-columns: repeat(1, 1fr);

        div {
            display:        flex;
            flex-direction: column;
            gap:            12px;
        }

        grid-template-areas:
            "vorname"
            "nachname"
            "job"
            "firma"
            "groese"
            "branche"
            "email"
            "telefon"
            "nachricht"
            "legals1"
            "senden";
    }

    div[data-targetproperty="firstname"]            { grid-area: vorname; }
    div[data-targetproperty="lastname"]             { grid-area: nachname; }
    div[data-targetproperty="sz_position"]          { grid-area: job; }
    div[data-targetproperty="companyname"]          { grid-area: firma; }
    div[data-targetproperty="emailaddress1"]        { grid-area: email; }
    div[data-targetproperty="mobilephone"]          { grid-area: telefon; }
    div[data-targetproperty="sz_numberofemployees"] { grid-area: groese; }
    div[data-targetproperty="description"]          { grid-area: nachricht; }
    div[data-targetproperty="industrycode"]         { grid-area: branche; }
    div.ConsentWrapper                              { grid-area: legals1; }
    div[data-editorblocktype="SubmitButton"]        { grid-area: senden; }

    label {
        margin-bottom: 8px;
    }
}


/* ---------- Pflichtfeld-Indikator ----------------------------- */

div:has(input[required="required"])    > label,
div:has(select[required="required"])   > label,
div:has(textarea[required="required"]) > label {
    &:after {
        content: " *";
        width:   20px;
    }
}

/* Ausnahme: Bei Consent-Block steht der Stern nicht am Label,
   sondern am letzten <p> innerhalb des Labels. */
.consentBlock:has(input[required="required"]) {
    label {
        &:after {
            content: "";
        }

        p:last-of-type {
            &:after {
                content: " *";
                width:   20px;
            }
        }
    }
}


/* ---------- Whitepaper- und Webcast-Formulare ----------------- */

.sen-wp--main,
.sen-wn--main {
    gap: 16px;
}