/* ============================================================================
 * HZ Responsive System — Site-wide Typography & Layout Rules
 * Erstellt: 2026-05-15  |  Loaded via hz-engine.php enqueue
 *
 * Konzept: Fluide Typografie via clamp(min, preferred, max). Statt vieler
 * Breakpoints skaliert die Schrift kontinuierlich zwischen Mobile und Desktop.
 * Zusätzlich 2 strategische Breakpoints (820px Tablet, 520px Phone) für
 * Layout-Shifts (Stacks, Grids, Tabellen).
 *
 * Geltungsbereich:
 *   - :root           → Token-System (gilt site-weit)
 *   - body            → Basis-Body-Regeln
 *   - .hz-ss-page     → Stadt-Service-Seiten (Mezan-Theme override-Schutz)
 *   - .hz-table-wrap  → Wiederverwendbarer Tabellen-Scroll-Container
 *
 * Hinweis: Vorherige Quetsch-Regeln aus hz-stadt-service.php wurden entfernt.
 * Backup: hz-stadt-service.bak-2026-05-15.php
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1) DESIGN TOKENS — fluide Typografie & Spacings
 *
 * clamp(MIN, PREFERRED, MAX): die Schrift wächst linear zwischen den
 * Viewport-Grenzen 360px (Mobile-Min) und 1280px (Desktop-Plateau).
 * Faustformel: clamp(MIN_PX, MIN_PX + (MAX-MIN) * (100vw-360px)/(1280-360), MAX_PX)
 * Vereinfacht via vw-Anteil: Variable benutzt MIN, plus (vw - kleiner Anteil), MAX.
 * --------------------------------------------------------------------------*/
:root {
    /* Typografie: clamp(MOBILE, FLUID, DESKTOP) */
    --hz-fs-h1:        clamp(28px, 4.6vw + 12px, 52px);
    --hz-fs-h2:        clamp(24px, 2.8vw + 12px, 38px);
    --hz-fs-h3:        clamp(20px, 1.4vw + 14px, 26px);
    --hz-fs-lead:      clamp(17px, 0.8vw + 14px, 20px);
    --hz-fs-body:      clamp(16px, 0.4vw + 14px, 18px);
    --hz-fs-small:     clamp(13px, 0.3vw + 12px, 15px);
    --hz-fs-btn:       clamp(15px, 0.4vw + 13px, 17px);
    --hz-fs-eyebrow:   clamp(11px, 0.2vw + 10px, 13px);

    /* Line-Heights — auf Mobile etwas enger, auf Desktop luftiger */
    --hz-lh-h1:        1.12;
    --hz-lh-h2:        1.18;
    --hz-lh-body:      1.6;

    /* Container-Padding (Innenabstand zum Viewport-Rand) */
    --hz-container-pad-x: clamp(18px, 3vw, 32px);

    /* Section-Padding (vertikal, oben+unten je Section) — mehr Luft zwischen Themenabschnitten */
    --hz-section-pad-y:   clamp(56px, 7vw, 88px);

    /* Touch-Target: min. 48px (Material), 52px (Apple HIG) für Komfort */
    --hz-tap-min:         52px;

    /* Sticky-CTA-Buffer am Page-Ende (für mu-plugins/hz-mobile-sticky-cta) */
    --hz-sticky-buffer:   84px;
}

/* ---------------------------------------------------------------------------
 * 2) GLOBAL — viewport-safe Defaults
 * --------------------------------------------------------------------------*/

/* Viewport-Overflow generell verhindern (vereinzelte Plugins haben breite Elemente) */
html, body {
    max-width: 100%;
    overflow-x: clip;            /* moderner als overflow-x:hidden, erhält position:sticky */
}

/* Bilder/Medien nie über Container hinaus */
img, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Lange Wörter (deutsche Komposita) brechen sauber statt zu überlaufen */
h1, h2, h3, h4, p, li, td, th, dd, dt, blockquote {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ---------------------------------------------------------------------------
 * 3) HZ STADT-SERVICE PAGES — Typografie-Mapping ans Token-System
 *    (Token-Werte als !important, damit sie über die Inline-Desktop-Werte
 *     im PHP-File greifen, aber Theme/Elementor-Overrides nicht kämpfen)
 * --------------------------------------------------------------------------*/

body.hz-ss-page {
    font-size: var(--hz-fs-body);
    line-height: var(--hz-lh-body);
    padding-bottom: var(--hz-sticky-buffer);
}

/* Container: breathing room scaling */
body.hz-ss-page .hz-ss-container {
    padding-left: var(--hz-container-pad-x);
    padding-right: var(--hz-container-pad-x);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* Headlines — fluid */
body.hz-ss-page .hz-ss-hero-title {
    font-size: var(--hz-fs-h1);
    line-height: var(--hz-lh-h1);
    max-width: 100%;
}
body.hz-ss-page .hz-ss-h2,
body.hz-ss-page .hz-ss-rating-h2 {
    font-size: var(--hz-fs-h2);
    line-height: var(--hz-lh-h2);
}
body.hz-ss-page .hz-ss-hero-subtitle,
body.hz-ss-page .hz-ss-form-text {
    font-size: var(--hz-fs-lead);
}
body.hz-ss-page .hz-ss-hero-eyebrow,
body.hz-ss-page .hz-ss-eyebrow {
    font-size: var(--hz-fs-eyebrow);
}

/* ---------------------------------------------------------------------------
 * 3b) SECTION-STRUKTUR — Sichtbare Trenner zwischen Sections
 *
 * Problem vor 2026-05-15: Sektionen flossen ineinander, kein klarer Rhythmus.
 * Lösung: jede Stadt-Service-Section bekommt einen subtilen Top-Accent-Strich
 * + die Eyebrow wird etwas prominenter (kleiner Cyan-Strich davor).
 * Ergebnis: klare "Section beginnt hier"-Signale ohne aufdringliche Trenner.
 * --------------------------------------------------------------------------*/

/* Sektion-Marker: Nummerierter Cyan-Tab oben links jeder Themen-Sektion.
 * Editorial-Look: "01", "02", "03"... ragt aus der Sektion-Oberkante.
 * Zählt via CSS-counter über alle .hz-ss-* Sektionen, hero ausgenommen.
 * Ergebnis: "Hier startet Themenabschnitt N" ist unübersehbar. */
body.hz-ss-page > section,
body.hz-ss-page .elementor-section.hz-ss-section {
    position: relative;
}

/* Counter-Initialisierung auf dem Page-Container */
body.hz-ss-page,
body.hz-ss-page .hz-ss-page {
    counter-reset: hz-section;
}

/* Section-Karten (nicht Hero/Trustbar — die haben kein Eyebrow) */
body.hz-ss-page .hz-ss-festpreis,
body.hz-ss-page .hz-ss-story,
body.hz-ss-page .hz-ss-methode,
body.hz-ss-page .hz-ss-stadtteile,
body.hz-ss-page .hz-ss-preise,
body.hz-ss-page .hz-ss-faq,
body.hz-ss-page .hz-ss-preisbeispiel,
body.hz-ss-page .hz-ss-garantien,
body.hz-ss-page .hz-ss-bewertungen,
body.hz-ss-page .hz-ss-vergleich,
body.hz-ss-page .hz-ss-paketvergleich,
body.hz-ss-page .hz-ss-crosslinks,
body.hz-ss-page .hz-ss-form,
body.hz-ss-page .hz-ss-cta {
    position: relative;
    border-top: 1px solid rgba(11, 46, 91, 0.10);
    counter-increment: hz-section;
}

/* Nummerierter Section-Badge oben links: "01", "02", … ragt 14px aus der Oberkante. */
body.hz-ss-page .hz-ss-story::before,
body.hz-ss-page .hz-ss-methode::before,
body.hz-ss-page .hz-ss-stadtteile::before,
body.hz-ss-page .hz-ss-preise::before,
body.hz-ss-page .hz-ss-faq::before,
body.hz-ss-page .hz-ss-preisbeispiel::before,
body.hz-ss-page .hz-ss-garantien::before,
body.hz-ss-page .hz-ss-bewertungen::before,
body.hz-ss-page .hz-ss-vergleich::before,
body.hz-ss-page .hz-ss-paketvergleich::before,
body.hz-ss-page .hz-ss-crosslinks::before,
body.hz-ss-page .hz-ss-form::before,
body.hz-ss-page .hz-ss-cta::before {
    content: counter(hz-section, decimal-leading-zero);
    position: absolute;
    top: -16px;
    left: var(--hz-container-pad-x);
    min-width: 44px;
    height: 32px;
    padding: 0 12px;
    background: var(--hz-ss-akzent, #06b6d4);
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(6,182,212,0.25);
    z-index: 2;
    font-family: "Outfit", "Inter", sans-serif;
}

/* Dunkle Sektionen (CTA, Form): Badge bleibt sichtbar, Hairline weg */
body.hz-ss-page .hz-ss-cta,
body.hz-ss-page .hz-ss-form,
body.hz-ss-page .hz-ss-inline-cta {
    border-top: none;
}
body.hz-ss-page .hz-ss-cta::before,
body.hz-ss-page .hz-ss-form::before {
    background: #67e8f9;
    color: #0b2e5b;
    box-shadow: 0 4px 14px rgba(103,232,249,0.35);
}

/* ---------------------------------------------------------------------------
 * 4c) DUNKLE SECTIONS AUFGEWERTET — CTA + Form bekommen Cyan-Akzente
 *
 * Bisheriger Navy-Gradient bleibt, aber wird angereichert mit:
 *   - subtiles Cyan-Dot-Pattern (sieht aus wie sanfter Glow-Punkt)
 *   - schmaler Cyan-Streifen oben (Premium-Akzent-Kante)
 *   - radial Cyan-Glow oben rechts (atmet)
 * --------------------------------------------------------------------------*/
body.hz-ss-page .hz-ss-cta,
body.hz-ss-page .hz-ss-form {
    background:
        radial-gradient(circle at 90% 10%, rgba(6,182,212,0.22) 0%, transparent 45%),
        radial-gradient(circle at 5% 95%, rgba(46,144,250,0.14) 0%, transparent 50%),
        radial-gradient(rgba(103,232,249,0.08) 1.2px, transparent 1.2px) 0 0 / 28px 28px,
        linear-gradient(135deg, #0b2e5b 0%, #102d54 50%, #0b2541 100%);
    position: relative;
}

/* Cyan-Akzent-Streifen oben: dünner Glow-Stripe.
 * Achtung: ::before nutzen, weil ::after schon mit Deko-Glow belegt ist. */
body.hz-ss-page .hz-ss-cta {
    box-shadow: inset 0 2px 0 0 rgba(6,182,212,0.5),
                inset 0 4px 14px -2px rgba(103,232,249,0.20);
}
body.hz-ss-page .hz-ss-form {
    box-shadow: inset 0 2px 0 0 rgba(6,182,212,0.5),
                inset 0 4px 14px -2px rgba(103,232,249,0.20);
}

/* Eyebrow prominenter: skaliert mit dem Token, Cyan-Linie davor */
body.hz-ss-page .hz-ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hz-ss-akzent, #06b6d4);
    margin-bottom: 18px;
}
body.hz-ss-page .hz-ss-eyebrow::before {
    content: "";
    display: inline-block;
    width: clamp(28px, 4vw, 44px);
    height: 2px;
    background: var(--hz-ss-akzent, #06b6d4);
    border-radius: 2px;
    flex-shrink: 0;
}

/* H2 nach Eyebrow: mehr Abstand zum Eyebrow, klarer Block-Anfang */
body.hz-ss-page .hz-ss-eyebrow + .hz-ss-h2,
body.hz-ss-page .hz-ss-eyebrow + h2 {
    margin-top: 6px;
}

/* Dunkle Sections: Eyebrow-Farbe an Dunkel-Background anpassen (Tab + border-top oben sind schon gehandhabt). */
body.hz-ss-page .hz-ss-cta .hz-ss-eyebrow,
body.hz-ss-page .hz-ss-form .hz-ss-eyebrow {
    color: #67e8f9;
}
body.hz-ss-page .hz-ss-cta .hz-ss-eyebrow::before,
body.hz-ss-page .hz-ss-form .hz-ss-eyebrow::before {
    background: #67e8f9;
}

/* ---------------------------------------------------------------------------
 * 4b) SOFT-CYAN-FAMILIE — Section-Hintergrund-Rotation (2026-05-16)
 *
 * Vier Tints aus der Brand-Familie rotieren: weiß · sky-soft · sky · cyan-mint.
 * Jede Section bekommt sofort eine eigene Identität — ohne die Klar-und-Frisch-
 * Brand zu brechen. Kein neutrales Grau mehr, sondern alles im Cyan/Sky-Spektrum.
 *
 *   #ffffff  reines Weiß    (neutral, höchster Kontrast)
 *   #f5fafd  sky-soft       (kaum wahrnehmbar getönt)
 *   #f0f9ff  sky-tint       (deutlicher hellblau)
 *   #ecfeff  cyan-mint      (cyan-tinted, leicht grün)
 * --------------------------------------------------------------------------*/
body.hz-ss-page .hz-ss-trustbar      { background: #f5fafd; }
body.hz-ss-page .hz-ss-festpreis     { background: #ffffff; }
body.hz-ss-page .hz-ss-story         { background: #f5fafd; }
body.hz-ss-page .hz-ss-vergleich     { background: #f0f9ff; }
body.hz-ss-page .hz-ss-methode       { background: #ffffff; }
body.hz-ss-page .hz-ss-stadtteile    { background: #ecfeff; }
body.hz-ss-page .hz-ss-preisbeispiel { background: #ffffff; }
body.hz-ss-page .hz-ss-preise        { background: #f0f9ff; }
body.hz-ss-page .hz-ss-paketvergleich{ background: #ffffff; }
body.hz-ss-page .hz-ss-garantien     { background: #ecfeff; }
body.hz-ss-page .hz-ss-faq           { background: #ffffff; }
body.hz-ss-page .hz-ss-bewertungen   { background: #f5fafd; }
body.hz-ss-page .hz-ss-crosslinks    { background: #ffffff; }

/* Inline-CTA Section (zwischen den hellen Bereichen) — neutral lassen, der dunkle Inline-Box hebt sich von selbst ab */
body.hz-ss-page .hz-ss-inline-cta    { background: #ffffff; }
body.hz-ss-page .hz-ss-pakete-hero   { background: #ffffff; }

/* Sections — vertikale Atmung */
body.hz-ss-page .hz-ss-story,
body.hz-ss-page .hz-ss-methode,
body.hz-ss-page .hz-ss-stadtteile,
body.hz-ss-page .hz-ss-preise,
body.hz-ss-page .hz-ss-faq,
body.hz-ss-page .hz-ss-preisbeispiel,
body.hz-ss-page .hz-ss-garantien,
body.hz-ss-page .hz-ss-bewertungen,
body.hz-ss-page .hz-ss-vergleich,
body.hz-ss-page .hz-ss-paketvergleich,
body.hz-ss-page .hz-ss-cta,
body.hz-ss-page .hz-ss-crosslinks,
body.hz-ss-page .hz-ss-form,
body.hz-ss-page .hz-ss-trustbar {
    padding-top: var(--hz-section-pad-y);
    padding-bottom: var(--hz-section-pad-y);
}

/* Buttons: komfortable Touch-Targets, Schrift skaliert mit */
body.hz-ss-page .hz-ss-btn-anfrage,
body.hz-ss-page .hz-ss-btn-phone,
body.hz-ss-page .hz-ss-btn-anfrage-outline,
body.hz-ss-page .hz-ss-btn-anfrage-cta,
body.hz-ss-page .hz-ss-btn-phone-cta,
body.hz-ss-page .hz-ss-btn-phone-inline,
body.hz-ss-page .hz-ss-btn-pakete,
body.hz-ss-page .hz-ss-btn-pakete-cta {
    min-height: var(--hz-tap-min);
    font-size: var(--hz-fs-btn);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 4) TABELLEN — responsive Pattern
 *    Zwei Strategien:
 *    a) .hz-table-wrap → horizontaler Scroll mit Schatten-Indikator
 *    b) .hz-ss-vergleich-table → vertikales Stacking (3-Spalten zu 3 Blocks)
 * --------------------------------------------------------------------------*/

/* a) Wiederverwendbarer Scroll-Wrapper für jede normale Tabelle.
 *    Anwendung: <div class="hz-table-wrap"><table>...</table></div>
 *    Auf Desktop kein Effekt; auf Mobile Scrollbar wenn Tabelle zu breit. */
.hz-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* visueller Hinweis: rechter Schatten, wenn noch Content rechts liegt */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(11,46,91,0.18), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(11,46,91,0.18), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}
.hz-table-wrap > table {
    width: 100%;
    min-width: 100%;
    margin: 0;
}

/* b) Preistabelle bleibt eine 2-Spalten-Tabelle. Sie passt auf 99% aller Phones.
 *    Nur wenn sie wirklich nicht passt, kann der User horizontal scrollen
 *    (durch .hz-table-wrap im HTML, siehe hz-stadt-service.php). */
body.hz-ss-page .hz-ss-preistabelle {
    width: 100%;
    border-collapse: collapse;
}
body.hz-ss-page .hz-ss-preistabelle td {
    font-size: var(--hz-fs-body);
    padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 22px);
    line-height: 1.5;
}
body.hz-ss-page .hz-ss-preistabelle td:last-child {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* c) Vergleichstabelle — auf < 820px stacken (3-Spalten zu vertikalen Blöcken) */
@media (max-width: 820px) {
    body.hz-ss-page .hz-ss-vergleich-table {
        display: block;
        width: 100%;
    }
    body.hz-ss-page .hz-ss-vergleich-row {
        display: block;
        grid-template-columns: none;
        border-bottom: 2px solid #e1e6eb;
        padding: 0;
    }
    body.hz-ss-page .hz-ss-vergleich-row:last-child {
        border-bottom: none;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div {
        display: block;
        width: 100%;
        padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
        font-size: var(--hz-fs-body);
        box-sizing: border-box;
        line-height: 1.55;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div:first-child {
        background: #0b2e5b;
        color: #ffffff;
        font-weight: 700;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div:nth-child(2) {
        background: #fff5f5;
        color: #8a4040;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div:nth-child(2)::before {
        content: "Selbst gemacht: ";
        font-weight: 700;
        color: #8a4040;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div:last-child {
        background: var(--hz-ss-akzent-soft, #f8fafc);
        color: #1a2332;
    }
    body.hz-ss-page .hz-ss-vergleich-row > div:last-child::before {
        content: "HZ Objektreinigung: ";
        font-weight: 700;
        color: var(--hz-ss-akzent, #0b2e5b);
    }
    body.hz-ss-page .hz-ss-vergleich-row.hz-ss-vergleich-head {
        display: none;
    }
    /* Decorative ::after Häkchen auf Mobile aus — zu unruhig im Stack */
    body.hz-ss-page .hz-ss-vergleich-row > div:last-child::after {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * 5) LAYOUT-SHIFTS — Grids und Flex-Container auf Mobile stapeln
 *    Strategischer Breakpoint: 820px (klassisches Tablet-Portrait).
 *    Darunter werden Multi-Column-Grids zu 1 oder 2 Spalten.
 * --------------------------------------------------------------------------*/

@media (max-width: 820px) {
    /* Single-Column-Grids */
    body.hz-ss-page .hz-ss-hero-grid,
    body.hz-ss-page .hz-ss-form-container,
    body.hz-ss-page .hz-ss-stadtteile-grid,
    body.hz-ss-page .hz-ss-paketgrid,
    body.hz-ss-page .hz-ss-crosslinks-grid,
    body.hz-ss-page .hz-ss-bewertungen-grid-secondary,
    body.hz-ss-page .hz-ss-preisbeispiel-grid {
        grid-template-columns: 1fr;
        gap: clamp(16px, 2.5vw, 22px);
    }

    /* Trust-Bar bleibt 2-spaltig (4 cells in 2x2) */
    body.hz-ss-page .hz-ss-trustbar-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(14px, 2vw, 20px);
    }

    /* Hero-Subtitle-Italic Umbruch verhindern */
    body.hz-ss-page .hz-ss-hero-title em {
        display: inline;
        font-style: normal;
    }

    /* Pakete-Hero-Box stacken */
    body.hz-ss-page .hz-ss-pakete-hero-box,
    body.hz-ss-page .hz-ss-inline-cta-box {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    body.hz-ss-page .hz-ss-pakete-hero-badge {
        position: static;
        display: inline-block;
        align-self: center;
        margin-bottom: 8px;
    }

    /* CTA-Button-Reihen stapeln, Buttons werden komfortabel breit */
    body.hz-ss-page .hz-ss-hero-cta,
    body.hz-ss-page .hz-ss-cta-buttons,
    body.hz-ss-page .hz-ss-inline-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    body.hz-ss-page .hz-ss-btn-anfrage,
    body.hz-ss-page .hz-ss-btn-phone,
    body.hz-ss-page .hz-ss-btn-anfrage-outline,
    body.hz-ss-page .hz-ss-btn-anfrage-cta,
    body.hz-ss-page .hz-ss-btn-phone-cta,
    body.hz-ss-page .hz-ss-btn-pakete,
    body.hz-ss-page .hz-ss-btn-pakete-cta {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    /* Meta-Reihe (Bewertung, Versicherung etc.) wrappt schön */
    body.hz-ss-page .hz-ss-hero-meta,
    body.hz-ss-page .hz-ss-cta-hours {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Hero-Padding moderat, nicht extrem reduziert */
    body.hz-ss-page .hz-ss-hero {
        padding-top: clamp(36px, 6vw, 56px);
        padding-bottom: clamp(40px, 6vw, 60px);
    }
}

/* ---------------------------------------------------------------------------
 * 6) PHONE-PORTRAIT (< 520px) — finetune für kleine Geräte
 *    Nicht aggressiv, nur kleinere Tweaks. clamp() macht den Rest.
 * --------------------------------------------------------------------------*/

@media (max-width: 520px) {
    /* Trust-Bar Cells: 1 Spalte statt 2x2 bei sehr engen Screens */
    body.hz-ss-page .hz-ss-trustbar-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Karten innen etwas luftiger, NICHT enger */
    body.hz-ss-page .hz-ss-garantie-card,
    body.hz-ss-page .hz-ss-paket,
    body.hz-ss-page .hz-ss-preisbeispiel-box,
    body.hz-ss-page .hz-ss-form-wrap {
        padding: clamp(20px, 4vw, 26px);
    }

    /* Cross-Link-Karten kompakter */
    body.hz-ss-page .hz-ss-crosslink-card {
        padding: 18px;
        gap: 14px;
    }
    body.hz-ss-page .hz-ss-crosslink-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    /* FAQ-Items komfortabel */
    body.hz-ss-page .hz-ss-faq-item summary {
        padding: 16px 18px;
        font-size: var(--hz-fs-body);
        line-height: 1.45;
    }
    body.hz-ss-page .hz-ss-faq-answer {
        padding: 0 18px 18px;
        font-size: var(--hz-fs-body);
    }
}

/* ---------------------------------------------------------------------------
 * 7) FORM-INPUTS — site-wide, nicht nur stadt-service
 *    Inputs überlaufen oft auf Mobile, weil Plugins fixe widths setzen.
 * --------------------------------------------------------------------------*/

@media (max-width: 820px) {
    body.hz-ss-page input:not([type="checkbox"]):not([type="radio"]),
    body.hz-ss-page textarea,
    body.hz-ss-page select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ---------------------------------------------------------------------------
 * 8) STICKY-CTA — Mobile-Bar hat Vorrang, Desktop-Sticky verbergen
 * --------------------------------------------------------------------------*/

@media (max-width: 820px) {
    body.hz-ss-page .hz-ss-desktop-sticky {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * 9) PRINT — keine Sticky-CTAs auf Druck
 * --------------------------------------------------------------------------*/

@media print {
    .hz-ss-mobile-sticky,
    .hz-ss-desktop-sticky,
    .hz-mobile-sticky-cta {
        display: none !important;
    }
}