/* ============================================================
   book.css — Seiten-CSS /book (Skelett-Phase)
   Lädt NACH tokens.css → base.css → sections.css.

   Regeln (UEBERGABE_SKELETT_BAU_V2, wie method.css):
   - Farben NUR via Tokens; Ausnahmen: 1:1 aus home.css/method.css
     übernommene rgba-Werte + die Bestand-Bildfläche #dfe7ef.
   - Cover-Optik 1:1 aus home.css (.book-cover-placeholder):
     380×540, Radius 8, rotateY(−4deg), Schatten.
   - Sektionsabstände im Bestand-Muster (96–112px vertikal,
     Hero großzügiger) — überschreiben das --section-y der base.css.
   - Grids align-items:start. Viewport fix 1920×1080,
     KEIN Responsive, kein clamp, keine Media Queries.
   - Keine zusätzlichen Pseudo-Elemente auf .section (Lesson §7.5).
   ============================================================ */

/* =========================
   1 · HERO + COVER (dunkel, glow-tl)
========================= */

/* =========================
   POSITIONS-VARIABLEN /book-Hero (Bau-Werkzeug) — CSS = WAHRHEIT.
   Das Dev-Panel (_dev-book-panel.js, Taste s) liest/schreibt diese Werte;
   die Seite rendert IMMER hieraus. Stand: 2026-07-26-b — Nachjustage von Hand
   auf Inhaber-Ansage (26.07.), nachdem der Lead-Slot Text bekommen hat:
   „Der Hero muss um ungefaehr zwei Zeilen hoch. Die Textzeilen vom Hero etwas
   dichter zusammenschieben. Dann koennen wir den darunterliegenden Text
   dementsprechend hoeher stellen. Und ungefaehr um drei Buchstaben nach rechts."
   Geaendert sind NUR die drei Treppen-Y und die beiden Lead-Werte; Kicker, CTA,
   Cover und Headline-Groesse stehen unveraendert auf der Inhaber-Justage
   2026-07-07-c. Uebernahme: "Werte kopieren" -> Block ersetzen -> B_STAND erhoehen.
   VOR LIVEGANG: Panel-Datei + Script-Tag in book.html raus; Block bleibt.
========================= */
:root{
  --b-kicker-x:-87px;  --b-kicker-y:-60px;
  /* Treppe (Zeilenhoehe 60px, h1-Layoutbox beginnt bei y=296):
     — 120px hoch = zwei Zeilen. Die Luecke Kicker -> "Hufprobleme" war 221px und
       damit der groesste Leerraum der Seite; sie betraegt jetzt 101px.
     — Zeilenabstand vereinheitlicht auf 85px (war ungleich 100 und 115, was die
       Treppe nach unten hin auseinanderfallen liess). 85 statt 100 ist das
       „etwas dichter"; bei 60px Zeilenhoehe bleiben 25px Luft.
     Ergebnis Oberkanten: 307 / 392 / 477 (vorher 427 / 527 / 642). */
  --b-w1-x:-68px;      --b-w1-y:11px;     /* war 131 */
  --b-w2-x:153px;      --b-w2-y:36px;     /* war 171 */
  --b-w3-x:236px;      --b-w3-y:61px;     /* war 226 */
  /* Lead folgt der Treppe: 34px unter der Unterkante von "und loesen" (537 -> 571).
     ⚠ Die Treppe verschiebt die Woerter nur OPTISCH (transform), die Layoutbox der
     h1 bleibt oben stehen — ohne diesen Versatz floesse der Absatz mitten in die
     Treppe hinein (bei --b-lead-y:25px waren es 157px Ueberlappung, sichtbar
     geworden erst durch den neuen Text).
     X 79 -> 109 = die „drei Buchstaben nach rechts" (Lead-Schrift 20px). */
  --b-lead-x:109px;    --b-lead-y:52px;
  --b-cta-x:1276px;    --b-cta-y:-85px;
  --b-cover-x:-133px;  --b-cover-y:-30px;
  --b-head-size:73px;   /* Headline-Groesse (Inhaber-justiert 77 -> 73) */
}

.b-hero{ padding:140px 0 112px; }

/* Original-Container des Bestand-Cover-Grids: 1400px OHNE Innen-Padding
   (687 + 659 + 54 = 1400) — wie m-container-flush im Muster. */
.b-container-flush{
  max-width:none;
  width:1400px;
  padding:0;
}

/* Spalten 1:1 Bestand .book-grid (687/659, Gap 54); align-items:start lt. Regel */
.b-hero__grid{
  display:grid;
  grid-template-columns:687px 659px;
  gap:54px;
  align-items:start;
}

.b-hero__kicker{
  margin:0 0 30px;
  min-height:1em;                 /* reserviert Zeilenraum des leeren Slots */
  text-shadow:0 8px 24px rgba(0,0,0,0.10);   /* 1:1 Bestand-Hero-Kicker */
  transform:translate(var(--b-kicker-x), var(--b-kicker-y));  /* Position via --b-* */
}

/* 1:1 Bestand-Hero (Treppen-Rezept lt. Muster): 77px / 0.82 / -0.095em / 760 */
.b-hero__headline{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:var(--b-head-size);   /* justierbar via Dev-Panel (Bestand 77px) */
  line-height:0.82;
  font-weight:760;
  letter-spacing:-0.095em;
  color:rgba(255,255,255,0.92);
}

.b-hero__word{
  display:block;
  white-space:nowrap;
  min-height:0.82em;              /* reserviert Zeilenraum der leeren Treppen-Slots */
  color:rgba(255,255,255,0.92);   /* auf den Woertern selbst — .section--dark h1 (base.css) wuerde das h1 sonst auf #fff setzen */
  text-shadow:0 10px 30px rgba(0,0,0,0.14);  /* 1:1 Bestand .hero-word */
}

/* Treppen-Versatz — Werte aus dem Bestand-.hero-word-Muster (erste drei Stufen) */
.b-hero__word.w1{ margin-left:2.72ch; }
.b-hero__word.w2{ margin-left:1.34ch; }
.b-hero__word.w3{ margin-left:0.16ch; }

/* Position via Dev-Panel (--b-*), Start 0 = unveraenderter Treppen-Fluss */
.b-hero__word.w1{ transform:translate(var(--b-w1-x), var(--b-w1-y)); }
.b-hero__word.w2{ transform:translate(var(--b-w2-x), var(--b-w2-y)); }
.b-hero__word.w3{ transform:translate(var(--b-w3-x), var(--b-w3-y)); }

/* ES: "problemas del casco" fuenf Buchstaben weiter links (Inhaber 02.08.).
   5 x ~37px mittlere Zeichenbreite @73px/-0.095em = 185px, additiv zum
   Panel-Wert (--b-w3-x bleibt Schieber-Wahrheit, :root unangetastet).
   1690er-Schranke Pflicht: im Band (641-1689) sind die --b-* genullt,
   die Regel fuehre sonst -185px pur; das Quer-Band bekommt sein eigenes
   margin-Pendant (responsive-pages.css). */
@media (min-width:1690px){
  :lang(es) .b-hero__word.w3{ transform:translate(calc(var(--b-w3-x) - 185px), var(--b-w3-y)); }
}

/* "Hufprobleme" ORANGE (Inhaber 2026-07-07) — Highlight-Wort auf dunklem Hero */
.b-hero__word.w1{ color:var(--orange); }

.b-hero__lead{
  margin:44px 0 0;
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.45;
  min-height:1.45em;              /* reserviert Zeilenraum des leeren Slots */
  color:rgba(255,255,255,0.82);   /* 1:1 Bestand .hero-subline */
  max-width:44ch;
  white-space:pre-line;           /* dreizeilige Inhaber-Setzung 26.07.: die \n aus
                                     content/book.js werden zu echten Umbruechen.
                                     pre-line (nicht pre-wrap) genuegt — im Satz stehen
                                     keine Mehrfach-Leerzeichen, die erhalten bleiben muessten. */
  transform:translate(var(--b-lead-x), var(--b-lead-y));  /* Position via --b-* */
}

.b-hero__actions{
  margin-top:46px;                /* 1:1 Bestand .hero-actions */
  display:flex;
  align-items:center;
  gap:16px;
  transform:translate(var(--b-cta-x), var(--b-cta-y));    /* Position via --b-* */
}

/* --- Cover — 1:1 Bestand .book-cover / .book-cover-placeholder --- */

.b-cover{
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(var(--b-cover-x), var(--b-cover-y));  /* Position via --b-* (Frame behaelt seine rotateY) */
}

/* Cover-Einbau 25.07. (Inhaber-Vorlage): aus dem gestrichelten Platzhalter ist ein
   echtes Cover geworden. Drei Aenderungen, alle als Folge des Bildes:
   - width 380 -> 361: das Cover-Verhaeltnis ist 1159:1733 (1:1.495), der Rahmen war
     1:1.421. Die HOEHE bleibt 540, weil sie die Hero-Hoehe bestimmt (gemessen: Grid
     540 = Cover 540, Copy nur 431) — so bleibt der abgenommene Desktop-Stand exakt,
     nur die beiden Cover-Kanten ruecken je 9,5px zur Mitte.
   - gestrichelter Platzhalter-Rand -> feine Haarlinie: ein Bauzaun um ein fertiges
     Cover waere falsch, ganz ohne Kante verliert es auf dunklem Grund den Halt.
   - position/overflow: Traeger fuer das absolut liegende Bild, Radius greift durch. */
.b-cover__frame{
  position:relative;
  width:361px;
  height:540px;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  box-shadow:
    12px 16px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04);
  transform:perspective(800px) rotateY(-4deg);
}

/* Bild-Slot (Muster .b-sample__stage img / .b-author__avatar img): liegt ueber den
   beiden Text-Slots, die dadurch unsichtbar, aber unveraendert im DOM bleiben. */
.b-cover__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* „Preview"-Band — 1:1 aus der .app (landing.css:915), nur die Groesse mitskaliert:
   dort sitzt es auf einem 280px-Cover mit 36px Schrift, hier auf 361px -> 46px
   (gleiches Verhaeltnis, damit beide Seiten identisch wirken).
   Rot #e04040 statt Orange ist Absicht (Inhaber-Regel: Orange nur fuer
   Highlight-Woerter und den aktiven Reiter). */
.b-cover__preview{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%) rotate(-24deg);
  font-family:var(--font-head);
  font-weight:700;
  font-size:46px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#e04040;
  opacity:0.92;
  pointer-events:none;
  white-space:nowrap;
}

.b-cover__title{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.4rem;               /* 1:1 Bestand .book-cover-title */
  color:rgba(255,255,255,0.60);
  text-align:center;
  padding:0 32px;
  line-height:1.4;
  min-height:1.4em;               /* reserviert Zeilenraum des leeren Slots */
}

.b-cover__sub{
  margin:0;
  font-size:0.88rem;              /* 1:1 Bestand .book-cover-sub */
  color:rgba(255,255,255,0.30);
  text-transform:uppercase;
  letter-spacing:0.08em;
  min-height:1em;                 /* reserviert Zeilenraum des leeren Slots */
}

/* =========================
   Kontextuelle Textlinks — 1:1 Muster method.css
   Designsprache Bestand: ruhiges Blau, Hover = orange-deep (erlaubter Akzent)
========================= */

.context-link{
  display:inline-flex;
  align-items:center;
  min-height:48px;                /* Touch-Target (UX §2) */
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.01em;
  color:var(--blue);
  transition:color 0.2s ease;
}

.context-link::after{
  content:"\2192";                /* → */
  margin-left:10px;
  transition:transform 0.2s ease;
}

.context-link:hover{ color:var(--orange-deep); }
.context-link:hover::after{ transform:translateX(4px); }

/* Variante auf DUNKLEM Grund — gedaempftes Weiss, Hover = orange (erlaubter Akzent) */
.context-link--dark{ color:rgba(255,255,255,0.84); }
.context-link--dark:hover{ color:var(--orange); }

/* =========================
   2 · PROLOG (creme) — Lese-Spalte
========================= */

.b-prolog{ padding:80px 0 96px; }   /* oben von 112 -> 80: Prolog hoehergezogen (Inhaber 2026-07-07) */

.b-prolog__col{
  max-width:68ch;                 /* editoriale Lese-Spalte */
  margin:0 auto;
}

.b-prolog__title{
  margin:0 0 28px;
  color:var(--blue-deep);
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.b-prolog__p{
  margin:0 0 1.1em;
  max-width:68ch;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:rgba(31,58,95,0.78);      /* 1:1 Bestand .proof-detail (WCAG AA geprüft) */
  min-height:1.6em;               /* reserviert Zeilenraum des leeren Slots */
}

.b-prolog__links{
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:36px;
}

/* =========================
   3 · INHALTSVERZEICHNIS (dunkel, glow-br)
========================= */

.b-toc{ padding:112px 0 96px; }

.b-toc__header{
  text-align:center;
  margin-bottom:64px;             /* Bestand-Muster .examples-header */
}

.b-toc__title{
  margin:0;
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.b-toc__list{
  max-width:1020px;
  margin:0 auto;
}

/* Kapitel-Zeile: Nummer + Titel + Kommentar, Haarlinie wie Bestand-FAQ */
.b-toc__row{
  display:grid;
  grid-template-columns:90px 480px 1fr;   /* Titel-Spalte 380->480: laengster Titel "Nicht Bildhauer, sondern Trainer" in EINER Zeile (Inhaber 2026-07-07) */
  gap:36px;
  align-items:start;
  padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.b-toc__num{
  font-family:var(--font-kicker);
  font-style:italic;
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.2;
  color:rgba(255,255,255,0.40);
}

.b-toc__chapter{
  margin:0;
  min-height:1.1em;               /* reserviert Zeilenraum des leeren Slots */
}

.b-toc__note{
  margin:0;
  font-size:1rem;
  line-height:1.56;
  color:rgba(255,255,255,0.58);   /* 1:1 Bestand .app-detail */
  min-height:1.56em;              /* reserviert Zeilenraum des leeren Slots */
}

/* =========================
   4 · LESEPROBE (creme)
========================= */

.b-sample{ padding:112px 0 96px; }

.b-sample__header{
  text-align:center;
  margin-bottom:56px;
}

.b-sample__title{
  margin:0;
  color:var(--blue-deep);
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.b-sample__figure{ margin:0; }

/* Breite Doppelseiten-Fläche (~2:1.3) — proof-stage-Rezept */
.b-sample__stage{
  position:relative;
  width:1100px;
  margin:0 auto;
  aspect-ratio:2 / 1.3;
  border-radius:32px;
  overflow:hidden;
  background:#dfe7ef;             /* 1:1 Bestand .proof-stage */
  box-shadow:var(--shadow);
  border:1px solid rgba(19,40,63,0.10);
  isolation:isolate;
}

/* mittige Haarlinie — deutet den Falz der Doppelseite an */
.b-sample__stage::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(19,40,63,0.10);
}

/* vorbereiteter Bild-Slot (Inhalts-Phase) */
.b-sample__stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.b-sample__caption{
  margin:18px auto 0;
  max-width:60ch;
  text-align:center;
  font-size:var(--t-caption);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(31,58,95,0.55);
  min-height:1em;                 /* reserviert Zeilenraum des leeren Slots */
}

/* Text-Leseprobe (Route B, Inhaber 2026-07-09) — 3 Passagen im Lese-Stil.
   Die Doppelseiten-Figur-Styles oben bleiben erhalten (spaeterer Bild-Swap). */
.b-sample__excerpts{
  max-width:760px;
  margin:0 auto;
}
.b-excerpt{
  padding:44px 0;
  border-top:1px solid rgba(19,40,63,0.12);
}
.b-excerpt:first-child{ padding-top:0; border-top:none; }
.b-excerpt:last-child{ padding-bottom:0; }
.b-excerpt__theme{
  margin:0 0 18px;
  font-family:var(--font-kicker);
  font-style:italic;
  font-weight:600;
  font-size:var(--t-kicker);
  color:var(--ink-soft);
}
.b-excerpt__quote{
  margin:0 0 16px;
  font-family:var(--font-kicker);
  font-style:italic;
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.25;
  color:var(--blue-deep);
}
.b-excerpt__quote::before{ content:"\201E"; }
.b-excerpt__quote::after{ content:"\201C"; }
.b-excerpt__text{
  margin:0;
  max-width:64ch;
  font-size:var(--t-lead);
  line-height:1.7;
  color:var(--ink);
}

/* =========================
   5 · APP-BENEFIT (dunkel, glow-bl)
========================= */

.b-app{ padding:112px 0 96px; }

.b-app__inner{ text-align:center; }

.b-app__title{
  margin:0 0 24px;
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

/* 3 Beleg-Karten — Tuer-Karten-Sprache (home-hub.css) auf dunklem Grund.
   Flaeche #1F3A5F (--blue) statt #13283F, sonst verschwindet die Karte im
   Section-Grund; dezenter Orange-Rand + Hover-Lift wie die Hub-Karten.
   Aussagen wortgleich aus KERNAUSSAGEN_5_fuer_com.md (Inhaber 2026-07-14). */
.b-app__cards{
  margin:48px 0 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:stretch;
  text-align:left;
}

.b-app__card{
  display:flex;
  flex-direction:column;
  background-color:#1F3A5F;                     /* --blue, heller als der Grund #13283F */
  border:1px solid rgba(227,122,45,0.30);       /* dezenter Orange-Rand (Tuer-Karten) */
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,0.32);
  padding:32px 30px 28px;
  transition:transform .28s ease, border-color .28s ease;
}

.b-app__card:hover{
  transform:translateY(-6px);
  border-color:rgba(227,122,45,0.78);
}

.b-app__card:active{ transform:translateY(-2px) scale(.985); }

.b-app__card-head{
  margin:0 0 16px;
  font-size:1.18rem;
  font-weight:600;
  line-height:1.28;
  color:rgba(255,255,255,0.95);
}

.b-app__card-text{
  margin:0;
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
}

/* Quelle unten fixiert (margin-top:auto) — Karten sind gleich hoch (stretch),
   Zitat sitzt bei allen dreien auf gleicher Grundlinie, mit feiner Trennlinie. */
.b-app__card-src{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.10);
  font-family:var(--font-kicker);
  font-style:italic;
  font-size:0.9rem;
  color:rgba(255,255,255,0.50);
}

.b-app__actions{
  margin-top:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

/* =========================
   6 · AUTHOR-MINI-BOX (creme) — kompakte Karte, KEIN Name (R1)
========================= */

.b-author{ padding:112px 0 96px; }

.b-author__card{
  width:820px;
  margin:0 auto;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:40px;
  align-items:start;
  background:var(--white);
  border:1px solid rgba(19,40,63,0.08);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  padding:40px 44px 44px;
}

/* kleiner Avatar-Kreis — Bildflächen-Rezept, rund */
.b-author__avatar{
  position:relative;
  width:120px;
  height:120px;
  border-radius:50%;
  background:#dfe7ef;             /* 1:1 Bestand .proof-stage */
  border:1px solid rgba(19,40,63,0.10);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  isolation:isolate;
}

/* vorbereiteter Bild-Slot (Inhalts-Phase) */
.b-author__avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Icon-Animation im Avatar-Kreis (Inhaber 28.07.): das Strahl-Icon (Bestand-SVG
   der /app-Unterseite, KEIN neues Brand-Asset) als CSS-Maske — nur die Fuellfarbe
   laeuft, in Inhaber-Reihenfolge Dunkelblau -> Blau -> Grau -> Weiss -> Orange
   (je ~2 s, weiche Blende, Schleife). Maske statt <img>/Video: der Kreis behaelt
   seine helle Flaeche #dfe7ef, darum bleibt auch Weiss sichtbar — keine weisse
   Video-Flaeche noetig. „Grau" = --ink-soft (das Grau der Markenpalette).
   Die 0.75-Opacity im SVG wirkt als Maske mit = bewusst softer Auftritt. */
.b-author__avatar::after{
  content:"";
  position:absolute;
  inset:15%;
  -webkit-mask:url('/assets/logo/hoofolution-icon-strahl-weiss-soft.svg') center/contain no-repeat;
  mask:url('/assets/logo/hoofolution-icon-strahl-weiss-soft.svg') center/contain no-repeat;
  background-color:var(--blue-deep);
  animation:bAuthorIcon 10s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .b-author__avatar::after{ animation:none; }   /* steht dann ruhig in Dunkelblau */
}
/* 5 Farben x 2 s: je ~1,4 s Stand + 0,6 s Blende zur naechsten */
@keyframes bAuthorIcon{
  0%, 14%  { background-color:var(--blue-deep); }
  20%, 34% { background-color:var(--blue); }
  40%, 54% { background-color:var(--ink-soft); }
  60%, 74% { background-color:var(--white); }
  80%, 94% { background-color:var(--orange); }
  100%     { background-color:var(--blue-deep); }
}

/* Karten-Ueberschrift (Inhaber 28.07.): „fett, passend zum Layout" — Versalien
   kommen aus dem Inhaber-Text selbst, kein text-transform. Danach „eine Zeile
   Abstand" zum Fliesstext. */
.b-author__title{
  margin:0 0 26px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.35;
  letter-spacing:0.02em;
  color:var(--blue-deep);
}

.b-author__p{
  margin:0 0 0.9em;
  max-width:56ch;
  font-size:0.98rem;              /* 1:1 Bestand .example-desc */
  line-height:1.6;
  color:rgba(14,14,14,0.58);
  min-height:1.6em;               /* reserviert Zeilenraum des leeren Slots */
}

/* p2-Slot wartet weiter auf Inhalt, soll aber keine Leerzeile mehr reservieren,
   seit p1 + Ueberschrift gefuellt sind (Inhaber-Runde 28.07.) */
.b-author__p:empty{ display:none; }

/* „Insider zwei Zeilen weiter runter, nicht auf der Kante kleben" (Inhaber 28.07.):
   10 -> 42px = zwei Textzeilen tiefer; zur Kante bleiben die 44px Karten-Polster. */
.b-author__links{ margin-top:42px; }

/* =========================
   7 · ABSCHLUSS-CTA (dunkel, glow-tr)
========================= */

.b-cta{ padding:112px 0 112px; }

.b-cta__title{
  margin:0 auto;
  max-width:22ch;
  text-align:center;
  font-size:var(--t-display);
  font-weight:760;
  letter-spacing:-0.03em;
  line-height:var(--lh-tight);
  min-height:1.08em;              /* reserviert Zeilenraum des leeren Slots */
}

.b-cta__actions{
  margin-top:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}