/* ============================================================
   RANDORI-PRO · Kickbox-Fitness (Erwachsene, High End)
   Additiv zu tokens.css + kickboxen.css + kickboxen-v3.css.
   Template C „Lifestyle-Einstieg" + Stimmung 2 „Warm & Kraftvoll"
   (hell-dominant, drei dunkle Anker). Reine Auspower-Optik —
   kein Kontakt, kein Gegner, kein Wettkampf.

   Diese Datei trägt NUR die kbf-spezifischen Ergänzungen:
   · „Was du davon hast"-Liste (kbf-gains)
   · GENAU EIN Signatur-Element: das Energie-/Aktivierungs-Visual
     „Was eine Stunde mit dir macht" (kbf-energy).
   Alle übrigen Sektionen nutzen die bestehenden kb-*/b-*-Klassen.
   Aktiv ausschließlich unter body.bv3.kbf.
   ============================================================ */

/* ── Phasen-Lede in Sektion 4 ──────────────────────────────── */
.bv3.kbf .kbf-flow__lede { font-size: 18px; line-height: 1.7; color: var(--kb-ink); margin: 0; max-width: 64ch; }
.bv3.kbf .kbf-flow__lede strong { color: var(--kb-rot-anker); font-weight: 700; }

/* ── „Was du davon hast" · helle Karten, kompakt ───────────── */
.bv3.kbf .kbf-gains { margin-top: clamp(48px, 5vw, 72px); }
.bv3.kbf .kbf-gains__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; color: var(--kb-rot-anker); margin: 0 0 24px; }
.bv3.kbf .kbf-gains__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bv3.kbf .kbf-gain { background: #fff; border: 1px solid var(--kb-line); border-radius: 22px; padding: clamp(24px, 2.4vw, 32px); transition: border-color 280ms, transform 280ms var(--kb-ease), box-shadow 280ms; }
.bv3.kbf .kbf-gain:hover { border-color: rgba(220,13,29,0.5); transform: translateY(-4px); box-shadow: 0 28px 56px -38px rgba(26,20,20,0.32); }
.bv3.kbf .kbf-gain__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kb-rot-akzent); display: flex; align-items: center; gap: 11px; margin: 0 0 14px; }
.bv3.kbf .kbf-gain__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kb-rot-akzent); flex-shrink: 0; }
.bv3.kbf .kbf-gain__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.18; letter-spacing: -0.015em; color: var(--kb-rot-anker); margin: 0 0 8px; }
.bv3.kbf .kbf-gain__p { font-size: 15.5px; line-height: 1.6; color: var(--kb-ink); margin: 0; }
@media (max-width: 560px){ .bv3.kbf .kbf-gains__grid{ grid-template-columns: 1fr; } }

/* ── Rote Buttons · Schrift konsequent weiß (alle Zustände) ── */
.bv3.kbf .b-btn,
.bv3.kbf .b-btn:link,
.bv3.kbf .b-btn:visited,
.bv3.kbf .b-btn:hover,
.bv3.kbf .b-btn:focus,
.bv3.kbf .b-btn:active,
.bv3.kbf .b-nav-cta,
.bv3.kbf .b-nav-cta:link,
.bv3.kbf .b-nav-cta:visited,
.bv3.kbf .b-nav-cta:hover,
.bv3.kbf .b-nav-cta:focus,
.bv3.kbf .b-header.is-scrolled .b-nav .b-nav-cta,
.bv3.kbf .sticky-cta,
.bv3.kbf .sticky-cta:link,
.bv3.kbf .sticky-cta:visited,
.bv3.kbf .sticky-cta:hover,
.bv3.kbf .sticky-cta:focus { color: #fff; }

/* ── Ehrliche Einordnung ───────────────────────────────────── */
.bv3.kbf .kbf-honest { margin: clamp(40px, 4vw, 56px) 0 0; padding: clamp(26px, 3vw, 36px) clamp(28px, 3vw, 40px); background: #f4ece0; border: 1px solid var(--kb-line); border-radius: 22px; }
.bv3.kbf .kbf-honest p { font-size: 16.5px; line-height: 1.68; color: var(--kb-body); margin: 0; max-width: 86ch; }
.bv3.kbf .kbf-honest strong { color: var(--kb-rot-anker); font-weight: 700; }
.bv3.kbf .kbf-honest a { color: var(--kb-rot-anker); border-bottom: 1px solid rgba(109,23,35,0.4); font-weight: 700; transition: border-color 200ms; }
.bv3.kbf .kbf-honest a:hover { border-color: var(--kb-rot-anker); }

/* ============================================================
   SIGNATUR · „WAS EINE STUNDE MIT DIR MACHT"
   Ganzkörper-Aktivierungs- & Energie-Visual. Dunkler Anker im
   hellen Abschnitt (wie ein Energie-Block). Vier Zonen-Meter
   füllen sich gestaffelt, daneben der Kalorien-Wert mit Puls.
   KEIN Regler, KEINE Knotenkette.
   ============================================================ */
.bv3.kbf .kbf-energy { margin-top: clamp(88px, 10vw, 140px); background: var(--kb-dark); color: #fff; border-radius: 28px; padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 72px) clamp(40px, 5vw, 64px); position: relative; overflow: hidden; box-shadow: 0 50px 110px -56px rgba(26,20,20,0.6); }
.bv3.kbf .kbf-energy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 56% 90% at 88% -4%, rgba(220,13,29,0.30), transparent 58%),
  radial-gradient(ellipse 60% 80% at 6% 104%, rgba(240,194,77,0.10), transparent 62%); }
.bv3.kbf .kbf-energy__inner { position: relative; z-index: 1; }
.bv3.kbf .kbf-energy__intro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kb-rot-akzent); margin: 0 0 14px; display: flex; align-items: center; gap: 14px; }
.bv3.kbf .kbf-energy__intro::before { content: ""; width: 40px; height: 1px; background: var(--kb-rot-akzent); flex-shrink: 0; }
.bv3.kbf .kbf-energy__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; max-width: 20ch; text-wrap: balance; }
.bv3.kbf .kbf-energy__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.bv3.kbf .kbf-energy__sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 clamp(40px, 5vw, 60px); max-width: 64ch; }

.bv3.kbf .kbf-energy__grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
@media (max-width: 880px){ .bv3.kbf .kbf-energy__grid{ grid-template-columns: 1fr; gap: 40px; } }

/* Zonen-Meter */
.bv3.kbf .kbf-zones { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.bv3.kbf .kbf-zone { }
.bv3.kbf .kbf-zone__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.bv3.kbf .kbf-zone__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -0.015em; color: #fff; }
.bv3.kbf .kbf-zone__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-beige); white-space: nowrap; }
.bv3.kbf .kbf-zone__meter { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.bv3.kbf .kbf-zone__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 70%); border-radius: 999px; background: linear-gradient(90deg, #f0c24d, var(--kb-rot-akzent)); box-shadow: 0 0 22px -2px rgba(220,13,29,0.55); }
.bv3.kbf .kbf-zone__p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 11px 0 0; max-width: 52ch; }

/* Kalorien-Panel */
.bv3.kbf .kbf-kcal { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(28px, 3vw, 40px); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.13); border-radius: 22px; }
.bv3.kbf .kbf-kcal__pulse { display: flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.bv3.kbf .kbf-kcal__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--kb-rot-akzent); box-shadow: 0 0 0 0 rgba(220,13,29,0.5); flex-shrink: 0; }
.bv3.kbf .kbf-kcal__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.92; white-space: nowrap; letter-spacing: -0.035em; color: var(--rp-beige); font-variant-numeric: tabular-nums; }
.bv3.kbf .kbf-kcal__num .dash { color: rgba(255,255,255,0.35); margin: 0 0.06em; }
.bv3.kbf .kbf-kcal__unit { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.66); margin-top: 6px; }
.bv3.kbf .kbf-kcal__after { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.bv3.kbf .kbf-kcal__after strong { color: #fff; font-weight: 700; }

/* Ruhezustand (kein JS / reduced motion): alles sichtbar, Fills auf --fill */
@media (prefers-reduced-motion: no-preference) {
  /* Vor dem Reveal: Meter leer, Puls ruht */
  .bv3.kbf.js-motion .kbf-energy:not(.is-lit) .kbf-zone__fill { width: 0; }
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-zone__fill { animation: kbf-fill 1100ms var(--kb-ease-calm, cubic-bezier(0.22,0.61,0.36,1)) backwards; width: var(--fill, 70%); }
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-zone:nth-child(1) .kbf-zone__fill { animation-delay: 120ms; }
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-zone:nth-child(2) .kbf-zone__fill { animation-delay: 320ms; }
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-zone:nth-child(3) .kbf-zone__fill { animation-delay: 520ms; }
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-zone:nth-child(4) .kbf-zone__fill { animation-delay: 720ms; }
  @keyframes kbf-fill { from { width: 0; } }

  /* Puls-Punkt schlägt ruhig weiter, sobald aktiv */
  .bv3.kbf.js-motion .kbf-energy.is-lit .kbf-kcal__dot { animation: kbf-pulse 1500ms ease-out infinite; }
  @keyframes kbf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,13,29,0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(220,13,29,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,13,29,0); }
  }
}

/* ============================================================
   REVIEW-UMSETZUNG 07/2026
   ============================================================ */

/* Ablauf · Phasen-Karten links, Bild-Card „Pratzenrunde" rechts */
.bv3.kbf .kbf-flow { display: grid; grid-template-columns: 1fr 0.78fr; gap: 18px; align-items: stretch; margin-top: clamp(40px, 4vw, 56px); }
.bv3.kbf .kbf-flow .kb-points-grid { grid-template-columns: 1fr; margin-top: 0; }
.bv3.kbf .kbf-flow__media { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--kb-dark); box-shadow: 0 40px 90px -50px rgba(26,20,20,0.4); }
.bv3.kbf .kbf-flow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.bv3.kbf .kbf-flow__tag { position: absolute; left: 16px; bottom: 16px; z-index: 1; margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #4a3a28; background: rgba(250,246,238,0.85); border: 1px solid rgba(109,23,35,0.22); padding: 8px 13px; border-radius: 999px; }
@media (max-width: 940px){
  .bv3.kbf .kbf-flow { grid-template-columns: 1fr; }
  .bv3.kbf .kbf-flow__media { order: -1; aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: no-preference){
  .bv3.kbf.js-motion .kbf-flow__media img { transform: scale(1.06); transition: transform 1400ms var(--kb-ease-calm); }
  .bv3.kbf.js-motion .kbf-flow__media.is-seen img { transform: none; }
}

/* „Für wen" · Abgrenzungs-Karte vollbreit (löst hängende 5. Karte) */
.bv3.kbf .kb-fit__grid .kb-fit__card--no { grid-column: 1 / -1; }
/* 5 Karten: Desktop 2 + 3 statt 2 + 2 + 1, Abgrenzungs-Box bleibt vollbreit */
@media (min-width: 821px){
  .bv3.kbf .kb-fit__grid { grid-template-columns: repeat(6, 1fr); }
  .bv3.kbf .kb-fit__grid .kb-fit__card { grid-column: span 2; }
  .bv3.kbf .kb-fit__grid .kb-fit__card:nth-child(-n+2) { grid-column: span 3; }
  .bv3.kbf .kb-fit__grid .kb-fit__card--no { grid-column: 1 / -1; }
}

/* Sektions-CTA nach dem Energie-Panel */
.bv3.kbf .kbf-midcta { margin-top: clamp(48px, 5vw, 72px); text-align: center; }
.bv3.kbf .kbf-midcta__micro { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7e66; }

/* „Was ist Kickbox-Fitness" · Herkunft mobil einklappbar */
.bv3.kbf .kbf-more-btn { display: none; }
@media (max-width: 720px){
  .bv3.kbf .kb-def__body .kbf-more { display: none; }
  .bv3.kbf .kb-def__body.is-expanded .kbf-more { display: block; }
  .bv3.kbf .kbf-more-btn { display: inline-flex; background: none; border: 0; padding: 0 0 2px; margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--rp-beige); border-bottom: 1px solid rgba(212,201,181,0.45); cursor: pointer; min-height: 44px; align-items: center; }
}

/* Standort-Karten · mit Foto; mobil 2-spaltig bis 420px */
@media (max-width: 560px){
  .bv3.kbf .kb-loc__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bv3.kbf .kb-loc-card { min-height: 0; }
  .bv3.kbf .kb-loc-card__body { padding: 18px 18px 16px; }
  .bv3.kbf .kb-loc-card__name { font-size: 20px; }
  .bv3.kbf .kb-loc-card__arrow { width: 38px; height: 38px; }
}
@media (max-width: 420px){
  .bv3.kbf .kb-loc__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLL-POLITUR 07/2026 · adaptiert aus dem Scroll-Lab
   · Headlines steigen Wort für Wort (masked rise)
   · Phasen-Rail: roter Faden füllt sich beim Scrollen (Lab 11)
   · Sticky-Bild im Ablauf (Lab 16, Desktop)
   · Kennzahlen schlagen ein wie Treffer (Lab 06)
   · Beat-Band: Velocity-Marquee vor dem finalen CTA (Lab 03)
   · Hero weicht beim Scrollen zurück (JS setzt Inline-Styles)
   Grundzustand ohne JS / bei Reduced Motion: alles statisch
   sichtbar, Rail voll gefüllt, Band steht.
   ============================================================ */

/* Nur für Screenreader (Beat-Band als Satz) */
.bv3.kbf .kbf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Headlines · Wort-für-Wort ─────────────────────────────── */
.bv3.kbf .kbf-wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.13em; margin-bottom: -0.13em; }
@media (prefers-reduced-motion: no-preference){
  .bv3.kbf.js-motion .kbf-split .kbf-w { display: inline-block; transform: translateY(115%); transition: transform 720ms var(--kb-ease-calm); transition-delay: calc(var(--wd, 0) * 65ms); }
  .bv3.kbf.js-motion .kbf-split.is-in .kbf-w { transform: none; }
  .bv3.kbf.js-motion .kb-hero__inner { will-change: transform, opacity; }
}

/* ── Phasen-Rail · roter Faden neben den vier Phasen ───────── */
.bv3.kbf .kbf-flow .kb-points-grid { position: relative; padding-left: clamp(30px, 3.4vw, 48px); --railp: 0; }
.bv3.kbf .kbf-flow .kb-points-grid::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 3px; border-radius: 999px; background: rgba(109,23,35,0.14); }
.bv3.kbf .kbf-flow .kb-points-grid::after { content: ""; position: absolute; left: 9px; top: 14px; height: calc(100% - 28px); width: 3px; border-radius: 999px; background: linear-gradient(180deg, #f0c24d, var(--kb-rot-akzent)); box-shadow: 0 0 16px -2px rgba(220,13,29,0.55); transform: scaleY(var(--railp, 0)); transform-origin: top; }
.bv3.kbf:not(.js-motion) .kbf-flow .kb-points-grid::after { transform: none; }
@media (prefers-reduced-motion: no-preference){
  .bv3.kbf.js-motion .kbf-flow .kb-lpoint { opacity: 0.45; transition: opacity 460ms var(--kb-ease-calm), border-color 460ms, transform 280ms var(--kb-ease), box-shadow 280ms; }
  .bv3.kbf.js-motion .kbf-flow .kb-lpoint.is-hot { opacity: 1; border-color: rgba(220,13,29,0.4); }
}

/* Sticky-Bild im Ablauf (Lab 16) · nur Desktop-Layout */
@media (min-width: 941px){
  .bv3.kbf .kbf-flow__media { position: sticky; top: clamp(80px, 12vh, 130px); align-self: start; height: min(68vh, 560px); }
}

/* ── Kennzahlen · Einschlag (Lab 06) ───────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .bv3.kbf.js-motion .kb-stat { position: relative; }
  .bv3.kbf.js-motion .kb-stat.is-hit .kb-stat__n { animation: kbf-hit 620ms var(--kb-ease-calm); }
  .bv3.kbf.js-motion .kb-stat.is-hit::before { content: ""; position: absolute; left: 30px; top: 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(220,13,29,0.85); animation: kbf-ring 750ms ease-out forwards; pointer-events: none; }
  @keyframes kbf-hit {
    0%   { transform: scale(1.18) rotate(-1deg); text-shadow: 0 0 38px rgba(220,13,29,0.9); }
    55%  { transform: scale(0.985); }
    100% { transform: none; text-shadow: none; }
  }
  @keyframes kbf-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(7); } }
}

/* ── Beat-Band · Velocity-Marquee (Lab 03) ─────────────────── */
.bv3.kbf .kbf-beat { position: relative; overflow: hidden; background: var(--kb-dark); padding: clamp(64px, 8vw, 110px) 0 clamp(16px, 2.4vw, 32px); }
.bv3.kbf .kbf-beat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 130% at 50% 120%, rgba(220,13,29,0.22), transparent 62%); }
.bv3.kbf .kbf-beat__row { position: relative; display: flex; gap: clamp(28px, 4vw, 54px); width: max-content; white-space: nowrap; will-change: transform; padding: 8px 0; }
.bv3.kbf .kbf-beat__row span { display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 54px); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; font-size: clamp(44px, 7.2vw, 116px); color: #fff; }
.bv3.kbf .kbf-beat__row span i { width: clamp(9px, 1.1vw, 14px); height: clamp(9px, 1.1vw, 14px); border-radius: 50%; background: var(--kb-rot-akzent); flex: 0 0 auto; }
.bv3.kbf .kbf-beat__row--ghost span { color: transparent; -webkit-text-stroke: 1.5px rgba(212,201,181,0.42); }
.bv3.kbf .kbf-beat__row--ghost span i { background: rgba(212,201,181,0.42); }

/* ============================================================
   REVIEW-UMSETZUNG 08/2026 · Feedback Dominik, 06.08.2026
   ------------------------------------------------------------
   Die vier Punkte sind auf „Kickboxen Erwachsene" bereits
   abgenommen. Dort stehen sie in css/kickboxen.css hinter dem
   Guard .kb:not(.fh):not(.kbf) — diese Seite ist dort bewusst
   ausgenommen, weil kickboxen.css von drei Seiten geladen wird.
   Deshalb werden die Regeln hier mit dem Scope .bv3.kbf
   gespiegelt; css/kickboxen.css bleibt unangetastet.
   ============================================================ */

/* 0 · Seitlicher Randabstand wie auf „Jiu-Jitsu Budokai Erwachsene".
   Zwei Abweichungen waren die Ursache:
   a) .kb-hero .b-wrap (kickboxen.css Z. 105) hebt max-width und
      Zentrierung auf — der Hero-Text klebte auf JEDER Breite bei
      40px, während alle übrigen Sektionen ab 1560px mitwandern.
   b) .b-wrap rechnet hier content-box (1480 + 2x40 = 1560 Gesamt-
      breite). JJB lädt site.css mit globalem border-box, dort
      sind es 1480.
   Gemessener linker Textabstand nachher = identisch mit JJB:
   1440px 40 · 1560px 80 · 1680px 140 · 1920px 260 · 2560px 580.
   width:100% ist nötig, weil .kb-hero ein Flex-Container ist:
   ohne das schrumpft .b-wrap auf Inhaltsbreite und margin:auto
   würde diesen schmalen Block zentrieren statt den Rand zu setzen. */
.bv3.kbf .b-wrap { box-sizing: border-box; }
.bv3.kbf .kb-hero .b-wrap { width: 100%; max-width: 1480px; margin-inline: auto; }

/* 1 · Hero kompakter · Abstand nach oben kleiner.
   Werte 1:1 von „Kickboxen Erwachsene" übernommen. */
.bv3.kbf .kb-hero {
  min-height: min(80vh, 720px);
  padding: clamp(118px, 15vh, 165px) 0 clamp(64px, 7vw, 96px);
}
@media (max-width: 940px){
  .bv3.kbf .kb-hero { min-height: 70vh; }
}

/* 1b · Scrim nachgezogen. Durch den kürzeren Hero rutscht der
   Textblock nach oben in die hellen Bildbereiche. Der alte Scrim
   dunkelte nur von unten ab (0deg-Layer, oberhalb 60 % transparent).
   Zusätzlicher 180deg-Layer, der die oberen ~46 % abdunkelt.
   Gemessen bei 1440px (ungünstigster Punkt hinter der H1):
   4,21:1 -> 7,10:1. */
.bv3.kbf .kb-hero__scrim { background:
  linear-gradient(90deg, rgba(16,10,10,0.92) 0%, rgba(16,10,10,0.80) 30%, rgba(16,10,10,0.42) 56%, rgba(16,10,10,0.10) 82%, rgba(16,10,10,0) 100%),
  linear-gradient(180deg, rgba(16,10,10,0.62) 0%, rgba(16,10,10,0.30) 26%, rgba(16,10,10,0) 48%),
  linear-gradient(0deg, rgba(16,10,10,0.62) 0%, rgba(16,10,10,0.10) 34%, transparent 60%),
  radial-gradient(ellipse 60% 60% at 88% 8%, rgba(220,13,29,0.16), transparent 60%); }
@media (max-width: 940px){
  .bv3.kbf .kb-hero__scrim { background:
    linear-gradient(180deg, rgba(16,10,10,0.62) 0%, rgba(16,10,10,0.24) 24%, rgba(16,10,10,0) 44%),
    linear-gradient(0deg, rgba(16,10,10,0.94) 8%, rgba(16,10,10,0.70) 42%, rgba(16,10,10,0.32) 72%, rgba(16,10,10,0.18) 100%); }
}

/* 1c · Hero-Kicker auf Beige statt Akzentrot.
   Akzentrot (#DC0D1D) erreicht auf diesem Foto WCAG AA in keiner
   Scrim-Variante (gemessen 2,56:1 im Mittel, 1,00:1 am ungünstigsten
   Punkt). Gleiche Lösung wie auf „Kickboxen Erwachsene", Boxen und
   Krav Maga: var(--rp-beige), gemessen 8,79:1. Nur der Hero-Kicker,
   die Kicker der übrigen Sektionen bleiben unverändert. */
.bv3.kbf .kb-hero .b-kicker { color: var(--rp-beige); }
.bv3.kbf .kb-hero .b-kicker::before { background: var(--rp-beige); }

/* 2b · Micro-Zeile zentriert direkt unter dem Button.
   .kb-hero__micro liegt jetzt im Markup innerhalb von
   .kb-hero__cta; der Block schrumpft auf Button-Breite und bleibt
   als Ganzes linksbündig im Hero. */
.bv3.kbf .kb-hero__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; width: fit-content;
}
.bv3.kbf .kb-hero__micro { text-align: center; }

/* ============================================================
   5 · STIMMEN · Karten-Stapel statt Einzelzitat
   Mechanik portiert aus css/kids-scroll-v3.css (.kv3-stack /
   .kv3-card), Vorlage: css/mma.css. Die Seite bindet KEINE
   kinder-spezifische Datei ein. Die Textklassen bleiben die
   dieser Seite (kb-quote__q / __attr / __note).
   Jede Karte klebt mittig im Viewport, die nächste schiebt sich
   darüber, die darunterliegende tritt per JS zurück.
   box-sizing ist explizit gesetzt, weil die Seite sonst
   content-box rechnet und die Karte um die Innenabstände breiter
   als min(…) wäre.
   ============================================================ */
.bv3.kbf .kb-quote { padding: clamp(100px, 13vw, 160px) 0 0; }
.bv3.kbf .kb-quote__mark { text-align: center; margin-bottom: 0; }
.bv3.kbf .kv3-stack { position: relative; padding-bottom: 9vh; }
.bv3.kbf .kv3-stack__wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.bv3.kbf .kv3-card {
  box-sizing: border-box;
  position: relative; width: min(68ch, 94vw); border-radius: 24px;
  padding: clamp(32px, 5vw, 68px); background: var(--rp-white);
  border-top: 4px solid var(--kb-rot-akzent);
  box-shadow: 0 40px 90px -36px rgba(26,20,20,0.45); will-change: transform;
}
.bv3.kbf .kv3-card__num { position: absolute; top: 26px; right: 30px; margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rp-grau-muted); }
.bv3.kbf .kv3-card .kb-quote__q { font-size: clamp(20px, 2.1vw, 31px); line-height: 1.34; margin: 0 0 30px; text-wrap: pretty; }
.bv3.kbf .kv3-card .kb-quote__attr { margin: 0; padding-top: 22px; border-top: 1px solid var(--rp-border-soft); }
.bv3.kbf .kv3-card .kb-quote__note { margin: 14px 0 0; }
.bv3.kbf .kv3-card--beige { background: var(--rp-beige-deep); }
.bv3.kbf .kv3-card--anker { background: var(--kb-rot-anker); border-top-color: var(--rp-beige); }
.bv3.kbf .kv3-card--anker .kb-quote__q { color: #fff; }
.bv3.kbf .kv3-card--anker .kb-quote__attr { color: var(--rp-beige); border-top-color: rgba(255,255,255,0.24); }
.bv3.kbf .kv3-card--anker .kb-quote__attr::before { background: var(--rp-beige); }
.bv3.kbf .kv3-card--anker .kb-quote__note { color: rgba(255,255,255,0.66); }
.bv3.kbf .kv3-card--anker .kv3-card__num { color: rgba(237,228,210,0.72); }
@media (max-width: 900px){
  .bv3.kbf .kv3-card { padding: 30px 24px 28px; }
  .bv3.kbf .kv3-card__num { position: static; display: block; margin: 0 0 16px; }
}
/* Mobil (≤ 940px): kein Sticky-Stapel, Karten stehen untereinander.
   Das JS steigt bei dieser Breite ebenfalls aus. */
@media (max-width: 940px){
  .bv3.kbf .kv3-stack { padding-bottom: 48px; }
  .bv3.kbf .kv3-stack__wrap { position: static; height: auto; padding: 14px 20px; }
}
/* Reduzierte Bewegung: keine Sticky-Bühne, alle Karten stehen
   vollständig lesbar untereinander (das JS steigt zusätzlich aus). */
@media (prefers-reduced-motion: reduce){
  .bv3.kbf .kv3-stack { padding-bottom: 48px; }
  .bv3.kbf .kv3-stack__wrap { position: static; height: auto; padding: 14px 20px; }
}