/* Boxenfunk — Ebene 3: Leaderboard-Ansicht (Plan 2026-10-01, Schritt 2).
   Kopf (.hero, Kennzahl-Chips), Podest (.pod), Filter (.tabs/.tab, .preset, Auswahl,
   Suche, Zeitraum), Tabelle (.lb) inkl. Handy-Fassung (_lb_mobile.js, mobile.css)
   und Knopf „Runden vergleichen". Gilt ueberall, wo diese Bausteine stehen (Monat,
   Jahr, RaM-/Academy-Training, Eventserver). Nur unter
   html[data-design="boxenfunk"]; Groessen/Abstaende, die mobile.css auch setzt, nur
   in eigenen @media-Bloecken (`html[data-design] .x` schlaegt mobile.css).
   Filter-Bausteine stehen in boxenfunk/filter.css.
   Bild: TV-Zeitenturm — Zeilen als Streifen, Platz als weisses Schild, Zeiten
   kursiv-kondensiert, Bestzeit violett (TV-Konvention „schnellste"), Auswahl Signalgelb. */

/* ---------- Schriftboden 13 px (Heute: 9–12,5 px) — nur die Groesse ---------- */
html[data-design="boxenfunk"] :where(
  .hero__eyebrow, .chip__k, .controls__label, .lb__h, .lb__h .arrow, .date-exact, .driver-cell__sub,
  .mono-badge, .tag-hrc, .pod__lap, .pod__lap b, .pod__lap__i, .section-head .pill,
  .speed-val small, .avatar--sm, .avatar--xs, .secchip, .secchip b, .month-head__pick > span, .tele-btn
) { font-size: 13px; }
@media (max-width: 767px) {
  html[data-design="boxenfunk"] :is(.lb__row .avatar, .lb__row .avatar-wrap .avatar, .pod .avatar) { font-size: 13px; }
  /* mobile.css setzt hier 9-9,5 px mit (0,2,0) — :where() oben reicht dafuer nicht. */
  html[data-design="boxenfunk"] .lb__row :is(.mono-badge, .tag-hrc) { font-size: 13px; }
}

/* ---------- Seitenkopf ---------- */
html[data-design="boxenfunk"] .hero__eyebrow {
  font-family: var(--bf-display); font-weight: 700; font-style: italic; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bereich, var(--bf-ink-dim));
}
html[data-design="boxenfunk"] .hero__title {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em;
}
html[data-design="boxenfunk"] .hero__title .grad-text { filter: none; }
html[data-design="boxenfunk"] .hero__sub { font-family: var(--bf-text); color: var(--bf-ink-dim); }

/* Kennzahlen = TV-Einblendung: Schild mit Etikett links, Wert gross kursiv. */
html[data-design="boxenfunk"] .chip {
  border: 0; border-radius: 0; backdrop-filter: none;
  background: linear-gradient(var(--bf-knopf), var(--bf-knopf)) left / 5px 100% no-repeat, var(--bf-panel);
}
html[data-design="boxenfunk"] .chip__k {
  font-family: var(--bf-display); font-weight: 700; letter-spacing: .1em; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .chip__v {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
html[data-design="boxenfunk"] .chip__v.accent { color: var(--bereich, var(--bf-gelb)); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .chip { padding: 8px 16px 8px 18px; }
  html[data-design="boxenfunk"] .chip__v { font-size: 19px; }
}

/* Abschnittskopf: gelber Schraeg-Tab ab Kante (wie Telemetrie-Karten). */
html[data-design="boxenfunk"] .section-head h2 {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .02em;
  color: var(--bf-dunkel); background: var(--bereich, var(--bf-gelb));
  padding: 3px 26px 2px 14px; clip-path: var(--bx-tab);
}
html[data-design="boxenfunk"] .section-head .pill {
  font-family: var(--bf-display); font-weight: 700; border: 0; border-radius: 0;
  background: var(--bf-knopf); color: var(--bf-ink); font-size: 13px;  /* components.css 12 px mit (0,2,0) */
}

/* ---------- Podest: drei Vollflaechen, Medaillen-Kante oben, Zeitkasten weiss ---------- */
html[data-design="boxenfunk"] .pod {
  border: 0; border-radius: 0; backdrop-filter: none; box-shadow: none;
  background: var(--bx-flaeche);
}
html[data-design="boxenfunk"] .pod::before {
  inset: 0 0 auto 0; height: 6px; opacity: 1; background: var(--bx-medaille);
}
html[data-design="boxenfunk"] .pod--1 { --bx-medaille: var(--gold); box-shadow: none; }
html[data-design="boxenfunk"] .pod--2 { --bx-medaille: var(--silver); }
html[data-design="boxenfunk"] .pod--3 { --bx-medaille: var(--bronze); }
html[data-design="boxenfunk"] .pod--1::before,
html[data-design="boxenfunk"] .pod--2::before,
html[data-design="boxenfunk"] .pod--3::before { background: var(--bx-medaille); }
html[data-design="boxenfunk"] .pod:hover { border-color: transparent; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); }
html[data-design="boxenfunk"] .pod:hover .pod__driver { color: #fff; }
/* Platz als Schraeg-Schild in Medaillenfarbe. */
html[data-design="boxenfunk"] .pod__rank {
  align-self: flex-start; font-family: var(--bf-display); font-weight: 800; font-style: italic;
  color: var(--bf-dunkel); background: var(--bx-medaille); text-shadow: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
html[data-design="boxenfunk"] :is(.pod--1, .pod--2, .pod--3) .pod__rank { color: var(--bf-dunkel); text-shadow: none; }
html[data-design="boxenfunk"] .pod__crown { filter: none; }
html[data-design="boxenfunk"] .pod__driver {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em;
}
html[data-design="boxenfunk"] .pod__car { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .pod__overlay {
  background: rgba(7, 9, 14, .82); border-top: 0; border-radius: 0;
  box-shadow: inset 0 3px 0 var(--bx-medaille);
}
html[data-design="boxenfunk"] .pod__time {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: 0;
  font-variant-numeric: tabular-nums; text-shadow: none; color: #fff;
}
html[data-design="boxenfunk"] .pod--1 .pod__time__v {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold);
}
html[data-design="boxenfunk"] .pod__meta { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); text-shadow: none; }
html[data-design="boxenfunk"] .pod__meta b { color: #fff; }
html[data-design="boxenfunk"] .pod__lap {
  border: 0; border-radius: 0; background: rgba(192, 139, 255, .14); box-shadow: inset 3px 0 0 #c08bff;
  color: var(--bf-ink-dim); font-family: var(--bf-text);
}
html[data-design="boxenfunk"] .pod__lap b { color: #c08bff; font-family: var(--bf-display); font-weight: 800; font-style: italic; }
html[data-design="boxenfunk"] .pod__lap__i { filter: none; }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .pod__rank { font-size: 46px; line-height: 1; padding: 2px 22px 0 12px; margin: -4px 0 0 -18px; }
  html[data-design="boxenfunk"] .pod__driver { font-size: 24px; }
  html[data-design="boxenfunk"] .pod__time { font-size: 40px; }
}
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .pod__rank { padding: 1px 12px 0 6px; margin-left: -6px; }
  html[data-design="boxenfunk"] .pod__overlay { background: none; box-shadow: none; border-top: 2px solid var(--bx-medaille); }
  html[data-design="boxenfunk"] .pod__time { font-size: 17px; }
}

/* ---------- Tabelle: TV-Zeitenturm ---------- */
html[data-design="boxenfunk"] .lb { border: 0; border-radius: 0; background: none; backdrop-filter: none; }
html[data-design="boxenfunk"] .lb__head {
  background: var(--bf-knopf); border-bottom: 0;
  box-shadow: inset 0 -3px 0 var(--bereich, var(--bf-gelb));
}
html[data-design="boxenfunk"] .lb__h {
  font-family: var(--bf-display); font-weight: 800; letter-spacing: .1em; color: var(--bf-ink);
}
html[data-design="boxenfunk"] :is(.lb__h.sorted, .lb__h.sortable:hover) { color: var(--bf-gelb); }
html[data-design="boxenfunk"] .lb__h .arrow { font-size: 13px; }  /* components.css 9 px mit (0,2,0) */
html[data-design="boxenfunk"] .lb__row {
  background: rgba(255, 255, 255, .045); border-bottom: 3px solid var(--bf-bg);
}
html[data-design="boxenfunk"] .lb__row:last-child { border-bottom: 0; }
html[data-design="boxenfunk"] .lb__row:hover { background: rgba(255, 255, 255, .09); box-shadow: none; }
html[data-design="boxenfunk"] .lb__row::after { display: none; }
html[data-design="boxenfunk"] .lb__row::before { color: var(--bf-gelb); }
html[data-design="boxenfunk"] .lb__row:hover .driver-cell__name { color: #fff; }
/* Platz: weisses Schild (Platz 1-3 in Medaillenfarbe), am Handy nur Ziffer. */
html[data-design="boxenfunk"] .pos {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; color: var(--bf-ink); text-shadow: none;
  font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .lb__body > .lb__row:nth-child(1) .pos { --bx-medaille: var(--gold); }
html[data-design="boxenfunk"] .lb__body > .lb__row:nth-child(2) .pos { --bx-medaille: var(--silver); }
html[data-design="boxenfunk"] .lb__body > .lb__row:nth-child(3) .pos { --bx-medaille: var(--bronze); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .pos {
    justify-self: start; min-width: 40px; padding: 3px 12px 2px 8px; text-align: center;
    color: var(--bf-dunkel); background: var(--bx-medaille, #fff);
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  }
}
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .lb__body > .lb__row:nth-child(-n+3) .pos { color: var(--bx-medaille); }
}
html[data-design="boxenfunk"] .driver-cell__name {
  font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
html[data-design="boxenfunk"] .driver-cell__sub { color: #8f9ab0; }
html[data-design="boxenfunk"] .month-head__pick > span { font-family: var(--bf-display); font-weight: 700; letter-spacing: .12em; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .month-head__winner b { color: var(--gold); }
html[data-design="boxenfunk"] .month-head__dot { border-radius: 0; box-shadow: none; background: var(--bf-gut); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .driver-cell__name { font-size: 18px; letter-spacing: .01em; }
}
html[data-design="boxenfunk"] .car-cell__name { font-family: var(--bf-text); color: var(--bf-ink-dim); }
/* Klassen-Kennung als Teamfarben-Schild (dunkle Schrift auf Klassenfarbe). */
html[data-design="boxenfunk"] .mono-badge {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .03em;
  border-radius: 0; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .mono-badge[data-class="GT3"] { color: var(--bf-dunkel); background: var(--gt3); }
html[data-design="boxenfunk"] .mono-badge[data-class="GTE"] { color: var(--bf-dunkel); background: var(--gte); }
html[data-design="boxenfunk"] .mono-badge[data-class="GT4"] { color: var(--bf-dunkel); background: var(--gt4); }
html[data-design="boxenfunk"] .tag-hrc {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .05em;
  border-radius: 0; color: var(--bf-dunkel); background: var(--bf-gut);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .lb__row .mono-badge { padding: 0 6px; }
  html[data-design="boxenfunk"] .lb__row .tag-hrc { padding: 0 6px; }
}
html[data-design="boxenfunk"] .time {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: #fff;
}
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .time { font-size: 22px; }
}
/* Bestzeit/schnellster Sektor: TV-Violett, flach (kein Verlauf im Text). */
html[data-design="boxenfunk"] :is(.time--lead, .sector--best) {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #c08bff;
}
html[data-design="boxenfunk"] .sector { font-family: var(--bf-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .gap { font-family: var(--bf-display); font-weight: 700; font-style: italic; color: #ffb4bd; font-variant-numeric: tabular-nums; }
html[data-design="boxenfunk"] .gap--zero { color: var(--bf-gut); }
html[data-design="boxenfunk"] .laps { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .date-rel { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .date-exact { color: #8f9ab0; }
html[data-design="boxenfunk"] .speed-val { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: var(--bf-ink); }
html[data-design="boxenfunk"] .speed-bar { border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .speed-bar > i { background: var(--bereich, var(--bf-gelb)); box-shadow: none; }
html[data-design="boxenfunk"] .tele-btn {
  border-radius: 0; border: 0; color: var(--bf-dunkel); background: var(--bf-gelb); box-shadow: none;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .tele-btn:hover { transform: none; box-shadow: none; background: #fff; }
/* Stoppuhr groesser + Wort (Marc 02.10.): TV-Schild, Schrift wie die Zeiten. Groessen nur
   in eigenen @media — `html[data-design] .x` schluege sonst mobile.css (40 px am Handy). */
html[data-design="boxenfunk"] .tele-btn__t { font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: .02em; }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .tele-btn { font-size: 16px; }
}
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .lb__row .tele-btn { font-size: 19px; }
}
html[data-design="boxenfunk"] .lb__legende { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tele-btn--legende { font-size: 13px; }
html[data-design="boxenfunk"] .lb__empty { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .lb__more {
  border-top: 0; background: var(--bf-panel); color: var(--bf-gelb); box-shadow: inset 0 3px 0 var(--bf-knopf);
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em;
}

/* Handy: Sektor-Knoepfe kantig. */
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .secchip { border-radius: 0; font-family: var(--bf-display); }
  html[data-design="boxenfunk"] .secchip--best { box-shadow: none; color: #c08bff; }
}

/* ---------- Wetter (Kennzeichen an der Zeit, Umschalter Trocken/Regen) ---------- */
html[data-design="boxenfunk"] .wetter__temps { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .ws-wolke { fill: var(--bf-panel-2); stroke: #fff; }
html[data-design="boxenfunk"] .ws-wolke2 { stroke: rgba(255, 255, 255, .55); }
html[data-design="boxenfunk"] .wsym--unbekannt { color: #8f9ab0; }
html[data-design="boxenfunk"] .wetter__marke.wsym--unbekannt { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .time-cell:has(.wetter__marke) { white-space: nowrap; }
/* Auf dem gelben (aktiven) Reiter: Wolke dunkel umranden, sonst verschwindet sie. */
html[data-design="boxenfunk"] .tab.active .ws-wolke { fill: #fff; stroke: var(--bf-dunkel); }
html[data-design="boxenfunk"] .tab.active .ws-sonne { fill: #ff8a00; stroke: var(--bf-dunkel); }
html[data-design="boxenfunk"] .tab.active .ws-tropfen { fill: #0a6fd8; stroke: #0a6fd8; }
html[data-design="boxenfunk"] .tab.active .wsym--unbekannt { color: var(--bf-dunkel); }