/* =====================================================================
 * formular.css - das Anfrageformular
 *
 * Gehoert zu includes/kontakt-formular.php. Dieses eine Formular steht
 * auf Start, Saunamusik und Pakete; die Optik steht deshalb an genau
 * einer Stelle. Felder, Datenschutz-Haken und Statusmeldung kommen aus
 * components.css (.field, .privacy-check, .form-note, .status).
 * ===================================================================== */

/*
 * Bewusst zentriert: Ueberschrift und Formular gehoeren fuer diesen
 * Abschnitt zusammen (anders als Hoerproben und Referenzen, die
 * linksbuendig bleiben).
 */
.home-contact .section-intro {
    text-align: center;
}

/* Glasflaeche wie die Kacheln; das feste Banner scheint durch. */
.home-contact-form {
    max-width: 720px;
    margin-inline: auto;
    padding: 32px;
    border: 1px solid color-mix(in srgb, #fff 65%, transparent);
    border-radius: 22px;
    background: linear-gradient(165deg, color-mix(in srgb, #fff 78%, transparent), color-mix(in srgb, var(--blue) 7%, transparent));
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    box-shadow: var(--glas-kante), var(--glas-boden), inset 0 1px 0 #fff;
    transform: var(--glas-lage);
    transform-origin: left center;
}

html[data-theme=dark] .home-contact-form {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, #fff 12%, transparent), color-mix(in srgb, #000 4%, transparent));
    box-shadow: var(--glas-kante),
        var(--glas-boden),
        inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, .35);
}

.home-contact-form textarea {
    min-height: 155px;
}

/* Volle Zeile im Raster. [hidden] gewinnt gegen display: Begleitregel. */
.form-grid > .full {
    grid-column: 1 / -1;
}

.form-grid > [hidden] {
    display: none;
}

/* Zusammenfassung der Auswahl aus dem Anfragekorb */
.form-summary {
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--orange) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
}

#formSummaryList div {
    padding: 3px 0;
    font-size: .88rem;
}

.form-summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-weight: 900;
}

.form-summary-total strong {
    color: var(--orange-text, #d23b12);
}

/* Datenschutz-Haken und Senden-Knopf in einer Zeile */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.form-footer .privacy-check {
    flex: 1 1 260px;
}

.form-footer .btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 650px) {
    .home-contact-form {
        padding: 20px;
    }

    .form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .form-footer .btn-primary {
        width: 100%;
    }
}

/*
 * HANDY: KOMPAKTER, OHNE FELDER ZU VERLIEREN
 *
 * Pflichtfelder (Name, E-Mail) stehen oben ueber die volle Breite, die
 * beiden freiwilligen (Firma, Telefon) teilen sich eine Zeile. Weniger
 * Luft, ein kuerzeres Nachrichtenfeld - es waechst beim Schreiben mit
 * (field-sizing), wo der Browser das kann.
 */
@media (max-width: 560px) {
    .home-contact-form {
        padding: 18px 16px;
    }

    .home-contact-form .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .home-contact-form .form-grid > * {
        grid-column: 1 / -1;
    }

    .home-contact-form .form-grid > .field:has([name="company"]),
    .home-contact-form .form-grid > .field:has([name="phone"]) {
        grid-column: auto;
        order: 3;
    }

    .home-contact-form .form-grid > .field:has([name="name"]) {
        order: 1;
    }

    .home-contact-form .form-grid > .field:has([name="email"]) {
        order: 2;
    }

    .home-contact-form .form-grid > :not(.field:has([name="name"], [name="email"], [name="company"], [name="phone"])) {
        order: 4;
    }

    .home-contact-form .field {
        gap: 4px;
    }

    .home-contact-form textarea {
        min-height: 100px;
        field-sizing: content;
    }
}