/* Block: Formular-Bereich (blaue Fläche + Contact Form 7)
   Das komplette Feld-Styling liegt hier, nicht im CF7-Formular – so bleibt
   das Formular schlank und CF7-Updates ändern nichts an der Optik.
   Klassenhaken im Formular: wf-group-heading · wf-subline · wf-divider ·
   wf-field · wf-label · wf-zweispalter · wf-consent · wf-required-note ·
   wf-file-hint · wf-submit · wf-muster-* (Musterauswahl, siehe unten)
   Randlos wie der Halbbild-Teaser; Inhalt im normalen .container-xl.
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Das Padding hier ist der INNENabstand der blauen Fläche – es gehört zur
   Farbfläche und bleibt deshalb hier. Der Abstand OBERHALB/UNTERHALB der
   Sektion läuft über margin, siehe assets/css/section-spacing.css. */
.block-form-section {
    background-color: var(--color-dark);
    padding-top: var(--space-section-sm);      /* 48px */
    padding-bottom: var(--space-section-sm);
    color: var(--color-white);
}

/* ── Kopf ────────────────────────────────────────────────── */
.form-section-kicker {
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    margin-bottom: var(--space-xs);            /* 8px */
}

.form-section-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: var(--space-md);            /* 32px */
}

.form-section-subline {
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: var(--color-white);
    margin-top: -24px;                         /* rückt unter die Überschrift */
    margin-bottom: var(--space-md);
}

/* ── Gruppen-Zwischenüberschriften im Formular ───────────── */
.form-section-form .wf-group-heading {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    /* Überschreibt den p-Reset oben. */
    margin: var(--space-md) 0 var(--space-sm);
}

.form-section-form .wf-group-heading:first-child {
    margin-top: 0;
}

/* ── Felder ──────────────────────────────────────────────── */
/* CF7 formatiert den Formularinhalt automatisch: Zeilenumbrüche werden zu
   <br>, Absätze zu <p>. Beides erzeugt hier große Lücken zwischen Label und
   Eingabefeld. Das Layout kommt komplett aus den wf-*-Divs, also beides weg. */
.form-section-form p {
    margin: 0;
}

.form-section-form br {
    display: none;
}

.form-section-form .wf-field {
    margin-bottom: 24px;
}

.form-section-form .wf-label {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    margin-bottom: var(--space-xs);            /* 8px */
}

/* „Worum geht´s? (Auswahl)" steht im Figma mit einem Aufzählungspunkt. */
.form-section-form .wf-label--bullet {
    padding-left: 24px;
    position: relative;
}

.form-section-form .wf-label--bullet::before {
    content: "•";
    position: absolute;
    left: 8px;
}

.form-section-form input[type="text"],
.form-section-form input[type="email"],
.form-section-form input[type="tel"],
.form-section-form textarea,
.form-section-form select {
    width: 100%;
    background-color: var(--color-white);
    border: 0;
    border-radius: var(--radius-sm);           /* 4px */
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.5;
    color: var(--color-text);
}

.form-section-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Placeholder – Kundenfeedback 01 vom 2026-09-09: „Placeholder in den
   Inputfeldern zu wenig Kontrast… (Barrierefreiheit)". Vom User am selben
   Tag festgelegt: Weserwaben-Blau, 14px, Zeilenhoehe auto.
   Vorher #9aa0ab – auf Weiss nur 2,6:1 und damit unter der WCAG-Grenze.
   `opacity: 1` bleibt: Firefox setzt Placeholder sonst auf 0.54. */
.form-section-form ::placeholder {
    color: var(--color-dark);
    font-size: var(--fs-copy-xs);              /* 14px */
    line-height: normal;
    opacity: 1;
}

/* Auswahlfelder sollen wie die Textfelder aussehen, inkl. eigenem Pfeil. */
.form-section-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23263864' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* ── Dateiupload ──────────────────────────────────────────
   Der Entwurf zeigt eine weiße Fläche über die volle Breite mit grüner
   Büroklammer links und dem Hinweistext daneben – kein sichtbares
   „Durchsuchen".

   Das native <input type="file"> lässt sich dafür nicht umstylen: Der Knopf
   gehört dem Browser. Deshalb liegt das Feld transparent ÜBER der Fläche und
   der Hinweistext wird von assets/js/form-file.js hineingeschoben. Das
   CF7-Formular bleibt dadurch unangetastet – es ist DB-Inhalt und müsste
   nach dem Livegang sonst erneut gepflegt werden.

   Ohne JavaScript greift der Rückfall weiter unten: dann steht das native
   Feld da. Es funktioniert, sieht nur nicht nach Entwurf aus.

   Die Büroklammer ist das gelieferte flowbite_paper-clip-outline.svg,
   als data-URI eingebettet – dieselbe Machart wie der Pfeil im Auswahlfeld
   weiter oben. */

.form-section-form .wf-field--file .wpcf7-form-control-wrap {
    display: block;
}

/* Rückfall ohne JS: das native Feld, immerhin auf weißem Grund. */
.form-section-form input[type="file"] {
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    color: var(--color-text);
}

.form-section-form .wf-file-hint {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-copy-xs);              /* 14px */
    color: var(--color-white);
    margin-top: var(--space-xs);
}

/* ── Sobald das Skript gelaufen ist ─────────────────────── */
.form-section-form .wf-field--file-ready .wpcf7-form-control-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    /* 24px Rand + 32px Klammer + 20px Luft bis zum Text. */
    padding: 12px 24px 12px 76px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M14 16V32C14 34.6522 15.0536 37.1957 16.9289 39.0711C18.8043 40.9464 21.3478 42 24 42C26.6522 42 29.1957 40.9464 31.0711 39.0711C32.9464 37.1957 34 34.6522 34 32V13C34 11.1435 33.2625 9.36301 31.9497 8.05025C30.637 6.7375 28.8565 6 27 6C25.1435 6 23.363 6.7375 22.0503 8.05025C20.7375 9.36301 20 11.1435 20 13V30C20 31.0609 20.4214 32.0783 21.1716 32.8284C21.9217 33.5786 22.9391 34 24 34C25.0609 34 26.0783 33.5786 26.8284 32.8284C27.5786 32.0783 28 31.0609 28 30V16' stroke='%236BE381' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 24px center;
    background-size: 32px 32px;
    cursor: pointer;
}

/* Das echte Feld: unsichtbar, aber vollflächig anklickbar – so bleibt die
   Bedienung per Maus UND Tastatur die des Browsers. */
.form-section-form .wf-field--file-ready input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* Tastaturbedienung sichtbar machen – ohne das wäre der Fokus unsichtbar,
   weil das Feld selbst transparent ist. */
.form-section-form .wf-field--file-ready input[type="file"]:focus-visible + .wf-file-hint,
.form-section-form .wf-field--file-ready .wpcf7-form-control-wrap:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-section-form .wf-field--file-ready .wf-file-hint {
    position: relative;
    margin: 0;
    color: var(--color-dark);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 24px;
    pointer-events: none;
}

/* Ausgewählte Datei: derselbe Platz, nur hervorgehoben. */
.form-section-form .wf-field--file-ready .wpcf7-form-control-wrap.has-file .wf-file-hint {
    font-weight: var(--fw-semibold);
}

@media (max-width: 767.98px) {
    .form-section-form .wf-field--file-ready .wpcf7-form-control-wrap {
        padding-left: 64px;
        background-position: 16px center;
        background-size: 28px 28px;
    }

    .form-section-form .wf-field--file-ready .wf-file-hint {
        font-size: var(--fs-copy-xs);          /* 14px */
        line-height: 20px;
    }
}

/* ── Einwilligung + Pflichtfeld-Hinweis ──────────────────── */
.form-section-form .wf-consent {
    margin-top: var(--space-md);               /* 32px */
    margin-bottom: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-copy-xs);              /* 14px */
    line-height: 1.5;
    color: var(--color-white);
}

.form-section-form .wf-consent a {
    color: var(--color-white);
    text-decoration: underline;
}

.form-section-form .wf-required-note {
    display: block;
    margin-top: 4px;
}

.form-section-form .wpcf7-list-item {
    margin: 0;
}

/* ⚠️ Bewusst auf .wf-consent eingeschraenkt. Ungeschraenkt traf die Regel
   auch die Kacheln der Musterauswahl, die als 18-px-Kaestchen mitten im
   Raster gestanden haetten. */
.form-section-form .wf-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: var(--space-xs);
    accent-color: var(--color-green);
    vertical-align: -3px;
}

/* ── Absenden ────────────────────────────────────────────── */
.form-section-form .wf-submit {
    font-size: var(--fs-copy-xs);              /* 14px */
}

/* ── CF7-Meldungen auf blauem Grund lesbar halten ────────── */
.form-section-form .wpcf7-not-valid-tip {
    color: var(--color-green);
    font-size: var(--fs-copy-xs);
    margin-top: 4px;
}

/* Leerer Meldungskasten nie zeigen (2.21.0, Chris 19.10.): Beim Autofill
   des Browsers ändern sich alle Felder auf einmal, CF7 prüft jedes live
   nach und bleibt im Zustand „validating“ stehen. Den blendet CF7 selbst
   nicht aus – es stand ein leerer Rahmen unter dem Formular. Gilt für alle
   CF7-Formulare (auch das Rückruf-Popup), deshalb ohne .form-section-form. */
.wpcf7 form .wpcf7-response-output:empty {
    display: none;
}

.form-section-form .wpcf7-response-output {
    border-color: var(--color-white);
    color: var(--color-white);
    font-size: var(--fs-copy-s);
    margin: var(--space-sm) 0 0;
    padding: 12px 16px;
}

.form-section-notice {
    color: var(--color-white);
}

/* ── Desktop (≥1200px) ───────────────────────────────────── */
@media (min-width: 1200px) {
    .block-form-section {
        padding-top: var(--space-section);     /* 80px */
        padding-bottom: var(--space-section);
    }

    .form-section-headline {
        font-size: 34px;
        line-height: normal;
    }
}

/* ══════════════════════════════════════════════════════════
   MUSTERAUSWAHL

   Nach dem Entwurf Figma 1271-4855 (Steinmuster) und 1271-5169
   (De Ryck), gemessen bei 1519 px Entwurfsbreite. Die Zahlen
   stehen als Kommentar an der jeweiligen Regel, damit beim
   naechsten Abgleich niemand raten muss.

   Der Entwurf setzt 8 Kacheln zu 147,38 px mit 12 px Abstand
   nebeneinander – zusammen genau die 1263 px Inhaltsbreite. Fest
   verdrahtet waeren acht Spalten aber falsch, sobald der Container
   schmaler ist. minmax(135px, 1fr) ergibt bei 1263 px genau acht
   und faellt darunter von selbst auf sieben, sechs, fuenf zurueck.
   ══════════════════════════════════════════════════════════ */

/* Ohne diese Regel setzen sich display:grid und display:flex weiter
   unten gegen das hidden-Attribut durch – die Pillen stuenden dann
   auch ohne JavaScript da und schalteten nichts. */
.form-section-form .wf-muster [hidden],
.form-section-form .wf-muster[hidden] {
    display: none !important;
}

.form-section-form .wf-muster {
    margin-bottom: var(--space-md);            /* 32px – Abstand zur naechsten Gruppe */
}

/* ── Unterzeile und Trennlinie ───────────────────────────── */
.form-section-form .wf-subline {
    font-family: var(--font-body);
    font-size: var(--fs-copy-xs);              /* 14px */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: -8px 0 var(--space-sm);            /* rueckt unter die Gruppenueberschrift */
}

.form-section-form .wf-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: var(--space-md) 0;                 /* 32px */
}

/* ── Sortiment-Pillen ────────────────────────────────────── */
.form-section-form .wf-muster-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);                      /* 8px */
    margin-bottom: var(--space-sm);            /* 16px */
}

.form-section-form .wf-muster-tab {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);           /* 4px */
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    cursor: pointer;
}

.form-section-form .wf-muster-tab.is-active {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

/* ── Serien-Auswahl ──────────────────────────────────────── */
.form-section-form .wf-muster-serie-wahl {
    margin-bottom: var(--space-sm);
}

.form-section-form .wf-muster-serie-feld {
    width: 360px;                              /* Entwurf: 360 × 48 */
    max-width: 100%;
}

/* ── Kachelsaetze ────────────────────────────────────────── */
.form-section-form .wf-muster-satz {
    border: 0;
    margin: 0 0 var(--space-sm);
    padding: 0;
    min-width: 0;                              /* sonst sprengt ein fieldset das Grid */
}

.form-section-form .wf-muster-satz:last-child {
    margin-bottom: 0;
}

.form-section-form .wf-muster-legende {
    float: none;                               /* Firefox stellt legend sonst um */
    width: auto;
    padding: 0;
    margin-bottom: var(--space-xs);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-copy-xs);              /* 14px */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.form-section-form .wf-muster-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 14px 12px;                            /* Entwurf: Zeilen 14, Spalten 12 */
}

/* ── Eine Kachel ─────────────────────────────────────────── */
.form-section-form .wf-muster-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;                                  /* Entwurf: Bild zu Name */
    margin: 0;
    cursor: pointer;
}

/* ⚠️ Nicht display:none und nicht visibility:hidden – beides nimmt der
   Checkbox den Fokus, und die Tastaturbedienung waere weg. Sie liegt
   unsichtbar an Ort und Stelle; bedient wird ueber das umschliessende
   <label>. */
.form-section-form .wf-muster-feld {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.form-section-form .wf-muster-bild {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;                           /* Entwurf: 147,38 quadratisch */
    border-radius: 6px;
    overflow: hidden;
    opacity: 0.8;                              /* Entwurf: ruhende Kachel */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.form-section-form .wf-muster-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-section-form .wf-muster-kachel:hover .wf-muster-bild {
    opacity: 1;
}

/* Der Haken ist Pflicht, nicht Zierde: Der gruene Rahmen allein waere
   ein Zustand, der sich nur ueber die Farbe mitteilt (WCAG 1.4.1). */
.form-section-form .wf-muster-haken {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);            /* Entwurf: Schleier ueber dem Bild */
}

.form-section-form .wf-muster-feld:checked + .wf-muster-bild {
    opacity: 1;
    /* Entwurf: 2px dunkel innen, 5px gruen aussen – am Pixel nachgemessen. */
    box-shadow: 0 0 0 2px var(--color-dark), 0 0 0 5px var(--color-green);
}

.form-section-form .wf-muster-feld:checked + .wf-muster-bild .wf-muster-haken {
    display: flex;
}

.form-section-form .wf-muster-feld:focus-visible + .wf-muster-bild {
    outline: 2px solid var(--color-white);
    outline-offset: 4px;
}

.form-section-form .wf-muster-name {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.form-section-form .wf-muster-feld:checked ~ .wf-muster-name {
    color: var(--color-green);
}

/* Ueber der Hoechstzahl gesperrt – nur sichtbar, wenn eine gesetzt ist. */
.form-section-form .wf-muster-kachel.is-gesperrt {
    cursor: not-allowed;
}

.form-section-form .wf-muster-kachel.is-gesperrt .wf-muster-bild {
    opacity: 0.35;
}

/* ── Zaehler ─────────────────────────────────────────────── */
.form-section-form .wf-muster-zaehler {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: var(--space-sm) 0 6px;
}

/* ── Chips ───────────────────────────────────────────────── */
.form-section-form .wf-muster-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.form-section-form .wf-muster-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;                  /* Entwurf */
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
}

.form-section-form .wf-muster-chip-punkt {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
}

.form-section-form .wf-muster-chip-name {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 18px;
    color: var(--color-white);
}

.form-section-form .wf-muster-chip-weg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.form-section-form .wf-muster-chip-weg:hover,
.form-section-form .wf-muster-chip-weg:focus-visible {
    color: var(--color-white);
}

/* ── Zweispalter ─────────────────────────────────────────────
   Der Entwurf teilt PLZ/Ort und E-Mail/Telefon NICHT haelftig,
   sondern 340 / 16 / 907. Bootstrap col-md-6 traf das nicht. */
.form-section-form .wf-zweispalter {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-sm);                      /* 16px */
}

@media (max-width: 767.98px) {
    .form-section-form .wf-zweispalter {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Schmal ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .form-section-form .wf-muster-kacheln {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }

    .form-section-form .wf-muster-serie-feld {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAFIE DES BESTELLFORMULARS

   ⚠️ Nur unter .wf-form--muster. Der Entwurf setzt hier groessere
   und teils serife Schrift als in den uebrigen Formularen; die
   Klassen .wf-group-heading und .wf-label teilen sich aber
   Kontakt- und Planungsservice-Formular. Ungeschraenkt geaendert
   haette das deren Entwuerfe mitverbogen.

   Hergeleitet aus den Referenzen: Gemessen wird die Glyphenhoehe,
   umgerechnet ueber einen Text bekannter Groesse (die Intro-
   Ueberschrift, laut Figma Literata SemiBold 40 – gemessen 40 px
   mit Unterlaengen). Ohne Unterlaengen bleibt die Oberlaenge,
   rund 0,72 em bei Literata und 0,75 em bei Poppins:

     „Handmuster-Auswahl"   19 px  →  Literata SemiBold ~26
     „Vor- und Nachname*"   15 px  →  Poppins Bold      ~20

   Die Zeilenhoehe folgt aus dem senkrechten Rhythmus: Zwischen
   Feldunterkante und naechster Feldoberkante liegen 62,5 px,
   also 24 Gruppenabstand + 30 Zeilenhoehe + 8 Abstand.
   ══════════════════════════════════════════════════════════ */
.form-section-form .wf-form--muster .wf-group-heading {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 26px;
    line-height: 32px;
    margin: var(--space-md) 0 var(--space-sm);
}

.form-section-form .wf-form--muster .wf-group-heading:first-child {
    margin-top: 0;
}

.form-section-form .wf-form--muster .wf-label {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: var(--space-xs);            /* 8px */
}

/* „(freiwillige Angabe)" steht kleiner und leichter neben der Beschriftung. */
.form-section-form .wf-form--muster .wf-label-zusatz {
    font-weight: 400;
    font-size: var(--fs-copy-xs);              /* 14px */
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767.98px) {
    .form-section-form .wf-form--muster .wf-group-heading {
        font-size: 22px;
        line-height: 28px;
    }

    .form-section-form .wf-form--muster .wf-label {
        font-size: 17px;
        line-height: 26px;
    }
}

/* ══ Bestellformular mobil kompakter (seit 2.8.0) ══════════════════════════
   Kundenfeedback 01, Mobil 28: „Wenn man auf Muster bestellen klickt, sind
   die Textabstände von den einzelnen Feldern und Texten sehr groß – hier
   dauert es recht lange zum Scrollen."
   Einen Mobil-Frame gibt es dafür nicht (User 2026-09-16). Deshalb im
   16/24er-Raster der übrigen Mobil-Werte:
     Feld → Feld                  24 → 16px
     Gruppe → Trennlinie → Gruppe 32 → 24px je Seite
     Datenschutz oben/unten       32 → 24px
   Nur .wf-form--muster – Kontakt und Planungsservice bleiben, wie sie sind. */
@media (max-width: 767.98px) {
    .form-section-form .wf-form--muster .wf-field {
        margin-bottom: 16px;
    }

    .form-section-form .wf-form--muster .wf-muster {
        margin-bottom: 24px;
    }

    .form-section-form .wf-form--muster .wf-divider {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .form-section-form .wf-form--muster .wf-group-heading {
        margin-top: 24px;
    }

    .form-section-form .wf-form--muster .wf-group-heading:first-child {
        margin-top: 0;
    }

    .form-section-form .wf-form--muster .wf-consent {
        margin-top: 24px;
        margin-bottom: 24px;
    }
}