/* Designvariante A „Boxenfunk" — greift nur unter html[data-design="boxenfunk"].
   Runde 2 (29.09., Marc: „es hat halt alles den Claude-Style … ich rede von
   Grafiken"): KEIN Umfaerben mehr, sondern eine TV-Rennuebertragung.
   - Keine Rahmenkaesten: Flaechen aus Vollfarbe, Ecken per Verlauf angeschnitten
     (kein clip-path auf grossen Flaechen — der wuerde Hinweis-Blasen abschneiden).
   - Ueberschriften als gelbe Schraeg-Tabs mit dunkler Schrift, ab Panelkante.
   - Grosse, kondensierte, kursive Schrift (Barlow Condensed), Fliesstext
     Titillium Web ≥ 15 px, Etiketten ≥ 13 px, keine Monospace.
   - Signalfarbe Gelb fuer Auswahl/Aktiv; Cyan/Magenta NUR fuer die beiden Fahrer.
   - Diagramme: dicke Linien, Flaeche in Fahrerfarbe, nur die Nulllinie.
   Nur Telemetrie-Seite betroffen (Klassen `.tele-*`/`.tk-*`/`.tv*`/`.tt*`). */

html[data-design="boxenfunk"] {
  --bf-display: 'Barlow Condensed', 'Titillium Web', Impact, sans-serif;
  --bf-text: 'Titillium Web', 'Barlow Condensed', sans-serif;
  --bf-ink: #f4f7fc;
  --bf-ink-dim: #b8c2d4;
  --bf-bg: #07090e;
  --bf-panel: #121722;
  --bf-panel-2: #1a2130;
  --bf-knopf: #252d3e;
  --bf-knopf-hell: #323c52;
  /* Hauptfarbe (Name historisch): Marc 02.10. „Hauptfarbe soll rot sein“ — vorher Signalgelb #ffd60a,
     das mit dem Gelb von „Sonstiges“ verwechselbar war. Dunkle Schrift darauf: Kontrast 5,6. */
  --bf-gelb: #ff3b30;
  --bf-dunkel: #080a10;
  --bf-du: var(--cyan, #00e5ff);
  --bf-ref: var(--magenta, #ff2e97);
  --bf-gut: #1fd168;
  --bf-schlecht: #ff3b4e;
  --bf-schraeg: 10px;
  --bf-ecke: 18px;
  /* Draufsicht-Etiketten (Kurvennummern, Zeiten, Sektoren) — Faktor fuer die
     Zoomformel in `_tele_karte_schrift.js`. */
  --karte-schrift: 1.45;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-600-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-600-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-700-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-700-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-800-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-800-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* Echte Kursivschnitte (02.10.): ohne sie erzeugt der Browser eine schraeggestellte Ersatzschrift mit
   gezackten Pixelkanten (Marc: „hakelig“). Alle font-style: italic im Boxenfunk greifen auf diese Dateien. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-600italic-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-600italic-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-700italic-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-700italic-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-800italic-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/BarlowCondensed-800italic-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-600italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-600italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-700italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/TitilliumWeb-700italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* ====================== Buehne: kein Neon-Nebel, TV-Studio-Schwarz ====================== */
html[data-design="boxenfunk"] body:has(.tele-view) {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #0b0e16 0%, var(--bf-bg) 55%, #0a0c12 100%);
  background-attachment: fixed;
}
html[data-design="boxenfunk"] body:has(.tele-view) .fx-glow,
html[data-design="boxenfunk"] body:has(.tele-view) .fx-grid,
html[data-design="boxenfunk"] body:has(.tele-view) .fx-scanlines { display: none; }

html[data-design="boxenfunk"] .tele-view {
  --bf-flaeche:
    linear-gradient(225deg, transparent var(--bf-ecke), var(--bf-panel) calc(var(--bf-ecke) + .5px)) top right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent var(--bf-ecke), var(--bf-panel) calc(var(--bf-ecke) + .5px)) bottom left / 51% 51% no-repeat,
    linear-gradient(var(--bf-panel), var(--bf-panel)) top left / 51% 51% no-repeat,
    linear-gradient(var(--bf-panel), var(--bf-panel)) bottom right / 51% 51% no-repeat;
  font-family: var(--bf-text); color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tele-view .back-link {
  font-family: var(--bf-display); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bf-ink-dim);
}

/* Flaechen statt Kaesten: Vollfarbe, zwei angeschnittene Ecken, KEIN Rahmen. */
html[data-design="boxenfunk"] .tele-view .dia-karte,
html[data-design="boxenfunk"] .tele-kopf,
html[data-design="boxenfunk"] .tele-fach {
  background: var(--bf-flaeche); border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none;
}
html[data-design="boxenfunk"] .tele-fach > .dia-karte { background: transparent; }

/* Ueberschrift = gelber Schraeg-Tab, der an der Panelkante beginnt. */
html[data-design="boxenfunk"] .tele-view .dia-karte h3 {
  display: inline-block; margin: 0 0 8px -20px; padding: 4px 26px 3px 20px;
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 21px;
  line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
  color: var(--bf-dunkel); background: var(--bf-gelb); text-shadow: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tele-view .dia-frage {
  font-family: var(--bf-text); font-weight: 600; font-size: 15px; line-height: 1.35;
  color: var(--bf-ink-dim); margin-bottom: 10px;
}
html[data-design="boxenfunk"] .tele-view .dia-frage b { color: var(--bf-ink); }

/* Knoepfe allgemein: kraeftige Vollfarb-Tabs, schraeg, kein Rand, kein Glow. */
html[data-design="boxenfunk"] .tele-view .hg-zoom button,
html[data-design="boxenfunk"] .tk-blatt__knopf,
html[data-design="boxenfunk"] .tk-blatt__zurueck,
html[data-design="boxenfunk"] .tele-kopf__wahlknopf,
html[data-design="boxenfunk"] .tele-kopf__ref button,
html[data-design="boxenfunk"] .tele-kino__reiter-knopf,
html[data-design="boxenfunk"] .tk-3d-wahl button,
html[data-design="boxenfunk"] .tk-werkzeug__3d .hg-zoom button,
html[data-design="boxenfunk"] .tk-3d__durchsicht-knopf,
html[data-design="boxenfunk"] .tk-3d__aufklapp > summary,
html[data-design="boxenfunk"] .tele-kino__tempo,
html[data-design="boxenfunk"] .tele-kino__fein,
html[data-design="boxenfunk"] .tf__knopf {
  border: 0 !important; border-radius: 0; box-shadow: none !important;
  background: var(--bf-knopf); color: var(--bf-ink);
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 16px;
  letter-spacing: .03em; text-transform: uppercase; text-shadow: none;
  clip-path: polygon(var(--bf-schraeg) 0, 100% 0, calc(100% - var(--bf-schraeg)) 100%, 0 100%);
  padding-left: 16px; padding-right: 16px;
}
html[data-design="boxenfunk"] .tele-view .hg-zoom button { padding: 0; font-size: 20px; }
html[data-design="boxenfunk"] .tele-view .hg-zoom button:hover:not(:disabled),
html[data-design="boxenfunk"] .tk-blatt__knopf:hover,
html[data-design="boxenfunk"] .tk-blatt__zurueck:hover,
html[data-design="boxenfunk"] .tele-kopf__wahlknopf:hover,
html[data-design="boxenfunk"] .tele-kino__reiter-knopf:hover,
html[data-design="boxenfunk"] .tk-3d-wahl button:hover,
html[data-design="boxenfunk"] .tele-kino__tempo:hover,
html[data-design="boxenfunk"] .tele-kino__fein:hover,
html[data-design="boxenfunk"] .tf__knopf:hover { background: var(--bf-knopf-hell); color: #fff; }
/* Aktiv = Signalgelb, dunkle Schrift. */
html[data-design="boxenfunk"] .tele-kino__reiter-knopf.is-an,
html[data-design="boxenfunk"] .tk-3d-wahl button.is-an,
html[data-design="boxenfunk"] .tk-werkzeug__3d .hg-zoom button.is-an,
html[data-design="boxenfunk"] .tk-3d__aufklapp[open] > summary,
html[data-design="boxenfunk"] .tele-kino__tempo--aktiv,
html[data-design="boxenfunk"] .tele-kino__fein.is-an,
html[data-design="boxenfunk"] .tele-kopf__ref button[aria-pressed="true"],
html[data-design="boxenfunk"] .tf__knopf.is-an {
  background: var(--bf-gelb); color: var(--bf-dunkel);
}
html[data-design="boxenfunk"] .tk-3d__durchsicht-knopf.is-an { background: var(--bf-ref); color: #fff; }

/* ====================== Kopf: TV-Bauchbinde ====================== */
html[data-design="boxenfunk"] .tele-kopf { padding: 10px 20px 10px 0; }
html[data-design="boxenfunk"] .tele-kopf__zeile { gap: 14px; }
/* nowrap nur ab Tablet: am Telefon (412) schob die Zeile die Seite auf 811-916 px Breite (02.10.). */
@media (min-width: 768px) { html[data-design="boxenfunk"] .tele-kopf__zeile { flex-wrap: nowrap; } }
@media (max-width: 767px) { html[data-design="boxenfunk"] .tele-delta { flex-shrink: 1; max-width: 100%; } }
html[data-design="boxenfunk"] .tele-kopf__bedhinweis { padding-left: 20px; font-size: 14px; color: var(--bf-ink-dim, #b8c0d0); }
html[data-design="boxenfunk"] .tele-kopf__bedhinweis--gemischt { color: var(--bf-gelb); }
html[data-design="boxenfunk"] .tele-kopf__id { gap: 0; align-self: stretch; }
html[data-design="boxenfunk"] .tele-kopf__id .avatar-wrap { display: none; }
/* Fahrername als Fahrerfarb-Block ab Panelkante. */
html[data-design="boxenfunk"] .tele-kopf__id > span:not(.avatar-wrap) {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; min-height: 44px;
  padding: 0 26px 0 20px; background: var(--bf-du); color: var(--bf-dunkel);
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 24px;
  letter-spacing: .02em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tele-kopf__id .flag { height: 14px; width: auto; }
html[data-design="boxenfunk"] .tele-kopf__strecke {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 26px;
  line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tele-kopf__strecke small {
  font-family: var(--bf-text); font-weight: 600; font-style: normal; font-size: 14px;
  color: var(--bf-ink-dim); text-transform: none;
}
html[data-design="boxenfunk"] .tele-kopf__auto {
  font-family: var(--bf-text); font-weight: 600; font-size: 15px; color: var(--bf-ink-dim);
}
/* Rundenzeit: der weisse TV-Zeitkasten. */
html[data-design="boxenfunk"] .tele-kopf__zeit {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 46px;
  line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  color: var(--bf-dunkel); background: #fff; padding: 2px 24px 1px 20px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tele-delta {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 24px;
  line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-shadow: none;
  padding: 8px 22px 7px 18px; border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tele-delta--gut { background: var(--bf-gut); color: var(--bf-dunkel); }
html[data-design="boxenfunk"] .tele-delta--schlecht { background: var(--bf-schlecht); color: #fff; }
html[data-design="boxenfunk"] .tele-delta small {
  font-family: var(--bf-text); font-weight: 700; font-style: normal; font-size: 15px;
  text-transform: none; letter-spacing: 0; color: inherit; opacity: .8; margin-left: 6px;
}
html[data-design="boxenfunk"] .tele-kopf__wahl { padding-left: 20px; }
html[data-design="boxenfunk"] .tele-wahl { margin-top: 8px; gap: 12px; }
html[data-design="boxenfunk"] .tele-wahl__feld > span {
  font-family: var(--bf-display); font-weight: 700; font-size: 14px; letter-spacing: .08em;
  color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .tele-wahl__knopf {
  font-family: var(--bf-text); font-weight: 600; font-size: 15px; color: var(--bf-ink);
  background-color: var(--bf-panel-2); border: 0; border-radius: 0; border-left: 6px solid var(--bf-du);
}
html[data-design="boxenfunk"] .tele-wahl__feld--rechts .tele-wahl__knopf { border-left-color: var(--bf-ref); }
html[data-design="boxenfunk"] .tele-wahl__knopf:hover,
html[data-design="boxenfunk"] .tele-wahl__knopf[aria-expanded="true"] { background-color: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .tele-wahl__wer { font-family: var(--bf-display); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; }
html[data-design="boxenfunk"] .tele-wahl__info { font-family: var(--bf-text); font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-wahl__pfeil { color: var(--bf-gelb); }
/* Rundenliste: Tafel ohne Rundungen, Bestzeit-Zeilen wie Ranglistenzeilen. */
html[data-design="boxenfunk"] .tele-rw { background: var(--bf-panel); border: 0; border-radius: 0; border-top: 4px solid var(--bf-gelb); }
html[data-design="boxenfunk"] .tele-rw[data-seite="rechts"] { border-top-color: var(--bf-ref); }
html[data-design="boxenfunk"] .tele-rw[data-seite="links"] { border-top-color: var(--bf-du); }
html[data-design="boxenfunk"] :is(.tele-rw__kopf, .tele-rw__abschnitt) {
  font-family: var(--bf-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] :is(.tele-rw__runde, .tele-rw__vorgabe, .tele-rw__mehr) { border-radius: 0; font-family: var(--bf-text); font-size: 15px; color: var(--bf-ink); }
html[data-design="boxenfunk"] .tele-rw__runde:hover { background: var(--bf-panel-2); }
html[data-design="boxenfunk"] .tele-rw__wer b { font-family: var(--bf-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .tele-rw__zeit { font-family: var(--bf-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; }
html[data-design="boxenfunk"] .tele-rw__platz { font-family: var(--bf-display); font-weight: 800; font-size: 17px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] :is(.tele-rw__auto, .tele-rw__tag) { font-family: var(--bf-text); font-size: 14px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-rw__marke { border-radius: 0; font-family: var(--bf-text); font-size: 13px; }
html[data-design="boxenfunk"] :is(.tele-rw__vorgabe, .tele-rw__mehr) { background: var(--bf-knopf); border: 0; }
html[data-design="boxenfunk"] :is(.tele-rw__vorgabe, .tele-rw__mehr):hover { background: var(--bf-knopf-hell); color: #fff; }
html[data-design="boxenfunk"] .tele-rw__vorgabe.is-an { background: var(--bf-ref); color: #fff; }
html[data-design="boxenfunk"] .tele-rw__fahrer.is-offen .tele-rw__mehr { background: var(--bf-gelb); color: #fff; }
html[data-design="boxenfunk"] .tele-wahl__gegen {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 16px;
  text-transform: uppercase; color: var(--bf-gelb); padding-bottom: 6px;
}
/* Tipps-Aufklapper oben rechts in die Kopfzeile statt einer eigenen Zeile —
   spart eine Zeilenhoehe, die Startseite muss ohne Scrollen passen. Geoeffnet
   legt sich der Text als Tafel ueber den Inhalt darunter. */
html[data-design="boxenfunk"] .tele-kopf { position: relative; }
html[data-design="boxenfunk"] .tele-kopf__tipps { position: absolute; top: 12px; right: 20px; margin: 0; z-index: 6; }
html[data-design="boxenfunk"] .tele-kopf__tipps[open] .tele-kopf__text {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(620px, 70vw); margin: 0;
  padding: 12px 16px; background: var(--bf-panel-2); border-left: 5px solid var(--bf-gelb);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
}
html[data-design="boxenfunk"] .tele-kopf__tipps summary {
  background: var(--bf-knopf); padding: 6px 16px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-family: var(--bf-display); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bf-gelb);
}
html[data-design="boxenfunk"] .tele-kopf__text { border-top: 0; }
html[data-design="boxenfunk"] .tele-kopf__text li { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-kopf__wahlknopf { min-height: 44px; }

/* ====================== Draufsicht ====================== */
/* Rechte Spalte etwas breiter als heute: Tabelle und Pult brauchen fuer die
   grosse Schrift Platz, die Karte passt sich ihrer Flaeche ohnehin an. */
@media (min-width: 1100px) {
  html[data-design="boxenfunk"] .tele-zwei { grid-template-columns: minmax(0, 1fr) clamp(460px, 34vw, 640px); }
}
html[data-design="boxenfunk"] .hg-zoom__stand {
  font-family: var(--bf-display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .tele-legende { gap: 18px; margin-top: 8px; }
html[data-design="boxenfunk"] .tele-legende span {
  font-family: var(--bf-display); font-weight: 700; font-size: 15px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tele-legende i { width: 26px; height: 7px; border-radius: 0; }
html[data-design="boxenfunk"] .tele-karte text {
  font-family: var(--bf-display) !important; font-weight: 800 !important; font-style: italic;
  paint-order: stroke fill; stroke: rgba(7, 9, 14, .92); stroke-width: 3.5px;
  stroke-linejoin: round;
}
html[data-design="boxenfunk"] .tele-kurve-punkt circle { stroke-width: 2.6; }
html[data-design="boxenfunk"] .hg-tip {
  background: var(--bf-panel-2); border: 0; border-left: 5px solid var(--bf-gelb); border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
html[data-design="boxenfunk"] .hg-tip__kopf {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 16px;
  text-transform: uppercase; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .hg-tip__gitter span { font-family: var(--bf-text); font-weight: 600; font-size: 14px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .hg-tip__gitter b {
  font-family: var(--bf-display); font-weight: 800; font-size: 17px; color: var(--bf-ink);
  font-variant-numeric: tabular-nums;
}

/* ====================== Kurventabelle: TV-Ergebnisliste ====================== */
html[data-design="boxenfunk"] .tele-tab { font-family: var(--bf-text); border-collapse: separate; border-spacing: 0 3px; }
html[data-design="boxenfunk"] .tele-tab thead th {
  font-family: var(--bf-display); font-weight: 800; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bf-ink); background: var(--bf-knopf);
  border: 0; padding: 5px 10px; position: sticky; top: 0; z-index: 1;
}
html[data-design="boxenfunk"] .tele-tab td {
  font-family: var(--bf-text); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--bf-ink);
  border: 0; background: rgba(255, 255, 255, .045); padding: 6px 10px;
}
html[data-design="boxenfunk"] .tele-tab tbody tr:hover td { background: rgba(255, 255, 255, .09); }
html[data-design="boxenfunk"] .tele-tab td:first-child { box-shadow: inset 4px 0 0 var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .tele-tab__zeile--aktiv td { background: rgba(255, 59, 48, .16) !important; }
html[data-design="boxenfunk"] .tele-tab__zeile--aktiv td:first-child { box-shadow: inset 6px 0 0 var(--bf-gelb); }
html[data-design="boxenfunk"] .tele-tab__zahl {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 19px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
html[data-design="boxenfunk"] .tele-tab__punkt { border-radius: 0; width: 10px; height: 10px; }
html[data-design="boxenfunk"] .tele-tab__richtung { color: var(--bf-ink-dim); font-size: 15px; }
html[data-design="boxenfunk"] .tele-tab__schikane {
  font-family: var(--bf-display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bf-ink); background: var(--bf-knopf-hell);
  border: 0; border-radius: 0; padding: 1px 7px;
}
html[data-design="boxenfunk"] .tele-tab__warum { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-tab__gerade td:first-child { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-tab__fuss {
  font-family: var(--bf-display); font-weight: 700; font-size: 16px; letter-spacing: .02em;
  color: var(--bf-ink-dim); border-top: 0; margin: 6px 0 0; padding: 6px 10px;
  background: rgba(255, 255, 255, .04); font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tele-tab__fuss b,
html[data-design="boxenfunk"] .tele-tab__wrap b { font-family: var(--bf-display); font-weight: 800; color: var(--bf-ink); }

/* ====================== Pult: Head-to-Head-Einblendung ====================== */
html[data-design="boxenfunk"] .tk-pult {
  background: linear-gradient(180deg, var(--bf-panel-2), var(--bf-panel));
  border: 0; border-radius: 0; box-shadow: none; padding: 10px 12px; gap: 10px;
}
html[data-design="boxenfunk"] .tk-pult__name {
  font-family: var(--bf-display); font-weight: 800; font-size: 14px; letter-spacing: .14em;
  color: #fff; background: var(--bf-knopf); padding: 0 3px;
}
html[data-design="boxenfunk"] .tk-pedal { gap: 6px; }
html[data-design="boxenfunk"] .tk-pedal__paar { gap: 6px; }
/* Wert UEBER der Saeule, gross — die Saeule fuellt den Rest der Hoehe. */
html[data-design="boxenfunk"] .tk-pedal__slot { flex-direction: column-reverse; align-items: stretch; gap: 3px; }
html[data-design="boxenfunk"] .tk-saeule {
  flex: 1 1 auto; width: 40px; border: 0; border-radius: 0; box-shadow: none;
  background:
    repeating-linear-gradient(0deg, rgba(7, 9, 14, .9) 0 2px, transparent 2px 12px),
    #242c3c;
}
html[data-design="boxenfunk"] .tk-saeule__strich { display: none; }
html[data-design="boxenfunk"] .tk-saeule__fuell { border-radius: 0; box-shadow: none !important; }
html[data-design="boxenfunk"] .tk-saeule__fuell--du { background: var(--bf-du); }
html[data-design="boxenfunk"] .tk-saeule__fuell--ref { background: var(--bf-ref); }
html[data-design="boxenfunk"] .tk-saeule__fuell::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #fff;
}
html[data-design="boxenfunk"] .tk-pedal__wert {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 22px;
  line-height: 1; text-align: center; color: var(--bf-ink); font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tk-pedal__slot--du .tk-pedal__wert { color: var(--bf-du); }
html[data-design="boxenfunk"] .tk-pedal__slot--ref .tk-pedal__wert { color: var(--bf-ref); }

/* Fahrerbloecke: Namensbalken in Fahrerfarbe, darunter die grosse Zahl. */
html[data-design="boxenfunk"] .tk-mitte { gap: 8px; }
html[data-design="boxenfunk"] .tk-radzeile {
  background: rgba(255, 255, 255, .05); padding: 0 10px 6px 0; row-gap: 2px; column-gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "kopf kopf" "tempo tempo" "rad lenk";
}
html[data-design="boxenfunk"] .tk-radzeile__kopf {
  justify-content: flex-start; padding: 3px 22px 2px 10px; margin-bottom: 2px;
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 17px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--bf-dunkel);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tk-radzeile--du .tk-radzeile__kopf { background: var(--bf-du); }
html[data-design="boxenfunk"] .tk-radzeile--ref .tk-radzeile__kopf { background: var(--bf-ref); color: #fff; }
html[data-design="boxenfunk"] .tk-punkt { display: none; }
html[data-design="boxenfunk"] .tk-radzeile__tempo {
  justify-self: start; display: flex; align-items: baseline; gap: 5px; padding-left: 10px;
}
html[data-design="boxenfunk"] .tk-radzeile__tempo b {
  display: inline; font-family: var(--bf-display); font-weight: 800; font-style: italic;
  font-size: 58px; line-height: .86; letter-spacing: -.01em; color: #fff;
  font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tk-radzeile__tempo span {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .tk-rad { width: 44px; height: 44px; margin-left: 10px; justify-self: start; }
html[data-design="boxenfunk"] .tk-rad--du,
html[data-design="boxenfunk"] .tk-rad--ref { filter: none; }
html[data-design="boxenfunk"] .tk-rad__kante { stroke-width: 3; }
html[data-design="boxenfunk"] .tk-rad__gang { font-family: var(--bf-display); font-weight: 800; font-size: 32px; }
html[data-design="boxenfunk"] .tk-radzeile__lenk {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 18px;
  color: var(--bf-ink); align-self: center;
}
/* Grosse Form (Kurvenansicht): Fahrer untereinander, Zahl + Rad + Lenkung in einer Reihe. */
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "kopf kopf kopf" "tempo rad lenk"; padding-bottom: 8px;
}
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__kopf { font-size: 19px; }
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__tempo b { font-size: 68px; }
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-rad { width: 58px; height: 58px; margin-left: 4px; }
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__lenk { font-size: 20px; }
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-pedal__wert { font-size: 26px; }
html[data-design="boxenfunk"] .tk-anzeige--gross .tk-saeule { width: 46px; }
/* Unter 1600 px Breite (1440er-Laptop) wird es in beiden Pult-Formen eng:
   Saeulen schmaler, grosse Form mit Rad + Lenkwert UNTEREINANDER neben der Zahl. */
@media (max-width: 1599px) {
  html[data-design="boxenfunk"] .tk-saeule { width: 30px; }
  html[data-design="boxenfunk"] .tk-pedal__wert { font-size: 19px; }
  html[data-design="boxenfunk"] .tk-radzeile__kopf { font-size: 15px; padding-right: 16px; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-saeule { width: 36px; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-pedal__wert { font-size: 22px; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "tempo rad" "tempo lenk";
  }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__tempo { align-self: center; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__tempo b { font-size: 60px; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-rad { width: 46px; height: 46px; }
  html[data-design="boxenfunk"] .tk-anzeige--gross .tk-radzeile__lenk { font-size: 17px; }
  html[data-design="boxenfunk"] .tele-kino__tempo { padding: 0 10px; font-size: 15px; }
  html[data-design="boxenfunk"] .tele-tab__zahl { font-size: 17px; }
  html[data-design="boxenfunk"] .tele-tab td,
  html[data-design="boxenfunk"] .tele-tab thead th { padding-left: 6px; padding-right: 6px; }
  html[data-design="boxenfunk"] .tele-tab td:first-child { white-space: normal; }
  html[data-design="boxenfunk"] .tele-tab td.tele-tab__zahl { white-space: normal; min-width: 72px; }
  html[data-design="boxenfunk"] .tk-anzeige:not(.tk-anzeige--gross) .tk-radzeile__tempo {
    flex-direction: column; align-items: flex-start; gap: 0;
  }
  html[data-design="boxenfunk"] .tk-anzeige:not(.tk-anzeige--gross) .tk-radzeile__tempo b { font-size: 56px; }
}
/* Go-Live S4 (06.10.): Handy (<=560 px). Drei Spalten (Bremse | Fahrer | Gas) passten
   in 291 px nicht — die Fahrerbloecke bekamen ~0 px und lagen unter „Bremse" und den
   Prozentwerten (gemessen 412 px). Jetzt: beide Fahrer oben nebeneinander, darunter
   Bremse links und Gas rechts. `.tk-anzeige` vorn, damit auch die grosse Form
   (Kurvenkino, Regeln oben mit `.tk-anzeige--gross`) mitgeht. */
@media (max-width: 560px) {
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "mitte mitte" "brems gas"; padding: 8px; gap: 8px;
  }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult > .tk-mitte { grid-area: mitte; flex-direction: row; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-mitte > .tk-radzeile { flex: 1 1 0; min-width: 0; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult > .tk-pedal--brems { grid-area: brems; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult > .tk-pedal--gas { grid-area: gas; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pedal { justify-content: center; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pedal__paar { flex: 0 1 auto; min-height: 90px; gap: 10px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult__name { font-size: 12px; letter-spacing: .08em; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-saeule { width: 26px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pedal__wert { font-size: 16px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-radzeile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "tempo tempo" "rad lenk";
  }
  html[data-design="boxenfunk"] .tk-anzeige .tk-radzeile__kopf { font-size: 14px; padding-right: 16px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult .tk-radzeile__tempo { flex-direction: row; align-items: baseline; gap: 4px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-pult .tk-radzeile__tempo b { font-size: 40px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-rad { width: 40px; height: 40px; margin-left: 10px; }
  html[data-design="boxenfunk"] .tk-anzeige .tk-radzeile__lenk { font-size: 15px; }
  /* Zoomleiste im Kurvenkino: lag mit 283 von 291 px Breite unten UEBER dem Bild und
     deckte ein Sechstel der Kurve ab — am Handy unter das Bild statt darauf. */
  html[data-design="boxenfunk"] .tk-zoom-leiste { position: static; margin-top: 6px; justify-content: flex-start; }
  html[data-design="boxenfunk"] .tk-zoom-leiste .hg-zoom { flex-wrap: wrap; }
}
html[data-design="boxenfunk"] .tk-info { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tk-info__text {
  background: var(--bf-panel-2); border: 0; border-left: 5px solid var(--bf-gelb); border-radius: 0;
  font-family: var(--bf-text); font-weight: 600; font-size: 14px; color: var(--bf-ink);
}

/* ====================== Kurvenansicht: Kopf, Werkzeuge, Wiedergabe ====================== */
html[data-design="boxenfunk"] .tk-blatt__knopf { font-size: 24px; font-style: normal; padding: 0 12px; }
html[data-design="boxenfunk"] .tk-blatt__wo {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 24px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tk-kopf__badge {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 20px;
  text-transform: uppercase; text-shadow: none; border-radius: 0; padding: 5px 20px 4px 16px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tk-kopf__badge--verloren { background: var(--bf-ref); color: #fff; }
html[data-design="boxenfunk"] .tk-kopf__badge--gewonnen { background: var(--bf-du); color: var(--bf-dunkel); }
html[data-design="boxenfunk"] .tk-szene__label {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 16px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bf-gelb);
  background: none; border: 0; box-shadow: none; text-shadow: none; padding: 0 4px 0 0;
}
html[data-design="boxenfunk"] .tk-3d-wahl button,
html[data-design="boxenfunk"] .tk-werkzeug__3d .hg-zoom button { height: 40px; font-size: 16px; white-space: nowrap; }
/* Go-Live S3 (06.10.): `.tele-view .hg-zoom button` (oben, „Knoepfe allgemein") setzt
   padding 0 fuer die Plus/Minus-Knoepfe — in der 3D-Leiste schnitt die Schraege dann
   den letzten Buchstaben ab („… TRANSPAREN'", „ZURÜCKSETZE!"), bei 1440 wie bei 412 px.
   Gleiche Spezifitaet, steht spaeter → gewinnt. Die Szenenauswahl darf umbrechen,
   damit „2D-/3D-Ansicht" am Telefon nicht mitten im Wort zweizeilig wird. */
html[data-design="boxenfunk"] .tk-werkzeug__3d .hg-zoom button { padding: 0 calc(var(--bf-schraeg) + 6px); }
html[data-design="boxenfunk"] .tk-szene { flex-wrap: wrap; }
html[data-design="boxenfunk"] .tele-kino__reiter { gap: 2px; }
html[data-design="boxenfunk"] .tele-kino__skala {
  font-family: var(--bf-display); font-weight: 700; font-size: 15px; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .tele-kino__skala-band { height: 10px; border-radius: 0; }
html[data-design="boxenfunk"] .tele-kino__bild { border-radius: 0; }
html[data-design="boxenfunk"] .tele-kino__luecke {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 22px;
  text-transform: uppercase; text-shadow: none; color: #fff; background: var(--bf-ref);
  border-radius: 0; padding: 3px 20px 2px 16px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tk-zoom-leiste .hg-zoom button {
  font-size: 15px; background: rgba(18, 23, 34, .92); padding: 0 16px;
}
html[data-design="boxenfunk"] .tele-kino__play {
  border-radius: 0; background: var(--bf-gelb); color: var(--bf-dunkel); font-size: 20px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); min-width: 56px;
}
html[data-design="boxenfunk"] .tele-kino__play[aria-pressed="true"] { background: var(--bf-ref); color: #fff; }
html[data-design="boxenfunk"] .tele-kino__tempo { padding: 0 12px; font-size: 16px; }
html[data-design="boxenfunk"] .tele-kino__tempo-wert,
html[data-design="boxenfunk"] .tele-kino__zeit {
  font-family: var(--bf-display); font-weight: 700; font-size: 16px; color: var(--bf-ink);
  font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tele-kino__regler,
html[data-design="boxenfunk"] .tele-kino__tempo-regler { accent-color: var(--bf-gelb); }
html[data-design="boxenfunk"] .tk-mini__kurve--an { stroke: var(--bf-gelb); filter: none; }

/* ====================== Verlaeufe Gas/Bremse (+ Zoomleiste): TV-Grafik ====================== */
html[data-design="boxenfunk"] .tv-gitter { gap: 6px; }
html[data-design="boxenfunk"] .tv {
  border: 0; border-radius: 0; background: var(--bf-panel-2); padding: 0 12px 4px 0; gap: 2px 8px;
}
html[data-design="boxenfunk"] .tv__kopf { align-items: center; margin-bottom: 2px; }
html[data-design="boxenfunk"] .tv__name {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bf-dunkel); background: #fff;
  padding: 2px 22px 1px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tv__werte { font-family: var(--bf-display); gap: 12px; }
html[data-design="boxenfunk"] .tv__werte i {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tv__m { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tv__y,
html[data-design="boxenfunk"] .tv__x {
  font-family: var(--bf-display); font-weight: 700; font-size: 14px; color: var(--bf-ink-dim);
  font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .tv__y { padding-left: 8px; }
/* 04.10.: Höhe über die Variable (telemetrie.css) — 62 → 150 px, Handy 116. */
html[data-design="boxenfunk"] .tele-kino__ansichtbereich { --tv-h: 150px; }
@media (max-width: 700px) { html[data-design="boxenfunk"] .tele-kino__ansichtbereich { --tv-h: 116px; } }
html[data-design="boxenfunk"] .tv-leiste { padding-right: 12px; }
html[data-design="boxenfunk"] .tele-view .tv-zoom button { width: auto; padding: 0 18px; font-size: 16px; height: 36px; }
html[data-design="boxenfunk"] .tele-view .tv-zoom button[data-k="rein"],
html[data-design="boxenfunk"] .tele-view .tv-zoom button[data-k="raus"] { font-size: 22px; min-width: 48px; padding: 0 12px; }
@media (pointer: coarse) { html[data-design="boxenfunk"] .tele-view .tv-zoom button { height: var(--tap); } }
html[data-design="boxenfunk"] .tv-leiste__lage { font-family: var(--bf-display); font-size: 17px; }
html[data-design="boxenfunk"] .tv-leiste__lage b {
  font-weight: 800; font-style: italic; color: var(--bf-dunkel); background: #fff; letter-spacing: .04em;
  padding: 2px 18px 1px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tv-leiste__lage i { font-weight: 800; font-style: italic; font-variant-numeric: tabular-nums; }
html[data-design="boxenfunk"] .tv__netz { display: none; }
html[data-design="boxenfunk"] .tv__null {
  display: inline; stroke: rgba(255, 255, 255, .6); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
html[data-design="boxenfunk"] .tv__flaeche { display: inline; stroke: none; }
html[data-design="boxenfunk"] .tv__flaeche--du { fill: rgba(0, 229, 255, .2); }
html[data-design="boxenfunk"] .tv__flaeche--ref { fill: rgba(255, 46, 151, .2); }
html[data-design="boxenfunk"] .tv__zug { stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
html[data-design="boxenfunk"] .tv__zug--ref { stroke-dasharray: none; opacity: 1; stroke-width: 3; }
html[data-design="boxenfunk"] .tv__fokus { fill: rgba(255, 255, 255, .08); stroke: none; }
html[data-design="boxenfunk"] .tv__zeiger { stroke: #fff; stroke-width: 2; stroke-dasharray: none; opacity: 1; }

/* ====================== Fahrtipps + Rest der Seite ====================== */
html[data-design="boxenfunk"] .tf__reiter { border-bottom: 3px solid var(--bf-knopf); gap: 2px; }
html[data-design="boxenfunk"] .tt-fokus,
html[data-design="boxenfunk"] .tt-grenzen,
html[data-design="boxenfunk"] .tr-frage { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tt-fokus b { font-family: var(--bf-display); font-weight: 800; font-size: 17px; color: var(--bf-ink); }
html[data-design="boxenfunk"] .tt-haupt { border: 0; border-radius: 0; padding: 12px 18px; }
html[data-design="boxenfunk"] .tt-haupt b {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 28px; text-transform: uppercase;
}
html[data-design="boxenfunk"] .tt-haupt span { font-size: 16px; color: var(--bf-ink); }
html[data-design="boxenfunk"] .tt-haupt--verloren { background: linear-gradient(90deg, rgba(255, 46, 151, .35), rgba(255, 46, 151, .08)); box-shadow: inset 8px 0 0 var(--bf-ref); }
html[data-design="boxenfunk"] .tt-haupt--gewonnen { background: linear-gradient(90deg, rgba(0, 229, 255, .3), rgba(0, 229, 255, .06)); box-shadow: inset 8px 0 0 var(--bf-du); }
html[data-design="boxenfunk"] .tt-haupt--verloren b,
html[data-design="boxenfunk"] .tt-haupt--gewonnen b { color: #fff; }
html[data-design="boxenfunk"] .tt-karte {
  border: 0; border-radius: 0; background: var(--bf-panel-2); box-shadow: inset 0 4px 0 var(--bf-knopf-hell);
}
html[data-design="boxenfunk"] .tt-karte__titel {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 20px; text-transform: uppercase;
}
html[data-design="boxenfunk"] .tt-karte__satz { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tt-karte__beleg { font-family: var(--bf-display); font-weight: 800; font-size: 17px; color: var(--bf-du); }
html[data-design="boxenfunk"] .tr-tabelle { font-size: 15px; }
html[data-design="boxenfunk"] .tr-tabelle th { font-family: var(--bf-display); font-weight: 800; font-size: 14px; text-transform: uppercase; background: var(--bf-knopf); color: var(--bf-ink); border: 0; }
html[data-design="boxenfunk"] .tr-zahl { font-family: var(--bf-display); font-weight: 800; font-size: 18px; }
html[data-design="boxenfunk"] .tele-fach > summary {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 19px;
  text-transform: uppercase; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tele-fach > summary::before { color: var(--bf-gelb); }
html[data-design="boxenfunk"] .tele-spur__titel {
  font-family: var(--bf-display); font-weight: 800; font-size: 16px; letter-spacing: .04em; color: var(--bf-ink);
}
html[data-design="boxenfunk"] .tele-spur__leg { font-size: 14px; }
html[data-design="boxenfunk"] .tele-spur__satz { font-size: 15px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-spur__skala,
html[data-design="boxenfunk"] .tele-spur__achse { font-family: var(--bf-display); font-weight: 700; font-size: 13px; }
html[data-design="boxenfunk"] .tele-text__summe,
html[data-design="boxenfunk"] .tele-text__saetze li { font-size: 15px; color: var(--bf-ink-dim); }

@media (prefers-reduced-motion: no-preference) {
  html[data-design="boxenfunk"] .tele-kino__reiter-knopf,
  html[data-design="boxenfunk"] .tele-kino__tempo { transition: background .12s, color .12s; }
}
/* Schriftboden 13 px auch für den Zusatz in der Fahrstil-Tabelle
   („(weniger = ruhiger)", `_tele_text.js:33`) — stand bei 12,5 px (messung.py 04.10.). */
html[data-design="boxenfunk"] .tele-view td small { font-size: 13px; }