/* ============================================================
   OH DARLING v2 — Design-System-Kernel
   Basis: BAU-REGELN.md + BRIEFING.md + brand-guide.txt (Version 1.1)
   Heller Ivory-Grundcharakter, editorial, Navy als Primärfarbe.
   Alle Farben ausschließlich über Tokens in diesem :root-Block —
   einzige bewusste Ausnahme: .ph-Platzhalter (Abschnitt 20), dessen
   Werte laut BAU-REGELN Abschnitt 6 wörtlich vorgegeben sind.
   Inhaltsverzeichnis:
   0  Tokens            8  Footer             16 Diff-Karten
   1  Reset & Basis      8b WhatsApp-Float     17 Chips
   2  Sicherheitsnetz    9  Reveal-Motion       18 Formulare
   3  Typografie         9b Media-Reveal        19 Buchungs-Steps
   4  Layout             10 Karten (+Hebung)    20 .ph Platzhalter
   5  Buttons            10b Bildkarte          21 Legal-Page
   6  Navbar             10c Icon-Badge         22 Hero (Seitenkopf)
   7  Mobile-Menü        11 Eyebrow             22b Bühnen (.stage)
                         12 Sedcards+Filter     22c Bogenrahmen (.arch)
                          +Merkliste            22d Häkchenliste, Pull-Quote
                         12b Kalender 14-Tage   22e Zeitleiste
                         13 Accordion           22f „Mehr lesen“
                         14 FAQ-Tabs (Pille)    22g Oberflächen-Reset (Navy)
                         15 Marquee (+Text)     23 Utilities
                                                24 Responsive
   Korrekturschleife 29.09.2026 (Kernel K1 bis K15): 9b, 10b, 10c, 22b bis 22f
   sind neu, 10/12/12b/14 überarbeitet, Doku in DESIGN.md „Nachtrag:
   Korrekturschleife 29.09.2026 (Kernel)“. Kernel-Nachtrag 29.09.2026 (Abend):
   22g (helle Karten in Navy-Flächen), Sand-Bühne (22b), .section-head row-gap,
   .quality-grid (Abschnitt 24), Doku „Nachtrag 2“ in DESIGN.md.
   Korrekturschleife 30.09.2026 (Paket W2 Kernel): 6 Burger mit drei ganzzahligen Strichen,
   7 großes Schließen-X im Overlay, 10/12 Sedcard-Karte angehoben (Verlauf, Name, Textlink,
   Hover, Badges), Doku „Nachtrag 7“ in DESIGN.md.
   Korrekturrunde 02.10.2026 (Paket K, Meeting Leila × Nicholas 01.10.): Abschnitt 0 Radien jetzt
   4 px (3 px Mini) und Token --academy-deep, 5 Outline-Buttons und Social-Kreise auf Navy mit
   Eigenfüllung, 10c .icon-badge--gold Orange mit weißem Icon, 14 FAQ-Tabs gestapelt 4 px,
   16 Diff-Karten ohne Zebra, 18 Datei-Feld input[type=file], 22 Hero über --radius-stage;
   script.js: Live-Rücknahme von Fehlern, data-max-files, „Darling suchen“ entfernt.
   Doku: DESIGN.md „Nachtrag Korrekturrunde 02.10.2026“.
   ============================================================ */

/* ===========================================================
   0. TOKENS
   =========================================================== */
:root {
  color-scheme: light;

  /* -- Farb-Kanäle (für rgba-Komposition) -- */
  --navy-rgb: 17, 34, 80;
  --ivory-rgb: 245, 241, 232;

  /* -- Basisfarben (exakt aus Brand Guide) -- */
  --navy: #112250;
  --navy-light: #1a3168;      /* dekorative Verlaufsstufe auf Navy-Flächen */
  --ivory: #F5F1E8;
  --ivory-dark: #ece5d6;      /* Karten-/Flächen-Ton auf Ivory, = .ph-Fläche */
  --ivory-darker: #e1d4bd;    /* Trennlinien auf Ivory-dark-Flächen */
  --white: #ffffff;

  /* -- Navy-Transparenzstufen (Text/Linien auf Ivory) -- */
  --navy-06: rgba(var(--navy-rgb), .06);
  --navy-08: rgba(var(--navy-rgb), .08);
  --navy-10: rgba(var(--navy-rgb), .10);
  --navy-16: rgba(var(--navy-rgb), .16);
  --navy-25: rgba(var(--navy-rgb), .25);
  --navy-35: rgba(var(--navy-rgb), .35);
  --navy-ink-2: rgba(var(--navy-rgb), .66);    /* Sekundärer Navy-Text (Caption-Größe); AA-korrigiert, siehe DESIGN.md */
  --navy-deko-50: rgba(var(--navy-rgb), .50);  /* NUR dekorativ (z. B. .value-num), nie Text */
  --navy-70: rgba(var(--navy-rgb), .70);

  /* -- Ivory-Transparenzstufen (Text/Linien auf Navy) -- */
  --ivory-07: rgba(var(--ivory-rgb), .07);     /* Korrekturrunde 02.10.2026: Eigenfüllung von Outline-Buttons und Social-Kreisen auf Navy (≈ #21305B auf #112250) */
  --ivory-08: rgba(var(--ivory-rgb), .08);
  --ivory-10: rgba(var(--ivory-rgb), .10);
  --ivory-15: rgba(var(--ivory-rgb), .15);     /* Korrekturrunde 02.10.2026: Hover-Füllung dieser Buttons (≈ #334167 auf #112250) */
  --ivory-18: rgba(var(--ivory-rgb), .18);
  --ivory-25: rgba(var(--ivory-rgb), .25);
  --ivory-35: rgba(var(--ivory-rgb), .35);
  --ivory-58: rgba(var(--ivory-rgb), .58);     /* Text-Einsatz (Caption/Micro-Größe); AA-korrigiert, siehe DESIGN.md */
  --ivory-50: rgba(var(--ivory-rgb), .50);
  --ivory-62: rgba(var(--ivory-rgb), .62);
  --ivory-65: rgba(var(--ivory-rgb), .65);
  --ivory-82: rgba(var(--ivory-rgb), .82);

  /* -- Academy (Warmgold) — nur Academy-Kontexte, max. 10–15 % Fläche -- */
  --academy: #C99136;
  --academy-ink: #8a6120;             /* Textvariante auf Ivory, ≈4.9:1 */
  /* Korrekturrunde 02.10.2026 (Leila: „mehr weg von Blau, hin zu Orange“): dunkleres
     Academy-Orange, GLEICHER Farbton (37°) wie --academy, für Icon-Kreise mit weißem Icon.
     Weiß darauf 3,39:1 (Icon ≥ 3:1), Navy darauf 4,53:1 (Text ≥ 4,5:1), Ivory darauf 3,01:1.
     Ausnahme von „Gold nie als Fläche“, gilt nur für academy.html (DESIGN.md Nachtrag
     „Korrekturrunde 02.10.2026“). */
  --academy-deep: #B5822F;
  --academy-tint: rgba(201, 145, 54, .14);
  --academy-tint-strong: rgba(201, 145, 54, .26);
  /* K4/Punkt 12: Champagner-Fläche der Academy-Bühne = 24 % Academy-Gold über
     Ivory gemischt (rechnerisch #EADABD). Navy darauf 11,15:1, --navy-70 darauf
     5,04:1. Gold selbst bleibt auf dieser Fläche nur Bogenlinie oder Icon-Badge. */
  --academy-surface: #EADABD;

  /* -- Event-Begleitung (Warm Grey) -- */
  --warm-grey: #666B76;
  --warm-grey-ink: #5a5f69;           /* abgedunkelt für Fließtext ≈5.7:1 */
  --warm-grey-tint: rgba(102, 107, 118, .12);
  --warm-grey-line: rgba(102, 107, 118, .3);

  /* -- Plattform-Funktionsfarben: NUR Merkliste/Verfügbarkeit, nie redaktionell -- */
  --pink: #FF52D9;
  --pink-ink: #C4189F;                /* Textvariante ≈4.7:1 */
  --pink-tint: rgba(255, 82, 217, .12);
  --teal: #00CDB7;
  --teal-ink: #007A6B;                /* Textvariante ≈4.7:1 */
  --teal-tint: rgba(0, 205, 183, .14);
  --teal-tint-solid: #dbf8f5;         /* = 14 % Teal über Weiß, DECKEND: Badge über Foto/Platzhalter (Teal-Ink darauf 4,69:1) */
  --teal-line: rgba(0, 205, 183, .35);

  /* -- Funktionsfarbe Formular-Fehler (kein Markenakzent, nur UI) -- */
  --error: #a13d3d;
  --error-tint: rgba(161, 61, 61, .10);

  /* -- Oberflächen -- */
  --surface-page: var(--ivory);
  --surface-card: var(--white);
  --surface-card-alt: var(--ivory-dark);
  --surface-navy: var(--navy);
  --surface-navy-alt: var(--navy-light);

  /* -- Linien -- */
  --line-1: var(--navy-10);
  --line-2: var(--navy-16);
  --line-strong: var(--navy-25);

  /* -- Radius (Korrekturrunde 02.10.2026, Leila/Nicholas: 4 px statt rund.
        Leila mag keine abgerundeten Ecken, Nicholas will nicht 0 px, sondern
        3 bis 4 px. Flächen, Karten, Bilder, Bühnen, Hero, Felder, Tabellen,
        Kalender = 4 px; Mini-Elemente (Checkbox-Kästchen, Legenden-Swatch)
        = 3 px. Es bleiben rund: alle Buttons und Pillen
        (--radius-full) und alle Kreise (999px / 50%). Bogenrahmen .arch:
        oben Bogen, die unteren Ecken folgen --radius-media. Die Token-Namen
        bleiben bestehen (Seiten-CSS nutzt sie), nur die Werte sind neu.
        Vorher (29.09.2026, K1): 22 / 16 / 12 / 6 / Bühne 30, mobil 22 px.) -- */
  --radius-card: 4px;      /* Karten */
  --radius-media: 4px;     /* Bildflächen */
  --radius-sm: 4px;        /* kleine Flächen (Kalendertage, Eingaben) */
  --radius-xs: 3px;        /* Mini-Elemente (Kalender-Legende, Checkbox-Kästchen) */
  --radius-full: 100px;    /* Pillen: Buttons, Tabs */
  --radius-stage: 4px;     /* Bühnen (.stage) und Hero, auch mobil */
  --stage-inset: 10px;     /* Einzug der Bühnen links/rechts/zwischen den Bühnen; ≤ 720px: 8px */

  /* -- Layout -- */
  --nav-h: 78px;
  --nav-gap-min: 24px;   /* C11 (Fix-Runde 2): Mindestluft zwischen Wortmarke, Linkgruppe und CTA/Menü ab 981 px */
  --content-width: 1320px;
  --section-pad-x: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(60px, 9vw, 132px);
  --section-pad-y-sm: clamp(40px, 5vw, 72px);
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 20px;
  --gap-lg: clamp(28px, 3.4vw, 48px);
  --gap-xl: clamp(40px, 5vw, 64px);

  /* -- Typografie: Schriften -- */
  --font-head: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Birthstone Bounce", cursive;

  /* -- Typografie: Skala (Pflicht: jede Größe als clamp) -- */
  --fs-h1: clamp(38px, 6.2vw, 92px);
  --fs-h1-split: clamp(31px, 4.4vw, 68px);  /* H1 im asymmetrischen 2-Spalter (Hero-Kanon) */
  --fs-h2: clamp(26px, 4.2vw, 58px);      /* Fix-Runde 1 (B2-18): Minimum 26 statt 30 px, damit die Hero-H1 (31 px mobil, --fs-h1-split) sichtbar größer bleibt als jede Sektions-H2 */
  --fs-h3: clamp(19px, 1.6vw + 8px, 25px);
  --fs-h3-sm: clamp(17px, 1vw + 10px, 21px);
  --fs-sedcard-name: clamp(18px, 10cqi, 26px);   /* 30.09.2026: Name auf der Sedcard-Karte (vorher --fs-h3-sm, 17 bis 21 px); richtet sich nach der KARTENbreite (cqi, Container = .sedcard): Handy-Karten bis 180 px breit 18 px, 215 px 21,5 px, ab 260 px 26 px (Einspalter auf dem Handy, Desktop-Raster) */
  --fs-lead: clamp(19px, 2vw, 29px);
  --fs-lead-head: clamp(18px, 1vw + 9px, 23px);   /* K12: ruhigerer Lead nur unter Sektions-H2 (.section-head .lead) */
  --fs-quote: clamp(22px, 1.4vw + 12px, 32px);    /* K11: Pull-Quote */
  --fs-body: clamp(15px, 1vw + 9px, 17px);
  --fs-body-sm: clamp(15px, .5vw + 12px, 16px);
  --fs-caption: clamp(12px, .8vw + 7px, 13.5px);
  --fs-input: clamp(16px, .3vw + 15px, 17px);   /* fokussierbare Felder — iOS zoomt unter 16px */
  --fs-micro: clamp(11px, .5vw + 8px, 12.5px);
  --fs-btn: clamp(13.5px, .5vw + 11.5px, 15px);
  --fs-wordmark: clamp(17px, 1vw + 14px, 20px);
  --fs-script-name: clamp(44px, 7vw, 88px);
  --fs-script-sign: clamp(26px, 2vw + 14px, 32px);

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.72;

  --ls-head: -.02em;
  --ls-eyebrow: .14em;
  --ls-btn: -.01em;

  /* -- Motion -- */
  --ease-out: cubic-bezier(.22, .68, 0, 1);
  --ease-swift: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .22s;
  --dur-med: .4s;
  --dur-slow: .7s;
  --dur-pill: .34s;                                /* K2: gleitende Tab-Pille */
  --ease-pill: cubic-bezier(.32, .72, 0, 1);

  /* -- Schatten (sparsam, feine Linien sind Standard) -- */
  --shadow-soft: 0 20px 44px -28px rgba(var(--navy-rgb), .32);
  --shadow-pop: 0 12px 28px -18px rgba(var(--navy-rgb), .3);

  /* -- z-Index -- */
  --z-nav: 50;
  --z-menu: 60;
  --z-wa: 40; /* schwebender WhatsApp-Button — unter der Navbar/dem Mobile-Menü, über dem Seiteninhalt */
}

/* Ohne Container-Query-Einheiten (cqi) fällt der Sedcard-Name auf eine Viewport-Formel zurück */
@supports not (width: 1cqi) {
  :root { --fs-sedcard-name: clamp(18px, .9vw + 13px, 26px); }
}

/* ===========================================================
   1. RESET & BASIS
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
main { display: block; }
html, body { overflow-x: clip; }

body {
  background: var(--surface-page);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* hyphens:auto NUR für Karteninhalte (BAU-REGELN Abschnitt 5) — Headlines/Lead
   bleiben ungetrennt, damit editorial-hochwertige Zeilenbilder nicht durch
   Trennstriche in großer Schrift zerrissen werden. */
.card, .sedcard, .feature-card, .diff-card, .chip, .acc-panel-inner, .legal-page,
.media-card, .check-list, .timeline-step, .readmore-body { hyphens: auto; }
h1, h2, h3, h4, .h1, .h2, .h3, .lead { hyphens: manual; }

a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible { outline-color: var(--ivory); }
/* Helle Container INNERHALB einer .on-navy-Fläche (Karte, Sedcard, Buchungs-
   Shell, Bildkarte, Feature-Karte, helle Diff-Karte) sind selbst kein dunkler
   Untergrund: der Nachkommen-Selektor oben griff bislang trotzdem hinein
   (Reviewer-Befund D-09: Fokusring Ivory auf weißer Kartenfläche = 1,13:1).
   Der komplette „Oberflächen-Reset“ (Fokusring, Textfarben, Buttons, Textlink,
   Linien …) steht gebündelt in Abschnitt 22g; .card--navy und .diff-card.with
   bleiben ausgenommen, dort IST die Karte der dunkle Untergrund. */

/* ===========================================================
   2. SICHERHEITSNETZ
   Zusätzlich gehört ins <head> jeder Seite (siehe partials.html):
   <noscript><style>.reveal,.word-reveal .word{opacity:1!important;
   filter:none!important;transform:none!important}.acc-panel{max-height:none!important;
   overflow:visible!important;visibility:visible!important}.faq-panel[hidden]{display:block!important}
   .acc-sign,.faq-tabs{display:none!important}</style></noscript>
   Ohne JS bleiben Accordion-Panels sonst bei max-height:0 zugeklappt und
   [hidden] FAQ-Panels unsichtbar — betrifft Ablauf, FAQ und das komplette
   Buchungsformular auf jeder Seite. visibility:visible!important hier ist
   das Gegenstück zum visibility:hidden-Fix aus Fix-Runde 2 (R2-2-06,
   Abschnitt 13 unten) — ohne JS greift .is-open nie, also muss der
   noscript-Block die Panels selbst wieder sichtbar machen.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===========================================================
   3. TYPOGRAFIE
   =========================================================== */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: var(--ls-head); color: inherit; text-wrap: balance; }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 600; }
.h1--split { font-size: var(--fs-h1-split); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 600; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
.h3-sm { font-size: var(--fs-h3-sm); line-height: var(--lh-snug); font-weight: 600; font-family: var(--font-head); letter-spacing: var(--ls-head); }

.lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.4; font-weight: 400; color: var(--navy-70); }
.on-navy .lead, .card--navy .lead { color: var(--ivory-82); }

p, .body-text { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.card-desc { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--navy-70); }
.on-navy .card-desc, .card--navy .card-desc { color: var(--ivory-82); }
/* Oberflächen-Reset für helle Karten in Navy-Flächen (Text, Buttons, Links,
   Linien, Fokusring): gebündelt in Abschnitt 22g. */

.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--navy-ink-2); }
.on-navy .caption, .card--navy .caption { color: var(--ivory-62); }

/* Fix-Runde 1 (Gate B, B2-27, 29.09.2026): Textlinks im Fließtext waren 17 bis 22 px hoch
   (Projektregel: Tap-Ziel 44 px). Polster an der Inline-Box: Zeilenhöhe und Textposition
   bleiben unverändert (bei Inline-Elementen zählt vertikales Polster nicht fürs Layout, das
   seitliche Polster von 8 px hebt ein negativer Rand von −8 px wieder auf), die Box und damit
   die Trefferfläche wächst auf mindestens 45 × 46 px (auch sehr kurze Links wie „FAQ“ mit 29 px
   Textbreite). Gilt für alle Links ohne eigene Klasse in Absätzen, Adressen, Checkbox-
   Beschriftungen und `.text-links`; Buttons und `.textlink` (haben min-height) sowie Listen-
   und Footer-Links sind nicht betroffen. Die frühere seitenlokale Regel in events.css
   (`.text-links a`) ist damit überflüssig. */
:is(p, address, .box-label, .text-links) a:not([class]) { padding: calc((46px - 1.3em) / 2) 8px; margin-inline: -8px; }

.micro-label {
  font-size: var(--fs-micro); line-height: 1.2; font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy-ink-2);
}
.on-navy .micro-label, .card--navy .micro-label { color: var(--ivory-62); }

.name-script { font-family: var(--font-script); font-weight: 400; font-size: var(--fs-script-name); line-height: 1; letter-spacing: 0; }
.signature-script { font-family: var(--font-script); font-weight: 400; font-size: var(--fs-script-sign); line-height: 1.2; letter-spacing: 0; }

.draft-flag {
  display: inline-block; background: var(--academy-tint); color: var(--navy);
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--academy-tint-strong);
}

/* &shy;-Trennungen dürfen keine sichtbare Lücke werfen, text-wrap:balance ist Basis */
h1, h2, h3 { text-wrap: balance; }

/* ===========================================================
   4. LAYOUT
   =========================================================== */
.section { position: relative; padding: var(--section-pad-y) var(--section-pad-x); }
.section--tight { padding-top: var(--section-pad-y-sm); padding-bottom: var(--section-pad-y-sm); }
.section--below-nav { padding-top: calc(var(--nav-h) + var(--section-pad-y)); }
/* Randlose Sektion (z. B. Städte-Marquee): die Sektion selbst geht volle
   Breite, ihr .section-inner-Kind holt sich das übliche Sektions-Padding
   zurück — für Inhalt, der NICHT randlos laufen soll (z. B. der Sektionskopf). */
.section--bleed-x { padding-left: 0; padding-right: 0; }
.section--bleed-x > .section-inner { padding-left: var(--section-pad-x); padding-right: var(--section-pad-x); }
.section-inner { max-width: var(--content-width); margin: 0 auto; }

/* In-Page-Sprungziele (Anker-Klicks UND native Hash-Aufrufe ohne JS) dürfen
   nicht unter der fixierten Navbar landen. */
main [id], section[id], .acc-item[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

.bleed { background: var(--surface-navy); color: var(--ivory); }
.bleed--gradient { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-light) 100%); }

/* Kernel-Nachtrag 29.09.2026 (Gate-A-Befund P4): der Spaltenabstand --gap-xl
   (40 bis 64 px) gilt nur NEBEN dem Lead. Sobald der Lead unter die H2 rutscht
   (1181 bis rund 1310 px durch flex-wrap, danach bis 390 px durch die Spalten-
   Ansicht unter 1180 px), wirkte derselbe Wert als Zeilenabstand: der Lead
   stand 40 bis 64 px unter seiner eigenen H2, fast so weit wie der Abstand zur
   nächsten Sektion. row-gap trennt beides: Lead gehört mit 20 px eng zu seiner
   H2 (Eyebrow zu H2 sind 14 px), der Kopf zum Inhalt bleibt margin-bottom. */
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap-xl); row-gap: var(--gap-md); flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px);
}
/* Fix-Runde 1 (Gate B, B22, 29.09.2026): ab 1181 px steht der Lead immer NEBEN der H2
   (Raster Kopfspalte | 480-px-Leadspalte, kein Umbruch). Vorher entschied die Länge der
   H2 (Flex-Wrap zwischen 1181 und rund 1310 px), ob der Lead daneben oder darunter stand:
   auf derselben Seite standen gestapelte und nebeneinander gesetzte Köpfe gemischt.
   Ohne Lead (nur .head-left) bleibt die zweite Spalte leer. Unter 1181 px stapelt der
   Kopf (Abschnitt 24). */
@media (min-width: 1181px) {
  .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; column-gap: var(--gap-xl); }
  /* Fix-Runde 2 (Gate C, C1, sperr, 30.09.2026): Die Leadspalte gibt es nur, wenn es einen Lead
     gibt. Ein Kopf ohne `.lead` (nur `.head-left`) steht in einer einzigen Spalte. Vorher bekam
     `.head-left` in einer schmalen Umgebung (index.html #qualitaet: Kopf in der 5fr-Spalte neben
     dem Foto, 456 px breit) die Spaltenbreite 0 px, weil die leere 480-px-Spalte den ganzen
     Platz zuerst nahm: H2 als Wortsäule über 6 Zeilen, Eyebrow über 4. `.head-left` behält seine
     680-px-Grenze (siehe unten), die Breite richtet sich nach dem Container. */
  .section-head:not(:has(> .lead)) { grid-template-columns: minmax(0, 1fr); }
  /* Sicherung für Köpfe MIT Lead in einem schmalen Container (Kopf neben einem Foto, Kopfbreite
     unter rund 720 px): Opt-in `.section-head--stack` stapelt Kopf und Lead auch ab 1181 px. */
  .section-head--stack { grid-template-columns: minmax(0, 1fr); }
}
.section-head .head-left { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
/* K12 (29.09.2026): Sektions-Leads kleiner und breiter, weniger „Textblock“ neben
   der H2. Nur .section-head .lead; Hero-Leads (.hero-foot .lead) und freie
   .lead-Absätze behalten --fs-lead. */
.section-head .lead { font-size: var(--fs-lead-head); max-width: 480px; flex-shrink: 0; margin: 0; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-xl); align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); }
/* War bereits in den Responsive-Regeln verdrahtet, ohne je eine Basisregel zu
   haben — hier vollwertig als 3-Spalten-Grid definiert (Abgleich DESIGN.md
   Abschnitt 4). Dreier-Raster OHNE Waise (Kernel-Nachtrag 29.09.2026): 3 Spalten
   ab 981 px, 721 bis 980 px zwei Spalten mit der dritten Karte mittig darunter
   (halbe Breite), ≤ 720 px eine Spalte, siehe Abschnitt 24. */
.quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); }

.section-cta {
  margin-top: clamp(28px, 3.4vw, 44px); display: flex; align-items: center;
  justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap;
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line-1);
}
.on-navy .section-cta, .card--navy .section-cta { border-top-color: var(--ivory-18); }
.section-cta p { font-size: var(--fs-body-sm); color: var(--navy-70); max-width: 460px; margin: 0; }
.on-navy .section-cta p, .card--navy .section-cta p { color: var(--ivory-82); }
/* Fix-Runde 1 (Gate B, B2-12, 29.09.2026): Modifier `.section-cta--lead` = große Brückenzeile.
   Der Übergang vor dem Hauptbutton einer Seite (events „Concierge“, karriere W6 „Klingt das
   nach dir?“) stand einmal als 16-px-Fußnote in Grau, einmal als H3-großer Geist-Satz.
   Jetzt ein Baustein: Geist 500 in H3-Größe, Navy, höchstens 560 px breit, mehr Luft davor.
   Nutzung: <div class="section-cta section-cta--lead reveal"><p>…</p><a class="btn …">…</a></div>
   Auf Navy Ivory (in einer hellen Karte auf Navy zurück auf Navy, Abschnitt 22g). */
/* Fix-Runde 2 (Gate C, C2-13, 30.09.2026): Brückensatz und Button sind EINE Einheit. Vorher
   trennte `justify-content: space-between` beide um bis zu 916 px (karriere W6, 1440 px) bzw.
   506 px (events Concierge): der Satz stand links, der Button am rechten Rand, dazwischen
   Leere. Jetzt steht der Button direkt hinter dem Satz (fester Abstand), bei Platzmangel
   bricht er darunter um (row-gap), unter 721 px stehen beide untereinander (Abschnitt 24). */
.section-cta--lead { margin-top: clamp(36px, 4.4vw, 64px); justify-content: flex-start; column-gap: clamp(24px, 3vw, 44px); row-gap: var(--gap-md); }
.section-cta--lead p {
  max-width: 560px; font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-snug);
  font-weight: 500; letter-spacing: var(--ls-head); color: var(--navy); text-wrap: balance;
}
.on-navy .section-cta--lead p, .card--navy .section-cta--lead p { color: var(--ivory); }

.stack { display: flex; flex-direction: column; gap: var(--gap-sm); }
.divider { border: none; border-top: 1px solid var(--line-1); }
.on-navy .divider, .card--navy .divider { border-top-color: var(--ivory-18); }

/* ===========================================================
   5. BUTTONS
   =========================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn);
  white-space: nowrap; transition: transform var(--dur-fast) var(--ease-swift), background-color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift), color var(--dur-fast) var(--ease-swift);
}
.btn:active { transform: scale(.97); }

.btn-label { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.btn-label span { display: block; transition: transform var(--dur-med) var(--ease-swift); }
.btn-label .copy-2 { position: absolute; inset: 0; transform: translateY(100%); }

.btn-arrow { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur-med) var(--ease-swift); }
/* Zurück-Pfeile (Buchungs-Steps u.ä.) sind ein um 180° gedrehter .btn-arrow —
   als Klasse statt Inline-Style, damit die Hover-Regel unten greifen kann. */
.btn-arrow--back { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-label .copy-1 { transform: translateY(-100%); }
  .btn:hover .btn-label .copy-2 { transform: translateY(0); }
  .btn:hover .btn-arrow { transform: translate(2px, -2px); }
  .btn:hover .btn-arrow--back { transform: rotate(180deg) translate(2px, -2px); }
}
.btn:focus-visible .btn-label .copy-1 { transform: translateY(-100%); }
.btn:focus-visible .btn-label .copy-2 { transform: translateY(0); }

.btn-solid { background: var(--navy); color: var(--ivory); }
.btn-solid .copy-2 { color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .btn-solid:hover { background: var(--navy-light); } }

.on-navy .btn-solid { background: var(--ivory); color: var(--navy); }
.on-navy .btn-solid .copy-2 { color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .on-navy .btn-solid:hover { background: var(--white); } }

.btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy-25); }
.btn-outline .copy-2 { color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--navy); background: var(--navy-06); } }

/* Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A2-03): Outline-Buttons auf Navy haben eine
   dezente Eigenfüllung „einen Ticken heller“ als die Fläche (Ivory 7 %, relativ, folgt jeder Navy-
   Fläche), Hover deutlich heller (Ivory 15 %). Pillenform und Rahmen unverändert. */
.on-navy .btn-outline { color: var(--ivory); border-color: var(--ivory-25); background: var(--ivory-07); }
.on-navy .btn-outline .copy-2 { color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .on-navy .btn-outline:hover { border-color: var(--ivory); background: var(--ivory-15); } }

.btn-sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-caption); }
.btn-block { width: 100%; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--navy); color: var(--ivory);
  transition: transform var(--dur-med) var(--ease-swift), background-color var(--dur-fast) var(--ease-swift);
}
.icon-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { transform: rotate(45deg); } }
.icon-btn:focus-visible { transform: rotate(45deg); }
.icon-btn-sm { width: 44px; height: 44px; }
.icon-btn-sm svg { width: 13px; height: 13px; }
.on-navy .icon-btn { background: var(--ivory); color: var(--navy); }

/* ===========================================================
   6. NAVBAR
   =========================================================== */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: var(--surface-page); border-bottom: 1px solid var(--line-1); }
.navbar-bar {
  /* Muss exakt auf die Inhaltskanten von .section-inner treffen (Fehler 20
     der 20-Fehler-Checkliste): --content-width + 2× --section-pad-x, nicht
     ein davon losgelöster fester Wert. */
  max-width: calc(var(--content-width) + 2 * var(--section-pad-x));
  margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 1.1vw, 16px);   /* Fix-Runde 1: 16 px erst ab 1454 px, bei 981 px knapp 11 px (gewinnt die 1,3 px, die dort fehlten) */
  height: var(--nav-h); padding: 0 var(--section-pad-x);
}
/* Fix-Runde 2 (Gate C, C11, 30.09.2026): Desktop-Navigation (ab 981 px) mit festem Mindestabstand
   von 24 px zwischen Wortmarke, Linkgruppe und rechter Gruppe (vorher 10,8 px bei 981 px, dazu
   Zufallsluft aus space-between: 8 bis 9 px zwischen Logo und dem Box-Rand von „Start“, 11 bis
   16 px sichtbar). Die Textlinks tragen 7 px Innenpolster und ragen per margin-inline −7 px in den
   Abstand: 24 px Abstand = 24 px bis zum ersten Buchstaben, 17 px bis zur Link-Box. Passt die Zeile
   mit diesem Abstand nicht, nimmt script.js 7b (fitNavbar) zuerst den CTA heraus (danach die
   Textlinks); die Luft schrumpft also nie unter 24 px, statt zu quetschen. Gilt auf allen Seiten
   gleich, die Linkgruppe steht dadurch auf allen Seiten ab 981 px identisch. */
@media (min-width: 981px) {
  .navbar-bar { gap: var(--nav-gap-min); }
}
/* A-18 (Tap-Ziel < 44px): der Logo-Link selbst wird nur durch seinen Inhalt
   hoch, nicht durch die 40px-Bildmarke — min-height erzwingt die Pflicht-
   höhe unabhängig vom Zeilenkasten der Wortmarke. */
.navbar-logo { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.navbar-logo-mark {
  width: 40px; height: 40px; border-radius: 999px; background: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 7px;
}
.navbar-logo-mark img { width: 100%; height: 100%; object-fit: contain; min-width: 24px; min-height: 24px; }
.navbar-logo .wordmark { font-family: var(--font-head); font-size: var(--fs-wordmark); font-weight: 600; letter-spacing: var(--ls-head); color: var(--navy); white-space: nowrap; }

/* F25/F26: 8 Punkte (Start · Darling finden · Events · Academy · Über uns ·
   FAQ · Werde Darling · Kontakt) statt vorher 7 — Schrift/Abstände eigens
   verknappt (statt --fs-body-sm/--gap-*), damit die Zeile ab 981px (dem
   bestehenden Desktop-Breakpoint, siehe Abschnitt 24) einzeilig bleibt,
   ohne die Labels zu kürzen. Bei 1024px ergibt das rechnerisch ≈13.5px
   Schrift/≈11px Lücken, ab ~1330px den vollen Wert 15px/22px (gemessen mit
   den echten Fonts, siehe DESIGN.md Abschnitt 7 „Navigation 8 Punkte"). */
/* Fix-Runde 1 (Gate B, B17, 29.09.2026): „Start“ (34 px) und „FAQ“ (30 px) waren als
   Box schmaler als 44 px (die frühere ::before-Trefferzone vergrößerte nur die
   Klickfläche, nicht die Box, die Prüfskripte und Screenreader-Tools messen). Jetzt
   trägt der Link selbst 7 px Innenpolster je Seite und mindestens 44 px Breite. Damit
   die Zeile gleich lang bleibt, ist der Abstand um 2 × 7 px = 14 px kleiner
   (clamp(9px, 1.6vw, 22px) − 14 px, nie unter 0). Der Unterstrich läuft weiter nur
   unter dem Text (left/right 7 px). */
.navbar-links { display: flex; align-items: center; gap: clamp(0px, calc(1.6vw - 14px), 8px); margin-inline: -7px; } /* −7 px: das Innenpolster des ersten/letzten Links ragt nicht in die Zeile */
.navbar-links a {
  /* K5 (Tap-Ziel < 44px, gemessen 29–32px): 12px statt 4px vertikales
     Innenpolster hebt die Trefferfläche auf ≥44px, ohne die Einzeiligkeit
     bei 981/1024/1280/1440 zu gefährden (keine Schriftgröße/Zeilenhöhe betroffen). */
  font-size: clamp(12.5px, 1vw + 3px, 15px); font-weight: 500; color: var(--navy-70); position: relative;
  padding: 12px 7px; min-width: 44px; text-align: center;
  white-space: nowrap;
}
.navbar-links a::after {
  content: ""; position: absolute; left: 7px; right: calc(100% - 7px); bottom: 8px; height: 1px; background: var(--navy);
  transition: right var(--dur-med) var(--ease-swift);
}
@media (hover: hover) and (pointer: fine) {
  .navbar-links a:hover { color: var(--navy); }
  .navbar-links a:hover::after { right: 7px; }
}
.navbar-links a[aria-current="page"] { color: var(--navy); }
.navbar-links a[aria-current="page"]::after { right: 7px; }

.navbar-actions { display: flex; align-items: center; gap: 12px; }
@media (min-width: 981px) { .navbar-actions { gap: 16px; } }   /* C11: CTA/Pille und Menü-Button ebenfalls mit mindestens 16 px Luft */
/* A-07 (Prüfung 23.09.2026): zwischen 981 und ~1180px kollidiert die
   Navigation mit der sichtbaren Merkliste-Pille (0px Abstand, .navbar-actions
   lief über die Inhaltskante hinaus) — in diesem schmalen Band weicht das
   Navbar-CTA ("Anfrage stellen"/"Kontakt") der Pille; das Ziel bleibt über
   den gleichwertigen Nav-Punkt "Kontakt" erreichbar (F26). Ab 1181px ist
   wieder ausreichend Platz für beide (gemessen 65/65px mit Pille). */
@media (min-width: 981px) and (max-width: 1180px) {
  .navbar-actions:has(.merkliste-pill:not([hidden])) > .btn { display: none; }
}
/* Fix-Runde 1 (Gate B, B2, sperr, 29.09.2026): Navbar-Passung. Der Menü-Button ist der
   letzte Punkt der Zeile und darf nie über die Inhaltskante (oder gar aus dem Fenster)
   ragen. Wie viel Platz die Zeile braucht, hängt vom Label des Navbar-CTA ab (academy.html
   „Kennenlerngespräch anfragen“ 215 px, sonst rund 145 px) und von der Merkliste-Pille;
   das lässt sich nicht mit festen Breakpoints abdecken. script.js Abschnitt 7b misst
   deshalb nach jeder Größenänderung, ob der Menü-Button noch in die Zeile passt, und
   nimmt zuerst den CTA (seit Fix-Runde 2, C11; vorher die Textlinks), danach die
   Textlinks aus der Zeile (alles bleibt über das Menü erreichbar). Die zwei Klassen
   setzt NUR das Skript. */
.navbar--no-links .navbar-links { display: none; }
.navbar--no-cta .navbar-actions > .btn { display: none; }

.merkliste-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px;
  border-radius: var(--radius-full); border: 1px solid var(--pink-tint); background: var(--pink-tint); color: var(--navy);
  font-size: var(--fs-caption); font-weight: 500;
}
.merkliste-pill svg { width: 15px; height: 15px; color: var(--pink-ink); flex-shrink: 0; }
.merkliste-pill[hidden] { display: none; }

/* Korrekturschleife 30.09.2026, Punkt 8 (Nicholas): Burger mit DREI gleich dicken Strichen.
   Die frühere Fassung (zwei Striche à 1,5 px, per Flex zentriert) rechnete mit Nachkommastellen:
   je nach Lage im Pixelraster wurde ein Strich dicker oder dünner gezeichnet. Jetzt stehen die
   Striche absolut in einem 44-px-Knopf, alle Werte sind GANZE Pixel: Höhe 2 px, Breite 18 px,
   links 13 px (= (44 − 18) / 2), oben 14 / 21 / 28 px (Abstand 5 px, oben und unten je 14 px Rand).
   Im Ruhezustand gibt es KEINEN Transform. Offen: Strich 1 und 3 wandern um 7 px (= Strichabstand
   5 px + Strichhöhe 2 px) in die Mitte und drehen zum X, Strich 2 blendet aus.
   prefers-reduced-motion: keine Animation, der Zustand springt. */
.menu-btn {
  position: relative; width: 44px; height: 44px; border-radius: 999px; background: var(--navy); display: inline-flex;
  flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-swift);
}
.menu-btn .line {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 1px; background: var(--ivory);
  transition: transform var(--dur-med) var(--ease-swift), opacity var(--dur-fast) ease;
}
.menu-btn .line:nth-child(1) { top: 14px; }
.menu-btn .line:nth-child(2) { top: 21px; }
.menu-btn .line:nth-child(3) { top: 28px; }
.menu-btn[aria-expanded="true"] .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .line:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--navy-light); } }
/* Der globale Fokusring (Abschnitt 1) setzt border-radius: 4px auf jeden fokussierten Button und
   machte den runden Knopf beim Tastaturfokus eckig; beide Kreis-Knöpfe behalten ihre Rundung. */
.menu-btn:focus-visible, .mobile-menu-close:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .menu-btn, .menu-btn .line { transition: none; }
}

/* ===========================================================
   7. MOBILE-MENÜ (Navy Fullscreen)
   =========================================================== */
/* Overlay-Scrollen (30.09.2026, Koordinator-Auftrag): Das Overlay selbst scrollt nie. Es lässt oben die Navbar
   frei (Padding = Navbarhöhe + 1 px Rand), darunter füllt `.mobile-menu-scroll` den Rest der Höhe und scrollt
   (overflow-y: auto, overscroll-behavior: contain, der Body-Scroll bleibt per script.js gesperrt). Ist der Inhalt
   niedriger als die Fläche, steht er wie bisher mittig (automatische Ränder an Liste und Fußbereich statt
   justify-content: center, das bei Überlauf oben abschneidet und unerreichbar macht). „Start“ kann dadurch nie hinter
   der Navbar liegen, Mail und Social sind am Ende erreichbar. Das große Schließen-X ist ein Geschwister des
   Innenbereichs (absolut im Overlay) und bleibt bei jeder Höhe oben rechts stehen. Der Innenbereich beginnt
   31 px (Desktop/Tablet) bzw. 41 px (Handy) unter der Navbar, also dort, wo vorher das feste 110-px-Polster endete. */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--navy); color: var(--ivory);
  display: flex; flex-direction: column; padding: calc(var(--nav-h) + 1px) 0 0;
  --menu-inset: clamp(20px, 5vw, 32px);   /* Innenabstand zum Overlay-Rand: links der Menüpunkte UND rechts des Schließen-X */
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-swift), visibility 0s linear var(--dur-med);
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-med) var(--ease-swift), visibility 0s linear 0s;
}
/* Das Overlay selbst wird NIE verschoben (vorher translateY(-10px) → 0 am ganzen Overlay): während der Einblendung
   hob sich sonst die Unterkante um bis zu 10 px vom Viewport-Rand, darunter blitzte die Seite durch. Die kleine
   Gleitbewegung sitzt jetzt am Innenbereich (.mobile-menu-scroll), der Navy-Grund deckt den Viewport immer komplett. */
/* S3 (sperr, seit v1): das Overlay (--z-menu:60) lag über der Navbar
   (--z-nav:50) — der zum X gewandelte Menü-Button war dadurch unsichtbar
   UND nicht antippbar, Schließen ging nur per Esc/Link. script.js setzt
   beim Öffnen die Klasse .has-open-menu auf <body>; hebt die Navbar dann
   eine Stufe über das Overlay, der Button bleibt sichtbar und klickbar. */
body.has-open-menu .navbar { z-index: calc(var(--z-menu) + 1); }
/* Fokusring im Overlay: der globale Ring ist Navy (Abschnitt 1), das Overlay selbst ist Navy
   und trägt kein .on-navy; ohne diese Regel waren Fokusringe auf Menü-Links und Icons unsichtbar. */
.mobile-menu :focus-visible { outline-color: var(--ivory); }
/* Korrekturschleife 30.09.2026, Punkt 9 (Nicholas): zusätzlich zum Header-X ein GROSSES Schließen-X
   oben rechts im Overlay (Markup: erstes Kind von .mobile-menu, `data-menu-close`; partials.html
   Abschnitt 4 / Sync). Kreis 60 px (Vorgabe ≥ 56 px), X-Linien rund 24 px (Vorgabe ≥ 22 px),
   Ivory auf Navy mit feiner Ivory-Kontur (55 %, rund 4:1 gegen Navy), Fokusring Ivory 3 px im
   Abstand 4 px. Die Navbar (78 bzw. 68 px) bleibt im offenen Zustand über dem Overlay, das X sitzt
   16 px darunter. Korrektur 30.09.2026 (Opus-Prüfung bei 2056 px): rechts sitzt es im selben Innenabstand zum
   Viewport-Rand (--menu-inset, 20 bis 32 px), den die Menüpunkte links haben; vorher auf der Inhaltskante
   (bei 2056 px 368 px vom Rand, nicht „oben rechts“). Schließt wie der Header-Knopf
   (script.js Abschnitt 7: closeMenu, Fokus zurück auf den Header-Knopf). */
.mobile-menu-close {
  position: absolute; top: calc(var(--nav-h) + 16px); right: var(--menu-inset);
  width: 60px; height: 60px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ivory); background: var(--navy); box-shadow: inset 0 0 0 60px var(--ivory-08); border: 1px solid var(--ivory-50);
  transition: box-shadow var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift);
}
.mobile-menu-close svg { width: 28px; height: 28px; transition: transform var(--dur-med) var(--ease-swift); }
.mobile-menu-close:focus-visible { outline: 3px solid var(--ivory); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .mobile-menu-close:hover { box-shadow: inset 0 0 0 60px var(--ivory-18); border-color: var(--ivory); }
  .mobile-menu-close:hover svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-close, .mobile-menu-close svg { transition: none; }
  .mobile-menu-close:hover svg { transform: none; }
}
.mobile-menu-scroll {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(110px - var(--nav-h) - 1px) var(--menu-inset) max(48px, env(safe-area-inset-bottom));
  transform: translateY(-10px); transition: transform var(--dur-med) var(--ease-swift);
}
.mobile-menu.is-open .mobile-menu-scroll { transform: none; }
.mobile-menu-scroll > .mobile-menu-list { margin-top: auto; }
.mobile-menu-scroll > .mobile-menu-foot { margin-bottom: auto; }
.mobile-menu-list { display: flex; flex-direction: column; gap: 10px; }
.mobile-menu-list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-head); font-size: clamp(28px, 6vw, 44px); font-weight: 600; letter-spacing: var(--ls-head); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .mobile-menu-list a:hover { color: var(--ivory-62); } }
.mobile-menu-list a[aria-current="page"] { color: var(--ivory); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.mobile-menu-foot { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; gap: 14px; }
.mobile-menu-foot a { display: inline-block; align-self: flex-start; padding: 12px 0; font-size: var(--fs-body-sm); color: var(--ivory-82); }
.mobile-menu-foot .socials { display: flex; gap: 10px; }

/* ===========================================================
   8. FOOTER (Navy bleed)
   =========================================================== */
.footer { padding: clamp(48px, 5vw, 72px) var(--section-pad-x) 0; } /* gleiche Seitenabstände wie .section → Footer-Inhalt fluchtet mit .section-inner (Fix 15.09.2026); oben seit Fix-Runde 1 nur noch 48 bis 72 px statt 60 bis 132 px */
/* PUNKT 8 (Nicholas, 15.09.2026, ausdrücklich Kernel-Freigabe): .footer trägt sein
   horizontales Innenpolster selbst (identische Formel zu .section, --section-pad-x),
   .footer > .section-inner bekommt KEIN eigenes Seitenpadding (sonst 2× = 60 px zu schmal).

   FIX-RUNDE 1 (Gate B, B2-05/B2-06/B21, Koordinator-Entscheidung 5, 29.09.2026): Der Footer
   war 1352 px hoch bei 1440 (1432 bei 1024, 1944 bei 390), rund 1,5 Bildschirme Navy auf
   jeder Seite, und drückte den Hell-Anteil um rund 12 Prozentpunkte. Verdichtet auf rund
   600 bis 700 px (Inhalte unverändert vollständig):
   - Das Footer-Statement („Wir hören gern von dir …“) entfällt auf allen Seiten. Es stand
     direkt unter dem Navy-Schluss-CTA fast wortgleich noch einmal (Parallel-Slogan).
   - Städte-Liste immer zweispaltig (`.footer-col-list--split`), Leistungen erst auf dem
     Handy (≤ 640 px, `.footer-col-list--split-sm`).
   - Die Seitennavigation läuft als Zeile (Umbruch erlaubt) statt als 8 Zeilen à 44 px, das
     Büro-Hinweisfeld steht darunter, „Folge uns“ rechts daneben (Raster `.footer-navigate`).
   - Unterleiste enger (Rechtslinks, 18+-Hinweis, Credit unverändert).
   Ab 981 px vier Spalten, 641 bis 980 px zwei, bis 640 px eine. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.15fr); gap: var(--gap-lg); margin-bottom: clamp(28px, 3vw, 44px); }
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.footer-col .group-label { display: block; margin-bottom: 4px; }
.footer-col-list li { font-size: var(--fs-body-sm); color: var(--ivory-82); padding: 3px 0; break-inside: avoid; }
.footer-col-list--split { columns: 2; column-gap: var(--gap-md); }
.footer-col-text { font-size: var(--fs-body-sm); color: var(--ivory-82); margin: 0; }
.footer-col-link {
  display: inline-flex; align-items: center; width: fit-content; min-height: 44px; padding: 8px 0;
  font-size: var(--fs-body-sm); font-weight: 500; color: var(--ivory);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) { .footer-col-link:hover { color: var(--ivory-62); } }

/* Zeile 2: Navigation (links, mit Umbruch) über dem Büro-Hinweis, „Folge uns“ rechts.
   .footer-meta ist nur ein Hüllelement (display: contents), damit Social-Reihe und
   Hinweis als eigene Rasterzellen platziert werden können. */
.footer-navigate {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links social" "note social";
  column-gap: var(--gap-xl); row-gap: var(--gap-sm); align-items: start;
  padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--ivory-18);
}
.footer-nav-links { grid-area: links; display: flex; flex-wrap: wrap; column-gap: clamp(20px, 2.2vw, 32px); }
.footer-nav-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-family: var(--font-head); font-size: clamp(16px, .8vw + 11px, 20px); font-weight: 500; padding: 10px 0; color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .footer-nav-links a:hover { color: var(--ivory-62); } }

/* Social-Reihe (F31, 5 Icons) + Büro-Hinweis (F30) */
.footer-meta { display: contents; }
.footer-social { grid-area: social; display: flex; flex-direction: column; gap: 10px; }
.socials { display: flex; gap: 10px; }
/* Korrekturrunde 02.10.2026 (A2-03): Social-Kreise stehen nur auf Navy (Footer, Menü-Overlay) und
   bekommen dieselbe Eigenfüllung wie die Outline-Buttons (Ivory 7 %), Hover Ivory 15 % mit Ivory-Rahmen
   (vorher: voller Ivory-Kreis). Fokusring bleibt (Ivory auf Navy, Abschnitt 1). */
.socials a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ivory-25); background: var(--ivory-07); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift); }
.socials a svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .socials a:hover { background: var(--ivory-15); border-color: var(--ivory); } }
.footer-note { grid-area: note; max-width: 640px; }
.footer-note p { font-size: var(--fs-body-sm); color: var(--ivory-82); }

.footer-bottom { margin-top: clamp(20px, 2.4vw, 32px); margin-inline: calc(-1 * var(--section-pad-x)); padding: 10px var(--section-pad-x) 16px; border-top: 1px solid var(--ivory-18); } /* negative Ränder: Trennlinie bleibt volle Breite, Inhalt fluchtet mit den Sektionen */
/* W7/A-08/D-23: der fixierte WhatsApp-Button (56px + 16–28px Abstand zum
   Rand, mobil 48px + 14px) liegt am Seitenende über dem Credit-Link
   ("Golden Frame") — reserviert Platz am rechten Rand der letzten
   Footer-Zeile, damit .credit (margin-left:auto) davor endet. */
.footer-bottom-inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: var(--fs-caption); color: var(--ivory-62); padding-right: 72px; }
@media (max-width: 560px) { .footer-bottom-inner { padding-right: 62px; } }
/* A-18: "AGB"/"Impressum" etc. waren nur 24px breit (min-height:44px allein
   reicht nicht) — min-width + zentrierter Inhalt heben die Trefferfläche
   auf ≥44×44px, ohne den sichtbaren Text zu verbreitern. */
.footer-bottom-inner a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 12px 0; color: var(--ivory-82); }
@media (hover: hover) and (pointer: fine) { .footer-bottom-inner a:hover { color: var(--ivory); } }
.footer-bottom-inner .sep { color: var(--ivory-25); }
.footer-bottom-inner .credit { margin-left: auto; }
.footer-bottom-inner .credit a { color: var(--ivory-58); font-size: var(--fs-micro); }

/* ===========================================================
   8b. WHATSAPP-FLOAT (F16b) — Kernel-Komponente, liegt im Footer-Partial
   im DOM direkt hinter </footer> (jede Seite). position:fixed macht die
   DOM-Position layoutunabhängig: unten rechts, über dem Seiteninhalt,
   unter Navbar/Mobile-Menü (--z-wa < --z-nav < --z-menu). Keine anderen
   fixierten Bottom-Elemente existieren im Kernel (kein Sticky-Callbar,
   siehe BAU-REGELN 0.2) — keine Überlappungsgefahr mit der
   Merkliste-Pille (die sitzt in der Navbar, oben) oder anderen Sticky-
   Elementen. Navy-Fläche mit Ivory-Icon (Markenfarben, kein WhatsApp-Grün
   auf der Fläche selbst — Kontrast/Konsistenz mit dem übrigen CTA-System).
   S2/A-09 (sperr/wichtig, 23.09.2026): auf Handys deckte der Button im
   ersten Bildschirm die Hero-CTAs an (.hero-full endet nah am Viewport-
   Fuß). script.js §16 beobachtet die jeweils erste .hero-full-Instanz der
   Seite per IntersectionObserver und setzt .is-visible erst, wenn sie zu
   mindestens 60% aus dem Viewport gescrollt ist (Klasse .wa-float--gated
   wird NUR von JS gesetzt — ohne JS bleibt der Button reduziert-aber-
   sichtbar, BAU-REGELN „ohne JS sichtbar lassen"). Das globale
   reduced-motion-Sicherheitsnetz (Abschnitt 2) kürzt den Übergang bereits
   auf .001ms, hier zusätzlich keine Transform-Bewegung mehr unter
   reduced-motion (nur Opacity). */
.wa-float {
  position: fixed; right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-wa); width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--navy); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  /* W6/A-08 (Fokusring/Kontur unsichtbar auf Navy-Flächen, 1,00:1): ein
     dauerhafter Ivory-Ring hält die Fläche von ihrem Navy-Untergrund ab,
     auch ohne Hover/Fokus — auf Hero/Footer/Navy-Sektionen bleibt der
     Button dadurch als eigene Form erkennbar. */
  box-shadow: 0 0 0 2px var(--ivory-82), var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-swift), background-color var(--dur-fast) var(--ease-swift), opacity var(--dur-med) var(--ease-swift), visibility 0s linear 0s;
}
.wa-float svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: scale(1.06); background: var(--navy-light); } }
/* Doppelring (Ivory innen + Navy außen): auf hellem UND dunklem Untergrund
   sichtbar, WCAG 2.4.7/1.4.11. Ersetzt die reine Navy-Outline, die auf
   Navy-Flächen unsichtbar war (W6/A-08, 1,00:1). */
.wa-float:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ivory), 0 0 0 6px var(--navy), var(--shadow-soft); }
/* ≥48px Tap-Ziel bleibt auch in der kleineren Mobil-Variante gewahrt (BAU-REGELN: Buttons ≥44px, hier explizit ≥48px). */
@media (max-width: 560px) {
  .wa-float { width: 48px; height: 48px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-float svg { width: 22px; height: 22px; }
}
@media print { .wa-float { display: none; } }

/* Scroll-Gate (S2/A-09): NUR script.js §16 setzt diese Klasse (am ersten
   .hero-full der Seite gemessen) — ohne JS bleibt .wa-float ungated und
   damit sofort sichtbar. */
.wa-float.wa-float--gated { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
.wa-float.wa-float--gated.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .wa-float.wa-float--gated { transform: none; }
  .wa-float.wa-float--gated.is-visible { transform: none; }
}

/* ===========================================================
   9. REVEAL-MOTION
   =========================================================== */
.word-reveal { display: inline-block; }
.word-reveal .word {
  display: inline-block; opacity: 0; filter: blur(9px); transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.word-reveal.is-revealed .word { opacity: 1; filter: blur(0); transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ===========================================================
   9b. MEDIA-REVEAL (K7, 29.09.2026) — Bildcontainer öffnen sich per Clip
   statt per Fade: `.reveal` UND `.reveal--media` zusammen auf dem
   Bildcontainer (z. B. .media-card-img, .arch-frame, ein Bildband). Der
   Container ist vor dem Reveal nur oben um 14 % beschnitten (nie unsichtbar,
   fällt bei Fehlern also nie auf „leer“), das Bild darin läuft von 1,08 auf 1.
   Umgesetzt als CSS-Animation mit fill-mode „backwards“ statt als Transition:
   Nach dem Ende gilt wieder clip-path:none (kein dauerhafter Clip, der
   Outlines/Schatten abschneiden würde), und die Gruppen-Staffelung kommt über
   --reveal-delay (setzt script.js Abschnitt 2 am selben Element).
   Das Bild nutzt die EINZELNE Eigenschaft `scale`, damit Hover-Zooms
   (transform: scale, Abschnitt 10/10b/12) unabhängig davon laufen.
   Sicherheitsnetz: noscript-Block im <head> (partials.html Abschnitt 1) und
   4-s-Watchdog (script.js) erzwingen clip-path:none/scale:1;
   prefers-reduced-motion schaltet den Effekt komplett ab.
   =========================================================== */
.reveal.reveal--media { opacity: 1; transform: none; transition: none; clip-path: inset(14% 0 0 0); }
.reveal--media :is(img, .ph) { scale: 1.08; }
.reveal.reveal--media.is-revealed {
  clip-path: none;
  animation: media-clip 1.1s var(--ease-out) var(--reveal-delay, 0ms) backwards;
}
.reveal--media.is-revealed :is(img, .ph) {
  scale: 1;
  animation: media-zoom 1.4s var(--ease-out) var(--reveal-delay, 0ms) backwards;
}
@keyframes media-clip { from { clip-path: inset(14% 0 0 0); } to { clip-path: inset(0); } }
@keyframes media-zoom { from { scale: 1.08; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal--media { clip-path: none; }
  .reveal--media :is(img, .ph) { scale: 1; }
  .reveal.reveal--media.is-revealed, .reveal--media.is-revealed :is(img, .ph) { animation: none; }
}
/* Druckansicht (Korrekturschleife 29.09.2026): script.js gibt bei `beforeprint` alles frei;
   dieser Block ist das CSS-Gegenstück ohne Animations-Abhängigkeit (eine gerade
   gestartete Clip-Animation stünde beim Seitenumbruch sonst noch auf 14 % Beschnitt). */
@media print {
  .reveal, .word-reveal .word { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .reveal.reveal--media { clip-path: none !important; animation: none !important; }
  .reveal--media :is(img, .ph) { scale: 1 !important; animation: none !important; }
}

/* ===========================================================
   10. KARTEN
   =========================================================== */
.card {
  background: var(--surface-card); color: var(--navy); border: 1px solid var(--line-1); border-radius: var(--radius-card);
  padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px;
}
.card--alt { background: var(--surface-card-alt); border-color: var(--ivory-darker); }
.card--navy { background: var(--surface-navy); border-color: var(--ivory-18); color: var(--ivory); }
.card--navy.card, .card--navy .h3 { color: var(--ivory); }

.card--line-academy { box-shadow: inset 0 3px 0 0 var(--academy); }
.card--line-event { box-shadow: inset 0 3px 0 0 var(--warm-grey); }

.card-icon-ring {
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-icon-ring svg { width: 18px; height: 18px; }
.on-navy .card-icon-ring, .card--navy .card-icon-ring { border-color: var(--ivory-25); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 13px;
  border-radius: var(--radius-full); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--navy); background: var(--navy-06); border: 1px solid var(--line-1);
}
.tag--academy { background: var(--academy-tint); border-color: var(--academy-tint-strong); }
.tag--event { background: var(--warm-grey-tint); border-color: var(--warm-grey-line); }

/* Feature-Karte (Mission/Vision auf ueber-uns.html — identisches Muster für Concierge-Karten) */
.feature-card {
  background: var(--surface-card-alt); color: var(--navy); border: 1px solid var(--ivory-darker); border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.feature-card .feature-index { font-family: var(--font-head); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-eyebrow); color: var(--navy-ink-2); }
.feature-card .feature-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ivory-darker); font-size: var(--fs-caption); color: var(--navy-70); }
.feature-subline { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy-ink-2); margin-top: -6px; }
/* Druckloser Text-CTA mit Pfeil (gemeinsame Komponente, vorher je Seite dupliziert) */
.textlink { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textlink svg { width: 13px; height: 13px; color: currentColor; transition: transform var(--dur-med) var(--ease-swift); }
@media (hover: hover) and (pointer: fine) { .textlink:hover svg { transform: translate(2px, -2px); } }
.textlink:focus-visible svg { transform: translate(2px, -2px); }
.on-navy .textlink { color: var(--ivory); }
/* Redaktionelle Inline-Links müssen als Links erkennbar sein */
main p a:not(.btn):not(.textlink), .box-label a, .card-desc a, .acc-panel-inner a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* (Fix-Runde 1, Kernel-Rest aus log-P5: die frühere nummerierte Werte-Karte `.value-card`/`.value-num`
   steht auf keiner Seite mehr im HTML — ueber-uns nutzt seit 29.09.2026 Icon-Kacheln — und ist entfernt.
   `--navy-deko-50` bleibt als Token für rein dekorative Ziffern erhalten.) */

/* Score-/Ehrlichkeits-Karte (ersetzt Testimonials) */
.score-card { background: var(--navy); color: var(--ivory); border-radius: var(--radius-card); padding: clamp(26px, 3vw, 34px); display: flex; flex-direction: column; gap: 16px; justify-content: space-between; }
.score-card .score-mark { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ivory-25); display: inline-flex; align-items: center; justify-content: center; }
.score-card .score-mark svg { width: 18px; height: 18px; color: var(--ivory); }
.score-card p { color: var(--ivory-82); font-size: var(--fs-body-sm); }
.score-card .score-foot { font-size: var(--fs-caption); color: var(--ivory-62); }

/* K8 (29.09.2026): Karten-Hebung. `.card--lift` ist auf jeder Karte einsetzbar
   (.card, .feature-card, Diff-/Wert-Karten …); `.media-card` und `.sedcard` heben
   sich im Kernel von selbst (kein Zusatz nötig). Bewegung nur unter
   (hover:hover) and (pointer:fine), Transition immer am Grundelement (BAU-REGELN 5).
   Trägt die Karte zugleich `.reveal`, behält sie deren Einblend-Transition
   (Opacity/Transform 0,7 s); script.js löscht die inline gesetzte Staffel-
   Verzögerung nach dem Einblenden, damit die Hebung nicht verzögert startet. */
:is(.card--lift, .media-card, .sedcard) {
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
:is(.card--lift, .media-card, .sedcard).reveal {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
/* Bildzoom in Karten: Bild/Platzhalter zoomt per transform (unabhängig von
   der einzelnen Eigenschaft `scale` des Media-Reveals, Abschnitt 9b) */
:is(.media-card-img, .sedcard-media) :is(img, .ph) { transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  :is(.card--lift, .media-card, .sedcard):hover,
  :is(.card--lift, .media-card, .sedcard).reveal.is-revealed:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-soft);
    transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
  }
  .media-card:hover .media-card-img :is(img, .ph) { transform: scale(1.04); }
  /* 30.09.2026: Sedcard hebt sich mit etwas tieferem Schatten und feinem Rand, Bild zoomt auf 1,04 */
  .sedcard:hover, .sedcard.reveal.is-revealed:hover { box-shadow: 0 28px 48px -30px rgba(var(--navy-rgb), .42); border-color: var(--line-2); }
  .sedcard:hover .sedcard-media :is(img, .ph) { transform: scale(1.04); }
  .sedcard:hover .sedcard-cta svg { transform: translate(3px, -3px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  :is(.card--lift, .media-card, .sedcard):hover,
  :is(.card--lift, .media-card, .sedcard).reveal.is-revealed:hover,
  .media-card:hover .media-card-img :is(img, .ph),
  .sedcard:hover .sedcard-media :is(img, .ph),
  .sedcard:hover .sedcard-cta svg { transform: none !important; }
}

/* ===========================================================
   10b. BILDKARTE `.media-card` (K8, 29.09.2026)
   Karte mit Bild oben und kurzem Text (Richtwert 20 bis 40 Wörter).
   <article class="media-card [media-card--landscape]">
     <div class="media-card-img reveal reveal--media"><img … width height loading="lazy" alt="…"></div>
     <div class="media-card-body">
       <span class="tag tag--event">Anlass</span> (optional)
       <h3 class="h3">…</h3><p class="card-desc">…</p>
     </div>
   </article>
   Weiß, Radius --radius-card (4 px seit 02.10.2026), overflow:hidden (Bild clippt an der Karte), Bild 4:5
   (Standard) oder 3:2 (--landscape), Body-Padding clamp(22px, 2.4vw, 32px),
   Gap 12 px, Bildzoom 1,04 bei Hover (Abschnitt 10).
   =========================================================== */
.media-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-card); color: var(--navy);
  border: 1px solid var(--line-1); border-radius: var(--radius-card); overflow: hidden;
}
.media-card-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-card-alt); }
.media-card--landscape .media-card-img { aspect-ratio: 3 / 2; }
.media-card-img :is(img, .ph) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.media-card-img .ph { border-width: 0; }
.media-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: clamp(22px, 2.4vw, 32px); }

/* ===========================================================
   10c. ICON-BADGE `.icon-badge` (K6, 29.09.2026)
   <span class="icon-badge icon-badge--navy" aria-hidden="true"><svg><use href="#icon-ms-route"></use></svg></span>
   Basis 56-px-Kreis (Ivory-dark, Navy-Icon), Icon = 46 % der Größe.
   Varianten: --navy (Navy, Ivory-Icon) · --gold (Academy-Orange --academy-deep,
   WEISSES Icon, NUR Academy-Kontexte; seit Korrekturrunde 02.10.2026, vorher Navy-Kreis
   mit Gold-Icon) · --lg (72 px) · --sm (40 px, für Listen).
   Auf Navy-Flächen (.on-navy) invertiert jede Variante außer --gold auf
   Ivory 10 % + Ivory-Icon; helle Karten INNERHALB einer Navy-Fläche bleiben
   hell (Oberflächen-Reset wie bei .card-desc).
   =========================================================== */
.icon-badge {
  --badge-size: 56px;
  width: var(--badge-size); height: var(--badge-size); border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ivory-dark); color: var(--navy);
}
.icon-badge svg { width: 46%; height: 46%; flex-shrink: 0; }
.icon-badge--navy { background: var(--navy); color: var(--ivory); }
.icon-badge--gold { background: var(--academy-deep); color: var(--white); }   /* Korrekturrunde 02.10.2026: Orange-Kreis, weißes Icon (Weiß darauf 3,39:1) */
.icon-badge--lg { --badge-size: 72px; }
.icon-badge--sm { --badge-size: 40px; }
.on-navy .icon-badge:not(.icon-badge--gold), .card--navy .icon-badge:not(.icon-badge--gold) { background: var(--ivory-10); color: var(--ivory); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .icon-badge:not(.icon-badge--gold) { background: var(--ivory-dark); color: var(--navy); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .icon-badge--navy:not(.icon-badge--gold) { background: var(--navy); color: var(--ivory); }
/* Basis-Badge (Ivory-dark) auf Sand-Bühne und Sand-Karten wäre Sand auf Sand: dort weiß */
.stage--sand .icon-badge:not(.icon-badge--navy):not(.icon-badge--gold), .card--alt .icon-badge:not(.icon-badge--navy):not(.icon-badge--gold), .feature-card .icon-badge:not(.icon-badge--navy):not(.icon-badge--gold) { background: var(--surface-card); }

/* ===========================================================
   11. EYEBROW
   =========================================================== */
.eyebrow {
  display: inline-flex; width: fit-content; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: var(--fs-micro); line-height: 1.1; letter-spacing: var(--ls-eyebrow);
  font-weight: 600; text-transform: uppercase; color: var(--navy-ink-2);
}
.on-navy .eyebrow, .card--navy .eyebrow { color: var(--ivory-62); }
.eyebrow-mark {
  width: 20px; height: 20px; border-radius: 999px; border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.eyebrow-mark svg { width: 8px; height: 8px; }

/* ===========================================================
   12. SEDCARDS · FILTER · MERKLISTE
   =========================================================== */
.sedcard-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid var(--line-1); border-radius: var(--radius-card); margin-bottom: var(--gap-lg);
  background: var(--surface-card); color: var(--navy);
}
.filter-group { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
.filter-field { display: flex; align-items: center; gap: 8px; }
.filter-field label { font-size: var(--fs-caption); color: var(--navy-ink-2); white-space: nowrap; }
.filter-select {
  appearance: none; -webkit-appearance: none; background: var(--surface-page);
  border: 1px solid var(--line-2); border-radius: var(--radius-full); padding: 9px 34px 9px 16px;
  font-size: var(--fs-input); font-weight: 500; color: var(--navy); min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23112250' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 7px;
}
.filter-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; user-select: none; }
.filter-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-toggle .switch {
  width: 38px; height: 22px; border-radius: 999px; background: var(--navy-16); position: relative; flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-swift);
}
.filter-toggle .switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--white);
  transition: transform var(--dur-fast) var(--ease-swift); box-shadow: 0 1px 3px rgba(var(--navy-rgb), .3);
}
.filter-toggle input:checked + .switch { background: var(--teal-ink); }
.filter-toggle input:checked + .switch::before { transform: translateX(16px); }
.filter-toggle input:focus-visible + .switch { outline: 2px solid var(--navy); outline-offset: 3px; }
.filter-toggle span.label-text { font-size: var(--fs-caption); font-weight: 500; color: var(--navy); }

.sedcard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); }
.sedcard-grid[data-sedcard-grid] .sedcard.is-filtered-out { display: none; }

/* K1 (29.09.2026), Radius seit 02.10.2026 4 px: Sedcard wie alle Karten (--radius-card). Die Karte clippt
   per overflow:hidden, Bild und Platzhalter darin haben deshalb selbst Radius 0
   (obere Ecken folgen der Karte). Hebung + Bildzoom: siehe Abschnitt 10. */
.sedcard { container: sedcard / inline-size; position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-card); color: var(--navy); border: 1px solid var(--line-1); }
.sedcard-media { position: relative; overflow: hidden; background: var(--ivory-dark); container: sedcard-media / inline-size; }   /* Container für die Badge-Reihe (siehe .sedcard-badge-row) */
/* Korrekturschleife 30.09.2026 (Nicholas, „Sedcard-Design anheben“): Karten-Komponente angehoben,
   Markup unverändert. Bildfläche: sanfter Navy-Verlauf über dem unteren Bilddrittel, NUR wenn die Fläche ein echtes
   <img> trägt (Foto steht ruhiger, Übergang in den weißen Kartenkörper weicher); über dem Platzhalter (.ph) gibt es
   keinen Verlauf (Opus-Prüfung: er erzeugte ein graues Band hinter dem Motivtext). Der Verlauf liegt unter der
   Badge-Reihe (z-index 0 zu 1) und fängt keine Klicks. Der Platzhalter füllt die Fläche ohne Rand (vorher
   gestrichelte Unterkante) auf ruhiger Fläche, sein Motivtext ist dunkler (Navy 80 %, rund 7:1 auf Sand).
   Echte Fotos: <img> füllt 2:3 per object-fit. */
.sedcard-media .ph { border: 0; border-radius: 0; }
.sedcard .sedcard-media .ph:not(.ph--dark)::after { color: rgba(var(--navy-rgb), .8); }
.sedcard-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 0; }
.sedcard-media:has(img)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--navy-rgb), .55) 0%, rgba(var(--navy-rgb), .18) 48%, rgba(var(--navy-rgb), 0) 100%);
}
.sedcard-badge-row { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; row-gap: 6px; align-items: flex-start; justify-content: space-between; gap: 8px; z-index: 1; }
/* 30.09.2026: alle Badges gleich hoch (28 px) und mittig beschriftet, ruhigere Sperrung (.10em statt
   .14em); in der Stapel-Reihe (.badge-stack) gleich breit (Breite des längsten Badges), damit „Neu“
   und „Verfügbar“ untereinander bündig abschließen statt als Zackenkante. */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 12px; border-radius: var(--radius-full);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  background: var(--surface-page); color: var(--navy); border: 1px solid var(--line-2);
  white-space: nowrap; hyphens: none;
}
/* Fix-Runde 1 (Koordinator-Zusatzbefund aus der P2-Fix-Runde, 29.09.2026): in den zweispaltigen
   Sedcards auf dem Handy (Karte rund 165 px bei 390 px Breite, neben dem 44-px-Herz bleiben
   rund 87 px) brach „Verfügbar“ als „VERFÜG-BAR“ um. Jetzt trennt und bricht kein Badge mehr
   (nowrap + hyphens none). Auf schmalen Karten (Handy bis 400 px Viewportbreite) sitzt die
   Reihe enger am Kartenrand (8 statt 12 px, Abstand 4 px) und das Badge ist kompakter
   (Innenabstand 8 px, Sperrung .06em; ab 370 px abwärts 6 px und .04em). Gemessen: Badge
   „Verfügbar“ 85,6 px bzw. 79,6 px, frei neben dem Herz 99 px (390), 92 px (375), 84 px (360).
   Reicht der Platz trotzdem nicht (Karten unter rund 145 px, 320-px-Geräte), rutscht das
   Herz per flex-wrap rechts unter die Badges, statt sie zu überlappen. */
.sedcard-badge-row > .merken-btn { margin-left: auto; }
@media (max-width: 400px) {
  .sedcard-badge-row { top: 8px; left: 8px; right: 8px; gap: 4px; }
  .sedcard-badge-row .badge { padding: 0 8px; letter-spacing: .06em; }
}
@media (max-width: 370px) {
  .sedcard-badge-row .badge { padding: 0 6px; letter-spacing: .04em; }
}
/* Dieselben Regeln nach BREITE DER KARTE (Container-Query auf .sedcard-media), nicht nur nach
   Viewport: auch zwischen 401 und rund 700 px, wo eine Seite die Sedcards dreispaltig (rund
   150 px) setzt, muss das Herz neben dem Badge bleiben. Browser ohne Container-Queries
   behalten die Viewport-Regeln oben. */
@container sedcard-media (max-width: 200px) {
  .sedcard-badge-row { top: 8px; left: 8px; right: 8px; gap: 4px; }
  .sedcard-badge-row .badge { padding: 0 8px; letter-spacing: .06em; }
}
@container sedcard-media (max-width: 160px) {
  .sedcard-badge-row .badge { padding: 0 6px; letter-spacing: .04em; }
}
.badge--new { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
/* Fix-Runde 1 (Gate B, B16): deckender Grund. Vorher 14 % Teal (durchscheinend) über dem
   Foto oder dem Sand-Platzhalter = 3,8:1 bei 12,5 px, mit echten Fotos unkalkulierbar. */
.badge--available { background: var(--teal-tint-solid); color: var(--teal-ink); border-color: var(--teal-line); }

/* Sedcard-Badges: „Neu" + „Verfügbar" gemeinsam gestapelt, ohne Flächen-
   überlappung — aus assets/pages/models.css UND model-profil.css hierher
   in den Kernel verschoben (Prüf-Befund model-profil-5: wörtliche
   Dopplung, zwei Besitzer derselben Komponente). */
.badge-stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* Das erste Badge (28 px) sitzt auf der Mittelachse des Herzens (44 px): 8 px Versatz oben. */
.sedcard-badge-row > .badge-stack { padding-top: 8px; }

.merken-btn {
  width: 44px; height: 44px; border-radius: 999px; background: var(--surface-page); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift);
}
.merken-btn svg { width: 16px; height: 16px; color: var(--navy); }
/* --pink (2.50:1 auf Ivory) unterschreitet die 3:1-Icon-Pflicht aus
   BAU-REGELN Abschnitt 2 — --pink-ink (4.68:1) trägt sowohl Icon als auch
   Rahmen im gemerkten Zustand, siehe DESIGN.md Abschnitt 1. */
.merken-btn .icon-heart-filled { display: none; color: var(--pink-ink); }
.merken-btn.is-merked .icon-heart-outline { display: none; }
.merken-btn.is-merked .icon-heart-filled { display: block; }
.merken-btn.is-merked { border-color: var(--pink-ink); }
@media (hover: hover) and (pointer: fine) { .merken-btn:hover { transform: scale(1.08); } }
/* 30.09.2026: Herz auf dem Kartenfoto weiß (besser lesbar über Foto und Platzhalter) mit weichem Schatten */
.sedcard-badge-row .merken-btn { background: var(--white); box-shadow: 0 2px 8px -2px rgba(var(--navy-rgb), .28); }

/* Kartenkörper (30.09.2026): großzügigeres Polster (fluid), Name größer in Geist (--fs-sedcard-name,
   bis 26 px), Meta-Zeile ruhig in Warm Grey (6,4:1 auf Weiß) mit kleinem Pin, darunter auf einer feinen
   Linie der klare Textlink „Profil ansehen“ mit Pfeil. Der Link steht per margin-top:auto auf der
   Fußlinie aller Karten einer Reihe (20-Fehler Nr. 19). Die ganze Karte ist anklickbar: der Namenslink
   spannt per ::after über die Karte (Herz und CTA liegen darüber, z-index 1). */
.sedcard-body { padding: clamp(8px, .9vw, 12px) clamp(14px, 1.5vw, 22px) clamp(6px, .6vw, 8px); display: flex; flex-direction: column; gap: 0; flex: 1; }
.sedcard-name { font-family: var(--font-head); font-size: var(--fs-sedcard-name); font-weight: 600; letter-spacing: var(--ls-head); line-height: 1.12; }
.sedcard-meta { font-size: var(--fs-caption); line-height: 1.4; color: var(--warm-grey-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sedcard-meta:not(:last-child) { margin-bottom: clamp(12px, 1.2vw, 16px); }
.sedcard-meta svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--warm-grey); }
.sedcard-link { display: block; }
.sedcard-body > a { display: flex; align-items: center; min-height: 44px; }
.sedcard-body > a:not(.sedcard-cta) { padding: 0; }
.sedcard-body > a:not(.sedcard-cta)::after { content: ""; position: absolute; inset: 0; z-index: 0; }
/* ohne Kartenkörper-Polster unten: der Link bringt seine 52 px selbst mit */
.sedcard-body:not(:has(.sedcard-cta)) { padding-bottom: clamp(14px, 1.4vw, 20px); }

/* Sedcard-CTA „Profil ansehen“ (aus models.css/model-profil.css in den Kernel verschoben, Prüf-Befund
   model-profil-5): Textlink wie .textlink (unterstrichen, Pfeil rückt beim Hover), Schrift --fs-body-sm
   (15 bis 16 px) statt Caption, feine Trennlinie darüber, 52 px hoch über die ganze Körperbreite. */
.sedcard-body > .sedcard-cta {
  position: relative; z-index: 1; margin-top: auto; min-height: 52px; gap: 8px; border-top: 1px solid var(--line-1);
  font-weight: 600; font-size: var(--fs-body-sm); color: var(--navy);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--navy-35);
}
.sedcard-cta svg, .sedcard-cta .btn-arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--dur-med) var(--ease-swift); }
@media (hover: hover) and (pointer: fine) {
  .sedcard-cta:hover { text-decoration-color: var(--navy); }
}
/* Tastaturfokus: ein Ring um die ganze Karte statt um den schmalen Namen (der Namenslink trägt die
   Klickfläche der Karte). Ohne :has()-Unterstützung bleibt der Ring am fokussierten Link. */
@supports selector(:has(a)) {
  .sedcard-body > a:focus-visible { outline: none; }
  .sedcard:has(.sedcard-body > a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
  .on-navy .sedcard:has(.sedcard-body > a:focus-visible) { outline-color: var(--ivory); }
}

.sedcard-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: clamp(40px, 5vw, 64px) 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-card);
  color: var(--navy-70);
}
.sedcard-empty[hidden] { display: none; }
[data-zuletzt-card][hidden] { display: none; }
.on-navy .merkliste-empty, .on-navy .sedcard-empty { border-color: var(--ivory-25); color: var(--ivory-82); }

/* Merkliste */
.merkliste-section { display: flex; flex-direction: column; gap: var(--gap-md); }
.merkliste-empty { padding: clamp(28px, 3vw, 40px); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); text-align: center; color: var(--navy-70); }
.merkliste-empty[hidden] { display: none; }
.merkliste-filled[hidden] { display: none; }
.merkliste-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); margin-bottom: var(--gap-md); }
.merkliste-grid .sedcard { font-size: var(--fs-body-sm); }
.merkliste-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }

/* ===========================================================
   12b. KALENDER „14 TAGE" (F11/F13, BAU-REGELN 4.3) — Kernel-Modul, Markup
   siehe FEEDBACK-2026-09-23.md 4.3 (Hook [data-cal14], von der
   Darlinge-Agentin auf model-profil.html eingesetzt). Farben: kein Braun
   (F13) — Verfügbar = Teal (Plattform-UI, wie .badge--available), Auf
   Anfrage = Weiß + Navy-Kontur (gestrichelt), Vergeben = gedämpft
   (durchgestrichen). Ecken über Tokens (seit 02.10.2026 4 px / 3 px): Container --radius-card,
   Tage --radius-sm, Legenden-Swatch --radius-xs.

   Navy-Variante (23.09.2026, Darlinge-Prüfung Punkt 2 — SPERR-Fix D-01):
   NUR über den Modifikator `.cal14--on-navy` (explizit auf das `.cal14`-
   Element selbst gesetzt) oder `.card--navy` aktivieren — NICHT mehr über
   jeden `.on-navy`-Vorfahren. Der vorherige Nachkommen-Selektor
   `.on-navy .cal14…` griff auch dann, wenn der Kalender in einer HELLEN
   Karte (`.calendar-card.card`) INNERHALB einer `.on-navy`-Sektion sitzt —
   Wochentag-/Monatslabels verschwanden dort auf ~1:1 (Beleg model-
   profil.html: die helle `.calendar-card` liegt in `<section class="bleed
   on-navy">`). `.card--navy …` bleibt unverändert: dort IST die Karte
   selbst der dunkle Untergrund, kein Leck möglich. Aktuell nutzt keine
   Seite den Kalender direkt auf einer Navy-Fläche ohne Karte — der
   Modifikator ist vorsorglich vorhanden, falls das später gebraucht wird.
   =========================================================== */
.cal14 { display: flex; flex-direction: column; gap: var(--gap-md); border-radius: var(--radius-card); }
.cal14-range { font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy); margin: 0; }
.cal14--on-navy .cal14-range, .card--navy .cal14-range { color: var(--ivory); }

.cal14-legend { display: flex; flex-wrap: wrap; gap: var(--gap-md); font-size: var(--fs-caption); color: var(--navy-ink-2); }
.cal14--on-navy .cal14-legend, .card--navy .cal14-legend { color: var(--ivory-62); }
.cal14-legend li { display: flex; align-items: center; gap: 8px; }
.cal14-legend li::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-xs); flex-shrink: 0; }
.cal14-legend li[data-status="verfuegbar"]::before { background: var(--teal-tint); border: 2px solid var(--teal-ink); }
.cal14-legend li[data-status="anfrage"]::before { background: transparent; border: 1.5px dashed var(--navy-70); }
/* R2-2-08/K-A4 (klein, Fix-Runde 2 Global, 23.09.2026): Rand var(--line-1)
   auf Weiß maß nur ≈1,2:1 — der Swatch war neben den beiden anderen,
   deutlich kräftigeren Legenden-Symbolen kaum zu erkennen (die Zelle selbst
   trägt zusätzlich die Durchstreichung, siehe .cal14-day[data-status=
   "vergeben"] .cal14-num unten — der Swatch bekommt jetzt dieselbe
   Diagonal-Linie, statt nur einen schwachen Rahmen). */
.cal14-legend li[data-status="vergeben"]::before { border: 1px solid var(--navy-35); background: linear-gradient(135deg, transparent 44%, var(--navy-70) 44% 56%, transparent 56%), var(--navy-08); }
.cal14--on-navy .cal14-legend li[data-status="anfrage"]::before, .card--navy .cal14-legend li[data-status="anfrage"]::before { border-color: var(--ivory-58); }
.cal14--on-navy .cal14-legend li[data-status="vergeben"]::before, .card--navy .cal14-legend li[data-status="vergeben"]::before { background: var(--ivory-08); border-color: var(--ivory-25); }

.cal14-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
/* D-03 (sperr): festes aspect-ratio:1 ließ Wochentag/Zahl/Monat bei 375px
   und 1024px 3–13px über die Zelle hinausragen. min-height statt fixer
   Höhe lässt die Zelle mit ihrem Inhalt wachsen (nie abgeschnitten), der
   clamp hält sie auf jeder Breite proportional kompakt (58px bei 375px,
   76px ab breiten Desktop-Spalten). */
.cal14-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  aspect-ratio: auto; min-height: clamp(58px, 5vw + 38px, 76px); border-radius: var(--radius-sm); border: 1px solid var(--line-1);
  background: var(--surface-card); color: var(--navy); padding: 4px;
}
.cal14-day .cal14-weekday { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy-ink-2); }
.cal14-day .cal14-num { font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal14-day .cal14-month { font-size: var(--fs-micro); color: var(--navy-ink-2); }
/* AA-Text „Verfügbar" (Auftrag 23.09.2026, Punkt 6): --teal-ink (#007A6B)
   auf --teal-tint DIREKT auf Ivory (Kalender ohne umschließendes weißes
   .card, das kanonische Markup aus BAU-REGELN 4.3 sieht keinen
   Karten-Wrapper zwingend vor) misst nur 4,21:1 — knapp unter der für
   Label-/Ziffern-Text nötigen 4,5:1 (Testseite „Auf Ivory direkt",
   _projekt/cal-test.html). Auf Weiß (der auf model-profil.html
   tatsächlich genutzte Fall, `.calendar-card.card`) liegt derselbe Wert
   bereits bei 4,70:1 — hier trotzdem eine dunklere, NUR im Kalender
   genutzte Teal-Stufe (nicht das geteilte --teal-ink-Token, das bleibt
   für Badge/Filter/Formular-Erfolg unverändert), damit die Komponente
   auch ohne Karten-Wrapper direkt auf Ivory zuverlässig AA hält
   (rechnerisch 4,95:1 auf Ivory, 5,5:1+ auf Weiß). */
.cal14-day[data-status="verfuegbar"] { background: var(--teal-tint); border-width: 2px; border-color: var(--teal-ink); color: #006e60; }
.cal14-day[data-status="verfuegbar"] .cal14-weekday, .cal14-day[data-status="verfuegbar"] .cal14-month { color: #006e60; }
/* D-02 (sperr, F13): war --surface-card-alt (Beige, identisch zu v1 —
   genau der von Leila abgelehnte „Braun"-Ton). Jetzt Weiß + gestrichelte
   Navy-Kontur, wie 4.3 verlangt. */
.cal14-day[data-status="anfrage"] { background: var(--surface-card); border-style: dashed; border-color: var(--navy-70); }
.cal14-day[data-status="vergeben"] { background: var(--navy-08); color: var(--navy-ink-2); }
.cal14-day[data-status="vergeben"] .cal14-num { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cal14-day.is-today { box-shadow: 0 0 0 2px var(--navy); }
.cal14--on-navy .cal14-day.is-today, .card--navy .cal14-day.is-today { box-shadow: 0 0 0 2px var(--ivory); }

/* .cal14--on-navy/.card--navy: die Navy-basierten Tints/Töne oben
   (--navy-08, --navy-70, --navy-ink-2 …) verschwinden auf einer
   Navy-Fläche fast unsichtbar (Navy-auf-Navy) — hier auf die
   Ivory-Transparenzstufen gespiegelt, damit .cal14 auch dort AA-lesbar
   bleibt (nur wenn der Kalender SELBST auf Navy sitzt, siehe Kommentar
   oben — nicht vererbt von einem umschließenden .on-navy). */
.cal14--on-navy .cal14-day, .card--navy .cal14-day { background: var(--ivory-08); border-color: var(--ivory-25); color: var(--ivory); }
.cal14--on-navy .cal14-day .cal14-weekday, .card--navy .cal14-day .cal14-weekday,
.cal14--on-navy .cal14-day .cal14-month, .card--navy .cal14-day .cal14-month { color: var(--ivory-62); }
.cal14--on-navy .cal14-day[data-status="verfuegbar"], .card--navy .cal14-day[data-status="verfuegbar"] { color: var(--teal); }
.cal14--on-navy .cal14-day[data-status="verfuegbar"] .cal14-weekday, .card--navy .cal14-day[data-status="verfuegbar"] .cal14-weekday,
.cal14--on-navy .cal14-day[data-status="verfuegbar"] .cal14-month, .card--navy .cal14-day[data-status="verfuegbar"] .cal14-month { color: var(--teal); }
.cal14--on-navy .cal14-day[data-status="anfrage"], .card--navy .cal14-day[data-status="anfrage"] { background: var(--ivory-10); border-color: var(--ivory-58); }
.cal14--on-navy .cal14-day[data-status="vergeben"], .card--navy .cal14-day[data-status="vergeben"] { background: transparent; color: var(--ivory-58); }
.cal14--on-navy .cal14-day[data-status="vergeben"] .cal14-weekday, .card--navy .cal14-day[data-status="vergeben"] .cal14-weekday,
.cal14--on-navy .cal14-day[data-status="vergeben"] .cal14-month, .card--navy .cal14-day[data-status="vergeben"] .cal14-month { color: var(--ivory-58); }

.cal14-fallback { font-size: var(--fs-body-sm); color: var(--navy-70); }
.cal14--on-navy .cal14-fallback, .card--navy .cal14-fallback { color: var(--ivory-82); }
.cal14-fallback[hidden] { display: none; }
/* R2-2-07/D-15 (klein, Fix-Runde 2 Global, 23.09.2026): ohne JS bleibt
   [data-cal14-grid] leer, aber Zeitraum-Zeile ("bis") und Legende standen
   trotzdem da — ohne Raster wirkungslos, und die Zeitraum-Zeile zeigte nur
   das Wort "bis" (die von/bis-Werte werden erst per JS gefüllt). Erst
   anzeigen, wenn das Modul gelaufen ist (Raster nicht mehr leer). Die
   Karten-Beschreibung/Caption über dem Kalender ist Sache der jeweiligen
   Seiten-CSS (model-profil.css), hier nur der Kernel-Teil (Zeile/Legende). */
.cal14:has(.cal14-grid:empty) :is(.cal14-range, .cal14-legend) { display: none; }

@media (max-width: 560px) {
  .cal14-grid { gap: 6px; }
  .cal14-day { padding: 4px 2px; }
}

/* ===========================================================
   13. ACCORDION (Ablauf · FAQ · Buchungs-Steps)
   =========================================================== */
.acc-group { display: flex; flex-direction: column; gap: var(--gap-sm); }
.acc-item { border: 1px solid var(--line-1); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-card); }
.on-navy .acc-item, .card--navy .acc-item { border-color: var(--ivory-18); background: transparent; }

.acc-trigger {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: clamp(18px, 2vw, 24px) clamp(18px, 2.4vw, 26px); text-align: left;
  /* Setzt die Body-Schrift zurück, sonst erben acc-num/acc-sign fälschlich
     Geist/600/enges Tracking vom umschließenden <h3> (Finding 4). */
  font-family: var(--font-body); font-weight: 400; letter-spacing: normal; line-height: var(--lh-body);
}
h3 > .acc-trigger { width: 100%; }
.acc-trigger .acc-num { font-size: var(--fs-caption); color: var(--navy-ink-2); width: 26px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.on-navy .acc-trigger .acc-num, .card--navy .acc-trigger .acc-num { color: var(--ivory-58); }
.acc-trigger .acc-title { flex: 1; margin: 0; }
/* :not(.h3-sm) lässt die FAQ-Trigger unangetastet — die tragen ihre Größe
   bereits über die eigene .h3-sm-Klasse (kleinere Skala als Ablauf/Buchung). */
.acc-trigger .acc-title:not(.h3-sm) { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-head); }
.acc-trigger .acc-status { flex-shrink: 0; }

.acc-sign {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-2); position: relative; flex-shrink: 0;
}
.on-navy .acc-sign, .card--navy .acc-sign { border-color: var(--ivory-25); }
.acc-sign::before, .acc-sign::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--navy); transform: translate(-50%, -50%); }
.on-navy .acc-sign::before, .on-navy .acc-sign::after, .card--navy .acc-sign::before, .card--navy .acc-sign::after { background: var(--ivory); }
.acc-sign::before { width: 11px; height: 1.4px; }
.acc-sign::after { width: 1.4px; height: 11px; transition: transform var(--dur-med) var(--ease-swift), opacity var(--dur-fast) ease; }
.acc-item.is-open .acc-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* R2-2-06 (wichtig, Fix-Runde 2 Global, 23.09.2026): max-height:0 allein
   nimmt ein zugeklapptes Panel NICHT aus der Tab-Reihenfolge — Inhalt und
   Links darin blieben per Tab erreichbar, nur unsichtbar (0px hoch,
   WCAG 2.4.3/2.4.7). Betrifft dieselbe Komponente auf Buchung/FAQ/Interview.
   visibility:hidden löst es zusätzlich zu max-height; die eigene Transition
   sorgt dafür, dass ein Panel beim ZUKLAPPEN erst sichtbar bleibt, bis die
   Höhen-Animation fertig ist (delay = --dur-slow), und beim AUFKLAPPEN sofort
   sichtbar wird (0s Delay, siehe .is-open-Regel unten) — kein Inhaltssprung,
   kein unsichtbarer Fokus-Stopp. */
.acc-panel { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--dur-slow) var(--ease-swift), visibility 0s linear var(--dur-slow); }
.acc-item.is-open > .acc-panel { visibility: visible; transition-delay: 0s; }
.acc-panel-inner { padding: 0 clamp(18px, 2.4vw, 26px) clamp(20px, 2.4vw, 28px); }
.acc-panel-inner .card-desc { margin-bottom: 18px; }
.acc-panel-inner .includes-label { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy-ink-2); margin-bottom: 12px; }
.on-navy .acc-panel-inner .includes-label, .card--navy .acc-panel-inner .includes-label { color: var(--ivory-62); }

/* ===========================================================
   14. FAQ-TABS mit gleitender Pille (K2, 29.09.2026)
   Für JEDE `.faq-tabs`-Instanz (index, models, faq, künftige). Die weiße
   Aktiv-Pille ist ein einziges Element (`.faq-tabs::before`), das per
   transform (translate) und width/height in --dur-pill zum aktiven Tab
   gleitet. script.js §5 misst den aktiven Tab (Rect relativ zu .faq-tabs)
   und schreibt --pill-x/-y/-w/-h an die Gruppe; das gilt auch im 2×2-Raster
   unter 560 px (dort gleitet die Pille senkrecht UND waagerecht).
   Erst wenn JS die Pille gesetzt hat, trägt die Gruppe `.has-pill`:
   dann ist die Pille sichtbar und der aktive Tab selbst transparent. Ohne
   JS (oder wenn JS fehlschlägt) bleibt der Fallback: aktiver Tab mit
   weißem Hintergrund. `.pill-instant` schaltet Transitionen für die
   Erstplatzierung und für Resize/Schriftladen ab (kein Nachgleiten aus
   der Ecke). prefers-reduced-motion: Pille springt.
   =========================================================== */
.faq-tabs {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 6px; background: var(--surface-card-alt); color: var(--navy);
  border-radius: var(--radius-full); padding: 5px; margin-bottom: var(--gap-md); flex-wrap: wrap;
}
.faq-tabs::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: var(--pill-w, 0px); height: var(--pill-h, 0px);
  transform: translate3d(var(--pill-x, 0px), var(--pill-y, 0px), 0);
  border-radius: var(--radius-full); background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(var(--navy-rgb), .06), var(--shadow-pop);
  opacity: 0;
  transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill), height var(--dur-pill) var(--ease-pill), opacity .15s linear;
}
.faq-tabs.has-pill::before { opacity: 1; }
.faq-tabs.pill-instant::before, .faq-tabs.pill-instant .faq-tab { transition: none; }
.faq-tab {
  min-height: 44px; padding: 10px 20px; display: inline-flex; align-items: center; border-radius: var(--radius-full);
  font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy-70);
  transition: background-color var(--dur-fast) var(--ease-swift), color var(--dur-pill) var(--ease-pill);
}
.faq-tab.is-active { background: var(--surface-card); color: var(--navy); }
.faq-tabs.has-pill .faq-tab.is-active { background: transparent; }
/* Fokusring nur per Tastatur (:focus-visible), am Tab selbst und über der Pille;
   überschreibt den globalen 4-px-Radius des Standard-Fokusrings (Abschnitt 1),
   damit der Ring der Pillenform folgt. */
.faq-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--radius-full); }
.faq-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .faq-tabs::before, .faq-tab { transition: none; }
}
/* R2-1-03 (wichtig, Fix-Runde 2 Global, 23.09.2026): die Pillen-Leiste
   (inline-flex + wrap) bricht unter 560px bei 3 oder 4 Tabs in ungleiche
   2+1- bzw. 2+1+1-Zeilen und wirkt als unregelmäßiger Blob (voller
   radius-full auf einer mehrzeiligen Fläche) — sauberes 2×2-Raster im
   Kernel für jede FAQ-Tab-Leiste (seitenlokale Dubletten sind entfallen).
   Bei einer ungeraden Tab-Zahl (3, z. B. index.html) nimmt der letzte Tab
   die volle Breite der zweiten Zeile ein statt allein schmal in einer
   dritten Zeile zu stehen. Die gleitende Pille (oben) misst Tab-Rechtecke
   und folgt dem Raster deshalb auch diagonal. */
@media (max-width: 560px) {
  .faq-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; border-radius: var(--radius-card); }   /* Fix-Runde 2 (Gate C, Kosmetik 360 px): gleich hohe Reihen, auch wenn ein Label zweizeilig umbricht */
  .faq-tab { justify-content: center; text-align: center; padding-inline: 8px; }
  .faq-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Korrekturrunde 02.10.2026: im Stapel-Zustand (2×2-Raster) sind Container, gleitende
     Pille und Tabs einheitlich 4 px (--radius-card); die Pillenform gilt nur in der Zeile. */
  .faq-tabs::before, .faq-tab, .faq-tab:focus-visible { border-radius: var(--radius-card); }
}
/* Fix-Runde 1 (Gate B, B3): dasselbe Raster in jeder Breite, in der die Tabs nicht in
   eine Reihe passen. Die Klasse setzt NUR script.js §5 (faqFitTabs), nachdem sie den
   Umbruch gemessen hat. */
.faq-tabs--stacked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; border-radius: var(--radius-card); }
.faq-tabs--stacked .faq-tab { justify-content: center; text-align: center; padding-inline: 8px; }
.faq-tabs--stacked .faq-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Korrekturrunde 02.10.2026: Stapel-Zustand einheitlich 4 px (Container, Pille, Tabs, Fokusring). */
.faq-tabs--stacked::before, .faq-tabs--stacked .faq-tab, .faq-tabs--stacked .faq-tab:focus-visible { border-radius: var(--radius-card); }

/* ===========================================================
   15. STÄDTE-MARQUEE
   =========================================================== */
.marquee-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.marquee-wrap { overflow: clip; margin: 0; padding-left: var(--section-pad-x); }
.marquee-track { display: flex; gap: var(--gap-md); width: max-content; will-change: transform; }
.city-card {
  /* K1 (29.09.2026), seit 02.10.2026 4 px: Karte (--radius-card), Bild darin clippt die Karte. */
  position: relative; width: 260px; flex-shrink: 0; border-radius: var(--radius-card); overflow: hidden;
  background: var(--navy); color: var(--ivory); display: flex; flex-direction: column;
}
.city-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 620/760; display: block; }
.city-card .label { display: flex; align-items: center; gap: 8px; padding: 16px 18px 18px; font-size: var(--fs-body-sm); font-weight: 500; }
.city-card .label svg { width: 16px; height: 16px; color: var(--ivory-62); flex-shrink: 0; }

/* Text-Variante (F17/1f, neu gefasst 23.09.2026 — Reviewer-Befund W2/W4):
   ruhiges Laufband OHNE Bildkarten UND ohne Kästchen, z. B. die „weiteren
   Städte" unter den vier statischen Hauptstadt-Bildkarten der Startseite.
   Gleiche Quelle/Mechanik wie das Bild-Marquee (script.js Abschnitt 6,
   buildCard() hängt ohne <img> in der Quell-<li> kein Bild an) — hier nur
   die visuelle Variante: EINE fließende Textzeile, Einträge durch einen
   dünnen Trenner (kein eigener Rahmen/Radius je Eintrag) statt einzelner
   Pillen getrennt — die vorherige Pillen-Fassung erzeugte in Kombination
   mit einem Seiten-Override doppelte Rahmen/„Kästchen" (W2). */
.marquee--text .marquee-track { align-items: center; gap: var(--gap-md); }
/* R2-1-01 (wichtig, Fix-Runde 2 Global, 23.09.2026): gap:8px hier UND
   margin-left:var(--gap-md) auf dem ::after-Trenner darunter erzeugten
   zusammen mit einem seiteneigenen Trenner-Override (index.css, W2-Fix)
   sichtbar ZWEI Striche je Eintrag mit ungleichen Abständen. Der
   Start-Agent entfernt den Seiten-Override parallel — der Kernel muss
   daher allein (ohne Override) genau einen Trenner mit gleichem Abstand
   vor UND nach jedem Eintrag zeigen: der eigene Flex-Gap entfällt (0),
   der Abstand kommt ausschließlich aus der margin-left des Trenners
   (gleicher Wert wie der Track-Gap darüber) — Label–Trenner und
   Trenner–nächstes Label sind dadurch exakt gleich breit. */
.marquee--text .city-card {
  width: auto; flex-direction: row; align-items: center; gap: 0; background: transparent; color: var(--navy);
  border: none; border-radius: 0; overflow: visible;
}
.marquee--text .city-card .label { padding: 0; gap: 8px; }
.marquee--text .city-card .label svg { color: var(--navy-ink-2); }
/* Trenner NACH jedem Eintrag statt Kartenrahmen — läuft als Teil des
   fortlaufenden Loops unauffällig durch, auch am jeweils letzten Eintrag
   eines Klon-Sets (nahtlose Wiederholung, kein spürbarer Bruch). */
.marquee--text .city-card::after {
  content: ""; display: block; width: 1px; height: 14px; flex-shrink: 0;
  margin-left: var(--gap-md); background: var(--line-2);
}
.on-navy .marquee--text .city-card, .card--navy .marquee--text .city-card { color: var(--ivory); }
.on-navy .marquee--text .city-card::after, .card--navy .marquee--text .city-card::after { background: var(--ivory-25); }
.on-navy .marquee--text .city-card .label svg, .card--navy .marquee--text .city-card .label svg { color: var(--ivory-62); }

/* W4 (wichtig): bei prefers-reduced-motion blieb der Track bei Offset 0
   stehen — je nach Satzbreite/Viewport dadurch nie alle Einträge sichtbar
   (375px: nur 3 von 7 Chips; 1440px: letzter Eintrag abgeschnitten,
   overflow:clip verhindert jedes Scrollen). Fallback: Laufband ausblenden,
   die (bislang nur visuell versteckte) Quellliste stattdessen normal
   anzeigen — vollständig, umbrechend, in derselben Trenner-Optik. */
@media (prefers-reduced-motion: reduce) {
  .marquee-wrap { display: none; }
  /* R2-1-04 (klein, Fix-Runde 2 Global, 23.09.2026): die Selektoren unten
     hingen bislang an ".marquee--text .marquee-source" — im tatsächlichen
     Markup (index.html) steht die Quellliste (<ul data-marquee-source>)
     als EIGENES .section-inner NEBEN, nicht INNERHALB von .marquee-wrap
     .marquee--text, darum griffen Trenner-Optik und Abstand nie (0 von 7
     Städten mit Trenner, Liste klebte am Karten-Raster). Der feste Hook
     [data-marquee-source] ist unabhängig von der DOM-Verschachtelung und
     ersetzt die Klasse .marquee-source (die JS ohnehin nur zusätzlich auf
     demselben Element setzt) als Basis für alle Regeln hier. Zusätzlich
     verliert die Liste ihre Chip-Pillenoptik (Rahmen/Radius/Füllung) —
     „ruhige, umbrechende Textzeile ohne Pillen/Kästchen“ statt Chips. */
  [data-marquee-source] {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
    white-space: normal; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-sm); column-gap: var(--gap-md);
  }
  [data-marquee-source] li { display: inline-flex; align-items: center; }
  [data-marquee-source] .chip { border: 0; background: none; padding: 0; font-family: var(--font-head); font-size: var(--fs-h3-sm); }
  [data-marquee-source] li:not(:last-child)::after {
    content: ""; display: inline-block; width: 1px; height: 14px; flex-shrink: 0;
    margin-left: var(--gap-md); background: var(--line-2);
  }
  .on-navy [data-marquee-source] li::after, .card--navy [data-marquee-source] li::after { background: var(--ivory-25); }
}

/* ===========================================================
   16. DIFF-KARTEN (ohne/mit)
   =========================================================== */
.diff-pair { display: flex; flex-direction: column; gap: var(--gap-sm); }
.diff-card { border-radius: var(--radius-card); padding: 10px; display: flex; flex-direction: column; }
.diff-card .h3 { padding: 14px 16px 10px; }
.diff-card.without { background: var(--surface-card-alt); color: var(--navy); border: 1px solid var(--ivory-darker); }
.diff-card.with { background: var(--navy); color: var(--ivory); }
.diff-card ul { display: flex; flex-direction: column; gap: 2px; }
.diff-card li { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); }
.diff-card li svg { width: 15px; height: 15px; flex-shrink: 0; }
.diff-card.without li svg { color: var(--warm-grey-ink); }
.diff-card.with li svg { color: var(--ivory-82); }
/* Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A1-08): kein Zebra mehr („erinnert an Excel“,
   Beige auf Sand-Bühne zu nah am Hintergrund). Alle Zeilen haben denselben Kartengrund, eine feine
   Trennlinie hält sie auseinander. Die Linie nimmt die Textfarbe der Karte (currentColor, 12 %):
   Navy auf weißer/heller Karte (≈ --line-1), Ivory auf der Navy-Variante `.diff-card.with`. */
.diff-card li + li { border-top: 1px solid var(--line-1); }
@supports (color: color-mix(in srgb, red, blue)) {
  .diff-card li + li { border-top-color: color-mix(in srgb, currentColor 12%, transparent); }
}

/* ===========================================================
   17. CHIPS
   =========================================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line-2); border-radius: var(--radius-full); padding: 9px 15px; font-size: var(--fs-caption); color: var(--navy-70); }
.on-navy .chip, .card--navy .chip { border-color: var(--ivory-25); color: var(--ivory-82); }

/* ===========================================================
   18. FORMULARE
   =========================================================== */
.form-shell { display: flex; flex-direction: column; gap: var(--gap-md); }
fieldset { border: none; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: var(--gap-sm); font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 600; }
/* Radio-Gruppen-Legende innerhalb .form-field: optisch identisch zu den
   übrigen Feld-Labels statt der größeren Standard-Legend. */
.form-field > legend { padding: 0; margin: 0; font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; color: var(--navy-70); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); }

.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field > label { font-size: var(--fs-caption); font-weight: 500; color: var(--navy-70); }
.form-field .req { color: var(--error); }

.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field input[type="date"], .form-field input[type="time"], .form-field select, .form-field textarea {
  appearance: none; -webkit-appearance: none; width: 100%; background: var(--surface-card);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 13px 16px; min-height: 48px;
  font-family: var(--font-body); font-size: var(--fs-input); color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease-swift), box-shadow var(--dur-fast) var(--ease-swift);
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23112250' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 11px 8px; padding-right: 38px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--navy-ink-2); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-08);
}

/* Datei-Feld (Korrekturrunde 02.10.2026, Meeting Leila 01.10., A4-09): input[type=file] wie die anderen
   Felder (weiße Fläche, Linie --line-2, 4 px, Fokusring, mindestens 48 px hoch = Tap-Ziel ≥ 44 px).
   Der Button-Teil (::file-selector-button) ist eine kleine Navy-Outline-Pille wie .btn-outline, der
   Rest zeigt „Keine Datei ausgewählt“ bzw. den Dateinamen in --navy-70 (≥ 4,5:1 auf Weiß).
   Das Feld bleibt IMMER sichtbar im Layout (nie display:none/visibility:hidden), weil validateFields
   ausgeblendete Felder überspringt; die Pflicht (required) wird so wirklich geprüft.
   Mehrfachauswahl-Limit: Attribut data-max-files="N" (script.js, Abschnitt 11). */
.form-field input[type="file"] {
  width: 100%; min-height: 48px; padding: 6px 12px 6px 6px; background: var(--surface-card);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-input); color: var(--navy-70); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-swift), box-shadow var(--dur-fast) var(--ease-swift);
}
.form-field input[type="file"]::file-selector-button {
  min-height: 36px; margin-right: 14px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--navy-25); border-radius: var(--radius-full); background: transparent; color: var(--navy);
  font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn);
  transition: background-color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift);
}
@media (hover: hover) and (pointer: fine) {
  .form-field:not(.has-error) input[type="file"]:hover { border-color: var(--line-strong); }
  .form-field input[type="file"]:hover::file-selector-button { border-color: var(--navy); background: var(--navy-06); }
}
/* Fokus per Tastatur: deutlicher Navy-Ring (die allgemeine Feld-Regel oben nimmt den Outline weg
   und setzt nur Rahmen plus 3-px-Schimmer; für den Datei-Button reicht das nicht als Fokuszeichen). */
.form-field input[type="file"]:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.field-error { display: none; font-size: var(--fs-caption); color: var(--error); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea, .form-field.has-error .box { border-color: var(--error); }
.form-field.has-error .box { background: var(--error-tint); }
.form-field.has-error .field-error { display: block; }

/* Checkbox / Radio */
/* R2-2-14 (klein, Fix-Runde 2 Global, 23.09.2026): Tap-Ziel der Radio-/
   Checkbox-Labels lag bei der reinen Zeilenhöhe (24–26px, gemessen bei
   Kontaktweg-Radios und der Hotel/Restaurant-Checkbox) statt der geforderten
   ≥44px. min-height + zentrierte Ausrichtung heben die Fläche an, ohne die
   sichtbare Box/den Zeilenabstand zu verändern; mehrzeilige Labels rücken
   dafür oben aus (align-items:flex-start + Innenabstand), damit die Box
   nicht mittig zwischen zwei Textzeilen hängt. */
.check-field, .radio-field { display: flex; align-items: center; gap: 11px; cursor: pointer; min-height: 44px; }
/* Checkbox-Labels sind im Formular durchgehend ganze Sätze (z. B. Hotel-/
   Restaurant-Wunsch, Einwilligung) und brechen auf schmalen Breiten in
   mehrere Zeilen — die Box soll dann oben an der ersten Zeile hängen statt
   mittig zwischen den Zeilen zu schweben. Radio-Optionen (Kontaktweg) bleiben
   einzeilige, kurze Wörter und damit beim zentrierten Standard. */
.check-field { align-items: flex-start; padding-block: 10px; }
.check-field input, .radio-field input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-field .box, .radio-field .box {
  width: 20px; height: 20px; border: 1px solid var(--line-2); background: var(--surface-card); flex-shrink: 0; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift);
}
.check-field .box { border-radius: var(--radius-xs); }   /* Korrekturrunde 02.10.2026: 3 px statt 6 px */
.radio-field .box { border-radius: 999px; }
.check-field .box svg { width: 12px; height: 12px; color: var(--ivory); opacity: 0; transition: opacity var(--dur-fast) ease; }
.radio-field .box::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ivory); opacity: 0; transition: opacity var(--dur-fast) ease; }
.check-field input:checked + .box, .radio-field input:checked + .box { background: var(--navy); border-color: var(--navy); }
.check-field input:checked + .box svg, .radio-field input:checked + .box::after { opacity: 1; }
.check-field input:focus-visible + .box, .radio-field input:focus-visible + .box { outline: 2px solid var(--navy); outline-offset: 3px; }
.check-field .box-label, .radio-field .box-label { font-size: var(--fs-body-sm); color: var(--navy-70); }
.radio-group { display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-md); }

/* Erfolgs-Panel */
.form-success {
  display: none; align-items: flex-start; gap: 16px; padding: clamp(24px, 2.8vw, 32px);
  border-radius: var(--radius-card); background: var(--teal-tint); color: var(--navy); border: 1px solid var(--teal-line);
}
.form-success.is-shown { display: flex; }
.form-success .success-mark {
  width: 42px; height: 42px; border-radius: 999px; background: var(--teal-ink); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.form-success .success-mark svg { width: 17px; height: 17px; }
.form-success h3 { margin-bottom: 6px; }
.form-success p { color: var(--navy-70); font-size: var(--fs-body-sm); }
/* Neutrale Variante für Academy-/Event-Marketing-Formulare (kontakt/karriere):
   Teal bleibt reine Plattform-UI (Buchung/Merkliste), siehe DESIGN.md offene Punkte. */
.form-success--neutral { background: var(--surface-card); border-color: var(--line-strong); }
.form-success--neutral .success-mark { background: var(--navy); color: var(--ivory); }

/* ===========================================================
   19. BUCHUNGS-STEPS
   =========================================================== */
.booking-shell { border: 1px solid var(--line-1); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 30px); background: var(--surface-card); color: var(--navy); }
.step-status { display: flex; align-items: center; gap: var(--gap-sm); margin-bottom: var(--gap-lg); flex-wrap: wrap; }
.step-status li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--navy-ink-2); }
.step-status li + li::before { content: ""; width: 20px; height: 1px; background: var(--line-2); flex-shrink: 0; margin-right: 8px; }
.step-status .dot { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-micro); flex-shrink: 0; }
.step-status .dot svg { width: 11px; height: 11px; display: none; color: var(--ivory); }
.step-status li.is-current { color: var(--navy); font-weight: 600; }
.step-status li.is-current .dot { border-color: var(--navy); background: var(--navy); color: var(--ivory); }
.step-status li.is-done .dot { border-color: var(--teal-ink); background: var(--teal-ink); }
.step-status li.is-done .dot span { display: none; }
.step-status li.is-done .dot svg { display: block; }

.step-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); margin-top: 22px; flex-wrap: wrap; }
.step-actions .spacer { flex: 1; }

/* ===========================================================
   20. .ph PLATZHALTER — exakt nach BAU-REGELN Abschnitt 6, wörtlich.
   Einzige bewusste Ausnahme von der Token-Pflicht: hier fest
   vorgegebene Werte, nicht durch :root-Tokens ersetzen.
   =========================================================== */
.ph{position:relative;display:grid;place-items:center;background:#ece5d6;
  border:1px dashed rgba(17,34,80,.35);border-radius:var(--radius-media);overflow:hidden}
.ph::before{content:attr(data-size);font-family:var(--font-head);
  font-size:clamp(15px,1.4vw+6px,22px);letter-spacing:.5px;color:rgba(17,34,80,.55)}
.ph::after{content:attr(data-motiv);position:absolute;bottom:10px;left:12px;right:12px;
  font-size:clamp(11px,.7vw+7px,12.5px);color:rgba(17,34,80,.45);text-align:center}

.ph--dark{background:var(--ivory-08);border-color:var(--ivory-35);}
.ph--dark::before{color:var(--ivory-65);}
/* K6 (23.09.2026): war --ivory-50 = 3,98:1 auf rgb(35,51,92) — AA verfehlt.
   --ivory-65 (wie ::before) = 5,62:1. */
.ph--dark::after{color:var(--ivory-65);}

/* ===========================================================
   21. LEGAL-PAGE
   =========================================================== */
.legal-page { max-width: 800px; margin: 0 auto; padding: clamp(140px, 16vw, 170px) var(--section-pad-x) clamp(80px, 10vw, 120px); }
.legal-page h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 10px; }
.legal-page h2 { font-size: clamp(21px, 2vw, 26px); margin: 40px 0 14px; font-family: var(--font-head); font-weight: 600; }
.legal-page p, .legal-page li { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--navy-70); margin-bottom: 14px; }
.legal-page li { padding-left: 20px; position: relative; }
/* Abnahme-Korrektur (Runde 2 Global, 23.09.2026): war content:"–" — ein
   sichtbarer Halbgeviertstrich vor jedem Listenpunkt der Rechtstexte,
   Regel 0.1 verbietet Gedankenstriche ausnahmslos, auch als CSS-generierten
   Inhalt (7 Treffer im Regel-Scan, ausschließlich datenschutz.html). Runder
   Punkt statt Zeichen — keine Strich-Optik, Einrückung (padding-left:20px
   oben) unverändert. */
.legal-page li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.legal-page a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-notice {
  margin: 24px 0 40px; padding: 18px 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius-media);
  background: var(--surface-card-alt); font-size: var(--fs-caption); line-height: 1.6; color: var(--navy);
}
.legal-page .lead-in { font-size: var(--fs-body-sm); color: var(--navy-ink-2); margin-bottom: 32px; }

/* ===========================================================
   22. HERO (Seitenkopf-Komponente)
   Globale Kopf-Sektion JEDER Seite, direkt unter der Navbar. Markup
   trägt immer `.hero-full` PLUS die Kontext-Klassen `.bleed.on-navy`
   (Navy-Grund/Ivory-Text + die .on-navy-Kind-Farblogik aus Abschnitt
   4/5/11 — hier bewusst NICHT dupliziert, exakt wie beim Footer in
   Abschnitt 8). Drei Höhen-Varianten:
   - Standard (keine Zusatzklasse): Startseite, volle Kopf-Höhe direkt
     unter der Navbar, optional mit Foto (siehe .hero-bg unten).
   - `.hero-full--sub`: Unterseiten-Kopf, navy ohne Foto, kompaktere Höhe.
   - `.hero-full--kompakt`: Rechtsseiten/404, keine Mindesthöhe, reiner
     Innenabstand oben/unten.
   Inset (10px/8px mobil) + Radius (30px/22px mobil) sind Hero-exklusive,
   dokumentierte Literalwerte (aus dem früheren index-spezifischen Bau
   übernommen, siehe DESIGN.md Abschnitt 7 „Bekannte, bewusste
   Abweichungen" — jetzt Kernel-Norm für JEDE `.hero-full`-Instanz, nicht
   mehr nur index.html).
   Struktur: .hero-bg (Foto-Ebene, NUR wenn die Seite ein Foto führt) →
   .hero-scrim (Verlauf-Layer, NUR mit Foto — Gradient selbst ist
   seitenspezifisch, siehe pages/index.css) → `::before`/`::after`
   (Bogen-Deko, IMMER vorhanden — auf reinen Navy-Flächen ohne Foto die
   einzige Textur, Referenz-Look) → .hero-content (Flex-Spalte, LINKS
   verankert über festes clamp()-Padding, KEINE Seitenachsen-Formel) mit
   .hero-top (Eyebrow+H1, enger Innen-Gap) und optional .hero-foot
   (Lead max. 520px + CTA-Zeile).
   =========================================================== */
.hero-full {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  margin: 10px;
  margin-top: calc(var(--nav-h) + 10px);
  border-radius: var(--radius-stage);   /* Korrekturrunde 02.10.2026: vorher fest 30 px, jetzt 4 px über das Bühnen-Token */
  /* Nicholas-Vorgabe 07.09.2026: Navbar + Hero sollen zusammen IMMER
     ~98svh ergeben, einheitlich für Start- UND --sub-Seiten (siehe
     DESIGN.md „Nachtrag: Hero-Höhenregel 98vh"). 20px = beide 10px-Insets
     ober-/unterhalb der Fläche (margin-top: nav-h+10px, margin-bottom:
     10px) zusammen — dadurch landet die MARGIN-Außenkante der Hero-Fläche
     bei 98svh, die gemessene Border-Box-Unterkante (getBoundingClientRect,
     die tatsächlich geprüfte Kante) entsprechend 10px darunter bei
     98svh − 10px (= 96.9% bei 900px Viewporthöhe, 96.5% mobil mit
     8px-Insets) — beides liegt in der Vorgabe 95–100%. Korrigiert
     07.09.2026 (Korrekturrunde kernel-98vh, Befund 5): die vorherige
     Fassung hatte behauptet, die Border-Box-Unterkante selbst lande bei
     98svh — das war invertiert, tatsächlich ist es die Margin-Außenkante.
     Nebenbefund derselben Runde: `.navbar` trägt zusätzlich
     `border-bottom:1px` — der reale Abstand Navbar-Unterkante→Hero-
     Oberkante ist deshalb 9px, nicht die hier gerechneten 10px; bei der
     95–100%-Toleranz unkritisch, aber die Doku darf nicht 10px als exakten
     Wert behaupten. Gilt auch unterhalb 720px unverändert (svh reagiert
     selbst auf den mobilen Nav-h-Wechsel via var(--nav-h)), obwohl der
     Mobil-Breakpoint unten die Insets auf 8px/8px verengt — die Differenz
     (16px statt 20px) bleibt innerhalb der Mess-Toleranz. */
  min-height: calc(98svh - var(--nav-h) - 20px);
}
.hero-full--sub { min-height: calc(98svh - var(--nav-h) - 20px); }
/* Korrekturrunde-Befund (SPERR, 07.09.2026): dieser Innenabstand addierte
   sich bislang mit dem .hero-content-Innenabstand weiter unten (beide
   padding-block) — gemessen 88px Sektion + 44px Content = 132px oben UND
   unten, genauso hoch wie eine normale Sektion, obwohl „keine Mindesthöhe,
   reiner Innenabstand“ dokumentiert war. .hero-content-Padding wird für
   diese Variante deshalb neutralisiert (siehe Regel am Ende dieses
   Abschnitts) — der hier gesetzte Wert ist jetzt der EINZIGE Abstand. */
.hero-full--kompakt { min-height: auto; padding-block: clamp(48px, 7vw, 88px); }

/* Bogen-Deko: zwei hauchdünne Kreisbögen rechts, per ::before/::after statt
   eines seiteneigenen SVG-Elements — dadurch automatisch auf JEDER
   .hero-full-Instanz vorhanden, ohne Markup-Pflicht pro Seite. Große
   Kreise, rechts über den Rand hinaus positioniert; `.hero-full`s eigenes
   `overflow:clip` schneidet nur den Bogen-Sliver sichtbar frei. */
/* Korrekturrunde-Befund (KERNEL-3, Klein, 07.09.2026): ::before/::after
   teilten sich z-index:1 mit .hero-scrim — die Baumreihenfolge entschied,
   ::before (der dichtere 130%-Bogen) wurde vom Scrim verdeckt, nur ::after
   (der schwächere 178%-Bogen) blieb auf Foto-Heroes sichtbar. Saubere
   Schichtung: .hero-scrim=1, Bögen=2, .hero-content=3 (siehe unten) — auf
   Foto- UND Navy-Heroes (dort kein Scrim) jetzt identisch. Gegengeprüft auf
   index.html (Foto) und models.html (--sub, navy ohne Foto): beide Bögen
   sichtbar, Opazitäten (.1/.07) unverändert ausreichend gedämpft. */
.hero-full::before, .hero-full::after {
  content: ""; position: absolute; top: 50%; right: 0; aspect-ratio: 1;
  border: 1px solid var(--ivory); border-radius: 50%; opacity: .1;
  pointer-events: none; z-index: 2; transform: translate(38%, -50%);
}
.hero-full::before { height: 130%; }
.hero-full::after { height: 178%; opacity: .07; }

.hero-full .hero-bg, .hero-full .hero-scrim { position: absolute; inset: 0; }
.hero-full .hero-bg { z-index: 0; }
.hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-full .hero-scrim { z-index: 1; pointer-events: none; }

.hero-full .hero-content {
  position: relative; z-index: 3; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(20px, 4vh, 64px);
  padding-block: clamp(24px, 3.2vw, 44px);
  /* Fester Innenabstand statt Seitenachsen-Zentrierformel — Hero-Text
     hängt an der Fläche selbst, nicht am Content-Grid der übrigen
     Sektionen (Referenz: alter Entwurf `.bleed-content{padding:50px}`). */
  padding-inline: clamp(28px, 4vw, 60px);
}
.hero-full .hero-top { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.hero-full .hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.4vw, 28px); }
/* Korrekturrunde-Befund (SPERR, 07.09.2026): war beim Kernelisieren auf
   440px verengt worden — das ist der Wert, den der frühere index-spezifische
   Sperr-Befund-Fix „CTA unter der Falz“ bewusst auf 520px verbreitert hatte
   (spart bei üblichen Desktop-Breiten die 5. Leadzeile, ~40px Höhe). Bei
   440px lief der Lead auf index.html bei 1366×768 wieder auf 5 Zeilen /
   191px, CTA-Unterkante 718px — nur noch 50px Reserve zur Falz. Zurück auf
   den geprüften 520px-Wert. */
.hero-full .hero-foot .lead { max-width: 520px; margin: 0; }

/* Rahmenkontrast des Outline-CTA gegen Foto-/Navy-Hero-Grund: das
   Standard-.on-navy-Ivory-25 reicht hier nicht sicher (WCAG 1.4.11,
   gemessen gegen den Foto-Hero <3:1 an einzelnen Stellen) — Ivory-50
   trägt zuverlässig, volles Ivory beim Hover. Gilt für jede Hero-
   Instanz, nicht nur den Foto-Hero, daher hier statt seitenspezifisch. */
.hero-full .btn-outline { border-color: var(--ivory-50); }
@media (hover: hover) and (pointer: fine) {
  .hero-full .btn-outline:hover { border-color: var(--ivory); }
}

/* Kurze Querformat-Viewports (Handys quer) — nicht über den 720px-
   Breakpoint (der ist für schmale Hochformat-Handys), hier ist die
   Breite groß, nur die Höhe knapp. Kompaktere Innenabstände, damit
   Eyebrow/H1/Lead/CTAs sichtbar bleiben. */
@media (min-width: 721px) and (max-height: 480px) {
  .hero-full .hero-content { padding-block: clamp(14px, 2vh, 24px); gap: clamp(12px, 2.5vh, 24px); }
  .hero-full .hero-foot .lead { max-width: 66ch; }
}

@media (max-width: 720px) {
  .hero-full { margin: 8px; margin-top: calc(var(--nav-h) + 8px); }   /* Korrekturrunde 02.10.2026: Radius kommt auch mobil aus --radius-stage (4 px), vorher fest 22 px */
  .hero-full .hero-content {
    padding-inline: max(0px, calc(var(--section-pad-x) - 8px));
    padding-block: clamp(18px, 3vh, 24px);
    gap: clamp(20px, 8svh, 72px);
  }
  /* Korrekturrunde-Befund (SPERR, 07.09.2026): .hero-top und .hero-foot
     bekommen an keiner Stelle eine max-width gesetzt (die frühere Fassung
     `#hero .hero-bottom { max-width: 620px }` ist beim Kernelisieren
     entfallen) — nur .hero-foot .lead hat mit 520px überhaupt einen Wert
     zurückzusetzen. Selektorliste entsprechend gekürzt (keine toten
     Zurücksetzungen mehr). */
  .hero-full .hero-foot .lead { max-width: 100%; }
  /* R2-1-06 (klein, Fix-Runde 2 Global, 23.09.2026): .btn { width:100% }
     (Abschnitt Buttons) gilt nur für den Button selbst — steht er allein in
     einer schrumpfenden .row (kein Geschwister-Button, z. B. events.html),
     bleibt die .row selbst so schmal wie ihr Inhalt (inline-artiges
     flex-wrap-Verhalten) und der volle Button darin wirkt trotzdem schmal
     (gemessen 375px: index/academy 332/335px, events nur 171px). self-
     stretch zieht die .row auf die volle Content-Breite, egal ob sie einen
     oder mehrere Buttons enthält — einheitliche Hero-Button-Breite auf
     jeder Seite. */
  .hero-full .hero-foot > .row { align-self: stretch; }
}

/* Korrekturrunde-Befund (SPERR, 07.09.2026): neutralisiert das
   .hero-content-Padding für die --kompakt-Variante, damit sich der
   Innenabstand nicht mit dem Sektions-Padding aus der Regel oben addiert
   (siehe Kommentar dort) — .hero-full--kompakt { padding-block } ist damit
   der einzige Abstand oben/unten, auf jeder Breite (steht deshalb hier
   unmediaquery't nach allen Breakpoints, damit es die Mobil-/Querformat-
   Regeln oben zuverlässig überschreibt). */
.hero-full--kompakt .hero-content { padding-block: 0; }

/* ===========================================================
   22b. BÜHNEN `.stage` (K4, 29.09.2026)
   Eingerückte, gerundete Flächen im Stil des Heros (10 px Einzug, 30 px
   Radius) als Rhythmus-Element zwischen den Ivory-Sektionen. Drei Varianten:
   .stage--sand (helle Sand-Fläche), .stage--navy (dunkel, IMMER zusammen mit
   .on-navy), .stage--academy (Champagner, nur academy.html).
   Regel je Seite: nie drei gleiche Flächen hintereinander, ≥ 60 % helle
   Fläche, höchstens eine Navy-Bühne zwischen Hero und Schluss-CTA.
   Markup: <section class="section stage stage--sand stage--arcs" id="…">
             <div class="section-inner">…</div></section>
   .stage--arcs ergänzt die zwei Kreisbögen des Heros (gleiche Geometrie).
   Das Seiten-Padding wird um den Einzug verkleinert, damit der Inhalt auf
   derselben Achse steht wie in den Ivory-Sektionen.
   =========================================================== */
.stage {
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: var(--stage-inset);
  padding-inline: max(0px, calc(var(--section-pad-x) - var(--stage-inset)));
  border-radius: var(--radius-stage);
}
.stage + .stage { margin-top: var(--stage-inset); }
.stage > .section-inner { position: relative; z-index: 1; }
.stage--sand { background: var(--ivory-dark); }
.stage--navy { background: var(--surface-navy); color: var(--ivory); }
.stage--academy { background: var(--academy-surface); }

/* Kreisbögen wie im Hero (Abschnitt 22): Farbe und Deckkraft je Variante */
.stage--arcs::before, .stage--arcs::after {
  content: ""; position: absolute; top: 50%; right: 0; aspect-ratio: 1;
  border: 1px solid var(--arc-color, var(--navy)); border-radius: 50%;
  opacity: var(--arc-o1, .07); pointer-events: none; z-index: 0; transform: translate(38%, -50%);
}
.stage--arcs::before { height: 130%; }
.stage--arcs::after { height: 178%; opacity: var(--arc-o2, .05); }
.stage--sand.stage--arcs { --arc-color: var(--navy); --arc-o1: .07; --arc-o2: .05; }
.stage--navy.stage--arcs { --arc-color: var(--ivory); --arc-o1: .10; --arc-o2: .07; }
.stage--academy.stage--arcs { --arc-color: var(--academy); --arc-o1: .45; --arc-o2: .30; }

/* Sand auf Sand verschmilzt (Gate-A-Befund P1b, 29.09.2026): jede Fläche im
   Sand-Ton (--ivory-dark = #ece5d6, Kontrast zur Bühne 1,00:1) bekommt auf der
   Sand-Bühne eine hellere Fläche mit sichtbarer Kante.
   - Karten (.card--alt, .feature-card, helle Diff-Karte .diff-card.without)
     werden weiß mit Linie --line-1 (Karte zu Bühne 1,25:1 plus Linie); die
     Zeilen der Diff-Karte tragen seit 02.10.2026 kein Zebra mehr (Trennlinie
     statt Wechsel von Weiß auf Ivory, Abschnitt 16).
   - Platzhalter (.ph, Kernel-Wert #ece5d6 = Ton der Bühne) werden Ivory, die
     gestrichelte Navy-Kontur des .ph bleibt (sichtbare Kante). Maß- und
     Motivtext wandern auf --navy-70 (5,5:1 auf Ivory) und --navy-ink-2 (4,9:1),
     die Kernel-Werte (.55/.45 Deckkraft) lägen dort bei etwa 3,7:1 und 2,9:1.
     In der Sedcard (weiße Karte auf Sand) ist die Unterkante des Bilds nur ein
     feiner Trenner (--navy-16). .ph--dark (Navy-Flächen) bleibt unberührt. */
.stage--sand :is(.card--alt, .feature-card, .diff-card.without) { background: var(--surface-card); border-color: var(--line-1); }
.stage--sand .ph:not(.ph--dark) { background: var(--ivory); }
.stage--sand .ph:not(.ph--dark)::before { color: var(--navy-70); }
.stage--sand .ph:not(.ph--dark)::after { color: var(--navy-ink-2); }
.stage--sand .sedcard-media .ph { border-color: var(--navy-16); }

/* Fix-Runde 2 (Gate C, C10, 30.09.2026; Koordinator-Entscheidung: Standard bleibt die technische
   Fassung): PRÄSENTATIONSFASSUNG der Foto-Platzhalter, nur auf Wunsch. Nicholas hat zu Projektbeginn
   „Bilder zunächst Platzhalter mit sichtbaren Maßen“ verlangt (BAU-REGELN Abschnitt 6): STANDARD ist
   deshalb unverändert `.ph` aus Abschnitt 20 mit Maß (`data-size`) und Motivbeschreibung (`data-motiv`).
   Die ruhige Fassung (Monogramm „O“ in Geist, hauchfein, und die Zeile „Foto folgt“ statt Bauleiter-
   Sprache wie „800×1200 · Sedcard-Porträt …“) gilt NUR mit `<html data-praesentation>`. script.js
   Abschnitt 0 setzt das Attribut, wenn `?praesentation` an der Adresse steht, und merkt es in der
   sessionStorage (bleibt beim Klicken durch die Seiten erhalten; `?praesentation=aus` schaltet zurück).
   `data-size` und `data-motiv` bleiben in jedem Fall im Markup. Die Zeile „Foto folgt“ liegt in der
   Sekundärfarbe (AA), das Monogramm ist Dekor (`content` mit leerem Alternativtext). */
html[data-praesentation] .ph { border-style: solid; border-color: var(--navy-08); background-image: linear-gradient(155deg, rgba(255, 255, 255, .45), rgba(var(--navy-rgb), .04)); }
html[data-praesentation] .ph::before {
  content: "O"; content: "O" / "";
  font-family: var(--font-head); font-weight: 500; font-size: clamp(44px, 4.6vw, 84px); line-height: 1; letter-spacing: 0;
  color: rgba(var(--navy-rgb), .14);
}
html[data-praesentation] .ph::after { content: "Foto folgt"; content: "Foto folgt" / ""; font-size: var(--fs-caption); letter-spacing: .02em; color: var(--navy-ink-2); }
html[data-praesentation] .stage--sand .ph:not(.ph--dark)::before { color: rgba(var(--navy-rgb), .14); }
html[data-praesentation] .stage--sand .ph:not(.ph--dark)::after { color: var(--navy-ink-2); }
html[data-praesentation] .stage--sand .sedcard-media .ph { border-color: var(--navy-16); }
html[data-praesentation] .ph--dark { background-image: none; border-color: var(--ivory-18); }
html[data-praesentation] .ph--dark::before { color: var(--ivory-35); }
html[data-praesentation] .ph--dark::after { color: var(--ivory-65); }

/* Academy-Champagner: Navy-ink-2 (.66) erreicht dort nur 4,47:1 — Sekundärtext
   mindestens --navy-70 (5,04:1). Gold nie als Text oder freistehendes Icon
   (2,01:1), nur als .icon-badge--gold (seit 02.10.2026 Kreis --academy-deep mit weißem
   Icon, 3,39:1), als Bogenlinie und, ausschließlich auf academy.html, als große Fläche
   mit Navy-Text (Navy auf --academy 5,54:1; Seiten-CSS, DESIGN.md Nachtrag 02.10.2026). */
.stage--academy :is(.eyebrow, .caption, .micro-label, .lead, .card-desc) { color: var(--navy-70); }

/* ===========================================================
   22c. BOGENRAHMEN `.arch` (K5, 29.09.2026)
   Porträts von Menschen, die wir beim Namen nennen (z. B. Leila), stehen in
   einem Bogen (oben Halbkreis, unten --radius-media = 4 px seit 02.10.2026; Leila
   zeichnet den Bogen selbst, er bleibt oben rund), begleitet von einer
   hauchdünnen Bogenlinie im Abstand von 14 px.
   <figure class="arch-frame" style="--arch-max:360px">
     <div class="arch [arch--4x5] [reveal reveal--media]"><img src="…" width height alt="…" loading="lazy"></div>
     <figcaption class="caption">Leila Vogler, Gründerin</figcaption>
   </figure>
   Technik-Hinweis: Rundungen laufen mit PROZENT-Ellipsen (50 % waagerecht,
   30 % senkrecht = Halbkreis bei 3:5; 40 % bei 4:5) statt 999px. Mit 999px
   skaliert CSS beim Clamping ALLE Ecken mit demselben Faktor herunter, die
   unteren Ecken (4 px) würden zu ~1 px. Die Linie ist ein Outline mit
   outline-offset:14px (folgt der Ecken-Form, damit konzentrisch, und
   umschließt nur das Bild, nicht die Bildunterschrift).
   =========================================================== */
.arch-frame { position: relative; padding: 14px; max-width: var(--arch-max, 380px); }
/* Fix-Runde 1 (Gate B, B2-09, K5): Opt-in für eine kleinere Bogenbreite auf dem Handy.
   Ein Porträt im Bogen soll nicht den ganzen ersten Handy-Bildschirm füllen: die Seite setzt
   `--arch-max-mobile` (z. B. `260px`), der Rahmen ist dann bis 560 px Viewportbreite höchstens so
   breit. Ohne die Variable ändert sich nichts. Seit 30.09.2026 (Punkt 1, 3, 5) tragen Startseite
   (`leila-startseite.jpg`, mobil 260 px), Über uns (`leila-geschichte.jpg`, 280 px) und Werde Darling
   (`leila-werde-darling.jpg`, 280 px) je ein 4:5-Foto (1200×1500) im Bogen `.arch--4x5`; das frühere
   Nahporträt `leila-portrait.jpg` (400 px breit, weich) ist nirgends mehr eingebunden. */
@media (max-width: 560px) {
  .arch-frame { max-width: min(var(--arch-max, 380px), var(--arch-max-mobile, 9999px)); }
}
.arch {
  aspect-ratio: 3 / 5; overflow: hidden;
  border-radius: 50% 50% var(--radius-media) var(--radius-media) / 30% 30% var(--radius-media) var(--radius-media);
  outline: 1px solid var(--line-2); outline-offset: 14px;
}
.arch--4x5 {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--radius-media) var(--radius-media) / 40% 40% var(--radius-media) var(--radius-media);
}
.arch :is(img, .ph) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.arch .ph { border-width: 0; }
.arch-frame > figcaption { margin-top: 26px; text-align: center; }
.on-navy .arch { outline-color: var(--ivory-25); }

/* ===========================================================
   22d. HÄKCHENLISTE `.check-list` und PULL-QUOTE `.pullquote` (K11, 29.09.2026)
   <ul class="check-list [check-list--plain | check-list--neutral]">
     <li><strong>Ehrlichkeit:</strong> auch wenn die Antwort Nein ist</li> …</ul>
   Standard: 24-px-Navy-Kreis mit ausgeschnittenem Häkchen (Icon-Form von
   icon-ms-check als Maske, Farbe = Fläche dahinter), Text daneben, Kreis
   sitzt an der ERSTEN Zeile, Trennlinien --line-1 zwischen den Einträgen
   (14 px Innenabstand). --plain: ohne Linien. --neutral: 8-px-Navy-Punkt
   statt Häkchen (für Aufzählungen, die keine Pluspunkte sind, z. B.
   Symptome). Auf Navy (.on-navy/.card--navy) invertiert; helle Karten
   innerhalb einer Navy-Fläche bleiben hell. Enthält ein li selbst ein
   .icon-badge/.check-list-icon/svg als erstes Kind (Icon-Listen), entfällt
   der Kreis und das li wird zur Flex-Zeile (dann den Text in ein <span>).
   =========================================================== */
.check-list { --cl-mark: var(--navy); --cl-line: var(--line-1); display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.on-navy .check-list, .card--navy .check-list { --cl-mark: var(--ivory); --cl-line: var(--ivory-18); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .check-list { --cl-mark: var(--navy); --cl-line: var(--line-1); }
.check-list li {
  --cl-pt: 14px;
  position: relative; padding: var(--cl-pt) 0 14px 40px;
  font-size: var(--fs-body-sm); line-height: var(--lh-body);
}
.check-list li:first-child { --cl-pt: 0px; }
.check-list li:last-child { padding-bottom: 0; }
.check-list li + li { border-top: 1px solid var(--cl-line); }
.check-list--plain li + li { border-top: 0; }
.check-list li strong { font-family: var(--font-head); font-weight: 600; letter-spacing: var(--ls-head); }
/* Kreis + Häkchen: Häkchen ist ein Loch (Maske) im Kreis, zeigt also die Fläche dahinter */
.check-list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--cl-pt) + 1px); width: 24px; height: 24px; border-radius: 50%;
  background: var(--cl-mark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center / 15px 15px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center / 15px 15px no-repeat exclude, linear-gradient(#000 0 0);
}
.check-list--neutral li::before {
  -webkit-mask: none; mask: none; border-radius: 0;
  background: radial-gradient(circle, var(--cl-mark) 0 4px, transparent 4.5px);
}
.check-list li:has(> .icon-badge, > .check-list-icon, > svg) { display: flex; align-items: center; gap: 16px; padding-left: 0; }
.check-list li:has(> .icon-badge, > .check-list-icon, > svg)::before { display: none; }

/* Das deutsche „ sitzt auf der Grundlinie (Tiefstellung): der große, blasse
   Glyph steht links OBEN über dem Zitat, nicht im Text (top negativ, das
   padding-top der Figur schafft den Platz). */
.pullquote { position: relative; margin: 0; padding-top: calc(var(--fs-quote) * 1.9); }
.pullquote::before {
  content: "\201E"; content: "\201E" / ""; position: absolute; left: -.02em; top: calc(var(--fs-quote) * -1.75);
  font-family: var(--font-head); font-weight: 600; font-size: calc(var(--fs-quote) * 3.4); line-height: 1;
  color: var(--navy-16); pointer-events: none;
}
.pullquote blockquote { margin: 0; }
.pullquote blockquote p, .pullquote blockquote {
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-quote); line-height: 1.3;
  letter-spacing: var(--ls-head); text-wrap: balance; hyphens: manual;
}
.pullquote figcaption { margin-top: 18px; font-size: var(--fs-caption); line-height: 1.45; color: var(--navy-ink-2); }
.on-navy .pullquote::before { color: var(--ivory-25); }
.on-navy .pullquote figcaption { color: var(--ivory-62); }

/* ===========================================================
   22e. ZEITLEISTE `.timeline` (K10, 29.09.2026)
   <ol class="timeline [timeline--vertical]" style="--steps:3">
     <li class="timeline-step"><span class="timeline-num">01</span>
       <h3 class="h3">…</h3><p class="card-desc">…</p></li> … </ol>
   Die Nummern stehen im HTML (Geist in 56-px-Kreisen mit Navy-Kontur,
   verbindende 1-px-Linie). ≥ 900 px horizontal in --steps Spalten,
   darunter vertikal mit Linie links; .timeline--vertical erzwingt vertikal
   auf jeder Breite (z. B. neben einem Bild).
   =========================================================== */
.timeline { --tl-num: 56px; --tl-gap: clamp(24px, 3vw, 40px); --tl-fg: var(--navy); --tl-line: var(--navy-25); display: flex; flex-direction: column; gap: var(--tl-gap); margin: 0; padding: 0; list-style: none; }
.on-navy .timeline, .card--navy .timeline { --tl-fg: var(--ivory); --tl-line: var(--ivory-25); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .timeline { --tl-fg: var(--navy); --tl-line: var(--navy-25); }
.timeline-step { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: calc(var(--tl-num) + 20px); min-height: var(--tl-num); }
.timeline-step > .h3, .timeline-step > h3 { margin-top: 13px; }
.timeline-num {
  position: absolute; left: 0; top: 0; width: var(--tl-num); height: var(--tl-num); border-radius: 50%;
  border: 1px solid var(--tl-fg); color: var(--tl-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: var(--fs-h3-sm); font-weight: 600; letter-spacing: var(--ls-head); font-variant-numeric: tabular-nums;
}
/* vertikale Linie: von unter dem Kreis bis vor den nächsten */
.timeline-step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--tl-num) / 2); top: calc(var(--tl-num) + 8px);
  bottom: calc(8px - var(--tl-gap)); width: 1px; background: var(--tl-line);
}
@media (min-width: 900px) {
  .timeline:not(.timeline--vertical) { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: var(--tl-gap); }
  .timeline:not(.timeline--vertical) .timeline-step { padding-left: 0; padding-top: calc(var(--tl-num) + 22px); }
  .timeline:not(.timeline--vertical) .timeline-step > .h3, .timeline:not(.timeline--vertical) .timeline-step > h3 { margin-top: 0; }
  /* waagerechte Linie: rechts vom Kreis bis vor den nächsten Kreis */
  .timeline:not(.timeline--vertical) .timeline-step:not(:last-child)::before {
    left: calc(var(--tl-num) + 12px); right: calc(12px - var(--tl-gap)); top: calc(var(--tl-num) / 2); bottom: auto; width: auto; height: 1px;
  }
}

/* ===========================================================
   22f. „MEHR LESEN“ `.readmore` (K9, 29.09.2026) — natives <details>
   <details class="readmore"><summary class="readmore-toggle"><span>Ganze Beschreibung lesen</span>
     <span class="acc-sign" aria-hidden="true"></span></summary>
     <div class="readmore-body"><p>…</p></div></details>
   Der Summary sieht aus wie .textlink (mind. 44 px hoch), das Plus dreht
   zum Minus. Ohne JS voll funktionsfähig (nativ, springt); script.js §17
   öffnet/schließt die Höhe weich per Web Animations API (340 ms), bei
   prefers-reduced-motion bleibt es nativ. Geschlossen ist der Text aus
   innerText/Screenreader-Sicht draußen (nativ).
   =========================================================== */
.readmore { --rm-fg: var(--navy); --rm-line: var(--line-2); }
.on-navy .readmore, .card--navy .readmore { --rm-fg: var(--ivory); --rm-line: var(--ivory-25); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .readmore { --rm-fg: var(--navy); --rm-line: var(--line-2); }
.readmore-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; user-select: none;
  font-size: var(--fs-body-sm); font-weight: 500; color: var(--rm-fg);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  -webkit-tap-highlight-color: transparent;
}
.readmore-toggle::-webkit-details-marker { display: none; }
.readmore-toggle::marker { content: ""; }
.readmore-toggle:focus-visible { outline: 2px solid var(--rm-fg); outline-offset: 3px; border-radius: 4px; }
.readmore-toggle .acc-sign { border-color: var(--rm-line); }
.readmore-toggle .acc-sign::before, .readmore-toggle .acc-sign::after { background: var(--rm-fg); }
.readmore[open]:not(.is-closing) > .readmore-toggle .acc-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.readmore-body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--navy-70); }
.on-navy .readmore-body, .card--navy .readmore-body { color: var(--ivory-82); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .readmore-body { color: var(--navy-70); }
.readmore-body > :first-child { margin-top: 8px; }
.readmore-body p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: inherit; }
.readmore-body p + p { margin-top: .9em; }

/* ===========================================================
   22g. OBERFLÄCHEN-RESET: helle Karten in Navy-Flächen (Kernel-Nachtrag
   29.09.2026, Befund P1b/Gate A)
   Alle `.on-navy X`-Regeln färben Text, Buttons, Links, Linien und den
   Fokusring für einen DUNKLEN Untergrund (Ivory). Helle Karten, die auf einer
   Navy-Fläche stehen (`.stage--navy.on-navy`, `.bleed.on-navy`), sind selbst
   ein heller Untergrund: dort gilt wieder die helle Variante (Navy auf Weiß
   bzw. Sand), sonst stünde Ivory-Text auf Weiß (1,1:1).
   Helle Karten = `.card:not(.card--navy)` (auch `.card--alt`), `.sedcard`,
   `.booking-shell`, `.media-card`, `.feature-card`, `.diff-card:not(.with)`.
   Dunkel bleiben `.card--navy` und `.diff-card.with`, dort gelten die
   normalen `.on-navy`-Regeln. Dieselbe Liste steht in Abschnitt 10c
   (Icon-Badge), 22d (Häkchenliste), 22e (Zeitleiste), 22f („Mehr lesen“);
   wer eine neue helle Karte einführt, ergänzt sie überall.
   Spezifität: `.on-navy :is(…)` = mindestens (0,4,0) und schlägt damit jede
   `.on-navy X`-Regel (höchstens (0,3,0)) ohne Reihenfolge-Abhängigkeit.
   Seiten müssen daher NICHTS mehr pro Seite zurücksetzen.
   Gemessene Kontraste (Token auf Weiß): Navy 15,35:1, --navy-70 5,85:1,
   --navy-ink-2 5,14:1; auf Sand (--ivory-dark): 12,24:1 / 5,26:1 / 4,69:1.
   =========================================================== */
/* Grundfarbe (Überschriften und Fließtext erben sie) */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) { color: var(--navy); }
/* Text */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) :is(.lead, .card-desc, .section-cta p) { color: var(--navy-70); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .section-cta--lead p { color: var(--navy); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) :is(.caption, .eyebrow, .micro-label, .pullquote figcaption, .acc-trigger .acc-num, .acc-panel-inner .includes-label) { color: var(--navy-ink-2); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .pullquote::before { color: var(--navy-16); }
/* Buttons und Links */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-solid { background: var(--navy); color: var(--ivory); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-solid .copy-2 { color: var(--ivory); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-outline { color: var(--navy); border-color: var(--navy-25); background: transparent; }   /* 02.10.2026: Ivory-Eigenfüllung der Navy-Buttons gilt nicht auf hellen Karten */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-outline .copy-2 { color: var(--navy); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .icon-btn { background: var(--navy); color: var(--ivory); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .textlink { color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-solid:hover { background: var(--navy-light); }
  .on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .btn-outline:hover { border-color: var(--navy); background: var(--navy-06); }
}
/* Linien, Ringe, Chips, Akkordeon */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) :is(.section-cta, .divider) { border-top-color: var(--line-1); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .card-icon-ring { border-color: var(--line-2); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .chip { border-color: var(--line-2); color: var(--navy-70); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .arch { outline-color: var(--line-2); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .acc-item { border-color: var(--line-1); background: var(--surface-card); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .acc-sign { border-color: var(--line-2); }
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .acc-sign::before,
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) .acc-sign::after { background: var(--navy); }
/* Sand-Karten (.card--alt, .feature-card) behalten das weiße Basis-Badge (Abschnitt 10c) */
.on-navy :is(.card--alt, .feature-card) .icon-badge:not(.icon-badge--navy):not(.icon-badge--gold) { background: var(--surface-card); }
/* Fokusring: Navy auf der hellen Kartenfläche (Ivory-Ring auf Weiß = 1,13:1) */
.on-navy :is(.card:not(.card--navy), .sedcard, .booking-shell, .media-card, .feature-card, .diff-card:not(.with)) :focus-visible { outline-color: var(--navy); }

/* ===========================================================
   23. UTILITIES
   =========================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Layout-Utilities gegen wiederkehrende Inline-Styles (BAU-REGELN
   Abschnitt 1: seitenspezifisches Layout gehört NICHT als style="" ins
   Markup). Klein und generisch halten — für alles Komponentenartige eine
   echte Klasse in den passenden Abschnitten oben. */
.row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; }
.row--gap-md { gap: var(--gap-md); }
.items-center { align-items: center; }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.push-right { margin-left: auto; }

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100; background: var(--navy); color: var(--ivory);
  padding: 12px 20px; border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease-swift);
}
.skip-link:focus { top: 12px; }

/* ===========================================================
   24. RESPONSIVE
   =========================================================== */
@media (max-width: 1180px) {
  .section-head { flex-direction: column; }
  /* Fix-Runde 1 (Gate B, B8): gestapelt nie breiter als eine lesbare Zeile. Vorher
     max-width: 100 % = bis 922 px (90 bis 96 Zeichen je Zeile bei 1024 px). 640 px sind
     bei 19 bis 23 px Schrift rund 60 bis 70 Zeichen. */
  .section-head .lead { max-width: 640px; }
  .sedcard-grid, .merkliste-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Korrekturschleife 29.09.2026 (Kernel-Fix `.grid-3`): einfaches `.grid-3` (ohne
   `--triple`) steht von 721 bis 1180 px zweispaltig. Die Regel ist ausdrücklich auf
   ≥ 721 px begrenzt: `:not(.grid-3--triple)` hat Spezifität 0,2,0 und schlug in der
   Fassung „nur ≤ 1180 px“ die Ein-Spalten-Regel `.grid-3` (0,1,0) des 720-px-Blocks
   weiter unten, sodass jedes einfache `.grid-3` auf dem Handy zweispaltig blieb
   (Karten nur 126 px breit bei 320 px). Mit der Untergrenze konkurriert unter 721 px
   keine Regel mehr mit der Ein-Spalten-Regel, die Reihenfolge im Stylesheet spielt
   keine Rolle. `.quality-grid` und `.grid-3--triple` bleiben in diesem Bereich
   dreispaltig, ab 980 px abwärts gilt die Waisen-Regel unten. */
@media (min-width: 721px) and (max-width: 1180px) {
  .grid-3:not(.grid-3--triple) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .navbar-links { display: none; }
  .two-col, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .sedcard-grid, .merkliste-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  /* Footer ab hier (Textlinks-Navigation aus, zweispaltige Gruppen): Raster 2 Spalten,
     Navigation, „Folge uns“ und Büro-Hinweis untereinander */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-navigate { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "social" "note"; row-gap: var(--gap-md); }
  .footer-note { max-width: 100%; }
}

/* Dreier-Raster ohne Waise (Kernel-Nachtrag 29.09.2026, Befund P1b): .quality-grid
   hat immer drei Karten. Bisher standen sie von 721 bis 1180 px zu zweit in einer
   Reihe, die dritte allein darunter. Jetzt: ≥ 981 px drei Spalten (Karten dort
   272 bis 330 px breit), 721 bis 980 px zwei Spalten und die dritte Karte mittig
   darunter, genau so breit wie eine Spalte (Raster-Spalte = (100 % − Abstand) / 2).
   Die Regel `:last-child:nth-child(odd)` trägt auch bei fünf oder sieben Karten.
   Dasselbe Verhalten gibt es als Opt-in für jedes `.grid-3` mit genau drei Karten:
   `<div class="grid-3 grid-3--triple">` (Seiten mit dem Waisen-Muster bei 721 bis
   1180 px: kontakt #kontaktwege, karriere #sicherheit, ueber-uns #arbeitsweise). */
@media (min-width: 721px) and (max-width: 980px) {
  :is(.quality-grid, .grid-3--triple) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.quality-grid, .grid-3--triple) > :last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gap-lg)) / 2);
  }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }
  /* Leistungen (6 kurze Zeilen) und Navigation wären einspaltig lang; hier zweispaltig */
  .footer-col-list--split-sm { columns: 2; column-gap: var(--gap-lg); }
  .footer-col-list--split { column-gap: var(--gap-lg); }
  .footer-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-lg); }
}

@media (max-width: 720px) {
  :root { --stage-inset: 8px; }   /* Bühnen wie der Hero mobil; Radius mobil wie Desktop (4 px, Korrekturrunde 02.10.2026, vorher 22 px) */
  .grid-3, .quality-grid { grid-template-columns: minmax(0, 1fr); }
  .diff-card li { min-height: auto; }
  .section-cta { flex-direction: column; align-items: flex-start; }
  .sedcard-toolbar { flex-direction: column; align-items: stretch; }
  .filter-group { flex-direction: column; align-items: stretch; gap: var(--gap-sm); }
  .filter-select { width: 100%; }
  .step-status { gap: 6px; }
  .step-status li + li::before { width: 10px; }
  /* Nicht display:none — das entfernt Text auch aus dem A11y-Baum und
     Screenreader-Nutzer hören nur noch "1 2 3" statt der Schrittnamen. */
  .step-status li span.label-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@media (max-width: 560px) {
  :root { --nav-h: 68px; }
  .navbar-logo-mark { width: 36px; height: 36px; padding: 5px; }
  .sedcard-grid, .merkliste-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .navbar-actions .btn { width: auto; }
  .step-actions .btn { width: 100%; }
  .step-actions { flex-direction: column-reverse; align-items: stretch; }
  .step-actions .spacer { display: none; }
  .footer-bottom-inner .credit { margin-left: 0; }
  /* Fix-Runde 1 (Footer mobil kompakter): Copyright über den Rechtslinks, ohne „·“-Trenner
     (Abstand statt Punkt), Altershinweis und Credit je eine eigene Zeile: 4 statt bis zu
     6 Zeilen à 44 px */
  .footer-bottom-inner { gap: 0 20px; }
  .footer-bottom-inner .sep { display: none; }
  .footer-bottom-inner .copyright { flex-basis: 100%; padding-top: 4px; }
  .footer-bottom-inner .age-notice { flex-basis: 100%; padding-block: 8px 4px; }
  .footer-navigate { padding-top: 12px; row-gap: var(--gap-sm); }
  .city-card { width: 210px; }
}

@media (max-width: 400px) {
  /* Wortmarke + Merkliste-Pille + CTA + Menü-Button passen bei 320–399px
     nicht gemeinsam in die Leiste (Menü-Button würde außerhalb des Viewports
     landen, siehe BAU-REGELN-Prüfung). Der Navbar-CTA führt ohnehin zu einem
     Ziel, das auch als regulärer Link im Mobile-Menü steht — hier ausblenden.
     Ausnahme (Fix-Runde 1, B2-11): `.btn-nav-keep` (setzt sync-layout.py für Seiten,
     deren CTA der einzige Bewerben-Weg im oberen Bildschirm ist, derzeit karriere.html)
     bleibt als kompakte Pille neben dem Menü-Button sichtbar. Wird es trotzdem eng
     (Merkliste-Pille sichtbar, sehr schmales Gerät), blendet ihn script.js 7b aus. */
  .navbar-bar { gap: 10px; }
  .navbar-logo { gap: 8px; }
  .navbar-actions { gap: 8px; }
  .navbar-actions .btn:not(.btn-nav-keep) { display: none; }
  .navbar-actions .btn-nav-keep { padding-inline: 16px; }
}
@media (max-width: 560px) {
  .navbar-actions:has(.merkliste-pill:not([hidden])) > .btn-nav-keep { display: none; }
}