/* ============================================================
   RANDORI-PRO · Kickboxen für Kinder „High End" — Motion-Layer
   Additiv zu kickboxen-kinder.css + bold-v3.css. Aktiv nur unter
   body.bv3.kk. bold-v3.css/js liefern die geteilten Mechaniken
   (Progress, Glas-Header, [data-rv]-Reveals, Button-Glanz);
   hier kommen die seitenspezifischen Stücke dazu: helle Glasleiste,
   gestaffelte Hero-Entrance, sanfte Hover-Lifts und die markante
   AUFSTEIGENDE WACHSTUMS-/STUFEN-Animation in „Was lernt dein Kind".
   Alles respektiert prefers-reduced-motion; ohne JS ist die Seite
   vollständig statisch und lesbar.
   ============================================================ */

/* ── Header · helle Glasleiste (überschreibt die dunkle aus bold-v3) ─ */
.bv3.kk .b-header.is-scrolled { background: rgba(250, 247, 238, 0.82); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); padding: 14px 0; box-shadow: 0 1px 0 rgba(26,20,20,0.06), 0 12px 40px -20px rgba(26,20,20,0.18); }
.bv3.kk .b-header.is-scrolled .b-nav a { color: var(--rp-tiefschwarz); }
.bv3.kk .b-header.is-scrolled .b-nav a:hover { color: var(--rp-rot-akzent); }
.bv3.kk .b-header.is-scrolled .b-nav .b-nav-cta { color: #fff; }

/* ── Hero-Foto · Parallax-Ebene ────────────────────────────── */
.bv3.kk .kk-hero__photo img, .bv3.kk .kk-hero__photo .s-ph-photo { will-change: transform; }

/* ── Sanfte Hover-Lifts (immer aktiv, reine Zustandswechsel) ─ */
.bv3.kk .kk-card { transition: transform 500ms var(--bv3-ease), box-shadow 500ms var(--ease-standard), background 300ms; }
.bv3.kk .kk-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.1); box-shadow: 0 30px 60px -36px rgba(0,0,0,0.5); }
.bv3.kk .kk-loc { transition: transform 500ms var(--bv3-ease), box-shadow 500ms var(--ease-standard); }
.bv3.kk .kk-loc:hover { transform: translateY(-6px); box-shadow: 0 36px 72px -44px rgba(109,23,35,0.45); }
.bv3.kk .kk-def__media img, .bv3.kk .kk-voice__media img { transition: transform 900ms var(--bv3-ease); }
.bv3.kk .kk-def__media:hover img, .bv3.kk .kk-voice__media:hover img { transform: scale(1.04); }
.bv3.kk .b-q__btn h3 { transition: color 220ms var(--ease-standard); }
.bv3.kk .b-q__btn:hover h3 { color: var(--rp-rot-akzent); }

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · gestaffeltes, sanftes Aufsteigen */
  .bv3.kk .kk-hero__text .b-kicker { animation: kk-rise 900ms var(--bv3-ease) 150ms backwards; }
  .bv3.kk .kk-hero__h1 { animation: kk-rise 1000ms var(--bv3-ease) 280ms backwards; }
  .bv3.kk .kk-hero__sub { animation: kk-rise 1000ms var(--bv3-ease) 440ms backwards; }
  .bv3.kk .kk-hero__cta { animation: kk-rise 1000ms var(--bv3-ease) 580ms backwards; }
  .bv3.kk .kk-hero__trust { animation: kk-fade 1000ms var(--ease-standard) 760ms backwards; }
  .bv3.kk .kk-hero__media { animation: kk-media-in 1200ms var(--bv3-ease) 220ms backwards; }

  @keyframes kk-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes kk-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kk-media-in { from { opacity: 0; transform: translateY(36px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

  /* ── AKZENT · STUFEN-Animation ──────────────────────────
     JS setzt .is-grown auf .kk-stairs, sobald sie sichtbar ist.
     Die Linien wachsen in Leserichtung von oben („Grundtechnik")
     nach unten („Erste Erfolge"), die Knoten poppen weich auf und
     die Karten steigen nacheinander ein. Ohne JS bleibt alles als
     fertige Treppe stehen. Straffe Staffelung (<1s gesamt). */
  .bv3.kk.js-motion .kk-stair__seg { transform: translateX(-50%) scaleY(0); transition: transform 650ms var(--bv3-ease); }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair__seg { transform: translateX(-50%) scaleY(1); }
  .bv3.kk.js-motion .kk-stair__node { opacity: 0; transform: scale(0.4); transition: opacity 400ms var(--ease-standard), transform 560ms var(--bv3-spring); }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair__node { opacity: 1; transform: scale(1); }
  .bv3.kk.js-motion .kk-stair__card { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-standard), transform 700ms var(--bv3-ease); }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair__card { opacity: 1; transform: translateY(0); }

  /* gestaffelt top → bottom, straff (120ms-Schritte) */
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(1) .kk-stair__seg { transition-delay: 60ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(2) .kk-stair__seg { transition-delay: 180ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(3) .kk-stair__seg { transition-delay: 300ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(4) .kk-stair__seg { transition-delay: 420ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(1) .kk-stair__node { transition-delay: 60ms, 60ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(2) .kk-stair__node { transition-delay: 180ms, 180ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(3) .kk-stair__node { transition-delay: 300ms, 300ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(4) .kk-stair__node { transition-delay: 420ms, 420ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(1) .kk-stair__card { transition-delay: 140ms, 140ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(2) .kk-stair__card { transition-delay: 260ms, 260ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(3) .kk-stair__card { transition-delay: 380ms, 380ms; }
  .bv3.kk.js-motion .kk-stairs.is-grown .kk-stair:nth-child(4) .kk-stair__card { transition-delay: 500ms, 500ms; }
}

/* ============================================================
   SCHWEBENDER PROBETRAININGS-BUTTON (.sticky-cta) auch auf Desktop
   Gilt für „Kickboxen Kinder" (body.kk) und „MMA Kinder"
   (body.kk mk) — beide laden diese Datei.
   Grundstil kommt aus css/site.css + css/mobile-nav.css.
   Hintergrund: css/kickboxen-kinder.css blendete den Button ab 721px
   per `display:none !important` aus (Zeile 359, inzwischen dort
   entfernt). Diese Regel hält die Einblendung unabhängig davon fest.
   Weil `display: inline-flex !important` auch
   `.sticky-cta.hidden{display:none}` aus site.css überstimmt, bildet
   der Aus-Zustand des JS hier über opacity/transform/pointer-events
   ab (wie das .s-sticky-System in mobile-nav.css).
   ============================================================ */
.bv3.kk .sticky-cta {
  display: inline-flex !important;
  visibility: visible;
  min-height: 44px;
  z-index: 80;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard), background 220ms var(--ease-standard), visibility 0s;
}
/* Aus-Zustand: zusätzlich `visibility: hidden`. Ohne das blieb der
   Button mit opacity 0 in der Tab-Reihenfolge stehen — wer sich mit
   der Tastatur durch die Hero bewegte, landete auf einem unsichtbaren
   Ziel (gemessen 04.08.2026: focus() setzte activeElement, obwohl der
   Button nicht zu sehen war). `pointer-events: none` deckt nur die
   Maus ab. Die Verzögerung von 300ms lässt die Ausblendung vorher zu
   Ende laufen, das Einblenden bleibt ohne Verzögerung. */
.bv3.kk .sticky-cta.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard), visibility 0s linear 300ms;
}
.bv3.kk .sticky-cta:focus-visible { outline: 3px solid var(--rp-tiefschwarz); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  /* .hidden muss mitgenannt werden — die Regel oben ist spezifischer
     und würde die Übergänge sonst trotzdem behalten. */
  .bv3.kk .sticky-cta,
  .bv3.kk .sticky-cta.hidden { transition: none; }
}