/* ============================================================
   ADHS-Story Landingpage
   Brand-Quelle: Brand Guidelines (Vault) via .claude/skills/adhs-story-brand
   Profil Web: Cards bis 16px Radius, Pill-Buttons, dezente Schatten.
   Harte Regeln: keine Verläufe, Teal nur als Akzent, keine Emojis.
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Markenfarben */
  --navy: #0D1B2A;
  --teal: #1ABC9C;
  --paper: #ffffff;
  --ink: #0a0a0a;

  /* Neutrals */
  --paper-deep: #f8fafc;
  --ink-soft: #1f2937;
  --ink-mute: #64748b;
  --grey: #A5ACAF;
  --grey-l: #cbd5da;
  --grey-bg: #f1f5f9;

  /* Web-Abstufungen (nur Landing Page) */
  --navy-deep: #070f18;
  --navy-soft: #16293d;
  --teal-d: #16a085;
  --teal-l: #4dd6b9;
  /* Graue Kachel-Flaeche, eine Stufe dunkler als das Brand-Flaechengrau --grey-bg
     (#f1f5f9). Noetig, weil --grey-bg auf dem Sektionsgrund --paper-deep (#f8fafc)
     nur 1.05:1 erreicht -- die Kachelkante war praktisch unsichtbar. Mit #e4eaf1
     sind es 1.16:1: Kante klar erkennbar, Ton bleibt ein helles Grau ohne Blaustich.
     Von Paul am 26.07.2026 aus einem Vierer-Vergleich im Browser gewaehlt
     (1.05 / 1.11 / 1.16 / 1.23:1); die dunkelste Variante fiel als eigene Farbe auf.
     Bewusste Abweichung von "Keine weiteren Farben": die Brand Guidelines fuehren
     nur EIN Flaechengrau. Verwendung daher NUR fuer diese Kachel. */
  --grey-card: #e4eaf1;
  /* Rot NUR fuer den Vergleichs-Strich "Herkoemmliche Ansaetze" in der FAQ (Paul 23.07.,
     bewusste Ausnahme der Kein-Rot-Regel, analog zum ❌-Emoji). Ton am ❌ orientiert,
     4.5:1-tauglich als Linie auf paper-deep. Nirgends sonst verwenden. */
  --red-accent: #d64541;

  /* Schriften */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;  /* Headlines + Body */
  --data: 'JetBrains Mono', ui-monospace, monospace;                 /* nur Zahlen */

  /* Linien auf Navy: Navy-Web-Abstufung (Hue 212), nur Landingpage */
  --line-dark: #2b3e53;      /* Linien auf Navy */

  /* Spacing-Skala (4pt-Basis) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  /* Sektions-Polsterung oben/unten. Paul 25.07.: von clamp(4rem, 10vw, 7rem)
     auf die Haelfte -- die Farbwechsel zwischen den Sektionen sollen dichter
     am Text sitzen. Alle drei clamp-Werte halbiert, damit die Skalierung ueber
     alle Breiten proportional bleibt (Desktop 112 -> 56px, mobil 64 -> 32px).
     Hero und Closer haben eigene padding-block-Werte und sind bewusst NICHT
     betroffen (Paul: "ausser im Top"). */
  --section-pad: clamp(2rem, 5vw, 3.5rem);

  /* Typo-Skala */
  --text-hero: clamp(2.375rem, 5.6vw, 4.25rem);      /* Brand: 38-68px */
  --text-h2: clamp(1.75rem, 3.4vw, 2.625rem);
  --text-h2-closer: clamp(2rem, 4.5vw, 3.25rem);
  --text-h3: 1.25rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-sub: clamp(1.0625rem, 1.5vw, 1.25rem);      /* Brand: 17-20px */
  --text-small: 0.9375rem;
  --text-tiny: 0.875rem;

  /* Tiefe */
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.08);
  --shadow-md: 0 4px 14px rgba(13, 27, 42, 0.12);
  --shadow-lg: 0 10px 30px rgba(13, 27, 42, 0.22);

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 250ms;

  /* Z-Skala */
  --z-head: 10;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 56.25em) {
  /* Anker-Versatz nur dort, wo der Header wirklich sticky ist */
  html { scroll-padding-top: 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--display);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

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

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf dunklen Flächen braucht der Fokus-Ring helle Farbe (non-text 3:1) */
.hero :focus-visible, .closer :focus-visible,
.site-foot :focus-visible, .site-head :focus-visible {
  outline-color: var(--paper);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--navy);
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
}
.skip-link:focus-visible { left: var(--s-4); top: var(--s-4); }

/* ---------- Layout-Container ---------- */
.wrap {
  max-width: 71.25rem;                       /* 1140px */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap-narrow { max-width: 46rem; }

section { padding-block: var(--section-pad); }

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); line-height: 1.05; }
.hero-title-line { display: block; }
h2 { font-size: var(--text-h2); margin-bottom: var(--s-6); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.25; }

p { max-width: 70ch; text-wrap: pretty; }

a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease-out-quint);
}
a:hover { text-decoration-thickness: 2.5px; }

.lead {
  font-size: var(--text-lead);
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-7);
}

/* Eyebrow-Label über einer Sektions-Headline (Brand: 12px / 700 / 0.18em; Versalien stehen im Markup) */
.eyebrow {
  margin-bottom: var(--s-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}

/* Zahlen immer in JetBrains Mono */
.step-num {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
}

/* ---------- Platzhalter-Markierung (Inhalte von Paul) ---------- */
.ph {
  outline: 1.5px dashed rgba(26, 188, 156, 0.65);
  outline-offset: 6px;
  cursor: help;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out-quint),
              transform var(--t-fast) var(--ease-out-quint),
              box-shadow var(--t-fast) var(--ease-out-quint),
              border-color var(--t-fast) var(--ease-out-quint);
}
@media (max-width: 30em) {
  .cta-group .btn-primary { width: 100%; }
}
.btn:active { transform: scale(0.98); }

/* Hero-CTA mit Karten-Radius statt Pill (Paul 25.07.): der Button und das
   .lm-badge direkt darunter bilden im Hero eine sichtbare Zweiergruppe und
   sollen dieselbe Rundung tragen. Gilt bewusst NUR hier -- die uebrigen
   fuenf Buchungslinks (Nav, Coaching, Ablauf, Closer, Sticky) bleiben Pills. */
.hero .cta-group .btn { border-radius: 16px; }

/* Fokus-Doppelring: innen Weiß, außen Navy — sichtbar auf jeder Fläche */
.btn-primary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--navy);
}

.btn-primary {
  background: var(--teal);
  color: var(--navy);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--teal-d);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .btn-primary:hover:active { transform: scale(0.98); }
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--grey);
  font-size: var(--text-small);
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
}
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--grey-l); background: var(--navy-soft); }
}

.cta-group {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.fud {
  font-size: var(--text-small);
  color: var(--ink-mute);
}

/* ---------- Header ---------- */
.site-head {
  background: var(--navy);
  border-bottom: 1px solid var(--line-dark);
}
.site-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: 0.875rem;
}
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5625rem;         /* 9px, kein Token: Zeilenabstand Lockup -> Tagline (Paul 22.07.: erst 6px, dann "ein kleines Stück weiter unten") */
  font-size: 1.375rem;    /* 22px (Paul 22.07.: "ein kleines Stück größer"), zuvor 1.25rem/20px */
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;         /* Stack deterministisch: Logo-Zeile 28px (Logo-Höhe dominiert) + 9px gap + 9px Tagline = 46px < 44px? -> Header per Playwright geprüft */
  color: var(--paper); /* reines Weiß wie die Hero-Headline (Paul 24.07.), zuvor --grey-l */
  text-decoration: none;
  transform: scale(0.92); /* Lockup als Ganzes ~8% kleiner (Paul 22.07.: "das Gesamtliche alle gleich kleiner"); scale statt Einzelwerte -> Proportionen + Tagline-Kalibrierung bleiben exakt */
  transform-origin: left center;
}
.wordmark-logo {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.wordmark-story { color: var(--teal-l); } /* nur "Story" teal (Paul 24.07.); helles Teal, da auf Navy */
/* Logo-Zeile des Lockups: übernimmt das bisherige Zeilen-Layout des <a> */
.wordmark-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
/* Tagline unter dem Lockup (Paul 21.07., ersetzt die am 12.07. verworfene Punkt-Variante).
   Versalien stehen im Markup. font-size + letter-spacing sind KALIBRIERT (Playwright, 1440px,
   fonts geladen): rechte Glyphenkante bündig mit dem Wortmarken-Ende (Row 171.05px).
   Bei Textänderung neu kalibrieren: ls = (Row-Breite - Tagline-Breite bei ls 0) / Zeichenzahl. */
.wordmark-tag {
  display: none;            /* unter 375px fehlt neben dem Ghost-Button der Platz (320px-Regel) */
  font-size: 0.5625rem;     /* 9px; 10px ließe für sichtbare Sperrung keinen Platz (Bündig-Ziel) */
  font-weight: 600;         /* heller Text auf Navy wirkt fetter, 700 wäre zu massiv */
  letter-spacing: 0.1407em; /* kalibriert für Wortmarke 22px: 1.27px -> bündig (Row 184.36px); überschreibt geerbte 0.06em */
  color: var(--paper);      /* reines Weiß wie die Hero-Headline (Paul 24.07.), zuvor --grey */
  white-space: nowrap;      /* nie umbrechen, sonst wächst der Header */
}
@media (min-width: 23.4375em) { /* 375px; Bedarf = 2*20 wrap + 171 Lockup + 24 gap + 137 CTA = 372 */
  .wordmark-tag { display: block; }
}
.site-nav { display: none; }
.site-nav a {
  color: var(--paper); /* reines Weiß wie die Hero-Headline (Paul 24.07.), zuvor --grey-l */
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--teal-l); text-underline-offset: 4px; }

@media (min-width: 56.25em) {
  .site-head {
    position: sticky;
    top: 0;
    z-index: var(--z-head);
  }
  .site-nav { display: flex; gap: var(--s-5); }
}

/* ---------- Dunkle Sektionen: Textfarben umschalten ---------- */
.hero, .closer, .site-foot {
  color: var(--grey-l);
  letter-spacing: 0.01em;
}
.hero h1, .hero h2, .closer h2 {
  color: var(--paper);
}
.hero a:not(.btn), .closer a:not(.btn), .site-foot a:not(.btn) {
  color: var(--paper);
  text-decoration-color: var(--teal-l);
}
/* ---------- 1 · Hero ---------- */
.hero {
  background: var(--navy);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 6.5rem);
}
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.hero-sub {
  font-size: var(--text-sub);
  line-height: 1.6;
  max-width: 55ch;
  margin-top: var(--s-5);
}
.no-wrap { white-space: nowrap; }
.accent-teal { color: var(--teal); }
.accent-teal-l { color: var(--teal-l); } /* helles Teal fuer Akzente auf Navy */
/* Rot passend zum ❌-Emoji der "Nicht fuer dich"-Liste (Paul-Ausnahme wie ❌/Sterne) */
.accent-red { color: #e0393b; }

/* ---------- Lauth-&-Minsel-Badge (Hero-Proof) ---------- */
/* Oeffnet dieselbe Zertifikat-Lightbox wie das Dokument in der Zertifizierungs-
   Sektion; ohne JS faellt der Link auf das Bild im neuen Tab zurueck. Kein
   Buchungslink: die sechs Google-Buchungslinks bleiben unberuehrt. Die
   Lauth-&-Minsel-Fremdfarben im Logo-Bild sind die dokumentierte Paul-Ausnahme. */
.lm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  width: fit-content;
  max-width: 21.25rem;
  min-height: 4rem;
  margin-top: var(--s-5);
  padding: 0.875rem var(--s-4);
  background: var(--paper);
  border: 1px solid rgba(13, 27, 42, 0.10);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(7, 15, 24, 0.34),
              0 12px 28px rgba(7, 15, 24, 0.28),
              inset 0 2px 0 rgba(255, 255, 255, 0.95),
              inset 0 -3px 0 rgba(13, 27, 42, 0.12);
  transition: transform var(--t-med) var(--ease-out-quint),
              box-shadow var(--t-med) var(--ease-out-quint);
}
@media (hover: hover) {
  a.lm-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(7, 15, 24, 0.34),
                0 16px 34px rgba(7, 15, 24, 0.30),
                inset 0 2px 0 rgba(255, 255, 255, 0.95),
                inset 0 -3px 0 rgba(13, 27, 42, 0.12);
  }
}
.lm-badge-logo {
  width: 5.5rem;
  height: auto;
  flex: 0 0 auto;
}
.lm-badge-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.lm-badge-kicker {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.1875rem;
}
.lm-badge-name {
  color: var(--ink-mute);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 30em) {
  .lm-badge {
    max-width: 100%;
    min-height: 3.75rem;
    gap: 0.625rem;
    padding: 0.625rem;
  }
  .lm-badge-logo { width: 4.75rem; }
}

.photo-slot {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--navy-soft);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 56.25em) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
  .hero-media { padding-top: var(--s-2); }
}

/* Hero-Entrance: eine ruhige, einmalige Choreografie */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-copy > * { animation: fade-up 0.6s var(--ease-out-quint) both; }
  /* Nach dem Entrance den transform freigeben, damit das Badge beim Hover anhebt. */
  .hero-copy > a.lm-badge { animation-fill-mode: backwards; }
  .hero-copy > *:nth-child(2) { animation-delay: 80ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 240ms; } /* L&M-Badge, synchron zum Hero-Foto */
  .hero-media { animation: fade-up 0.6s var(--ease-out-quint) 240ms both; }
}

/* ---------- 2 · Meine ADHS-Story (vertikale Timeline) ---------- */
.story {
  background: var(--paper);
  overflow-x: clip; /* Sicherheitsnetz: Vorschau-Scale darf nie H-Scroll erzeugen */
}

/* Timeline-Gerüst. Mobil: Linie links, alle Kacheln rechts davon.
   Kacheln ergänzen = <li>-Block im HTML kopieren; odd/even regelt die Seiten. */
.story-timeline {
  --tl-rail: 2.25rem;                       /* mobil: Platz links für Linie + Strich */
  --tl-line-x: 3px;                         /* mobil: x der Linienmitte */
  --photo-h: clamp(11rem, 44vw, 13rem);
  --photo-h-open: clamp(17rem, 78vw, 24rem);
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0 0 0 var(--tl-rail);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (max-width: 56.249em) {
  /* Auf schmalen Screens bleibt der Bildrahmen beim Oeffnen unveraendert.
     Sonst wechselt er von breit zu fast quadratisch und object-fit schneidet
     jedes Foto neu zu: Der Bildinhalt wirkt dann wie verrutscht. Desktop bleibt
     durch seine eigene Variablenbelegung im min-width-Breakpoint unberuehrt. */
  .story-timeline { --photo-h-open: clamp(11rem, 44vw, 13rem); }
}
/* Die senkrechte Linie */
.story-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tl-line-x) - 1px);
  width: 2px;
  background: var(--grey-l);
}

.story-item { position: relative; }
/* Verbindungsstrich Linie -> Kachel: liegt auf dem li, nicht auf der Karte,
   damit Scale und Breite der Karte ihn nie mitbewegen. Teal = der eine Akzent
   dieser Sektion (sie hat bewusst keinen CTA). */
.story-item::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: calc(var(--tl-line-x) - var(--tl-rail));
  width: calc(var(--tl-rail) - var(--tl-line-x) + 1px);
  height: 2px;
  background: var(--teal);
  transform-origin: left center;
}

/* Kachel = Button, die ganze Fläche ist klick- und fokussierbar */
.story-card {
  position: relative;                        /* deckt den 1px-Strich-Überlapp ab */
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--grey-l);
  border-radius: 16px;
  padding: var(--s-4);
  cursor: pointer;
  touch-action: manipulation;                /* kein Double-Tap-Zoom bei Stufe 2 */
  box-shadow: var(--shadow-sm);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease-out-quint),
              width 0.4s var(--ease-out-quint),
              border-color var(--t-med) var(--ease-out-quint),
              box-shadow var(--t-med) var(--ease-out-quint);
}
.story-card:focus-visible { border-radius: 16px; } /* globaler Fokus-Ring setzt sonst 2px */
.story-card .ph { cursor: inherit; }        /* .ph bringt cursor: help mit */

.story-photo {
  position: relative;                        /* Anker für das absolut gespannte Foto */
  display: grid;
  place-items: center;
  height: var(--photo-h);
  border-radius: 10px;
  background: var(--grey-bg);
  overflow: hidden;
  transition: height 0.4s var(--ease-out-quint);
}
/* Platzhalter-Optik nur solange kein echtes Foto drin ist */
.story-photo.ph {
  border: 1.5px dashed rgba(26, 188, 156, 0.5);
  outline: none;                             /* Platzhalter-Rahmen ersetzt die .ph-Outline */
  font-family: var(--data);
  font-size: var(--text-small);
  color: var(--ink-mute);
}
/* Echte Fotos: <img> absolut in den Rahmen gespannt. Als Grid-Kind wuchs das Bild
   sonst auf seine natürliche Höhe (Track > Rahmen) und object-fit/object-position
   liefen ins Leere; beschnitten hat nur das overflow: hidden (obere Bildkante). */
.story-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;                   /* Standard: obere Bildkante wie bisher */
  border-radius: inherit;
}
/* Dokument-Scans (Zeugnis): ganze Seite, Rahmen folgt dem Blatt-Seitenverhältnis */
.story-photo--doc {
  background: #fff;
  height: auto;
  aspect-ratio: 856 / 1200;
}
.story-photo--doc img { object-fit: contain; object-position: 50% 50%; }
/* Kacheln 1 und 5 behalten die obere Bildkante (bisherige, abgenommene Optik) */
.story-photo--top img { object-position: 50% 0%; }
/* Kachel 3: Hochformat, Ruhelage rahmt das Gesicht (Augen bis Kinn) ein */
.story-photo--face img { object-position: 50% 15%; }
/* Kachel 4: leere Wand über dem Kopf anschneiden, kleine Kopffreiheit bleibt */
.story-photo--low img { object-position: 50% 80%; }
.story-text {
  display: block;
  margin-top: var(--s-4);
  max-width: 62ch;
  color: var(--ink-soft);
  /* Kein font-size-Uebergang: die Schriftgroesse springt beim Oeffnen sofort auf 17px,
     statt ueber 400ms zu interpolieren. Ein einmaliger, sauberer Umbruch statt
     kontinuierlichem Reflow und Sub-Pixel-Zappeln bei jeder Zwischengroesse. */
}
/* Halbfetter Abschluss-Satz (mittleres Gewicht, kräftigere Farbe) */
.story-text--accent {
  margin-top: var(--s-3);
  color: var(--ink);
  font-weight: 500;
}

/* Stufe 1 · Vorschau: leicht größer, wächst zur Außenseite (transform-origin
   an der Ankerkante). Maus-Geräte per Hover, Touch setzt .is-preview per JS. */
@media (hover: hover) {
  .story-item:not(.is-open) .story-card:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
  }
}
.story-item.is-preview .story-card {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

/* Stufe 2 · Offen: echtes Reflow an Ort und Stelle, kein Overlay. Foto höher,
   Text größer; Desktop zusätzlich breiter (siehe Media Query unten). */
.story-item.is-open .story-card {
  --photo-h: var(--photo-h-open);
  border-color: var(--grey);
  box-shadow: var(--shadow-lg);
}
.story-item.is-open .story-text { font-size: 1.0625rem; }

/* Reveal nur, wenn JS + Motion erlaubt (Inhalt ist ohne beides voll sichtbar) */
html.js .js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out-quint), transform 0.5s var(--ease-out-quint);
}
html.js .js-reveal.in { opacity: 1; transform: none; }

/* Reveal-Choreografie der Kacheln: der Strich wächst aus der Linie heraus,
   während die Kachel einblendet. Startzustände nur unter html.js. */
html.js .story-item.js-reveal::before {
  transition: transform 0.35s var(--ease-out-quint) 0.12s;
}
html.js .story-item.js-reveal:not(.in)::before { transform: scaleX(0); }

/* ---- Desktop: Linie mittig, Kacheln alternierend links/rechts ---- */
@media (min-width: 56.25em) {
  .story h2 { text-align: center; }
  .story-timeline {
    --tl-gap: clamp(3.5rem, 8vw, 5rem);      /* Spaltenabstand, Linie mittig darin */
    --card-w: 24rem;
    --card-w-open: 34rem;                    /* min(…, 100%) kappt an der Spaltenbreite */
    --photo-h: 13rem;
    --photo-h-open: 24rem;
    padding-left: 0;
    gap: var(--s-7);
  }
  .story-timeline::before { left: calc(50% - 1px); }
  /* Jede Zeile ein eigenes 2-Spalten-Grid: Überlappen ist strukturell unmöglich,
     die Expansion schiebt sauber alles darunter nach unten. */
  .story-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--tl-gap);
  }
  .story-card {
    grid-column: 1;
    justify-self: end;                       /* rechte Kante fix an der Linie */
    width: min(var(--card-w), 100%);
    transform-origin: right center;          /* Vorschau wächst nach links */
  }
  .story-item:nth-child(even) .story-card {
    grid-column: 2;
    justify-self: start;
    transform-origin: left center;           /* Vorschau wächst nach rechts */
  }
  /* Waehrend der Expansion ist der per JS gepinnte Text breiter als die Karte.
     clip statt hidden vermeidet einen Scroll-Container; im Endzustand klippt
     nichts, eigener box-shadow und outline bleiben vom overflow unberuehrt. */
  .story-item.is-open .story-card {
    --card-w: var(--card-w-open);
    overflow: clip;
  }
  /* Die Textbreite pinnt script.js beim Oeffnen inline; die alte CSS-min()-Regel
     war ein No-op, weil die Grid-Spalte die Karte kappt und 100% gewinnt. */
  .story-item::before {
    left: auto;
    right: calc(50% - 1px);
    width: calc(var(--tl-gap) / 2 + 1px);
    transform-origin: right center;
  }
  .story-item:nth-child(even)::before {
    right: auto;
    left: calc(50% - 1px);
    transform-origin: left center;
  }
  /* Reveal: Kacheln schieben sich von ihrer Seite ein (:not(.in) nötig, sonst
     überstimmt die höhere Spezifität den .in-Endzustand) */
  html.js .story-item.js-reveal:not(.in) { transform: translateX(-1.25rem); }
  html.js .story-item.js-reveal:not(.in):nth-child(even) { transform: translateX(1.25rem); }

  /* Kompakt-Layout: script.js setzt .is-compact und steuert die Abstände über
     margin-top pro Kachel (Stellwerte in script.js). */
  .story-timeline.is-compact { gap: 0; }
  /* Die vollbreiten Zeilen überlappen sich im Kompakt-Layout: Klicks gehören
     den Karten, nicht den transparenten Zeilen-Boxen darüber. */
  .story-timeline.is-compact .story-item { pointer-events: none; }
  .story-timeline.is-compact .story-card { pointer-events: auto; }
}

/* ---------- Dokument-Lightboxen (Zeugnis Story-Kachel 2 + Zertifikat) ---------- */
/* Der <dialog> füllt den Viewport (Klick auf die freie Fläche schließt),
   das Panel liegt zentriert darin. Flache Farben, kein Verlauf. */
.zeugnis-dialog, .cert-dialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;                       /* iOS: dynamische Toolbar */
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: transparent;
}
.zeugnis-dialog[open], .cert-dialog[open] { /* display NUR im offenen Zustand setzen */
  display: grid;
  place-items: center;
}
.zeugnis-dialog::backdrop, .cert-dialog::backdrop {
  /* Custom Properties sind in ::backdrop nicht zuverlässig -> Navy direkt */
  background: rgba(13, 27, 42, 0.92);
}
.zeugnis-panel, .cert-panel {
  max-width: 100%;
  background: var(--paper);
  border-radius: 16px;
  padding: var(--s-4);
  box-shadow: var(--shadow-lg);
}
.zeugnis-panel img, .cert-panel img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 12rem);      /* garantiert Luft oben und unten */
  max-height: calc(100dvh - 12rem);
  border-radius: 10px;
}
.zeugnis-close, .cert-close {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;                /* Pill/rund ist laut Brand explizit erlaubt */
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
@media (hover: hover) {
  .zeugnis-close:hover, .cert-close:hover { background: var(--navy-soft); }
}
/* Fokusring liegt auf dem Navy-Backdrop -> helle Farbe */
.zeugnis-dialog :focus-visible, .cert-dialog :focus-visible { outline-color: var(--paper); }

/* Scroll-Lock, solange die Lightbox offen ist (Klasse setzt script.js) */
html.has-dialog { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .zeugnis-dialog[open] .zeugnis-panel, .cert-dialog[open] .cert-panel { animation: fade-up 0.35s var(--ease-out-quint); }
}

/* ---------- 3 · Value (Coaching + Angebot vereint) ---------- */
.value { background: var(--paper-deep); }
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(2rem, 4vw, 3rem);
}
/* Nummerierung der drei Säulen (Paul 25.07.): per CSS-Counter statt Ziffern im HTML,
   damit sich die Nummern beim Umsortieren nicht widersprechen können. Die Trennlinie
   über den Säulen ist am selben Tag ersatzlos raus (Paul: "die Striche über den Sachen
   raus"); das padding-top bleibt als Abstand zur Sektions-Überschrift stehen. */
.value-grid { counter-reset: saeule; }
.value-item {
  counter-increment: saeule;
  padding-top: var(--s-5);
}
.value-item h3 { margin-bottom: var(--s-2); }
.value-item h3::before { content: counter(saeule) ". "; }
.value-item p { color: var(--ink-soft); }

/* Kleine Caps-Labels (SÄULE 01, WOCHEN 1 BIS 2) — Space Grotesk, gedämpft; Teal gehört den Häkchen und dem CTA */
.value-label {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}

/* Acht-Wochen-Programm im Karten-Standard der Seite: Karte 1 weiß, Karte 2 Teal, Karte 3 Navy (Modifier unten, 22.07.).
   Kapitel-Rhythmus: .weeks und .concrete atmen fluid (mobil 4rem, Desktop bis 6rem);
   der Abschluss-CTA bleibt bewusst enger am Leistungspaket (--s-8). */
.concrete { margin-top: clamp(2rem, 4vw, 2.75rem); }   /* Abstand von der unteren Wochen-Linie zu "Ganz konkret" (dicht darunter, Paul 23.07.) */
/* Feine Trennlinien über und unter dem Wochen-Block (22.07.), volle Inhaltsbreite;
   nur .weeks, nicht die geteilte Regel, damit "Ganz konkret" keine Linie bekommt.
   Abstände (Paul 23.07.): margin-top = wenig Luft ÜBER der oberen Linie (der ganze
   Block ist dicht an die Säulen-Texte gezogen); padding-top = wenig Luft UNTER der
   Linie zum Titel; padding-bottom = Luft von Community zur unteren Linie (bleibt);
   .concrete-margin oben = wenig Luft von der unteren Linie zu "Ganz konkret". */
.weeks {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--grey-l);
  border-bottom: 1px solid var(--grey-l);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 3rem);
}
.weeks > h3,
.concrete > h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-bottom: var(--s-5);
}
/* Kapitel-Titel zentriert ohne Kasten (22.07.); "Coaching" in Teal via .accent-teal.
   Eigene, größere Größe als die geteilte Regel (überstimmt sie hier); .concrete > h3
   bleibt bei der kleineren geteilten Größe und linksbündig. margin-bottom aus der geteilten Regel. */
.weeks > h3 {
  text-align: center;
  font-size: clamp(1.625rem, 3vw, 2.25rem);   /* eine Stufe unter --text-h2, weiter größer als "Ganz konkret" */
}
.weeks-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
  gap: var(--s-5);
}
.week-card {
  background: var(--paper);
  border: 1px solid var(--grey-l);
  border-radius: 16px;
  padding: var(--s-6);
}
/* Karten-Kopf (22.07.): das Wochen-Label steht jetzt allein, groß und zentriert;
   die feine Trennlinie darunter nimmt das border-top-Motiv der Säulen wieder auf */
.week-head {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--grey-l);
  text-align: center;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);   /* größer als vorher (--text-h3) */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--navy);
}
/* h4 ist neu auf der Seite: globale Heading-Regel deckt nur h1 bis h3, deshalb hier explizit */
.week-card h4 {
  margin-bottom: var(--s-2);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
/* trifft auch p.week-head; unschädlich, die Spans setzen eigene Farben */
.week-card p { color: var(--ink-soft); }

/* Karten 2 und 3 als Farbflächen (22.07., Mockup 3 Coaching Pakete); Karte 1 bleibt weiß.
   Teal als Fläche ist eine dokumentierte Paul-Ausnahme NUR für diese eine Karte,
   Weiß auf Teal (2.4:1) ist Pauls bewusste Entscheidung. Flach wie die ganze Sektion
   (14.07.): kein Schatten, kein Hover, keine Animation. border-color = Flächenfarbe:
   der 1px-Rahmen bleibt, damit die Geometrie aller drei Karten identisch ist. */
.week-card--teal { background: var(--teal); border-color: var(--teal); }
.week-card--navy { background: var(--navy); border-color: var(--navy); }
.week-card--teal .week-head { border-bottom-color: rgba(255, 255, 255, 0.5); color: var(--paper); }
.week-card--navy .week-head { border-bottom-color: var(--line-dark); color: var(--paper); }
.week-card--teal h4,
.week-card--navy h4 { color: var(--paper); }
.week-card--teal p:not(.week-head),
.week-card--navy p:not(.week-head) { color: var(--paper); line-height: 1.6; } /* +0.05 auf dunkler Fläche (DESIGN.md) */

/* Community-Band (22.07.): schlanke Navy-Fläche, nur Icon + Wort, zentriert;
   kein Verlauf. Icon in Teal-hell (Akzent auf Navy, DESIGN.md), Wort in Weiß. */
.weeks-outcome {
  margin-top: var(--s-5);
  padding: var(--s-6) var(--s-5);   /* mehr Luft als beim einzeiligen Vorgaenger-Band */
  border-radius: 16px;
  /* Graue Flaeche statt Navy (Paul, 26.07.2026). Zuerst mit dem Brand-Flaechengrau
     --grey-bg gebaut, das aber auf dem Sektionsgrund --paper-deep nur 1.05:1 erreicht
     -- die Kachelkante war unsichtbar. Deshalb --grey-card, eine Stufe dunkler
     (Begruendung und Auswahlverfahren am Token in :root).
     Mit der Flaeche mussten alle Textfarben mitwandern: vorher weiss/--grey-l fuer
     Navy, jetzt --navy/--ink-soft auf hell, und das Icon von --teal-l auf --teal.
     Sonst stuende weisser Text auf hellgrauem Grund. */
  background: var(--grey-card);
}
/* Breite (Paul, 26.07.2026): "auf dem Desktop so breit wie der Text, auf dem Handy
   so breit wie die anderen Kacheln".
   MOBIL ist nichts zu tun: dort ist .weeks-grid einspaltig, das Band ist also
   ohnehin schon exakt so breit wie eine Wochen-Karte (gemessen 350px bei 390er
   Viewport, 280px bei 320).
   AB 43.5em (696px) laeuft die Kachel auf Textbreite plus Innenabstand zusammen und
   bleibt mittig. Der Breakpoint ist NICHT geraten, sondern per Sweep gemessen: genau
   bei 696px klappt das auto-fit-Grid der Wochen-Karten von 1 auf 2 Spalten
   (minmax(18.75rem, 1fr)). Ab da koennte "so breit wie die anderen Kacheln" gar nicht
   mehr gelten, weil es dann mehrere Karten pro Zeile gibt.
   `fit-content` statt eines festen px-Werts, damit die Kachel mitgeht, wenn der Text
   spaeter laenger oder kuerzer wird -- die Breite ergibt sich aus der 52ch-Kappe von
   .weeks-outcome-text (533px) plus dem seitlichen Padding. `max-width: 100%` schuetzt
   davor, dass die Kachel je breiter wird als der Wrap. */
@media (min-width: 43.5em) {
  .weeks-outcome {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}
/* Community-Band, Abschluss des Wochen-Blocks (ausgebaut 26.07.2026).
   Vorher stand hier nur das Wort "Community" -- das Band sah wie ein Button aus
   (Navy-Flaeche, 16px Radius, zentriert fett), war aber keiner, und loeste das
   Versprechen der Navy-Karte darueber ("gehst mit einem konkreten naechsten
   Schritt in die Community") nicht ein.

   BEWUSST KEIN LINK: Die Community ist geschlossen, Zugang gibt es nur ueber das
   Coaching (Paul, 26.07.). Ein Link wuerde Interessenten auf eine Anmeldeseite
   fuehren, die sie nicht nutzen koennen, und als zweiter Ausgang gegen das eine
   Conversion-Ziel der Seite (Erstgespraech) arbeiten. Buchungslinks bleiben
   dadurch unveraendert.

   Warum nicht "dauerhaft kostenlos": Das steht bereits zweimal auf der Seite
   (Saeule 3 und Bullet in "Ganz konkret"). Das Band traegt stattdessen den
   Winkel, der sonst nirgends vorkommt und das eigentliche Argument ist:
   geschlossen, nur fuer Klienten, kein Abo. */
/* Ohne Icon (Paul, 26.07.2026): Das Personengruppen-SVG stand links neben dem Text und
   schob ihn optisch 22px aus der Mitte -- die Flex-Gruppe Icon+Text war exakt zentriert,
   der TEXT allein dadurch nicht (im Browser gemessen, mit Mittellinie belegt). Das Auge
   orientiert sich an der Schrift, nicht an der Gruppe, deshalb wirkte die ganze Kachel
   nach rechts verschoben. Jetzt reiner Text, wie alle anderen Ueberschriften der Seite.
   Deshalb auch kein Flex mehr, sondern text-align: center. */
.weeks-outcome-head {
  text-align: center;
  color: var(--navy);          /* Headline-Farbe auf hellem Grund (Brand Guidelines) */
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);   /* gleiche Größe wie die Kachel-Köpfe .week-head */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.weeks-outcome-text {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 52ch;
  color: var(--ink-soft);      /* Fliesstext-Sekundaerfarbe, 12.8:1 auf --grey-bg */
  text-align: center;
  line-height: 1.55;           /* heller Grund: Standard, nicht das +0.05 fuer dunkle Flaechen */
}
.weeks-outcome-text strong {
  color: var(--navy);
  font-weight: 600;
}
/* Ganz konkret: Kapitel-Anatomie wie .weeks (h3 auf Kapitel-Ebene);
   der Paket-Kasten bleibt als inneres Element .concrete-card */
.concrete-card {
  background: var(--paper);
  border: 1px solid var(--grey-l);
  border-radius: 16px;
  padding: var(--s-6);
}
@media (min-width: 56.25em) {
  .concrete-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
}

/* ---------- 4 · Ablauf ---------- */
.how { background: var(--paper); }
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}
.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
}
.step-num {
  font-size: clamp(1.625rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  min-width: 1.5ch;
}
.steps h3 { margin-bottom: var(--s-1); }
.steps p { color: var(--ink-soft); }

/* ---------- 5 · Beweis-Wand ---------- */
.proof { background: var(--paper); }
/* Ueberschrift ab Desktop mittig, wie bei der Story-Sektion (Paul, 22.07.) */
@media (min-width: 56.25em) {
  .proof h2 { text-align: center; }
}
/* Testimonial-Kacheln: Handy und Desktop brauchen UNTERSCHIEDLICHE Reihenfolgen
   (Paul, 25.07.2026). Mobil gestapelt Sina, Marco, Andrè, Adrian; Desktop
   unverändert links Sina + Adrian, rechts Marco + Andrè.

   Die DOM-Reihenfolge bleibt die DESKTOP-Reihenfolge (Sina, Adrian, Marco, Andrè),
   damit das bewährte Spalten-Layout unangetastet weiterläuft. Mobil sortiert ein
   Flex-Stapel mit `order` auf Pauls Wunschfolge um.

   Warum nicht zwei Spalten-Divs im HTML: Die mobile Wunschfolge verschränkt die
   Spalten (links, rechts, rechts, links). Zwei zusammenhängende Spalten-Container
   könnten mobil per `display: contents` immer nur erst die eine, dann die andere
   Spalte ausgeben, nie verschränkt. Deshalb bleibt die Kachel-Liste flach.

   ACHTUNG bei Änderungen: Die order-Werte unten sind die MOBILE Stapelfolge und
   hängen an der DOM-Position (nth-child). Wird eine Kachel im HTML verschoben,
   müssen sie mitgezogen werden, sonst kippt die Handy-Reihenfolge.

   Historie: Desktop nutzt weiterhin CSS columns wie seit 21.07. Fugenlose Wand
   (gap 1px + Container-Rahmen) am 21.07. getestet und vom Site-Owner verworfen:
   wirkte wie EIN Kommentar, nicht wie vier. Ein Zeilen-Grid scheitert ebenfalls:
   gemeinsame Zeilenhöhen reissen neben der langen Sina-Kachel rechts ein Loch. */
.t-grid {
  margin-bottom: calc(-1 * var(--s-5)); /* gleicht die margin-bottom der letzten Kachel aus */
}
/* Mobil: ein Flex-Stapel, Reihenfolge Sina -> Marco -> Andrè -> Adrian.
   DOM ist Sina, Adrian, Marco, Andrè, deshalb wandert Adrian ans Ende. */
@media (max-width: 849.98px) { /* Gegenstueck zu min-width: 53.125em (= 850px) */
  .t-grid { display: flex; flex-direction: column; }
  .t-grid > .t-card:nth-child(1) { order: 1; } /* Sina   */
  .t-grid > .t-card:nth-child(3) { order: 2; } /* Marco  */
  .t-grid > .t-card:nth-child(4) { order: 3; } /* Andrè  */
  .t-grid > .t-card:nth-child(2) { order: 4; } /* Adrian */
}
@media (min-width: 53.125em) {
  /* 850px = alter auto-fit-Umbruchpunkt (2 x 24rem im 1140er-Wrap) */
  .t-grid {
    column-count: 2;
    column-gap: var(--s-5);
  }
  .t-card:nth-child(2) { break-after: column; }
}
.t-card {
  background: var(--paper-deep);
  border: 1px solid rgba(26, 188, 156, 0.28); /* dezenter Teal-Rahmen, bewusst wenig Kontrast */
  border-radius: 16px;
  padding: var(--s-6);
  break-inside: avoid;
  margin-bottom: var(--s-5); /* ersetzt das frühere Grid-gap */
}
.t-name {
  margin-bottom: var(--s-3);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--navy);
}
/* Bewertungs-Sterne neben dem Namen (Paul, 25.07.2026). Nur an Kacheln mit echter
   Bewertung (Adrian, Marco); Sina und Andrè haben noch keine geliefert.

   SVG statt Emoji (Paul 25.07., nach zwei Zwischenrunden): Das ⭐-Emoji war Paul zu
   dunkel und zu wenig gelb. Seine Farbe steckt in der Farb-Glyphe der System-Schrift
   und laesst sich NICHT per `color` setzen; auch `filter` (saturate/contrast/hue-rotate)
   bekommt die dunklen Konturen und den 3D-Verlauf nicht weg -- per Variantenvergleich
   belegt. Deshalb jetzt eine flache SVG-Sternform aus dem Sprite (`<symbol id="stern">`
   am body-Anfang), die ueber currentColor exakt einfaerbbar ist.
   Damit ist die ⭐-Emoji-Ausnahme wieder Geschichte: die Seite ist erneut emojifrei
   bis auf das ❌ in der Fit-Sektion.

   Gelb #F5E020 ist eine dokumentierte Paul-Ausnahme von der Kein-Gelb-Regel, wie zuvor
   das ⭐-Emoji: Bewertungs-Sterne sind konventionell gelb/gold, ein Teal-Stern liest
   sich nicht als Bewertung. Gilt NUR fuer diese Sterne, sonst nirgends.
   Der Ton stammt aus einem Referenzbild von Paul (25.07., gelbe Filz-Sterne) und ist
   daraus gemessen; uebernommen wurde AUSSCHLIESSLICH die Farbe. Die Filz-/Faser-
   Oberflaeche des Bildes ist ausdruecklich NICHT gewollt: die Sternflaeche bleibt
   glatt und einfarbig, keine Textur, kein Muster, kein Verlauf (Brand: keine Verlaeufe).
   Vorgaenger-Toene: #F5B301 (Gold, war Paul zu dunkel), davor das ⭐-Emoji.

   KEIN Leuchten (Paul 25.07., nach Referenz-Screenshot): flach und matt wie in
   gaengigen Bewertungs-Widgets. Ein zwischenzeitlich gebauter Schein (drop-shadows)
   ist ersatzlos raus -- nicht erneut einbauen.

   Groesse 1em (Paul 25.07., dritte Groessen-Stufe: 0.72 -> 0.85 -> 1em): die Sterne
   stehen jetzt auf Namenshoehe. white-space: nowrap verhindert, dass die Fuenfergruppe
   in sich umbricht; sie rutscht als Ganzes in die zweite Zeile, wenn es eng wird
   (bei 320px der Fall, kein Overflow). */
.t-stars {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 1em;
  white-space: nowrap;
  line-height: 1;
  color: #F5E020;
}
/* Feine Navy-Kontur (Paul 25.07.): Das helle Gelb #F5E020 hat gegen den Kachelgrund
   nur 1.29:1. Statt den Ton abzudunkeln (drei Gold-Vorschlaege lagen vor, alle
   verworfen) traegt die Kontur den Kontrast -- die Farbe bleibt exakt die aus Pauls
   Referenzbild. stroke-width in viewBox-Einheiten: 1.2 von 24 ~ 1.1px bei 22.4px
   Darstellung. Navy statt Schwarz = die dunkle Farbe der Seite.
   WICHTIG: stroke/fill muessen am <svg> stehen, NICHT an `.t-stars path` -- der
   gezeichnete <path> liegt im <symbol> des Sprites am body-Anfang und damit
   ausserhalb von .t-stars; ein Nachfahren-Selektor trifft ihn nie (verifiziert:
   0 Treffer). Ueber das <svg> erben die per <use> geklonten Inhalte die Werte. */
.t-stars svg {
  display: inline-block;
  width: 1.12em;
  height: 1.12em;
  fill: currentColor;
  vertical-align: -0.19em;
  overflow: visible; /* sonst kappt die viewBox die aeussere Haelfte der Kontur */
  stroke: var(--navy);
  stroke-width: 1.2;
  stroke-linejoin: round;
  paint-order: stroke fill; /* Kontur hinter die Flaeche, Gelb bleibt voll sichtbar */
}
.t-stars svg + svg { margin-left: 0.07em; }
/* Halber Stern (#stern-halb, seit 25.07. fuer Andrès 4,5): siehe Sprite in index.html.
   Sein Konturpfad traegt fill="none" als ATTRIBUT, nicht per CSS -- eine Regel wie
   `.t-stars .stern-kontur` wuerde nicht greifen, weil das <symbol> ausserhalb von
   .t-stars liegt (gleicher Fallstrick wie beim stroke oben, verifiziert: 0 Treffer). */
.t-highlight {
  margin-bottom: var(--s-4);
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--teal);
}
.t-quote p {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.t-quote p + p { margin-top: var(--s-3); }
/* Ab hier: aktuell nur vom auskommentierten YouTube-Block genutzt
   (Reaktivierung dann ohne CSS-Arbeit) */
.proof-block + .proof-block { margin-top: var(--s-7); }
.proof-kind {
  font-size: var(--text-lead);
  margin-bottom: var(--s-5);
}
.quote-card {
  background: var(--paper-deep);
  border-radius: 16px;
  padding: var(--s-6);
}
.quote-card + .quote-card { margin-top: var(--s-4); }
.quote-card blockquote {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.proof-source {
  margin-top: var(--s-4);
  font-size: var(--text-tiny);
  color: var(--ink-mute);
}

/* ---------- 6 · Zertifizierung ---------- */
.cert { background: var(--paper); }
/* Überschrift ab Desktop mittig, wie Story/Beweis-Wand (Paul, 22.07., Runde 2) */
@media (min-width: 56.25em) {
  .cert h2 { text-align: center; }
}
.cert-copy { color: var(--ink-soft); }
.cert-copy p + p { margin-top: var(--s-4); }
.cert-copy strong { font-weight: 600; }
/* Einzeiler-Ueberschrift ganz oben: 1px groesser als der Fliesstext (Paul, 23.07.).
   Relativ (1.0625em), damit +1px auf beiden Basen greift: Desktop 18px, mobil 17px. */
.cert-copy p:first-child { font-size: 1.0625em; }
/* Mobil 16px; ab Desktop 17px mit ruhiger Zeilenhöhe. Die breitere Textspalte unten
   gleicht den längeren Erklärtext an die optische Höhe des Zertifikats an. */
@media (min-width: 56.25em) {
  .cert-copy { font-size: 17px; line-height: 1.55; }
}

/* Zweispalter mittig unter der Überschrift: links der ausführliche Programmtext,
   rechts das Zertifikat. Die Textspalte darf breiter werden, damit der längere
   Erklärtext optisch ungefähr auf Höhe des Dokuments endet; das Zertifikat bleibt
   bei seiner bewährten Breite von 24rem. Unterhalb 62em gestapelt: Text, dann
   Zertifikat. */
.cert-grid {
  display: grid;
  gap: var(--s-6);
  max-width: 61rem;
  margin-inline: auto;
}
@media (min-width: 62em) {
  .cert-grid {
    grid-template-columns: minmax(0, 34rem) minmax(20rem, 24rem);
    justify-content: center;
    column-gap: clamp(2.5rem, 4vw, 3rem);
    /* Oberkanten buendig: Text und Zertifikat starten auf gleicher Hoehe (Paul, 22.07.).
       align-items: center hatte den (19px hoeheren) Textblock zentriert, wodurch seine
       Oberkante 18px unter der Bildkante lag; start richtet beide oben aus. */
    align-items: start;
  }
}

.cert-card { max-width: 24rem; margin-inline: auto; }
.cert-doc { display: block; border-radius: 12px; cursor: zoom-in; }
.cert-doc img {
  width: 100%;
  height: auto;
  border: 1px solid var(--grey-l);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast) var(--ease-out-quint),
              transform var(--t-fast) var(--ease-out-quint);
}
@media (hover: hover) {
  .cert-doc:hover img {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.cert-card figcaption {
  margin-top: var(--s-3);
  font-size: var(--text-tiny);
  color: var(--ink-mute);
}

/* ---------- 7 · Für wen / nicht für wen ---------- */
.fit { background: var(--paper-deep); }
.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-5);
  align-items: start;
}
.fit-card {
  background: var(--paper);
  border: 1px solid var(--grey-l);
  border-radius: 16px;
  padding: var(--s-6);
}
.fit-card h3 { margin-bottom: var(--s-5); }
.fit-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.fit-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}
/* "Für dich"-Liste: Teal-Check (von .closer-list adaptiert, Teal dunkel auf hellem Grund).
   top 0.4em: Box-Mitte = Mitte der ersten Textzeile (12.4px bei 1rem/1.55) und damit
   dieselbe optische Höhe wie das ❌ der Nein-Liste (Angleich 21.07.). Gilt auch für
   die "Ganz konkret"-Liste im Coaching (gleiche Klasse .fit-yes). */
.fit-yes li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.4em;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2px solid var(--teal-d);
  border-bottom: 2px solid var(--teal-d);
  transform: rotate(45deg);
}
/* "Nicht für dich"-Liste: Kreuz-Emoji (ausdrücklicher Wunsch von Paul, Notiz 09.07.).
   top: 0 + line-height 1.55/0.8: Die Emoji-Zeilenbox ist exakt so hoch wie die erste
   Textzeile, der Half-Leading zentriert das ❌ optisch auf ihr. */
.fit-no li::before {
  content: '❌';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8em;
  line-height: 1.9375; /* = 1.55 / 0.8 */
}

/* ---------- 8 · FAQ ---------- */
.faq { background: var(--paper-deep); }
/* FAQ-Titel einzeilig ab Tablet (kein balance-Umbruch wie bei den anderen h2).
   Unter 48em bleibt der normale Umbruch, damit der Titel nicht ueberlaeuft. */
#faq-title { text-wrap: wrap; }
@media (min-width: 48em) { #faq-title { white-space: nowrap; } }
.faq details {
  border-bottom: 1px solid var(--grey-l);
}
.faq details:first-of-type { border-top: 1px solid var(--grey-l); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-block: var(--s-5);
  padding-right: 3rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .faq summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--teal);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
}
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.875rem;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform var(--t-med) var(--ease-out-quint);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p {
  padding-bottom: var(--s-5);
  max-width: 62ch;
  color: var(--ink-soft);
}
/* Haekchen-Liste in einer Antwort (z.B. "Was passiert mit meinen Daten?"): der
   folgende Schluss-Absatz braucht Luft, sonst klebt er an der letzten Zeile. */
.faq details ul.fit-list { margin-bottom: var(--s-5); max-width: 62ch; }
/* Kernsatz am Antwort-Anfang halbfett (600 statt Browser-Default 700) */
.faq details p strong { font-weight: 600; }

/* Vergleichs-Bloecke in einer Antwort ("Herkoemmlich" vs. "Unser Ansatz"):
   halbfette Zwischenueberschrift mit Symbol davor (❌ / gruener Haken, Muster .fit-no/.fit-yes).
   Der farbige Zitat-Strich sitzt NUR an der Bullet-Liste darunter (Paul 23.07.), nicht an
   der Ueberschrift: rot bei "Herkoemmlich", teal bei "Unser Ansatz". */
.faq details .faq-h {
  position: relative;
  margin-top: var(--s-4);
  margin-bottom: var(--s-4);
  padding-left: 1.85rem;
  padding-bottom: 0;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--navy); /* dunkel wie die Schrift */
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* Einleitungssatz rueckt dicht an die erste Vergleichs-Ueberschrift */
.faq details p:has(+ .faq-h) { padding-bottom: var(--s-2); }
.faq details .faq-h--no::before {
  content: '❌';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9em;
}
.faq details .faq-h--yes::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.35em;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2px solid var(--teal-d);
  border-bottom: 2px solid var(--teal-d);
  transform: rotate(45deg);
}
.faq details ul.faq-bullets {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
  max-width: 62ch;
  list-style: disc;
  color: var(--ink-soft);
  border-left: 2px solid var(--grey-l); /* Fallback; Modifier setzen die Farbe */
}
.faq details ul.faq-bullets--no { border-left-color: var(--red-accent); }
.faq details ul.faq-bullets--yes { border-left-color: var(--teal-d); }
.faq details ul.faq-bullets--plain { border-left: none; padding-left: var(--s-6); } /* Punkt-Bullets ohne Zitat-Strich */
.faq details ul.faq-bullets li { margin-bottom: var(--s-2); }
.faq details ul.faq-bullets li::marker { color: var(--ink-mute); }
.faq details ul.faq-bullets strong { font-weight: 600; }
/* Folgt eine Quellenzeile, rueckt sie dicht an die Antwort */
.faq details p:not(.faq-stat):has(+ .faq-source) { padding-bottom: var(--s-2); }
/* Studien-Beleg: hebt den Studien-Satz dezent hervor, ohne dunkle Kachel (Paul 23.07.:
   "weicher, nicht so klobig"). Statt Navy-Block nur ein Teal-Akzentstrich links (Zitat-
   Optik) und Breite auf den Text beschraenkt (fit-content), damit der Beleg am laengsten
   Wort endet und nicht bis zum rechten Rand laeuft. Text bleibt halbfett.
   Abstand zur Quellenzeile als margin; das :not(.faq-stat) in der Regel davor nimmt den
   Satz von deren padding-bottom aus, die Werte hier gelten bei jeder Regel-Reihenfolge. */
.faq details p.faq-stat {
  width: fit-content;
  max-width: 42ch; /* zwingt den Umbruch frueh (~nach "spuerbare"), damit der Beleg kompakt bleibt */
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 2px solid var(--teal-d); /* dezenter Teal-Strich, 4.5:1-tauglich auf paper-deep */
  margin-bottom: var(--s-4); /* etwas Luft zur Quellenzeile darunter */
  color: var(--navy);
  font-weight: 600; /* Paul-Wunsch: ganzer Satz halbfett */
}
/* Der Antwortsatz davor bekommt weniger Abstand zur Kachel (Muster Quellenzeile) */
.faq details p:has(+ .faq-stat) { padding-bottom: var(--s-3); }
.faq details p.faq-source {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ink-mute); /* Hinweis-Grau statt Teal: besteht 4.5:1 auf paper-deep (21.07.) */
}
.faq-source cite { font-style: italic; }
.faq-source a {
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .faq-source a { transition: color 0.15s ease; }
}
.faq-source a:hover { color: var(--teal-d); }
/* Quellenzeilen-Link .faq-link in Marken-Teal (Paul-Wunsch 23.07.); hoehere
   Spezifitaet als .faq-source a, Gewicht bleibt normal. Hinweis: #1ABC9C auf
   paper-deep ~2.3:1, bewusste Paul-Ausnahme von der 4.5:1-Lesetext-Schwelle. */
.faq-source a.faq-link { color: var(--teal); font-weight: 400; }
.faq-source a.faq-link:hover { color: var(--teal-d); }
/* Hervorgehobener Link im FAQ-Antworttext: teal, halbfett, unterstrichen.
   Tieferes Teal als --teal-d, weil erst dieser Ton auf paper-deep die 4.5:1
   fuer Lesetext besteht (5.04:1; --teal-d schafft nur 3.14:1). Bewusste
   Web-Abstufung analog zur Quellenzeilen-Lehre vom 21.07. */
.faq-link {
  color: #0d7a63;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .faq-link { transition: color 0.15s ease; }
}
.faq-link:hover { color: var(--teal-d); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes faq-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .faq details[open] p { animation: faq-in 0.25s var(--ease-out-quint); }
}

/* ---------- 9 · Closer ---------- */
.closer {
  background: var(--navy);
  /* Bewusst mehr Luft als die uebrigen Sektionen: der Schluss soll atmen
     (Paul 25.07., nachdem eine Halbierung hier probiert und verworfen wurde). */
  padding-block: clamp(5rem, 12vw, 8rem);
  text-align: center;
}
.closer h2 { font-size: var(--text-h2-closer); margin-bottom: var(--s-4); }
.closer-sub {
  font-size: var(--text-lead);
  max-width: 50ch;
  margin-inline: auto;
}
.closer .cta-group {
  margin-top: var(--s-7);
  align-items: center;
}

/* ---------- 10 · Footer ---------- */
.site-foot {
  background: var(--navy-deep);
  padding-block: var(--s-7);
  text-align: center;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4) var(--s-6);
}
.foot-links a {
  display: inline-block;
  padding-block: 0.625rem;
  font-size: var(--text-small);
  font-weight: 500;
}
.foot-line {
  margin-top: var(--s-5);
  margin-inline: auto;
  font-size: var(--text-tiny);
}

/* ---------- Reduced Motion: alles ruhigstellen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}