/* sections.css — konkateniert aus styles/sections/NN-*.css (+ faq) */


/* === SECTION 01-HERO === */
/* =====================================================================
   SECTION 01 — HERO · v3 „Das Frachtpapier"
   Gehört zu sections/01-hero.html.
   Nur Tokens + semantische --c-* Variablen; Motion ausschließlich
   über data-Attribute aus scripts/motion.js.
   ===================================================================== */

/* --- Grundgerüst: voller Viewport, Ticker sitzt am unteren Rand --- */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* Fallback */
  min-height: 100svh; /* mobil korrekt (dynamische Browser-UI) */
  /* fixed Header (~72px) braucht Luft; überschreibt .section-Padding */
  padding-top: calc(var(--space-24) + var(--space-6));
  padding-bottom: 0;
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* H1: Display-Größe + font-stretch kommen aus base.css. Greedy-Wrap
   statt balance — bricht sicher an Wortgrenzen. */
.hero__title {
  text-wrap: wrap;
  max-width: 100%;
}


/* --- Copy-Spalte --- */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}


/* Hook-Chip: Mono, feine Hairline, Accent-Punkt (Mikro-Highlight) */

.hero__hook-dot {
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* --- Visual: gerahmtes Routen-Diagramm („Abbildung" im Dossier) --- */


/* Haupt-Visual im Frame: das technische Routen-SVG (zeichnet sich via data-draw). */


/* SVG-Bausteine — Farben nur über Tokens/--c-* */


/* --- Technische Marginalie (vertikal am rechten Rand) --- */


/* --- Responsiv --- */


@media (max-width: 660px) {
  .hero { padding-top: var(--space-24); }
  
  
  /* Schutz vor Mid-Word-Breaks: der Char-Split macht Glyphen zu
     atomaren Boxen — unterhalb ~660px würde „Fakten schaffen." in
     Display-Größe mitten im Wort umbrechen. Daher eine Token-Stufe
     kleiner (weiterhin ausschließlich Token-Größen). */
  .hero__title { font-size: var(--text-2xl); }
}


/* === SECTION 02-PAINPOINTS === */
/* =====================================================================
   02-painpoints.css — Section #problem „Das Frachtpapier" v3
   Nur semantische --c-* Variablen + Token-Variablen. Keine Hex-Werte.
   Animationen ausschließlich über motion.js data-Attribute (data-reveal,
   data-reveal-stagger, data-draw, data-reveal-blur).
   ===================================================================== */

/* ---------- Headline ---------- */


/* ---------- Zweispalten-Split ---------- */


/* ---------- LINKS: Kostentreiber-Liste ---------- */


/* Mono-Index (01–05) */


/* Item-Body */


/* Treiber-Name: lesbar, mittleres Gewicht */


/* Erklärender Satz: gedämpft, aber AA-konform (--c-muted ≥ 0.62) */


/* ---------- RECHTS: Chart-Karte ---------- */


/* Karten-Meta-Zeile */


/* SVG-Container: skaliert sauber */


.pain-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---------- SVG: Interne Elemente ---------- */

/* Hairline-Raster */
.pain-grid line {
  stroke: var(--c-line);
  stroke-width: 1;
}

/* Achsen */
.pain-axis line {
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

/* Achsen-Beschriftung: Mono, gedämpft */
.pain-axis-label text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--c-muted);
  letter-spacing: 0.06em;
}

/* Differenzfläche: Akzent-soft (nie Text, nur Fläche) */
.pain-area {
  fill: var(--color-accent-soft);
  stroke: none;
}

/* Ist-Kosten-Linie: Tinte, steigt */
.pain-line--ist {
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optimiert-Linie: Blau (Diagramm/Route-Farbe), fällt ab */
.pain-line--opt {
  stroke: var(--color-fill);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Endpunkt-Dots */
.pain-dot--ist {
  fill: var(--color-ink);
  stroke: var(--c-bg-raised);
  stroke-width: 2;
}

.pain-dot--opt {
  fill: var(--color-fill);
  stroke: var(--c-bg-raised);
  stroke-width: 2;
}

/* Inline-Plot-Labels (neben den Endpunkten) */
.pain-plot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pain-plot-label--ist {
  fill: var(--color-ink);
}

.pain-plot-label--opt {
  fill: var(--color-fill-ink);
}

/* Knickpunkt-Marker FAKTENAUFNAHME */
.pain-marker__line {
  stroke: var(--c-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}


.pain-marker__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--c-muted);
}

/* ---------- Legende ---------- */


/* Legende-Swatch */


/* Legende-Text: Mono, AA-konform (--c-muted) */


/* Bildunterschrift-Text */


/* ---------- Abschlusszeile ---------- */


/* focus-visible via base.css global :focus-visible */

/* ---------- Responsive: Tablet ---------- */


/* ---------- Responsive: Schmal (≤ 420px) ---------- */


/* ---------- prefers-reduced-motion: Linien sofort gezeichnet ----------
   motion.js übernimmt staticFallback() global.
   Zusätzliche Absicherung für den Fall, dass data-draw-Elemente
   noch nicht initialisiert wurden (z. B. bei SSR/no-JS):           */
@media (prefers-reduced-motion: reduce) {
  .pain-line--ist,
  .pain-line--opt {
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
  }
}


/* === SECTION 03-ERFAHRUNG === */
/* =====================================================================
   04-fakten.css — Section "Fakten" (theme-dark)
   Frachtpapier-Tabellenoptik auf dunklem Grund.
   Stylt ausschließlich gegen --c-* semantische Variablen.
   ===================================================================== */

/* ---------- Statement (ehem. Section 03 „Erfahrung") ---------- */


/* ---------- Tabelle ---------- */


/* ---------- Zeile ---------- */


/* Dezente Hover-Aufhellung der ganzen Zeile */


/* ---------- Linke Spalte: Label + ggf. Badge ---------- */


/* Accent-Badge (nur Zeile 4) */


/* ---------- Mittlere Spalte: Zahl ---------- */


/* "SEIT 2018" — etwas kleiner für den Prefix-Stil */


/* Accent-Farbe für Zeile 4 */


/* ---------- Rechte Spalte: Subtext ---------- */


/* ---------- Accent-Zeile: zusätzliche Accent-Hairline oben ---------- */


/* ---------- Fußnote ---------- */


/* ---------- Responsiv: Tablet (max 900px) ---------- */


/* ---------- Responsiv: Mobile (max 600px) ---------- */


/* === SECTION 05-FUER-WEN === */
/* =====================================================================
   styles/sections/05-fuer-wen.css — Section 05 „Für wen"
   v3 „Das Frachtpapier" — nur Tokens + --c-* semantische Variablen.
   Klassen-Präfix: .who__
   ===================================================================== */

/* ---------- Headline ---------- */


/* ---------- Zielgruppen: kompakte Mono-Tag-Zeile ---------- */


/* ---------- Checklisten-Block ---------- */


/* ---------- Checkliste ---------- */


/* ---------- Microcopy / CTA ---------- */


/* ---------- Responsive: Mobile (< 600px) ---------- */


/* === SECTION 06-LEISTUNGEN === */
/* =====================================================================
   06-leistungen.css — Section 06 „Leistungen"
   v3 „Das Frachtpapier" — nur Token-Variablen + --c-* verwenden.
   Klassen-Präfix: .svc…
   ===================================================================== */

/* ---------- Intro (H2 + Lead) ---------- */
.svc-intro {
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-24));
  max-width: 72ch;
}

.svc-intro__h2 {
  /* font-size aus base.css h2: --text-2xl — kein Override nötig */
  margin-bottom: var(--space-6);
}

.svc-intro__lead {
  font-size: var(--text-lg);
  color: var(--c-muted);
  line-height: var(--leading-body);
  max-width: 62ch;
}

/* ---------- Leistungszeilen-Liste ---------- */
.svc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(var(--space-12), 5vw, var(--space-24)) 0;
}

/* ---------- Einzelzeile ---------- */
.svc-row {
  position: relative;
  display: grid;
  /* index | title | desc | arrow */
  grid-template-columns: var(--space-12) minmax(0, 23rem) 1fr auto;
  align-items: start;
  column-gap: clamp(var(--space-8), 3vw, var(--space-16));
  padding-block: clamp(var(--space-6), 3vw, var(--space-12));
  border-top: 1px solid var(--c-line);
  transition:
    background-color var(--dur-fast) var(--ease-expo),
    padding-left var(--dur-fast) var(--ease-expo);
  cursor: default;
}

/* Letzte Zeile bekommt zusätzlich Bottom-Hairline */
.svc-row--last {
  border-bottom: 1px solid var(--c-line);
}

/* Hover: Hintergrundwechsel + leichte horizontale Verschiebung des Inhalts */
.svc-row:hover {
  background-color: var(--c-bg-raised);
  padding-left: var(--space-3);
}

/* ---------- Mono-Index ---------- */
.svc-row__index {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--c-subtle);
  padding-top: 0.35em; /* optische Ausrichtung zur Baseline des Titels */
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-expo);
}

.svc-row:hover .svc-row__index {
  color: var(--color-fill-ink);
}

/* ---------- Titel h3 ---------- */
.svc-row__title {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  transition:
    color var(--dur-fast) var(--ease-expo),
    transform var(--dur-fast) var(--ease-expo);
}

/* Titel rückt bei Hover minimal ein (4px) */
.svc-row:hover .svc-row__title {
  transform: translateX(var(--space-1));
}

/* ---------- Beschreibungstext ---------- */
.svc-row__desc {
  font-size: var(--text-base);
  color: var(--c-muted);
  line-height: var(--leading-body);
  max-width: 56ch;
}

/* ---------- Pfeil-Glyph ---------- */
.svc-row__arrow {
  font-size: var(--text-xl);
  color: var(--c-subtle);
  align-self: center;
  transition:
    transform var(--dur-fast) var(--ease-expo),
    color var(--dur-fast) var(--ease-expo);
  line-height: 1;
}

.svc-row:hover .svc-row__arrow {
  transform: translateX(var(--space-3));
  color: var(--color-fill);
}

/* ---------- Tag-Zeile ---------- */
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
}

.svc-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.7em;
}

.svc-tags__sep {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--c-subtle);
  /* Hidden on mobile — seps become invisible; tags wrap naturally */
}

/* ---------- Abschluss-Block ---------- */
.svc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-line);
}

.svc-foot__text {
  font-size: var(--text-base);
  color: var(--c-muted);
  max-width: 52ch;
}

.svc-foot__link {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-text);
  white-space: nowrap;
}

/* ---------- Responsiv ---------- */

/* Tablet: Beschreibung bricht in zweite Zeile (span full-width unter title) */
@media (max-width: 1024px) {
  .svc-row {
    grid-template-columns: var(--space-10) 1fr auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-3);
  }

  .svc-row__title {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .svc-row__desc {
    grid-column: 2 / 3;
    grid-row: 2;
    max-width: 100%;
  }

  .svc-row__arrow {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Mobile: Einspaltiges, gestapeltes Layout */
@media (max-width: 640px) {
  .svc-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    padding-block: var(--space-6);
  }

  .svc-row__index {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }

  .svc-row__title {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-lg);
  }

  .svc-row__desc {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  .svc-row__arrow {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--text-lg);
  }

  /* Hover-Indent deaktivieren auf Touch-Geräten */
  .svc-row:hover {
    padding-left: 0;
  }

  .svc-tags__sep {
    display: none;
  }
}

/* Extra-klein (360px Minimum) */
@media (max-width: 400px) {
  .svc-intro__lead {
    font-size: var(--text-base);
  }
}


/* === SECTION 07-VORGEHEN === */
/* =====================================================================
   Section 07 — VORGEHEN / TIMELINE
   Klassen-Präfix: .proc…
   Nur Token-Variablen + --c-* semantische Variablen.
   Animationen ausschließlich über motion.js data-Attribute.
   ===================================================================== */

/* ---------- Headline ---------- */
.proc-headline {
  max-width: 18ch;
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
  color: var(--c-text);
}

/* ---------- Timeline-Wrapper: positionierter Kontext für Achse ---------- */


/* ---------- Vertikale Achse ---------- */


/* Wachsende blaue Fortschritts-Tinte — Hero-Moment dieser Section */


/* ---------- Schritte-Liste ---------- */


/* Desktop: Zickzack kompakt — gegenüberliegende Karten rücken vertikal zusammen */


/* ---------- Einzelner Schritt ---------- */


/* Links-Schritt: Karte in Spalte 1, Knoten in Spalte 2 */


/* Rechts-Schritt: Knoten in Spalte 2, Karte in Spalte 3 */


/* ---------- Wegpunkt-Knoten auf der Achse ---------- */


/* Hervorgehobener Knoten */


/* ---------- Karte ---------- */
.proc-card {
  padding: var(--space-6);
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}

/* Hervorgehobene Karte (Schritt 02): voller Akzent-Rahmen statt Seitenstreifen */
.proc-card--highlight {
  background: var(--c-bg-raised);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lift);
}

/* ---------- Karten-Meta-Zeile: Index + Badge ---------- */
.proc-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  /* Rechts-ausgerichtet für linke Karten */
}


/* Mono-Index (groß) */
.proc-index {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  line-height: 1;
}

/* Mono-Badge */
.proc-badge {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}

/* Accent-Badge für Schritt 02: gefüllter Chip (AA; kleines Rot auf Papier wäre 3.3:1) */
.proc-badge--accent {
  color: var(--color-night-deep);
  background-color: var(--color-accent);
  font-weight: 600;
  padding: 0.18em 0.55em;
  border-radius: var(--radius-sm);
}

/* ---------- Karten-Inhalt ---------- */
.proc-card__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  margin-bottom: var(--space-3);
}

.proc-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-muted);
  max-width: 42ch;
}

/* Für linke Karten: Text linksbündig trotz rechtsbündiger Karte */


/* Mono-Meta-Zeile unter dem Text der Highlight-Karte */
.proc-card__meta-line {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fill-ink);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
}

/* ---------- Abschluss-CTA ---------- */
.proc-cta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: clamp(var(--space-12), 4vw, var(--space-16));
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-line);
}

.proc-cta__text {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  max-width: none;
}

/* ---------- RESPONSIVE: Tablet (< 900px) → linke Timeline ---------- */


/* ---------- RESPONSIVE: Mobile (< 600px) ---------- */
@media (max-width: 600px) {
  

  

  

  .proc-card {
    padding: var(--space-4);
  }

  .proc-badge {
    white-space: normal;
    word-break: break-word;
  }

  .proc-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* ---------- Fokus-States ---------- */
.proc-cta__btn:focus-visible {
  outline: 2px solid var(--color-fill);
  outline-offset: 3px;
}


/* === SECTION 08-UEBER-MICH === */
/* =====================================================================
   08-ueber-mich.css — Section „Über mich"
   Tokens: nur --c-* und --color-* / --font-* / --space-* / --text-*
   Animationen: ausschließlich über motion.js data-Attribute
   ===================================================================== */

/* ---------- Zweispalten-Layout ---------- */


/* ---------- Portrait-Spalte ---------- */


/* ---------- Figure ---------- */


/* Hairline-Frame: vier Eck-Marker als Ligatur-Motiv */


/* ---------- Bild-Wrapper (Parallax-Ziel) ---------- */


/* Bild selbst */


/* Wenn Bild nicht lädt: .about__img--missing ausblenden → Platzhalter sichtbar */


/* Platzhalter-Overlay: Initialen + Label */


/* Bild vorhanden → Platzhalter unsichtbar (Bild liegt drüber) */


/* ---------- Bildunterschrift ---------- */


/* ---------- Textblock ---------- */


/* ---------- Headline ---------- */


/* ---------- Bio ---------- */


/* ---------- Credential-Liste ---------- */


/* ---------- Abschluss + CTA ---------- */


/* ---------- Responsive: 360–860px (Bild über Text) ---------- */


/* === SECTION 09-ANWENDUNGSFAELLE === */
/* =====================================================================
   styles/sections/09-anwendungsfaelle.css — Section 09 „Typische Hebel"
   v3 „Das Frachtpapier" — nur Tokens + --c-* semantische Variablen.
   Klassen-Präfix: .case__
   ===================================================================== */

/* ---------- Abschnitts-Headline ---------- */


/* ---------- Karten-Grid ---------- */


/* ---------- Einzelne Karte ---------- */


/* ---------- Karten-Kopf ---------- */


/* Mono-Label „TYPISCHES PROJEKTSZENARIO" */


/* ---------- Hebel-Liste mit Hairlines ---------- */


/* ---------- Karten-Footer: Ergebnis-Zeile ---------- */


/* Beschriftungszeile über dem Wert */


/* Der prominente Platzhalter-Wert */


/* ---------- Abschlusszeile ---------- */


/* Fokus-States für Karten */


/* ---------- Responsive: Tablet (< 960px) → 2+1-Spalten-Layout ---------- */


/* ---------- Responsive: Mobil (< 600px) → 1 Spalte ---------- */


/* === SECTION FAQ === */
/* =====================================================================
   SECTION 10 — FAQ / EINWANDBEHANDLUNG (Präfix .faq)
   Nur Token- + semantische --c-*-Variablen. Natives Accordion.
   ===================================================================== */

/* ---------- Layout: Intro links (sticky), Liste rechts ---------- */


/* Frage-Text muss im Flex-Row neben dem Icon umbrechen dürfen */


/* ---------- Accordion-Item ---------- */


/* +/− Indikator */


 /* horizontal */
 /* vertikal */


/* Antwort */


/* Sanftes Öffnen (Browser mit interpolate-size; Fallback: instant) */


/* ---------- Responsiv ---------- */


/* === SECTION 10-TERMIN === */
/* =====================================================================
   SECTION 11 (Datei 10) — FINAL-CTA / TERMIN (.theme-dark, Präfix .book)
   Styled ausschließlich gegen Tokens + semantische --c-*-Variablen,
   damit die Section im Nacht-Remapping korrekt rendert.
   ===================================================================== */

/* ---------- Headline (nahe Display-Größe, dramatisch ruhig) ---------- */
.book__title {
  font-size: calc(var(--text-display) * 0.82);
  line-height: var(--leading-display);
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-24));
}

.book__title em { color: var(--c-text); } /* Serif-Italic-Akzent bleibt Cream */

/* ---------- Layout: Pitch links, Formular rechts ---------- */
.book__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--space-12);
  row-gap: var(--space-16);
  align-items: start;
}

.book__form-wrap { grid-column: 7 / -1; }

/* ---------- Subline ---------- */


/* ---------- „Warum honorarfrei?"-Erklärung ---------- */


/* ---------- Kontakt-Tabelle (Frachtpapier-Hairlines) ---------- */


/* ---------- Reassurance-Chips (Mono) ---------- */


/* ---------- Anfrageformular (primäre Conversion) ---------- */
.book__form {
  position: relative;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: clamp(var(--space-6), 3vw, var(--space-12));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.book__form-title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
.book__form-req {
  font-size: var(--text-sm);
  color: var(--c-muted);
  margin-top: calc(var(--space-1) * -1);
}
.book__form-req span { color: var(--color-accent); }

/* Honeypot — visuell entfernt, für Bots erreichbar */
.book__honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.book__field { display: flex; flex-direction: column; gap: var(--space-2); }

.book__field label,
.book__consent {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.book__field label span { color: var(--color-accent); }

.book__field input,
.book__field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  background: var(--c-bg-deep);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: 0.8em 0.9em;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-expo),
              box-shadow var(--dur-fast) var(--ease-expo);
}
.book__field textarea { resize: vertical; min-height: 5.5em; }
.book__field input::placeholder,
.book__field textarea::placeholder { color: var(--c-subtle); }
.book__field input:focus,
.book__field textarea:focus {
  outline: none;
  border-color: var(--color-fill);
  box-shadow: 0 0 0 3px var(--color-fill-soft);
}
.book__field input:user-invalid,
.book__field textarea:user-invalid {
  border-color: var(--color-accent);
}

/* Einwilligung: Checkbox + Text */
.book__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  font-size: var(--text-sm);
  color: var(--c-muted);
  margin-top: var(--space-2);
}
.book__consent input {
  margin-top: 0.2em;
  width: 1.1em; height: 1.1em;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}
.book__consent a { color: var(--c-text); }

.book__submit {
  margin-top: var(--space-2);
  justify-content: center;
  font-size: var(--text-base);
  padding: 1.1em 1.8em;
}
.book__submit:disabled { opacity: 0.6; cursor: progress; }

/* Status-Meldung (Erfolg / Fehler) */
.book__form-status {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line-strong);
}
.book__form-status.is-ok {
  color: var(--c-text);
  border-color: var(--color-fill);
  background: var(--color-fill-soft);
}
.book__form-status.is-err {
  color: var(--c-text);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}


/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
  .book__action,
  .book__form-wrap { grid-column: 1 / -1; }
  .book__form-wrap { max-width: 560px; }
}


/* =====================================================================
   ============  V4 „DIE ROUTE" — dunkel-dominant, 7 Sektionen  ==========
   Layer über den Bestand: überschreibt/ergänzt gezielt. Nur Tokens +
   semantische --c-* Variablen (inkl. --c-link / --c-ink-line, die mit
   dem Theme kippen).
   ===================================================================== */

/* ---------- Grafik-Kleintext theme-fest machen (Kostendiagramm) ---------- */
.pain-line--ist        { stroke: var(--c-ink-line); }
.pain-dot--ist         { fill: var(--c-ink-line); stroke: var(--c-bg-raised); }
.pain-plot-label--ist  { fill: var(--c-ink-line); }
.pain-plot-label--opt  { fill: var(--c-link); }


/* ---------- 01 HERO: dunkler Video-Hero mit robustem Fallback ---------- */
.hero {
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(72px + var(--space-16));
  padding-bottom: clamp(var(--space-16), 8vh, var(--space-24));
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Poster als sofort sichtbarer Grund (schneller LCP) — das Video legt sich
     darüber, sobald es lädt. Graphit-Verlauf als Fallback, falls Poster fehlt.
     Gilt für Desktop UND Handy (Video läuft jetzt auch mobil). */
  background-image:
    url(../assets/hero-poster.jpg),
    radial-gradient(120% 90% at 78% 6%, var(--color-night-raised) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-night) 0%, var(--color-night-deep) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim nur noch als leichte Lesbarkeits-Hilfe unten links (Text-Zone) —
   das Video selbst bleibt unverfälscht sichtbar. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(25,32,38,.45) 0%, rgba(25,32,38,.18) 45%, rgba(25,32,38,0) 75%),
    linear-gradient(rgba(25,32,38,0) 50%, rgba(25,32,38,.55) 100%);
}
/* Bewegungsreduziert: kein Video — das Poster (Grund) bleibt sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero__inner {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero__title {
  text-wrap: balance;
  max-width: 16ch;
  margin-bottom: var(--space-2);
}
.hero__title em { color: var(--color-cream); }
/* Kleine Hook-Zeile unter dem CTA: kein Chip, keine Box — nur Mono + Punkt */
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-cream);
}

/* ---------- 02 PROBLEM → HEBEL ---------- */
/* Choreografie in zwei Phasen: (1) Das Kostendiagramm hat einen SOLO-Screen —
   das Padding-Top entspricht exakt Chart-Oberkante + Chart-Höhe (Breite ×
   340/600 ≈ 0.5667) + Luft, der Inhalt beginnt also strukturell UNTER dem
   Chart (keine Text-über-Text-Kollision). (2) Beim Weiterscrollen weicht der
   Graph per data-recede in die Tiefe und dunkelt ab, während Headline (oben),
   Lead (links), Karten (unten) und Brücke (rechts) einfaden. */
.ph {
  overflow: hidden;
  padding-top: calc(5rem + min(1020px, 90%) * 0.5667 + 6rem);
}
.ph__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.ph__bg .pain-svg {
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  width: min(1020px, 90%);
  height: auto;
  display: block;
}
@media (max-width: 700px) {
  .ph { padding-top: calc(4rem + 100% * 0.5667 + 4rem); }
  .ph__bg .pain-svg { top: 4rem; width: 100%; }
}
/* Beschriftung: Achsen-Labels sind Blaupausen-Textur (geflüstert leise, damit
   sie im Übergang nie mit Headline/Lead kämpfen); nur die beiden Aussage-
   Labels (Ist-Verlauf / nach Optimierung) bleiben präsenter. */
.ph__bg .pain-axis-label text,
.ph__bg .pain-marker__label { fill: var(--c-text); opacity: 0.35; }
.ph__bg .pain-plot-label--ist { fill: var(--c-text); opacity: 0.8; }
.ph__bg .pain-plot-label--opt { fill: var(--c-link); opacity: 0.9; }
.ph > .container { position: relative; z-index: 1; }
.ph__headline {
  max-width: 22ch;
  margin-bottom: var(--space-6);
  color: var(--c-text);
}
.ph__lead {
  font-size: var(--text-lg);
  color: var(--c-muted);
  line-height: var(--leading-body);
  max-width: 62ch;
  margin-bottom: clamp(var(--space-12), 5vw, var(--space-24));
}
.ph__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  perspective: 1200px;
  margin-bottom: clamp(var(--space-16), 7vw, var(--space-32));
}
.ph-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  transition: box-shadow var(--dur-fast) var(--ease-expo),
              border-color var(--dur-fast) var(--ease-expo);
}
.ph-card:hover,
.ph-card:focus-within { box-shadow: var(--shadow-lift); }
.ph-card__head { margin-bottom: var(--space-4); }
.ph-card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-link);
  margin-bottom: var(--space-3);
}
.ph-card__title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
/* Grobe Info: der Nutzen steht sofort sichtbar (Benefit zuerst) */
.ph-card__effect {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--c-link);
  margin: 0 0 var(--space-6);
  max-width: none;
}
/* „Mehr entdecken" — Details auf Abruf (Progressive Disclosure) */
.ph-card__more {
  margin-top: auto;
  border-top: 1px solid var(--c-line);
}
.ph-card__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-link);
  transition: color var(--dur-fast) var(--ease-expo);
}
.ph-card__toggle::-webkit-details-marker { display: none; }
.ph-card__toggle::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-expo);
}
.ph-card__more[open] .ph-card__toggle::after { transform: rotate(-135deg); }
.ph-card__toggle:hover { color: var(--c-text); }
.ph-card__detail { padding-top: var(--space-4); }
.ph-card__problem {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-muted);
  margin: 0 0 var(--space-4);
  max-width: none;
}
.ph-card__levers {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ph-card__levers li {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  line-height: var(--leading-snug);
  color: var(--c-muted);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-line);
}
.ph-card__levers li:last-child { border-bottom: 1px solid var(--c-line); }
@media (prefers-reduced-motion: no-preference) {
  .ph-card__more::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur) var(--ease-expo), content-visibility var(--dur) allow-discrete;
  }
  .ph-card__more[open]::details-content { block-size: auto; }
}
.ph__bridge { margin-top: clamp(var(--space-8), 4vw, var(--space-16)); }
.ph__scrub {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  max-width: 32ch;
  margin: 0 auto clamp(var(--space-8), 4vw, var(--space-16));
  text-align: center;
}
.ph__bridge-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-line);
}
.ph__bridge-text {
  font-size: var(--text-base);
  color: var(--c-muted);
  max-width: 62ch;
  line-height: var(--leading-body);
  margin: 0;
}
.ph__bridge-link {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-link);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 900px) { .ph__grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ph__bridge-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ---------- 03 PROFIL (die EINE helle Sektion: Bilanz + Dossier) ---------- */
.pf__eyebrow { color: var(--c-muted); margin-bottom: var(--space-8); }
.pf__quote-wrap {
  margin: 0 0 clamp(var(--space-12), 5vw, var(--space-16));
  padding: 0;
  border: 0;
}
.pf__quote {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  max-width: 20ch;
  text-wrap: balance;
}
.pf__quote em {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
}

/* --- Kennzahlen-Band: die Bilanz in drei großen Zahlen --- */
.pf-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 clamp(var(--space-16), 8vw, var(--space-32));
  padding: 0;
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line-strong);
}
.pf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-4), 2vw, var(--space-8))
           clamp(var(--space-8), 4vw, var(--space-12)) 0;
}
.pf-stat + .pf-stat {
  border-left: 1px solid var(--c-line);
  padding-left: clamp(var(--space-6), 3vw, var(--space-12));
}
.pf-stat__num {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.pf-stat__num em {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--c-muted);
  margin-right: 0.1em;
}
.pf-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-text);
  line-height: var(--leading-snug);
  margin-top: var(--space-2);
}
.pf-stat__note {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-muted);
  max-width: 32ch;
}

/* --- Dossier: Porträt links, Statement + Route rechts --- */
.pf__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(var(--space-12), 6vw, var(--space-32));
  align-items: start;
}
.pf__grid > * { min-width: 0; }
.pf__figure { margin: 0; position: sticky; top: clamp(5rem, 10vw, 8rem); }
.pf__frame { position: relative; }
.pf__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-ink-line);
  z-index: 1;
}
.pf__corner--tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.pf__corner--tr { top: -5px; right: -5px; border-left: 0; border-bottom: 0; }
.pf__corner--bl { bottom: -5px; left: -5px; border-right: 0; border-top: 0; }
.pf__corner--br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.pf__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--c-bg-deep);
  background-image: radial-gradient(circle, var(--c-line-strong) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pf__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.4s var(--ease-expo);
}
.pf__img--missing { opacity: 0; pointer-events: none; }
.pf__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  pointer-events: none;
}
.pf__img:not(.pf__img--missing) ~ .pf__placeholder { opacity: 0; }
.pf__placeholder-initials {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-subtle);
  line-height: 1;
}
.pf__placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-subtle);
}
.pf__caption {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf__caption-name {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
.pf__caption-role {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}
.pf__body { padding-top: var(--space-2); }
.pf__statement {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  max-width: 22ch;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
  text-wrap: balance;
}
.pf__statement em {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
}

/* Werdegang-Route: statische Spur + scroll-gefüllte Linie + Marker */
.pf-route {
  list-style: none;
  position: relative;
  margin: 0 0 var(--space-8);
  padding: 0 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.pf-route::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--c-line-strong);
}
.pf-route__line {
  position: absolute;
  left: 2.5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-fill);
}
.pf-route__stop { position: relative; }
.pf-route__marker {
  position: absolute;
  left: calc(-1 * var(--space-6));
  top: 0.35em;
  width: 7px;
  height: 7px;
  background: var(--c-bg);
  border: 1.5px solid var(--color-fill);
}
.pf-route__stop:last-child .pf-route__marker { background: var(--color-fill); }
.pf-route__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--space-1);
}
.pf-route__what {
  display: block;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--c-text);
  max-width: 46ch;
}
.pf__close {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--c-muted);
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.pf__cta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pf__cta:hover { color: var(--c-link); }
.pf__cta span { transition: transform var(--dur-fast) var(--ease-expo); }
.pf__cta:hover span { transform: translateX(0.3em); }
@media (max-width: 860px) {
  .pf__grid { grid-template-columns: 1fr; row-gap: var(--space-12); }
  .pf__figure { position: static; max-width: min(420px, 100%); }
}
@media (max-width: 700px) {
  /* Kennzahlen als Zeilen: Zahl links, Label + Note rechts */
  .pf-stats { grid-template-columns: 1fr; border-top: 0; }
  .pf-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-1);
    align-items: baseline;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--c-line);
  }
  .pf-stat + .pf-stat { border-left: 0; padding-left: 0; }
  .pf-stat__num { grid-row: 1 / span 2; font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .pf-stat__label { margin-top: 0; }
  .pf-stat__note { grid-column: 2; }
}

/* ---------- 05 VORGEHEN: Sticky Fahrplan-Route + Stacking Cards ----------
   Die Route klebt oben am Screen; die Karten stapeln sich darunter. Jede
   Karte ist ein Checkpoint (01–04) auf der aufsteigenden Route — die Linie
   füllt sich scroll-gescrubbt bis zum roten Ergebnis (initProcRoute).
   --plan-route-block reserviert den Platz, den die Karten frei lassen:
   Sticky-Top (76px) + Padding + SVG-Höhe (Breite × 152/640). */
.proc { --plan-route-block: calc(120px + min(760px, 100vw - 2 * var(--gutter)) * 0.2375); }
.plan-route {
  position: sticky;
  top: 76px;
  z-index: 5;
  margin: 0 auto clamp(var(--space-8), 4vw, var(--space-12));
  max-width: 760px;
  padding: var(--space-4) var(--space-2) var(--space-2);
  background: var(--color-night-deep); /* Grund der Well-Sektion: Karten gleiten sauber darunter */
}
.plan-route::after { /* weicher Auslauf, damit Karten „unter die Karte" tauchen */
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(var(--color-night-deep), transparent);
  pointer-events: none;
}
.plan-route__svg { width: 100%; height: auto; overflow: visible; }
.plan-route__base {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-route__line {
  fill: none;
  stroke: var(--color-fill);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-route__node {
  fill: var(--color-night-deep);
  stroke: var(--color-fill);
  stroke-width: 2;
  transition: fill var(--dur-fast) var(--ease-expo);
}
.plan-route__cp.is-done .plan-route__node { fill: var(--color-fill); }
.plan-route__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  fill: var(--c-muted);
  transition: fill var(--dur-fast) var(--ease-expo);
}
.plan-route__cp.is-done .plan-route__idx { fill: var(--c-text); }
.plan-route__ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.plan-route__end  { fill: var(--color-accent); }
.plan-route__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  fill: var(--c-muted);
}
.proc-stack {
  position: relative;
  list-style: none;
  margin: 0 auto clamp(var(--space-12), 5vw, var(--space-16));
  padding: 0;
  max-width: 760px;
}
.proc-stack__item { position: sticky; top: calc(var(--plan-route-block, 84px) + var(--i, 0) * 14px); }
.proc-stack__item:nth-child(1) { --i: 0; }
.proc-stack__item:nth-child(2) { --i: 1; }
.proc-stack__item:nth-child(3) { --i: 2; }
.proc-stack__item:nth-child(4) { --i: 3; }
.proc-stack__item:nth-child(5) { --i: 4; }
.proc-stack__item + .proc-stack__item { margin-top: clamp(var(--space-8), 5vw, var(--space-16)); }
.proc-stack .proc-card {
  padding: clamp(var(--space-6), 3vw, var(--space-12));
  box-shadow: var(--shadow-soft);
}
.proc-card__meta-line { color: var(--c-link); }
/* Handy, bewegungsreduziert + NIEDRIGE Viewports (Landscape-Phone, kleine
   Fenster): kein Sticky-Stapel — Route + Karten würden sonst mehr Höhe
   beanspruchen, als der Screen hat (Karte ragt über den Viewport hinaus).
   Stattdessen saubere, klar getrennte Liste; Route statisch am Anfang. */
@media (prefers-reduced-motion: reduce), (max-width: 768px), (max-height: 620px) {
  .proc-stack__item { position: static; }
  .proc-stack__item + .proc-stack__item { margin-top: var(--space-6); }
  .plan-route { position: static; padding: 0; }
  .plan-route::after { display: none; }
}

/* ---------- 04 LEISTUNGEN: Hover-Farben theme-fest ---------- */
.svc-row:hover .svc-row__index,
.svc-row:hover .svc-row__arrow { color: var(--c-link); }

/* ---------- 06 ERSTGESPRÄCH: Form links, Qualifikation rechts ---------- */
.book__grid {
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: clamp(var(--space-8), 4vw, var(--space-16));
  row-gap: var(--space-12);
}
.book__form-wrap { grid-column: 1; }
.book__aside { grid-column: 2; align-self: start; }
.book__trust {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: var(--leading-snug);
  text-align: center;
  margin-top: var(--space-1);
  max-width: none;
}
.book__aside-title {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 650;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  margin-bottom: var(--space-6);
}
.book__check {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
  margin-bottom: var(--space-8);
}
.book__check-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--c-text);
}
.book__check-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--c-link);
  position: relative;
  top: 0.15em;
}
.book__direct {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-strong);
}
.book__direct-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  max-width: none;
}
.book__direct-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--c-text);
  width: fit-content;
}
@media (max-width: 980px) {
  .book__grid { grid-template-columns: 1fr; }
  .book__form-wrap, .book__aside { grid-column: 1; }
  .book__aside { max-width: 560px; }
}

/* ---------- FOOTER v6 „Das Ziel": Abbinder + Routen-Navigation + Meta ----------
   Kompakt in vier Zeilen: Slogan+CTA / Route / Marke+Kontakt / Legal.
   Die Navigation ist als Route inszeniert: Wegpunkte auf einer Linie,
   die sich scroll-gescrubbt füllt — das Ende der Seiten-Signatur. */
.footer {
  padding-block: clamp(var(--space-12), 6vw, var(--space-16)) var(--space-6);
  background-color: var(--color-night-deep);
  border-top: 1px solid var(--c-line);
  overflow: hidden;
}
/* Abbinder: Slogan + CTA */
.ftr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
  flex-wrap: wrap;
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
.ftr-head__line {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  max-width: none;
  text-wrap: balance;
}
.ftr-head__line em {
  font-family: var(--font-serif);
  font-style: italic;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-text);
}
.ftr-head__cta { flex-shrink: 0; margin-bottom: 0.35em; }
/* Routen-Navigation: Linie + Wegpunkte (Frachtpapier: eckige Marker wie die Progressbar) */
.ftr-route {
  position: relative;
  padding-top: var(--space-2);
}
.ftr-route__rail {
  position: relative;
  height: 2px;
  background: var(--c-line);
  overflow: hidden;
}
.ftr-route__fill {
  position: absolute;
  inset: 0;
  background: var(--color-fill);
  /* motion.js data-progress-line="x": wächst per scaleX mit dem Scroll */
}
.js .ftr-route__fill { transform: scaleX(0); transform-origin: left center; }
.ftr-route__stops {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.ftr-route__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}
/* Erster/letzter Wegpunkt sitzen bündig am Linienanfang/-ende */
.ftr-route__item:first-child .ftr-route__stop { align-items: flex-start; }
.ftr-route__item:last-child  .ftr-route__stop { align-items: flex-end; text-align: right; }
.ftr-route__dot {
  width: 9px;
  height: 9px;
  margin-top: -5.5px; /* Marker-Mitte exakt auf die 2px-Linie (Stops beginnen an Rail-Unterkante) */
  border: 1px solid var(--c-line-strong);
  background: var(--color-night-deep);
  transition: background-color var(--dur-fast) var(--ease-expo),
              border-color var(--dur-fast) var(--ease-expo);
}
.ftr-route__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease-expo);
}
.ftr-route__stop:hover .ftr-route__dot,
.ftr-route__stop:focus-visible .ftr-route__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.ftr-route__stop:hover .ftr-route__label,
.ftr-route__stop:focus-visible .ftr-route__label { color: var(--c-text); }
/* Das Ziel: roter Marker, immer gefüllt */
.ftr-route__item--goal .ftr-route__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.ftr-route__item--goal .ftr-route__label { color: var(--c-text); }
/* Meta-Zeile: Marke links, Direktkontakt rechts */
.ftr-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) var(--space-8);
  flex-wrap: wrap;
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.ftr-meta__logo {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}
.ftr-meta__logo span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
}
.ftr-meta__contact {
  display: flex;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}
.ftr-meta__link { color: var(--c-text); }
.ftr-meta__link:hover,
.ftr-meta__link:focus-visible { color: var(--c-link); }
.ftr-meta__sep { color: var(--c-subtle); }
.ftr-meta__addr { color: var(--c-muted); }
/* Bottom-Bar: Legal */
.ftr-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) var(--space-8);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
}
.ftr-bar__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  color: var(--c-muted); /* AA: subtle wäre auf Nacht-Grund zu blass für Lesetext */
  max-width: none;
}
.ftr-bar__links {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  max-width: none;
}
.ftr-bar__links a {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease-expo);
}
.ftr-bar__links a:hover,
.ftr-bar__links a:focus-visible { color: var(--c-text); }
@media (max-width: 900px) {
  /* Route wird zur kompakten Link-Liste: Linie aus, Marker inline */
  .ftr-route__rail { display: none; }
  .ftr-route__stops {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
  }
  .ftr-route__stop,
  .ftr-route__item:first-child .ftr-route__stop,
  .ftr-route__item:last-child .ftr-route__stop {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: 0;
    text-align: left;
  }
  .ftr-route__dot { margin-top: 0; }
}
@media (max-width: 760px) {
  .ftr-head { flex-direction: column; align-items: flex-start; }
  .ftr-head__cta { margin-bottom: 0; }
  .ftr-meta { flex-direction: column; align-items: flex-start; }
  .ftr-meta__contact { flex-direction: column; align-items: flex-start; }
  .ftr-meta__sep { display: none; } /* Trenner verwaisen beim Umbruch */
  .ftr-bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ---------- HERO mobil: kompakter, weniger Text, volle CTAs ---------- */
@media (max-width: 660px) {
  .hero { padding-top: calc(64px + var(--space-8)); padding-bottom: var(--space-12); }
  .hero__inner { gap: var(--space-4); }
  
  .hero__actions { width: 100%; gap: var(--space-3); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}