/* Boxenfunk — Ebene 6: Bausteine der uebrigen Seiten (Plan 2026-10-01, Schritt 6).
   Server-Statistik (.stat-hero, .metric, .kpod, .king-row, .fleet-row, .class-split),
   Autos (.cbox) + Auto-Detail (.cd-head, .cd-headrow), Knoepfe/Pillen (.btn, .pill,
   .rec-badge, .role-chip), Profil-Reiter (.reiter/.rtab), Kennzahl-Kaesten (.stat-card,
   .zahl, .pcard, .auto). Nur unter html[data-design="boxenfunk"]; Abstaende/Raster nur in
   eigenen @media-Bloecken (`html[data-design] .x` schlaegt mobile.css).
   Sprache wie leaderboard.css: Vollflaechen mit angeschnittenen Ecken, Etiketten in
   Barlow Condensed gesperrt, Werte kursiv-kondensiert weiss, Medaillen Gold/Silber/Bronze,
   Bereichsfarbe (--bereich) fuer Kanten. Kursiv nur mit Barlow 600–800 (echte Schnitte). */

/* ---------- Schriftboden 13 px (Heute 10–12,5 px) — nur die Groesse ---------- */
html[data-design="boxenfunk"] :where(
  .cbox__spd, .cbox__cap, .cbox__date, .cd-headrow, .stat-hero__eyebrow, .metric__k, .king-row__km small,
  .king-row__sub, .fleet-row__sub, .car-row__holder, .car-row__count, .car-row__rank small, .stat-card__k,
  .stat-card__note, .rec-badge, .role-chip, .rtab, .rtab small, .auto__wo, .auto__leer, .auto__hinweis,
  .pcard__k, .profile-car__cap, .back-link, .class-split__leg, .zahl span.note
) { font-size: 13px; }

/* ---------- Gemeinsame Flaechen ---------- */
html[data-design="boxenfunk"] :is(.stat-hero, .kpod, .cbox, .cd-head, .stat-card, .pcard, .zahl, .auto) {
  border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; background: var(--bx-flaeche);
}
html[data-design="boxenfunk"] :is(.stat-card, .kpod, .cbox)::after { display: none; }
html[data-design="boxenfunk"] :is(.king-row, .fleet-row, .car-row) {
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .045);
}
html[data-design="boxenfunk"] :is(.king-row, .fleet-row, .car-row):hover { transform: none; background: rgba(255, 255, 255, .09); }

/* Etiketten = Barlow gesperrt, Werte = Barlow kursiv. */
html[data-design="boxenfunk"] :is(.stat-hero__eyebrow, .metric__k, .stat-card__k, .cbox__cap, .pcard__k, .cd-headrow,
  .profile-car__cap, .auto__titel) {
  font-family: var(--bf-display); font-weight: 700; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] :is(.stat-hero__km, .metric__v, .stat-card__v, .kpod__km, .king-row__km, .fleet-row__km,
  .car-row__time, .cbox__time) {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: #fff;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
  filter: none; text-shadow: none;
}
/* Zusammengesetzt = eigene Regel (in der :is()-Liste hoebe es die Spezifitaet aller an). */
html[data-design="boxenfunk"] .zahl b,
html[data-design="boxenfunk"] .auto__daten b {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: #fff;
}
html[data-design="boxenfunk"] :is(.stat-hero__km small, .metric__v small, .stat-card__v small, .king-row__km small, .cbox__spd) {
  font-family: var(--bf-display); font-weight: 700; font-style: normal; color: var(--bf-ink-dim); -webkit-text-fill-color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] :is(.stat-card__note, .fleet-row__sub, .king-row__sub, .cbox__date, .car-row__holder, .car-row__count) {
  font-family: var(--bf-display); font-weight: 600; color: #8f9ab0;
}

/* ---------- Server-Statistik: Kopf ---------- */
html[data-design="boxenfunk"] .stat-hero { box-shadow: inset 6px 0 0 var(--bereich, var(--bf-gelb)); }
html[data-design="boxenfunk"] .stat-hero__eyebrow { color: var(--bereich, var(--bf-ink-dim)); }
html[data-design="boxenfunk"] .stat-hero__fact { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .stat-hero__fact b { color: #fff; }
html[data-design="boxenfunk"] .metric { border: 0; border-radius: 0; background: var(--bf-panel-2); box-shadow: inset 4px 0 0 var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .metric--accent { background: var(--bf-panel-2); box-shadow: inset 4px 0 0 var(--bereich, var(--bf-gut)); }
html[data-design="boxenfunk"] .metric--accent .metric__v { color: var(--bereich, var(--bf-gut)); }
html[data-design="boxenfunk"] .stat-note {
  border: 0; border-radius: 0; background: var(--bf-panel); box-shadow: inset 4px 0 0 var(--bereich, var(--bf-gelb));
  font-family: var(--bf-text); color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .stat-note b { color: #fff; }

/* Kilometer-Podest: Medaillen-Kante oben, Wert in Medaillenfarbe. */
html[data-design="boxenfunk"] .kpod { --bx-medaille: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .kpod--1 { --bx-medaille: var(--gold); }
html[data-design="boxenfunk"] .kpod--2 { --bx-medaille: var(--silver); }
html[data-design="boxenfunk"] .kpod--3 { --bx-medaille: var(--bronze); }
html[data-design="boxenfunk"] .kpod::before { height: 6px; background: var(--bx-medaille); }
html[data-design="boxenfunk"] .kpod:hover { transform: none; filter: brightness(1.12); box-shadow: none; }
html[data-design="boxenfunk"] .kpod__medal {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .08em; color: var(--bx-medaille);
}
html[data-design="boxenfunk"] .kpod__name { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .kpod__km { color: var(--bx-medaille); }
html[data-design="boxenfunk"] .kpod__sub { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }

/* Plaetze 4–10 + Flotte: Streifen wie der Zeitenturm. */
html[data-design="boxenfunk"] :is(.king-row__rank, .fleet-row__rank, .car-row__rank) {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] :is(.king-row__name, .fleet-row__name, .car-row__name) {
  font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
html[data-design="boxenfunk"] .king-row:hover .king-row__name { color: #fff; }
html[data-design="boxenfunk"] :is(.fleet-row, .car-row) { box-shadow: inset 5px 0 0 var(--rowc, var(--bf-knopf-hell)); }
html[data-design="boxenfunk"] :is(.fleet-row:hover .fleet-row__name, .fleet-row:hover .fleet-row__go, .car-row:hover .car-row__name, .car-row:hover .car-row__go) { color: #fff; }
html[data-design="boxenfunk"] :is(.fleet-row__go, .car-row__go) { font-family: var(--bf-display); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .fleet-row__bar { border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .fleet-row__bar > i { border-radius: 0; box-shadow: none; background: var(--rowc, var(--bf-gelb)); }
html[data-design="boxenfunk"] .class-split__bar { border: 0; border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .class-split__leg { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .class-split__leg i { border-radius: 0; transform: skewX(-12deg); }

/* ---------- Autos: Kacheln ---------- */
html[data-design="boxenfunk"] .cbox {
  background:
    linear-gradient(var(--rowc, var(--bf-knopf)), var(--rowc, var(--bf-knopf))) top left / 100% 4px no-repeat,
    var(--bx-flaeche);
}
html[data-design="boxenfunk"] .cbox:hover { transform: none; filter: brightness(1.12); }
html[data-design="boxenfunk"] .cbox__name { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; }
html[data-design="boxenfunk"] .cbox__rec { border-top-color: rgba(255, 255, 255, .08); }
html[data-design="boxenfunk"] .cbox__holder { border-radius: 0; font-family: var(--bf-display); font-weight: 700; }
html[data-design="boxenfunk"] .cbox__holder:hover { color: #fff; background: var(--bf-knopf); }

/* ---------- Auto-Detail ---------- */
html[data-design="boxenfunk"] .cd-head { box-shadow: inset 6px 0 0 var(--rowc, var(--bf-knopf-hell)); }
html[data-design="boxenfunk"] .cd-head__id h1 { font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .01em; }
html[data-design="boxenfunk"] .cd-headrow { background: var(--bf-knopf); color: var(--bf-ink); box-shadow: inset 0 -3px 0 var(--bereich, var(--bf-gelb)); }
html[data-design="boxenfunk"] .cd-date { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .back-link { font-family: var(--bf-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .back-link:hover { color: var(--bf-gelb); }

/* ---------- Kennzahl-Karten + Profil-Autos ---------- */
html[data-design="boxenfunk"] .stat-card { box-shadow: inset 4px 0 0 var(--accent, var(--bf-knopf-hell)); }
html[data-design="boxenfunk"] .zahl { box-shadow: inset 4px 0 0 var(--ak, var(--bereich, var(--bf-knopf-hell))); }
html[data-design="boxenfunk"] .zahl span.note { font-family: var(--bf-text); font-size: 13px; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .auto--ram { box-shadow: inset 0 4px 0 var(--bx-b-ram); }
html[data-design="boxenfunk"] .auto--tourist { box-shadow: inset 0 4px 0 var(--bx-b-lizenz); }
html[data-design="boxenfunk"] .auto--ram .auto__titel { color: var(--bx-b-ram); }
html[data-design="boxenfunk"] .auto--tourist .auto__titel { color: var(--bx-b-lizenz); }
html[data-design="boxenfunk"] .auto__name { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; }
html[data-design="boxenfunk"] .auto__daten { border-top-color: rgba(255, 255, 255, .08); }
html[data-design="boxenfunk"] .auto__leer { border: 0; border-radius: 0; background: var(--bf-panel-2); color: var(--bf-ink-dim); }
/* Heute kursiv in Titillium — im Boxenfunk aufrecht (Kursiv nur mit echtem Schnitt). */
html[data-design="boxenfunk"] .auto__hinweis { font-style: normal; color: #8f9ab0; }
html[data-design="boxenfunk"] .pcard__tile { border: 0; border-radius: 0; background: var(--bf-panel-2); }

/* ---------- Knoepfe, Pillen, Abzeichen ---------- */
html[data-design="boxenfunk"] .btn {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bf-ink); border: 0; border-radius: 0; box-shadow: none; background: var(--bf-knopf); clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .btn:hover { transform: none; box-shadow: none; color: #fff; background: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .btn--primary { color: var(--bf-dunkel); background: var(--bf-gelb); }
html[data-design="boxenfunk"] .btn--primary:hover { color: var(--bf-dunkel); background: #fff; }
html[data-design="boxenfunk"] .btn--ghost { background: transparent; color: var(--bf-ink-dim); box-shadow: inset 0 0 0 2px var(--bf-knopf); clip-path: none; }
html[data-design="boxenfunk"] .btn[aria-pressed="true"] { color: var(--bf-dunkel); background: var(--bf-gelb); }
html[data-design="boxenfunk"] .pill {
  font-family: var(--bf-display); font-weight: 700; border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink);
}
html[data-design="boxenfunk"] :is(.pill--mod, .pill--ok) { background: none; }
html[data-design="boxenfunk"] .pill--mod { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber); }
html[data-design="boxenfunk"] .pill--ok { box-shadow: inset 0 0 0 2px var(--bf-gut); color: var(--bf-gut); }
html[data-design="boxenfunk"] .rec-badge {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .03em;
  border-radius: 0; color: var(--bf-dunkel); background: var(--gold); box-shadow: none;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .rec-badge--gt3 { background: var(--gt3); }
html[data-design="boxenfunk"] .rec-badge--gte { background: var(--gte); }
html[data-design="boxenfunk"] .rec-badge--gt4 { background: var(--gt4); }
html[data-design="boxenfunk"] .role-chip { font-family: var(--bf-display); font-weight: 700; border: 0; border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .role-chip__dot { border-radius: 0; box-shadow: none; transform: skewX(-12deg); }

/* ---------- Profil-Reiter: Bauchbinden-Leiste ---------- */
html[data-design="boxenfunk"] .reiter { background: rgba(7, 9, 14, .96); backdrop-filter: none; border-bottom: 3px solid var(--bf-knopf); }
html[data-design="boxenfunk"] .rtab {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .05em; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .rtab:hover { color: #fff; }
html[data-design="boxenfunk"] .rtab[aria-selected="true"] { color: var(--bf-dunkel); background: var(--bf-gelb); border-bottom-color: transparent; }
html[data-design="boxenfunk"] .rtab small { font-style: normal; color: inherit; opacity: .75; }

/* Datumsfelder der Profil-Autos tragen inline `font-family: var(--font-ui)` (Titillium) —
   Titillium hat kursiv nur 600/700, die Werte-Regel oben will 800: aufrecht statt Kunstschnitt. */
html[data-design="boxenfunk"] .auto__daten b[style] { font-style: normal; font-weight: 700; }
/* Wettersymbol (Emoji) steht in kursiven Zeilen — Emoji haben keinen Kursivschnitt. */
html[data-design="boxenfunk"] .wetter__icon { font-style: normal; }