/* =================================================================
   BRANDCONSULTING V11 "LIGHT GLASS" — bubbbly-Designsprache, hell
   Milchiges Weißglas über dem hellen Premium-Office-Video. Dunkle
   Tinte, Neodyme-Akzent, Foto-Panels.
   V11: Scrollbar versteckt (.progress + Rail übernehmen Orientierung),
   Panel-Füllung vom Text-Fade entkoppelt (--o-bg/--o-tx), Kontrast-
   Token AA-fest, Kontrast-Section (Beratung vs. gelöstes Problem).
   Radius-Skala: 12 / 20 / 32, Vollpille nur für Interaktives.
   ================================================================= */

/* Selbst gehostete Fonts — keine CDN-Origins, kein DSGVO-Risiko */
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/plusjakartasans-normal-200-800.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/plusjakartasans-italic-200-800.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --bg: #f3f1ec;
  --ink: #16202e;
  --ink-dim: rgba(22, 32, 46, 0.86);
  --ink-mute: rgba(22, 32, 46, 0.74); /* 0.6 fiel unter AA — 0.74 ≈ 6,5:1 auf Creme */
  --navy: #0f1a2a;
  --accent: #cda36a;        /* warmes Bronze-Gold — passt zu Creme, Office-Video und Logo */
  --accent-bright: #e6c690; /* nur in Gradients */
  --accent-deep: #a87f44;   /* Display-Text auf hellem Glas */
  --accent-text: #7d5c2e;   /* Kleintext-Bronze: AA-fest auf Creme */
  --accent-soft: rgba(205, 163, 106, 0.5);
  /* Metallic-Gold: ein Rezept fuer alle Gold-Elemente — flaches Vollton-Gold
     wirkt billig. Diagonal mit hellem Champagner-Band wie eine Folienpraegung. */
  --gold-metal: linear-gradient(112deg, #7d5c2e 0%, #a87f44 26%, #e9d29c 48%, #c9a15f 60%, #8a6538 88%, #7d5c2e 100%);
  --gold-metal-flat: linear-gradient(90deg, #8a6538 0%, #c9a15f 30%, #e9d29c 50%, #c9a15f 70%, #8a6538 100%);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.8);
  --tile-border: rgba(22, 32, 46, 0.12);
  --tile-bg: rgba(255, 255, 255, 0.55);
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --radius: 12px;
  --r-lg: 18px;
  --r-btn: 6px; /* CTA: fast rechteckig — bewusst deutlich unter allen Flaechen-Radien */
  --pad-x: clamp(20px, 6vw, 96px);
  /* Einheitliche Bildschirmrand-Kante fuer ALLE Elemente, links wie rechts.
     Desktop-Override unten hebt sie auf min. 160px an. */
  --edge-x: var(--pad-x);
  --topbar-h: 76px;
  /* Typo-Skala: vier Fließtextgrößen statt zehn Streuwerten */
  --fs-xs: 0.88rem;
  --fs-sm: 0.92rem;
  --fs-base: 0.96rem;
  --fs-lead: 1.02rem;
  --track-caps: 0.1em;
  --track-caps-sm: 0.05em;
  /* Spacing: 4px-Grid */
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--navy); }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

/* Keine sichtbare Scrollbar am Bildrand — Orientierung übernehmen
   .progress (oben) und die Kapitel-Rail. Bewusst auf html gescoped,
   damit die Formular-Textarea ihre eigene Scrollbar behält.
   Scroll selbst (Wheel/Touch/Tastatur) bleibt voll funktionsfähig. */
html { scrollbar-width: none; }            /* Firefox, Chrome ≥121, Safari ≥18.2 */
html::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ältere WebKit/Blink */

/* Skip-Link: erstes fokussierbares Element, sichtbar nur bei Fokus */
.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 90;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline-offset: 0; }

/* =================== Board-Canvas + Lagen =================== */

#board {
  position: fixed;
  inset: 0;
  /* Canvas ist ein Replaced Element: ohne explizite width streckt
     inset:0 NICHT — width:auto faellt auf das intrinsische
     Seitenverhaeltnis der Backing-Store-Attribute zurueck */
  width: 100vw;
  height: 100vh;
  height: 100lvh; /* groesster Viewport: stabil gegen iOS-URL-Bar */
  z-index: 0;
  background: var(--bg);
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 38%, transparent 55%, rgba(64, 52, 32, 0.16) 100%),
    linear-gradient(180deg, rgba(64, 52, 32, 0.1) 0%, transparent 14%, transparent 84%, rgba(64, 52, 32, 0.14) 100%);
}

/* --s = Sichtbarkeit (app.js). Kein Element-Opacity-Fade: Chromium wuerde
   sonst den backdrop-filter verwerfen (Opacity-Gruppe = eigener
   Backdrop-Root) — Alpha und Blur skalieren stattdessen ueber die Var. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(243 241 236 / calc(0.47 * var(--s, 0))),
    rgb(243 241 236 / calc(0.7 * var(--s, 0))));
  -webkit-backdrop-filter: blur(calc(4px * var(--sb, 0)));
  backdrop-filter: blur(calc(4px * var(--sb, 0)));
}

/* =================== Loader =================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; }
/* Neues Stapel-Logo (~1.21:1): Hoehe steuert, kein Filter — das Gruen
   des Play-Quadrats bleibt echt */
/* Monochrome weisse Wortmarke, per Filter auf Ink abgedunkelt — dieselbe
   Logo-Variante wie Topbar/Footer, kein gruenes Play-Rechteck im Loader */
.loader__logo { width: auto; height: 120px; opacity: 0.9; filter: brightness(0.16); }
.loader__file {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  color: var(--ink-mute);
}
.loader__bar {
  width: 220px;
  height: 4px;
  background: rgba(22, 32, 46, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.loader__bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--gold-metal-flat);
  transition: width 0.25s ease;
}

/* =================== Glas-Materialien (Light-Rezept) =================== */
/* Hohe Füll-Deckkraft + Blur: Konturen aus dem Video (Gesicht, Fenster)
   dürfen hinter Text nicht mehr erkennbar sein. Glas-Charakter kommt aus
   Kantenlicht, Sättigung und Schatten — nicht aus maximaler Transparenz. */

/* --o = Sichtbarkeits-Faktor der Scroll-Choreografie (app.js).
   Glas-Elemente duerfen NIE per Element-Opacity faden: Chromium verwirft
   dann den backdrop-filter (Opacity-Gruppe = eigener Backdrop-Root) und
   der weisse Rand steht nackt auf scharfem Video.
   V11: Füllung und Text laufen auf getrennten Kurven — Füllung eilt
   voraus (--o-bg = sqrt(o)), Text kommt erst auf fertigem Glas
   (--o-tx = o²). Eliminiert die dunkle Geisterkarte über dem schwarzen
   Pullover und Geistertext im Übergang. Blur/Schatten bleiben auf --o. */
@property --o {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.glass {
  position: relative;
  background: rgba(255, 255, 255, calc(0.72 * var(--o-bg, var(--o, 1))));
  border: 1px solid rgba(255, 255, 255, calc(0.8 * var(--o, 1)));
  border-radius: var(--radius);
  /* Fallback ohne color-mix: statischer Schatten (skaliert nicht mit --o) */
  box-shadow:
    0 24px 60px rgba(54, 44, 24, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 32, 46, 0.04);
  box-shadow:
    0 24px 60px color-mix(in srgb, rgba(54, 44, 24, 0.18) calc(var(--o, 1) * 100%), transparent),
    inset 0 1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.95) calc(var(--o, 1) * 100%), transparent),
    inset 0 -1px 0 color-mix(in srgb, rgba(22, 32, 46, 0.04) calc(var(--o, 1) * 100%), transparent);
  -webkit-backdrop-filter: blur(calc(26px * var(--o, 1))) saturate(calc(1 + 0.4 * var(--o, 1))) brightness(calc(1 + 0.12 * var(--o, 1)));
  backdrop-filter: blur(calc(26px * var(--o, 1))) saturate(calc(1 + 0.4 * var(--o, 1))) brightness(calc(1 + 0.12 * var(--o, 1)));
}
/* Chromium: echte Liquid-Refraktion via SVG-Displacement */
html.lg .glass {
  -webkit-backdrop-filter: url(#lg-dist) blur(calc(24px * var(--o, 1))) saturate(calc(1 + 0.4 * var(--o, 1))) brightness(calc(1 + 0.12 * var(--o, 1)));
  backdrop-filter: url(#lg-dist) blur(calc(24px * var(--o, 1))) saturate(calc(1 + 0.4 * var(--o, 1))) brightness(calc(1 + 0.12 * var(--o, 1)));
}

/* Durchsichtigere Variante fuer die grossen Statements in der Mitte —
   0.55 statt 0.42: haelt das durchgestrichene Wort auch ueber dunklem
   Video lesbar (Kontrast-Pixelmessung d_f08) */
.smoke {
  background: rgba(255, 255, 255, calc(0.55 * var(--o-bg, var(--o, 1))));
  border: 1px solid rgba(255, 255, 255, calc(0.65 * var(--o, 1)));
  border-radius: var(--radius);
  box-shadow:
    0 24px 60px rgba(54, 44, 24, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  box-shadow:
    0 24px 60px color-mix(in srgb, rgba(54, 44, 24, 0.14) calc(var(--o, 1) * 100%), transparent),
    inset 0 1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.85) calc(var(--o, 1) * 100%), transparent);
  -webkit-backdrop-filter: blur(calc(18px * var(--o, 1))) saturate(calc(1 + 0.35 * var(--o, 1))) brightness(calc(1 + 0.08 * var(--o, 1)));
  backdrop-filter: blur(calc(18px * var(--o, 1))) saturate(calc(1 + 0.35 * var(--o, 1))) brightness(calc(1 + 0.08 * var(--o, 1)));
}

/* =================== Topbar =================== */

.topbar {
  /* Absolut statt fixed: die Leiste ist Teil der Seite und scrollt wie
     jeder andere Inhalt ganz normal nach oben raus */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* Vollflaechig: die Leiste laeuft randlos bis an alle Kanten, der
     Inhalt bleibt ueber das Innen-Padding auf dem --edge-x-Raster */
  padding: 0;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Links = rechts = Seitenraster; vertikales Padding traegt die Hoehe */
  padding: var(--s-2) var(--edge-x);
}
.glass--bar {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  /* Dunkles Glas statt Lack: fast deckendes Schwarz mit leichtem
     Verlauf, damit die Leiste nicht als tote Flaeche liest. Der
     Backdrop-Blur bleibt — die Buehne schimmert minimal durch. */
  background: linear-gradient(105deg,
    rgba(10, 14, 20, 0.92) 0%,
    rgba(16, 22, 31, 0.88) 40%,
    rgba(10, 14, 20, 0.90) 100%);
  box-shadow:
    0 14px 38px rgba(10, 14, 20, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}
html.lg .glass--bar {
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}
/* Glanzlichter: gewölbtes Licht oben + schraege Reflexkante — auf dem
   dunklen Glas deutlich zurueckgenommen, sonst kippt es ins Milchige. */
.glass--bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 260% at 12% -90%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(115deg,
      rgba(255, 255, 255, 0) 47%,
      rgba(255, 255, 255, 0.08) 54%,
      rgba(255, 255, 255, 0.015) 60%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.05) 68%,
      rgba(255, 255, 255, 0) 74%);
}
.topbar__logo { width: auto; height: 50px; opacity: 0.96; }
/* Mini-Navigation: echte Anker (No-JS-faehig), app.js mappt sie auf die
   Scroll-Choreografie. Vergroesserte Hitbox ohne Layoutaenderung. */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar__nav a {
  position: relative;
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(243, 241, 236, 0.82);
  transition: background 0.25s ease, color 0.25s ease;
}
.topbar__nav a::before { content: ''; position: absolute; inset: -4px 0; }
.topbar__nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.topbar__nav a.is-active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-bright); }
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Auf dem Hero ist der Topbar-CTA schwarz (der Gold-CTA im Hero hat die
   Buehne), ab dem ersten Scroll kippt er ins Metallic-Gold. Der Farbwechsel
   laeuft ueber ein deckendes Schwarz-Overlay, weil sich Gradient-Backgrounds
   nicht animieren lassen. */
.topbar__cta {
  position: relative;
  z-index: 0;
  transition: color 0.35s ease;
}
.topbar__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* ueber dem Button-Background — negativ laege es dahinter */
  border-radius: inherit;
  background: #f3f1ec;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.topbar__cta > span { position: relative; z-index: 2; }
body.hero-on .topbar__cta::after { opacity: 1; }
body.hero-on .topbar__cta {
  color: #16202e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Scroll-Fortschrittsbalken bewusst aus: die Leiste verschwindet beim
   Scrollen — ein goldener Zustandsstreifen am oberen Rand entfiele mit */
.progress {
  display: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--gold-metal-flat);
  transform: scaleX(0);
  transform-origin: left;
}

/* =================== Kapitel-Rail (Dots) =================== */

.rail {
  position: fixed;
  left: clamp(10px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  color: var(--ink-dim);
}
/* Hitbox auf ~24x37px aufblasen, ohne die Optik zu aendern */
.rail__item::after { content: ''; position: absolute; inset: -7px -14px; }
.rail__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(22, 32, 46, 0.45);
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.rail__item:hover .rail__dot { border-color: rgba(22, 32, 46, 0.8); }
.rail__item.is-active .rail__dot {
  background: var(--accent);
  border-color: var(--accent-deep);
  box-shadow: 0 0 12px var(--accent-soft);
}
.rail__label {
  display: inline-block;
  max-width: 0;
  padding: 4px 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-caps-sm);
  color: var(--ink);
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(54, 44, 24, 0.14);
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease,
    padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.rail__item.is-active .rail__label,
.rail__item:hover .rail__label,
.rail__item:focus-visible .rail__label {
  max-width: 130px;
  opacity: 1;
  padding: 4px 12px;
  margin-left: 9px;
  border-color: var(--tile-border);
}
.rail__item.is-active .rail__label { border-color: var(--accent-soft); }

/* =================== Scrub-Bühne =================== */

/* V12: Echter Dokumentfluss statt gepinnter Buehne. Die Steps stapeln
   sich untereinander und scrollen physisch durchs Bild — kein Auf- und
   Abblenden auf der Stelle mehr. Das fixierte Board-Video dahinter
   scrubbt weiter mit der Scrollposition und bleibt in den Luecken
   zwischen den Panels frei sichtbar. */
#scrub {
  position: relative;
  z-index: 5;
}

.stage {
  position: relative;
}

.step {
  position: relative;
  /* Umbau 2026-08-08: Akt 1 scrollt wie eine normale Website — Sektionen
     in natuerlicher Hoehe mit 9vh-Rhythmus. Das Board scrubbt weiter
     dahinter und bleibt in den Luecken zwischen den Sektionen sichtbar. */
  display: flex;
  align-items: center;
  padding: 9vh var(--edge-x);
}
.step[data-pos="hero"] {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--topbar-h) + 4vh);
}
/* (Topbar-Kopffreiheit fuer data-pos="c" entfaellt: Sektionen liegen im
   normalen Fluss weit unter der absoluten Topbar.) */
/* Unsichtbare Steps bleiben im Accessibility-Tree (nur opacity 0),
   aber ihr backdrop-filter wird abgeschaltet — Paint-Culling. */
.step:not(.is-vis) .panel,
.step:not(.is-vis) .hero__logos {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: auto;
}

/* Einheitlicher Seitenabstand: ab Desktop ruecken alle Kanten (Topbar,
   Hero, Panels) auf mindestens 160px vom Bildschirmrand — links wie rechts. */
@media (min-width: 1181px) {
  :root { --edge-x: max(var(--pad-x), 160px); }
}

.step[data-pos="l"] { justify-content: flex-start; }
.step[data-pos="r"] { justify-content: flex-end; }
.step[data-pos="c"] { justify-content: center; }
/* Hero: Text links, Stat-Leiste als ruhige horizontale Reihe am unteren
   Rand — das Gesicht in der Mitte bleibt frei */
.step[data-pos="hero"] {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: clamp(20px, 4vh, 48px);
}

.panel {
  max-width: 620px;
  padding: clamp(24px, 3vw, 42px);
  --o: 0;
  opacity: var(--o, 1);
  will-change: transform, opacity;
}
/* Glas-Panels bleiben opak (sonst stirbt der Blur, s. o.) —
   die Fuellung folgt --o-bg (eilt voraus), der Inhalt --o-tx (kommt
   erst auf fertigem Glas). Kein Geistertext mehr im Uebergang. */
.panel.glass, .panel.smoke { opacity: 1; }
.panel.glass > *, .panel.smoke > * { opacity: var(--o-tx, var(--o, 1)); }
/* Hero-Panel ohne Glaskarte: Headline liegt frei auf dem Video,
   Lesbarkeit kommt aus .hero-grad statt aus einer Box */
.panel--hero {
  max-width: 720px;
  padding: 0;
  /* vertikal im Raum ueber der Stat-Leiste zentriert */
  margin-top: auto;
  margin-bottom: auto;
}
.hero-grad {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(243, 241, 236, 0.96) 0%,
    rgba(243, 241, 236, 0.8) 26%,
    rgba(243, 241, 236, 0.4) 44%,
    rgba(243, 241, 236, 0) 60%);
  will-change: opacity;
}
/* Ohne Karte stapelt der CTA-Block: Subline unterm Button bleibt im Verlauf */
/* CTA + Google-Rating als EINE Zeile: der Button wirbt, das Rating
   flankiert — keine dritte lose Ebene im unteren Hero-Drittel */
.panel--hero .hero__act {
  align-items: center;
  gap: 12px 22px;
}
/* Maus-Parallax: Video weicht aus, Vordergrund haelt minimal dagegen */
.hero__inner {
  transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
}
.step[data-pos="hero"] .hero__logos {
  transform: translate3d(calc(var(--par-x, 0px) * -0.6), calc(var(--par-y, 0px) * -0.6), 0);
}
.panel--wide { max-width: 920px; }
.panel--lever { max-width: 660px; }

.smoke.panel { max-width: 820px; }

/* =================== Akt 1 als Website-Sektionen (2026-08-08) ===========
   Gleiche Anatomie wie der Tail: zentrierter Sektions-Kopf (Label + grosse
   H2), Inhalte als Karten-Grids auf dem 1120px-Raster. Die aeussere
   Glas-Huelle entfaellt — die inneren Karten sind die Elemente. */
.panel.sec {
  position: relative;
  max-width: 1120px;
  width: 100%;
  margin-inline: auto;
  padding: 0;
}
/* Lesbarkeit der Sektionen traegt die globale .scrim (fixer Weiss-Layer,
   app.js): sie zieht auf, sobald die erste Sektion einfaehrt — dieselbe
   Optik wie im Tail, das Board schimmert ueberall gleichmaessig durch.
   Der fruehere radiale Papier-Schleier pro Sektion entfaellt. */
.sec__head {
  position: relative;
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}
.sec__head .label { margin-bottom: 12px; }
.sec__head .h2 { margin-bottom: 0; }
.sec__head .prose-p { max-width: 56ch; margin: 14px auto 0; }
/* Statements: gestaltete Baender statt Rauchglas-Karte */
.sec--statement {
  position: relative;
  max-width: 900px;
  text-align: center;
}
.sec--statement .label { margin-bottom: 16px; }

/* =================== Dunkle Kapitel-Baender (2026-08-10) ===============
   Die Statement-Steps sind opake Navy-Baender in voller Breite: sie
   schneiden die helle Schleier-Strecke in Kapitel (Rhythmus dunkel/hell)
   und geben den Statements die Wucht einer Zwischen-Headline. */
.step--dark {
  /* Navy-Band mit Gold-Schimmer, leicht durchsichtig: die Buehne
     schimmert durch das Glas, der Blur haelt den Text lesbar. */
  background:
    radial-gradient(110% 130% at 50% -10%, rgba(205, 163, 106, 0.1), transparent 55%),
    rgba(15, 26, 42, 0.53);
  box-shadow:
    inset 0 1px 0 rgba(233, 210, 156, 0.14),
    inset 0 -1px 0 rgba(233, 210, 156, 0.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  padding-top: 13vh;
  padding-bottom: 13vh;
}
/* Zentrierter Gold-Balken ueber dem Label: gleiche Folien-Signatur
   wie Kicker und Marker-Strich */
.step--dark .label { color: var(--accent-bright); }
.step--dark .label::before {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  border-radius: 1px;
  margin: 0 auto 14px;
  background: var(--gold-metal-flat);
}
.step--dark .statement { color: #fff; }
.step--dark .statement s {
  color: rgba(255, 255, 255, 0.72);
  text-decoration-color: var(--accent);
}
.step--dark .statement--sm { color: rgba(255, 255, 255, 0.92); }
/* Auf Navy kein Metallic-Verlauf (dunkle Verlaufsenden saufen ab):
   solides Champagner-Gold */
.step--dark .ink-strong {
  background: none;
  color: var(--accent-bright);
  -webkit-text-fill-color: currentColor;
}
/* Sektions-Inhalte auf dem Navy-Band (Problem-Block, 2026-08-11):
   Kopf-Typo hell, die Suche-Karte opaker, damit sie auf dunklem
   Grund als heller Beleg-Kasten steht statt milchig abzusaufen */
.step--dark .h2 { color: #fff; }
.step--dark .prose-p { color: rgba(255, 255, 255, 0.84); }
.step--dark .suche {
  background: rgba(247, 245, 240, 0.94);
  border-color: rgba(255, 255, 255, 0.55);
}
/* Inhalts-Breiten auf dem Raster */
.sec > .suche { max-width: 720px; margin-inline: auto; }
.sec > .audit,
.sec > .beweis { max-width: 940px; margin-inline: auto; }
.sec > .vs { max-width: 1000px; margin-inline: auto; }
.sec > .prose-p { max-width: 640px; margin: 20px auto 0; }
.sec > .audit__sum,
.sec > .beweis__sum {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: center;
}

/* gestaffelte Kinder */
[data-stagger] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.step.is-on [data-stagger] { opacity: 1; transform: none; }

/* =================== Typografie =================== */

/* Kicker: reine Zielgruppen-Zeile in Bronze-Caps, davor ein kurzer
   Metall-Gold-Balken (gleiche Signatur wie die Folien-Unterstreichung) */
.kicker {
  display: flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
  /* einzeilig: der Zielgruppen-Filter darf nicht umbrechen */
  white-space: nowrap;
  line-height: 1.7;
}
.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold-metal-flat);
  margin-right: 10px;
}

/* Satzzeichen-Span aus app.js: zieht die Font-Vorbreite des Punkts ein */
.pkt { margin-left: -0.09em; }

.h1 {
  font-size: clamp(1.95rem, 3.9vw, 3.2rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Ein Auszeichnungswechsel statt drei: nur die Farbe kippt ins Gold.
   Metallic-Verlauf statt Vollton — flaches Gold wirkt billig. Das helle
   Band bei 50% liegt diagonal wie eine Folienpraegung ueber beiden Zeilen. */
.h1__accent {
  display: block;
  margin-top: 0.18em;
  font-style: normal;
  font-weight: 800;
  color: var(--accent-deep); /* Fallback ohne background-clip: text */
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(125, 92, 46, 0.22));
}
/* Hero-H1 ohne Karte: kompaktes Statement, kein Plakat.
   max-width erzwingt den Zweizeiler der ersten Zeile — die Headline
   darf nicht einzeilig bis ins Gesicht laufen. */
.h1--hero {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  max-width: 16ch;
}
/* V11: Umsetzungs-Versprechen direkt unter der H1 — der Kill Shot
   steht im 5-Sekunden-Scan, nicht erst in der FAQ */
.hero-sub {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}
/* Marker-Strich: zeichnet sich nach dem Laden unter "Umsatz" */
.u-wort { position: relative; display: inline-block; }
/* inline-block koppelt sich vom background-clip des Parents ab und wuerde
   mit dessen geerbtem text-fill transparent unsichtbar — eigener Verlauf,
   farblich als Fortsetzung des Parent-Bands (Wort steht rechts unten). */
.h1__accent .u-wort {
  background: linear-gradient(112deg, #b8894a 0%, #e9d29c 42%, #c9a15f 66%, #8a6538 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.u-stroke {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 105%;
  height: 0.26em;
  overflow: visible;
  /* Zeichnen-Effekt via clip-path statt stroke-dash: Chromium verrechnet
     Dash-Laengen bei non-uniform gestrecktem SVG (preserveAspectRatio none),
     der Strich endete dann viewportabhaengig mitten im Wort. Der Clip faehrt
     von links auf; negative Vertikal-Insets lassen Rundkappen ungeclippt. */
  clip-path: inset(-60% 100% -60% -2%);
}
.u-stroke path {
  fill: none;
  stroke: url(#ustroke-gold); /* Metallic-Verlauf, Def im Hero-SVG */
  stroke-width: 7px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}
html.ready #hero.is-on .u-stroke {
  transition: clip-path 0.7s cubic-bezier(0.55, 0.06, 0.35, 1) 1.15s;
  clip-path: inset(-60% -2% -60% -2%);
}

.h2 {
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
.h2--big { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }

.h3 {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.45em;
}

.label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}

.statement {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.statement--sm { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
/* Marker-Logik des Boards: Wort bleibt lesbar, der Goldstrich erledigt es.
   0.75 statt 0.5: die Pointe haengt an dem Wort, auch ueber dunklem Video */
.statement s {
  color: rgba(22, 32, 46, 0.75);
  text-decoration-thickness: 4px;
  text-decoration-color: var(--accent);
}
/* Ein Inline-Emphasis-Mittel: Gold, ohne Link-Unterstreichung */
.ink-strong {
  color: var(--accent-deep); /* Fallback */
  font-weight: 800;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 64ch;
}
.lead--dim {
  color: var(--ink-dim);
  font-size: var(--fs-lead);
  max-width: 64ch;
}

.prose p, .prose-p {
  font-size: var(--fs-base);
  line-height: 1.66;
  color: var(--ink-dim);
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1em; }
.prose-p + .prose-p { margin-top: 1em; }

/* =================== Panel-Medien (Bilder im Glas) =================== */

.panel__media {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(54, 44, 24, 0.18);
  margin-bottom: 20px;
}

/* =================== Hero =================== */

.hero__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}
.hero__act--tight { margin-top: 24px; justify-content: center; }
.btn-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mute);
}

/* Google-Bewertung unter dem Hero-CTA: echte Google-Sterne (Gold #fbbc04,
   letzter Stern via Gradient auf 4,9/5 gefuellt) + 4-Farben-G. Zeile 1:
   Sterne + Score, Zeile 2: Caption. */
.grating {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  gap: 3px 9px;
  width: max-content;
  text-decoration: none;
  padding: 2px 0;
}
.grating__stars { display: inline-flex; }
.grating__stars svg { display: block; height: 18px; width: auto; }
.grating__num {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.grating__max { font-size: 11px; font-weight: 700; color: var(--ink-mute); }
.grating__cap {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
}
.grating__g { display: block; flex: 0 0 auto; }
.grating:hover .grating__cap { color: var(--ink-dim); }

/* Kundenlogo-Leiste: Endlos-Marquee am unteren Hero-Rand. Der Track haelt
   zwei identische Logo-Saetze; translateX(-50%) springt exakt auf den
   Zustand von 0% zurueck — nahtloser Loop, Logos laufen von rechts nach
   links. Schwarz-weiss per Filter (Originale bleiben farbig auf Platte). */
.hero__logos {
  position: relative;
  z-index: 1;
  width: calc(100% + 44px);
  /* Frostband hinter den Logos: dunkle Wortmarken saufen sonst auf dem
     dunklen Pulli ab. Negative Marge: die Logos selbst bleiben im
     Kanten-Raster, nur das Glas ragt optisch darueber hinaus. */
  margin: 0 -22px;
  padding: 18px 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* Clip + Randfade: Logos tauchen weich auf statt hart an der Kante zu
   verschwinden. Maske liegt auf dem statischen Wrapper, nicht auf dem
   bewegten Track — sonst wandert der Fade mit. */
.logo-clip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 clamp(28px, 4vw, 64px), #000 calc(100% - clamp(28px, 4vw, 64px)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 clamp(28px, 4vw, 64px), #000 calc(100% - clamp(28px, 4vw, 64px)), transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 48s linear infinite;
  will-change: transform;
}
/* padding-right = gap: so ist der Abstand zwischen Satz-Ende und
   Satz-Anfang identisch mit dem Logo-Abstand — Pflicht fuer Nahtlosigkeit */
.logo-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(30px, 3.4vw, 64px);
  padding-right: clamp(30px, 3.4vw, 64px);
}
@keyframes logo-marquee {
  to { transform: translateX(-50%); }
}
/* Hover haelt an (Logos werden lesbar), unsichtbarer Hero spart Paint */
.hero__logos:hover .logo-track,
.step:not(.is-vis) .logo-track { animation-play-state: paused; }
.hlogo {
  display: block;
  height: clamp(20px, 2vw, 34px);
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15) brightness(0.82);
  opacity: 0.72;
  transition: opacity 0.3s ease;
}
.hlogo:hover { opacity: 1; }
/* Kompakte Bildmarken (Signets) brauchen mehr Zeilenhoehe als Wortmarken */
.hlogo--tall { height: clamp(30px, 3vw, 52px); }
/* 5inline/Optimum liegen als Weiss-Variante vor: erst invertieren, dann Graustufe */
.hlogo--invert { filter: invert(1) grayscale(1) contrast(1.15) brightness(0.82); }
/* Gestapelte Marken mit kleiner Textzeile (Baumarkt, Meyer zu Hengelage):
   noch eine Stufe groesser als --tall, sonst unlesbar */
.hlogo--xl { height: clamp(40px, 3.8vw, 66px); }
/* Mittelhelle Marken (BST-Blau, Wehner-Gruen) saufen in der Graustufe ab:
   dunkler und deckender ziehen */
.hlogo--strong {
  filter: grayscale(1) contrast(1.45) brightness(0.5);
  opacity: 0.9;
}

.cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
}
body:not(.hero-on) .cue { opacity: 0; }
.cue__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-2) 18px;
  border-radius: 999px;
  border: 1px solid var(--tile-border);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 18px rgba(54, 44, 24, 0.12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-caps-sm);
  color: var(--ink-dim);
  white-space: nowrap;
}
.cue__arr {
  display: inline-block;
  color: var(--accent-deep);
  animation: cue-bounce 2.2s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* =================== Buttons (Neodyme-Pills, Navy-Tinte) =================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: var(--r-btn);
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn--cta {
  background: linear-gradient(112deg, #8a6538 0%, #b8894a 26%, #ecd7a2 50%, #b8894a 72%, #7d5c2e 100%);
  color: var(--navy);
  padding: 15px 28px;
  font-size: 15px;
  box-shadow:
    0 10px 26px rgba(54, 44, 24, 0.22),
    0 4px 18px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn--cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 30px rgba(54, 44, 24, 0.26),
    0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn--cta:active { transform: translateY(1px); filter: brightness(0.97); }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* =================== Symptome =================== */

/* =================== Kontrast: Beratung vs. geloestes Problem =================== */
/* V11-Kernsection (ersetzt die drei Prinzipien): linke Spalte = Decoy
   (gedaempft), rechte Spalte = brandconsulting (Gold-Akzent). Der Wert
   von "wir setzen selbst um" entsteht erst im direkten Vergleich. */

.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 8px;
}
.vs__head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vs__col ul { list-style: none; }
.vs__col li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}
.vs__col li + li { margin-top: 12px; }
.vs__col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}
.vs__col--alt { color: var(--ink-mute); }
.vs__col--alt .vs__head { color: var(--ink-mute); }
.vs__col--alt li::before { content: "—"; color: rgba(22, 32, 46, 0.38); }
.vs__col--brand { color: var(--ink); }
.vs__col--brand .vs__head { color: var(--accent-text); }
.vs__col--brand li::before { content: "✓"; color: var(--accent-deep); }

/* =================== Hebel =================== */

/* Deck: aufrecht, gedämpfte Tinte — Kursiv-Gold-Mengentext ist raus */
.promise {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
  max-width: 50ch;
}

/* =================== Fallstudien =================== */

.panel--fall {
  max-width: 940px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px clamp(22px, 3vw, 44px);
  align-items: start;
}
/* Foto als angepinnter Abzug über der Ergebnis-Kachel */
.fall__photo {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(54, 44, 24, 0.2);
  rotate: 1.8deg;
}
.step[data-pos="r"] .fall__photo { rotate: -1.8deg; }
.fall__info { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
/* Kundenlogo in der Fall-Karte: gleiche S/W-Behandlung wie die Hero-Logowand */
.fall__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
  filter: grayscale(1) contrast(1.25) brightness(0.8);
  opacity: 0.9;
}
.fall__logo--tall { height: 48px; }
.fall__name { margin-bottom: 0.2em; }
.fall__branch {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.fall__mech {
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 48ch;
  text-wrap: pretty;
}
.fall__result {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-6);
}
.fall__big {
  display: block;
  font-size: clamp(2.6rem, 3.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-deep); /* Fallback */
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 30%, transparent));
}
.fall__unit {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 8px 0 12px;
}
.fall__detail {
  font-size: var(--fs-xs);
  line-height: 1.58;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* =================== Tail: Analyse / FAQ =================== */

.tail {
  position: relative;
  z-index: 6;
  /* Board bleibt hinter der Analyse präsent und läuft hell aus —
     die Schlusszone bleibt dieselbe Welt wie die Scroll-Strecke */
  background: linear-gradient(180deg, transparent 0, rgba(243, 241, 236, 0.6) 30%, rgba(243, 241, 236, 0.96) 70%, #f3f1ec 100%);
}
.tail-sec {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14vh var(--pad-x) 10vh;
}
#antrag { scroll-margin-top: calc(var(--topbar-h) + 28px); }

.antrag {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(30px, 4vw, 64px);
  padding: clamp(28px, 4.5vw, 60px);
  border-radius: var(--r-lg);
}
.antrag__intro { grid-column: 1; grid-row: 1; }
.antrag .form { grid-column: 2; grid-row: 1 / span 2; }
/* 3-Schritt-Ablauf: nimmt die groesste Friktion vor einem kostenlosen
   Gespraech — die Angst vor dem versteckten Verkaufsgespraech */
.ablauf {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ablauf li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 52ch;
}
.ablauf__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  background: var(--tile-bg);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-text);
  transform: translateY(4px);
}
.antrag__terms {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 18px;
  max-width: 52ch;
  line-height: 1.7;
}
.antrag__scarcity {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-style: italic;
  color: var(--ink-mute);
  margin-top: 10px;
}
.antrag__intro .prose-p { margin-top: 4px; }

.form__intro {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.field__opt { color: var(--ink-mute); font-weight: 500; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(22, 32, 46, 0.18);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field input,
.field select {
  height: 46px;
  border-radius: var(--r-sm);
  padding: 0 18px;
}
/* Selects: nativer Pfeil raus, eigener Chevron rechts; solange die leere
   Platzhalter-Option gewaehlt ist (required + :invalid), Placeholder-Optik */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316202e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field select:invalid { color: rgba(22, 32, 46, 0.65); font-weight: 500; }
.field textarea {
  border-radius: var(--r-sm);
  padding: 13px 18px;
  resize: vertical;
  min-height: 72px;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(22, 32, 46, 0.65); font-weight: 500; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-deep) 45%, transparent);
  background: rgba(255, 255, 255, 0.92);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Wert-Reassurance direkt am Submit — der letzte Blick vor dem Klick */
.form__assure {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-caps-sm);
  color: var(--ink-mute);
  margin: 4px 0 10px;
  text-align: center;
}
.form__submit { margin-top: 0; border: 0; cursor: pointer; width: 100%; justify-content: center; }
.form__hint {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin-top: 12px;
}
.form__hint a { color: var(--ink-dim); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.form__error {
  font-size: 12px;
  font-weight: 600;
  color: #b3392f;
  margin-top: 12px;
}
.form__error a { color: inherit; font-weight: 700; }

.form__success { padding: 12px 0; }
.tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: var(--tile-bg);
  color: var(--accent-deep);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}
.form__success p { font-size: var(--fs-base); color: var(--ink-dim); }

/* FAQ */
.faq {
  max-width: 880px;
  margin: 9vh auto 0;
}
.faq > .label { margin-bottom: 22px; }
.faq__item {
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chev {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-dim);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease,
    color 0.25s ease, border-color 0.25s ease;
}
details[open] .faq__chev {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
}
.faq__a { padding: 0 var(--s-6) var(--s-5); }
.faq__a p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 68ch;
}

/* =================== Footer =================== */
/* Footer liegt als direktes Body-Kind hinter </main> — er braucht
   eigenen Stacking-Kontext + Deckung, sonst malt der fixe Layer-Stack
   (#board z0, .vignette z1, .scrim z2) ueber den statischen Inhalt */
/* Footer: opakes Navy-Schluss-Band — gleiche Familie wie die Kapitelbaender,
   aber voll deckend als Anker am Seitenende. Zwei ruhige Ebenen:
   Marke/Adresse + Rechtliches, darunter Hairline mit Legal/Copy. */
.footer {
  position: relative;
  z-index: 6;
  background:
    radial-gradient(110% 130% at 50% -10%, rgba(205, 163, 106, 0.1), transparent 55%),
    #0f1a2a;
  box-shadow: inset 0 1px 0 rgba(233, 210, 156, 0.16);
  padding: 8vh var(--pad-x) 34px;
}
.footer > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* Schluss-Claim + letzter CTA auf dem Navy-Band */
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 24px;
}
.footer__claim {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 620px;
  text-wrap: balance;
  color: #fff;
}
/* Ausschluss-Zeile: Niching als Vertrauenssignal — sagt auch, fuer wen
   das Angebot NICHT ist */
.footer__not {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  max-width: 760px;
  margin-bottom: 56px;
  text-wrap: pretty;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 52px;
}
.footer__logo { width: auto; height: 96px; margin-bottom: 20px; }
.footer__addr {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}
.footer__addr a { color: #fff; text-decoration-color: var(--accent-bright); text-underline-offset: 3px; }
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  justify-self: end;
  text-align: right;
}
.footer__links a {
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  padding: 11px 0;
  margin: -5px 0; /* Hitbox 44px, optischer Abstand bleibt */
  transition: color 0.2s ease;
}
.footer__links a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--accent-bright);
  text-underline-offset: 3px;
}
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 22px;
}
.footer__legal {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
  max-width: 720px;
}
.footer__copy {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-caps-sm);
  color: rgba(255, 255, 255, 0.48);
}

/* =================== Responsive =================== */

/* Kurze Desktop-Viewports (Laptop mit Bookmark-Leiste etc.): Die Hero-
   Spalten muessen in 100svh passen — kompakte Stat-Karten, und der
   Scroll-Cue verschwindet, statt unter dem Google-Rating zu kleben. */
@media (min-width: 901px) and (max-height: 780px) {
  .cue { display: none; }
  .hero__logos { padding-top: 12px; padding-bottom: 12px; }
  .kicker { margin-bottom: 12px; }
}

@media (max-width: 1180px) {
  .rail { display: none; }
}

@media (max-width: 900px) {
  :root { --fs-base: 0.95rem; }
  .topbar__nav { display: none; }
  .step[data-pos="l"], .step[data-pos="r"], .step[data-pos="c"] { justify-content: center; }
  /* Karten unten andocken statt mittig: das Gesicht (Augen bei ~25-30%
     Viewporthoehe) bleibt ueber der Karte sichtbar — das Muster der
     staerksten Screens (Klartext, Drei Engpaesse) wird Standard. */
  .step { padding: 7vh 5vw; align-items: center; }
  /* Zentrierte Panels (Statements, Closing): etwas mehr Bodenfreiheit,
     damit die Subline nie als letztes Element in der Topbar-Zone parkt */
  /* Hero-Inhalt beginnt unter dem Gesicht: Augen liegen bei ~253px (390x844),
     der Text startet erst darunter — Kicker sitzt nie mehr im Gesicht. */
  .step[data-pos="hero"] { flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: calc(var(--topbar-h) + 27vh); padding-bottom: 48px; gap: 8px; }
  .h1--hero { font-size: 1.72rem; }
  .hero-sub { font-size: 0.94rem; margin-top: 10px; }
  .panel { max-width: min(94vw, 600px); padding: clamp(20px, 4.5vw, 32px); }
  .panel--hero { margin-bottom: 0; }
  /* mobil: Gesicht oben frei (Augen klar), Wash beginnt erst auf Texthoehe */
  .hero-grad {
    background: linear-gradient(180deg,
      rgba(243, 241, 236, 0.1) 0%,
      rgba(243, 241, 236, 0.14) 22%,
      rgba(243, 241, 236, 0.62) 33%,
      rgba(243, 241, 236, 0.9) 41%,
      rgba(243, 241, 236, 0.86) 70%,
      rgba(243, 241, 236, 0.55) 84%,
      rgba(243, 241, 236, 0) 96%);
  }
  /* mobil laeuft das Marquee weiter — schmaler Ausschnitt zeigt 2–3
     Logos gleichzeitig, der Loop suggeriert die volle Breite der Liste */
  .hero__logos {
    width: min(94vw, 600px);
    margin: 0;
    padding: 14px 0;
  }
  .logo-set { gap: 30px; padding-right: 30px; }
  .hlogo { height: 20px; }
  .hlogo--tall { height: 30px; }
  .hlogo--xl { height: 40px; }
  .panel__media { aspect-ratio: 16 / 7; margin-bottom: 16px; }
  .vs { grid-template-columns: 1fr; gap: 18px; }
  .vs__col--alt { padding-bottom: 16px; border-bottom: 1px solid var(--tile-border); }
  .panel--fall { display: block; }
  .fall__photo { rotate: 0deg; margin-bottom: 16px; aspect-ratio: 16 / 8; }
  .step[data-pos="r"] .fall__photo { rotate: 0deg; }
  .fall__result { margin-top: 18px; }
  .fall__big { font-size: 2.7rem; }
  .antrag { grid-template-columns: 1fr; grid-template-rows: none; }
  .antrag__intro, .antrag .form { grid-column: auto; grid-row: auto; }
  /* iOS-Safari zoomt bei Fokus auf Felder < 16px — mobil anheben */
  .field input, .field select, .field textarea { font-size: 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__links { align-items: flex-start; justify-self: start; text-align: left; }
  body { font-size: 15px; }

  .vignette {
    background:
      radial-gradient(140% 100% at 50% 38%, transparent 48%, rgba(64, 52, 32, 0.2) 100%),
      linear-gradient(180deg, rgba(64, 52, 32, 0.12) 0%, transparent 18%, transparent 60%, rgba(64, 52, 32, 0.18) 100%);
  }
  /* WebKit/Gecko schaffen blur(26px) ueber dem live-repainteten Canvas
     nicht fluessig — mobil kleinerer Radius, dafuer hoehere Fuell-Deckkraft
     (haelt dunkle Tinte auch ueber wechselndem Video lesbar).
     :not(.glass--bar): die Topbar behaelt ihr Material — der Performance-
     Override war fuer die grossen Panels gedacht, nicht fuer die kleine Bar.
     html.lg muss mit in den Selektor (Spezifitaet), sonst behaelt
     Android-Chromium den teuren SVG-Displacement-Filter. */
  .glass:not(.glass--bar), html.lg .glass:not(.glass--bar) {
    background: rgba(255, 255, 255, calc(0.78 * var(--o-bg, var(--o, 1))));
    -webkit-backdrop-filter: blur(calc(14px * var(--o, 1))) saturate(calc(1 + 0.35 * var(--o, 1))) brightness(calc(1 + 0.04 * var(--o, 1)));
    backdrop-filter: blur(calc(14px * var(--o, 1))) saturate(calc(1 + 0.35 * var(--o, 1))) brightness(calc(1 + 0.04 * var(--o, 1)));
  }
  .smoke {
    background: rgba(255, 255, 255, calc(0.62 * var(--o-bg, var(--o, 1))));
    -webkit-backdrop-filter: blur(calc(12px * var(--o, 1))) saturate(calc(1 + 0.3 * var(--o, 1))) brightness(calc(1 + 0.05 * var(--o, 1)));
    backdrop-filter: blur(calc(12px * var(--o, 1))) saturate(calc(1 + 0.3 * var(--o, 1))) brightness(calc(1 + 0.05 * var(--o, 1)));
  }
}

@media (max-width: 640px) {
  :root { --topbar-h: 64px; --fs-sm: 0.88rem; --fs-xs: 0.84rem; --fs-base: 0.94rem; }
  .topbar__logo { height: 40px; }
  .topbar__inner { gap: 12px; padding: 8px 16px; }
  /* 44px-Touch-Target: 12·2 + 12,5·1,6 = 44; Bar waechst nicht (60 ≤ 64) */
  .topbar .btn--sm { padding: 12px 16px; font-size: 12.5px; }
  /* Kicker kompakt: 2 Zeilen statt 3, sitzt nicht mehr im Gesicht */
  .kicker { font-size: 10px; letter-spacing: 0.07em; line-height: 1.55; white-space: normal; margin-bottom: 12px; }
  /* Beleg-Leiste faellt mobil weg — die Multiplikator-Zeile in der Hero-Sub
     traegt das Promise, der Hero muss in 375x667 passen. Das Google-Rating
     (aktuell 4,9-Platzhalter) weicht dafuer mobil ebenfalls. */
  .belege { display: none; }
  .grating { display: none; }
  .hero__act { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
  .hero__act--tight { align-items: center; }
  /* Subline auf zwei ausgewogene Zeilen statt Witwe "Niklas Brand" */
  .hero__act .btn-sub { max-width: 32ch; text-wrap: balance; }
  .logo-set { gap: 24px; padding-right: 24px; }
  .hlogo { height: 17px; }
  .hlogo--tall { height: 26px; }
  .cue { bottom: 12px; }
  .cue__chip span:not(.cue__arr) { display: none; }
  .cue__chip { padding: 9px 13px; }
  .statement { font-size: clamp(1.35rem, 5.8vw, 1.7rem); }
  .statement--sm { font-size: clamp(1.15rem, 5vw, 1.45rem); }
  .lead { font-size: 0.97rem; }
  .faq__q { font-size: 0.95rem; padding: 15px 18px; }
  .faq__a { padding: 0 18px 16px; }
  .footer__logo { height: 76px; }
  .footer__grid { margin-bottom: 36px; }
  .footer__cta { margin-bottom: 20px; }
  .footer__not { margin-bottom: 40px; }
}

/* Kleine Phones (SE & Co.): Hero kompakter, sonst schiebt der tiefe
   Texteinstieg die Stats aus dem Viewport */
@media (max-width: 640px) and (max-height: 760px) {
  .step[data-pos="hero"] { padding-top: calc(var(--topbar-h) + 21vh); }
  .h1--hero { font-size: 1.55rem; }
  .hero__act { margin-top: 14px; }
}

/* =================== Reduced Motion =================== */

@media (prefers-reduced-motion: reduce) {
  [data-stagger] { transition: none; }
  .logo-track { animation: none; }
  .cue__arr { animation: none; }
  .btn, .btn__arrow, .faq__chev { transition: none; }
  .u-stroke { clip-path: none; transition: none; }
  .hero__inner, .step[data-pos="hero"] .hero__logos { transform: none; }
  /* Fade ja, Layoutbewegung nein */
  .rail__label { transition: opacity 0.3s ease; }
  .topbar__cta { transition: opacity 0.35s ease, visibility 0.35s; }
  body.hero-on .topbar__cta { transform: none; }
}

/* =================== Kurze Viewports (Landscape-Phones) =================== */
/* Sticky Buehne mit overflow:hidden schneidet auf 320-520px Hoehe sonst
   Inhalte unerreichbar ab — kompakte Panels, Medien raus. Steht bewusst
   am Dateiende: gewinnt ueber Quellreihenfolge gegen die Breite-Queries. */
@media (max-width: 900px) and (max-height: 520px) {
  .step { padding-bottom: 20px; }
  .step[data-pos="hero"] { padding-top: calc(var(--topbar-h) + 10px); }
  .h1--hero { font-size: 1.55rem; }
  .hero-sub { font-size: 0.88rem; margin-top: 8px; }
  .hero__logos, .panel__media, .fall__photo, .cue { display: none; }
  .panel { padding: 16px 20px; }
  .vs { grid-template-columns: 1fr 1fr; gap: 14px; }
  .vs__col--alt { padding-bottom: 0; border-bottom: 0; }
  .vs__col li { font-size: 0.8rem; }
  .ablauf li { font-size: 0.84rem; }
  .fall__result { margin-top: 10px; padding: 10px 16px; }
  .fall__big { font-size: 2rem; }
}
/* =================== AKT 2 (Baulig-Umbau): Hero-Bullets, Beweis-Karten,
   Tail-Sektionen Methode / Stellen / Fälle / Über =================== */

/* Hero: vier Häkchen-Bullets unter der Sub-Line */
/* Angebots-Zeile statt Bullet-Liste: ein Satz, ein Wunsch */
.hero-offer {
  margin-top: 20px;
  max-width: 52ch;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* Beleg-Leiste unter dem Hero-CTA: die Fall-Zahlen als Anker fürs
   Big Promise — belegt statt versprochen, verlinkt auf die Fälle */
.belege {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  margin-top: 26px;
  padding-top: 14px;
  /* Hairline setzt die Beweiszeile als eigenen Schlussakkord ab —
     gleiche Signatur wie die Logo-Leiste am Hero-Rand */
  border-top: 1px solid rgba(15, 26, 42, 0.16);
  max-width: 560px;
  text-decoration: none;
}
.belege__item {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-dim);
  white-space: nowrap;
}
.belege__item strong {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  margin-right: 2px;
}
.belege__more {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  /* dunkle Tinte statt Gold: auf dem hellen Fensterglas war der
     Link praktisch unsichtbar */
  color: var(--ink-dim);
  white-space: nowrap;
}
.belege:hover .belege__more { text-decoration: underline; }

/* S05: McDonald's / Louis Vuitton als Beweis-Karten statt Textblock */
.beweis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 16px;
}
.beweis__card {
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
}
.beweis__brand {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.beweis__not {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.beweis__but {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.beweis__sum {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  max-width: 62ch;
  text-wrap: pretty;
}

/* S02: Der 30-Sekunden-Selbsttest — der Besucher prüft die eigene Sichtbarkeit.
   Optik wie die Tail-Glass-Karten: weiße Karte, weiche Schatten, Gold-Akzente */
.suche {
  margin: 4px 0 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-sm);
  box-shadow:
    0 12px 30px rgba(54, 44, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.suche__cap {
  padding: 10px var(--s-5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid rgba(22, 32, 46, 0.08);
}
.suche__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px var(--s-5);
}
.suche__row + .suche__row { border-top: 1px solid rgba(22, 32, 46, 0.08); }
.suche__rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-mute);
  text-align: center;
}
.suche__who {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.suche__meta {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-mute);
}
/* Abschlussfrage des Selbsttests */
.suche__q {
  padding: 14px var(--s-5);
  border-top: 1px solid rgba(22, 32, 46, 0.08);
  font-size: var(--fs-lead);
  font-weight: 800;
  color: var(--accent-text);
}

/* S06: Das bisherige Marketing als Audit-Karten — 2x2 wie die Methode-Karten
   im Tail, nur mit fehlendem Haken statt Schrittnummer */
.audit {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 16px;
}
.audit li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 9px;
  align-items: baseline;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-sm);
  box-shadow:
    0 12px 30px rgba(54, 44, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.audit__x {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-text);
  text-align: center;
}
.audit__what { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
.audit__so { grid-column: 2; margin-top: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-mute); line-height: 1.5; }

/* Alle übrigen Scrub-Elemente auf denselben Karten-Look wie der Tail heben:
   Beweis-Karten und VS-Spalten mit Glass-Karten-Optik */
.beweis__card {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 12px 30px rgba(54, 44, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.vs__col {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-sm);
  box-shadow:
    0 12px 30px rgba(54, 44, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.vs__col--brand {
  border-color: rgba(168, 127, 68, 0.4);
  background: rgba(201, 161, 95, 0.09);
}
.audit__sum {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  max-width: 62ch;
  text-wrap: pretty;
}

/* =================== Karten-Tiefe gegen den Schleier (2026-08-10) ======
   Seit die Lesbarkeit auf der globalen Scrim liegt, standen die Karten
   Weiss-auf-Weiss. Solidere Fuellung, Tinten-Border statt Weiss-Border
   und ein zweistufiger Schatten heben sie wieder von der Buehne ab. */
.suche, .audit li, .beweis__card, .vs__col {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(22, 32, 46, 0.1);
  box-shadow:
    0 2px 6px rgba(54, 44, 24, 0.07),
    0 22px 48px rgba(54, 44, 24, 0.16),
    inset 0 1px 0 #fff;
}
.vs__col--brand {
  background: rgba(252, 246, 233, 0.94);
  border-color: rgba(168, 127, 68, 0.45);
}
/* Gold-Folien-Strich unter jeder Sektions-H2: verankert den Kopf,
   gleiche Signatur wie Kicker-Balken und Statement-Baender */
.sec__head .h2::after,
.tsec__head .h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  margin: 18px auto 0;
  background: var(--gold-metal-flat);
}

/* Tail-Sektionen: zentrierte Header, Karten-Grids, CTA nach jeder Sektion */
.tsec {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10vh var(--pad-x) 0;
}
.tail > .tsec:first-of-type { padding-top: 15vh; }
.tsec__head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.tsec__head .label { margin-bottom: 12px; }
.tsec__head .lead { margin: 0 auto; }
#faelle { scroll-margin-top: calc(var(--topbar-h) + 20px); }

/* Navy-Kapitelbaender in der Tail-Zone: gleiche Signatur wie .step--dark
   (Problem-Band), volle Breite — sie schneiden die helle Strecke in
   Kapitel und trennen die Sektionen sichtbar voneinander. */
.tband {
  position: relative;
  margin-top: 10vh;
  background:
    radial-gradient(110% 130% at 50% -10%, rgba(205, 163, 106, 0.1), transparent 55%),
    rgba(15, 26, 42, 0.53);
  box-shadow:
    inset 0 1px 0 rgba(233, 210, 156, 0.14),
    inset 0 -1px 0 rgba(233, 210, 156, 0.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}
.tband .tsec { padding-top: 9vh; padding-bottom: 9vh; }
.tband .tail-sec { padding-top: 9vh; padding-bottom: 9vh; }
/* Kopf-Typo hell; Labels ausserhalb der Glaskarten in Champagner-Gold,
   Sektionskopf mit zentriertem Gold-Balken (gleiche Signatur wie
   .step--dark .label). Inhalte IN Glaskarten bleiben dunkel auf hell. */
.tband .tsec__head .label,
.tband .faq > .label { color: var(--accent-bright); }
.tband .tsec__head .label::before {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  border-radius: 1px;
  margin: 0 auto 14px;
  background: var(--gold-metal-flat);
}
.tband .tsec__head .h2 { color: #fff; }
.tband .tsec__head .lead,
.tband .tsec__head .lead--dim { color: rgba(255, 255, 255, 0.84); }
/* WIBOS-Rail auf Navy: Lettern in Gold-Outline, Text hell, Hairlines hell */
.tband .wibos .h3 { color: #fff; }
.tband .wibos p { color: rgba(255, 255, 255, 0.78); }
.tband .wibos li + li { border-top-color: rgba(255, 255, 255, 0.16); }
.tband .wibos__letter {
  color: var(--accent-bright);
  -webkit-text-stroke-color: var(--accent-bright);
}
@supports (-webkit-text-stroke: 2px black) {
  .tband .wibos__letter { color: transparent; }
}
.tband .tcta__line { color: #fff; }
.tband .btn-sub { color: rgba(255, 255, 255, 0.66); }
/* Glaskarten auf dem Band opaker — heller Beleg-Kasten statt milchig
   absaufend (gleiches Rezept wie .step--dark .suche) */
.tband .antrag,
.tband .faq__item {
  background: rgba(247, 245, 240, 0.94);
  border-color: rgba(255, 255, 255, 0.55);
}

/* WIBOS®: fünf Hebel als Letter-Rail — große Outline-Lettern (v7-Erbe),
   Hairline-Trenner, plakativ statt Kartenraster (5 Karten = Loch im Grid) */
.wibos {
  list-style: none;
  max-width: 860px;
  margin: 0 auto;
}
.wibos li {
  display: grid;
  grid-template-columns: 104px 1fr;
  column-gap: 30px;
  row-gap: 4px;
  align-items: start;
  padding: 26px 0;
}
.wibos li + li { border-top: 1px solid rgba(22, 32, 46, 0.12); }
.wibos__letter {
  grid-row: span 2;
  font-size: 84px;
  font-weight: 800;
  line-height: 0.85;
  color: var(--accent-deep);
  text-align: center;
}
@supports (-webkit-text-stroke: 2px black) {
  .wibos__letter {
    color: transparent;
    -webkit-text-stroke: 2.5px var(--accent-deep);
  }
}
.wibos .h3 { margin-bottom: 0; align-self: end; }
.wibos p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 58ch;
}

.hebel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hcard { padding: 0 0 22px; overflow: hidden; }
.hcard > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.hcard .h3 { padding: 0 22px; margin-bottom: 0.2em; }
.hcard__promise {
  padding: 0 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.hcard__text {
  padding: 0 22px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.tcta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.tcta .btn-sub { margin-top: -4px; }
.tcta__line {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--ink);
  max-width: 56ch;
  text-wrap: balance;
}
.tcta--mid { margin: 4px 0 32px; }

/* Fallstudien im Tail: gleiches Layout wie die frühere Scrub-Fallkarte */
.fall2 {
  max-width: 940px;
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px clamp(22px, 3vw, 44px);
  align-items: start;
  padding: clamp(24px, 3vw, 42px);
}
.fall2 .fall__photo { grid-column: 2; grid-row: 1; }
.fall2:nth-of-type(odd) .fall__photo { rotate: -1.8deg; }
.fall2 .fall__info { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.fall2 .fall__result { grid-column: 2; grid-row: 2; }
.fall__phase { margin-top: 14px; }
.fall__phase h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 4px;
}
.fall__phase p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 48ch;
  text-wrap: pretty;
}
.fall__quote {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--tile-bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fall__quote p {
  font-size: var(--fs-base);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
}
.fall__quote cite {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 700;
  color: var(--ink-mute);
}

/* Über Niklas Brand */
.ueber {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: var(--r-lg);
}
.ueber__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--r-sm);
  border: 5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(54, 44, 24, 0.2);
  rotate: -1.2deg;
}
.ueber__quote {
  margin-top: 16px;
  font-size: var(--fs-lead);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 900px) {
  .hero-offer { max-width: none; margin-top: 14px; }
  .beweis { grid-template-columns: 1fr; gap: 10px; }
  .wibos li { grid-template-columns: 76px 1fr; column-gap: 20px; padding: 22px 0; }
  .wibos__letter { font-size: 60px; }
  .hebel-grid { grid-template-columns: 1fr; }
  .fall2 { display: block; }
  .fall2:nth-of-type(odd) .fall__photo { rotate: 0deg; }
  .fall2 .fall__photo { margin-bottom: 16px; }
  .fall2 .fall__result { margin-top: 18px; }
  .ueber { grid-template-columns: 1fr; }
  .tsec { padding-top: 8vh; }
  .tail > .tsec:first-of-type { padding-top: 10vh; }
  .tsec__head { margin-bottom: 26px; }
}
@media (max-width: 640px) {
  .wibos li { grid-template-columns: 52px 1fr; column-gap: 14px; padding: 18px 0; }
  .wibos__letter { font-size: 44px; }
  @supports (-webkit-text-stroke: 2px black) {
    .wibos__letter { -webkit-text-stroke: 1.8px var(--accent-deep); }
  }
  .hero-offer { font-size: 0.86rem; }
  .suche__row { grid-template-columns: 20px 1fr; padding: 9px 14px; }
  .suche__verdict { grid-column: 2; white-space: normal; }
  .suche__cap { padding: 8px 14px; }
  /* Seit dem Fluss-Umbau (2026-08-08) scrollen die Akt-1-Sektionen in
     natürlicher Höhe — Intro-Szene und alle drei Zeilen bleiben mobil sichtbar. */
  .audit { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
  .audit li { grid-template-columns: 16px 1fr; padding: 8px 12px; }
  .audit__so { font-size: 0.84rem; }
  /* S05/S07 clippen sonst auf kleinen Phones (Sticky-Bühne, kein Scroll):
     Beweis kompakt ohne Summe/Zusatz-Prose, VS-Spalten nebeneinander */
  .beweis { margin: 0 0 10px; }
  .beweis__card { padding: 12px 14px; }
  .beweis__sum { display: none; }
  .p-extra { display: none; }
  .vs { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  .vs__col { padding: 10px 12px; }
  .vs__head { margin-bottom: 8px; font-size: 10.5px; }
  .vs__col li { font-size: 0.78rem; line-height: 1.45; padding-left: 16px; }
  .vs__col li + li { margin-top: 8px; }
  /* Nur Scrub-Panels (.panel), Tail-h2--big bleibt groß */
  .panel .h2--big { font-size: 1.28rem; }
  .step .hero__act--tight { margin-top: 8px; }
}
/* Kurze Landscape-Viewports: Angebots-Zeile kostet Hero-Höhe */
@media (max-width: 900px) and (max-height: 520px) {
  .hero-offer { display: none; }
}