/* ============================================================
   RANDORI-PRO · Jiu-Jitsu Budokai Erwachsene v2 „High End"
   Additive Politur-Schicht. Ergänzt tokens.css + site.css +
   jiu-jitsu-budokai.css und die geteilte bold-v3.css (Progress,
   Glas-Header, [data-rv]-Reveals, Kicker-Linien, Button-Glanz,
   Hero-Entrance). Hier nur die seitenspezifischen Deltas:
   warmer Hero-Parallax, die Pfad-Signatur „Was lernst du",
   Karten-Hover und Kontrast-Feinschliff.
   Keine neuen Farben, Schriften oder Komponenten.
   Aktiv ausschließlich unter body.bv3. Respektiert
   prefers-reduced-motion.
   ============================================================ */

/* ── Hero · warme Bildebene (überschreibt die dunkle bold-v3-Ebene) ─ */
.bv3 .b-hero__bg {
  background:
    linear-gradient(180deg, rgba(40,10,14,0.62) 0%, rgba(40,10,14,0.16) 26%, rgba(58,12,18,0.30) 60%, rgba(33,8,12,0.86) 100%),
    url('../assets/fotos/sportarten-mich-verteidigen-koennen.webp') center 32% / cover no-repeat;
}

/* ── Karten · sanfter Hover-Lift ───────────────────────────── */
.bv3 .jjb-card { transition: border-color 260ms var(--ease-standard), transform 480ms var(--bv3-ease), box-shadow 480ms var(--ease-standard); }
.bv3 .jjb-card:hover { border-color: var(--rp-rot-akzent); transform: translateY(-5px); box-shadow: 0 26px 54px -30px rgba(109,23,35,0.5); }

/* ── FAQ · Frage färbt sich bei Hover (h3 statt span) ──────── */
.bv3 .b-q__btn h3 { transition: color 220ms var(--ease-standard); }
.bv3 .b-q__btn:hover h3 { color: var(--rp-rot-akzent); }
.bv3 .b-faq--light .b-q__btn:hover h3 { color: var(--rp-rot-anker); }

/* ── Editorial-Foto · weicher Schatten-Lift ────────────────── */
.bv3 .jjb-def__media { transition: box-shadow 500ms var(--ease-standard); }
.bv3 .jjb-def__media:hover { box-shadow: 0 44px 104px -48px rgba(109,23,35,0.6); }
.bv3 .jjb-def__media img { transition: transform 900ms var(--bv3-ease); }
.bv3 .jjb-def__media:hover img { transform: scale(1.04); }

/* ── Standort-Zeilen · Pfeil-Glanz beim Hover (Light-Variante) ─ */
.bv3 .b-locations--light .b-loc__arrow { transition: background 220ms, border-color 220ms, color 220ms, transform 220ms var(--bv3-ease); }
.bv3 .b-locations--light .b-loc:hover .b-loc__arrow { transform: translate(2px, -2px); }

/* ── Pfad-Signatur · Grundzustand IMMER sichtbar (kein JS / reduced) ─
   Ohne .js-motion bleibt die rote Linie voll gezeichnet und die
   Knoten ausgefüllt — die Sektion ist vollständig lesbar. */

@media (prefers-reduced-motion: no-preference) {

  /* ── Pfadlinie zeichnet sich Phase für Phase ───────────────
     JS setzt body.js-motion (bold-v3.js) und .is-lit auf .jjb-learn. */
  .bv3.js-motion .jjb-phases .jjb-phase__line { transform: scaleX(0); transition: transform 700ms linear; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase__line { transform: scaleX(1); }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(1) .jjb-phase__line { transition-delay: 200ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(2) .jjb-phase__line { transition-delay: 900ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(3) .jjb-phase__line { transition-delay: 1600ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(4) .jjb-phase__line { transition-delay: 2300ms; }

  /* Knoten leuchten nacheinander auf */
  .bv3.js-motion .jjb-phases .jjb-phase__node { background: transparent; border-color: rgba(255,255,255,0.4); transition: background 320ms var(--ease-standard), border-color 320ms var(--ease-standard), box-shadow 600ms var(--ease-standard); }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase__node { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); box-shadow: 0 0 0 6px rgba(220,13,29,0.16); }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(1) .jjb-phase__node { transition-delay: 150ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(2) .jjb-phase__node { transition-delay: 850ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(3) .jjb-phase__node { transition-delay: 1550ms; }
  .bv3.js-motion .jjb-learn.is-lit .jjb-phase:nth-child(4) .jjb-phase__node { transition-delay: 2250ms; }

  /* Count-up-Kennzahlen · „über"-Präfix folgt der hochzählenden Zahl */
  .bv3 [data-rv] .jjb-stat__n .pre,
  .bv3 [data-rv] .jjb-stat__n .u { opacity: 0; transition: opacity 600ms var(--ease-standard) 800ms; }
  .bv3 [data-rv].is-in .jjb-stat__n .pre,
  .bv3 [data-rv].is-in .jjb-stat__n .u { opacity: 1; }
}

/* ── Preis-Absatz · hervorgehoben (Review-Freigabe P4) ─────── */
.bv3 .jjb-diff__price { background: var(--rp-beige-deep); border-left: 3px solid var(--rp-rot-akzent); border-radius: 0 16px 16px 0; padding: 26px 30px; }

/* ============================================================
   SCHWEBENDER PROBETRAININGS-BUTTON (.sticky-cta) auch auf Desktop
   Grundstil kommt aus css/site.css + css/mobile-nav.css.
   css/jiu-jitsu-budokai.css:289 blendet den Button ab 721px per
   `display:none !important` aus; das wird hier zurückgenommen.
   Weil damit auch `.sticky-cta.hidden{display:none}` aus site.css
   wirkungslos wird, bildet der Aus-Zustand des JS hier über
   opacity/transform/pointer-events ab (wie das .s-sticky-System
   in mobile-nav.css).
   ============================================================ */
.bv3.jjb .sticky-cta {
  display: inline-flex !important;
  min-height: 44px;
  z-index: 80;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard), background 220ms var(--ease-standard);
}
.bv3.jjb .sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.bv3.jjb .sticky-cta:focus-visible { outline: 3px solid var(--rp-tiefschwarz); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .bv3.jjb .sticky-cta { transition: none; }
}