/* ============================================================
   RANDORI-PRO · Sportartenseite „MMA für Kinder" — Page-Layer
   Template A „Eltern-Überzeuger" · Stimmung 1 „Warm & Hell".

   Diese Seite REUSED bewusst das komplette kk-* System
   (kickboxen-kinder.css + kickboxen-kinder-v3.css): Hero, Def,
   Für-wen-Anker, Stimmen, Diff-Anker + Count-up, FAQ, Standorte,
   finaler CTA, Footer, Buttons, Kicker. Keine neuen Farben.

   Nur ZWEI seitenspezifische Stücke leben hier unter .mk-:
   1) §5 „Was lernt dein Kind" — normale Baustein-Karten auf Weiß
      (KEINE Animation — die Treppe der Kickboxen-Seite entfällt).
   2) DAS EINE Signatur-Element — DISZIPLINEN-KONVERGENZ:
      drei beschriftete Stränge fließen beim Scrollen zu einem
      zentralen Knoten „MMA" zusammen.
   Dazu ein Pull-Treatment für den wichtigsten Eltern-Einwand
   (Käfig-Bild) in §2.
   ============================================================ */

:root {
  --mk-r-card: 22px 22px 36px 36px;   /* Kinder-Karten-Radius (identisch zur Frühförderung/Kickboxen) */
}

/* §1 · Hero · Vollbild-Foto (aus kickboxen-kinder.css .kk-hero--photo) */
.mk .kk-hero__bg { object-position: 62% 46%; }
@media (max-width: 760px){ .mk .kk-hero__bg { object-position: 68% 40%; } }
/* Handy und schmales Tablet (Oktober 2026): Das Hochkant-Foto füllt hier
   die Höhe. Die Gesichter der beiden Jungen und ihr Griff lagen so hinter
   Kicker und Überschrift. Das Foto wird größer gezogen und unten angelegt,
   damit der Griff und das Gesicht des blonden Jungen über dem Text stehen.
   Der Schleier bleibt oben offen und dunkelt erst kurz vor dem Kicker
   kräftig ab, der Text steht damit weiter auf dunklem Grund. Nur im
   Hochformat; quer gehaltene Handys behalten den gleichmäßigen Schleier.
   Ausschnitt 54 % statt 60 %: Der weiße Rückenaufdruck auf dem roten Shirt
   rückt so weiter rechts neben den Kicker; der Schleier setzt dafür etwas
   früher ein. */
@media (max-width: 599px) and (orientation: portrait){
  .mk .kk-hero__bg { top: -42%; height: 142%; }
  .mk .kk-hero__bg.fp { object-position: 54% 40% !important; }
  .mk .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 8%, rgba(20,10,12,0.2) 17%, rgba(20,10,12,0.8) 20.5%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
/* Schmale Handys (bis 380px): Der Kicker bricht vierzeilig um und beginnt
   bei knapp 20 % der Höhe. */
@media (max-width: 380px) and (orientation: portrait){
  .mk .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 7%, rgba(20,10,12,0.2) 14.5%, rgba(20,10,12,0.8) 18.5%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
/* Kurze Handys (bis 760px Höhe): Der Kicker steht schon bei etwa 15 %. */
@media (max-width: 599px) and (max-height: 760px) and (orientation: portrait){
  .mk .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 5%, rgba(20,10,12,0.2) 9%, rgba(20,10,12,0.8) 14%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
/* Ab 600px steht der Kicker tiefer (gut 31 % der Höhe), das Foto muss
   weniger groß gezogen werden; der Kopf des Jungen im roten Shirt bleibt so
   im Bild. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait){
  .mk .kk-hero__bg { top: -30%; height: 130%; }
  .mk .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 12%, rgba(20,10,12,0.2) 27%, rgba(20,10,12,0.8) 31.5%, rgba(20,10,12,0.86) 60%, rgba(20,10,12,0.92) 100%); }
}
/* Tablet: Die kurze Überschrift steht hier einzeilig bis gut 60 % der
   Breite. Die Bildfläche (siehe kickboxen-kinder.css) beginnt deshalb erst
   bei 62 %, damit „Berlin" nicht auf dem hellen Foto steht. */
@media (min-width: 900px) and (max-width: 1100px){
  .mk .kk-hero--photo .kk-hero__bg { left: 62%; width: 38%; }
  .mk .kk-hero--photo .kk-hero__scrim { background:
      linear-gradient(90deg, rgba(20,10,12,1) 0%, rgba(20,10,12,1) 62%, rgba(20,10,12,0.5) 66%, rgba(20,10,12,0.15) 72%, rgba(20,10,12,0) 82%),
      linear-gradient(180deg, rgba(20,10,12,0.34) 0%, transparent 30%, rgba(20,10,12,0.42) 100%); }
}
/* Tablet im Hochformat (900–1100px): Die gemeinsame Regel in
   kickboxen-kinder.css zieht das Foto um 20 % nach oben. Bei MMA Kinder
   schnitt das dem Trainer links vorn die Stirn ab, das Logo lag auf
   seinem Haar. Hier rückt das Foto deshalb weniger weit nach oben, ab
   1000px nur noch 14 %. Unter 1000px bleiben es 17 %, sonst läge der
   Rückenaufdruck des Jungen im roten Shirt hinter „Ab 9 Jahren". Der
   Kicker steht bei MMA Kinder tiefer (34–38 % der Höhe), der Schleier
   dunkelt deshalb später ab, das Gesicht des blonden Jungen bleibt frei. */
@media (min-width: 900px) and (max-width: 1100px) and (orientation: portrait){
  body.kk.mk .kk-hero--photo .kk-hero__bg { top: -17%; height: 117%; }
  body.kk.mk .kk-hero--photo .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 10%, rgba(20,10,12,0.2) 30.5%, rgba(20,10,12,0.8) 35.5%, rgba(20,10,12,0.86) 62%, rgba(20,10,12,0.92) 100%); }
}
@media (min-width: 1000px) and (max-width: 1100px) and (orientation: portrait){
  body.kk.mk .kk-hero--photo .kk-hero__bg { top: -14%; height: 114%; }
}
@media (min-width: 900px) and (max-width: 1100px) and (orientation: portrait) and (min-aspect-ratio: 4/5){
  body.kk.mk .kk-hero--photo .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 9%, rgba(20,10,12,0.2) 28%, rgba(20,10,12,0.8) 33%, rgba(20,10,12,0.86) 62%, rgba(20,10,12,0.92) 100%); }
}

/* §1b · Hero-Höhe liegt seit 04.08.2026 in der gemeinsamen
   kickboxen-kinder.css (.kk-hero--photo, min-height: 100svh mit 100vh
   als Fallback) — beide kk-Seiten sollen identisch hoch sein. Die
   frühere .mk-Sonderregel (ebenfalls 100svh) ist deshalb hier
   entfallen, nicht ersatzlos gestrichen.

   Auf dem Handy braucht diese Seite trotzdem eine Feinjustierung: der
   Hero-Fließtext ist hier länger als auf der Kickboxen-Seite (fünf
   statt drei Sätze) und schob die Trust-Zeile 14px unter die Falz.
   Nur Abstände, keine Schriftgrößen. */
@media (max-width: 760px){
  .mk .kk-hero--photo { padding-top: clamp(92px, 11.5vh, 120px); }
  .mk .kk-hero__sub { margin-bottom: 22px; }
}

/* ============================================================
   §5b · BILD-BAND · Kante zu Kante · ruhiger Scroll-Parallax
   Bild ist 124% hoch und wird per JS ±9% verschoben. Ohne JS /
   bei reduced-motion steht es zentriert still.
   ============================================================ */
.mk-band { position: relative; overflow: hidden; height: clamp(340px, 58vh, 620px); background: var(--kk-cream); }
.mk-band__frame { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.mk-band__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: center 42%; will-change: transform; }
.mk-band__tag { position: absolute; left: clamp(20px, 4vw, 52px); bottom: clamp(18px, 3vw, 38px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(26,16,14,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 11px 18px; border-radius: 999px; }

/* ============================================================
   §2 · Pull-Treatment · „Das Käfig-Bild aus dem Weg räumen"
   Wichtigster Eltern-Einwand → optisch abgesetzt im Fließtext.
   ============================================================ */
.mk-pull {
  position: relative;
  margin: 30px 0;
  padding: clamp(24px, 2.8vw, 34px) clamp(26px, 3vw, 40px);
  background: var(--kk-cream);
  border-left: 4px solid var(--rp-rot-akzent);
  border-radius: 0 var(--kk-r-sm) var(--kk-r-sm) 0;
}
.mk-pull p { font-size: 17px; line-height: 1.74; color: var(--rp-tiefschwarz); margin: 0; max-width: 60ch; }
.mk-pull p + p { margin-top: 16px; }
.mk-pull strong { color: var(--kk-rot-anker); font-weight: 700; }
.mk-pull .mk-pull__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.22; letter-spacing: -0.01em; color: var(--kk-rot-anker); margin: 0 0 12px; }

/* §1 · Hero-Microcopy unter dem CTA (Review 00) */
/* Farbe von #8a7e66 auf helles Beige: das alte Oliv erreichte über dem
   Foto selbst bei starkem Scrim nur 3,0–4,1:1 (WCAG AA verlangt 4,5:1
   bei 11px). Der zurückhaltende Charakter bleibt, die Zeile ist jetzt
   lesbar. */
.mk .kk-hero__micro { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #D8CEB8; }
@media (max-width: 760px){ .mk .kk-hero__micro { margin-top: 12px; } }

/* §9 · Preiszeile im finalen CTA — Preisfakt nie nur im Akkordeon (Review 07/09) */
.mk .kk-final__price { margin: 28px 0 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--rp-beige); }
.mk .kk-final__price + .kk-final__foot { margin-top: 16px; }

/* §8 · Standort-Karten: min-height gesenkt, bis echte Kurszahlen da sind (Review 08) */
.mk .kk-loc { min-height: 170px; }

/* §3 · Mehrere Absätze im dunkelroten Anker-Abschnitt */
.mk-fit__close p + p { margin-top: 18px; }

/* ============================================================
   §5 · WAS LERNT DEIN KIND? · Weiß · normale Baustein-Karten
   (statisch, KEINE Animation — bewusst kein zweites Sonderelement)
   ============================================================ */
.mk-learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 56px); }
.mk-learn__card { background: var(--kk-cream); border: 1px solid rgba(109,23,35,0.1); border-radius: var(--mk-r-card); padding: clamp(28px, 2.8vw, 38px) clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; }
.mk-learn__num { width: 46px; height: 46px; border-radius: 50%; background: var(--rp-white); border: 2px solid var(--rp-rot-akzent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--rp-rot-akzent); margin-bottom: 22px; }
.mk-learn__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-rot-akzent); display: block; margin-bottom: 10px; }
.mk-learn__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.14; letter-spacing: -0.015em; color: var(--kk-rot-anker); margin: 0 0 14px; text-wrap: balance; }
.mk-learn__p { font-size: 15.5px; line-height: 1.66; color: var(--rp-grau-7012); margin: 0; }
.mk-learn__p .s-ph { color: var(--rp-rot-akzent); }
@media (max-width: 920px){ .mk-learn { grid-template-columns: 1fr; } }

/* ============================================================
   SIGNATUR · DISZIPLINEN-KONVERGENZ · Weiß
   Drei beschriftete Stränge fließen zu einem zentralen Knoten
   „MMA" zusammen. Aufbau beim Scrollen Strang für Strang, ruhig,
   kindlich-freundlich. Statisch ohne JS / bei reduced-motion.
   ============================================================ */
.mk-conv { background: var(--rp-white); padding: clamp(40px, 6vw, 76px) 0 clamp(88px, 11vw, 144px); }
.mk-conv__head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.mk-conv__head .b-kicker { justify-content: center; }
.mk-conv__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--kk-rot-anker); margin: 0 auto 18px; max-width: 18ch; text-wrap: balance; }
.mk-conv__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.mk-conv__lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: var(--rp-tiefschwarz); margin: 0 auto; max-width: 58ch; }

/* ── Bühne · Koordinaten-Overlay (Desktop/Tablet) ─────────── */
.mk-conv__stage { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 1000 / 600; }
.mk-conv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-conv__path { fill: none; stroke: var(--rp-rot-akzent); stroke-width: 4; stroke-linecap: round; opacity: 0.85; }

.mk-strand { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: min(31%, 312px); background: var(--kk-cream); border: 1px solid rgba(109,23,35,0.12); border-radius: var(--mk-r-card); padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px); box-shadow: 0 24px 50px -38px rgba(109,23,35,0.5); }
.mk-strand__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rp-rot-akzent); display: block; margin-bottom: 12px; }
.mk-strand__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.15; letter-spacing: -0.01em; color: var(--kk-rot-anker); display: block; }
.mk-strand__sub { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--rp-grau-7012); display: block; margin-top: 6px; }

.mk-knot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: min(27%, 264px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #8a2230, var(--kk-rot-anker) 64%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 34px 80px -38px rgba(109,23,35,0.7), inset 0 2px 14px rgba(255,255,255,0.08); }
.mk-knot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); }
.mk-knot__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -0.02em; color: #fff; line-height: 1; }
.mk-knot__s { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); margin-top: 10px; }

/* ── Mobile-Stack (vertikal) ──────────────────────────────── */
.mk-conv__stack { display: none; }
@media (max-width: 760px){
  .mk-conv__stage { display: none; }
  .mk-conv__stack { display: flex; flex-direction: column; align-items: center; gap: 0; list-style: none; margin: 0 auto; padding: 0; max-width: 360px; }
  .mk-conv__sl { width: 100%; background: var(--kk-cream); border: 1px solid rgba(109,23,35,0.12); border-radius: var(--mk-r-card); padding: 18px 22px; text-align: center; }
  .mk-conv__sl .nm { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--kk-rot-anker); display: block; }
  .mk-conv__sl .sb { font-size: 13.5px; color: var(--rp-grau-7012); display: block; margin-top: 4px; }
  .mk-conv__link { width: 3px; height: 30px; background: var(--rp-rot-akzent); border-radius: 3px; opacity: 0.85; }
  .mk-conv__sk { width: 168px; height: 168px; border-radius: 50%; margin-top: 4px; background: radial-gradient(circle at 38% 32%, #8a2230, var(--kk-rot-anker) 64%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 30px 60px -36px rgba(109,23,35,0.7); }
  .mk-conv__sk .t { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: #fff; line-height: 1; letter-spacing: -0.02em; }
  .mk-conv__sk .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); margin-top: 8px; }
}

/* ============================================================
   MOTION · Konvergenz baut Strang für Strang auf
   Nur bei js-motion (bold-v3.js) + prefers-reduced-motion:
   no-preference. Ohne JS / reduced bleibt alles fertig stehen.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Linien als „pathLength=1" normiert → von der Quelle zum Knoten gezeichnet */
  .bv3.mk.js-motion .mk-conv__path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 560ms var(--bv3-ease); }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-conv__path { stroke-dashoffset: 0; }

  /* Stränge ziehen sanft von links herein */
  .bv3.mk.js-motion .mk-strand { opacity: 0; transform: translate(calc(-50% - 26px), -50%); transition: opacity 620ms var(--ease-standard), transform 760ms var(--bv3-ease); }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-strand { opacity: 1; transform: translate(-50%, -50%); }

  /* Zentraler MMA-Knoten ploppt zuletzt auf */
  .bv3.mk.js-motion .mk-knot { opacity: 0; transform: translate(-50%, -50%) scale(0.5); transition: opacity 460ms var(--ease-standard), transform 720ms var(--bv3-spring); }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-knot { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  /* Takt (gestrafft, Review SIG): Stränge 150/400/650ms, Linien je
     ~120ms versetzt, Knoten bei 1000ms — Gesamtsequenz < ~1,4s. */
  .bv3.mk.js-motion .mk-conv.is-flow .mk-strand--1 { transition-delay: 150ms, 150ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-strand--2 { transition-delay: 400ms, 400ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-strand--3 { transition-delay: 650ms, 650ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-conv__path:nth-of-type(1) { transition-delay: 270ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-conv__path:nth-of-type(2) { transition-delay: 520ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-conv__path:nth-of-type(3) { transition-delay: 770ms; }
  .bv3.mk.js-motion .mk-conv.is-flow .mk-knot { transition-delay: 1000ms, 1000ms; }

  /* ── Bild-Momente · sanfter Zoom-Reveal (is-seen via JS) ── */
  .bv3.mk.js-motion .kk-hero__bg { animation: mkHeroIn 1400ms var(--bv3-ease) both; }
  .bv3.mk.js-motion .kk-def__media img { transform: scale(1.07); transition: transform 1300ms var(--bv3-ease); }
  .bv3.mk.js-motion .kk-def__media.is-seen img { transform: scale(1); }
  .bv3.mk.js-motion .mk-band__frame { transform: scale(1.05); transition: transform 1400ms var(--bv3-ease); }
  .bv3.mk.js-motion .mk-band.is-seen .mk-band__frame { transform: none; }
  .bv3.mk.js-motion .mk-band__tag { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-standard) 320ms, transform 700ms var(--bv3-ease) 320ms; }
  .bv3.mk.js-motion .mk-band.is-seen .mk-band__tag { opacity: 1; transform: none; }
}
@keyframes mkHeroIn { from { transform: scale(1.08); } to { transform: scale(1); } }