/* ============================================================
   RANDORI-PRO · Kickboxen (Erwachsene, High End)
   Sportartenseite · Template B „Ergebnis-Fokus" + Stimmung 2
   „Warm & Kraftvoll" (hell-dominant, drei dunkle Anker).
   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, energiegeladenes Bild-Card.
   · Farbrhythmus: HELL-dominant, 3 dunkle Anker (§2 §5 §9).
   · Akzentrot nur für CTAs/Links/Highlights, nie als Fläche.
   · GENAU EIN Signatur-Element: der Kontakt-Level-Regler (§3).
   Aktiv ausschließlich unter body.bv3.kb.
   ============================================================ */

:root {
  --kb-dark:       #1A1414;  /* Tiefschwarz (Anker 3) */
  --kb-rot-anker:  #6D1723;  /* Dunkelrot-Anker (Anker 1 & 2) */
  --kb-rot-akzent: #DC0D1D;  /* Akzentrot */
  --kb-beige:      #faf6ee;  /* Bühne hell, warm */
  --kb-grey:       #f3f3f3;  /* Bühne hell, neutral (FAQ) */
  --kb-ink:        #1A1414;
  --kb-body:       #575E62;
  --kb-line:       rgba(109,23,35,0.14);  /* warme Linie auf hell */
  --kb-ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page-Grundlage · HELL ─────────────────────────────────── */
body.bv3.kb { background: var(--kb-beige); color: var(--kb-body); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.kb a { color: inherit; text-decoration: none; }
.kb 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; } }

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

/* ── Buttons ───────────────────────────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--kb-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(--kb-rot-akzent); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.b-link:hover { border-color: var(--kb-rot-akzent); }
.b-link--beige { color: var(--kb-rot-anker); }
.b-link--beige:hover { border-color: var(--kb-rot-anker); }

/* ── Striped Foto-/Video-Platzhalter ───────────────────────── */
.s-ph { font-family: var(--font-mono); }
.kb-ph { position: relative; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #efe6d3 0 16px, #e8dec9 16px 32px); border: 1px solid rgba(109,23,35,0.16); }
.kb-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: #6a5c44; margin: 0; }
.kb-ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-ph__tag { position: absolute; left: 16px; bottom: 16px; 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; }
.kb-ph--dark { background: repeating-linear-gradient(135deg, #2a1418 0 16px, #241115 16px 32px); border-color: rgba(212,201,181,0.16); }
.kb-ph--dark .kb-ph__note { color: rgba(212,201,181,0.78); }
.kb-ph--dark .kb-ph__tag { color: rgba(212,201,181,0.9); background: rgba(20,8,8,0.55); border-color: rgba(212,201,181,0.28); }

/* ============================================================
   HEADER · fix · DUNKLE Schrift über hellem Hero,
   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: 40px; display: block; transition: filter 360ms var(--ease-standard); }
.b-nav { display: flex; gap: 34px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.b-nav a { color: rgba(26,20,20,0.72); transition: color 200ms; }
.b-nav a:hover { color: var(--kb-rot-akzent); }
.b-nav .b-nav-cta { background: var(--kb-rot-akzent); color: #fff; padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.1em; transition: background 200ms, transform 200ms; }
.b-nav .b-nav-cta:hover { background: #c40b1a; color: #fff; transform: translateY(-1px); }
/* Glas-Zustand (dunkel) → helle Schrift, Logo invertiert */
.bv3.kb .b-header.is-scrolled .b-nav a { color: rgba(255,255,255,0.85); }
.bv3.kb .b-header.is-scrolled .b-nav a:hover { color: #fff; }
.bv3.kb .b-header.is-scrolled .b-nav .b-nav-cta { color: #fff; }
.bv3.kb .b-header.is-scrolled img.b-logo { filter: brightness(0) invert(1); }
/* Foto-Hero: Header liegt auf dunklem Bild → helle Schrift & Logo (auch ungescrollt) */
.bv3.kb.kb-photohero .b-nav a { color: rgba(255,255,255,0.86); }
.bv3.kb.kb-photohero .b-nav a:hover { color: #fff; }
.bv3.kb.kb-photohero img.b-logo { filter: brightness(0) invert(1); }
@media (max-width: 980px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* ============================================================
   1 · HERO · helles Beige · energetisch · rechteckiges Bild-Card
   ============================================================ */
.kb-hero { position: relative; background: var(--kb-dark); color: #fff; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding: clamp(150px, 22vh, 220px) 0 clamp(84px, 10vw, 128px); }
.kb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; z-index: 0; }
.kb-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; 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(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%); }
.kb-hero .b-wrap { max-width: none; margin: 0; }
.kb-hero__inner { position: relative; z-index: 2; display: block; }
.kb-hero__text { max-width: 760px; }
.kb-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -0.035em; color: #fff; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,0.35); }
.kb-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--kb-rot-akzent); }
.kb-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 0 36px; max-width: 54ch; }
.kb-hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.kb-hero--photo .b-link { color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
.kb-hero--photo .b-link:hover { border-bottom-color: #fff; }
.kb-hero__micro { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.kb-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.22); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); line-height: 1.9; }
@media (max-width: 940px){
  .kb-hero { min-height: 88vh; }
  .kb-hero__bg { object-position: 70% center; }
  .kb-hero__scrim { background: 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%); }
}

/* ============================================================
   3b · BILD-BAND · full-bleed · Parallax via JS-Transform auf __fig
   ============================================================ */
.kb-band { position: relative; height: clamp(300px, 56vh, 620px); overflow: hidden; background: var(--kb-dark); }
.kb-band__fig { position: absolute; inset: -12% 0; margin: 0; will-change: transform; }
.kb-band__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.kb-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26,20,20,0.20), transparent 26%, transparent 70%, rgba(26,20,20,0.45)); }
.kb-band__tag { position: absolute; left: clamp(24px, 4vw, 48px); bottom: 26px; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
@media (max-width: 720px){ .kb-band { height: clamp(240px, 44vh, 420px); } }

/* ============================================================
   2 · WAS IST KICKBOXEN? · DUNKELROT (Anker 1) · weiße Schrift
   ============================================================ */
.kb-def { background: var(--kb-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.kb-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%); }
.kb-def__inner { position: relative; z-index: 1; }
.kb-def__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 60px); }
.kb-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; }
.kb-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kb-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: 56ch; }
.kb-def__body { columns: 2; column-gap: clamp(40px, 5vw, 72px); max-width: 1180px; }
.kb-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; break-inside: avoid; }
.kb-def__body p:last-child { margin-bottom: 0; }
.kb-def__body strong { color: #fff; font-weight: 700; }
.kb-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
.kb-def__hint { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 70ch; }
.kb-def__hint em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
.kb-def__hint a { color: var(--rp-beige); border-bottom: 1px solid rgba(212,201,181,0.5); transition: border-color 200ms; }
.kb-def__hint a:hover { border-color: var(--rp-beige); }
.kb-def__toggle { display: none; }
@media (max-width: 820px){
  .kb-def__body{ columns: 1; }
  .kb-def__body:not(.is-open) .kb-def__more { display: none; }
  .kb-def__toggle { display: inline-flex; align-items: center; margin-top: 4px; background: none; border: 0; padding: 12px 0; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); border-bottom: 1px solid rgba(212,201,181,0.5); }
}

/* ============================================================
   3 · WAS LERNST DU? · HELL · trägt den Kontakt-Level-Regler
   ============================================================ */
.kb-learn { background: var(--kb-beige); color: var(--kb-body); padding: clamp(96px, 12vw, 152px) 0; }
.kb-learn__head { max-width: 860px; margin-bottom: clamp(36px, 4vw, 52px); }
.kb-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(--kb-rot-anker); margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.kb-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--kb-rot-akzent); }
.kb-learn__lede { font-size: 18px; line-height: 1.7; color: var(--kb-ink); margin: 0; max-width: 64ch; }
.kb-learn__lede strong { color: var(--kb-rot-anker); font-weight: 700; }

/* Lernpunkte · helle Karten */
.kb-points-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(40px, 4vw, 56px); }
.kb-lpoint { background: #fff; border: 1px solid var(--kb-line); border-radius: 22px; padding: clamp(26px, 2.6vw, 36px); transition: border-color 280ms, transform 280ms var(--kb-ease), box-shadow 280ms; }
.kb-lpoint:hover { border-color: rgba(220,13,29,0.5); transform: translateY(-4px); box-shadow: 0 28px 56px -38px rgba(26,20,20,0.32); }
.kb-lpoint__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--kb-rot-akzent); }
.kb-lpoint__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 25px); line-height: 1.16; letter-spacing: -0.015em; color: var(--kb-rot-anker); margin: 12px 0 10px; }
.kb-lpoint__p { font-size: 16px; line-height: 1.62; color: var(--kb-ink); margin: 0; }
@media (max-width: 820px){ .kb-points-grid{ grid-template-columns: 1fr; } }

/* ── SIGNATUR · Kontakt-Level-Regler ────────────────────────
   Horizontaler Intensitäts-Regler mit beweglichem Indikator
   über drei Stufen. Ruhezustand (kein JS): Mittel-Stufe aktiv,
   Beschreibung sichtbar. */
.kb-level { margin-top: clamp(64px, 8vw, 104px); background: var(--kb-dark); color: #fff; border-radius: 28px; padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 80px) clamp(40px, 5vw, 64px); position: relative; overflow: hidden; box-shadow: 0 50px 110px -56px rgba(26,20,20,0.6); }
.kb-level::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 90% at 90% 0%, rgba(220,13,29,0.22), transparent 60%); }
.kb-level__inner { position: relative; z-index: 1; }
.kb-level__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; }
.kb-level__intro::before { content:""; width: 40px; height: 1px; background: var(--kb-rot-akzent); flex-shrink: 0; }
.kb-level__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; max-width: 22ch; text-wrap: balance; }
.kb-level__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kb-level__sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 clamp(44px, 5vw, 64px); max-width: 62ch; }

/* Regler / Skala */
.kb-dial { position: relative; }
.kb-dial__track { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); margin: 0 14px clamp(20px, 3vw, 30px); }
.kb-dial__fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f0c24d, var(--kb-rot-akzent)); width: 50%; transition: width 620ms var(--kb-ease); }
.kb-dial__stop { position: absolute; top: 50%; left: var(--p); transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--kb-dark); border: 2px solid rgba(255,255,255,0.4); padding: 0; cursor: pointer; z-index: 2; transition: border-color 260ms, background 260ms, transform 260ms var(--kb-ease); }
.kb-dial__stop::before { content:""; position: absolute; inset: -12px; border-radius: 50%; }
.kb-dial__stop::after { content:""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 260ms; }
.kb-dial__stop:hover { transform: translate(-50%,-50%) scale(1.12); border-color: rgba(255,255,255,0.7); }
.kb-dial[data-level="0"] .kb-dial__fill { width: 0%; }
.kb-dial[data-level="1"] .kb-dial__fill { width: 50%; }
.kb-dial[data-level="2"] .kb-dial__fill { width: 100%; }
/* aktiver Indikator (Thumb) */
.kb-dial__thumb { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; border-radius: 50%; background: var(--kb-rot-akzent); border: 4px solid var(--kb-dark); box-shadow: 0 0 0 1px rgba(220,13,29,0.6), 0 10px 30px -8px rgba(220,13,29,0.8); transform: translate(-50%,-50%); z-index: 3; cursor: grab; transition: left 620ms var(--kb-ease); }
.kb-dial__thumb::after { content:""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.kb-dial__thumb:active { cursor: grabbing; }
.kb-dial[data-level="0"] .kb-dial__thumb { left: 0%; }
.kb-dial[data-level="1"] .kb-dial__thumb { left: 50%; }
.kb-dial[data-level="2"] .kb-dial__thumb { left: 100%; }
/* aktiver Stop heller markiert */
.kb-dial[data-level="0"] .kb-dial__stop[data-stop="0"],
.kb-dial[data-level="1"] .kb-dial__stop[data-stop="1"],
.kb-dial[data-level="2"] .kb-dial__stop[data-stop="2"] { border-color: var(--kb-rot-akzent); }

.kb-dial__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kb-dial__label { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5; color: rgba(255,255,255,0.5); transition: color 260ms; }
.kb-dial__label:nth-child(2) { text-align: center; }
.kb-dial__label:nth-child(3) { text-align: right; }
.kb-dial__label .num { display: block; font-size: 10px; color: var(--kb-rot-akzent); margin-bottom: 5px; }
.kb-dial__label:hover { color: rgba(255,255,255,0.8); }
.kb-dial[data-level="0"] .kb-dial__label[data-stop="0"],
.kb-dial[data-level="1"] .kb-dial__label[data-stop="1"],
.kb-dial[data-level="2"] .kb-dial__label[data-stop="2"] { color: #fff; }

/* Beschreibung der aktiven Stufe */
.kb-level__cards { margin-top: clamp(36px, 4vw, 52px); position: relative; }
.kb-level__card { display: none; gap: clamp(16px, 3vw, 40px); align-items: start; }
.kb-level__card.is-active { display: grid; grid-template-columns: auto 1fr; animation: kb-card-in 500ms var(--kb-ease); }
@keyframes kb-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.kb-level__card-tag { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.06; letter-spacing: -0.02em; color: var(--rp-beige); max-width: 12ch; }
.kb-level__card-p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.86); margin: 0; max-width: 60ch; }
.kb-level__card-p strong { color: #fff; font-weight: 700; }
@media (max-width: 720px){
  .kb-dial__labels { grid-template-columns: 1fr; gap: 18px; }
  .kb-dial__label, .kb-dial__label:nth-child(2), .kb-dial__label:nth-child(3) { text-align: left; }
  .kb-level__card.is-active { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   4 · FÜR WEN? · HELL Beige · helle Karten · Standard-Layout
   ============================================================ */
.kb-fit { background: var(--kb-beige); color: var(--kb-ink); padding: clamp(96px, 12vw, 152px) 0; }
.kb-fit__head { max-width: 880px; margin-bottom: clamp(44px, 5vw, 64px); }
.kb-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: var(--kb-rot-anker); margin: 0; max-width: 18ch; text-wrap: balance; }
.kb-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--kb-rot-akzent); }
.kb-fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kb-fit__card { background: #fff; border: 1px solid var(--kb-line); border-radius: 22px; padding: clamp(28px, 3vw, 40px); transition: border-color 280ms, transform 280ms var(--kb-ease), box-shadow 280ms; }
.kb-fit__card:hover { border-color: rgba(220,13,29,0.5); transform: translateY(-4px); box-shadow: 0 30px 64px -40px rgba(26,20,20,0.34); }
.kb-fit__card--no { background: #f4ece0; }
.kb-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(--kb-rot-anker); margin: 0 0 16px; }
.kb-fit__card--no .kb-fit__lead { color: var(--kb-ink); }
.kb-fit__p { font-size: 16.5px; line-height: 1.65; color: var(--kb-body); margin: 0; }
.kb-fit__p + .kb-fit__p { margin-top: 14px; }
.kb-fit__p a { color: var(--kb-rot-anker); border-bottom: 1px solid rgba(109,23,35,0.4); font-weight: 700; transition: border-color 200ms; }
.kb-fit__p a:hover { border-color: var(--kb-rot-anker); }
@media (max-width: 820px){ .kb-fit__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · DUNKELROT (Anker 2) · Count-up
   ============================================================ */
.kb-diff { background: var(--kb-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.kb-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%); }
.kb-diff__inner { position: relative; z-index: 1; }
.kb-diff__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 56px); }
.kb-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; }
.kb-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kb-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 58ch; }
.kb-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kb-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 280ms, transform 280ms var(--kb-ease); }
.kb-point:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.kb-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; }
.kb-point__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; }
.kb-diff__close { margin: clamp(40px, 4vw, 56px) 0 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.88); max-width: 72ch; }
.kb-diff__close strong { color: #fff; font-weight: 700; }
.kb-diff__cta { margin-top: clamp(32px, 3.5vw, 44px); }
.kb-diff__micro { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
@media (max-width: 900px){ .kb-points{ grid-template-columns: 1fr; } }

.kb-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; }
.kb-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; }
.kb-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; }
.kb-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){ .kb-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* ============================================================
   6 · STIMMEN · HELL · großes Zitat + dezentes Bild-Card
   ============================================================ */
.kb-quote { background: var(--kb-beige); color: var(--kb-ink); padding: clamp(100px, 13vw, 160px) 0; }
.kb-quote__inner { max-width: 1180px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.kb-quote__mark { font-family: var(--font-serif); font-size: 110px; line-height: 0.6; color: rgba(109,23,35,0.30); display: block; margin-bottom: 4px; }
.kb-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 40px); line-height: 1.3; letter-spacing: -0.01em; color: var(--kb-rot-anker); margin: 0 0 36px; text-wrap: balance; }
.kb-quote__q .s-ph { color: var(--kb-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.5em; line-height: 1.7; }
.kb-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(--kb-rot-anker); }
.kb-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--kb-rot-anker); flex-shrink: 0; }
.kb-quote__attr .s-ph { color: var(--kb-rot-akzent); }
.kb-quote__note { margin-top: 32px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #8a7e66; max-width: 60ch; }
.kb-quote__media { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(26,20,20,0.4); }
.kb-quote__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px){ .kb-quote__inner{ grid-template-columns: 1fr; } .kb-quote__media{ aspect-ratio: 16/10; order: -1; } }

/* ============================================================
   7 · FAQ · HELL Hellgrau · Akkordeon (b-q)
   ============================================================ */
.b-faq { background: var(--kb-grey); color: var(--kb-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(--kb-rot-anker); margin: 0; max-width: 14ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: var(--kb-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(--kb-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(--kb-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(--kb-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(--kb-body); max-width: 80ch; }
.b-q__a-inner .s-ph { color: var(--kb-rot-akzent); font-family: var(--font-mono); font-size: 0.85em; }
.b-q.is-open .b-q__a { max-height: 720px; }
.b-faq__foot { margin-top: 40px; }
@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 · HELL Beige · 3-Spalten-Raster · helle Karten
   ============================================================ */
.kb-loc { background: var(--kb-beige); color: var(--kb-ink); padding: clamp(96px, 12vw, 152px) 0; }
.kb-loc__head { max-width: 820px; margin-bottom: clamp(40px, 5vw, 56px); }
.kb-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: var(--kb-rot-anker); margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.kb-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--kb-rot-akzent); }
.kb-loc__lede { font-size: 18px; line-height: 1.6; color: var(--kb-ink); margin: 0; max-width: 64ch; }
.kb-loc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kb-loc-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 22px; padding: 0; display: flex; flex-direction: column; min-height: 220px; overflow: hidden; transition: border-color 280ms, transform 280ms var(--kb-ease), box-shadow 280ms; }
.kb-loc-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.kb-loc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--kb-ease); }
.kb-loc-card:hover .kb-loc-card__media img { transform: scale(1.06); }
.kb-loc-card__body { padding: 24px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.kb-loc-card:hover { border-color: rgba(220,13,29,0.5); transform: translateY(-5px); box-shadow: 0 30px 64px -40px rgba(26,20,20,0.34); }
.kb-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--kb-rot-akzent); }
.kb-loc-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -0.015em; color: var(--kb-rot-anker); margin: 14px 0 6px; }
.kb-loc-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7e66; margin: 0; }
.kb-loc-card__meta { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.6; color: #a89c84; }
.kb-loc-card__meta .s-ph { color: var(--kb-rot-akzent); }
.kb-loc-card__arrow { margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border: 1px solid rgba(26,20,20,0.18); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--kb-ink); transition: background 220ms, border-color 220ms, color 220ms, transform 320ms var(--kb-ease); }
.kb-loc-card:hover .kb-loc-card__arrow { background: var(--kb-rot-akzent); border-color: var(--kb-rot-akzent); color: #fff; transform: translate(2px,-2px); }
.kb-loc__close { margin: clamp(40px, 5vw, 56px) 0 0; padding-top: 28px; border-top: 1px solid var(--kb-line); font-size: 16px; line-height: 1.7; color: var(--kb-body); max-width: 80ch; }
.kb-loc__note { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: var(--kb-rot-akzent); max-width: 84ch; }
@media (max-width: 980px){ .kb-loc__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .kb-loc__grid{ grid-template-columns: 1fr; } .kb-loc-card{ min-height: 0; } }

/* ============================================================
   9 · FINALER CTA · DUNKEL Tiefschwarz (Anker 3) + roter Glow
   ============================================================ */
.kb-final { background: var(--kb-dark); color: #fff; padding: clamp(120px, 15vw, 188px) 24px; position: relative; overflow: hidden; text-align: center; }
.kb-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(220,13,29,0.42), rgba(109,23,35,0.28) 36%, transparent 64%); }
.kb-final__inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.kb-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; }
.kb-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kb-final__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 40px; max-width: 54ch; }
.kb-final__row { display: flex; justify-content: center; }
.kb-final .b-btn--big { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.kb-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(--kb-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; }

/* ============================================================
   SEITENSPEZIFISCH · NUR „Kickboxen Erwachsene (High End)"
   Feedback Dominik, 01.08.2026
   ------------------------------------------------------------
   ACHTUNG: Diese Datei wird von DREI Seiten geladen —
   Kickboxen Erwachsene, Kickbox-Fitness (body.kbf) und
   Fitness bei Randori-Pro (body.fh). Die Änderungen unten
   betreffen ausdrücklich nur die Kickboxen-Erwachsenen-Seite,
   deshalb der Guard .kb:not(.fh):not(.kbf). Die Basisregeln
   weiter oben bleiben unangetastet, damit die beiden anderen
   Seiten exakt so aussehen wie bisher.
   Soll eine Anpassung später für alle drei Seiten gelten,
   genügt es, den jeweiligen :not()-Guard zu entfernen.
   ============================================================ */

/* 0 · Seitlicher Randabstand wie auf „Jiu-Jitsu Budokai Erwachsene".
   Zwei Abweichungen waren die Ursache:
   a) .kb-hero .b-wrap (Z. 98) 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 content-box (1480 + 2x40 = 1560 Gesamtbreite).
      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. */
.kb:not(.fh):not(.kbf) .b-wrap { box-sizing: border-box; }
.kb:not(.fh):not(.kbf) .kb-hero .b-wrap { width: 100%; max-width: 1480px; margin-inline: auto; }

/* 1 · Hero kompakter · Abstände oben und unten kleiner.
   Referenz: Boxen und Krav Maga fahren clamp(132px,18vh,184px)
   oben / clamp(72px,9vw,116px) unten ganz ohne min-height. */
.kb:not(.fh):not(.kbf) .kb-hero {
  min-height: min(80vh, 720px);
  padding: clamp(118px, 15vh, 165px) 0 clamp(64px, 7vw, 96px);
}
@media (max-width: 940px){
  .kb:not(.fh):not(.kbf) .kb-hero { min-height: 70vh; }
}

/* 1b · Scrim nachgezogen. Durch den kürzeren Hero rutscht der
   Textblock nach oben in die hellen Deckenlichter des Fotos.
   Der alte Scrim dunkelte nur von unten ab (0deg-Layer, oberhalb
   60% transparent) — oben blieb der Text auf hellem Bild stehen.
   Zusätzlicher 180deg-Layer, der die oberen ~46% abdunkelt.
   Gemessen bei 1440px: H1 3.80:1 -> 6.58:1. */
.kb:not(.fh):not(.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.55) 0%, rgba(16,10,10,0.18) 26%, rgba(16,10,10,0) 46%),
  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){
  .kb:not(.fh):not(.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 in KEINER
   Scrim-Variante WCAG AA (gemessen: 1,07:1 bis max. 2,13:1).
   Boxen und Krav Maga lösen dieselbe Stelle bereits mit
   var(--rp-beige) — damit auch hier einheitlich und AA-konform
   (gemessen 5,49:1). Nur der Hero-Kicker, die Kicker der
   übrigen Sektionen bleiben unverändert. */
.kb:not(.fh):not(.kbf) .kb-hero .b-kicker { color: var(--rp-beige); }
.kb:not(.fh):not(.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. */
.kb:not(.fh):not(.kbf) .kb-hero__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; width: fit-content;
}
.kb:not(.fh):not(.kbf) .kb-hero__micro { text-align: center; }

/* 4 · Sektion „Die Substanz" · gleiche Behandlung wie 2b,
   damit beide CTA-Stellen der Seite identisch aussehen. */
.kb:not(.fh):not(.kbf) .kb-diff__cta {
  display: flex; flex-direction: column; align-items: center;
  width: fit-content;
}
.kb:not(.fh):not(.kbf) .kb-diff__micro { text-align: center; }

/* 5 · Zitatsektion · Variante A (bildlos).
   Das Grid war zweispaltig für ein .kb-quote__media, das im
   Markup nicht existiert — rechts blieb eine leere Spalte.
   Einspaltig, Block mittig, Textbreite begrenzt. */
.kb:not(.fh):not(.kbf) .kb-quote__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  margin-inline: auto;
}
.kb:not(.fh):not(.kbf) .kb-quote__text { max-width: 64ch; }

/* 7 · Die beiden Links unter der FAQ deutlich trennen.
   Standen vorher 3px auseinander und lasen sich als Kette. */
.kb:not(.fh):not(.kbf) .b-faq__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 44px;
}
@media (max-width: 640px){
  .kb:not(.fh):not(.kbf) .b-faq__foot {
    flex-direction: column; align-items: flex-start; gap: 22px;
  }
}