/* ============================================================
   RANDORI-PRO · Karate / Kyokushin Budokai v2 „High End"
   Additive Politur-Schicht. Ergänzt tokens.css + site.css +
   karate.css und die geteilte bold-v3.css (Progress, Glas-Header,
   [data-rv]-Reveals, Kicker-Linien, Button-Glanz, Hero-Parallax).

   Stimmung 4 „Traditionell & Ruhig": bewusst langsamere,
   bedächtige Bewegung. Keine Endlos-Loops, kein Snappen.
   Hier nur die seitenspezifischen Deltas: warm/erdiger Hero,
   die Pfad-Signatur „Was du lernst" auf hellem Grund, Karten-/
   Kachel-Hover und Kontrast-Feinschliff.
   Aktiv ausschließlich unter body.bv3.kar. Respektiert
   prefers-reduced-motion.
   ============================================================ */

:root { --kar-ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ── Hero · warme, erdige Bildebene (überschreibt bold-v3) ──── */
.bv3.kar .b-hero__bg {
  background:
    linear-gradient(180deg, rgba(26,15,10,0.66) 0%, rgba(30,17,11,0.26) 22%, rgba(40,22,15,0.16) 48%, rgba(30,16,11,0.52) 70%, rgba(18,11,8,0.92) 100%),
    linear-gradient(0deg, rgba(92,46,22,0.18), rgba(92,46,22,0.18)),
    url('../assets/fotos/karate-hero.webp') center 28% / cover no-repeat;
}

/* ── Editorial-Medium · ruhiger Schatten-Lift ──────────────── */
.bv3.kar .kar-def__media { transition: box-shadow 600ms var(--ease-standard); }
.bv3.kar .kar-def__media:hover { box-shadow: 0 44px 110px -52px rgba(45,26,18,0.6); }

/* ── „Für wen?" · Spalten heben sich leicht ────────────────── */
.bv3.kar .kar-fit__col { transition: border-color 320ms var(--ease-standard), transform 560ms var(--kar-ease-calm), box-shadow 560ms var(--ease-standard); }
.bv3.kar .kar-fit__col:hover { transform: translateY(-4px); box-shadow: 0 30px 64px -38px rgba(20,12,9,0.6); }

/* ── Wirkungs-Spalten (Körper/Kopf/Haltung) · sanfter Lift ─── */
.bv3.kar .kar-gain { transition: border-color 320ms var(--ease-standard), transform 560ms var(--kar-ease-calm), box-shadow 560ms var(--ease-standard); }
.bv3.kar .kar-gain:hover { border-color: var(--rp-rot-akzent); transform: translateY(-4px); box-shadow: 0 26px 56px -34px rgba(45,26,18,0.4); }

/* ── Standort-Kacheln · ruhiger Hover-Lift ─────────────────── */
.bv3.kar .kar-loc { transition: border-color 320ms var(--ease-standard), transform 560ms var(--kar-ease-calm), box-shadow 560ms var(--ease-standard); }
.bv3.kar .kar-loc:hover { border-color: var(--rp-rot-akzent); transform: translateY(-5px); box-shadow: 0 30px 64px -36px rgba(45,26,18,0.5); }
.bv3.kar .kar-loc__arrow { transition: background 220ms, border-color 220ms, color 220ms, transform 320ms var(--kar-ease-calm); }
.bv3.kar .kar-loc:hover .kar-loc__arrow { transform: translate(2px, -2px); }

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

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

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

  /* Reveals bewusst langsamer & weicher als der Bold-Standard */
  .bv3.kar [data-rv] { transition: opacity 1100ms var(--kar-ease-calm), transform 1100ms var(--kar-ease-calm); transform: translateY(26px); }

  /* ── Pfadlinie zeichnet sich Phase für Phase, bedächtig ─────
     JS setzt body.js-motion (bold-v3.js) und .is-lit auf .kar-learn. */
  .bv3.kar.js-motion .kar-phases .kar-phase__line { transform: scaleX(0); transition: transform 450ms linear; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase__line { transform: scaleX(1); }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(1) .kar-phase__line { transition-delay: 150ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(2) .kar-phase__line { transition-delay: 600ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(3) .kar-phase__line { transition-delay: 1050ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(4) .kar-phase__line { transition-delay: 1500ms; }

  /* Knoten füllen sich nacheinander (auf hellem Grund: hohl → rot) */
  .bv3.kar.js-motion .kar-phases .kar-phase__node { background: var(--rp-white); border-color: rgba(220,13,29,0.45); transition: background 420ms var(--ease-standard), border-color 420ms var(--ease-standard), box-shadow 700ms var(--ease-standard); }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase__node { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); box-shadow: 0 0 0 6px rgba(220,13,29,0.12); }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(1) .kar-phase__node { transition-delay: 100ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(2) .kar-phase__node { transition-delay: 550ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(3) .kar-phase__node { transition-delay: 1000ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(4) .kar-phase__node { transition-delay: 1450ms; }

  /* Phasen-Text steigt mit der Linie ruhig auf */
  .bv3.kar.js-motion .kar-phases .kar-phase__num,
  .bv3.kar.js-motion .kar-phases .kar-phase__pillar,
  .bv3.kar.js-motion .kar-phases .kar-phase__h,
  .bv3.kar.js-motion .kar-phases .kar-phase__jp,
  .bv3.kar.js-motion .kar-phases .kar-phase__p { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--kar-ease-calm), transform 700ms var(--kar-ease-calm); }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase > * { opacity: 1; transform: translateY(0); }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(1) > * { transition-delay: 250ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(2) > * { transition-delay: 700ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(3) > * { transition-delay: 1150ms; }
  .bv3.kar.js-motion .kar-learn.is-lit .kar-phase:nth-child(4) > * { transition-delay: 1600ms; }

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

  /* ══ v2.1 · Bild-Choreografie ═══════════════════════════════
     Ruhige Scroll-Parallaxe in den Foto-Rahmen (data-plx),
     bedächtiger Blenden-Reveal (kar-unveil), Tinten-Füllung des
     Zitats, Kanji-Drift im finalen CTA. Nur unter body.js-motion
     — ohne JS bleibt alles statisch und voll sichtbar. */

  /* Hero: ruhiges Aufblenden beim Laden. Nur Opacity/Filter —
     der Parallax-Transform aus bold-v3.js bleibt unberührt. */
  .bv3.kar.js-motion .b-hero__bg { animation: karHeroSettle 1600ms var(--kar-ease-calm) both; }
  .bv3.kar.js-motion .b-hero .b-kicker { animation: karRise 900ms var(--kar-ease-calm) 300ms both; }
  .bv3.kar.js-motion .b-hero__h1 { animation: karRise 1000ms var(--kar-ease-calm) 440ms both; }
  .bv3.kar.js-motion .b-hero__row { animation: karRise 1000ms var(--kar-ease-calm) 600ms both; }

  /* Bild-Parallaxe: Übermaß nur mit JS (sonst exakt 100%) */
  .bv3.kar.js-motion [data-plx] img { height: 118%; top: -9%; will-change: transform; }
  .bv3.kar.js-motion .kar-band[data-plx] img { height: 126%; top: -13%; }

  /* Blenden-Reveal der Foto-Rahmen */
  .bv3.kar.js-motion .kar-unveil { clip-path: inset(10% 6% 10% 6% round 24px); opacity: 0.4; transition: clip-path 1300ms var(--kar-ease-calm), opacity 1000ms var(--ease-standard); }
  .bv3.kar.js-motion .kar-unveil--flat { clip-path: inset(14% 0 14% 0); }
  .bv3.kar.js-motion .kar-duo figure:nth-child(2) { transition-delay: 160ms; }
  .bv3.kar.js-motion .kar-unveil.is-open { clip-path: inset(0 0 0 0 round 24px); opacity: 1; }
  .bv3.kar.js-motion .kar-unveil--flat.is-open { clip-path: inset(0 0 0 0); }

  /* Die frühere Tinten-Füllung des Zitats (.kar-quote__q, weißer
     Farbverlauf über background-clip: text) ist am 04.08.2026
     entfallen. Sie war für ein einzelnes weißes Zitat auf
     dunkelrotem Grund gebaut; im Karten-Stapel steht das Zitat
     dunkelrot auf hellem Kartengrund — der weiße Verlauf hätte
     den Text unlesbar gemacht. Die zugehörige Scrub-Berechnung in
     js/karate-v3.js ist ebenfalls entfernt. */

  .bv3.kar.js-motion .kar-final__kanji { will-change: transform; }
}
@keyframes karHeroSettle { from { opacity: 0; filter: brightness(0.55); } to { opacity: 1; filter: brightness(1); } }
@keyframes karRise { from { opacity: 0; transform: translateY(26px); } }

/* ============================================================
   SCHWEBENDER PROBETRAININGS-BUTTON (.sticky-cta) · weiches
   Ein-/Ausblenden — Angleich an Frühförderung, Kickboxen Kinder,
   MMA Kinder und Jiu-Jitsu Budokai Erwachsene sowie an das
   .s-sticky-System aus mobile-nav.css.

   Ausgangslage: css/karate.css:308 blendet den Button ab 721px per
   `display:none !important` aus. Der Inline-Block `#kar-media-v3`
   im Seitenkopf nimmt das bereits über
   `body.kar .sticky-cta:not(.hidden)` zurück — allerdings greift im
   .hidden-Zustand weiterhin `.sticky-cta.hidden{display:none}` aus
   site.css, der Button springt also hart an und aus.

   Diese Regel hält den Button auch im .hidden-Zustand im Layout
   (höhere Spezifität als site.css) und blendet ihn stattdessen über
   opacity/transform weich aus. Der Inline-Block bleibt unangetastet
   und setzt für den sichtbaren Zustand denselben Wert — kein
   Konflikt.
   ============================================================ */
.bv3.kar .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.kar .sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.bv3.kar .sticky-cta:focus-visible { outline: 3px solid var(--rp-tiefschwarz); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .bv3.kar .sticky-cta { transition: none; }
}