/* ============================================================
   BKS24 — Redesign-Komponenten-Stylesheet
   Quelle: design_handoff_bks/mockups/assets/brand.css (Handoff §10/2).
   Geladen NACH brand.css. Liefert die Sektions-/Komponenten-Styles
   (Hero, Stat-Strip, Cards, Barometer, CTA-Band, Tabs, Pricing, Tabelle,
   FAQ, Prose, Page-Hero, Hero-C) — NICHT die Marken-/Chrome-Teile.

   BEWUSST WEGGELASSEN (Bestand im Theme / würde kollidieren, README §10/2):
   · @font-face Helvetica  → Theme lädt die Fonts selbst (theme.json/brand.css)
   · globaler Reset *{} / html / body / img / a{}  → GeneratePress-Globals
   · .topbar* / .lang-*     → echte Top-Bar = <bks-header> Web-Component
   · .site-header/.primary-nav/.nav-caret  → GeneratePress-Header
   · .lockup*               → echtes Lockup = parts/logo-lockup.php (+ LOGO-LOCKUP-SPEC.md)
   · .site-footer/.footer-* → echter Footer = <bks-footer> Web-Component

   SCOPE: Alle Regeln unter `.bks-rd`, damit nichts auf die live laufende
   DE-Seite durchschlägt. Redesign-Seiten in EINEN Top-Container/Group mit der
   Zusatz-CSS-Klasse `bks-rd` bauen. Die :root-Tokens bleiben global (nur
   Custom-Property-Deklarationen, ohne Eigenwirkung).
   ============================================================ */

/* ── Weiche Seitenübergänge (View Transitions, Cross-Document) ──────────────
   Glättet den Wechsel DE↔EN (Karte/Menü/Hero) ohne Hard-Reload-Flash: der alte
   Subtext fadet weich aus, statt abrupt zu verschwinden. Der Header-Lockup behält
   seine Cursor-Animation — die läuft auf der Zielseite NACH dem Übergang (zeichnet
   den neuen Subtext). Browser ohne Support (Firefox) springen normal, kein Schaden. */
@view-transition { navigation: auto; }
/* reduced-motion: View-Transition-Pseudos animieren sonst weiter (sie liegen außerhalb
   des .bks-rd-Scopes und werden vom .bks-rd-reduced-motion-Block nicht erfasst). Global
   die VT-Animationen abschalten, ungescoped — sonst kein Opt-out für motion-sensible Nutzer. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
/* Die Hero-Karte zeichnet ihren ersten Frame synchron aus dem Daten-Cache (bks-hero-map.js)
   → beim Wechsel ist der Karten-Ausschnitt auf alter und neuer Seite identisch, die
   Überblendung also nahtlos; danach zoomt die Karte live in den neuen Ausschnitt. */

/* Auf Redesign-Seiten (.bks-rd) das alte Blau-Titel-Band ausblenden — die Redesign-
   .page-hero liefert Titel + Breadcrumb selbst (sonst doppelte Überschrift). Hohe
   Spezifität nötig, weil brand.css das Band per `.page .inside-article > .entry-header
   {display:flex !important}` (0,3,0) setzt. Beiträge behalten ihren Titel. */
body.page:has(.bks-rd) .inside-article > .entry-header,
body.page:has(.bks-rd) .gb-container-141fe6bb { display: none !important; }

/* Header-Inhalt (Lockup + Nav) bündig zur Body-Content-Spalte — gleicher Gutter wie .wrap. */
.inside-header { padding-left: var(--gutter, 40px); padding-right: var(--gutter, 40px); }

:root {
  /* ── Typo-Skala (Variante A, 2026-08-21) ──────────────────────────────
     Ersetzt 37 Einzelwerte durch 6 Inhaltsstufen + eine Unterseiten-Stufe.
     Regel: NEUE Regeln setzen font-size ausschliesslich ueber diese Tokens.
     Stand der Migration: Startseiten-Regeln umgestellt; die uebrigen
     Komponenten-Dateien folgen nach dem Go-Live (s. UMSETZUNGSPLAN A7). */
  --fs-1:  clamp(32px, 4.2vw, 42px);   /* Display: Hero-H1, Statistik-Zahlen */
  --fs-2:  clamp(26px, 2.9vw, 33px);   /* Abschnitts-H2 */
  --fs-2b: clamp(22px, 2.3vw, 26px);   /* nur Unterseiten: .prose h2, .cta-band--soft h2 */
  --fs-3:  clamp(19px, 1.8vw, 21px);   /* H3, Lead-Absaetze */
  --fs-4:  17px;                        /* Fliesstext, Buttons, Links */
  --fs-5:  14px;                        /* Meta, Labels, Tags, Datum */
  --fs-6:  12px;                        /* Kicker, Mikrolabels */

  /* Brand */
  --bks-blue: #006699;
  --bks-blue-700: #00557f;     /* hover */
  --bks-blue-800: #004566;     /* active / deep */
  --bks-blue-900: #0d2137;     /* footer / deepest */
  --bks-blue-050: #eaf2f7;     /* tint surface */
  --bks-blue-100: #d6e6ef;

  --ink: #231f20;              /* text black */
  --divider: #2a2a2a;          /* lockup rule */
  --orange: #e86a2a;           /* large-format only */
  --accent-text: #b8470f;      /* AA accent for text/links */

  /* Neutrals */
  --white: #ffffff;
  --page: #ffffff;
  --stage: #eef1f3;            /* neutral stage behind cards */
  --surface: #f6f8f9;
  --hairline: #e3e7ea;
  --hairline-2: #d4dade;
  --grey-700: #3b4650;
  --grey-600: #51606b;
  --grey-500: #6c7a85;

  /* Type */
  --sans: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Spacing */
  --wrap: 1200px;
  --gutter: 40px;

  /* Radii — restrained, institutional */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(14,32,48,.05), 0 1px 1px rgba(14,32,48,.04);
  --shadow-2: 0 6px 22px rgba(14,32,48,.09), 0 2px 6px rgba(14,32,48,.05);
  --shadow-3: 0 18px 50px rgba(14,32,48,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Layout ---------- */
.bks-rd .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.bks-rd .section { padding: 96px 0; }
.bks-rd .section--tight { padding: 64px 0; }
.bks-rd .section--stage { background: var(--stage); }
.bks-rd .section--blue { background: var(--bks-blue); color: #fff; }
.bks-rd .section--deep { background: var(--bks-blue-900); color: #fff; }

/* ---------- Typography ---------- */
.bks-rd .kicker {
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bks-blue);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.bks-rd .kicker::before { content: ''; width: 2px; height: 14px; background: currentColor; flex: none; }
.bks-rd .kicker--light { color: rgba(255,255,255,.72); }
.bks-rd .kicker--center { justify-content: center; }

/* Sektions-Header kompakt:
   - Legacy-Strich überm H2 entfernen (kommt aus brand.css .entry-content h2::before)
   - Kicker-Mark ist jetzt ein VERTIKALER Strich (oben)
   - Abstand Kicker → Überschrift praktisch null */
.bks-rd h2::before { content: none; }
.bks-rd .section-intro .kicker,
.bks-rd .eyebrow-head .kicker { margin-bottom: 2px; }
.bks-rd .section-intro h2 { margin-top: 0; }

.bks-rd h1, .bks-rd h2, .bks-rd h3, .bks-rd h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.012em; color: var(--bks-blue); text-wrap: balance; }
.bks-rd .section--blue h1, .bks-rd .section--blue h2, .bks-rd .section--blue h3,
.bks-rd .section--deep h1, .bks-rd .section--deep h2, .bks-rd .section--deep h3 { color: #fff; }

.bks-rd h1 { font-size: var(--fs-1); }   /* 2026-08-21: von clamp(34,4.6vw,56) auf die Skala gezogen — sonst 56px-H1 ueber 33px-H2 auf Unterseiten */
.bks-rd h2 { font-size: var(--fs-2); }
.bks-rd h3 { font-size: var(--fs-3); }
.bks-rd h4 { font-size: 19px; }

.bks-rd .display { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -.02em; }

.bks-rd p { text-wrap: pretty; }
.bks-rd .lead { font-size: var(--fs-3); line-height: 1.55; color: var(--grey-700); max-width: 64ch; }
.bks-rd .section--blue .lead, .bks-rd .section--deep .lead { color: rgba(255,255,255,.82); }
.bks-rd .muted { color: var(--grey-600); font-size: var(--fs-5); }
/* Basis-Fliesstext: GeneratePress liefert 18px aus dem Customizer (DB, nicht im Theme).
   Auf Redesign-Seiten auf die Skala ziehen, sonst bleibt 18px als eigene Stufe neben
   --fs-4 (17px) stehen. Komponenten-Regeln (.lead, .value p, .teaser p ...) haben
   hoehere Spezifitaet und gewinnen weiterhin. */
.bks-rd p, .bks-rd li { font-size: var(--fs-4); }
.bks-rd .measure { max-width: 68ch; }
.bks-rd .ink-soft { color: var(--grey-700); }

/* ---------- Buttons ---------- */
.bks-rd .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: var(--fs-4); font-weight: 600; letter-spacing: .005em;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.bks-rd .btn svg { width: 17px; height: 17px; }
.bks-rd .btn-primary { background: var(--bks-blue); color: #fff; border-color: var(--bks-blue); }
.bks-rd .btn-primary:hover { background: var(--bks-blue-700); border-color: var(--bks-blue-700); color: #fff; }
.bks-rd .btn-primary:active { background: var(--bks-blue-800); }
.bks-rd .btn-outline { background: transparent; color: var(--bks-blue); border-color: var(--bks-blue); }
.bks-rd .btn-outline:hover { background: var(--bks-blue); color: #fff; }
.bks-rd .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.bks-rd .btn-ghost:hover { border-color: var(--bks-blue); color: var(--bks-blue); }
.bks-rd .btn-on-blue { background: #fff; color: var(--bks-blue); border-color: #fff; }
.bks-rd .btn-on-blue:hover { background: var(--bks-blue-050); color: var(--bks-blue-800); border-color: var(--bks-blue-050); }
.bks-rd .btn-on-blue-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.bks-rd .btn-on-blue-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.bks-rd .btn-lg { padding: 16px 32px; font-size: var(--fs-4); }
.bks-rd .btn-sm { padding: 10px 18px; font-size: var(--fs-5); }
/* Akzent-CTA (Marken-Orange) — nur für die primäre Conversion-Aktion
   (Mitgliedschaft / Formular-Submit). #b8470f = AA-sicher mit weißer Schrift,
   funktioniert solide auf Weiß, Bühne und Blau-Bändern. */
/* Akzent-CTA: normal wie die primäre (blau), enthüllt das Marken-Orange erst im Hover
   — gezielter Signal-Effekt an den wichtigen Stellen, statt Dauer-Orange. */
.bks-rd .btn-accent { background: var(--bks-blue); color: #fff; border-color: var(--bks-blue); }
.bks-rd .btn-accent:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.bks-rd .btn-accent:active { background: #9a3c0d; }
.bks-rd .btn-accent:focus-visible { outline: 3px solid rgba(232,106,42,.55); outline-offset: 2px; }
.bks-rd .arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-5); color: var(--bks-blue);
}
.bks-rd .arrow-link svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.bks-rd .arrow-link:hover svg { transform: translateX(4px); }

/* ============================================================
   HERO (Variante A — Living network)
   ============================================================ */
.bks-rd .hero { position: relative; background: var(--bks-blue); overflow: hidden; }
.bks-rd .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bks-rd .hero::after { /* subtle vertical depth, CI-approved blue→deeper blue */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,52,80,.55) 0%, rgba(0,52,80,0) 52%);
  pointer-events: none;
}
.bks-rd .hero .wrap { position: relative; z-index: 2; }
/* min-height 744 (border-box, inkl. 144px Padding → Content-Bereich ≥ 600): die höhere der
   beiden Claim-Cards (EN-Content ≈ 600, DE ≈ 546) → Hero ist auf DE UND EN exakt gleich hoch.
   Sonst zieht die längere EN-Card den Hero höher → Karte projiziert anders + alles darunter
   um ~54px versetzt → beim Sprachwechsel überblenden versetzte Layouts (Flicker). Gleiche
   Höhe = deckungsgleiche View-Transition. Mobile setzt min-height:0 (s.u.). */
/* Karte OBEN verankern (nicht zentriert): DE- und EN-Karte sind unterschiedlich hoch
   (anderer Text) — bei zentrierter Ausrichtung läge ihr oberer Rand je Sprache woanders,
   sodass die Karte beim DE↔EN-Wechsel (View Transition) vertikal springt. Top-Anker hält
   beide auf gleicher Höhe → kein Sprung. */
.bks-rd .hero-grid { display: grid; grid-template-columns: minmax(0, 560px) 1fr; align-items: start; min-height: 744px; padding: 72px 0; }
.bks-rd .hero-card {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(2px);
  border-radius: var(--r-lg);
  padding: 48px 46px;
  box-shadow: var(--shadow-3);
}
.bks-rd .hero-card .kicker { color: var(--bks-blue); }
.bks-rd .hero-card h1 { color: var(--bks-blue); margin-bottom: 22px; }
/* Hero-Überschrift: war bis 2026-08-21 bewusst kleiner/dezenter (clamp(26px,3vw,38px),
   DE + EN, Wunsch). Dadurch war die H1 aber KLEINER als die Abschnitts-H2 (42px) —
   im Feedback-Call vom 2026-08-21 als Inkonsistenz aufgefallen. Jetzt --fs-1 (Cap 42px),
   die H2 gehen im Gegenzug auf --fs-2 (Cap 33px) zurück; die Hierarchie stimmt damit
   wieder, ohne dass der Hero laut wird. */
.bks-rd .hero-card h1 { font-size: var(--fs-1); }
.bks-rd .hero-card .lead { color: var(--grey-700); font-size: var(--fs-3); margin-bottom: 32px; }
.bks-rd .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bks-rd .hero-endorse { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: var(--fs-5); color: var(--grey-600); }
.bks-rd .hero-endorse strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   HERO (Variante C — Full-bleed statement)
   Aus mockups/hero-variations.html <style> (.vh/.vc*). Map als Textur.
   ============================================================ */
.bks-rd .vh { position: relative; overflow: hidden; }
.bks-rd .vc { background: var(--bks-blue-900); color: #fff; }
.bks-rd .vc canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.bks-rd .vc__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,33,55,.35) 0%, rgba(13,33,55,.78) 100%); }
.bks-rd .vc__inner { position: relative; z-index: 2; padding: 70px 56px 48px; min-height: 540px; display: flex; flex-direction: column; justify-content: center; }
.bks-rd .vc h1, .bks-rd .vc h2 { font-size: clamp(34px,4.4vw,58px); color: #fff; line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; }
.bks-rd .vc .lead { color: rgba(255,255,255,.82); margin: 22px 0 30px; max-width: 56ch; }
.bks-rd .vc__stats { position: relative; z-index: 2; display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.16); margin-top: 8px; }
.bks-rd .vc__stat { padding: 20px 30px; border-left: 1px solid rgba(255,255,255,.16); }
.bks-rd .vc__stat:first-child { padding-left: 0; border-left: 0; }
.bks-rd .vc__stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.bks-rd .vc__stat span { font-size: 13px; color: rgba(255,255,255,.66); }

/* ============================================================
   STATS STRIP
   ============================================================ */
.bks-rd .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bks-rd .stat {
  padding: 8px 28px; border-left: 1px solid var(--hairline);
}
.bks-rd .stat:first-child { border-left: 0; padding-left: 0; }
.bks-rd .stat__num { font-size: var(--fs-1); font-weight: 600; color: var(--bks-blue); line-height: 1; letter-spacing: -.02em; }
.bks-rd .stat__num .u { font-size: .5em; vertical-align: baseline; margin-left: 2px; }
.bks-rd .stat__label { margin-top: 12px; font-size: var(--fs-5); color: var(--grey-600); line-height: 1.45; }
.bks-rd .section--blue .stat { border-color: rgba(255,255,255,.2); }
.bks-rd .section--blue .stat__num { color: #fff; }
.bks-rd .section--blue .stat__label { color: rgba(255,255,255,.72); }

/* ============================================================
   CARDS
   ============================================================ */
.bks-rd .card {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.bks-rd .card:hover { border-color: var(--bks-blue); box-shadow: var(--shadow-2); }
.bks-rd a.card:hover { transform: translateY(-2px); }

.bks-rd .grid { display: grid; gap: 24px; }
.bks-rd .grid-2 { grid-template-columns: repeat(2, 1fr); }
.bks-rd .grid-3 { grid-template-columns: repeat(3, 1fr); }
.bks-rd .grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Value cards (Why the Alliance) */
.bks-rd .value {
  padding: 38px 34px;
}
.bks-rd .ico-badge {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--bks-blue-050); color: var(--bks-blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.bks-rd .ico-badge svg { width: 26px; height: 26px; }
.bks-rd .value__no { font-size: var(--fs-5); font-weight: 700; letter-spacing: .12em; color: var(--bks-blue); opacity: .55; }
.bks-rd .value__rule { width: 30px; height: 2px; background: var(--bks-blue); margin: 18px 0 22px; }
.bks-rd .value h3 { font-size: var(--fs-3); margin-bottom: 12px; }
.bks-rd .value p { font-size: var(--fs-4); color: var(--grey-700); line-height: 1.6; }

/* Article / teaser cards */
.bks-rd .teaser { display: flex; flex-direction: column; overflow: hidden; }
.bks-rd .teaser__media { aspect-ratio: 16/9; background: var(--bks-blue-050); position: relative; overflow: hidden; }
.bks-rd .teaser__media { background: var(--bks-blue-050); }
.bks-rd .teaser__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bks-rd .teaser__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.bks-rd .teaser__meta { font-size: var(--fs-6); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.bks-rd .tag { display: inline-block; font-size: var(--fs-6); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); }
.bks-rd .tag-blue { background: var(--bks-blue-050); color: var(--bks-blue); }
.bks-rd .tag-de { background: #f0eef0; color: var(--grey-700); }
.bks-rd .tag-accent { background: #fbeadf; color: var(--accent-text); }
/* Kategorie-Pille (event-tags) klebte direkt an der Überschrift (beide margin 0) → Luft drunter. */
.bks-rd .event-card .event-tags { margin-bottom: 12px; }
.bks-rd .teaser h3 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.bks-rd .teaser:hover h3 { color: var(--bks-blue); }
.bks-rd .teaser p { font-size: var(--fs-4); color: var(--grey-700); margin-bottom: 18px; }
.bks-rd .teaser .arrow-link { margin-top: auto; }

/* placeholder media */
.bks-rd .ph { position: relative; background: var(--bks-blue-050); display: flex; align-items: center; justify-content: center; color: var(--bks-blue); overflow: hidden; }
.bks-rd .ph::after {
  content: attr(data-ph); position: absolute; bottom: 10px; left: 12px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,102,153,.5); font-weight: 700;
}
.bks-rd .ph svg { width: 38px; height: 38px; opacity: .35; }
.bks-rd .ph-photo { background: repeating-linear-gradient(135deg, #e7edf1 0 12px, #eef2f5 12px 24px); }

/* ============================================================
   FEATURE / SPLIT
   ============================================================ */
.bks-rd .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bks-rd .split--wide-left { grid-template-columns: 1.1fr .9fr; }

/* Event feature */
.bks-rd .event-feature { display: grid; grid-template-columns: 1.05fr .95fr; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.bks-rd .event-feature__media { background: var(--bks-blue); min-height: 340px; position: relative; }
.bks-rd .event-feature__body { padding: 48px 46px; }
.bks-rd .event-feature__date { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-5); font-weight: 600; color: var(--accent-text); margin-bottom: 18px; }

/* ============================================================
   BAROMETER SNAPSHOT (CSS chart)
   ============================================================ */
.bks-rd .barometer { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-1); }
.bks-rd .barometer__info { padding: 48px 46px; }
.bks-rd .barometer__chart { background: var(--bks-blue-050); padding: 44px 42px; display: flex; flex-direction: column; }
.bks-rd .chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 200px; margin-top: auto; }
.bks-rd .chart-bar { flex: 1; background: linear-gradient(180deg, var(--bks-blue) 0%, #1a82b8 100%); border-radius: 3px 3px 0 0; position: relative; min-height: 6px; }
.bks-rd .chart-bar.is-peak { background: linear-gradient(180deg, var(--orange) 0%, #f08a52 100%); }
.bks-rd .chart-bar span { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-size: var(--fs-6); font-weight: 600; color: var(--grey-600); }
.bks-rd .chart-axis { display: flex; gap: 14px; margin-top: 10px; }
.bks-rd .chart-axis span { flex: 1; text-align: center; font-size: var(--fs-6); color: var(--grey-500); }

/* ============================================================
   CTA BAND
   ============================================================ */
.bks-rd .cta-band { background: var(--bks-blue); color: #fff; }
.bks-rd .cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 64px; padding-bottom: 64px; flex-wrap: wrap; }
.bks-rd .cta-band h2 { color: #fff; margin-bottom: 10px; }
.bks-rd .cta-band p { color: rgba(255,255,255,.8); font-size: var(--fs-4); max-width: 52ch; }
.bks-rd .cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Subtile CTA-Variante (z. B. DE-Home ganz unten — dezent statt lautes Blau-Band):
   neutrale Bühne, kompakter, blaue Überschrift, normale Buttons. */
.bks-rd .cta-band.cta-band--soft { background: var(--stage); }
.bks-rd .cta-band.cta-band--soft .wrap { padding-top: 44px; padding-bottom: 44px; }
.bks-rd .cta-band.cta-band--soft h2 { color: var(--bks-blue); font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px; }
.bks-rd .cta-band.cta-band--soft p { color: var(--grey-700); }

/* ============================================================
   INNER PAGE BAND HEADER
   ============================================================ */
.bks-rd .page-hero { background: var(--bks-blue); color: #fff; position: relative; overflow: hidden; }
.bks-rd .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, var(--bks-blue) 0%, var(--bks-blue-800) 100%); }
.bks-rd .page-hero .wrap { position: relative; padding-top: 72px; padding-bottom: 72px; }
.bks-rd .page-hero .crumb { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.bks-rd .page-hero h1 { color: #fff; max-width: 18ch; }
.bks-rd .page-hero .lead { color: rgba(255,255,255,.82); margin-top: 20px; max-width: 60ch; }

/* ============================================================
   PROSE (content pages)
   ============================================================ */
.bks-rd .prose { max-width: 720px; }
.bks-rd .prose > * + * { margin-top: 22px; }
/* Fließtext-Subheads zurückhaltend halten (nicht Hero-Skala) — sonst „Wand" aus
   Riesen-Überschriften statt scanbarer Prosa. Sektionstitel (.section-intro h2) bleiben groß. */
.bks-rd .prose h2 { font-size: clamp(21px, 2.1vw, 25px); line-height: 1.25; color: var(--ink); margin-top: 44px; }
.bks-rd .prose h2:first-child { margin-top: 0; }
.bks-rd .prose h3 { font-size: 20px; color: var(--ink); margin-top: 32px; }
.bks-rd .prose p { font-size: 17px; color: var(--grey-700); line-height: 1.65; }
.bks-rd .prose ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bks-rd .prose ul li { position: relative; padding-left: 26px; color: var(--grey-700); }
.bks-rd .prose ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--bks-blue); }
.bks-rd .prose strong { color: var(--ink); font-weight: 600; }

/* Fact cards */
.bks-rd .fact { padding: 32px 30px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.bks-rd .fact__k { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bks-blue); margin-bottom: 14px; }
.bks-rd .fact p { font-size: 15.5px; color: var(--grey-700); line-height: 1.55; }

/* Timeline */
/* Die Timeline-Card braucht Innenabstand (im Mockup inline padding:36px 34px) —
   beim Block-Umbau verloren gegangen, sonst kleben Kicker + Items am Rand. */
.bks-rd .card:has(.timeline) { padding: 36px 34px; }
.bks-rd .timeline { display: flex; flex-direction: column; gap: 0; }
.bks-rd .tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--hairline); }
.bks-rd .tl-item:last-child { border-bottom: 1px solid var(--hairline); }
.bks-rd .tl-year { font-size: 22px; font-weight: 600; color: var(--bks-blue); letter-spacing: -.01em; }
.bks-rd .tl-body h4 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.bks-rd .tl-body p { font-size: 15px; color: var(--grey-600); }

/* ============================================================
   MEMBERSHIP — pricing, tabs, table, FAQ, steps
   ============================================================ */
.bks-rd .price-card { padding: 42px 40px; display: flex; flex-direction: column; }
.bks-rd .price-card.is-featured { border-color: var(--bks-blue); border-width: 1.5px; box-shadow: var(--shadow-2); position: relative; }
.bks-rd .price-card__flag { position: absolute; top: 0; right: 28px; transform: translateY(-50%); background: var(--bks-blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-sm); }
.bks-rd .price-card h3 { font-size: 24px; margin-bottom: 8px; }
.bks-rd .price-card .who { font-size: 15px; color: var(--grey-600); margin-bottom: 26px; min-height: 44px; }
.bks-rd .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.bks-rd .price__amt { font-size: 44px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.bks-rd .price__per { font-size: 16px; color: var(--grey-600); }
.bks-rd .price__note { font-size: 13px; color: var(--grey-500); margin-bottom: 28px; }
.bks-rd .price-card ul { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; }
.bks-rd .price-card ul li { position: relative; padding-left: 28px; font-size: 15px; color: var(--grey-700); }
.bks-rd .price-card ul li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--bks-blue); border-bottom: 2px solid var(--bks-blue); transform: rotate(-45deg); }
.bks-rd .price-card .btn { margin-top: auto; justify-content: center; }

/* Segment tabs */
.bks-rd .tabs { }
.bks-rd .tabs__list { display: flex; gap: 6px; border-bottom: 1px solid var(--hairline); margin-bottom: 40px; flex-wrap: wrap; }
.bks-rd .tab-btn {
  appearance: none; background: none; border: none; font-family: var(--sans);
  font-size: 16px; font-weight: 600; color: var(--grey-600); cursor: pointer;
  padding: 14px 22px; position: relative; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.bks-rd .tab-btn:hover { color: var(--bks-blue); }
.bks-rd .tab-btn[aria-selected="true"] { color: var(--bks-blue); }
.bks-rd .tab-btn[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bks-blue); border-radius: 2px; }
.bks-rd .tab-panel { display: none; }
.bks-rd .tab-panel.is-active { display: block; animation: bksFade .3s var(--ease); }
@keyframes bksFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Comparison table */
.bks-rd .cmp { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.bks-rd .cmp th, .bks-rd .cmp td { padding: 16px 22px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--hairline); }
.bks-rd .cmp thead th { background: var(--bks-blue); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.bks-rd .cmp thead th:not(:first-child) { text-align: center; width: 22%; }
.bks-rd .cmp tbody td:not(:first-child) { text-align: center; }
.bks-rd .cmp tbody tr:nth-child(even) { background: var(--surface); }
.bks-rd .cmp tbody td:first-child { font-weight: 500; color: var(--ink); }
.bks-rd .cmp tbody td { color: var(--grey-700); }
.bks-rd .cmp tbody tr:last-child td { border-bottom: 0; }
.bks-rd .chk { color: var(--bks-blue); font-weight: 700; }
.bks-rd .dash { color: var(--hairline-2); }

/* Steps */
.bks-rd .steps { counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.bks-rd .step { position: relative; padding-top: 56px; }
.bks-rd .step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--bks-blue); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.bks-rd .step h4 { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.bks-rd .step p { font-size: 14px; color: var(--grey-600); }
.bks-rd .step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 52px; right: -10px; height: 1px; background: var(--hairline-2); }

/* Logo wall */
.bks-rd .logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bks-rd .logo-cell { aspect-ratio: 5/3; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; padding: 18px; }
.bks-rd .logo-cell .bar { width: 70%; height: 14px; background: var(--hairline-2); border-radius: 3px; }

/* FAQ */
.bks-rd .faq { border-top: 1px solid var(--hairline); }
.bks-rd .faq details { border-bottom: 1px solid var(--hairline); }
.bks-rd .faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 18px; font-weight: 600; color: var(--ink); }
.bks-rd .faq summary::-webkit-details-marker { display: none; }
.bks-rd .faq summary .ic { flex: none; width: 22px; height: 22px; position: relative; }
.bks-rd .faq summary .ic::before, .bks-rd .faq summary .ic::after { content: ''; position: absolute; background: var(--bks-blue); transition: transform .2s var(--ease); }
.bks-rd .faq summary .ic::before { top: 10px; left: 0; right: 0; height: 2px; }
.bks-rd .faq summary .ic::after { left: 10px; top: 0; bottom: 0; width: 2px; }
.bks-rd .faq details[open] summary .ic::after { transform: scaleY(0); }
.bks-rd .faq details[open] summary { color: var(--bks-blue); }
.bks-rd .faq .faq-a { padding: 0 0 26px; color: var(--grey-700); font-size: 16px; line-height: 1.65; max-width: 72ch; }

/* ---------- Helpers ---------- */
.bks-rd .center { text-align: center; }
.bks-rd .mt-0 { margin-top: 0; } .bks-rd .mt-1 { margin-top: 14px; } .bks-rd .mt-2 { margin-top: 26px; } .bks-rd .mt-3 { margin-top: 40px; } .bks-rd .mt-4 { margin-top: 64px; }
.bks-rd .eyebrow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 48px; flex-wrap: wrap; }
.bks-rd .eyebrow-head .lead { margin-top: 10px; }
.bks-rd .section-intro { max-width: 60ch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .bks-rd .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .bks-rd .hero-card { max-width: 600px; }
  .bks-rd .split, .bks-rd .event-feature, .bks-rd .barometer { grid-template-columns: 1fr; }
  .bks-rd .event-feature__media, .bks-rd .barometer__chart { min-height: 240px; }
  .bks-rd .steps { grid-template-columns: repeat(2, 1fr); }
  .bks-rd .step:not(:last-child)::after { display: none; }
  .bks-rd .logo-wall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .bks-rd { --gutter: 22px; }
  .bks-rd .section { padding: 64px 0; }
  .bks-rd .grid-3, .bks-rd .grid-4 { grid-template-columns: 1fr; }
  .bks-rd .stat-strip { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .bks-rd .stat { border-left: 0; padding: 0 14px; }
  .bks-rd .stat:nth-child(odd) { padding-left: 0; }
  .bks-rd .cmp { display: block; overflow-x: auto; white-space: nowrap; }
  .bks-rd .vc__stats { flex-wrap: wrap; }
  .bks-rd .vc__stat { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .bks-rd .grid-2 { grid-template-columns: 1fr; }
  .bks-rd .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .bks-rd .hero-card { padding: 34px 26px; }
  /* 2026-08-22 (JD: „Text ist abgeschnitten"): Die Hero-Karte war auf 390px 343px breit,
     ihre Grid-Spur nur 306px — sie ragte 37px nach rechts heraus, der Text lief aus dem
     Bild. Ursache ist NICHT die Kartenbreite, sondern `min-width:auto` auf dem Grid-Item:
     Die CTA-Beschriftung „News & Pressemitteilungen" steht per `.btn { white-space: nowrap }`
     (Zeile 174) auf einer Zeile und blaeht die min-content-Breite auf 291px + 52px Padding.
     Deshalb beides: Spur darf schrumpfen UND der CTA-Text darf im Hero umbrechen. */
  .bks-rd .hero-grid > * { min-width: 0; }
  .bks-rd .hero .hero-actions .btn,
  .bks-rd .hero .hero-actions .wp-block-button__link { white-space: normal; }
  /* H1 eine Stufe kleiner als --fs-1 (dessen Boden 32px ist, weil 4.2vw bei 390px nur
     16px waeren). Bewusst NUR die Hero-H1 — --fs-1 steuert auch die Statistik-Zahlen. */
  .bks-rd .hero-card h1 { font-size: clamp(24px, 7vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .bks-rd *, .bks-rd *::before, .bks-rd *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Reveal on scroll */
.bks-rd .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.bks-rd .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bks-rd .reveal { opacity: 1; transform: none; } }

/* ============================================================
   BLOCK-EDITOR-BRÜCKEN (Core-Blocks ↔ Redesign-Klassen)
   Damit Inhalte editierbare Core-Blocks bleiben statt Custom-HTML.
   ============================================================ */

/* Arrow-Link als echter Block: Link erbt die .arrow-link-Optik, Pfeil per CSS
   (kein Inline-SVG → im Editor korrekt, kein „Riesenpfeil"). Varianten MIT eigenem
   <svg> bekommen via :not(:has(svg)) keinen Doppelpfeil. */
.bks-rd .arrow-link a { color: inherit; font-weight: inherit; text-decoration: none; }
.bks-rd .arrow-link:not(:has(svg))::after { content: "\2192"; margin-left: 8px; display: inline-block; transition: transform .18s var(--ease); }
.bks-rd .arrow-link:not(:has(svg)):hover::after { transform: translateX(4px); }

/* Button-Brücke: Core wp:button trägt die .btn*-Klassen am Wrapper; die Optik muss
   auf den inneren Link (.wp-block-button__link). So sind CTAs editierbare Button-Blöcke.
   WICHTIG: Der Wrapper darf die .btn-Basisoptik NICHT selbst tragen (sonst doppelte
   Box + Padding → Buttons zu breit, brechen um). Wrapper neutralisieren, nur Hook. */
.bks-rd .wp-block-button.btn {
  display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
}
.bks-rd .wp-block-button.btn > .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans);
  font-size: var(--fs-4); font-weight: 600; letter-spacing: .005em; line-height: 1;
  padding: 14px 26px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.bks-rd .wp-block-button.btn-lg  > .wp-block-button__link { padding: 16px 32px; font-size: var(--fs-4); }
.bks-rd .wp-block-button.btn-sm  > .wp-block-button__link { padding: 10px 18px; font-size: var(--fs-5); }
.bks-rd .wp-block-button.btn-primary > .wp-block-button__link { background: var(--bks-blue); color: #fff; border-color: var(--bks-blue); }
.bks-rd .wp-block-button.btn-primary > .wp-block-button__link:hover { background: var(--bks-blue-700); border-color: var(--bks-blue-700); color: #fff; }
/* Akzent-CTA als Gutenberg-Button (innerer Link): normal wie primär (blau), Marken-Orange
   erst im Hover. #b8470f = AA-sicher mit weißer Schrift. */
.bks-rd .wp-block-button.btn-accent > .wp-block-button__link { background: var(--bks-blue); color: #fff; border-color: var(--bks-blue); }
.bks-rd .wp-block-button.btn-accent > .wp-block-button__link:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.bks-rd .wp-block-button.btn-accent > .wp-block-button__link:active { background: #9a3c0d; }
.bks-rd .wp-block-button.btn-outline > .wp-block-button__link { background: transparent; color: var(--bks-blue); border-color: var(--bks-blue); }
.bks-rd .wp-block-button.btn-outline > .wp-block-button__link:hover { background: var(--bks-blue); color: #fff; }
.bks-rd .wp-block-button.btn-ghost > .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.bks-rd .wp-block-button.btn-ghost > .wp-block-button__link:hover { border-color: var(--bks-blue); color: var(--bks-blue); }
.bks-rd .wp-block-button.btn-on-blue > .wp-block-button__link { background: #fff; color: var(--bks-blue); border-color: #fff; }
.bks-rd .wp-block-button.btn-on-blue:hover > .wp-block-button__link { background: var(--bks-blue-050); color: var(--bks-blue-800); border-color: var(--bks-blue-050); }
.bks-rd .wp-block-button.btn-on-blue-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.bks-rd .wp-block-button.btn-on-blue-outline:hover > .wp-block-button__link { background: rgba(255,255,255,.12); border-color: #fff; }
/* Buttons-Wrapper (wp:buttons) als Flex-Reihe wie .hero-actions/.cta-band__actions */
.bks-rd .wp-block-buttons.hero-actions, .bks-rd .wp-block-buttons.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Vorwärts-Pfeil nur auf primären CTAs (Mockup-Parität), via CSS statt Inline-SVG.
   Outline/Ghost/On-Blue bleiben pfeillos — wie im Mockup. */
.bks-rd .wp-block-button.btn-primary > .wp-block-button__link::after,
.bks-rd a.btn-primary:not(.wp-block-button)::after { content: "\2192"; font-weight: 400; }