/* ============================================================
   RANDORI-PRO · KTR · Kurztechniken Raffel (High End) · Motion-Layer (CSS)
   SCROLL-POLITUR 07/2026 · adaptiert aus der Krav-Maga-Politur,
   ruhig getaktet (Stimmung 3 „Dunkel & Intensiv" — Substanz
   statt Spektakel, kein Snappen):
   · Headlines steigen Wort für Wort (masked rise, ruhig)
   · SIGNATUR: der enge Raum folgt dem Scroll — die beiden
     Wände ziehen sich bidirektional zusammen, die drei
     Kerntechniken setzen sich, sobald der Raum eng wird;
     das Fazit erscheint erst, wenn alles sitzt
   · Rote Glows der dunklen Sektionen driften mit (Tiefe)
   · Hero weicht beim Scrollen ruhig zurück, Bild-Card driftet
   · Kennzahlen zählen hoch und setzen mit Nachdruck
   Grundzustand IMMER vollständig sichtbar (kein JS / reduced
   motion): Wände stehen, Techniken gesetzt, Fazit lesbar.
   Aktiv ausschließlich unter body.bv3.ktr.
   ============================================================ */

:root { --ktr-ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); --ktr-spring: cubic-bezier(0.34, 1.4, 0.64, 1); }

/* Anker-Ziele nicht unter dem Glas-Header verstecken */
.bv3.ktr [id] { scroll-margin-top: 92px; }

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

  /* Ruhiges Gleiten bei Anker-Sprüngen (nur diese Seite) */
  html { scroll-behavior: smooth; }

  /* ── Reveals (Muster wie bold-v3, ruhiger) ───────────────── */
  .bv3.ktr [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ktr-ease-calm), transform 500ms var(--ktr-ease-calm); }
  .bv3.ktr [data-rv].is-in { opacity: 1; transform: translateY(0); }

  /* Mono-Label-Linien zeichnen sich beim Reveal (Kicker, Plan, Attr, Kit-Intro) */
  .bv3.ktr [data-rv] :is(.b-kicker, .ktr-kit__intro, .ktr-quote__attr)::before,
  .bv3.ktr [data-rv]:is(.b-kicker, .ktr-learn__plan, .ktr-quote__attr)::before { width: 0; transition: width 800ms var(--ktr-ease-calm) 250ms; }
  .bv3.ktr [data-rv].is-in :is(.b-kicker, .ktr-kit__intro, .ktr-quote__attr)::before,
  .bv3.ktr [data-rv].is-in:is(.b-kicker, .ktr-learn__plan, .ktr-quote__attr)::before { width: 40px; }

  /* ── Hero-Entrance ───────────────────────────────────────── */
  .bv3.ktr .ktr-hero .b-kicker { animation: ktr-rise 600ms var(--ktr-ease-calm) 100ms backwards; }
  .bv3.ktr .ktr-hero__h1 { animation: ktr-rise 650ms var(--ktr-ease-calm) 200ms backwards; }
  .bv3.ktr .ktr-hero__sub, .bv3.ktr .ktr-hero__cta { animation: ktr-rise 650ms var(--ktr-ease-calm) 320ms backwards; }
  .bv3.ktr .ktr-hero__trust { animation: ktr-fade 700ms var(--ease-standard) 520ms backwards; }
  .bv3.ktr .ktr-hero__media { animation: ktr-fade 750ms var(--ease-standard) 280ms backwards; }
  @keyframes ktr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes ktr-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Hero weicht zurück (JS setzt Inline-Styles) */
  .bv3.ktr.js-motion .ktr-hero__inner { will-change: transform, opacity; }
  .bv3.ktr.js-motion .ktr-hero__media { will-change: transform; }

  /* ── Headlines · Wort-für-Wort (masked rise, ruhig) ──────── */
  .bv3.ktr .ktr-wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .bv3.ktr.js-motion .ktr-split .ktr-w { display: inline-block; transform: translateY(115%); transition: transform 780ms var(--ktr-ease-calm); transition-delay: calc(var(--wd, 0) * 70ms); }
  .bv3.ktr.js-motion .ktr-split.is-in .ktr-w { transform: none; }

  /* ── Glow-Drift · rote Lichtinseln der dunklen Sektionen ───
     JS setzt --gy (px) pro Sektion; leichte Vergrößerung, damit
     beim Driften keine Kanten sichtbar werden. */
  .bv3.ktr.js-motion .ktr-hero::before,
  .bv3.ktr.js-motion .ktr-def::before,
  .bv3.ktr.js-motion .ktr-diff::before,
  .bv3.ktr.js-motion .ktr-final::before { transform: translate3d(0, calc(var(--gy, 0) * 1px), 0) scale(1.15); will-change: transform; }

  /* ── SIGNATUR · Der enge Raum folgt dem Scroll ─────────────
     JS treibt die Wände pro Frame (translateX + Opacity, inline,
     bidirektional): sie ziehen sich von außen zusammen, bis der
     Raum eng ist. Die drei Kerntechniken setzen sich, sobald der
     Faden … die Wände sie erreichen (.is-set), die Maß-Zeile
     erscheint, wenn es eng wird (.is-tight), das Fazit erst,
     wenn alles sitzt (.is-done). Ohne JS steht alles. */
  .bv3.ktr.js-motion .ktr-kit__wall { opacity: 0; will-change: transform, opacity; }
  .bv3.ktr.js-motion .ktr-kit__wall--l { transform: translateX(-70px); }
  .bv3.ktr.js-motion .ktr-kit__wall--r { transform: translateX(70px); }

  .bv3.ktr.js-motion .ktr-kit__dim { opacity: 0; transform: translateY(6px); transition: opacity 620ms var(--ktr-ease-calm), transform 620ms var(--ktr-ease-calm); }
  .bv3.ktr.js-motion .ktr-kit.is-tight .ktr-kit__dim { opacity: 1; transform: none; }

  .bv3.ktr.js-motion .ktr-tool { opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity 560ms var(--ktr-ease-calm), transform 560ms var(--ktr-spring), border-color 320ms, box-shadow 520ms; }
  .bv3.ktr.js-motion .ktr-tool.is-set { opacity: 1; transform: none; }
  .bv3.ktr.js-motion .ktr-tool.is-set:hover { transform: translateY(-4px); }

  .bv3.ktr.js-motion .ktr-kit__foot { opacity: 0; transform: translateY(12px); transition: opacity 680ms var(--ktr-ease-calm) 150ms, transform 680ms var(--ktr-ease-calm) 150ms; }
  .bv3.ktr.js-motion .ktr-kit.is-done .ktr-kit__foot { opacity: 1; transform: none; }

  /* ── Kennzahlen · kontrollierter Nachdruck beim Count-up ─── */
  .bv3.ktr.js-motion .ktr-stat.is-hit .ktr-stat__n { animation: ktr-hit 620ms var(--ktr-ease-calm); }
  @keyframes ktr-hit {
    0%   { transform: scale(1.09); text-shadow: 0 0 34px rgba(220, 13, 29, 0.75); }
    60%  { transform: scale(0.992); }
    100% { transform: none; text-shadow: none; }
  }

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