/* ============================================================
   Telemetrie-Ansicht (#/telemetrie/:id) — Kopf + Draufsicht.
   Handgezeichnetes SVG, keine Fremdbibliothek. Kartenrahmen und Zoom
   kommen aus `diagramme.css` (.dia-karte, .hg-*) — hier nur, was neu ist.
   ============================================================ */

/* Draufsicht + Kurventabelle nebeneinander — so wird die Seitenbreite
   genutzt, ohne sie zu erhöhen (Marc, 22.09.). Ab 1100 px zwei Spalten, die
   Karte bekommt etwas mehr, weil sie sonst quadratisch klein wird.
   `min-width: 0` ist Pflicht: ein Grid-Kind wächst sonst auf seinen Inhalt
   und sprengt die Spalte (dieselbe Falle wie in `eventboards.css:221`). */
.tele-zwei { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.tele-zwei > * { min-width: 0; margin-top: 0; }
@media (min-width: 1100px) {
  /* Karte bekommt den Rest der Breite, die Tabelle wächst mit der Fenster-
     breite (`vw`) statt fest bis 640px zu stehen — sonst blieb der Karte auf
     einem 1366er-Laptop weniger Platz als vor dem Umbau (Marc, 24.09.: „die
     Tabelle nimmt ihre vollen 640px, die Karte schrumpft"). */
  .tele-zwei { grid-template-columns: minmax(0, 1fr) clamp(420px, 30vw, 640px); }
}
/* KEIN eigenes `max-width` mehr — die Breite kommt jetzt allein von `.app`
   bzw. `.app--breit` (siehe css/base.css). Zwei verschiedene Obergrenzen an
   verschachtelten Elementen hätten die kleinere gewinnen lassen. */
.tele-view { margin: 0 auto; padding: 0 var(--space-4) var(--space-8); }

/* --- Kopf ---------------------------------------------------------- */
/* Marc, 28.09.: „Kopf flach" — eine Zeile statt eines Blocks. Zwei Zustände
   (Klasse `tele-kopf--kurve`, gesetzt von `TelemetrieView.js` über dieselbe
   Kopplung wie das Kurvenkino): Startseite zeigt Auto + Auswahlfelder + Tipps
   einklappbar; Kurvenansicht laesst Auto und Tipps ganz weg und versteckt die
   Auswahl hinter „Runden ändern" (`.tele-kopf__wahlknopf`). Ziel ≤ 90 px Höhe
   in beiden Zuständen (Plan Schritt 4). */
.tele-kopf { padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); margin: var(--space-3) 0; }
.tele-kopf__zeile { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tele-kopf__id { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tele-kopf__id span { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-dim);
  white-space: nowrap; }
.tele-kopf__mitte { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tele-kopf__strecke { font-family: var(--font-display); font-size: var(--text-md);
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tele-kopf__strecke small { font-family: var(--font-ui); font-size: 11px;
  color: var(--text-faint); text-transform: none; margin-left: 6px; }
.tele-kopf__auto { color: var(--text-faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tele-kopf--kurve .tele-kopf__auto { display: none; }

.tele-kopf__zeit { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--text); flex-shrink: 0; }
.tele-delta { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; flex-shrink: 0; }
.tele-delta--gut { color: var(--cyan); text-shadow: var(--glow-cyan); }
.tele-delta--schlecht { color: var(--magenta); text-shadow: var(--glow-magenta); }
.tele-delta--leer { font-family: var(--font-ui); font-size: 12px;
  color: var(--text-faint); font-weight: 400; }
.tele-delta small { font-size: 11px; }

/* Knopf „Runden ändern" — nur in der Kurvenansicht sichtbar, schaltet allein
   per CSS-Klasse (kein State im Modul, siehe `_tele_kopf.js`). */
.tele-kopf__wahlknopf { display: none; margin-left: auto; min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: 9px; cursor: pointer; font-family: var(--font-ui); font-size: 12px;
  background: rgba(255, 255, 255, .04); color: var(--text-dim); border: 1px solid var(--line); }
.tele-kopf__wahlknopf:hover, .tele-kopf__wahlknopf:focus-visible { color: var(--cyan); border-color: var(--cyan); }
.tele-kopf--kurve .tele-kopf__wahlknopf { display: inline-flex; align-items: center; justify-content: center; }
.tele-kopf--kurve .tele-kopf__wahl { display: none; }
.tele-kopf--kurve.tele-kopf--wahl-offen .tele-kopf__wahl { display: block; margin-top: var(--space-2); }
.tele-kopf--kurve .tele-kopf__tipps { display: none; }

/* Tipps eingeklappt (Startseite) — „N Tipps ▾" statt eines eigenen Absatzes. */
.tele-kopf__tipps { margin-top: 6px; }
.tele-kopf__tipps summary { cursor: pointer; font-size: 12px; color: var(--text-faint);
  font-family: var(--font-ui); list-style: none; }
.tele-kopf__tipps summary::-webkit-details-marker { display: none; }
.tele-kopf__tipps summary:hover { color: var(--cyan); }

/* Die beiden Auswahlfelder: „Diese Runde" gegen „Vergleichsrunde". Auf dem
   Handy untereinander, das Wort „gegen" wandert dann an den Rand. */
.tele-kopf__wahl { flex-basis: 100%; min-width: 0; }
.tele-wahl { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap;
  margin-top: 6px; min-width: 0; }
/* `flex: 1 1 200px` statt eines unbegrenzten `flex-basis`: ein `<select>`
   nimmt sonst die Breite seines längsten Eintrags an (seit die Einträge
   „Fahrer · Zeit · Autoname · Datum" heißen, lang genug für Querscrollen auf
   390px — Marc, 24.09.). `min-width: 0` ist Pflicht, sonst wächst das Flex-
   Kind trotzdem auf seinen Inhalt (dieselbe Falle wie `eventboards.css:221`). */
.tele-wahl__feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.tele-wahl__feld > span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-faint); font-family: var(--font-mono); }
.tele-wahl__knopf { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  min-height: 42px; padding: 6px 12px; text-align: left; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 8px; font-size: 14px; }
.tele-wahl__feld--rechts .tele-wahl__knopf { border-left-color: var(--magenta); }
.tele-wahl__knopf:hover, .tele-wahl__knopf[aria-expanded="true"] { border-color: var(--cyan); border-left-color: var(--cyan); }
.tele-wahl__feld--rechts .tele-wahl__knopf:hover,
.tele-wahl__feld--rechts .tele-wahl__knopf[aria-expanded="true"] { border-color: var(--magenta); }
/* Der Name schrumpft zuletzt: „FRan… 1:41.743" verriet nicht mehr, wessen Runde. */
.tele-wahl__wer { flex: 0 0 auto; max-width: 60%; min-width: 0; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tele-wahl__info { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13px;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tele-wahl__pfeil { flex: none; margin-left: auto; font-style: normal; color: var(--text-faint); transition: transform .15s; }
.tele-wahl__knopf[aria-expanded="true"] .tele-wahl__pfeil { transform: rotate(180deg); }
.tele-wahl__gegen { padding-bottom: 12px; color: var(--text-faint); font-size: 12px; }
@media (max-width: 700px) {
  /* `nowrap` ist Pflicht: in einem MEHRzeiligen Flex-Kasten (wrap) ist die
     Zeile so breit wie ihr breitestes Kind, und `stretch` dehnt dann alle
     darauf — der Knopf stand 461 px breit in 297 px (gemessen 04.10.). */
  .tele-wahl { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-2); }
  /* „gegen" entfällt untereinander — das Etikett „Vergleichsrunde" sagt es
     schon, und die gesparte Zeile gleicht die 40-px-Knöpfe aus. */
  .tele-wahl__gegen { display: none; }
  /* Am Handy eine Zeile wie das alte Auswahlfeld — jede Zeile mehr im Kopf
     nimmt der Draufsicht darunter Höhe weg (`_tele_zwei_hoehe.js`), und deren
     Schilder rücken dann übereinander. Der volle Text steht in der Liste. */
  .tele-wahl__knopf { min-height: 40px; padding: 4px 10px; }
}

/* Aufklappbare Rundenliste (`_tele_rundenwahl_liste.js`, Marc 04.10.): je
   Fahrer die Bestzeit in Spalten, „alle N" klappt seine übrigen Runden auf.
   Eigene Bildlaufleiste, damit eine aufgeklappte 84er-Liste nicht die
   ganze Seite verschiebt. */
.tele-rw { margin-top: 8px; padding: 6px; max-width: 1080px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-1); max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.tele-rw__vorgaben { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.tele-rw__vorgabe { flex: 1 1 260px; min-height: 42px; padding: 6px 12px; text-align: left; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); }
.tele-rw__vorgabe:hover { color: var(--text); border-color: var(--magenta); }
.tele-rw__vorgabe.is-an { color: var(--magenta); border-color: var(--magenta); background: rgba(255,46,151,.08); }
.tele-rw__kopf, .tele-rw__runde { display: grid; column-gap: 12px; align-items: center;
  grid-template-columns: 2.4em minmax(0, 1.4fr) 8.6em minmax(0, 1.3fr) 4.4em; }
.tele-rw__kopf { padding: 4px 10px; margin-right: 90px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }
.tele-rw__kopf span:first-child, .tele-rw__kopf span:last-child { text-align: right; }
.tele-rw__abschnitt { margin: 10px 10px 4px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }
.tele-rw__liste, .tele-rw__alle { list-style: none; margin: 0; padding: 0; }
.tele-rw__liste > li + li { border-top: 1px solid rgba(255,255,255,.05); }
.tele-rw__zeile { display: flex; align-items: center; gap: 6px; }
.tele-rw__runde { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; text-align: left;
  border-radius: 8px; color: var(--text); font-size: 14px; }
.tele-rw__runde:hover { background: rgba(255,255,255,.05); }
.tele-rw__runde.is-an { background: rgba(0,229,255,.08); box-shadow: inset 3px 0 0 var(--cyan); }
.tele-rw[data-seite="rechts"] .tele-rw__runde.is-an { background: rgba(255,46,151,.09); box-shadow: inset 3px 0 0 var(--magenta); }
.tele-rw__platz { font-family: var(--font-mono); color: var(--text-faint); text-align: right; }
.tele-rw__wer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tele-rw__wer b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tele-rw__zeit { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.tele-rw__stern { color: var(--amber); }
.tele-rw__auto { min-width: 0; font-size: 13px; color: var(--text-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tele-rw__tag { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); text-align: right; white-space: nowrap; }
.tele-rw__marke { flex: none; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px;
  font-size: 12px; line-height: 1.5; font-weight: 600; }
.tele-rw__marke--du { color: var(--cyan); }
.tele-rw__marke--ref { color: var(--magenta); }
.tele-rw__mehr { flex: 0 0 84px; min-height: 40px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.tele-rw__mehr:hover, .tele-rw__fahrer.is-offen .tele-rw__mehr { color: var(--cyan); border-color: var(--cyan); }
.tele-rw[data-seite="rechts"] { margin-left: auto; }
/* Weitere Runden eines Fahrers: gleiche Spalten wie die Bestzeit darüber,
   der Pfeil in der Platz-Spalte zeigt die Zugehörigkeit. */
.tele-rw__alle { margin: 0 90px 4px 0; }
.tele-rw__runde--neben .tele-rw__platz::after { content: '↳'; color: var(--text-faint); }
.tele-rw__fahrer:not(.is-offen) .tele-rw__alle > li:not(.is-fest) { display: none; }
.tele-rw__runde--neben { min-height: 40px; font-size: 13px; }
@media (max-width: 700px) {
  .tele-rw { padding: 4px; max-height: 75vh; }
  .tele-rw__kopf { display: none; }
  /* Handy: zwei Zeilen je Runde — Name (+ Marke) und Zeit oben, Auto und Tag
     darunter. `display: contents` macht Name und Marke zu eigenen Zellen. */
  .tele-rw__runde { grid-template-columns: 1.4em auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 1px;
    grid-template-areas: "platz wer wer zeit" "platz marke auto tag"; padding: 6px 6px; }
  .tele-rw__wer { display: contents; }
  .tele-rw__wer b { grid-area: wer; }
  .tele-rw__marke { grid-area: marke; justify-self: start; }
  .tele-rw__platz { grid-area: platz; align-self: start; padding-top: 2px; }
  .tele-rw__zeit { grid-area: zeit; text-align: right; } .tele-rw__auto { grid-area: auto; }
  .tele-rw__tag { grid-area: tag; }
  .tele-rw__mehr { flex-basis: 52px; padding: 0 2px; }
  .tele-rw__mehr-wort { display: none; }
  .tele-rw__alle { margin: 0 0 4px; }
}
.tele-kopf__ref select { background: rgba(255,255,255,.04); color: var(--text); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-family: var(--font-mono); font-size: 12px; }
.tele-kopf__ref select:hover { border-color: var(--cyan); }
/* ⚠️ Ein Satz statt eines leeren Feldes: wer nichts zur Auswahl sieht, haelt
   es sonst fuer kaputt. Steht hier nichts, gibt es sonst niemanden. */
.tele-kopf__refhinweis { margin: 0 0 var(--space-3); font-size: 12px; line-height: 1.45;
  color: var(--text-faint); max-width: 70ch; }
.tele-kopf__ref { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-2); }
.tele-kopf__ref span { color: var(--text-faint); font-size: var(--text-sm); }
.tele-kopf__ref button { min-height: var(--tap); padding: 0 var(--space-3); border-radius: 9px;
  cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm);
  background: rgba(255, 255, 255, .04); color: var(--text-dim); border: 1px solid var(--line);
  transition: color .16s, border-color .16s, box-shadow .16s; }
.tele-kopf__ref button[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 10px -2px var(--cyan); }
.tele-kopf__ref button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tele-kopf__text { list-style: none; margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line); display: grid; gap: 6px; }
.tele-kopf__text li { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }

/* --- Draufsicht ------------------------------------------------------ */
.tele-karte .hg-bild { min-height: 220px; }
/* Der Punkt, der beim Entlangfahren mitläuft. `pointer-events: none`, damit
   er sich nicht selbst unter dem Zeiger wegfängt. */
.tele-karte__fahrt { fill: var(--cyan); stroke: var(--bg-1); stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--cyan)); pointer-events: none; }
.tele-karte .hg-bild { cursor: crosshair; }
.tele-legende { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; }
.tele-legende span { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-sm); color: var(--text-dim); }
.tele-legende i { width: 16px; height: 3px; border-radius: 99px; }

.tele-lade { color: var(--text-faint); padding: var(--space-6) 0; text-align: center; }

/* Markierte Kurve in der Karte: kräftigerer Puls, damit „diese Kurve ist
   gerade gewählt" auch neben den Δ-Blasen der Top-3 auffällt. */
.tele-kurve-punkt { cursor: pointer; }
.tele-kurve-punkt--aktiv circle { filter: drop-shadow(0 0 8px var(--cyan)); }
/* Dunkler Halo um die Kurven-/Delta-Zahlen: die Strecke selbst und die
   Bremszonen-Boegen liegen z.T. genau unter der Schrift (Marc, 23.09.,
   Kurve 4 am deutlichsten). `stroke-width` in `em` statt `px`, weil die
   Zahlen ihre eigene, per Zoom skalierte `font-size` mitbringen — der Halo
   skaliert dadurch automatisch mit, ohne dass die Karte etwas dafuer tun
   muss. Reihenfolge ist bereits richtig: die Zahlen werden nach den
   Kurvenboegen gezeichnet (`_tele_karte.js`) und liegen damit obenauf. */
.tele-kurve-punkt text {
  paint-order: stroke fill; stroke: var(--bg-1); stroke-width: 0.28em;
  stroke-linejoin: round;
}

/* Geraden-Etiketten (Marc, 29.09.): schlanker als die Kurven-Marker — nur
   Text mit Halo, kein Kreis, kein Kollisionsvorrang. */
.tele-gerade-punkt text {
  paint-order: stroke fill; stroke: var(--bg-1); stroke-width: 0.26em;
  stroke-linejoin: round;
}

/* Rechte Spalte neben der Karte: Tabelle oben, Pult darunter (Marc, 28.09.).
   `min-width: 0` schon von `.tele-zwei > *` geerbt (Grid-Kind). */
.tele-rechts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* --- Kurventabelle ---------------------------------------------------- */
.tele-tabelle { margin: 0; }
.tele-tab__wrap { overflow-x: auto; }
.tele-tab { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tele-tab th { text-align: right; color: var(--text-faint); font-weight: 500;
  padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tele-tab th:first-child, .tele-tab td:first-child { text-align: left; }
.tele-tab td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: var(--text-dim); white-space: nowrap; }
.tele-tab__zahl { font-family: var(--font-mono); text-align: right; color: var(--text); }
.tele-tab__punkt { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; }
.tele-tab__richtung { color: var(--text-faint); font-size: 11px; }
.tele-tab__schikane { color: var(--text-faint); font-size: 10px; margin-left: 6px;
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; }
.tele-tab tbody tr { cursor: pointer; transition: background .14s; }
.tele-tab tbody tr:hover, .tele-tab tbody tr:focus-visible { background: rgba(255, 255, 255, .04); outline: none; }
.tele-tab__zeile--aktiv { background: rgba(0, 229, 255, .09) !important; }
.tele-tab--klein { margin-top: var(--space-3); }
.tele-tab--klein th, .tele-tab--klein td { padding: 5px 8px; }

/* Geraden-Zeilen: optisch abgesetzt, nicht klickbar (Marc, 29.09.). */
.tele-tab tbody tr.tele-tab__gerade { cursor: default; }
.tele-tab tbody tr.tele-tab__gerade:hover { background: none; }
.tele-tab__gerade td:first-child { font-style: italic; color: var(--text-faint); font-weight: 400; }
.tele-tab__gerade .tele-tab__zahl { font-weight: 400; opacity: .85; }
.tele-tab__fuss { margin: var(--space-2) var(--space-3) 0; padding-top: var(--space-2);
  border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--text-faint);
  font-family: var(--font-mono); }
.tele-tab__info { cursor: help; margin-left: 4px; }

/* --- Spuren ------------------------------------------------------------ */
.tele-spuren { margin: var(--space-4) 0; }
.tele-spur { margin-top: var(--space-4); }
.tele-spur:first-of-type { margin-top: var(--space-3); }
.tele-spur__titel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px; }
.tele-spur__leg { display: inline-flex; gap: 10px; font-size: 11px; text-transform: none; }
.tele-spur__leg i { display: inline-block; width: 10px; height: 3px; border-radius: 99px; margin-right: 3px; vertical-align: middle; }
.tele-spur__satz { margin: 2px 0 6px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
/* Bild und Skala nebeneinander: die Beschriftung steht als HTML DANEBEN, nicht
   im SVG — im SVG wuerde sie beim Skalieren mitgestaucht. */
.tele-spur__reihe { display: flex; align-items: stretch; gap: var(--space-2); }
.tele-spur__bild { flex: 1 1 auto; min-width: 0; touch-action: pan-y; }
.tele-spur__skala { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column;
  justify-content: space-between; font-size: 10px; line-height: 1.1; color: var(--text-faint);
  font-family: var(--font-mono); text-align: left; }
.tele-spur__skala-mitte { color: var(--text-dim); }
.tele-spur__nr { fill: var(--text-faint); font-size: 9px; font-family: var(--font-mono); }
.tele-spur__achse { display: flex; justify-content: space-between; margin-top: var(--space-2);
  padding-right: 92px; font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.tele-spur__bild svg { display: block; width: 100%; cursor: pointer; }
.tele-spur__zone { transition: fill .12s; }
.tele-spur__zone:hover { fill: rgba(255, 255, 255, .05); }
.tele-spur__warnung { flex: 1 1 100%; order: 3; color: var(--amber); font-size: 11px;
  text-transform: none; letter-spacing: 0; margin: 2px 0 0; }

.tele-text__summe { color: var(--text-dim); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.tele-text__hinweis { color: var(--text-faint); font-size: var(--text-sm); font-style: italic; }
.tele-text__dim { color: var(--text-faint); }
.tele-text__saetze { list-style: none; margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line); display: grid; gap: 6px; }
.tele-text__saetze li { color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }

/* --- Kurvenkino: zwei Autos, ein Kurveneingang -------------------------- */
/* Abnahme 29.09. (Marc, Gegencheck): die 1480px-Deckelung aus Schritt 5 liess
   das Kino schmaler enden als der Seitenkopf darueber (x~1573 statt x~1825
   bei 1920) — AUFGEHOBEN, das Kino nutzt jetzt dieselbe Breite wie die
   Seite (`.app--breit`), die gewonnene Breite steckt in Video und Pult. */
.tele-kino { margin: var(--space-2) 0 var(--space-3); }
.tele-kino__ref { color: var(--text-dim); font-size: var(--text-sm); margin: 2px 0 var(--space-2); }

.tele-kino__leinwand { position: relative; }
/* Nachbesserung 2 (29.09.): Bild + Rueckstand + Zoom-Leiste stecken in einem
   eigenen Wrapper, der GENAU die Bildmasse hat — `bottom`/`top` beziehen
   sich damit aufs Bild, nicht auf die (je nach Steuerung wechselnd hohe)
   ganze Leinwand. */
.tele-kino__bildwrap { position: relative; }
.tele-kino__bild { display: block; width: 100%; border-radius: 10px; background: var(--bg-1); }
/* `.dia-karte svg` in diagramme.css setzt `overflow: visible`, damit Diagramm-
   Beschriftungen herausragen duerfen. Das Kurvenkino traegt dieselbe Klasse,
   zeigt aber ein 1680 px breites Streckenbild: ohne diese Ruecknahme lief es
   ueber die ganze Seite. Zwei Klassen, damit es die fremde Regel schlaegt. */
.tele-kino svg.tele-kino__bild { overflow: hidden; }
/* Schritt 47: FESTES Format, genau wie `.tk-3d__buehne` (Marc, 25.09.: je Kurve
   anders gross, 553x193 bis 407x414 px). Die viewBox folgt dem Kasten
   (`_tele_kino_zoom_bind.js`), die Kurve wird darin eingepasst. */
/* Nachbesserung 28.09. (Gegencheck Coordinator): `min(46vh, …)` statt fest
   46vh — das feste vh-Mass ignorierte, dass Nav (sticky, ~98 px), Seitenkopf,
   Kurvenkopf, Werkzeugzeile, Steuerung UND Pult zusaetzlich zum Video ins
   Budget muessen. Die zweite Zahl ist der grob gemessene Rest dieser
   Elemente (~610 px, inkl. etwas Reserve) von `100vh` abgezogen — kein
   `vh`-Anteil kann diesen Fixbetrag kennen, deshalb `calc`. */
/* Abnahme 29.09.: Budget von 610px auf 540px gesenkt (Diagrammspalte wurde
   schmaler statt kuerzer, gibt hier also nichts her — die 70px kommen aus
   dem Rest-Budget selbst, siehe Messung im Plan). */
.tele-kino__bild { width: 100%; aspect-ratio: 4 / 3; max-height: min(46vh, calc(100vh - 540px)); }
@media (max-width: 600px) { .tele-kino__bild { aspect-ratio: 1 / 1; max-height: 60vh; } }

/* Zweispaltig: links Bild + Wiedergabe + Fahrzeuganzeige, rechts die
   Verlaeufe. Ab 1100 px nebeneinander, darunter von selbst untereinander —
   auf dem Handy hat eine zweite Spalte keinen Sinn. */
.tele-kino__buehne { display: grid; gap: var(--space-3); align-items: start; }
@media (min-width: 1100px) {
  /* Abnahme 29.09. (Marc): Kinofenster (2D+3D) mind. 20% groesser, dafuer
     die Diagramme schmaler — Video 58%, Diagramme 42% statt vorher 45%/55%. */
  .tele-kino__buehne { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.tele-kino__links, .tele-kino__rechts { min-width: 0; }
/* Nachbesserung 2 (29.09., Hauptchat-Entscheidung): KEINE Mittelspalte fuers
   Pult mehr (quetschte Zahlen/Namen in ~190px) — Video und Pult bleiben EINE
   Spalte, das Pult liegt als volle Zeile UNTER der Steuerung (Standard-
   Blockfluss von `.tele-kino__links`, keine eigene Regel noetig). */
/* Die Linie traegt jetzt ihre Farbe je Stueck (siehe _tele_kino_faerbung.js),
   deshalb KEIN `stroke` mehr hier — das wuerde die Einfaerbung ueberschreiben.
   Unterschieden werden die beiden allein ueber Staerke und Strichelung. */
.tele-kino__spur { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Feste Bildschirmbreite: in Bildpixeln wuchs die Linie beim Zoomen mit und zeigte
   an den Stoßstellen der Einzelstriche Zacken (24.09.). */
.tele-kino__spur--du { stroke-width: 7px; }
.tele-kino__spur--ref { stroke-width: 4px; stroke-dasharray: 8 6; opacity: .75; }

/* Vektor-Asphalt statt hochskaliertem PNG (Schritt "Kurvenkino scharf",
   Vorbild TrackTitan) — dunkles Band, dezente Koernung, feine helle
   Randlinie. `non-scaling-stroke` haelt den Rand bei jedem Zoom 1 px duenn. */
.tk-asphalt__flaeche { fill: #34373e; }
.tk-asphalt__koernung { fill: #ffffff; opacity: .05; }
.tk-asphalt__rand { stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; }
.tk-asphalt__boxengasse { fill: #26282e; }
.tk-asphalt__randstein { fill: #b91c26; stroke: #b91c26; stroke-width: 2px; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; } /* Randsteine sind 1–1,5 m breit: ohne den festen 2-px-Saum
  in der Kurvenansicht nur eine gepunktete Linie (Foto 24.09.). */
.tk-asphalt__streifen { stroke: #f4f4f4; }

.tele-kino__reiter { display: flex; gap: 4px; flex-wrap: wrap; margin: var(--space-2) 0; }
.tele-kino__reiter-knopf { min-height: var(--tap); padding: 0 14px; border-radius: 8px; cursor: pointer;
  background: rgba(0, 229, 255, .04); border: 1px solid rgba(0, 229, 255, .3); color: var(--text-dim);
  font-family: var(--font-mono); font-size: var(--text-sm); box-shadow: 0 0 8px -3px rgba(0, 229, 255, .5);
  transition: box-shadow .15s ease, border-color .15s ease; }
.tele-kino__reiter-knopf.is-an { color: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-cyan); }
@media (hover: hover) { .tele-kino__reiter-knopf:hover { border-color: var(--cyan); box-shadow: 0 0 14px -3px rgba(0, 229, 255, .8); } }
/* Schritt 15 (29.09., Marc: „Kanal-Reiter mit kleinen Symbolen"): Icon vor dem
   Text, per `data-art` aus `_tele_kino_faerbung.js` — keine JS-Aenderung noetig. */
.tele-kino__reiter-knopf[data-art]::before { margin-right: 5px; }
.tele-kino__reiter-knopf[data-art="tempo"]::before { content: "⏱"; }
.tele-kino__reiter-knopf[data-art="gas"]::before { content: "▲"; }
.tele-kino__reiter-knopf[data-art="brems"]::before { content: "▼"; }
.tele-kino__reiter-knopf[data-art="lenk"]::before { content: "⟳"; }
.tele-kino__skala { display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-faint); }
.tele-kino__skala-band { flex: 1 1 auto; height: 8px; border-radius: 99px; max-width: 260px; }
.tele-kino__skala-band--tempo { background: linear-gradient(90deg, rgb(255,46,151), rgb(0,229,255)); }
.tele-kino__skala-band--gas { background: linear-gradient(90deg, rgb(70,78,92), rgb(0,230,118)); }
.tele-kino__skala-band--brems { background: linear-gradient(90deg, rgb(70,78,92), rgb(255,59,59)); }
.tele-kino__skala-band--lenk { background: linear-gradient(90deg, rgb(70,78,92), rgb(178,128,255)); }

/* Wagen statt Punkt (Marc, 22.09.: „Punkte noch zu gross und lieber kleine
   Autos"). Die Silhouette zeigt zugleich die Fahrtrichtung. */
.tele-kino__karosse { stroke: var(--bg-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* Rand in Bildschirm-px: 1 Kartenpixel = bis 3,8 m (NS) */
.tele-kino__nase { fill: var(--bg-1); opacity: .5; }
.tele-kino__auto--du .tele-kino__karosse { fill: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.tele-kino__auto--ref .tele-kino__karosse { fill: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }

/* Schritt 9 (29.09.): traegt jetzt die Mini-Karte statt des Pults (das Pult
   liegt seither rechts neben dem Kino, siehe tele-anzeige.css). */
.tele-kino__unten { margin-top: var(--space-2); }
.tele-kino__auto text { font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-anchor: middle; fill: var(--text); paint-order: stroke; stroke: var(--bg-1); stroke-width: 2px; }

/* Live-Rückstand: fest oben rechts über dem Bild, damit er beim Zurückfallen
   sofort ins Auge fällt, statt im Bild zu verschwinden. */
.tele-kino__luecke { position: absolute; top: 32px; right: 10px; font-family: var(--font-mono);
  font-size: var(--text-md); font-weight: 700; color: var(--magenta); text-shadow: var(--glow-magenta);
  background: rgba(5, 6, 10, .55); padding: 2px 10px; border-radius: 99px; pointer-events: none; }

/* Zoom-Leiste des Kurvenkinos: unten links UEBER dem Bild (nicht mehr
   darunter im Fluss — Nachbesserung 2, 29.09.: 1920x950 hatte fuer die
   ~44px eigene Zeile keinen Platz mehr, sobald das Pult lesbare 70px-
   Saeulen braucht). Bleibt ausserhalb des Weges der Ruecklückstands-Anzeige
   (oben rechts) und der Steuerung (eigene Zeile darunter).
   Seit 04.10. (Marc: „verschieben wie bei Maps") faengt das Bild Finger
   selbst (`_tele_kino_gesten.js`): ein Finger schwenkt, zwei zoomen. Wischen
   AUSSERHALB des Bildes scrollt die Seite weiter. */
.tk-zoom-leiste { position: absolute; left: 8px; bottom: 8px; display: flex;
  justify-content: center; margin: 0; }
.tk-zoom-leiste .hg-zoom button { width: auto; min-width: 40px; height: 36px; padding: 0 12px;
  font-size: 12px; background: rgba(5, 6, 10, .55); }
@media (pointer: coarse) { .tk-zoom-leiste .hg-zoom button { height: var(--tap); } }
.tele-kino__bild { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.tele-kino__bild.is-gezogen { cursor: grabbing; }

/* --- Steuerleiste -------------------------------------------------------- */
.tele-kino__steuerung { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2); }
.tele-kino__play { min-width: var(--tap); min-height: var(--tap); border-radius: 99px; cursor: pointer;
  background: var(--cyan); color: var(--bg-0); border: none; font-size: 15px; flex-shrink: 0; }
.tele-kino__play[aria-pressed="true"] { background: var(--magenta); }
.tele-kino__tempi { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tele-kino__tempo { min-height: var(--tap); padding: 0 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .04); color: var(--text-dim); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; }
.tele-kino__tempo--aktiv { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px -2px var(--cyan); }
/* Schritt 3 (28.09.): stufenloser Regler 0,05x-1x neben der Schnellwahl. */
.tele-kino__tempo-regler { width: 70px; height: var(--tap); accent-color: var(--cyan); margin-left: 4px; }
.tele-kino__tempo-wert { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
  min-width: 34px; text-align: right; }
.tele-kino__regler { flex: 1 1 140px; min-width: 120px; height: var(--tap); accent-color: var(--cyan); }
/* Plan-Schritt 12 (29.09.): „Fein" verlangsamt das Ziehen am Regler 5×,
   Mausrad darueber bewegt in ±5-ms-Rasten — Tooltip nennt den Faktor. */
.tele-kino__fein { min-width: var(--tap); min-height: var(--tap); padding: 0 10px; border-radius: 8px;
  cursor: pointer; background: rgba(255, 255, 255, .04); color: var(--text-dim); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; flex-shrink: 0; }
.tele-kino__fein.is-an { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px -2px var(--cyan); }
.tele-kino__zeit { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  min-width: 62px; text-align: right; flex-shrink: 0; }

@media (max-width: 700px) {
  /* Spuren bleiben untereinander (sie sind es ohnehin) — nur die Legenden
     wandern unter den Titel statt daneben, sonst quetscht es auf 360px. */
  .tele-spur__titel { flex-wrap: wrap; }
  /* Die Skalen-Spalte frisst auf 360px sonst ein Viertel der Breite. */
  .tele-spur__skala { width: 70px; font-size: 9px; }
  .tele-spur__achse { padding-right: 70px; }
  .tele-tab { font-size: 12px; }
  .tele-tab th, .tele-tab td { padding: 6px 6px; }
}

/* Verläufe über die gefahrenen METER (Schritt F2). Vier Felder nebeneinander,
   damit man Tempo, Rückstand, Gas und Bremse an derselben Stelle der Strecke
   gleichzeitig sieht. */
/* Gestapelt statt nebeneinander: alle vier Kanaele teilen sich EINE X-Achse,
   und uebereinander liest man dieselbe Stelle der Strecke in einer Spalte ab.
   Nebeneinander muesste das Auge zwischen vier Achsen hin und her springen. */
.tv-gitter { display: flex; flex-direction: column; gap: 4px; }
.tv { border: 1px solid var(--line); border-radius: 10px; padding: 4px var(--space-2);
  background: rgba(255, 255, 255, .02); }
.tv__kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--space-2);
  margin-bottom: 1px; }
.tv__name { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .08em;
  color: var(--text-dim); text-transform: uppercase; }
/* Messwerte an der Zeigerstelle. Feste Breite je Wert, damit die Zeile beim
   Ziehen nicht springt — eine wandernde Zahl liest sich nicht. */
.tv__werte { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-sm); justify-content: flex-end; }
/* Name + Wert in einer Zeile (Marc, 23.09.: "welche Zahl wer ist") — keine
   feste Mindestbreite mehr, sonst schneidet ein langer Name auf dem Handy ab. */
.tv__werte i { font-style: normal; text-align: right; white-space: nowrap; }
.tv__m { color: var(--text-faint); }
.tv__w--du { color: var(--cyan); }
.tv__w--ref { color: var(--magenta); }
.tv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; }
/* Schritt 5 (28.09., Nachbesserung): kleiner als vorher (88px) — fuenf
   Diagramme UND Video UND Pult muessen zusammen unter Nav+Seitenkopf ohne
   Scrollen passen. */
/* Abnahme 29.09. (Marc, Punkt 1/3): von 54 auf 46px — deckt einen Teil des
   Hoehen-Budgets, das die auf >=70px vergroesserten Pedalsaeulen brauchen. */
.tv__bild { display: block; width: 100%; height: var(--tv-h, 46px); touch-action: none; cursor: crosshair; }
/* 04.10. (Marc): Rückstand-Diagramm gestrichen, Gas und Bremse „deutlich
   höher, dass man schöner was sieht" — 46 → 110 px (Handy 96). Die Höhe
   steht als Variable am Bereich, die Designs setzen nur die Variable. */
.tele-kino__ansichtbereich { --tv-h: 110px; }
@media (max-width: 700px) { .tele-kino__ansichtbereich { --tv-h: 96px; } }
/* Gezoomt liegt der Rest der Kurve ausserhalb der viewBox — abschneiden
   (`.dia-karte svg { overflow: visible }` aus diagramme.css malte ihn sonst ueber die Seite). */
.tele-kino__ansichtbereich .tv__bild { overflow: hidden; }
.tele-kino__ansichtbereich.is-gezoomt .tv__bild { cursor: grab; }
.tele-kino__ansichtbereich .tv__bild.is-gezogen { cursor: grabbing; }
/* Zoomleiste über Gas/Bremse: − / + / Zurück, rechts der Rückstand an der Zeigerstelle. */
.tv-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px var(--space-2); margin: 4px 0 2px; }
.tv-zoom button { width: auto; min-width: 40px; height: 34px; padding: 0 12px; font-size: 13px; }
.tv-zoom button[data-k="rein"], .tv-zoom button[data-k="raus"] { font-size: 20px; line-height: 1; }
@media (pointer: coarse) { .tv-zoom button { height: var(--tap); min-width: var(--tap); } }
/* Darf umbrechen (Handy, langer Name), aber nie mitten in Name oder Wert. */
.tv-leiste__lage { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm);
  text-align: right; min-width: 0; }
.tv-leiste__lage b, .tv-leiste__lage i { white-space: nowrap; }
.tv-leiste__lage b { font-weight: 400; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .08em; margin-right: 4px; }
.tv-leiste__lage i { font-style: normal; font-weight: 700; color: var(--cyan); }
.tv__netz { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Achsentexte als HTML — im waagerecht gestauchten SVG waeren sie unleserlich. */
.tv__y, .tv__x { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.tv__y { display: flex; flex-direction: column; justify-content: space-between;
  height: var(--tv-h, 46px); text-align: right; }
.tv__x { grid-column: 2; display: flex; justify-content: space-between; }
/* `vector-effect` hält die Strichstärke, obwohl das SVG waagerecht gestreckt
   wird (`preserveAspectRatio: none`) — sonst wären die Linien verzerrt dick. */
.tv__zug { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tv__zug--du { stroke: var(--cyan); }
.tv__zug--ref { stroke: var(--magenta); stroke-dasharray: 4 3; opacity: .8; }
.tv__zeiger { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 3; opacity: .65; }

/* Fokusbereich: dieselbe Stelle in allen vier Verläufen. Führt den Blick,
   statt den Leser suchen zu lassen. */
.tv__fokus { fill: rgba(255, 59, 59, .13); stroke: rgba(255, 59, 59, .35);
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.tt-fokus { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-dim); }
.tt-fokus b { color: var(--text); font-family: var(--font-mono); }

/* Fahrtipps in ganzen Sätzen (Schritt F5). */
.tt { margin-top: var(--space-3); }
.tt-haupt { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3);
  border-radius: 10px; border: 1px solid var(--line); }
.tt-haupt b { font-size: var(--text-lg); }
.tt-haupt span { color: var(--text-dim); }
.tt-haupt--verloren { border-color: rgba(255, 46, 151, .45); background: rgba(255, 46, 151, .08); }
.tt-haupt--verloren b { color: var(--magenta); }
.tt-haupt--gewonnen { border-color: rgba(0, 229, 255, .45); background: rgba(0, 229, 255, .08); }
.tt-haupt--gewonnen b { color: var(--cyan); }
.tt-haupt--gleich b { color: var(--text-dim); }
.tt-karten { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.tt-karte { border: 1px solid var(--line); border-radius: 10px; padding: var(--space-3);
  background: rgba(255, 255, 255, .02); }
.tt-karte__titel { display: block; color: var(--text); margin-bottom: 4px; }
.tt-karte__satz { margin: 0 0 8px; color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }
/* Der Beleg ist der Kern: ein Rat ohne Zahl dahinter wäre ein Ratschlag,
   keine Auswertung. Er steht deshalb bei JEDER Karte und nie klein gedruckt. */
.tt-karte__beleg { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--cyan); }
.tt-grenzen { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  font-size: var(--text-sm); color: var(--text-faint); }
.tt-grenzen li { padding-left: 18px; position: relative; margin-top: 4px; }
.tt-grenzen li::before { content: "⚠"; position: absolute; left: 0; }

/* Kurvenkopf: Blaettern, Rueckstand, ⓘ-Hinweis, Rueckweg — ALLES in EINER
   Zeile (Schritt 5, 28.09.: vorher zwei Bloecke mit Ueberschrift + Fliesstext). */
.tk-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-2);
  margin-bottom: var(--space-2); }
.tk-blatt__knopf { min-width: var(--tap); min-height: var(--tap); border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
  font-size: var(--text-lg); cursor: pointer; line-height: 1; }
.tk-blatt__knopf:hover { color: var(--cyan); border-color: var(--cyan); }
.tk-blatt__knopf.is-aus { opacity: .3; cursor: default; display: inline-flex;
  align-items: center; justify-content: center; }
.tk-blatt__wo { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-faint); }
.tk-kopf__badge { display: inline-block; font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.tk-kopf__badge--verloren { color: var(--magenta); background: rgba(255, 46, 151, .12);
  text-shadow: var(--glow-magenta); }
.tk-kopf__badge--gewonnen { color: var(--cyan); background: rgba(0, 229, 255, .12); text-shadow: var(--glow-cyan); }
.tk-kopf__info { margin-left: auto; }
/* Reiter (2D) + 2D/3D-Umschalter — EINE Werkzeugzeile DIREKT beim Kino, links
   ueber dem Video (Schritt 9, 29.09., Marc: „ist ganz nach rechts gerutscht"
   — zurueck ans Kino, kein `margin-left: auto` mehr, kein Normal/Erweitert
   mehr). */
.tk-werkzeug { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-2); }
.tk-werkzeug > .tele-kino__reiter { margin: 0; }
/* Abnahme 29.09. (Marc, Punkt 3): bei 1440x900 ist jeder Pixel knapp —
   Luft ueber/unter Kopf, Werkzeugzeile und Steuerung leicht gestrafft. */
@media (min-width: 1100px) {
  .tk-kopf, .tk-werkzeug { margin-bottom: 2px; }
  .tele-kino__steuerung { margin-top: 2px; }
  .tele-kino__unten { margin-top: 2px; }
}

/* Gangzahl in der Nabe des Lenkrads (§14). Nur das Rad dreht sich. */

/* „Diese Kurve in Deinen anderen Runden" (F7). */
.tr { margin-top: var(--space-4); }
.tr-frage { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.tr-tabelle { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tr-tabelle th { text-align: left; font-weight: 400; color: var(--text-faint);
  font-family: var(--font-mono); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.tr-tabelle td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.tr-zahl { text-align: right; font-family: var(--font-mono); }
.tr-zeile--diese { background: rgba(0, 229, 255, .07); }
.tr-zeile--diese td:first-child { color: var(--cyan); }
.tr-zeile--beste td { color: var(--text); }
.tr-zeile--beste .tr-zahl:nth-child(3) { color: var(--cyan); }

/* Sichtbarer Rückweg zur ganzen Strecke (Marc, 22.09.). */
.tk-blatt__zurueck { min-height: var(--tap); padding: 0 14px; margin-right: var(--space-2);
  border-radius: 8px; border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer; }
.tk-blatt__zurueck:hover { color: var(--cyan); border-color: var(--cyan); }

/* Eingeklappte Abschnitte: Platz sparen, ohne etwas wegzuwerfen. */
.tele-fach { margin: var(--space-4) 0; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .02); }
.tele-fach > summary { cursor: pointer; padding: var(--space-3); font-family: var(--font-mono);
  font-size: var(--text-sm); letter-spacing: .06em; color: var(--text-dim); list-style: none; }
.tele-fach > summary::before { content: "▸ "; color: var(--cyan); }
.tele-fach[open] > summary::before { content: "▾ "; }
.tele-fach > summary:hover { color: var(--cyan); }
.tele-fach > .dia-karte { border: 0; margin: 0; background: transparent; }

/* Reiter für Fahrtipps und andere Runden (§7). */
.tf { margin-top: var(--space-4); }
.tf__reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tf__knopf { min-height: var(--tap); padding: 0 16px; cursor: pointer; background: transparent;
  border: 0; border-bottom: 2px solid transparent; color: var(--text-dim);
  font-family: var(--font-mono); font-size: var(--text-sm); }
.tf__knopf.is-an { color: var(--cyan); border-bottom-color: var(--cyan); }
.tf__flaeche { padding-top: var(--space-3); }
.tf__flaeche .tt, .tf__flaeche .tr { margin-top: 0; }

/* Überblick in Worten (Schritt 12): Beschriftung darf umbrechen, Zahl nicht —
   sonst lief die Tabelle am Handy 80 px über den Rand. */
.tele-tab--klein td:first-child { white-space: normal; }
.tele-tab--klein td.tele-tab__zahl, .tele-tab td.tele-tab__zahl { white-space: nowrap; }
.tele-delta small { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--text-dim); text-shadow: none; }
.tele-tab td.tele-tab__warum, .tele-tab th:last-child { text-align: left; white-space: normal;
  color: var(--text-dim); line-height: 1.4; }
/* Handy: die Auswahlfelder stehen untereinander — ihre `flex-basis: 200px`
   wurde dort zur HÖHE (2 × 200 px Lücke im Kopf, gemessen 23.09.). */
@media (max-width: 700px) { .tele-wahl__feld { flex: 0 0 auto; } }

/* --- Mini-Streckenkarte im Kurvenkino (Schritt 28, TrackTitan-Vorbild) --- */
/* Seit Schritt 5 (28.09.) klein OBEN RECHTS in der Diagrammspalte statt fest
   darunter (kostete vorher eine ganze Bildschirmzeile). Feste, schmale
   Breite + `margin-left:auto` schiebt sie in die Ecke; ab 1100 px steht sie
   neben dem ersten Diagramm, darunter faellt die Spalte im CSS ohnehin
   untereinander — dort volle Breite lassen, kein eigenes Media-Query noetig. */
/* Nachbesserung Gegencheck (29.09.): Mini-Karte zieht in die linke Spalte,
   UNTER die Wiedergabe-Steuerung (`.tele-kino__unten`) — dort ist nach
   Marcs Messung ~168px Reserve (Play-Unterkante bis Fensterende), das
   grosse Pult braucht die rechte Spalte fuer sich. Ziel-Hoehe ~140px. */
.tk-mini { width: 100%; max-width: 220px; margin: var(--space-2) auto 0; }
/* 1440x900: 220px Mini-Karte reisst die Hoehen-Budget-Grenze um 14px
   (nachgemessen, Nachbesserung Gegencheck 29.09.) — schmaler statt Scrollen. */
@media (max-width: 1500px) { .tk-mini { max-width: 180px; } }
.tk-mini__svg { display: block; width: 100%; height: auto; }
.tk-mini__strecke { fill: none; stroke: var(--text-faint); stroke-width: 2; opacity: .35; }
.tk-mini__kurve { fill: none; stroke: var(--text-dim); stroke-width: 4; stroke-linecap: round;
  cursor: pointer; opacity: .55; }
.tk-mini__treffer:hover + .tk-mini__kurve, .tk-mini__kurve:hover { stroke: var(--cyan); opacity: .9; }
.tk-mini__kurve--an { stroke: var(--cyan); opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
.tk-mini__start { fill: var(--text-dim); }
.tk-mini__kurve { pointer-events: none; }
.tk-mini__treffer { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round;
  pointer-events: stroke; cursor: pointer; }
.tk-mini__treffer:focus-visible { stroke: rgba(0, 229, 255, .25); outline: none; }

/* --- 3D-Strecke (Plan Schritt 32a) --------------------------------------- */
/* Schritt 11 (29.09., Marc: „prägnanter und informativer, gut erkennbar"):
   eigene beschriftete Gruppe „Szenenauswahl" statt kleiner Knoepfe, sitzt
   ZUERST in der Werkzeugzeile ueber dem Kino — kein Overlay mehr im Bild. */
.tk-szene { display: flex; align-items: center; gap: var(--space-2); }
/* Schritt 15 (29.09., Marc: „auffaelliger, evtl. mit Effekt"): kleiner Neon-
   Chip statt reinem Fliesstext-Label, damit „Szenenauswahl" als Gruppe erkennbar ist. */
.tk-szene__label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--cyan);
  letter-spacing: .04em; padding: 3px 9px; border: 1px solid rgba(0, 229, 255, .35); border-radius: 6px;
  background: rgba(0, 229, 255, .06); }
.tk-3d-wahl { display: flex; gap: 6px; }
/* Alle Knoepfe/Menues der Szenenzeile: sichtbarer Neonrand auch INAKTIV — vorher
   fast unsichtbar (`var(--line)`), Marc musste raten, wo geklickt werden kann. */
.tk-3d-wahl button, .tk-werkzeug__3d .hg-zoom button, .tk-3d__durchsicht-knopf, .tk-3d__aufklapp > summary {
  border-color: rgba(0, 229, 255, .3); background: rgba(0, 229, 255, .04);
  box-shadow: 0 0 8px -3px rgba(0, 229, 255, .5);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.tk-3d-wahl button, .tk-werkzeug__3d .hg-zoom button { width: auto; min-width: 44px; height: 36px; padding: 0 14px;
  font-size: 12px; font-family: var(--font-mono); border-radius: 8px; }
.tk-3d-wahl button.is-an, .tk-werkzeug__3d .hg-zoom button.is-an { color: var(--cyan); border-color: var(--cyan);
  box-shadow: var(--glow-cyan); background: rgba(0, 229, 255, .08); }
@media (hover: hover) {
  .tk-3d-wahl button:hover, .tk-werkzeug__3d .hg-zoom button:hover, .tk-3d__durchsicht-knopf:hover,
  .tk-3d__aufklapp > summary:hover { border-color: var(--cyan); box-shadow: 0 0 14px -3px rgba(0, 229, 255, .8); }
}
@media (pointer: coarse) { .tk-3d-wahl button, .tk-werkzeug__3d .hg-zoom button { height: var(--tap); } }
/* Schritt 15: Transparenz-Knopf faerbt sich magenta statt cyan, wenn aktiv —
   unterscheidet ihn optisch von den cyan Kamera-/Fahreransicht-Knoepfen. */
.tk-3d__durchsicht-knopf { width: auto; min-width: 44px; height: 36px; padding: 0 14px;
  font-size: 12px; font-family: var(--font-mono); border-radius: 8px; border-width: 1px; border-style: solid; }
.tk-3d__durchsicht-knopf.is-an { color: var(--magenta); border-color: var(--magenta);
  box-shadow: var(--glow-magenta); background: rgba(255, 46, 151, .08); }
@media (pointer: coarse) { .tk-3d__durchsicht-knopf { height: var(--tap); } }
/* Kamera-/Fahreransicht-Menues + Fokus + Zuruecksetzen — Platz am Ende der
   Werkzeugzeile, nur gefuellt waehrend 3D aktiv ist (sonst leer/kein Umbruch). */
.tk-werkzeug__3d { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tk-werkzeug__3d:empty { display: none; }
/* Feste Hoehe wie das 2D-Bild, sonst waechst der Kasten mit der Zeichenflaeche
   mit. `calc`-Teil wie beim 2D-Bild, aber mit mehr Abzug: die 3D-Leiste
   (Kamera/Fahreransicht/Zuruecksetzen) UND der Einmal-Hinweis beim ersten
   Besuch brauchen zusaetzliche ~50 px, die das 2D-Bild nicht hat. */
.tk-3d__buehne { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: min(46vh, calc(100vh - 602px));
  border-radius: 10px; overflow: hidden; background: var(--bg-1); }
@media (max-width: 600px) { .tk-3d__buehne { aspect-ratio: 1 / 1; max-height: 60vh; } }
.tk-3d__buehne canvas { display: block; width: 100%; height: 100%; cursor: grab;
  touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
  /* ein Finger scrollt die Seite, zwei gehoeren der Kamera (32c); user-select
     verhindert, dass Ziehen den Seitentext rechts markiert (44b) */
.tk-3d__buehne canvas:active { cursor: grabbing; }
/* Schritt 45: Messmodus (?fps=1) oben rechts im 3D-Bild, klickt nicht mit. */
.tk-3d__messung { position: absolute; top: 6px; right: 8px; z-index: 2; pointer-events: none; margin: 0;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9ff3ff; text-align: right;
  white-space: pre; background: rgba(10, 13, 24, .78); padding: 3px 7px; border-radius: 5px; }
/* Ladefortschritt (frueher `.tk-3d__strecke-lade` unten links): Ladeschirm, `tele-3d-lade.css` (04.10.). */
/* Schritt 11 (29.09.): die Leiste liegt nicht mehr IM 3D-Kasten (`.tk-3d`),
   sondern in `.tk-werkzeug__3d` oben in der Werkzeugzeile — Menues klappen
   dort nach UNTEN auf, ueber dem Bild (siehe `.tk-3d__aufklapp-inhalt`). */
.tk-3d { position: relative; }
/* E1: sechs Kameraknoepfe — die Gruppe bricht selbst um (Handy 390, kein Querscrollen). */
.tk-3d__kameras { flex-wrap: wrap; flex-shrink: 1; justify-content: center; max-width: 100%; }
.tk-3d__hinweis { color: var(--text-dim); font-size: var(--text-sm); text-align: right; margin: 0 0 var(--space-2); }
/* Schritt 42: dezenter Einmal-Hinweis unter der 3D-Buehne, verschwindet nach dem ersten Ziehen. */
.tk-3d__hinweis-nutzung { color: var(--text-dim); font-size: var(--text-sm); text-align: center;
  margin: var(--space-1) 0 0; opacity: .75; }
/* Plan 3D-Ausbau B2a: klein und dezent unter dem 3D-Bild, nur ohne Zugang zu echten Automodellen. */
.tk-3d__modell-hinweis { color: var(--text-dim); font-size: 13px; text-align: center; /* 04.10.: war 10,7–12 px */
  margin: var(--space-1) 0 0; opacity: .8; }
.tk-3d__modell-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Schritt 44: Auto-Umschalter neben den Kamera-Knoepfen, Farbpunkt statt Text-Umweg. */
.tk-3d__fahrzeug-knopf { display: inline-flex; align-items: center; gap: 6px; }
.tk-3d__fahrzeug-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Schritt 2 (28.09.): Kamera + Fahreransicht als Aufklappmenue statt fester
   Knopfreihe — spart Platz in der Leiste. */
.tk-3d__aufklapp { position: relative; }
.tk-3d__aufklapp > summary { cursor: pointer; list-style: none; width: auto; min-width: 44px; height: 36px;
  padding: 0 12px; font-size: 12px; font-family: var(--font-mono); display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); }
.tk-3d__aufklapp > summary::-webkit-details-marker { display: none; }
.tk-3d__aufklapp[open] > summary { color: var(--cyan); border-color: var(--cyan); }
@media (pointer: coarse) { .tk-3d__aufklapp > summary { height: var(--tap); } }
.tk-3d__aufklapp-inhalt { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 220px;
  padding: var(--space-2); border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }

/* --- Telemetrie-Karte: RaM-/Academy-Training, aktuelle Strecke (Plan Schritt 4) ---
   Gleicher Kartenrahmen wie `.tele-kopf`, aber eigener Klassenname: die Karte
   lebt in der Rangliste, nicht auf der Telemetrie-Seite selbst. */
.tk {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); margin: var(--space-3) 0;
}
.tk__titel {
  font-family: var(--font-display); font-size: var(--text-md); letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-2);
}
.tk__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.tk__zeilen { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tk__zeit { display: flex; flex-direction: column; gap: 2px; }
.tk__zeit-label { font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.tk__zeit-wert { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--cyan); }
.tk__klein { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-dim); }
.tk__hinweis { margin: 0; font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5; max-width: 62ch; }
.tk__hilfe { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.tk__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-left: auto; }
.tk__login { color: var(--cyan); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 2px; }
.tk__btn {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 99px;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.tk__btn--primary {
  color: #06121a; background: var(--grad-main);
  box-shadow: var(--glow-cyan);
}
@media (max-width: 620px) {
  .tk__body { flex-direction: column; align-items: stretch; }
  .tk__aktion { margin-left: 0; justify-content: space-between; }
  .tk__btn { justify-content: center; width: 100%; }
}

/* Hilfeseite (#/telemetrie-hilfe) — reiner Text, eigene kleine Ueberschrift. */
.tk-hilfe__h { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
/* Wetter der Runde im Kopf (Plan 2026-09-29); in der Kurvenansicht weg wie das Auto. */
.tele-kopf__wetter { color: var(--text-faint); font-size: 11px; line-height: 1.35; }
.tele-kopf__wetter b { color: var(--amber, #ffb347); font-weight: 600; }
.tele-kopf--kurve .tele-kopf__wetter { display: none; }
/* Satz zur Bedingung (Schritt 6): gemischter Vergleich in Bernstein, sonst leise. */
.tele-kopf__bedhinweis { margin: var(--space-2) 0 0; }
.tele-kopf__bedhinweis--gemischt { color: var(--amber, #ffb347); }