/* ============================================================
   RANDORI PRO · Standort Tegel — Template A „Authority"
   Additiv zu tokens.css + standort.css + standort-v3.css.
   KEINE neuen Farben, Schriften oder Design-Sprachen — nur
   standort-eigene Modifier & das Tegel-Alleinstellungsmodul
   „Aus Bushido wird Tegel". Aktiv unter body.v3.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   ① HERO · seitenlokaler Bildtausch
   Der Verlauf ist 1:1 übernommen, getauscht wird ausschließlich
   die Bilddatei. Weder css/standort.css noch css/standort-v3.css
   werden angefasst — beide laden alle Standortseiten.

   ACHTUNG, zwei Ebenen: css/standort.css (.s-hero, Z.60) ist nur
   der Fallback. Zur Laufzeit schiebt js/standort-v3.js ein
   <div class="s-hero__bg"> in den Hero; css/standort-v3.css (Z.29)
   legt Verlauf + hero-dojo.png darauf und blendet den .s-hero-
   Hintergrund per :has() ab. Sichtbar ist also .s-hero__bg —
   beide Ebenen müssen getauscht werden.
   ──────────────────────────────────────────────────────────── */
.v3 .s-hero {
  background:
    linear-gradient(180deg, rgba(20,16,15,0.55) 0%, rgba(20,16,15,0.15) 30%, rgba(20,16,15,0.85) 100%),
    url('../assets/fotos/hero-tegel.webp') 50% 30%/cover no-repeat,
    var(--rp-tiefschwarz);
}
.v3 .s-hero__bg {
  background:
    linear-gradient(180deg, rgba(20,16,15,0.55) 0%, rgba(20,16,15,0.15) 30%, rgba(20,16,15,0.85) 100%),
    url('../assets/fotos/hero-tegel.webp') 50% 30%/cover no-repeat;
}
/* Echtes Foto „Hero Tegel" (quer): Ausschnitt je Breite. Erste Ebene
   ist der Verlauf, zweite das Foto. */
@media (min-width: 769px) and (max-width: 1100px) {
  .v3 .s-hero, .v3 .s-hero__bg { background-position: 0 0, 62% 50%, 0 0; }
}
@media (max-width: 768px) {
  .v3 .s-hero, .v3 .s-hero__bg { background-position: 0 0, 64% 50%, 0 0; }
}
/* Handy (≤768 px): Hier steht der gesamte Text direkt auf dem warmen,
   hellen Foto (Gesicht des Trainers hinter Überschrift und Fließtext).
   Kräftigerer Verlauf von oben bis unter den Button, damit weiße Schrift
   und rotes Akzentwort lesbar sind; das Lächeln bleibt sichtbar.
   Muss nach der Regel darüber stehen (gleiche Spezifität). */
@media (max-width: 768px) {
  .v3 .s-hero {
    background:
      linear-gradient(180deg, rgba(20,16,15,0.72) 0%, rgba(20,16,15,0.62) 50%, rgba(20,16,15,0.40) 72%, rgba(20,16,15,0.85) 100%),
      url('../assets/fotos/hero-tegel.webp') 64% 50%/cover no-repeat,
      var(--rp-tiefschwarz);
  }
  .v3 .s-hero__bg {
    background:
      linear-gradient(180deg, rgba(20,16,15,0.72) 0%, rgba(20,16,15,0.62) 50%, rgba(20,16,15,0.40) 72%, rgba(20,16,15,0.85) 100%),
      url('../assets/fotos/hero-tegel.webp') 64% 50%/cover no-repeat;
  }
}
/* Desktop (≥1101 px): Das warme, helle Foto steht hinter der Textspalte.
   Linker Verlauf als zusätzliche erste Ebene, damit Kicker und rotes
   Akzentwort lesbar bleiben; das Gesicht des Trainers rechts bleibt hell.
   Volle Kurzschreibweise nur in diesem Media Query — die Positionslisten
   für Tablet und Mobil oben (3 Einträge) bleiben unberührt. */
@media (min-width: 1101px) {
  .v3 .s-hero, .v3 .s-hero__bg {
    background:
      linear-gradient(90deg, rgba(20,16,15,0.62) 0%, rgba(20,16,15,0.38) 42%, rgba(20,16,15,0) 68%),
      linear-gradient(180deg, rgba(20,16,15,0.55) 0%, rgba(20,16,15,0.22) 30%, rgba(20,16,15,0.85) 100%),
      url('../assets/fotos/hero-tegel.webp') 50% 30%/cover no-repeat,
      var(--rp-tiefschwarz);
  }
}
/* Kicker und rotes Akzentwort: weicher dunkler Schein hinter der Schrift,
   weil beides auf hellem, warmem Bildgrund steht. */
.v3 .s-hero .s-kicker { text-shadow: 0 1px 2px rgba(20,16,15,0.6), 0 0 14px rgba(20,16,15,0.6); }
.v3 .s-hero__h1 em { text-shadow: 0 2px 6px rgba(20,16,15,0.45), 0 0 30px rgba(20,16,15,0.6); }

/* ④ HERO · CTA-Block: nur noch ein Button, Metazeile zentriert darunter.
   Die Metazeile ist jetzt die einzige Zusatzinfo unter dem Button und
   trägt sie deshalb voll deckend statt mit 70 % Alpha — damit erfüllt
   sie über dem Hero-Foto WCAG AA (4,39:1 → 7,17:1). Gleiche Farbe
   (--rp-beige), nur ohne Transparenz. */
.v3 .s-hero__cta-wrap { align-items: center; gap: 16px; }
.v3 .s-hero__cta-row  { justify-content: center; }
.v3 .s-hero__meta     { text-align: center; color: var(--rp-beige); }

/* ③ HERO · passt am Computer in einen Bildschirm (F12/F13, 06.10.2026)
   Gemessen vorher: bei 1024×768 und 1280×720 lag das Laufband unter
   der Bildkante, bei 1280×800 und 1366×768 rutschte die Kicker-Zeile
   unter die Navigation. Drei Stellschrauben, nur ab Tablet-Breite:
   · Innenabstand oben hält den Inhalt unter der festen Navigation,
   · die Überschrift skaliert zusätzlich mit der Bildschirmhöhe,
   · Text und Button bleiben nebeneinander (Button rechts wie auf
     den übrigen Standortseiten), statt bei ~1000px umzubrechen. */
@media (min-width: 769px) {
  .v3 .s-hero { min-height: 100vh; min-height: 100svh; }
  .v3 .s-hero__inner { padding-top: 116px; padding-bottom: 92px; }
  .v3 .s-hero__h1--long { font-size: clamp(34px, min(6.6vw, 8.2svh), 88px); margin-bottom: clamp(20px, 3svh, 32px); }
  .v3 .s-hero__row { flex-wrap: nowrap; gap: clamp(24px, 4vw, 48px); }
  .v3 .s-hero__sub { flex: 0 1 460px; }
  .v3 .s-hero__cta-wrap { flex: 0 0 auto; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .v3 .s-hero__inner { padding-left: 40px; padding-right: 40px; }
  .v3 .s-hero .s-btn--big { padding: 22px 30px; font-size: 14px; }
}

/* Laufband · dauerhaft sichtbar und als Ganzes ein Link aufs
   Probetraining (F13). Das <a> trägt die Klasse .s-marquee und erbt
   Lage und Optik aus css/standort.css; hier nur Link-Zustände. */
.v3 a.tg-marquee { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.v3 a.tg-marquee .s-marquee__track { transition: color 220ms var(--ease-standard); }
.v3 a.tg-marquee:hover .s-marquee__track,
.v3 a.tg-marquee:focus-visible .s-marquee__track { color: #fff; }
.v3 a.tg-marquee:hover { background: rgba(109,23,35,0.72); }
.v3 a.tg-marquee:focus-visible { outline: 2px solid var(--rp-rot-akzent); outline-offset: -2px; }

/* ────────────────────────────────────────────────────────────
   ⑤ SPORTARTEN · Kacheln einheitlich wie auf den übrigen
   Standortseiten (F15). Bauform und Maße 1:1 nach dem Muster von
   Spandau (css/spandau.css + css/spandau-v3.css): links die große
   Kinder-Kachel (.c-feature), rechts ein gleichmäßiges Raster
   (.c-tilegrid, drei Spalten, neun Kacheln). Die Regeln stehen hier,
   weil Tegel die Spandau-Datei nicht lädt. Mobil greifen zusätzlich
   die gemeinsamen Regeln aus css/mobil-v4.css (erste zwei Kacheln
   breit, Verlauf dezenter) — wie auf Spandau und Lübars.
   ──────────────────────────────────────────────────────────── */
.v3 .s-sports--kids { --c-anker: #6D1723; --c-grade: saturate(1.06) sepia(0.14) brightness(1.02) contrast(1.02); }
/* Kopf ohne große Überschrift (F14): Kicker als Abschnittsüberschrift,
   darunter der Einleitungstext — eine Spalte statt zwei. */
.v3 .s-sports--kids .s-sports__head { display: block; max-width: 860px; margin-bottom: 30px; }
.v3 .s-sports--kids .tg-sports__kicker { font-weight: 400; line-height: 1.4; }
.v3 .s-sports--kids .s-sports__lede { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.v3 .s-sports--kids .s-sports__lede a { color: var(--rp-rot-anker); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v3 .s-sports--kids .s-sports__lede a:hover { color: var(--rp-rot-akzent); }
.v3 .s-sports--kids .s-sports__metaline { margin: 0 0 48px; border-top-color: rgba(26,20,20,0.18); }
.v3 .s-sports--kids .s-sports__metaline span { color: var(--rp-grau-7012); }
.v3 .s-sports--kids .s-sports__metaline i { color: rgba(26,20,20,0.3); }

.v3 .c-sports__grid--tegel { display: grid; grid-template-columns: 1fr 1.55fr; gap: 18px; }

/* große Kinder-Kachel */
.v3 .c-sports__grid--tegel .c-feature {
  position: relative; border-radius: 24px; overflow: hidden; isolation: isolate;
  min-height: 520px; display: flex; color: #fff; text-decoration: none;
  transition: transform 600ms var(--v3-ease, var(--ease-standard)), box-shadow 600ms var(--ease-standard);
}
.v3 .c-sports__grid--tegel .c-feature:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -32px rgba(45, 8, 14, 0.55); }
.v3 .c-sports__grid--tegel .c-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: var(--c-grade); transition: transform 750ms var(--ease-standard); z-index: 0; }
.v3 .c-sports__grid--tegel .c-feature:hover img { transform: scale(1.03); }
.v3 .c-sports__grid--tegel .c-feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58,12,18,0.12) 0%, rgba(58,12,18,0.30) 42%, rgba(45,8,14,0.90) 100%); }
.v3 .c-sports__grid--tegel .c-feature__body { position: relative; z-index: 2; margin-top: auto; padding: clamp(28px, 3vw, 44px); }
.v3 .c-sports__grid--tegel .c-feature__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 14px; }
.v3 .c-sports__grid--tegel .c-feature__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 48px); line-height: 0.98; letter-spacing: -0.025em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.v3 .c-sports__grid--tegel .c-feature__sub { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0; max-width: 38ch; }
.v3 .c-sports__grid--tegel .c-feature__arrow { position: absolute; top: 22px; right: 22px; z-index: 3; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; transition: background 220ms var(--ease-standard), border-color 220ms, transform 220ms; }
.v3 .c-sports__grid--tegel .c-feature:hover .c-feature__arrow { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); transform: translate(2px, -2px); }

/* gleichmäßiges Raster der übrigen Sportarten */
.v3 .c-tilegrid--tegel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v3 .c-tilegrid--tegel .c-tile {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-anker); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px;
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between;
  gap: 18px; min-height: 150px; text-decoration: none; color: #fff;
  transition: border-color 220ms var(--ease-standard), transform 220ms, box-shadow 220ms;
}
.v3 .c-tilegrid--tegel .c-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%; filter: var(--c-grade); z-index: 0;
  transition: transform 750ms var(--ease-standard);
}
.v3 .c-tilegrid--tegel .c-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(58,12,18,0.46) 0%, rgba(58,12,18,0.60) 45%, rgba(45,8,14,0.90) 100%);
}
.v3 .c-tilegrid--tegel .c-tile:hover img { transform: scale(1.04); }
.v3 .c-tilegrid--tegel .c-tile:hover { border-color: var(--rp-rot-akzent); transform: translateY(-3px); box-shadow: 0 16px 36px -22px rgba(109,23,35,0.55); }
.v3 .c-tilegrid--tegel .c-tile__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v3 .c-tilegrid--tegel .c-tile__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.05; letter-spacing: -0.015em; margin: 0; color: #fff; }
.v3 .c-tilegrid--tegel .c-tile__arrow { flex-shrink: 0; color: rgba(255,255,255,0.8); font-size: 16px; transition: color 220ms, transform 220ms; }
.v3 .c-tilegrid--tegel .c-tile:hover .c-tile__arrow { color: var(--rp-beige); transform: translate(3px, -3px); }
.v3 .c-tilegrid--tegel .c-tile__age { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rp-beige); margin: 0; line-height: 1.6; }
/* Bildausschnitte wie zuvor */
.v3 .c-tilegrid--tegel img[src*="budokai-waffenabwehr"] { object-position: center 22%; }

@media (max-width: 980px) {
  .v3 .c-sports__grid--tegel { grid-template-columns: 1fr; }
  .v3 .c-sports__grid--tegel .c-feature { min-height: 420px; }
}
@media (max-width: 720px) {
  .v3 .c-tilegrid--tegel { grid-template-columns: 1fr 1fr; }
}
/* Mobil wie Spandau (css/mobil-v4.css, „Spandau · Sportart-Kacheln
   mobil kleiner"): kompaktere Kinder-Kachel, schmalere Kacheln. */
@media (max-width: 768px) {
  .v3 .c-sports__grid--tegel .c-feature__body { padding: 18px 18px 20px; }
  .v3 .c-sports__grid--tegel .c-feature__name { font-size: 19px; }
  .v3 .c-sports__grid--tegel .c-feature__sub { font-size: 13px; }
  .v3 .c-sports__grid--tegel .c-tilegrid > .c-tile { padding-top: 14px; padding-bottom: 14px; }
  .v3 .c-sports__grid--tegel .c-tile__name { font-size: 15px; }
  /* Neun Kacheln: die ersten zwei laufen breit (mobil-v4.css), dann
     sieben im Zweierraster — die letzte füllt die Reihe allein aus. */
  .v3 .c-tilegrid--tegel > .c-tile:last-child { grid-column: 1 / -1; }
}

/* ────────────────────────────────────────────────────────────
   KENNZAHLEN · TODO-Marker im großen Zahlenblock & Strip
   ──────────────────────────────────────────────────────────── */
.v3 .s-stat__num .s-ph { color: rgba(255,255,255,0.4); font-weight: 800; }
.v3 .s-stat__cell .n .s-ph { color: rgba(255,255,255,0.45); }
.v3 .s-stat__cell .n--word { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -0.02em; }

/* ────────────────────────────────────────────────────────────
   ⑤ TEGEL-MODUL · „Aus Bushido wird Tegel" (Schwarz #1A1414)
   Ruhige horizontale Mini-Zeitleiste — sachlich, selbstbewusst.
   Dieses Modul haben die anderen Standorte NICHT.
   ──────────────────────────────────────────────────────────── */
.v3 .tg-story { background: var(--rp-tiefschwarz); color: #fff; padding: 160px 0; position: relative; overflow: hidden; }
.v3 .tg-story::before { content: ""; position: absolute; top: -180px; left: -140px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(109,23,35,0.55), transparent 65%); pointer-events: none; }
.v3 .tg-story > .s-wrap { position: relative; z-index: 1; }
.v3 .tg-story__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; margin-bottom: 8px; }
.v3 .tg-story__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5vw, 76px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 13ch; }
.v3 .tg-story__h em { font-style: normal; color: var(--rp-rot-akzent); }
/* F17 (06.10.2026): Der kleine Text rechts neben der Überschrift ist
   entfallen. Kopf deshalb einspaltig, und die Überschrift darf breiter
   laufen — sonst stand „Eine“ allein in der ersten Zeile.
   Marke „Randori-Pro“ im Fließtext nicht am Bindestrich trennen. */
.v3 .tg-story__head { grid-template-columns: minmax(0, 1fr); }
.v3 .tg-story__h { max-width: 20ch; }
.v3 .tg-story .tg-nobr { white-space: nowrap; }
/* „Kampfsportschule“ ist länger als das frühere „Wettkampfschule“ und
   lief auf schmalen Handys (≤ 375px) über den rechten Rand. */
@media (max-width: 420px) { .v3 .tg-story__h { font-size: min(38px, 9.4vw); } }
.v3 .tg-story__lede { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; max-width: 46ch; }

/* Zeitleiste */
.v3 .tg-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: clamp(56px, 7vw, 88px); }
.v3 .tg-node { position: relative; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.16); }
.v3 .tg-node::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--rp-rot-akzent); box-shadow: 0 0 0 6px rgba(220,13,29,0.14); }
.v3 .tg-node__era { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 16px; display: block; }
.v3 .tg-node__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 14px; color: #fff; }
.v3 .tg-node__p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 0; max-width: 34ch; }

/* Abschluss-Fließtext + TODO */
.v3 .tg-story__body { margin-top: clamp(56px, 7vw, 80px); padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.16); font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vw, 25px); line-height: 1.5; color: rgba(255,255,255,0.92); margin-bottom: 0; max-width: 70ch; }
.v3 .tg-story__body strong { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--rp-beige); }
.v3 .tg-story__todo { margin: 28px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(220,13,29,0.85); border: 1px dashed rgba(220,13,29,0.5); border-radius: 8px; padding: 12px 16px; display: inline-block; line-height: 1.6; }

@media (max-width: 900px) {
  .v3 .tg-story { padding: 90px 0; }
  .v3 .tg-story__head { grid-template-columns: 1fr; gap: 24px; }
  .v3 .tg-time { grid-template-columns: 1fr; gap: 44px; }
}

/* ────────────────────────────────────────────────────────────
   ⑥ TRAINER · vier Karten + neutrale Foto-Platzhalter
   (KEINE Stock-/KI-Gesichter bis echte Tegel-Fotos vorliegen)
   ──────────────────────────────────────────────────────────── */
.v3 .s-trainers__grid--four { grid-template-columns: repeat(4, 1fr); gap: 36px; }
.v3 .s-trainer__portrait--ph { position: relative; background:
    repeating-linear-gradient(45deg, #e0d6c2 0 11px, #d3c8b3 11px 22px); }
.v3 .s-trainer__portrait--ph::after { content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-rot-anker); padding: 0 18px; line-height: 1.5; }
/* „Weitere Trainer am Standort": je Trainer eine Zeile (Name — Disziplinen). */
.v3 .tg-roster span { display: block; }
@media (max-width: 1100px){ .v3 .s-trainers__grid--four { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } }
@media (max-width: 560px){ .v3 .s-trainers__grid--four { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

/* ────────────────────────────────────────────────────────────
   ⑦ ABLAUF · helle Variante des Hybrid-Schritt-Moduls (Weiß)
   Differenzierung zu Waltersdorf, das den Ablauf dunkel zeigt.
   Nur Farb-/Kontrast-Modifier — Struktur & Motion bleiben.
   ──────────────────────────────────────────────────────────── */
.v3 .hy-steps--light { background: var(--rp-white); color: var(--rp-tiefschwarz); --hy-bg: #ffffff; }
.v3 .hy-steps--light::before { background: radial-gradient(circle, rgba(220,13,29,0.07), transparent 65%); }
.v3 .hy-steps--light .hy-kicker { color: var(--rp-rot-anker); }
.v3 .hy-steps--light .hy-h { color: var(--rp-rot-anker); }
.v3 .hy-steps--light .hy-sub { color: var(--rp-grau-7012); }
.v3 .hy-steps--light .hy-step__ghost { -webkit-text-stroke: 1.5px rgba(26,20,20,0.12); }
.v3 .hy-steps--light .hy-step:hover .hy-step__ghost { -webkit-text-stroke-color: rgba(220,13,29,0.6); }
.v3 .hy-steps--light .hy-step::after { background: rgba(26,20,20,0.16); }
.v3 .hy-steps--light .hy-step__num { border-color: rgba(26,20,20,0.2); color: var(--rp-tiefschwarz); }
.v3 .hy-steps--light .hy-step__h { color: var(--rp-tiefschwarz); }
.v3 .hy-steps--light .hy-step__p { color: var(--rp-grau-7012); }
.v3 .hy-steps--light .hy-bring { background: var(--rp-beige-deep); border-color: var(--rp-border); }
.v3 .hy-steps--light .hy-bring__label { color: var(--rp-rot-anker); }
.v3 .hy-steps--light .hy-bring__list li { color: var(--rp-tiefschwarz); border-color: var(--rp-border); }
.v3 .hy-steps--light .hy-bring__list li:hover { border-color: var(--rp-rot-akzent); background: #fff; }
/* Node leuchtet rot — auf hellem Grund weißer Halo via --hy-bg */
.v3.js-motion .hy-steps--light.is-lit .hy-step .hy-step__num { border-color: var(--rp-rot-akzent); color: #fff; background: var(--rp-rot-akzent); box-shadow: 0 0 0 7px var(--hy-bg), 0 0 24px rgba(220,13,29,0.35); }

/* ────────────────────────────────────────────────────────────
   ⑧ STIMMEN · Gestaltung wie auf den übrigen Standortseiten (F21)
   Bauform .c-voices aus Spandau/Lübars/Steglitz/Mariendorf: Kopf
   mit Kicker, Überschrift und Einleitung, darunter das Serif-Zitat
   mit roter Linie vor dem Namen. Tegel hat (noch) eine Stimme —
   deshalb ohne Punkte und Pfeile. Werte 1:1 aus css/spandau.css.
   ──────────────────────────────────────────────────────────── */
.v3 .tg-voices { --c-anker: #6D1723; background: var(--rp-beige-deep); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 150px) 0; overflow: hidden; }
.v3 .tg-voices .c-voices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.v3 .tg-voices .c-voices__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--c-anker); margin: 0; max-width: 15ch; }
.v3 .tg-voices .c-voices__lede { font-size: 16px; line-height: 1.55; color: var(--rp-tiefschwarz); margin: 0; max-width: 40ch; }
.v3 .tg-voices .c-voices__viewport { overflow: hidden; }
.v3 .tg-voices .c-voice { margin: 0; min-width: 0; }
.v3 .tg-voices .c-voice__body { min-width: 0; }
.v3 .tg-voices .c-voice__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.6vw, 34px); line-height: 1.26; letter-spacing: -0.012em; color: var(--rp-tiefschwarz); margin: 0 0 28px; text-wrap: pretty; }
.v3 .tg-voices .c-voice__attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-grau-muted); display: block; line-height: 1.9; }
.v3 .tg-voices .c-voice__attr::before { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 1px; background: var(--rp-rot-akzent); margin-right: 14px; }
.v3 .tg-voices .c-voice__attr strong { color: var(--c-anker); font-weight: 600; }
.v3 .tg-voices .c-voices__note { margin: clamp(36px, 4vw, 56px) 0 0; padding-top: 28px; border-top: 1px solid var(--rp-border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-grau-muted); }

/* ────────────────────────────────────────────────────────────
   ⑩ FINALER CTA · Schwarz-Block (#1A1414) statt Rot-Anker
   Unterscheidet Tegel vom roten Final-Block der anderen.
   ──────────────────────────────────────────────────────────── */
.v3 .s-final--dark { background: var(--rp-tiefschwarz); }
.v3 .s-final--dark::before { background: radial-gradient(circle at 50% 0%, rgba(109,23,35,0.55), transparent 58%); }
/* Langes Schlusswort „auszuprobieren.“ passte auf Handys (≤ 414px) nicht
   in die Karte und wurde mitten im Wort umbrochen (06.10.2026). */
@media (max-width: 440px) {
  .v3 .s-final--dark .s-final__h { font-size: min(42px, calc((100vw - 92px) / 7.9)); }
}

/* Zitate-Stapel (css/zitate-stapel.css): Die Karten dieser Seite haben
   keine Sternezeile — die Sternebewertung der einzelnen Google-Rezensionen
   liegt nicht vor. Damit der Zitattext nicht an der Kartennummer klebt,
   bekommt er den Abstand, den sonst die Sterne einnehmen. */
.zs-num + .zs-text { margin-top: 36px; }

/* Zitate-Stapel · Abschlusskarte („Die nächste Stimme …") deckt den
   Stapel ab. Ihr Text ist kurz, ohne Mindesthöhe war sie deutlich
   niedriger als die Bewertungskarte darunter, die dann oben und unten
   herausragte. Jetzt so hoch wie die Karte darunter, Inhalt mittig.
   Höchstens so hoch wie die freie Fläche (gleiche Rechnung wie die
   max-height in css/zitate-stapel.css). Nur mit Bewegung — bei
   reduzierter Bewegung stehen die Karten ohnehin untereinander. */
@media (prefers-reduced-motion: no-preference) {
  .zs-card--anker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(400px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px));
  }
  .zs-card--anker .zs-btn { align-self: flex-start; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .zs-card--anker { min-height: min(440px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px)); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
  .zs-card--anker { min-height: min(520px, calc(100svh - var(--zs-oben) - var(--zs-unten) - 16px)); }
}