/* ============================================================
   RANDORI-PRO · Krav Maga (High End)
   Sportartenseite · Template B „Ergebnis-Fokus" + Stimmung 3
   „Dunkel & Intensiv". Additiv zu tokens.css; teilt die
   bv3-Mechaniken (Progress, Glas-Header, [data-rv]-Reveals,
   Button-Glanz) mit bold-v3.css.

   Layout-Kanon (verbindlich):
   · Standard-Karten-Radius (16–24px), KEINE asymmetrischen Radien.
   · Hero-Bild = rechteckiges Bild-Card mit Standard-Radius.
   · Farbrhythmus: 6 DUNKLE Sektionen, 3 HELLE Relief-Inseln.
   · Akzentrot nur für CTAs/Links/Highlights, nie als Fläche.
   · GENAU EIN Signatur-Element: die Reaktionskette (§3).
   Aktiv ausschließlich unter body.bv3.km.
   ============================================================ */

:root {
  --km-dark:       #1A1414;  /* Tiefschwarz */
  --km-rot-anker:  #6D1723;  /* Dunkelrot-Anker */
  --km-rot-akzent: #DC0D1D;  /* Akzentrot */
  --km-beige:      #faf6ee;  /* Relief hell, warm */
  --km-grey:       #f3f3f3;  /* Relief hell, neutral (FAQ) */
  --km-ink:        #1A1414;
  --km-body:       #575E62;
  --km-ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page-Grundlage ────────────────────────────────────────── */
body.bv3.km { background: var(--km-dark); color: var(--km-body); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.km a { color: inherit; text-decoration: none; }
.km img { max-width: 100%; display: block; }

.b-wrap { max-width: 1480px; margin: 0 auto; padding: 0 40px; }
.b-wrap--narrow { max-width: 1080px; }
@media (max-width: 720px){ .b-wrap{ padding: 0 24px; } }

/* Seitlicher Randabstand · an „Jiu-Jitsu Budokai Erwachsene" angeglichen
   -----------------------------------------------------------------
   Feedback Dominik 04.08.2026: Inhalt steht zu dicht am Bildschirmrand.
   Ursache identisch zu css/boxen.css: .b-wrap rechnet hier content-box,
   die Gesamtbreite ist also 1480 + 2x40 = 1560. JJB lädt css/site.css mit
   globalem border-box und kommt damit auf 1480 gesamt — der Inhalt sitzt
   dort auf jeder Breite 40px weiter innen (bei 1512px 16px).
   Gemessen VOR der Änderung (Abstand linke Fensterkante → Textanfang):
     2560px  JJB 580 · Krav Maga 540
     1920px  JJB 260 · Krav Maga 220
     1512px  JJB  56 · Krav Maga  40
     1440px  JJB  40 · Krav Maga  40
   Gescopet auf .km, obwohl css/krav-maga.css nur von dieser Seite geladen
   wird — gleiche Schreibweise wie in css/boxen.css, damit das Muster über
   die Seiten hinweg wiedererkennbar bleibt.
   Unter 720px greift weiter padding: 0 24px — dort ändert sich nichts,
   weil der Wrap ohnehin schmaler als max-width ist. */
.km .b-wrap { box-sizing: border-box; }

/* ── Kicker ────────────────────────────────────────────────── */
.b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--km-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 16px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--km-rot-akzent); flex-shrink: 0; }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--anker { color: var(--km-rot-anker); }
.b-kicker--anker::before { background: var(--km-rot-anker); }
.b-kicker--center { justify-content: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--km-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 22px 40px; border-radius: 999px; transition: background 200ms, transform 200ms, box-shadow 300ms; text-wrap: balance; }
.b-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.b-btn--big { padding: 26px 52px; font-size: 15px; }

/* Schmale Phones: Haupt-CTAs voll­breit statt Pfeil-Umbruch
   (Gegenstück zu css/hapkido.css, damit der größere JJB-Button
   auf dem Handy nicht aus dem Container läuft). */
@media (max-width: 480px){
  .b-btn--big { width: 100%; justify-content: center; text-align: center; padding: 20px 24px; font-size: 13px; }
}
.b-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--km-rot-akzent); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.b-link:hover { border-color: var(--km-rot-akzent); }
.b-link--beige { color: var(--km-rot-anker); }
.b-link--beige:hover { border-color: var(--km-rot-anker); }

/* ── Striped Foto-/Video-Platzhalter ───────────────────────── */
.km-ph { position: relative; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #2a1418 0 16px, #241115 16px 32px); border: 1px solid rgba(212,201,181,0.16); }
.km-ph__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, 84%); text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: rgba(212,201,181,0.78); margin: 0; }
.km-ph__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,201,181,0.9); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 13px; border-radius: 999px; }
.km-ph--beige { background: repeating-linear-gradient(135deg, #e9e0d0 0 16px, #e2d8c5 16px 32px); border-color: rgba(74,58,40,0.18); }
.km-ph--beige .km-ph__note { color: #6a5c44; }
.km-ph--beige .km-ph__tag { color: #4a3a28; background: rgba(237,228,210,0.85); border-color: rgba(74,58,40,0.22); }

/* ── Hero-Microcopy (kostenlos & unverbindlich) ────────────────
   Sitzt jetzt IM CTA-Block und zentriert sich dort exakt zum Button
   (Muster wie .box-hero__micro / .mma-hero__micro / .grap-hero__micro).
   Die Positionierung steckt in .km-hero__cta weiter unten. */
.km-hero__micro { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.9); }

/* ── „Mehr lesen"-Disclosure (sekundärer Hintergrund) ──────── */
.km-more { margin-top: 22px; }
.km-more__sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--rp-beige); border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 4px; transition: border-color 200ms; width: fit-content; }
.km-more__sum::-webkit-details-marker { display: none; }
.km-more__sum::after { content: "↓"; font-size: 13px; transition: transform 240ms var(--km-ease); }
.km-more[open] .km-more__sum::after { transform: rotate(180deg); }
.km-more__sum:hover { border-color: var(--rp-beige); }
.km-more__body { margin-top: 24px; }
.km-more__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; max-width: 68ch; }
.km-more__body p:last-child { margin-bottom: 0; }
.km-more__body strong { color: #fff; font-weight: 700; }
.km-more__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }

/* ── Mid-Page-CTA (§4 Für wen) ─────────────────────────────── */
/* CTA-Block · Button plus Micro-Zeile, untereinander. Der Block schrumpft
   über width: max-content auf Buttonbreite, die Micro-Zeile zentriert sich
   dadurch exakt zum Button — der Block selbst bleibt linksbündig in der
   Sektion (Muster wie .box-hero__cta / .mma-hero__cta). */
.km-fit__cta { margin-top: clamp(36px, 4vw, 52px); display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.km-fit__cta .b-btn { justify-content: center; }
.km-fit__cta-note { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.9); }

/* ── Full-Bleed-Bild-Band (§3.5) ───────────────────────────── */
/* Oktober 2026: 2:1 statt 24:9 ab 721 px — das echte Foto ist hochkant, bei
   24:9 waren Kopf des Trainers und Griff am Partner abgeschnitten. */
.km-band { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 0; border-left: 0; border-right: 0; overflow: hidden; }
.km-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
@media (max-width: 720px){ .km-band { aspect-ratio: 16 / 11; } }

/* ============================================================
   HEADER · fix, Glas-Verhalten via bold-v3.css (.is-scrolled)
   ============================================================ */
.b-header { position: absolute; inset: 0 0 auto 0; z-index: 50; padding: 26px 0; }
.b-header__inner { max-width: 1480px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.b-header img.b-logo { height: 38px; filter: brightness(0) invert(1); display: block; }
.b-nav { display: flex; gap: 34px; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.b-nav a { color: rgba(255,255,255,0.85); transition: color 200ms; }
.b-nav a:hover { color: #fff; }
.b-nav .b-nav-cta { border: 1px solid rgba(255,255,255,0.55); padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.1em; transition: background 200ms, color 200ms, border-color 200ms; }
.b-nav .b-nav-cta:hover { background: var(--km-rot-akzent); color: #fff; border-color: var(--km-rot-akzent); }
@media (max-width: 980px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* ============================================================
   1 · HERO · Tiefschwarz + roter Glow · rechteckiges Bild-Card
   ============================================================ */
/* Vertikale Paddings nachgezogen (04.08.2026), nachdem die H1 kleiner
   geworden ist. Oben bleibt genug Reserve, damit der fixe Glas-Header
   (26px Padding + 38px Logo = 90px) den Kicker nicht überdeckt:
   der kleinste Wert 118px liegt darüber. */
.km-hero { position: relative; background: var(--km-dark); color: #fff; overflow: hidden; padding: clamp(118px, 15vh, 160px) 0 clamp(56px, 7vw, 92px); }
.km-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; z-index: 0; }
.km-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(26,20,20,0.95) 0%, rgba(26,20,20,0.87) 30%, rgba(26,20,20,0.5) 56%, rgba(26,20,20,0.16) 78%, transparent 96%),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.30), transparent 56%),
    radial-gradient(ellipse 90% 70% at 10% 100%, rgba(109,23,35,0.42), transparent 60%); }
.km-hero__inner { position: relative; z-index: 2; display: block; }
.km-hero__text { max-width: 640px; }
.km-hero .b-kicker { color: var(--rp-beige); }
.km-hero .b-kicker::before { background: var(--rp-beige); }
/* Verkleinert 04.08.2026. Vorher clamp(40px, 5.6vw, 86px) / line-height 1.0
   — identisch zu Boxen, Grappling, MMA und KTR. Die Krav-Maga-H1 ist mit
   69 Zeichen aber die längste aller Sportartenseiten und lief in dem auf
   640px begrenzten Textblock auf FÜNF Zeilen (430px Blockhöhe bei 1920px)
   — Boxen/Grappling vier, MMA drei. Der Hero wurde dadurch unnötig hoch. */
.km-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -0.035em; color: #fff; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; }
.km-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); margin: 0 0 36px; max-width: 56ch; }
/* CTA-Block · Button plus Micro-Zeile, untereinander. Der Block schrumpft
   über width: max-content auf Buttonbreite, die Micro-Zeile zentriert sich
   dadurch exakt zum Button (Muster wie .box-hero__cta / .mma-hero__cta).
   Der Sekundärlink „Wie Krav Maga abläuft ↓" ist am 04.08.2026 entfallen;
   die beiden .b-link-Überschreibungen liefen danach ins Leere und sind
   deshalb mit weggefallen. Die geteilte Grundregel .b-link (Zeile 50)
   bleibt unangetastet. */
.km-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.km-hero__cta .b-btn { justify-content: center; }
.km-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.82); line-height: 1.9; }
@media (max-width: 940px){
  .km-hero__text { max-width: none; }
  .km-hero__bg { object-position: 50% 22%; }
  /* Scrim oben verdichtet (04.08.2026): 0.55 → 0.72 bzw. 0.38 → 0.45.
     Gemessen bei 375px auf dem tatsächlich gerenderten Grund — der
     beige Kicker (#D4C9B5) kam vorher nur auf 3,65:1 und lag damit
     unter WCAG AA (4,5:1 bei 12px); auch die H1 lag mit 3,33:1 nur
     knapp über der Large-Text-Schwelle. Mit dem dichteren Scrim:
     Kicker 6,2:1, H1 4,9:1. Das Bild bleibt sichtbar. */
  .km-hero__scrim { background:
      linear-gradient(180deg, rgba(26,20,20,0.72) 0%, rgba(26,20,20,0.45) 42%, rgba(26,20,20,0.94) 100%),
      radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.22), transparent 56%); }
}

/* ============================================================
   2 · WAS IST KRAV MAGA? · DUNKELROT · weiße Schrift · Prosa
   ============================================================ */
.km-def { background: var(--km-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.km-def::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); }
.km-def__inner { position: relative; z-index: 1; }
.km-def__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 60px); }
.km-def__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.km-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-def__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.5; color: var(--rp-beige); margin: 0; max-width: 54ch; }
.km-def__body { max-width: 68ch; }
.km-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; break-inside: avoid; }
.km-def__body p:last-child { margin-bottom: 0; }
.km-def__body strong { color: #fff; font-weight: 700; }
.km-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
@media (max-width: 820px){ .km-def__body{ columns: 1; } }

/* ============================================================
   3 · WAS LERNST DU? · HELL Beige · trägt die Reaktionskette
   ============================================================ */
.km-learn { background: var(--km-beige); color: var(--km-body); padding: clamp(96px, 12vw, 152px) 0; }
.km-learn__head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 52px); }
.km-learn__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: var(--km-rot-anker); margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.km-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--km-rot-akzent); }
.km-learn__body { max-width: 68ch; }
.km-learn__body p { font-size: 17px; line-height: 1.74; color: var(--km-ink); margin: 0 0 22px; break-inside: avoid; }
.km-learn__body p:last-child { margin-bottom: 0; }
.km-learn__body strong { color: var(--km-rot-anker); font-weight: 700; }
@media (max-width: 820px){ .km-learn__body{ columns: 1; } }

/* ── SIGNATUR · Reaktionskette ─────────────────────────────── */
.km-chain { margin-top: clamp(56px, 7vw, 92px); }
.km-chain__intro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--km-rot-akzent); margin: 0 0 8px; display: flex; align-items: center; gap: 14px; }
.km-chain__intro::before { content:""; width: 40px; height: 1px; background: var(--km-rot-akzent); flex-shrink: 0; }
.km-chain__sub { font-size: 16px; line-height: 1.6; color: var(--km-body); margin: 0 0 44px; max-width: 60ch; }
.km-chain__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.km-link { position: relative; padding-top: 52px; }
.km-link__line { position: absolute; top: 13px; left: 0; height: 3px; width: calc(100% + 24px); background: var(--km-rot-akzent); transform-origin: 0 50%; z-index: 1; }
.km-link:last-child .km-link__line { width: 100%; }
.km-link__node { position: absolute; top: 0; left: 0; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; background: var(--km-dark); border: 3px solid var(--km-dark); z-index: 2; display: flex; align-items: center; justify-content: center; }
.km-link__node::after { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--km-rot-akzent); }
.km-link__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--km-rot-akzent); display: block; margin-bottom: 10px; }
.km-link__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 26px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--km-rot-anker); text-transform: uppercase; }
.km-link__p { font-size: 14.5px; line-height: 1.55; color: var(--km-body); margin: 0; max-width: 26ch; }
.km-link--key .km-link__tag { display: inline-block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--km-rot-akzent); border: 1px solid rgba(220,13,29,0.4); border-radius: 999px; padding: 4px 11px; }
.km-link__tag { display: none; }
.km-chain__foot { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 28px; border-top: 1px solid rgba(74,58,40,0.2); font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); line-height: 1.4; color: var(--km-rot-anker); max-width: 44ch; text-wrap: balance; }
@media (max-width: 820px){
  .km-chain__track { grid-template-columns: 1fr 1fr; gap: 44px 24px; }
  .km-link:nth-child(2) .km-link__line { width: 100%; }
}
@media (max-width: 480px){ .km-chain__track { grid-template-columns: 1fr; } .km-link__line{ width: 100% !important; } }

/* ============================================================
   4 · FÜR WEN? · DUNKEL Tiefschwarz · weiße Schrift · Standard
   ============================================================ */
.km-fit { background: var(--km-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.km-fit__head { max-width: 860px; margin-bottom: clamp(44px, 5vw, 64px); }
.km-fit__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0; max-width: 18ch; text-wrap: balance; }
.km-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.km-fit__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: clamp(28px, 3vw, 40px); transition: border-color 320ms, transform 520ms var(--km-ease), box-shadow 520ms; }
.km-fit__card:hover { border-color: rgba(220,13,29,0.6); transform: translateY(-4px); box-shadow: 0 30px 64px -38px rgba(0,0,0,0.7); }
.km-fit__card--no { background: rgba(20,8,8,0.4); }
.km-fit__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 16px; }
.km-fit__card--no .km-fit__lead { color: rgba(255,255,255,0.92); }
.km-fit__p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; }
.km-fit__p + .km-fit__p { margin-top: 14px; }
.km-fit__p a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); font-weight: 700; transition: border-color 200ms; }
.km-fit__p a:hover { border-color: #fff; }
@media (max-width: 820px){ .km-fit__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · DUNKELROT · weiße Schrift
   ============================================================ */
.km-diff { background: var(--km-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.km-diff::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 12% 8%, rgba(220,13,29,0.26), transparent 56%); }
.km-diff__inner { position: relative; z-index: 1; }
.km-diff__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 56px); }
.km-diff__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.km-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 58ch; }
.km-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.km-point { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 22px; padding: clamp(26px, 2.8vw, 38px); transition: border-color 320ms, transform 520ms var(--km-ease); }
.km-point:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.km-point__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.16; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 12px; }
.km-point__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; }
@media (max-width: 820px){ .km-points{ grid-template-columns: 1fr; } }

.km-stats { margin-top: clamp(56px, 6vw, 84px); padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.18); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.km-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.92; letter-spacing: -0.03em; color: var(--rp-beige); font-variant-numeric: tabular-nums; }
.km-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.2em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.km-stat__l { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.66); line-height: 1.5; }
@media (max-width: 900px){ .km-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* ============================================================
   6 · STIMMEN · HELL Beige · großes Zitat + dezentes Bild-Card
   ============================================================ */
.km-quote { background: var(--km-beige); color: var(--km-ink); padding: clamp(100px, 13vw, 160px) 0; }
/* UNGENUTZT seit 04.08.2026 — die Sektion trägt jetzt einen Karten-Stapel
   statt eines einzelnen Zitats. .km-quote__inner (Grid mit zweiter Spalte)
   und .km-quote__media (Bild-Card) haben kein Gegenstück mehr im Markup;
   .km-quote__media hatte auch vorher schon keins — das war die Ursache der
   leeren rechten Spalte. Beide Regeln bleiben laut Auftrag stehen und sind
   in docs/offene-punkte.md zum Aufräumen vermerkt. */
.km-quote__inner { max-width: 1180px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.km-quote__media { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; }
.km-quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 820px){ .km-quote__inner{ grid-template-columns: 1fr; } .km-quote__media{ aspect-ratio: 16/10; order: -1; } }

.km-quote__mark { font-family: var(--font-serif); font-size: 110px; line-height: 0.6; color: rgba(109,23,35,0.32); display: block; text-align: center; }
/* Zitatgröße auf Kartenmaß zurückgenommen (vorher clamp(22px, 3vw, 40px)) —
   im Stapel steht das Zitat in einer auf 64ch begrenzten Karte, nicht mehr
   über die halbe Sektionsbreite. */
.km-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.34; letter-spacing: -0.01em; color: var(--km-rot-anker); margin: 0 0 30px; text-wrap: pretty; }
.km-quote__q .s-ph { color: var(--km-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.5em; line-height: 1.7; }
.km-quote__attr { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--km-rot-anker); margin: 0; padding-top: 22px; border-top: 1px solid var(--rp-border-soft); }
.km-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--km-rot-anker); flex-shrink: 0; }
.km-quote__attr .s-ph { color: var(--km-rot-akzent); }
.km-quote__note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #7a6d55; max-width: 60ch; }

/* ── Karten-Stapel ──────────────────────────────────────────
   Portiert aus css/kids-scroll-v3.css (.kv3-stack / .kv3-card) über die
   bereits angepasste Fassung in css/mma.css, damit diese Seite KEIN
   kinder-spezifisches Stylesheet einbinden muss. Jede Karte klebt mittig
   im Viewport; die nächste schiebt sich darüber, die darunterliegende
   tritt per JS zurück (js/krav-maga-v3.js).
   Farben sind auf Krav Maga umgestellt: Akzentrot als Oberkante, der
   Anker-Ton --km-rot-anker für die letzte Karte.
   box-sizing ist hier explizit gesetzt, weil die Seite sonst content-box
   rechnet und die Karte um die Innenabstände breiter als min(…) wäre. */
.kv3-stack { position: relative; padding-bottom: 9vh; }
.kv3-stack__wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.kv3-card {
  box-sizing: border-box;
  position: relative; width: min(64ch, 94vw); border-radius: 24px;
  padding: clamp(32px, 5vw, 64px); background: var(--rp-white);
  border-top: 4px solid var(--km-rot-akzent);
  box-shadow: 0 40px 90px -36px rgba(26,20,20,0.45); will-change: transform;
}
.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); }
.kv3-card--beige { background: var(--rp-beige-deep); }
.kv3-card--anker { background: var(--km-rot-anker); border-top-color: var(--rp-beige); }
.kv3-card--anker .km-quote__q { color: #fff; }
.kv3-card--anker .km-quote__attr { color: var(--rp-beige); border-top-color: rgba(255,255,255,0.24); }
.kv3-card--anker .km-quote__attr::before { background: var(--rp-beige); }
.kv3-card--anker .km-quote__note { color: rgba(255,255,255,0.72); }
.kv3-card--anker .kv3-card__num { color: rgba(237,228,210,0.78); }
@media (max-width: 900px){
  .kv3-card { padding: 30px 24px 28px; }
  .kv3-card__num { position: static; display: block; margin: 0 0 16px; }
}
/* Reduzierte Bewegung: keine Sticky-Bühne, alle Karten stehen
   vollständig lesbar untereinander (das JS steigt zusätzlich aus). */
@media (prefers-reduced-motion: reduce){
  .kv3-stack { padding-bottom: 48px; }
  .kv3-stack__wrap { position: static; height: auto; padding: 14px 20px; }
}

/* ============================================================
   7 · FAQ · HELL Hellgrau · Akkordeon (b-q)
   ============================================================ */
.b-faq { background: var(--km-grey); color: var(--km-body); padding: clamp(96px, 12vw, 152px) 0; }
.b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 52px; }
.b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 78px); line-height: 0.98; letter-spacing: -0.03em; color: var(--km-rot-anker); margin: 0; max-width: 14ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: var(--km-body); max-width: 46ch; margin: 0; }
.b-faq__list { border-top: 1px solid rgba(26,20,20,0.14); }
.b-q { border-bottom: 1px solid rgba(26,20,20,0.14); }
.b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; color: var(--km-ink); background: none; border: 0; cursor: pointer; transition: color 200ms; }
.b-q__btn h3 { font: inherit; margin: 0; }
.b-q__btn:hover h3 { color: var(--km-rot-akzent); }
.b-q__plus { flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--km-rot-akzent); transition: transform 250ms; }
.b-q__plus::before { width: 20px; height: 2px; transform: translate(-50%, -50%); }
.b-q__plus::after { width: 2px; height: 20px; transform: translate(-50%, -50%); }
.b-q.is-open .b-q__plus::after { transform: translate(-50%, -50%) scaleY(0); }
.b-q__a { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease-standard); }
.b-q__a-inner { padding: 0 64px 28px 0; font-size: 16px; line-height: 1.68; color: var(--km-body); max-width: 80ch; }
.b-q__a-inner .s-ph { color: var(--km-rot-akzent); font-family: var(--font-mono); font-size: 0.85em; }
.b-q.is-open .b-q__a { max-height: 1500px; }
/* Seit dem Wegfall des KTR-Links (04.08.2026) steht hier nur noch ein Link.
   flex + gap hält die Fußzeile robust, falls je ein zweiter dazukommt —
   vorher standen beide .b-link ohne Abstand direkt nebeneinander.
   Gilt nur für diese Seite; .b-faq__foot ist in vielen CSS-Dateien
   gleichlautend definiert und bleibt dort unberührt. */
.b-faq__foot { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
@media (max-width: 900px){ .b-faq__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .b-q__a-inner{ padding-right: 0; } }

/* ============================================================
   8 · STANDORTE · DUNKEL Tiefschwarz · 3-Spalten-Raster
   ============================================================ */
/* Umgebaut 04.08.2026 nach dem Muster von .grap-loc / .box-loc:
   · Kopf zentriert (beide Referenzseiten machen das so)
   · Foto oben in der Karte, Textblock darunter in .km-loc-card__body —
     vorher hingen Nummer/Name/Region/Meta/Pfeil direkt in .km-loc-card
     und das Foto wurde per negativem margin (-32px -30px 22px) über die
     Kartenränder gezogen
   · Grid nicht mehr auf 940px linksbündig begrenzt, sondern wie bei
     Grappling (ebenfalls zwei Karten) zentriert mit je max. 360px */
.km-loc { background: var(--km-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.km-loc__head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; }
.km-loc__head .b-kicker { justify-content: center; }
.km-loc__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; margin: 0 auto 24px; max-width: 16ch; text-wrap: balance; }
.km-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-loc__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.84); margin: 0 auto; max-width: 60ch; }
.km-loc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 20px; justify-content: center; }
.km-loc-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 320ms, transform 520ms var(--km-ease), box-shadow 520ms; }
.km-loc-card__photo { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #241115; flex-shrink: 0; }
.km-loc-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--km-ease); }
.km-loc-card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 54%, rgba(26,20,20,0.5)); }
.km-loc-card:hover .km-loc-card__photo img { transform: scale(1.06); }
.km-loc-card:hover { border-color: rgba(220,13,29,0.6); transform: translateY(-5px); box-shadow: 0 30px 64px -36px rgba(0,0,0,0.7); }
.km-loc-card__body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 26px; min-height: 208px; box-sizing: border-box; }
.km-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--km-rot-akzent); }
.km-loc-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -0.015em; color: #fff; margin: 14px 0 6px; }
.km-loc-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0; }
.km-loc-card__meta { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: rgba(255,255,255,0.62); }
.km-loc-card__meta .s-ph { color: var(--km-rot-akzent); }
.km-loc-card__arrow { margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; transition: background 220ms, border-color 220ms, color 220ms, transform 320ms var(--km-ease); }
.km-loc-card:hover .km-loc-card__arrow { background: var(--km-rot-akzent); border-color: var(--km-rot-akzent); transform: translate(2px,-2px); }
.km-loc__close { margin: clamp(40px, 5vw, 56px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 80ch; text-align: center; }
.km-loc__note { margin: 18px auto 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: var(--km-rot-akzent); max-width: 80ch; text-align: center; }
@media (max-width: 720px){ .km-loc__grid{ grid-template-columns: minmax(0, 420px); } .km-loc-card__body{ min-height: 0; } }

/* ============================================================
   9 · FINALER CTA · DUNKEL Tiefschwarz + roter Glow
   ============================================================ */
.km-final { background: var(--km-dark); color: #fff; padding: clamp(120px, 15vw, 188px) 24px; position: relative; overflow: hidden; text-align: center; }
.km-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(220,13,29,0.4), rgba(109,23,35,0.28) 36%, transparent 64%); }
.km-final__inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.km-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.03em; margin: 26px 0; text-wrap: balance; }
.km-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.km-final__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 40px; max-width: 52ch; }
.km-final__row { display: flex; justify-content: center; }
.km-final .b-btn--big { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.km-final__foot { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.58); }

/* ============================================================
   FOOTER (b-foot) · systemweit
   ============================================================ */
.b-foot { background: #0a0808; color: #888; padding: 80px 0 40px; font-size: 12px; }
.b-foot__top { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid #1f1818; }
.b-foot__brand img { height: 38px; filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 24px; }
.b-foot__brand p { color: #777; font-size: 13px; line-height: 1.55; max-width: 32ch; margin: 0; }
.b-foot__col h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 18px; }
.b-foot__col ul { list-style: none; margin: 0; padding: 0; }
.b-foot__col li { line-height: 2; }
.b-foot__col a { color: #888; transition: color 200ms; }
.b-foot__col a:hover { color: #fff; }
.b-foot__bot { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #555; }
.b-foot__bot a { color: #777; }
.b-foot__bot a:hover { color: #fff; }
@media (max-width: 900px){ .b-foot__top{ grid-template-columns: 1fr 1fr; gap: 32px; } .b-foot__bot{ flex-direction: column; gap: 12px; text-align: center; } }

/* ============================================================
   STICKY-CTA · mobil vollbreit unten, Desktop schwebend
   ============================================================ */
.sticky-cta { position: fixed; z-index: 80; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--km-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; box-shadow: 0 18px 44px -16px rgba(220,13,29,0.6); transition: opacity 300ms, transform 300ms; }
@media (min-width: 721px){
  .sticky-cta { right: 28px; bottom: 28px; padding: 16px 28px; border-radius: 999px; }
}
@media (max-width: 720px){
  .sticky-cta { left: 0; right: 0; bottom: 0; padding: 18px 24px; border-radius: 0; }
}
.sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* KI-Hinweis im Hero (Oktober 2026): Der Hero ist am Desktop höher als der
   erste Bildschirm — der Hinweis steht deshalb oben rechts unter der
   Navigation statt unten rechts, damit er ohne Scrollen sichtbar ist. */
@media (min-width: 941px){ .km-hero > .ki-hinweis { top: 96px; bottom: auto; } }