/* ============================================================
   RANDORI-PRO · KTR · Kurztechniken Raffel (High End)
   Sportartenseite · Template B „Ergebnis-Fokus" + Stimmung 3
   „Dunkel & Intensiv". Additiv zu tokens.css; teilt die
   bv3-Mechaniken (Progress, Glas-Header, [data-rv]-Reveals,
   Button-Glanz) mit bold-v3.css.

   Layout-Kanon (verbindlich):
   · Standard-Karten-Radius (16–24px), KEINE asymmetrischen Radien.
   · Hero-Bild = rechteckiges Bild-Card mit Standard-Radius.
   · Farbrhythmus: 6 DUNKLE Sektionen, 3 HELLE Relief-Inseln.
   · Akzentrot nur für CTAs/Links/Highlights, nie als Fläche.
   · GENAU EIN Signatur-Element: die Reaktionskette (§3).
   Aktiv ausschließlich unter body.bv3.ktr.
   ============================================================ */

:root {
  --ktr-dark:       #1A1414;  /* Tiefschwarz */
  --ktr-rot-anker:  #6D1723;  /* Dunkelrot-Anker */
  --ktr-rot-akzent: #DC0D1D;  /* Akzentrot */
  --ktr-beige:      #faf6ee;  /* Relief hell, warm */
  --ktr-grey:       #f3f3f3;  /* Relief hell, neutral (FAQ) */
  --ktr-ink:        #1A1414;
  --ktr-body:       #575E62;
  --ktr-ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page-Grundlage ────────────────────────────────────────── */
body.bv3.ktr { background: var(--ktr-dark); color: var(--ktr-body); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.ktr a { color: inherit; text-decoration: none; }
.ktr img { max-width: 100%; display: block; }

.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: .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).
   Identische Lösung wie auf „Boxen" (.box .b-wrap) und „Kickboxen".
   Gescopet auf .ktr; css/ktr.css wird ohnehin nur von dieser Seite
   geladen, die Scope hält die Regel aber sichtbar seitengebunden.
   Unter 720px greift weiter padding: 0 24px — dort ändert sich nichts,
   weil der Wrap ohnehin schmaler als max-width ist.
   Der global injizierte Header (.rp-gnav__inner aus css/mobile-nav.css)
   rechnet ebenfalls content-box und stünde sonst 40px weiter außen als
   der Seiteninhalt. Er wird hier mitgezogen, damit Logo und Hero-Text
   auf derselben Kante sitzen — so wie auf JJB. css/mobile-nav.css bleibt
   unangetastet, die Regel gilt nur unter .ktr. */
.ktr .b-wrap,
.ktr .rp-gnav__inner { box-sizing: border-box; }

/* Gleiche Ursache, andere Stelle: .b-btn rechnet ebenfalls content-box.
   Die Regel @media (max-width:480px){ .b-btn--big { width:100% } } weiter
   unten addiert das Padding deshalb OBEN DRAUF — der Hero-CTA wurde bei
   375px 374px breit bei 318px verfügbarer Breite und vom overflow:hidden
   des Heros angeschnitten. Mit border-box greift die vorhandene
   „vollbreit"-Regel so, wie sie gemeint ist: der Button füllt den
   CTA-Block exakt aus, die Micro-Zeile sitzt mittig darunter.
   Auf Desktop ändert sich nichts — dort hat der Button keine width. */
.ktr .b-btn { box-sizing: border-box; }

/* ── Kicker ────────────────────────────────────────────────── */
.b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ktr-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 16px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--ktr-rot-akzent); flex-shrink: 0; }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--anker { color: var(--ktr-rot-anker); }
.b-kicker--anker::before { background: var(--ktr-rot-anker); }
.b-kicker--center { justify-content: center; }
.b-kicker__short { display: none; }
@media (max-width: 640px){
  .b-kicker__full { display: none; }
  .b-kicker__short { display: inline; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ktr-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 200ms, transform 200ms, box-shadow 300ms; white-space: nowrap; }
.b-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.b-btn--big { padding: 26px 52px; font-size: 15px; }

/* Schmale Phones: Haupt-CTAs voll­breit statt Pfeil-Umbruch
   (Gegenstück zu css/hapkido.css, damit der größere JJB-Button
   auf dem Handy nicht aus dem Container läuft). */
@media (max-width: 480px){
  .b-btn--big { width: 100%; justify-content: center; text-align: center; padding: 20px 24px; font-size: 13px; }
  /* white-space: nowrap der Basisregel bleibt fuer Desktop erhalten, wuerde
     hier aber ueber den vollbreiten Button hinauslaufen (gemessen bei 375px). */
  .b-btn--big { white-space: normal; }
}
@media (max-width: 440px){
  .b-btn { font-size: 13px; padding: 16px 26px; }
  .b-btn--big { font-size: 13.5px; padding: 18px 28px; }
}
.b-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--ktr-rot-akzent); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.b-link:hover { border-color: var(--ktr-rot-akzent); }
.b-link--beige { color: var(--ktr-rot-anker); }
.b-link--beige:hover { border-color: var(--ktr-rot-anker); }

/* ── Striped Foto-/Video-Platzhalter ───────────────────────── */
.ktr-ph { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #2a1418 0 16px, #241115 16px 32px); border: 1px solid rgba(212,201,181,0.16); }
.ktr-ph__note { margin: auto; max-width: min(560px, 84%); padding: clamp(24px, 5vw, 40px) 0 6px; text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: rgba(212,201,181,0.78); }
.ktr-ph__tag { align-self: flex-start; margin: 0 16px 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,201,181,0.9); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 13px; border-radius: 999px; }
.ktr-ph--beige { background: repeating-linear-gradient(135deg, #e9e0d0 0 16px, #e2d8c5 16px 32px); border-color: rgba(74,58,40,0.18); }
.ktr-ph--beige .ktr-ph__note { color: #6a5c44; }
.ktr-ph--beige .ktr-ph__tag { color: #4a3a28; background: rgba(237,228,210,0.85); border-color: rgba(74,58,40,0.22); }

/* ============================================================
   HEADER · fix, Glas-Verhalten via bold-v3.css (.is-scrolled)
   ============================================================ */
.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; filter: brightness(0) invert(1); display: block; }
.b-nav { display: flex; gap: 34px; 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(255,255,255,0.85); transition: color 200ms; white-space: nowrap; }
.b-nav a:hover { color: #fff; }
.b-nav .b-nav-cta { border: 1px solid rgba(255,255,255,0.55); padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.1em; transition: background 200ms, color 200ms, border-color 200ms; }
.b-nav .b-nav-cta:hover { background: var(--ktr-rot-akzent); color: #fff; border-color: var(--ktr-rot-akzent); }
@media (max-width: 980px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* ============================================================
   1 · HERO · Tiefschwarz + roter Glow · rechteckiges Bild-Card
   ============================================================ */
/* Vertikale Paddings nachgezogen (Feedback 04.08.2026): oben von
   clamp(132px,18vh,184px) auf clamp(118px,15vh,160px), unten von
   clamp(72px,9vw,116px) auf clamp(56px,7vw,92px). Der Mindestwert oben
   bleibt mit 118px deutlich über der Header-Höhe (--gnav-h 78px, mit
   Logo 40px und Innenabstand), der fixe Header kann den Kicker also
   nicht überdecken. */
.ktr-hero { position: relative; background: var(--ktr-dark); color: #fff; overflow: hidden; padding: clamp(118px, 15vh, 160px) 0 clamp(56px, 7vw, 92px); }
.ktr-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 32%; z-index: 0; }
/* Scrim nachgezogen (04.08.2026). Mit der kleineren H1 rückt der Textblock
   weiter in die hellere Bildmitte; gemessen am hellsten Hintergrundpixel
   unter jedem Textelement fielen Kicker (3,64:1), Fließtext (4,39:1) und
   Trust-Zeile (4,34:1) unter WCAG AA. Die Stützstellen der Verlaufsmitte
   sind deshalb angehoben: 30%→32% bei 0.87→0.92, 56%→58% bei 0.5→0.68,
   78% bei 0.16→0.3. Anfang und Ende bleiben praktisch unverändert, das
   Foto bleibt rechts frei. Danach alle Hero-Elemente ≥ 5,78:1. */
.ktr-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(26,20,20,0.96) 0%, rgba(26,20,20,0.92) 32%, rgba(26,20,20,0.68) 58%, rgba(26,20,20,0.3) 78%, transparent 96%),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.30), transparent 56%),
    radial-gradient(ellipse 90% 70% at 10% 100%, rgba(109,23,35,0.42), transparent 60%); }
.ktr-hero__inner { position: relative; z-index: 2; display: block; }
.ktr-hero__text { max-width: 640px; }
.ktr-hero .b-kicker { color: var(--rp-beige); }
.ktr-hero .b-kicker::before { background: var(--rp-beige); }
/* H1 verkleinert (Feedback 04.08.2026): von clamp(40px,5.6vw,86px)/1.0
   auf clamp(34px,4.4vw,62px)/1.05. Freigabe Dominik 04.08.2026 — KTR
   weicht damit bewusst von Boxen/Grappling/MMA/Krav Maga ab, die alle
   noch auf clamp(40px,5.6vw,86px) stehen. Zweck: der komplette Hero
   passt auf einen 1440x900-Laptop. max-width bleibt 16ch (ch skaliert
   mit der Schriftgröße, die Zeilenzahl ändert sich dadurch nicht). */
.ktr-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -0.035em; color: #fff; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; }
.ktr-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); margin: 0 0 36px; max-width: 56ch; }
/* 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 .box-hero__cta / .mma-hero__cta).
   Der frühere „Mehr erfahren ↓"-Link ist am 04.08.2026 entfallen; die
   beiden Überschreibungen .ktr-hero__cta .b-link wurden mit entfernt,
   .b-link kommt im Hero nicht mehr vor. Die geteilte Grundregel für
   .b-link (oben) bleibt unverändert. */
.ktr-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.ktr-hero__cta .b-btn { justify-content: center; }
.ktr-hero__micro { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.9); }
.ktr-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.82); line-height: 1.9; }
@media (max-width: 940px){
  .ktr-hero__text { max-width: none; }
  .ktr-hero__bg { object-position: 50% 22%; }
  /* Mobil war der Scrim mit 0.55/0.38 deutlich zu schwach: bei 375px lagen
     H1 (2,59:1), Fließtext (2,19:1) und Kicker (3,07:1) klar unter AA, weil
     das Foto oben fast ungedämpft durchkam. Auf 0.82/0.72 angehoben, das
     Ende bleibt bei 0.96. Danach alle Hero-Elemente ≥ 4,63:1. */
  .ktr-hero__scrim { background:
      linear-gradient(180deg, rgba(26,20,20,0.82) 0%, rgba(26,20,20,0.72) 42%, rgba(26,20,20,0.96) 100%),
      radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.22), transparent 56%); }
}

/* ============================================================
   2 · WAS IST KRAV MAGA? · DUNKELROT · weiße Schrift · Prosa
   ============================================================ */
.ktr-def { background: var(--ktr-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.ktr-def::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); }
.ktr-def__inner { position: relative; z-index: 1; }
.ktr-def__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 60px); }
.ktr-def__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: 18ch; text-wrap: balance; }
.ktr-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-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: 54ch; }
.ktr-def__body { columns: 2; column-gap: clamp(40px, 5vw, 72px); max-width: 1180px; }
.ktr-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; break-inside: avoid; }
.ktr-def__body p:last-child { margin-bottom: 0; }
.ktr-def__body strong { color: #fff; font-weight: 700; }
.ktr-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
.ktr-def__bridge { margin: clamp(40px, 5vw, 60px) 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); line-height: 1.4; color: var(--rp-beige); max-width: 40ch; }
.ktr-def__more { display: none; }
@media (max-width: 820px){
  .ktr-def__body{ columns: 1; }
  .ktr-def.is-collapsible .ktr-def__body > p:nth-child(n+3){ display: none; }
  .ktr-def.is-collapsible.is-expanded .ktr-def__body > p:nth-child(n+3){ display: block; }
  .ktr-def.is-collapsible .ktr-def__more{ display: inline-flex; align-items: center; gap: 8px;
    margin-top: 6px; background: none; border: 0; cursor: pointer; padding: 0 0 2px;
    font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
    color: var(--rp-beige); border-bottom: 1px solid rgba(212,201,181,0.5); }
  .ktr-def.is-collapsible.is-expanded .ktr-def__more{ display: none; }
}

/* ── SIGNATUR · DAS MINIMALPRINZIP · Werkzeugkasten auf engstem Raum
   Kein Prozess, keine Reaktionskette: ein bewusst kleiner Satz von
   Kerntechniken, in einen engen Raum gespannt. Beige/rote Linien. ── */
.ktr-kit { position: relative; z-index: 1; margin-top: clamp(60px, 7vw, 100px); }
.ktr-kit__head { margin-bottom: clamp(32px, 4vw, 48px); }
.ktr-kit__intro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 12px; display: flex; align-items: center; gap: 14px; }
.ktr-kit__intro::before { content:""; width: 40px; height: 1px; background: var(--rp-beige); flex-shrink: 0; }
.ktr-kit__sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 56ch; }
.ktr-kit__frame { position: relative; margin: 0 auto; max-width: 1040px; padding: clamp(44px, 5vw, 64px) clamp(34px, 5vw, 72px) clamp(40px, 5vw, 56px); }
/* enge Wände — zwei beige Hairlines, je eine Tick-Marke oben/unten */
.ktr-kit__wall { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(212,201,181,0.5); }
.ktr-kit__wall--l { left: 0; }
.ktr-kit__wall--r { right: 0; }
.ktr-kit__wall::before, .ktr-kit__wall::after { content:""; position: absolute; left: -5px; width: 11px; height: 1px; background: rgba(212,201,181,0.7); }
.ktr-kit__wall::before { top: 0; }
.ktr-kit__wall::after { bottom: 0; }
.ktr-kit__dim { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.8); background: var(--ktr-rot-anker); padding: 0 16px; }
.ktr-kit__tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ktr-tool { position: relative; border: 1px solid rgba(212,201,181,0.26); border-radius: 18px; padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 28px); background: rgba(20,8,8,0.26); transition: border-color 320ms, transform 520ms var(--ktr-ease), box-shadow 520ms; }
.ktr-tool:hover { border-color: rgba(220,13,29,0.7); transform: translateY(-4px); box-shadow: 0 26px 56px -34px rgba(0,0,0,0.8); }
.ktr-tool__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ktr-rot-akzent); display: block; margin-bottom: 16px; }
.ktr-tool__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 10px; }
.ktr-tool__desc { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }
.ktr-kit__foot { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.35; color: #fff; text-wrap: balance; }
.ktr-kit__foot em { font-style: italic; color: var(--rp-beige); }
.ktr-kit__dim-short{ display: none; }
@media (max-width: 880px){
  .ktr-kit__tools{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ktr-kit__frame{ padding-top: clamp(48px, 9vw, 60px); }
  .ktr-kit__dim{ position: static; transform: none; white-space: normal; left: auto; display: block;
    width: 100%; max-width: 30ch; margin: 0 auto clamp(22px, 6vw, 30px); text-align: center;
    font-size: 9.5px; line-height: 1.7; }
  .ktr-kit__dim-full{ display: none; }
  .ktr-kit__dim-short{ display: inline; }
}

/* ============================================================
   3 · WAS LERNST DU? · HELL Beige · trägt die Reaktionskette
   ============================================================ */
.ktr-learn { background: var(--ktr-beige); color: var(--ktr-body); padding: clamp(96px, 12vw, 152px) 0; }
.ktr-learn__head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 52px); }
.ktr-learn__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: var(--ktr-rot-anker); margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.ktr-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ktr-rot-akzent); }
.ktr-learn__body { max-width: 70ch; }
.ktr-learn__body p { font-size: 18px; line-height: 1.7; color: var(--ktr-ink); margin: 0 0 20px; }
.ktr-learn__body p:last-child { margin-bottom: 0; }
.ktr-learn__body strong { color: var(--ktr-rot-anker); font-weight: 700; }

.ktr-learn__plan { margin: clamp(48px, 6vw, 72px) 0 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ktr-rot-akzent); display: flex; align-items: center; gap: 14px; }
.ktr-learn__plan::before { content:""; width: 40px; height: 1px; background: var(--ktr-rot-akzent); flex-shrink: 0; }
.ktr-learn__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ktr-litem { position: relative; background: #fffdf8; border: 1px solid rgba(74,58,40,0.14); border-radius: 22px; padding: clamp(26px, 3vw, 36px); transition: border-color 320ms, transform 520ms var(--ktr-ease), box-shadow 520ms; }
.ktr-litem:hover { border-color: rgba(220,13,29,0.5); transform: translateY(-4px); box-shadow: 0 26px 56px -40px rgba(26,20,20,0.5); }
.ktr-litem__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ktr-rot-akzent); display: block; margin-bottom: 14px; }
.ktr-litem__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 25px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ktr-rot-anker); margin: 0 0 10px; }
.ktr-litem__p { font-size: 16px; line-height: 1.62; color: var(--ktr-ink); margin: 0; }
.ktr-learn__honest { margin: clamp(44px, 5vw, 64px) 0 0; padding-top: 32px; border-top: 1px solid rgba(74,58,40,0.2); font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.2vw, 30px); line-height: 1.4; color: var(--ktr-rot-anker); max-width: 50ch; text-wrap: balance; }
@media (max-width: 760px){ .ktr-learn__list{ grid-template-columns: 1fr; } }

/* ============================================================
   4 · FÜR WEN? · DUNKEL Tiefschwarz · weiße Schrift · Standard
   ============================================================ */
.ktr-fit { background: var(--ktr-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.ktr-fit__head { max-width: 860px; margin-bottom: clamp(44px, 5vw, 64px); }
.ktr-fit__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; max-width: 18ch; text-wrap: balance; }
.ktr-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ktr-fit__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: clamp(28px, 3vw, 40px); transition: border-color 320ms, transform 520ms var(--ktr-ease), box-shadow 520ms; }
.ktr-fit__card:hover { border-color: rgba(220,13,29,0.6); transform: translateY(-4px); box-shadow: 0 30px 64px -38px rgba(0,0,0,0.7); }
.ktr-fit__card--no { background: rgba(20,8,8,0.4); }
.ktr-fit__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 16px; }
.ktr-fit__card--no .ktr-fit__lead { color: rgba(255,255,255,0.92); }
.ktr-fit__p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; }
.ktr-fit__p + .ktr-fit__p { margin-top: 14px; }
.ktr-fit__p a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); font-weight: 700; transition: border-color 200ms; }
.ktr-fit__p a:hover { border-color: #fff; }
@media (max-width: 820px){ .ktr-fit__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · DUNKELROT · weiße Schrift
   ============================================================ */
.ktr-diff { background: var(--ktr-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.ktr-diff::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 12% 8%, rgba(220,13,29,0.26), transparent 56%); }
.ktr-diff__inner { position: relative; z-index: 1; }
.ktr-diff__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 56px); }
.ktr-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: 16ch; text-wrap: balance; }
.ktr-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 58ch; }
.ktr-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.ktr-point { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 22px; padding: clamp(26px, 2.8vw, 38px); transition: border-color 320ms, transform 520ms var(--ktr-ease); }
.ktr-point:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.ktr-point__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.16; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 12px; }
.ktr-point__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; }
.ktr-diff__price { margin: clamp(40px, 5vw, 56px) 0 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.9); max-width: 62ch; }
.ktr-diff__price strong { color: #fff; font-weight: 700; }
.ktr-diff__price em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
@media (max-width: 980px){ .ktr-points{ grid-template-columns: 1fr; } }

.ktr-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; }
.ktr-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.92; letter-spacing: -0.03em; color: var(--rp-beige); font-variant-numeric: tabular-nums; }
.ktr-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.2em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.ktr-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.66); line-height: 1.5; }
@media (max-width: 900px){ .ktr-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* ============================================================
   6 · STIMMEN · HELL Beige · großes Zitat + dezentes Bild-Card
   ============================================================ */
.ktr-quote { background: var(--ktr-beige); color: var(--ktr-ink); padding: clamp(100px, 13vw, 160px) 0; }
.ktr-quote__inner { max-width: 1180px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.ktr-quote__mark { font-family: var(--font-serif); font-size: 110px; line-height: 0.6; color: rgba(109,23,35,0.32); display: block; margin-bottom: 4px; }
.ktr-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 40px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ktr-rot-anker); margin: 0 0 36px; text-wrap: balance; }
.ktr-quote__q .s-ph { color: var(--ktr-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.5em; line-height: 1.7; }
.ktr-quote__attr { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ktr-rot-anker); }
.ktr-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--ktr-rot-anker); flex-shrink: 0; }
.ktr-quote__attr .s-ph { color: var(--ktr-rot-akzent); }
.ktr-quote__note { margin-top: 32px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #8a7e66; max-width: 60ch; }
.ktr-quote__media { position: relative; aspect-ratio: 4/5; }
@media (max-width: 820px){ .ktr-quote__inner{ grid-template-columns: 1fr; } .ktr-quote__media{ aspect-ratio: 16/10; order: -1; } }

/* ============================================================
   7 · FAQ · HELL Hellgrau · Akkordeon (b-q)
   ============================================================ */
.b-faq { background: var(--ktr-grey); color: var(--ktr-body); padding: clamp(96px, 12vw, 152px) 0; }
.b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 52px; }
.b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 78px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ktr-rot-anker); margin: 0; max-width: 14ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: var(--ktr-body); max-width: 46ch; margin: 0; }
.b-faq__list { border-top: 1px solid rgba(26,20,20,0.14); }
.b-q { border-bottom: 1px solid rgba(26,20,20,0.14); }
.b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; color: var(--ktr-ink); background: none; border: 0; cursor: pointer; transition: color 200ms; }
.b-q__btn h3 { font: inherit; margin: 0; }
.b-q__btn:hover h3 { color: var(--ktr-rot-akzent); }
.b-q__plus { flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ktr-rot-akzent); transition: transform 250ms; }
.b-q__plus::before { width: 20px; height: 2px; transform: translate(-50%, -50%); }
.b-q__plus::after { width: 2px; height: 20px; 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 400ms var(--ease-standard); }
.b-q__a-inner { padding: 0 64px 28px 0; font-size: 16px; line-height: 1.68; color: var(--ktr-body); max-width: 80ch; }
.b-q__a-inner .s-ph { color: var(--ktr-rot-akzent); font-family: var(--font-mono); font-size: 0.85em; }
.b-q.is-open .b-q__a { max-height: 640px; }
.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; } }

/* ============================================================
   8 · STANDORTE · DUNKEL Tiefschwarz · 3-Spalten-Raster
   ============================================================ */
.ktr-loc { background: var(--ktr-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.ktr-loc__head { max-width: 720px; margin: 0 auto clamp(44px, 5vw, 60px); text-align: center; }
.ktr-loc__head .b-kicker { justify-content: center; }
.ktr-loc__head .ktr-loc__lede { margin-left: auto; margin-right: auto; }
.ktr-loc__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.ktr-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-loc__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.84); margin: 0; max-width: 60ch; }
/* EINE zentrierte, prominente Einzelkarte (nur Spandau) */
.ktr-loc__single { position: relative; max-width: 620px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; padding: clamp(40px, 5vw, 60px) clamp(34px, 4vw, 56px); text-align: center; transition: border-color 320ms, transform 520ms var(--ktr-ease), box-shadow 520ms; }
.ktr-loc__single:hover { border-color: rgba(220,13,29,0.55); transform: translateY(-4px); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.85); }
.ktr-loc__single::before { content:""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(220,13,29,0.16), transparent 62%); }
.ktr-loc-card__photo { position: relative; margin: calc(-1 * clamp(40px, 5vw, 60px)) calc(-1 * clamp(34px, 4vw, 56px)) clamp(28px, 3.4vw, 36px); border-radius: 24px 24px 0 0; overflow: hidden; aspect-ratio: 16/9; }
.ktr-loc-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ktr-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ktr-rot-akzent); position: relative; }
.ktr-loc-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.0; letter-spacing: -0.025em; color: #fff; margin: 16px 0 8px; position: relative; }
.ktr-loc-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0; position: relative; }
.ktr-loc-card__meta { position: relative; margin: 24px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.66); max-width: none; }   /* war 380px: die zweite Angabe brach um und begann mit „·" (07.10.2026) */
.ktr-loc-card__meta span { position: relative; }
.ktr-loc-card__meta span + span::before { content:"·"; position: absolute; left: -11px; color: rgba(255,255,255,0.4); }
.ktr-loc__cta { position: relative; margin-top: clamp(28px, 3vw, 38px); }
.ktr-loc__close { margin: clamp(44px, 5vw, 60px) auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 70ch; text-align: center; }
.ktr-loc__note { margin: 18px auto 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: var(--ktr-rot-akzent); max-width: 76ch; text-align: center; }
@media (max-width: 520px){
  .ktr-loc-card__meta{ flex-direction: column; gap: 8px; max-width: none; }
  .ktr-loc-card__meta span + span::before{ display: none; }
}

/* ============================================================
   9 · FINALER CTA · DUNKEL Tiefschwarz + roter Glow
   ============================================================ */
.ktr-final { background: var(--ktr-dark); color: #fff; padding: clamp(120px, 15vw, 188px) 24px; position: relative; overflow: hidden; text-align: center; }
.ktr-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(220,13,29,0.4), rgba(109,23,35,0.28) 36%, transparent 64%); }
.ktr-final__inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.ktr-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.03em; margin: 26px 0; text-wrap: balance; }
.ktr-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ktr-final__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 40px; max-width: 52ch; }
.ktr-final__row { display: flex; justify-content: center; }
.ktr-final .b-btn--big { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.ktr-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.58); }

/* ============================================================
   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 · mobil vollbreit unten, Desktop schwebend
   ============================================================ */
.sticky-cta { position: fixed; z-index: 80; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ktr-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; box-shadow: 0 18px 44px -16px rgba(220,13,29,0.6); transition: opacity 300ms, transform 300ms; }
@media (min-width: 721px){
  .sticky-cta { right: 28px; bottom: 28px; padding: 16px 28px; border-radius: 999px; }
}
@media (max-width: 720px){
  .sticky-cta { left: 0; right: 0; bottom: 0; padding: 18px 24px; border-radius: 0; }
}
.sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }