/* ============================================================
   RANDORI-PRO · Sportartenseite „Taekwondo" (kombiniert: Kinder + Erwachsene)
   Template B-Basis · Stimmung 4 „Traditionell & Ruhig"
   — erdig, würdevoll, ruhig. Eine olympische Kampfkunst mit Haltung.
   Zwei Tonlagen auf einer Seite: Kinder-Teilblöcke wärmer und an Eltern
   gerichtet, Erwachsenen-Teile sachlich-respektvoll.

   Basisschicht (ohne Motion). Baut auf tokens.css auf und übernimmt das
   b-*-Komponentensystem (Header, Kicker, Buttons, Link, FAQ, Footer,
   Sticky-CTA) der Judo/Hapkido-Seiten — keine neuen Farben, Schriften
   oder Komponenten. Seitenspezifische Sektionen tragen das Präfix .tk-.

   Farbrhythmus (Drei-Anker, Stimmung 4) — HELL-dominant auf warmem
   Beige, drei dunkle Anker:
   1 Hero (warmes Beige #ede4d2)              · HELL
   2 Was ist Taekwondo? (Dunkelrot, Anker 1)  · DUNKEL · Fünf Grundsätze
   3 Was lernst du? (Beige; Kinder #faf6ee)   · HELL
   4 Für wen? (Beige #D4C9B5; Kinder heller)  · HELL
   5 Das unterscheidet uns (Dunkelrot, A2)    · DUNKEL · Count-up
   6 Stimmen (Beige #ede4d2)                  · HELL
   7 FAQ (Beige #ede4d2)                      · HELL
   8 Standorte (Beige #D4C9B5)                · HELL · 3-Spalten-Raster
   9 Finaler CTA (Tiefschwarz, Anker 3)       · DUNKEL
   ============================================================ */

:root {
  --tk-rot-anker:   var(--rp-rot-anker);   /* #6D1723 dunkelrote Anker */
  --tk-beige-warm:  #D4C9B5;               /* bg-2 warm, geerdet */
  --tk-beige-light: #ede4d2;               /* bg-3 hell */
  --tk-beige-kids:  #faf6ee;               /* wärmstes/hellstes Kinder-Modul */
}

/* Helle, erdige Grundbühne */
html { margin: 0; }
body.tk { margin: 0; background: var(--tk-beige-light); color: var(--rp-grau-7012); font-family: var(--font-body); }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.b-wrap { max-width: 1480px; margin: 0 auto; padding: 0 40px; }
.b-wrap--narrow { max-width: 1080px; }
@media (max-width: 720px){ .b-wrap{ padding: 0 24px; } }

/* Seitlicher Randabstand · an „Jiu-Jitsu Budokai Erwachsene" angeglichen
   -----------------------------------------------------------------
   Feedback Dominik 04.08.2026: Inhalt steht zu dicht am Bildschirmrand.
   Ursache identisch zu css/boxen.css und css/krav-maga.css: .b-wrap
   rechnet hier content-box, die Gesamtbreite ist also 1480 + 2x40 = 1560.
   JJB lädt css/site.css mit globalem border-box und kommt damit auf 1480
   gesamt — der Inhalt sitzt dort auf jeder Breite 40px weiter innen
   (bei 1512px 16px). Dieselbe Lösung, nicht neu erfunden.
   Gescopet auf .tk, konsistent mit .box / .km — css/taekwondo.css wird
   zwar nur von dieser Seite geladen, das Muster bleibt aber gleich.
   Unter 720px greift weiter padding: 0 24px — dort ändert sich nichts,
   weil der Wrap ohnehin schmaler als max-width ist. */
.tk .b-wrap { box-sizing: border-box; }

/* ── Kicker (Drei-Anker-Rhythmus) ──────────────────────────── */
.b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 14px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--rp-rot-akzent); flex-shrink: 0; }
.b-kicker--anker { color: var(--rp-rot-anker); }
.b-kicker--anker::before { background: var(--rp-rot-anker); }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--center { justify-content: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--rp-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 22px 40px; border-radius: 999px; transition: background 220ms var(--ease-standard), transform 220ms var(--ease-standard); }
.b-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.b-btn--big { padding: 26px 52px; font-size: 15px; }

/* ── Textlink ──────────────────────────────────────────────── */
.b-link { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-rot-akzent); display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rp-rot-akzent); padding-bottom: 6px; }
.b-link::after { content: "→"; transition: transform 220ms var(--ease-standard); }
.b-link:hover::after { transform: translateX(6px); }
.b-link--anker { color: var(--rp-rot-anker); border-color: var(--rp-rot-anker); }

/* Platzhalter-Marker (sichtbar, kontrastsicher) ───────────── */
.tk .s-ph { color: var(--rp-rot-akzent); font-style: normal; }

/* ── Foto-/Bild-Platzhalter (warm, hell · reines CSS) ───────── */
.s-ph-photo { --st-a: #e7ddc8; --st-b: #ddd0b6; position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--st-a) 0 18px, var(--st-b) 18px 36px);
  border: 1px solid rgba(109,23,35,0.14); }
.s-ph-photo__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(82%, 460px); text-align: center; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; letter-spacing: 0.03em; color: #6a5c44; margin: 0; }
.s-ph-photo__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tk-rot-anker); background: rgba(237,228,210,0.82); border: 1px solid rgba(109,23,35,0.2); backdrop-filter: blur(4px); padding: 8px 13px; border-radius: 999px; }
.s-ph-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   HEADER (b-header) · transparent über hellem Hero → dunkle
   Schrift; beim Scrollen Glas (dunkel) → helle Schrift.
   ============================================================ */
.b-header { position: absolute; inset: 0 0 auto 0; z-index: 50; padding: 26px 0; }
.b-header__inner { max-width: 1480px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.b-header img.b-logo { height: 38px; display: block; filter: brightness(0); }
.b-nav { display: flex; gap: 36px; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.b-nav a { color: rgba(26,20,20,0.82); transition: color 200ms; }
.b-nav a:hover { color: var(--rp-rot-anker); }
.b-nav .b-nav-cta { background: var(--rp-rot-akzent); color: #fff; padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.1em; transition: background 200ms, transform 200ms; }
.b-nav .b-nav-cta:hover { background: #c40b1a; color: #fff; transform: translateY(-1px); }
@media (max-width: 980px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* Glas-Zustand (dunkel) → Schrift & Logo hell (bold-v3 setzt .is-scrolled) */
.bv3.tk .b-header.is-scrolled img.b-logo { filter: brightness(0) invert(1); }
.bv3.tk .b-header.is-scrolled .b-nav a { color: rgba(255,255,255,0.85); }
.bv3.tk .b-header.is-scrolled .b-nav a:hover { color: #fff; }
.bv3.tk .b-header.is-scrolled .b-nav .b-nav-cta { color: #fff; }

/* ============================================================
   1 · HERO · warmes Beige (HELL) · Text + rechteckiges Bild-Card
   ============================================================ */
/* Hero-Paddings nachgezogen (Feedback Dominik 04.08.2026): Der Hero war zu
   hoch — auf einem 1440x900-Laptop lagen Button, Micro- und Trust-Zeile
   unter der Falte. Oben bleibt genug Reserve, damit der fixe Header den
   Kicker nicht überdeckt (Header 26px Padding + 38px Logo = 90px Bauhöhe). */
.tk-hero { position: relative; background: var(--tk-beige-light); color: var(--rp-tiefschwarz); padding: clamp(118px, 15vh, 168px) 0 clamp(56px, 7vw, 92px); overflow: hidden; }
.tk-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.tk-hero .b-kicker { color: var(--rp-rot-akzent); }
.tk-hero .b-kicker::before { background: var(--rp-rot-akzent); }
/* Kleiner und breiter (Feedback Dominik 04.08.2026): weniger Zeilen, damit
   der Hero nicht so hoch baut. 19ch war ohnehin wirkungslos, weil die
   Textspalte (.tk-hero--photo .tk-hero__text) die harte Grenze setzt —
   siehe dort. */
.tk-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: var(--tk-rot-anker); margin: 0 0 28px; max-width: 24ch; text-wrap: balance; }
.tk-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.tk-hero__sub { font-size: 18px; line-height: 1.7; color: var(--rp-tiefschwarz); margin: 0 0 36px; max-width: 60ch; }
/* CTA-Block · Button plus Micro-Zeile, untereinander. Der Block schrumpft
   über width: max-content auf Buttonbreite, die Micro-Zeile zentriert sich
   dadurch exakt zum Button (Muster wie .km-hero__cta / .box-hero__cta).
   Der frühere „Mehr erfahren ↓“-Link ist entfallen (Punkt 2, 04.08.2026) —
   er sprang nur auf die direkt darunterliegende Sektion. */
.tk-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.tk-hero__cta .b-btn { justify-content: center; }
.tk-hero__micro { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6a5c44; }
.tk-hero__trust { margin: clamp(40px, 5vw, 56px) 0 0; padding-top: 26px; border-top: 1px solid rgba(109,23,35,0.18); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6a5c44; line-height: 1.9; }
.tk-hero__media { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px -52px rgba(45,26,18,0.6); }
.tk-hero__media .s-ph-photo { position: absolute; inset: 0; --st-a: #e3d8c0; --st-b: #d9ccb1; }
@media (max-width: 940px){ .tk-hero__inner{ grid-template-columns: 1fr; gap: 40px; } .tk-hero__media{ aspect-ratio: 16/11; order: -1; } }

/* ── Foto-Hero · Vollflächiges Hintergrundbild + Scrim ──────── */
.tk-hero--photo { background: var(--rp-tiefschwarz); color: var(--rp-white); min-height: min(88vh, 820px); display: flex; align-items: center; }
.tk-hero--photo .tk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; z-index: 0; }
.tk-hero--photo .tk-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(20,15,15,0.92) 0%, rgba(20,15,15,0.80) 34%, rgba(20,15,15,0.42) 58%, rgba(20,15,15,0.10) 82%),
  linear-gradient(0deg, rgba(20,15,15,0.60) 0%, rgba(20,15,15,0) 42%); }
.tk-hero--photo .b-wrap { position: relative; z-index: 2; width: 100%; }
.tk-hero--photo .tk-hero__inner { display: block; }
/* Textspalte verbreitert (Punkt 1, 04.08.2026): 640px war die eigentliche
   Bremse für die H1 — 24ch entsprächen bei 56px rund 945px und konnten
   nie greifen. 760px ist der Wert der Foto-Hero-Schwester .grap-hero__text
   und lässt die Überschrift spürbar mehr Wörter pro Zeile setzen. */
.tk-hero--photo .tk-hero__text { max-width: 760px; }
.tk-hero--photo .b-kicker { color: var(--rp-beige); }
.tk-hero--photo .b-kicker::before { background: var(--rp-rot-akzent); }
.tk-hero--photo .tk-hero__h1 { color: var(--rp-white); text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.tk-hero--photo .tk-hero__h1 em { color: #f4c9a0; }
.tk-hero--photo .tk-hero__sub { color: rgba(255,255,255,0.86); }
.tk-hero--photo .tk-hero__micro { color: rgba(212,201,181,0.9); }
.tk-hero--photo .tk-hero__trust { color: rgba(255,255,255,0.78); border-top-color: rgba(255,255,255,0.22); }
/* Echtes Hochkant-Foto (Oktober 2026): Über die volle Desktop-Breite
   gezogen läge die Tretende unter Headline und Scrim. Ab 1101 px steht
   das Foto deshalb als rechte Bildfläche mit weicher Kante, beide
   Gesichter und der ganze Tritt bleiben sichtbar. Tablet/Mobil wie bisher. */
@media (min-width: 1101px){
  .tk-hero--photo .tk-hero__bg { left: auto; right: 0; width: 60%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
}
/* Schmale Desktops: Fläche etwas schmaler, damit das Gesicht der
   Tretenden rechts neben der Headline bleibt. */
@media (min-width: 1101px) and (max-width: 1279px){
  .tk-hero--photo .tk-hero__bg { width: 55%; }
}
@media (max-width: 940px){
  .tk-hero--photo { min-height: 0; padding-top: clamp(130px, 22vh, 180px); padding-bottom: clamp(60px, 9vw, 96px); }
  .tk-hero--photo .tk-hero__bg { object-position: 68% 28%; }
  /* Scrim oben angehoben (Oktober 2026): Kicker und H1 liegen mobil über
     der hellen Deckenleuchte (vorher Kicker 1,9–2,5:1). Jetzt Kicker
     3,4–4,0:1, H1 4,2–6,3:1, Fließtext 6,4–7,1:1; beide Mädchen bleiben
     erkennbar. */
  .tk-hero--photo .tk-hero__scrim { background:
    linear-gradient(0deg, rgba(20,15,15,0.94) 0%, rgba(20,15,15,0.80) 40%, rgba(20,15,15,0.62) 72%, rgba(20,15,15,0.55) 100%); }
}
/* Tablet quer 941–1100 px: Das Foto liegt hier vollflächig hinter dem
   Text, der Fließtext lief über Bein und Anzug der Tretenden (1,4–1,7:1).
   Der Scrim deckt die Textspalte jetzt bis etwa 2/3 der Breite dicht ab
   (Fließtext gemessen 4,5:1 bei 941 px, 6,6:1 bei 1024 px, 9:1 bei 1100 px). */
@media (min-width: 941px) and (max-width: 1100px){
  .tk-hero--photo .tk-hero__scrim { background:
    linear-gradient(100deg, rgba(20,15,15,0.93) 0%, rgba(20,15,15,0.88) 40%, rgba(20,15,15,0.86) 66%, rgba(20,15,15,0.40) 86%, rgba(20,15,15,0.08) 100%),
    linear-gradient(0deg, rgba(20,15,15,0.60) 0%, rgba(20,15,15,0) 42%); }
}
/* Desktops 1101–1599 px: Die 760-px-Textspalte ragte in die rechte
   Bildfläche (Fließtext 1,9–4,2:1 über Bein und Anzug). Er endet jetzt vor
   der weichen Bildkante (gemessen 13:1 und mehr), die Hero-Höhe bleibt gleich. */
@media (min-width: 1101px) and (max-width: 1599px){
  .tk-hero--photo .tk-hero__sub { max-width: 30em; }
}

/* ============================================================
   2 · WAS IST TAEKWONDO? · ANKER 1 · Dunkelrot · Editorial-Prosa
   + Signatur „Die fünf Grundsätze" (Tenets-Konstellation)
   ============================================================ */
.tk-def { background: var(--tk-rot-anker); color: #fff; padding: clamp(100px, 13vw, 160px) 0; position: relative; overflow: hidden; }
.tk-def::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); pointer-events: none; }
.tk-def__inner { position: relative; z-index: 1; }
.tk-def__head { max-width: 880px; margin-bottom: clamp(44px, 5vw, 64px); }
.tk-def__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 20ch; text-wrap: balance; }
.tk-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.tk-def__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.5; color: var(--rp-beige); margin: 0; max-width: 56ch; }
.tk-def__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.tk-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; max-width: 60ch; }
.tk-def__body p:last-child { margin-bottom: 0; }
.tk-def__body strong { color: #fff; font-weight: 700; }
.tk-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
.tk-def__body .tk-def__hint { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: rgba(237,228,210,0.66); }
/* Zwischenüberschrift „Die Bedeutung hinter dem Namen“ (Übergabe 07.10.) */
.tk-def__body .tk-def__sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
@media (max-width: 940px){ .tk-def__grid{ grid-template-columns: 1fr; gap: 16px; } }

/* ── SIGNATUR · DIE FÜNF GRUNDSÄTZE (Tenets-Konstellation) ──────
   Fünf Grundsätze tragen jedes Training. Beim Scrollen erscheinen
   sie nacheinander und verbinden sich zu einer ruhigen Reihe —
   jeder mit einer kurzen Bedeutungszeile. Keine Gürtel-Treppe.
   Steuerung: js/taekwondo-v3.js. Ohne JS / reduced motion alle
   sichtbar & lesbar. */
.tk-tenets { margin-top: clamp(60px, 7vw, 100px); }
.tk-tenets__intro { max-width: 760px; margin: 0 0 clamp(44px, 5vw, 68px); }
.tk-tenets__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rp-beige); display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.tk-tenets__label::before { content:""; width: 40px; height: 1px; background: var(--rp-rot-akzent); flex-shrink: 0; }
.tk-tenets__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 26ch; text-wrap: balance; }
.tk-tenets__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }

.tk-tenets__row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.tk-tenets__track { position: absolute; left: 10%; right: 10%; top: 27px; height: 1px; background: linear-gradient(90deg, rgba(237,228,210,0.18), rgba(220,13,29,0.6), rgba(237,228,210,0.18)); transform-origin: left center; }

.tk-tenet { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tk-tenet__node { position: relative; z-index: 1; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(237,228,210,0.42); background: var(--tk-rot-anker); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--rp-beige); margin-bottom: 24px; transition: border-color 520ms var(--ease-standard), box-shadow 520ms var(--ease-standard), color 520ms var(--ease-standard), background 520ms var(--ease-standard); }
.tk-tenet.is-on .tk-tenet__node { border-color: var(--rp-rot-akzent); color: #fff; background: #7c1b29; box-shadow: 0 0 0 1px rgba(220,13,29,0.45), 0 0 30px -4px rgba(220,13,29,0.7); }
.tk-tenet__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 1.15vw, 17px); letter-spacing: 0.02em; line-height: 1.15; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.tk-tenet__ko { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,228,210,0.6); margin: 0 0 14px; white-space: nowrap; }
.tk-tenet__meaning { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0; max-width: 25ch; }
.tk-tenets__msg { margin: clamp(40px, 5vw, 64px) 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.4; color: var(--rp-beige); max-width: 40ch; text-wrap: balance; }
.tk-tenets__msg strong { font-style: normal; color: #fff; font-weight: 700; }

@media (max-width: 860px){
  .tk-tenets__row { grid-template-columns: 1fr; gap: 0; }
  .tk-tenets__track { display: none; }
  .tk-tenet { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 0; align-items: start; text-align: left; padding: 24px 0; border-top: 1px solid rgba(237,228,210,0.16); }
  .tk-tenet:first-child { border-top: 0; padding-top: 0; }
  .tk-tenet__node { grid-column: 1; grid-row: 1 / 4; margin-bottom: 0; }
  .tk-tenet__name { grid-column: 2; }
  .tk-tenet__ko { grid-column: 2; white-space: normal; }
  .tk-tenet__meaning { grid-column: 2; max-width: none; }
}

/* ============================================================
   3 · WAS LERNST DU — UND WAS LERNT DEIN KIND? · Beige
   Zweispaltig: Erwachsene geerdet, Kinder-Teilblock heller/wärmer
   ============================================================ */
.tk-learn { background: var(--tk-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; }
.tk-learn__head { max-width: 880px; margin-bottom: clamp(36px, 4vw, 52px); }
.tk-learn__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--tk-rot-anker); margin: 0 0 22px; max-width: 20ch; text-wrap: balance; }
.tk-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.tk-learn__lede { font-size: 18px; line-height: 1.7; color: var(--rp-tiefschwarz); margin: 0; max-width: 70ch; }
.tk-learn__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* Inhaltskarte (geteilt für Erwachsene & Kinder) */
.tk-card { border-radius: 22px; padding: clamp(30px, 3vw, 44px); display: flex; flex-direction: column; gap: 24px; }
.tk-card--adult { background: var(--rp-white); border: 1px solid var(--rp-border); }
.tk-card--kids { background: var(--tk-beige-kids); border: 1px solid rgba(220,13,29,0.18); box-shadow: 0 30px 70px -56px rgba(45,26,18,0.5); }
.tk-card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 0; display: flex; align-items: center; gap: 12px; }
.tk-card__tag::before { content: ""; width: 26px; height: 1px; background: var(--rp-rot-akzent); }
.tk-card--kids .tk-card__tag { color: var(--rp-rot-akzent); }
.tk-card__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -0.015em; color: var(--tk-rot-anker); margin: 0; }
.tk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.tk-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.66; color: var(--rp-grau-7012); }
.tk-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--rp-rot-akzent); }
.tk-card--adult .tk-list li::before { background: var(--tk-rot-anker); }
.tk-list strong { color: var(--tk-rot-anker); font-weight: 700; }
.tk-list .s-ph { color: var(--rp-rot-akzent); font-family: var(--font-mono); font-size: 0.86em; }
.tk-learn__close { margin: clamp(34px, 4vw, 48px) 0 0; max-width: 80ch; border-left: 3px solid rgba(109,23,35,0.3); padding: 6px 0 6px 26px; }
.tk-learn__close p { font-size: 17px; line-height: 1.72; color: var(--rp-tiefschwarz); margin: 0; }
.tk-learn__close strong { color: var(--tk-rot-anker); font-weight: 700; }
.tk-learn__close em { font-style: normal; color: var(--rp-rot-akzent); font-weight: 600; }
@media (max-width: 880px){ .tk-learn__cols{ grid-template-columns: 1fr; } }

/* ============================================================
   4 · FÜR WEN IST TAEKWONDO? · Beige · Kinder-Teilblock heller
   ============================================================ */
.tk-who { background: var(--tk-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; }
/* Farbübergang zu .tk-learn (Punkt 4, Feedback Dominik 04.08.2026):
   Beide Sektionen lagen auf --tk-beige-warm und liefen ohne sichtbare
   Trennung ineinander. .tk-who trägt jetzt den bereits vorhandenen, bis
   dahin ungenutzten Modifier --alt → --tk-beige-light. Keine neuen
   Farbwerte, Kontrast zur Vorsektion 1.30 (#D4C9B5 → #ede4d2). */
.tk-who--alt { background: var(--tk-beige-light); }

/* KACHELN MITZIEHEN · Auf dem hellen Grund verlöre die weiße Erwachsenen-
   Kachel ihre Kante (nur 1.26 zum Grund) und wäre von der Kinder-Kachel
   (#faf6ee, 1.08 Abstand) kaum zu unterscheiden.
   Die Kinder-Kachel bleibt hell/warm wie gehabt; die Erwachsenen-Kachel
   wird auf --tk-beige-warm geerdet — das ist exakt die Tonlage, die der
   Farbrhythmus dieser Seite für Erwachsene vorsieht („Erwachsene geerdet,
   Kinder heller/wärmer"). Abstände: Kachel↔Grund 1.30, Kachel↔Kachel 1.52.
   Ränder, Schatten und Innenabstände bleiben unverändert; nur der Rand
   bekommt Farbe, weil --rp-border demselben Beige entspricht und sonst
   unsichtbar wäre.
   Auf #D4C9B5 fielen Fließtext (--rp-grau-7012 → 4.03) und Tag
   (--rp-rot-akzent → 3.11) unter AA. Beide werden deshalb in dieser
   Kachel abgedunkelt: Text --rp-tiefschwarz (11.11), Tag --tk-rot-anker
   (7.13). Alle Werte gemessen, siehe Bericht 04.08.2026. */
.tk-who--alt .tk-card--adult { background: var(--tk-beige-warm); border-color: rgba(109,23,35,0.22); }
.tk-who--alt .tk-card--adult .tk-card__tag { color: var(--tk-rot-anker); }
.tk-who--alt .tk-card--adult .tk-card__tag::before { background: var(--tk-rot-anker); }
.tk-who--alt .tk-card--adult .tk-list li { color: var(--rp-tiefschwarz); }
.tk-who__head { max-width: 880px; margin-bottom: clamp(36px, 4vw, 52px); }
.tk-who__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--tk-rot-anker); margin: 0; max-width: 18ch; text-wrap: balance; }
.tk-who__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.tk-who__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.tk-who__close { margin: clamp(34px, 4vw, 48px) 0 0; max-width: 78ch; }
.tk-who__close p { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.4; color: var(--tk-rot-anker); margin: 0; text-wrap: balance; }
.tk-who__close strong { font-style: normal; color: var(--rp-rot-akzent); font-weight: 700; }
@media (max-width: 880px){ .tk-who__cols{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · ANKER 2 · Dunkelrot · Prosa + Count-up
   ============================================================ */
.tk-diff { background: var(--tk-rot-anker); color: #fff; padding: clamp(100px, 13vw, 160px) 0; position: relative; overflow: hidden; }
.tk-diff::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 16% 8%, rgba(220,13,29,0.26), transparent 56%); pointer-events: none; }
.tk-diff__inner { position: relative; z-index: 1; }
.tk-diff__head { max-width: 880px; margin-bottom: clamp(44px, 5vw, 60px); }
.tk-diff__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 17ch; text-wrap: balance; }
.tk-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.tk-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0; max-width: 64ch; }
.tk-diff__list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 980px; margin-top: clamp(40px, 5vw, 56px); }
.tk-diff__item { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid rgba(255,255,255,0.14); }
.tk-diff__item:last-child { border-bottom: 0; padding-bottom: 0; }
.tk-diff__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--rp-beige); padding-top: 6px; }
.tk-diff__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.18; letter-spacing: -0.015em; color: #fff; margin: 0 0 10px; }
.tk-diff__d { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.84); margin: 0; max-width: 74ch; }
.tk-diff__d strong { color: #fff; font-weight: 700; }
.tk-diff__close { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.4; color: var(--rp-beige); margin: clamp(36px, 4vw, 52px) 0 0; max-width: 50ch; text-wrap: balance; }
.tk-diff__close strong { font-style: normal; color: #fff; font-weight: 700; }

.tk-stats { margin-top: clamp(56px, 6vw, 84px); padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.18); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tk-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 4.4vw, 62px); line-height: 0.92; letter-spacing: -0.03em; color: var(--rp-beige); font-variant-numeric: tabular-nums; }
.tk-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.26em; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.18em; color: rgba(237,228,210,0.75); text-transform: uppercase; }
.tk-stat__n .suf { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.04em; vertical-align: 0.4em; margin-left: 0.14em; color: rgba(237,228,210,0.75); }
.tk-stat__l { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); line-height: 1.5; }
@media (max-width: 900px){ .tk-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } .tk-diff__item{ grid-template-columns: 1fr; gap: 8px; } }

/* ============================================================
   6 · STIMMEN AUS DER COMMUNITY · Beige hell · zwei Zitate
   ============================================================ */
.tk-quote { background: var(--tk-beige-light); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; }
.tk-quote__head { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 56px); }
.tk-quote__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; color: var(--tk-rot-anker); margin: 0; max-width: 18ch; text-wrap: balance; }
.tk-quote__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.tk-quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tk-quote__card { background: var(--rp-white); border: 1px solid var(--rp-border); border-radius: 24px; padding: clamp(34px, 3.4vw, 48px); display: flex; flex-direction: column; box-shadow: 0 30px 80px -58px rgba(45,26,18,0.5); }
.tk-quote__mark { font-family: var(--font-serif); font-size: 76px; line-height: 0.5; color: rgba(109,23,35,0.26); display: block; margin: 0 0 18px; }
.tk-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.4; color: var(--tk-rot-anker); margin: 0 0 26px; }
.tk-quote__q .s-ph { color: var(--rp-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.62em; line-height: 1.7; }
.tk-quote__attr { display: flex; align-items: center; gap: 14px; margin-top: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-rot-anker); }
.tk-quote__attr::before { content: ""; width: 34px; height: 1px; background: var(--tk-rot-anker); flex-shrink: 0; }
.tk-quote__attr .s-ph { color: var(--rp-rot-akzent); }
.tk-quote__note { margin: clamp(28px, 3vw, 36px) 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #8a7e66; max-width: 78ch; }
@media (max-width: 820px){ .tk-quote__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   7 · FAQ (b-faq / b-q) · helle Variante (Beige hell)
   ============================================================ */
.b-faq { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.2vw, 78px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 44ch; margin: 0; }
.b-faq__list { border-top: 1px solid rgba(255,255,255,0.14); }
.b-q { border-bottom: 1px solid rgba(255,255,255,0.14); }
.b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.1vw, 26px); letter-spacing: -0.01em; color: #fff; background: none; border: 0; cursor: pointer; }
.b-q__btn h3 { font: inherit; margin: 0; }
.b-q__plus { flex-shrink: 0; width: 32px; height: 32px; position: relative; }
.b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--rp-rot-akzent); transition: transform 250ms; }
.b-q__plus::before { width: 22px; height: 2px; transform: translate(-50%, -50%); }
.b-q__plus::after { width: 2px; height: 22px; transform: translate(-50%, -50%); }
.b-q.is-open .b-q__plus::after { transform: translate(-50%, -50%) scaleY(0); }
.b-q__a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-standard); }
.b-q__a-inner { padding: 0 64px 30px 0; font-size: 16px; line-height: 1.68; color: rgba(255,255,255,0.78); max-width: 80ch; }
.b-q.is-open .b-q__a { max-height: 680px; }
.b-faq__foot { margin-top: 40px; }
@media (max-width: 900px){ .b-faq__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .b-q__a-inner{ padding-right: 0; } }

/* helle FAQ-Variante (Beige hell) */
.b-faq--light { background: var(--tk-beige-light); color: var(--rp-grau-7012); }
.b-faq--light .b-faq__h { color: var(--tk-rot-anker); }
.b-faq--light .b-faq__sub { color: var(--rp-grau-7012); }
.b-faq--light .b-faq__list { border-top-color: var(--rp-border); }
.b-faq--light .b-q { border-bottom-color: var(--rp-border); }
.b-faq--light .b-q__btn { color: var(--rp-tiefschwarz); }
.b-faq--light .b-q__a-inner { color: var(--rp-grau-7012); }
.b-faq--light .b-q__a-inner .s-ph { color: var(--rp-rot-akzent); }

/* ============================================================
   8 · WO DU TAEKWONDO TRAINIERST · Beige warm · 3-Spalten-Raster
   ============================================================ */
.tk-loc { background: var(--tk-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; }
.tk-loc__head { max-width: 780px; margin: 0 auto clamp(44px, 5vw, 60px); text-align: center; }
.tk-loc__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--tk-rot-anker); margin: 0 0 24px; text-wrap: balance; }
.tk-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.tk-loc__lede { font-size: 17px; line-height: 1.68; color: var(--rp-tiefschwarz); margin: 0; }
/* 3-Spalten-Raster · genau drei Standorte → eine saubere Reihe */
/* ── Standort-Karten mit Foto (Punkt 6, Feedback Dominik 04.08.2026) ──
   Struktur und Aufbau von .grap-loc-card / .km-loc-card übernommen:
   Foto oben, eigener Body-Wrapper darunter, ganze Karte klickbar (<a>).
   ABER: Dort liegen die Karten auf DUNKLEM Sektionsgrund. .tk-loc ist
   hell (--tk-beige-warm), deshalb sind Farben, Ränder und Schatten NICHT
   kopiert, sondern aus der bisherigen hellen Kartenoptik (weiß, warmer
   Rand, weicher Schatten) weiterentwickelt. Das Innenpolster der alten
   Karte wandert in .tk-loc__body, damit das Foto randlos oben sitzt. */
.tk-loc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tk-loc__card { background: var(--rp-white); border: 1px solid var(--rp-border); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -56px rgba(45,26,18,0.5); transition: border-color 320ms var(--ease-standard), transform 520ms var(--ease-standard), box-shadow 520ms var(--ease-standard); }
.tk-loc__card:hover { border-color: rgba(220,13,29,0.55); transform: translateY(-4px); box-shadow: 0 36px 80px -46px rgba(45,26,18,0.62); }
.tk-loc__photo { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--tk-beige-light); flex-shrink: 0; }
.tk-loc__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-standard); }
.tk-loc__card:hover .tk-loc__photo img { transform: scale(1.06); }
/* Heller Abschluss statt des dunklen Verlaufs der Dunkel-Seiten — er
   führt das Foto weich in die weiße Kartenfläche über. */
.tk-loc__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(255,255,255,0.55)); }
.tk-loc__body { display: flex; flex-direction: column; flex: 1; padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 28px); box-sizing: border-box; }
.tk-loc__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rp-rot-akzent); }
.tk-loc__badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 14px 0 0; display: inline-flex; align-items: center; gap: 10px; }
.tk-loc__badge::before { content: ""; width: 22px; height: 1px; background: rgba(220,13,29,0.5); flex-shrink: 0; }
.tk-loc__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.02; letter-spacing: -0.02em; color: var(--tk-rot-anker); margin: 12px 0 8px; }
.tk-loc__region { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-7012); margin: 0; }
.tk-loc__meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; }
.tk-loc__pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tk-rot-anker); background: var(--tk-beige-light); border: 1px solid var(--rp-border); border-radius: 999px; padding: 9px 15px; }
/* margin-bottom: auto schluckt die freie Höhe → der Pfeil sitzt in allen
   drei (unterschiedlich hohen) Karten bündig unten. */
.tk-loc__addr { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.04em; color: var(--rp-grau-7012); margin: 20px 0 auto; }
.tk-loc__arrow { margin: 22px 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(109,23,35,0.28); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--tk-rot-anker); flex-shrink: 0; transition: background 220ms var(--ease-standard), border-color 220ms var(--ease-standard), color 220ms var(--ease-standard), transform 320ms var(--ease-standard); }
.tk-loc__card:hover .tk-loc__arrow { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); color: #fff; transform: translate(2px,-2px); }
.tk-loc__foot { margin: clamp(28px, 3vw, 40px) auto 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; letter-spacing: 0.04em; color: var(--rp-rot-akzent); max-width: 92ch; text-align: center; }
@media (max-width: 980px){ .tk-loc__grid{ grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; } }
@media (max-width: 620px){ .tk-loc__grid{ grid-template-columns: 1fr; max-width: 460px; } }

/* ============================================================
   9 · FINALER CTA · ANKER 3 · Tiefschwarz · Kante zu Kante
   ============================================================ */
.tk-final { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(120px, 15vw, 184px) 24px; position: relative; overflow: hidden; text-align: center; }
.tk-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(109,23,35,0.6), transparent 62%); pointer-events: none; }
.tk-final__inner { max-width: 940px; margin: 0 auto; position: relative; z-index: 1; }
.tk-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.035em; margin: 28px 0; text-wrap: balance; }
.tk-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.tk-final__sub { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.88); margin: 0 auto 44px; max-width: 60ch; }
.tk-final__row { display: flex; justify-content: center; }
.tk-final__btn { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.tk-final__foot { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ============================================================
   FOOTER (b-foot) · systemweit
   ============================================================ */
.b-foot { background: #0a0808; color: #888; padding: 80px 0 40px; font-size: 12px; }
.b-foot__top { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid #1f1818; }
.b-foot__brand img { height: 38px; filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 24px; }
.b-foot__brand p { color: #777; font-size: 13px; line-height: 1.55; max-width: 32ch; margin: 0; }
.b-foot__col h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 18px; }
.b-foot__col ul { list-style: none; margin: 0; padding: 0; }
.b-foot__col li { line-height: 2; }
.b-foot__col a { color: #888; transition: color 200ms; }
.b-foot__col a:hover { color: #fff; }
.b-foot__bot { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #555; }
.b-foot__bot a { color: #777; }
.b-foot__bot a:hover { color: #fff; }
@media (max-width: 900px){ .b-foot__top{ grid-template-columns: 1fr 1fr; gap: 32px; } .b-foot__bot{ flex-direction: column; gap: 12px; text-align: center; } }

/* ============================================================
   STICKY-CTA · Desktop im Header → Floating nur mobil
   ============================================================ */
.sticky-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--rp-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 24px; border-radius: 999px; box-shadow: 0 20px 50px -16px rgba(220,13,29,0.6); transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard); }
.sticky-cta.hidden { opacity: 0; transform: translateY(120%); pointer-events: none; }
@media (min-width: 721px){
  body.tk .sticky-cta { left: auto; right: 24px; bottom: 24px; width: auto; }
}

/* ── Tenets-Motion (nur wenn Bewegung erlaubt) ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .tk-tenets.is-armed .tk-tenet { opacity: 0.28; transform: translateY(12px); transition: opacity 720ms var(--ease-standard), transform 720ms var(--ease-standard); }
  .tk-tenets.is-armed .tk-tenet.is-on { opacity: 1; transform: translateY(0); }
  .tk-tenets.is-armed .tk-tenets__track { transition: transform 240ms linear; }
}