/* ============================================================
   RANDORI-PRO · Boxen (High End)
   Sportartenseite · Template B „Ergebnis-Fokus" + Stimmung 3
   „Dunkel & Intensiv". Reine Erwachsenenseite (ab 14).
   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, dunkles 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: „Distanz & Timing" (§2).
   · Standorte: festes 3-Spalten-Raster (genau drei Standorte).
   Aktiv ausschließlich unter body.bv3.box.
   ============================================================ */

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

/* ── Page-Grundlage ────────────────────────────────────────── */
body.bv3.box { background: var(--box-dark); color: var(--box-body); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.box a { color: inherit; text-decoration: none; }
.box 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: .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).
   Gescopet auf .box, weil css/boxen.css auch von „Kickboxen Erwachsene",
   „Kickbox-Fitness" und „Fitness bei Randori-Pro" geladen wird; deren
   Layout bleibt dadurch unangetastet.
   Unter 720px greift weiter padding: 0 24px — dort ändert sich nichts,
   weil der Wrap ohnehin schmaler als max-width ist. */
.box .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(--box-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 16px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--box-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(--box-rot-anker); }
.b-kicker--anker::before { background: var(--box-rot-anker); }
.b-kicker--center { justify-content: center; }

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

/* ── Striped Foto-Platzhalter ──────────────────────────────── */
.box-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); }
.box-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; }
.box-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; }
.box-ph--beige { background: repeating-linear-gradient(135deg, #e9e0d0 0 16px, #e2d8c5 16px 32px); border-color: rgba(74,58,40,0.18); }
.box-ph--beige .box-ph__note { color: #6a5c44; }
.box-ph--beige .box-ph__tag { color: #4a3a28; background: rgba(237,228,210,0.85); border-color: rgba(74,58,40,0.22); }

/* ============================================================
   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(--box-rot-akzent); color: #fff; border-color: var(--box-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
   ============================================================ */
.box-hero { position: relative; background: var(--box-dark); color: #fff; overflow: hidden; padding: clamp(132px, 18vh, 184px) 0 clamp(72px, 9vw, 116px); }
.box-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; z-index: 0; }
.box-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,8,8,0.95) 0%, rgba(10,8,8,0.84) 32%, rgba(10,8,8,0.46) 58%, rgba(10,8,8,0.14) 80%, transparent 96%),
    linear-gradient(0deg, rgba(10,8,8,0.72) 0%, transparent 32%),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.22), transparent 56%),
    radial-gradient(ellipse 90% 70% at 10% 100%, rgba(109,23,35,0.30), transparent 60%); }
.box-hero .b-wrap { position: relative; z-index: 2; width: 100%; }
.box-hero__inner { display: block; }
.box-hero__text { max-width: 640px; }
.box-hero .b-kicker { color: var(--rp-beige); }
.box-hero .b-kicker::before { background: var(--rp-beige); }
.box-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.6vw, 86px); 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.4); }
.box-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--box-rot-akzent); }
.box-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.92); 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 .mma-hero__cta / .kb-hero__cta). */
.box-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.box-hero__cta .b-btn { justify-content: center; }
.box-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); }
.box-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.9); line-height: 1.9; }
@media (max-width: 940px){
  .box-hero__text { max-width: none; }
  .box-hero__bg { object-position: 66% 26%; }
  .box-hero__scrim { background:
      linear-gradient(180deg, rgba(10,8,8,0.9) 0%, rgba(10,8,8,0.8) 45%, rgba(10,8,8,0.92) 100%),
      radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.16), transparent 56%); }
}

/* ============================================================
   2 · WAS IST BOXEN? · DUNKELROT · weiße Schrift · Prosa
   (trägt das Signatur-Element „Distanz & Timing")
   ============================================================ */
.box-def { background: var(--box-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.box-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%); }
.box-def__inner { position: relative; z-index: 1; }
.box-def__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 60px); }
.box-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; }
.box-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.box-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; }
.box-def__body { columns: 2; column-gap: clamp(40px, 5vw, 72px); max-width: 1180px; }
.box-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; break-inside: avoid; }
.box-def__body p:last-child { margin-bottom: 0; }
.box-def__body strong { color: #fff; font-weight: 700; }
.box-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
@media (max-width: 820px){ .box-def__body{ columns: 1; } }

/* ── SIGNATUR · DISTANZ & TIMING · die eine Schlagdistanz ──────
   Zwei Marker auf einer Distanzlinie. Die ideale Schlagdistanz ist
   ein hervorgehobenes Band; der „Du"-Marker arbeitet sich hinein,
   setzt den Treffer und löst sich wieder aus der Reichweite —
   der Rein-raus-Rhythmus des Boxens. Beschriftung:
   DISTANZ · TIMING · BEWEGUNG. EINE Distanz, beherrscht über
   Timing und Beinarbeit — KEIN Mehr-Distanzen-Modell.
   Grundzustand (kein JS / reduced): „Du" steht in der
   Schlagdistanz, alles sichtbar. Auf dem dunkelroten Grund. */
.box-range { margin-top: clamp(56px, 7vw, 96px); }

/* Zweispaltig · links Text, rechts die Animation (Feedback 04.08.2026).
   minmax(0,…) auf beiden Spuren, damit die Arena nicht über ihre
   Mindest-Inhaltsbreite hinaus aus dem Grid drückt. */
.box-range__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.box-range__text { min-width: 0; }
.box-range__intro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 10px; display: flex; align-items: center; gap: 14px; }
.box-range__intro::before { content:""; width: 40px; height: 1px; background: var(--rp-beige); flex-shrink: 0; }
.box-range__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; max-width: 24ch; }
.box-range__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
/* margin-bottom entfällt in der Spalte — der Grid-Gap trennt jetzt. */
.box-range__sub { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; max-width: 62ch; }

@media (max-width: 900px){
  /* wieder einspaltig: Text → Animation → Karten */
  .box-range__top { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
}

/* Distanz-Feld · feste Proportion */
.box-field { position: relative; aspect-ratio: 1000 / 380; width: 100%; max-width: 1180px;
  border: 1px solid rgba(212,201,181,0.2); border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 90% at 82% 50%, rgba(220,13,29,0.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(212,201,181,0.05) 0 1px, transparent 1px 80px);
  overflow: hidden; }

/* Distanzlinie · die Achse, auf der alles passiert */
.box-axis { position: absolute; left: 7%; right: 7%; top: 56%; height: 2px; background: linear-gradient(90deg, rgba(212,201,181,0.16), rgba(212,201,181,0.5) 50%, rgba(212,201,181,0.16)); }
.box-axis__cap { position: absolute; top: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid rgba(212,201,181,0.5); }
.box-axis__cap--l { left: 0; }
.box-axis__cap--r { right: 0; transform: translate(50%,-50%) rotate(45deg); }

/* Mess-Skala unter der Achse */
.box-axis__tick { position: absolute; top: calc(56% + 6px); width: 1px; height: 8px; background: rgba(212,201,181,0.28); }

/* Ideale Schlagdistanz · hervorgehobenes Band */
.box-band { position: absolute; top: 14%; bottom: 22%; left: 54%; width: 22%; border-radius: 14px;
  background: rgba(220,13,29,0.10); border: 1px dashed rgba(220,13,29,0.55); z-index: 1; }
.box-band__label { position: absolute; left: 50%; top: -12px; transform: translate(-50%,-100%); white-space: nowrap; font-family: var(--font-mono); font-size: clamp(9px, 0.9vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--box-rot-akzent); }
.box-band__sub { display: block; color: rgba(212,201,181,0.7); letter-spacing: 0.12em; margin-top: 3px; }

/* Verbindung · die gemessene Distanz zwischen Du und Gegner */
.box-gap { position: absolute; top: 56%; height: 2px; background: rgba(212,201,181,0.55); transform: translateY(-50%); z-index: 2; transition: background 280ms var(--box-ease); }
.box-field.is-live .box-gap { background: var(--box-rot-akzent); }

/* Marker · auf der Achse sitzend */
.box-mark { position: absolute; top: 56%; transform: translate(-50%,-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; }
.box-mark__dot { width: 22px; height: 22px; border-radius: 999px; background: rgba(26,12,14,0.85); border: 2px solid var(--rp-beige); box-shadow: 0 0 0 5px rgba(212,201,181,0.1); }
.box-mark__label { position: absolute; top: -14px; transform: translateY(-100%); font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 1.15vw, 15px); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.box-mark__role { position: absolute; bottom: -14px; transform: translateY(100%); font-family: var(--font-mono); font-size: clamp(8px, 0.8vw, 10px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(212,201,181,0.72); white-space: nowrap; }
.box-mark--opp .box-mark__dot { background: rgba(212,201,181,0.16); border-color: rgba(212,201,181,0.6); }
.box-mark--you .box-mark__dot { background: var(--box-rot-akzent); border-color: #fff; }
.box-field.is-live .box-mark--you .box-mark__dot { box-shadow: 0 0 0 6px rgba(220,13,29,0.22), 0 0 26px rgba(220,13,29,0.55); }

/* Treffer · Puls am Gegner, wenn Du in der Schlagdistanz bist */
.box-hit { position: absolute; top: 56%; transform: translate(-50%,-50%); z-index: 5; font-family: var(--font-display); font-weight: 800; font-size: clamp(12px, 1.3vw, 17px); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; opacity: 0; pointer-events: none; }
.box-hit::before { content:""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--box-rot-akzent); transform: translate(-50%,-50%) scale(0.4); opacity: 0; }

/* Beschriftung DISTANZ · TIMING · BEWEGUNG */
/* Karten statt flacher Textzeilen (Feedback 04.08.2026).
   Bauform wie .mma-phase im .mma-dist__track: Nummer, Titel, kurze
   Beschreibung auf ruhiger Fläche. Farben von der Boxen-Seite —
   abgesetzte dunkle Fläche auf dem dunkelroten Grund, Akzentrot für
   die Nummer und die obere Kante, Beige für den Fließtext. */
.box-range__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(40px, 4.5vw, 64px); }
.box-leg { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(22px, 2.2vw, 32px); border-radius: 18px;
  background: rgba(10,8,8,0.28); border: 1px solid rgba(212,201,181,0.16);
  border-top: 3px solid var(--box-rot-akzent); }
.box-leg__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--box-rot-akzent); }
.box-leg__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.7vw, 22px); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.box-leg__p { font-size: 14px; line-height: 1.58; color: rgba(212,201,181,0.86); max-width: 34ch; }

@media (max-width: 900px){
  /* Karten untereinander */
  .box-range__legend { grid-template-columns: 1fr; gap: 16px; }
}

.box-range__foot { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 28px; border-top: 1px solid rgba(212,201,181,0.22); font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 28px); line-height: 1.38; color: var(--rp-beige); max-width: 46ch; text-wrap: balance; }
.box-range__foot em { font-style: italic; color: #fff; }

@media (max-width: 640px){
  .box-field { aspect-ratio: 1000 / 520; }
  .box-mark__label { font-size: 12px; }
}

/* ── SIGNATUR · ALTERNATIVE · RADAR · konzentrische Distanzringe ──
   Aufsicht: der Gegner im Zentrum, umgeben von Distanzringen.
   Die ideale Schlagdistanz ist EIN hervorgehobener Ring. „Du"
   arbeitet sich über Beinarbeit (leichtes Kreisen) in die
   Schlagdistanz hinein, setzt den Treffer und löst sich wieder aus
   der Reichweite. Eine Distanz — kein Mehr-Distanzen-Modell.
   Grundzustand (kein JS / reduced): „Du" steht auf dem
   Schlagdistanz-Ring, alles sichtbar. */
/* max-width von 1180px auf 620px reduziert, damit die Arena in die rechte
   Spalte passt. aspect-ratio, Ringe und Radar-Geometrie bleiben unverändert
   — der Rahmen wird nur schmaler, die Animation behält ihre Proportionen.
   container-type: inline-size, weil die Beschriftungen vorher in vw
   rechneten: bei gleichbleibender Fensterbreite, aber halbiertem Rahmen
   wären sie relativ zu groß geworden und hätten sich überlagert. Über cqw
   skalieren sie jetzt mit dem Rahmen statt mit dem Fenster. */
.box-arena { position: relative; aspect-ratio: 1000 / 600; width: 100%; max-width: 620px;
  container-type: inline-size;
  border: 1px solid rgba(212,201,181,0.2); border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(220,13,29,0.12), transparent 58%),
    repeating-linear-gradient(0deg, rgba(212,201,181,0.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(212,201,181,0.04) 0 1px, transparent 1px 80px);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }

.box-radar { position: relative; aspect-ratio: 1; width: min(64%, 460px); }

/* Distanzringe */
.box-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; aspect-ratio: 1; }
.box-ring--outer  { width: 96%; border: 1px solid rgba(212,201,181,0.22); }
.box-ring--inner  { width: 30%; border: 1px dashed rgba(212,201,181,0.18); }
.box-ring--strike { width: 62%; border: 1px dashed rgba(220,13,29,0.6);
  box-shadow: 0 0 0 1px rgba(220,13,29,0.12), 0 0 36px -6px rgba(220,13,29,0.45) inset; }

/* Radial-Strahl · gemessene Distanz von Du zum Gegner */
.box-radar__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
.box-radar__beam { fill: none; stroke: rgba(212,201,181,0.5); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke 280ms var(--box-ease); }
.box-radar.is-live .box-radar__beam { stroke: var(--box-rot-akzent); }

/* Gegner · Zentrum */
.box-core { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; }
.box-core__dot { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 999px; background: rgba(212,201,181,0.16); border: 2px solid rgba(212,201,181,0.6); }
.box-core__label { position: absolute; left: 0; top: 16px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(10px, 1.95cqw, 13px); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,201,181,0.82); white-space: nowrap; }

/* Du · arbeitet sich rein und raus (JS positioniert left/top) */
.box-dot { position: absolute; left: 80%; top: 50%; transform: translate(-50%,-50%); z-index: 6; width: 20px; height: 20px; border-radius: 999px; background: var(--box-rot-akzent); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(220,13,29,0.16); transition: box-shadow 280ms var(--box-ease); }
.box-radar.is-live .box-dot { box-shadow: 0 0 0 6px rgba(220,13,29,0.24), 0 0 26px rgba(220,13,29,0.6); }
.box-dot__label { position: absolute; left: 50%; top: -10px; transform: translate(-50%,-100%); font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 2.2cqw, 15px); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; white-space: nowrap; }

/* Treffer-Puls · am Auftreffpunkt (JS setzt Position) */
.box-pulse { position: absolute; left: 80%; top: 50%; width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--box-rot-akzent); transform: translate(-50%,-50%) scale(0.3); opacity: 0; z-index: 4; pointer-events: none; }

/* Distanz-Beschriftungen · statisch */
.box-zone { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size: clamp(8px, 1.55cqw, 10.5px); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; z-index: 2; pointer-events: none; }
.box-zone--far    { left: 50%; top: 4%;  color: rgba(212,201,181,0.6); }
/* im schmaleren Rahmen 2 Prozentpunkte nach innen, sonst schneidet das
   „S" von Schlagdistanz die abgerundete Ecke des Rahmens an */
.box-zone--strike { left: 13%; top: 50%; color: var(--box-rot-akzent); }

@media (max-width: 640px){
  .box-field { aspect-ratio: 1000 / 520; }
  .box-arena { aspect-ratio: 1000 / 720; }
  .box-radar { width: min(82%, 340px); }
  .box-zone--strike { left: 6%; }
}

/* ============================================================
   3 · WAS LERNST DU? · HELL Beige
   ============================================================ */
.box-learn { background: var(--box-beige); color: var(--box-body); padding: clamp(96px, 12vw, 152px) 0; }
.box-learn__head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 52px); }
.box-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(--box-rot-anker); margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.box-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--box-rot-akzent); }
.box-learn__body { max-width: 1180px; }
.box-learn__body > p { font-size: 17px; line-height: 1.74; color: var(--box-ink); margin: 0 0 22px; max-width: 78ch; }
.box-learn__body strong { color: var(--box-rot-anker); font-weight: 700; }

/* Lern-Liste · die ersten Wochen */
.box-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: clamp(36px, 4vw, 52px) 0 0; }
.box-step { background: #fff; border: 1px solid rgba(74,58,40,0.14); border-radius: 20px; padding: clamp(24px, 2.6vw, 34px); transition: border-color 320ms, transform 520ms var(--box-ease), box-shadow 520ms; }
.box-step:hover { border-color: rgba(220,13,29,0.45); transform: translateY(-3px); box-shadow: 0 26px 54px -38px rgba(26,20,20,0.4); }
.box-step__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--box-rot-akzent); display: block; margin-bottom: 14px; }
.box-step__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.16; letter-spacing: -0.015em; color: var(--box-rot-anker); margin: 0 0 10px; }
.box-step__p { font-size: 15.5px; line-height: 1.62; color: var(--box-body); margin: 0; }
@media (max-width: 900px){ .box-steps{ grid-template-columns: 1fr; } }

/* Trainingsablauf · Bandzeile */
.box-flow { margin: clamp(36px, 4vw, 52px) 0 0; background: #fff; border: 1px solid rgba(74,58,40,0.14); border-radius: 20px; padding: clamp(24px, 2.6vw, 34px) clamp(24px, 3vw, 40px); }
.box-flow__lead { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--box-rot-anker); margin: 0 0 20px; display: flex; align-items: center; gap: 12px; }
.box-flow__lead::before { content:""; width: 32px; height: 1px; background: var(--box-rot-anker); }
.box-flow__row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.box-flow__step { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 6px; }
.box-flow__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--box-rot-akzent); }
.box-flow__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--box-rot-anker); }
.box-flow__meta { font-size: 13.5px; line-height: 1.5; color: var(--box-body); }
.box-flow__sep { align-self: center; color: rgba(220,13,29,0.55); font-size: 16px; }
@media (max-width: 760px){ .box-flow__sep{ display: none; } }

.box-learn__close { margin: clamp(36px, 4vw, 52px) 0 0; font-size: 17px; line-height: 1.74; color: var(--box-ink); max-width: 78ch; }
.box-learn__close strong { color: var(--box-rot-anker); font-weight: 700; }

/* ============================================================
   4 · FÜR WEN? · DUNKEL Tiefschwarz · weiße Schrift
   ============================================================ */
.box-fit { background: var(--box-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.box-fit__head { max-width: 860px; margin-bottom: clamp(44px, 5vw, 64px); }
.box-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; }
.box-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.box-fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.box-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(--box-ease), box-shadow 520ms; }
.box-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); }
.box-fit__card--caveat { background: rgba(20,8,8,0.4); }
.box-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; }
.box-fit__card--caveat .box-fit__lead { color: rgba(255,255,255,0.92); }
.box-fit__p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; }
.box-fit__p + .box-fit__p { margin-top: 14px; }
.box-fit__p a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); font-weight: 700; transition: border-color 200ms; }
.box-fit__p a:hover { border-color: #fff; }
@media (max-width: 820px){ .box-fit__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · DUNKELROT · weiße Schrift
   ============================================================ */
.box-diff { background: var(--box-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.box-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%); }
.box-diff__inner { position: relative; z-index: 1; }
.box-diff__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 56px); }
.box-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; }
.box-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.box-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 58ch; }
.box-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.box-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(--box-ease); }
.box-point:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.box-point__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.16; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 12px; }
.box-point__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; }
.box-diff__close { margin: clamp(36px, 4vw, 48px) 0 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.86); max-width: 76ch; }
.box-diff__close strong { color: #fff; font-weight: 700; }
@media (max-width: 820px){ .box-points{ grid-template-columns: 1fr; } }

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

/* ============================================================
   6 · STIMMEN · HELL Beige · großes Zitat + dezentes Bild-Card
   ============================================================ */
.box-quote { background: var(--box-beige); color: var(--box-ink); padding: clamp(100px, 13vw, 160px) 0; }
.box-quote__inner { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
.box-quote__mark { font-family: var(--font-serif); font-size: 110px; line-height: 0.6; color: rgba(109,23,35,0.32); display: block; margin-bottom: 4px; }
.box-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(--box-rot-anker); margin: 0 0 36px; text-wrap: balance; }
.box-quote__q .s-ph { color: var(--box-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.5em; line-height: 1.7; }
.box-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(--box-rot-anker); }
.box-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--box-rot-anker); flex-shrink: 0; }
.box-quote__attr .s-ph { color: var(--box-rot-akzent); }
.box-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; }
.box-quote__media { position: relative; align-self: stretch; min-height: 380px; border-radius: 24px; overflow: hidden; margin: 0; }
.box-quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
@media (max-width: 820px){ .box-quote__inner{ grid-template-columns: 1fr; } .box-quote__media{ min-height: 0; aspect-ratio: 16/10; order: -1; } }

/* ============================================================
   7 · FAQ · HELL Hellgrau · Akkordeon (b-q)
   ============================================================ */
.b-faq { background: var(--box-grey); color: var(--box-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(--box-rot-anker); margin: 0; max-width: 14ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: var(--box-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(--box-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(--box-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(--box-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(--box-body); max-width: 80ch; }
.b-q__a-inner .s-ph { color: var(--box-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 · DUNKEL Tiefschwarz · festes 3-Spalten-Raster
   ============================================================ */
.box-loc { background: var(--box-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.box-loc__head { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; }
.box-loc__head .b-kicker { justify-content: center; }
.box-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 0 24px; max-width: 18ch; text-wrap: balance; margin-inline: auto; }
.box-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.box-loc__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.84); margin: 0 auto; max-width: 64ch; }
.box-loc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; }
.box-loc-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: 0; display: flex; flex-direction: column; min-height: 260px; overflow: hidden; transition: border-color 320ms, transform 520ms var(--box-ease), box-shadow 520ms; }
.box-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); }
.box-loc-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.box-loc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--box-ease); }
.box-loc-card:hover .box-loc-card__media img { transform: scale(1.06); }
.box-loc-card__body { padding: 26px 30px 26px; display: flex; flex-direction: column; flex: 1; }
.box-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--box-rot-akzent); }
.box-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; }
.box-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; }
.box-loc-card__ring { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--box-rot-akzent); background: rgba(220,13,29,0.12); border: 1px solid rgba(220,13,29,0.4); padding: 6px 12px; border-radius: 999px; }
.box-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); }
.box-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(--box-ease); }
.box-loc-card:hover .box-loc-card__arrow { background: var(--box-rot-akzent); border-color: var(--box-rot-akzent); transform: translate(2px,-2px); }
.box-loc__note { margin: clamp(36px, 4vw, 48px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: var(--box-rot-akzent); max-width: 80ch; text-align: center; }
@media (max-width: 920px){ .box-loc__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .box-loc__grid{ grid-template-columns: 1fr; } .box-loc-card{ min-height: 0; } }

/* ============================================================
   9 · FINALER CTA · DUNKEL Tiefschwarz + roter Glow
   ============================================================ */
.box-final { background: var(--box-dark); color: #fff; padding: clamp(120px, 15vw, 188px) 24px; position: relative; overflow: hidden; text-align: center; }
.box-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%); }
.box-final__inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.box-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; }
.box-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.box-final__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 40px; max-width: 56ch; }
.box-final__row { display: flex; justify-content: center; }
.box-final .b-btn--big { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.box-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(--box-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; }
.bv3.box a.sticky-cta { color: #fff; }
@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; }

/* ============================================================
   REVIEW-EDITS · Mehr-lesen-Aufklapper, Section-CTAs, Preis-Anker
   ============================================================ */

/* §2 · Hintergrund-Disclosure (dunkelrot) */
.box-more { max-width: 1180px; margin: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid rgba(212,201,181,0.22); }
.box-more__sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); }
.box-more__sum::-webkit-details-marker { display: none; }
.box-more__sum::after { content: "+"; font-size: 17px; line-height: 1; color: var(--box-rot-akzent); }
.box-more[open] .box-more__sum::after { content: "\2013"; }
.box-more__p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 16px 0 0; max-width: 60ch; }
.box-more__p strong { color: #fff; font-weight: 700; }

/* §3 · zweiter Absatz enger an den ersten */
.box-learn__close + .box-learn__close { margin-top: 20px; }

/* §4 · Section-CTA (dunkel) */
.box-fit__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 5vw, 60px); }
.box-fit__cta-line { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2.3vw, 29px); line-height: 1.2; letter-spacing: -0.015em; color: #fff; margin: 0; max-width: 22ch; }

/* §5 · Section-CTA + Preis-Anker (dunkelrot) */
.box-diff__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: clamp(30px, 4vw, 44px); }
.box-diff__price { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; color: rgba(255,255,255,0.82); margin: 0; }
.box-diff__price strong { color: var(--rp-beige); font-weight: 700; }

/* ============================================================
   BILD-FLÄCHEN · §3b Bild-Band (full-bleed) + §5 Ring-Card
   Parallax via JS-Transform auf __fig; Entrance-Zoom auf dem
   Inhalt (Platzhalter heute, <img> nach Foto-Freigabe).
   ============================================================ */
.box-ph--fill { position: absolute; inset: 0; border-radius: 0; border: 0; }
.box-ph__tag--tr { position: absolute; left: auto; right: 16px; top: 16px; bottom: auto; z-index: 3; }

/* §3b · Bild-Band · full-bleed zwischen Beige und Tiefschwarz */
.box-photoband { position: relative; height: clamp(300px, 54vh, 600px); overflow: hidden; background: var(--box-dark); }
.box-photoband__fig { position: absolute; inset: -12% 0; margin: 0; will-change: transform; }
.box-photoband__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.box-photoband::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26,20,20,0.35), transparent 30%, transparent 68%, rgba(26,20,20,0.55)); }
.box-photoband__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(212,201,181,0.92); background: rgba(20,8,8,0.5); border: 1px solid rgba(212,201,181,0.25); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(4px); }
@media (max-width: 720px){ .box-photoband { height: clamp(240px, 42vh, 400px); } }

/* §5 · Ring-Card · breite Bildfläche vor dem Diff-Schluss */
.box-ringcard { position: relative; margin: clamp(36px, 4vw, 52px) 0 0; aspect-ratio: 21/9; border-radius: 24px; overflow: hidden; border: 1px solid rgba(212,201,181,0.2); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.7); }
.box-ringcard__fig { position: absolute; inset: -10% 0; margin: 0; will-change: transform; }
.box-ringcard__fig img { width: 100%; height: 100%; object-fit: cover; }
.box-ringcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(20,8,8,0.45)); }
.box-ringcard__cap { position: absolute; left: 20px; bottom: 18px; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,201,181,0.92); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 14px; border-radius: 999px; }
@media (max-width: 720px){ .box-ringcard { aspect-ratio: 16/10; } }
/* KI-Hinweis: mobil (16:10) bricht die Bildunterschrift um und belegt unten die ganze Breite -> Hinweis oben, links neben dem Kopf des Trainers am rechten Rand */
@media (max-width: 720px){ .box-ringcard .ki-hinweis { top: 10px; bottom: auto; right: 12%; } }