/* ============================================================
   RANDORI PRO · Jiu-Jitsu Budokai Kids v2 „High End"
   Additiv zu tokens.css + standort.css + jiu-jitsu-budokai-kids.css
   und standort-v3.css (Progress, Glanz, Reveals, Quote, FAQ).
   Eigene Komponenten (.k-*) bekommen hier ihre Politur.
   Aktiv ausschließlich unter body.v3.
   ============================================================ */

/* ── Header · helle Glasleiste (überschreibt die dunkle) ───── */
.v3 .s-header.k-header--light.is-scrolled { background: rgba(250, 247, 242, 0.78); box-shadow: 0 1px 0 rgba(26, 20, 20, 0.08), 0 12px 40px -18px rgba(26, 20, 20, 0.18); }

/* ── Hero-Media · Politur ──────────────────────────────────── */
.v3 .k-hero__bg { will-change: transform; }

/* ── Hero · vollflächiges Loop-Video als Hintergrund ──────────
   Überschreibt das helle Split-Layout der Basis NUR auf der v2-
   Seite (.v3). Video full-bleed hinter dem Inhalt; warmer Cremé-
   Verlauf links hält Kicker/H1/Subtext/Trust lesbar, rechts
   bleibt das Trainingsvideo sichtbar. „Warm & hell" bleibt so
   erhalten. ──────────────────────────────────────────────── */
.v3 .k-hero { position: relative; overflow: hidden; min-height: clamp(640px, 86vh, 900px); display: flex; align-items: center; padding: 120px 0 88px; background: var(--rp-tiefschwarz); }
.v3 .k-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.v3 .k-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(250,247,242,0.96) 0%, rgba(250,247,242,0.92) 30%, rgba(250,247,242,0.6) 46%, rgba(250,247,242,0.18) 64%, rgba(250,247,242,0) 82%),
    linear-gradient(180deg, rgba(250,247,242,0.3) 0%, rgba(250,247,242,0) 22%, rgba(250,247,242,0) 68%, rgba(26,10,14,0.26) 100%);
}
/* Hero-Schrift · dunkel & markenkonform, mit zartem Cremé-Halo als
   Lesbarkeits-Absicherung dort, wo der Schleier dünner wird. */
.v3 .k-hero__text .s-kicker { color: var(--rp-rot-anker); }
.v3 .k-hero__h1 { color: var(--rp-rot-anker); text-shadow: 0 1px 2px rgba(250, 247, 242, 0.55); }
.v3 .k-hero__sub { color: var(--rp-tiefschwarz); text-shadow: 0 1px 2px rgba(250, 247, 242, 0.6); }
.v3 .k-hero__trust { color: var(--rp-grau-7012); }
.v3 .k-hero__trust b { color: var(--rp-rot-anker); }
.v3 .k-hero__trust i { color: var(--rp-grau-muted); }
.v3 .k-hero__inner { position: relative; z-index: 2; width: 100%; grid-template-columns: 1fr; }
.v3 .k-hero__text { max-width: 620px; }
/* Ton-Button: aus der alten Karte gelöst → unten rechts im Hero */
.v3 .k-hero__sound { position: absolute; right: clamp(20px, 4vw, 48px); top: auto; bottom: clamp(20px, 4vw, 40px); z-index: 3; }
@media (max-width: 820px){
  /* Schmaler Viewport: Text läuft über das Video → kräftigerer Schleier */
  .v3 .k-hero { min-height: clamp(560px, 78vh, 760px); }
  .v3 .k-hero::after { background:
    linear-gradient(180deg, rgba(250,247,242,0.95) 0%, rgba(250,247,242,0.86) 46%, rgba(250,247,242,0.5) 80%, rgba(26,10,14,0.26) 100%); }
  .v3 .k-hero__text { max-width: none; }
  /* Trust-Zeile liegt hier über dem dunklen Video-Bereich → helle Töne */
  .v3 .k-hero__trust { color: rgba(255,255,255,0.88); border-top-color: rgba(255,255,255,0.28); text-shadow: 0 1px 10px rgba(20,8,11,0.55); }
  .v3 .k-hero__trust b { color: #fff; }
  .v3 .k-hero__trust i { color: rgba(255,255,255,0.4); }
  .v3 .k-hero__trust .star { color: var(--rp-rot-akzent); }
}

/* ── Karten & Fotos · sanfte Lifts (immer aktiv) ───────────── */
.v3 .k-card { transition: transform 300ms var(--v3-ease), box-shadow 300ms var(--ease-standard); }
.v3 .k-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -36px rgba(26, 20, 20, 0.35); }
.v3 .k-photo img { transition: transform 500ms var(--v3-ease); }
.v3 .k-photo:hover img { transform: scale(1.03); }
.v3 .k-loc { transition: transform 300ms var(--v3-ease), box-shadow 300ms var(--ease-standard); }
.v3 .k-loc:hover { transform: translateY(-5px); box-shadow: 0 38px 80px -44px rgba(26, 20, 20, 0.6); }
/* ── Film · 16:9-Leinwand · Schatten vertieft sich bei Hover ─ */
.v3 .k-film__frame { transition: box-shadow 300ms var(--ease-standard); }
.v3 .k-film__frame:hover { box-shadow: 0 78px 140px -54px rgba(26, 20, 20, 0.68); }
.v3 .k-why__item .k-why__it-h { transition: color 200ms var(--ease-standard); }
.v3 .k-why__item:hover .k-why__it-h { color: var(--rp-beige); }

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   (Keyframes v3-rise / v3-fade kommen aus standort-v3.css)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · Text gestaffelt, Hintergrundvideo blendet auf */
  .v3 .k-hero .s-kicker { animation: v3-rise 900ms var(--v3-ease) 150ms backwards; }
  .v3 .k-hero__h1 { animation: v3-rise 1000ms var(--v3-ease) 280ms backwards; }
  .v3 .k-hero__sub { animation: v3-rise 1000ms var(--v3-ease) 440ms backwards; }
  .v3 .k-hero__cta { animation: v3-rise 1000ms var(--v3-ease) 580ms backwards; }
  .v3 .k-hero__trust { animation: v3-fade 1000ms var(--ease-standard) 850ms backwards; }
  .v3 .k-hero__bg { animation: v3-fade 1300ms var(--ease-standard) 80ms backwards; }
  .v3 .k-hero__sound { animation: v3-fade 900ms var(--ease-standard) 1000ms backwards; }

  @keyframes v3-media-in { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes v3-badge-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

  /* ── AKZENT · „Gürtelweg" in der Lernliste ─────────────────
     JS setzt .is-lit auf .k-learn__list, sobald sie sichtbar
     ist: Die Trennlinien ziehen sich nacheinander in Akzentrot
     durch, die Index-Nummern poppen dazu auf — wie die ersten
     vier Stationen auf dem Weg zum Gürtel. */
  .v3.js-motion .k-learn__item { position: relative; }
  .v3.js-motion .k-learn__item::after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--rp-rot-akzent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--v3-ease); }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item::after { transform: scaleX(1); }
  .v3.js-motion .k-learn__idx { display: inline-block; opacity: 0.25; transform: scale(0.7); transition: opacity 450ms var(--ease-standard), transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .v3.js-motion .k-learn__list.is-lit .k-learn__idx { opacity: 1; transform: scale(1); }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(1)::after { transition-delay: 150ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(2)::after { transition-delay: 600ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(3)::after { transition-delay: 1050ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(4)::after { transition-delay: 1500ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(1) .k-learn__idx { transition-delay: 200ms, 200ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(2) .k-learn__idx { transition-delay: 650ms, 650ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(3) .k-learn__idx { transition-delay: 1100ms, 1100ms; }
  .v3.js-motion .k-learn__list.is-lit .k-learn__item:nth-child(4) .k-learn__idx { transition-delay: 1550ms, 1550ms; }

  /* Testimonial · Wort-für-Wort-Reveal → ein ruhiger Fade-up (Motion-Vokabular) */
  .v3.js-motion .s-quote__q .v3-w { opacity: 1; transform: none; filter: none; transition: none; }
  .v3.js-motion .s-quote__q { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard); }
  .v3.js-motion .s-quote.is-in .s-quote__q { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REVIEW-POLITUR (Phase 2)
   ============================================================ */

/* Hero-Microcopy unter der CTA-Zeile */
.v3 .k-hero__micro { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-7012); }

/* Sektions-CTA am Ende von „Warum Eltern uns vertrauen"
   Button + Micro-Zeile bilden eine schmale Spalte, die sich auf die
   Buttonbreite zusammenzieht. Die Micro-Zeile sitzt dadurch mittig
   unter dem Button — auf Desktop wie auf Mobil. */
.v3 .k-why__cta { margin-top: 64px; display: flex; flex-direction: column; align-items: center; width: fit-content; }
.v3 .k-why__cta-micro { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-align: center; }

/* FAQ · Folge-Link als regulärer Pfeil-Link mit Touch-Höhe */
.v3 .s-q__more { display: block; margin-top: 12px; }
.v3 .s-q__more .k-arrowlink { min-height: 44px; display: inline-flex; align-items: center; }

/* Def-Body · mobile Straffung (reine Ausblendung, keine Textänderung) */
@media (max-width: 600px) {
  .v3 .k-def__tail { display: none; }
}

/* Quote-Mark mobil: nicht in die erste Zeile ragen lassen */
@media (max-width: 600px) {
  .v3 .s-quote__mark { line-height: 1; margin-bottom: 10px; font-size: 64px; }
}

/* Mobile Sektionsabstände vereinheitlicht auf 96px */
@media (max-width: 900px) {
  .v3 .k-who { padding: 96px 0; }
  .v3 .s-faq--light { padding: 96px 0; }
  .v3 .s-quote { padding: 96px 0; }
}