/* Boxenfunk — Ebene 5: RaM-Hub + Driver Academy (Plan 2026-10-01, Schritt 4).
   Reiter (.ramtabs), Meisterschaft (Podest, Kreuztabelle .champ-mx, Handy-Liste .champ-row),
   Rennliste (.racecard + Wettersymbol), Rennergebnis (.lb--race, Abzeichen, Strafen,
   Erklaerzeile/-blase), Blaettern. Feste Farben aus css/ram.css werden nur hier im
   Boxenfunk-Scope ueberschrieben. Bereichsakzent `--bereich` kommt aus grund.css
   (<html data-bereich> = ram/academy). Abstaende nur in eigenen @media-Bloecken.
   Signal: Platz-Schild weiss/Medaille, schnellste Runde violett, Strafe orange. */

html[data-design="boxenfunk"] { --bx-strafe: #ff9f1c; --bx-violett: #c08bff; }

/* ---------- Schriftboden 13 px (Heute 9,5–12,5 px) ---------- */
html[data-design="boxenfunk"] :where(
  .ramtab__bau, .champ-pod__medal, .champ-pod__facts, .champ-mx__av, .champ-legend, .champ-legend span,
  .champ-note, .champ-note span, .racecard__no, .racecard__num small, .racecard__p, .racecard__pm, .racecard__pn,
  .racecard__meta, .racecard__ort, .racecard__car, .racecard__av, .racenav, .rerkl, .rstatus, .gap--runden, .wip__badge
) { font-size: 13px; }
/* Staerker gebunden in ram.css: (0,2,0) bzw. spaeter stehende Regeln. */
html[data-design="boxenfunk"] .ramtabs--sub .ramtab { font-size: 14px; }
html[data-design="boxenfunk"] :is(.gain--mini, .rbadge) { font-size: 13px; }
html[data-design="boxenfunk"] .titel-chip { font-size: max(13px, .82em); filter: none; }

/* ---------- Reiter ---------- */
html[data-design="boxenfunk"] .ramtab {
  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"] .ramtab:hover { color: #fff; background: var(--bf-knopf-hell); transform: none; }
html[data-design="boxenfunk"] .ramtab.active { color: var(--bf-dunkel); background: var(--bereich, var(--bf-gelb)); box-shadow: none; }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .ramtabs { gap: 3px; }
  html[data-design="boxenfunk"] .ramtab { font-size: 17px; padding: 8px 22px; }
}
/* Unterreiter: leiser — flach, Kante unten in Bereichsfarbe, keine Schraege. */
html[data-design="boxenfunk"] .ramtabs--sub .ramtab {
  font-family: var(--bf-display); font-weight: 700; font-style: normal; clip-path: none;
  color: var(--bf-ink-dim); background: rgba(255, 255, 255, .04);
}
html[data-design="boxenfunk"] .ramtabs--sub .ramtab.active {
  color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 -3px 0 var(--bereich, var(--bf-gelb));
}
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .ramtabs--sub .ramtab { padding: 6px 16px; }
}
html[data-design="boxenfunk"] .ramtab__bau { border-radius: 0; font-family: var(--bf-display); }
html[data-design="boxenfunk"] .ram-logo { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }

/* ---------- Meisterschaft: Podest-Karten ---------- */
html[data-design="boxenfunk"] .champ-pod { border: 0; border-radius: 0; background: var(--bx-flaeche); }
html[data-design="boxenfunk"] .champ-pod::before { height: 6px; }
html[data-design="boxenfunk"] .champ-pod__medal { font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .1em; }
html[data-design="boxenfunk"] .champ-pod__name { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; }
html[data-design="boxenfunk"] .champ-pod__pts { font-family: var(--bf-display); font-weight: 800; font-style: italic; }
html[data-design="boxenfunk"] .champ-pod__facts { font-family: var(--bf-text); }

/* ---------- Meisterschaft: Kreuztabelle als TV-Ergebnistafel ---------- */
html[data-design="boxenfunk"] .champ-mx-wrap { border: 0; border-radius: 0; background: none; }
html[data-design="boxenfunk"] .champ-mx { font-family: var(--bf-display); font-weight: 700; }
html[data-design="boxenfunk"] .champ-mx thead th {
  background: var(--bf-knopf); color: var(--bf-ink); font-weight: 800; letter-spacing: .08em;
  border-bottom: 0; box-shadow: inset 0 -3px 0 var(--bereich, var(--bf-gelb));
}
/* Deckende Flaechen (Sticky-Spalten muessen deckend sein, ram.css:301). */
html[data-design="boxenfunk"] .champ-mx td { background: #10141e; border-bottom: 2px solid var(--bf-bg); }
html[data-design="boxenfunk"] .champ-mx tbody tr:nth-child(even) td { background: #151b28; }
html[data-design="boxenfunk"] .champ-mx tbody .champ-mx__row:hover td { background: #1e2637; }
html[data-design="boxenfunk"] .champ-mx__c { color: var(--bf-ink); }
html[data-design="boxenfunk"] .champ-mx tbody .champ-mx__pos { font-weight: 800; font-style: italic; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .champ-mx tbody tr:nth-child(1) .champ-mx__pos { color: var(--gold); }
html[data-design="boxenfunk"] .champ-mx tbody tr:nth-child(2) .champ-mx__pos { color: var(--silver); }
html[data-design="boxenfunk"] .champ-mx tbody tr:nth-child(3) .champ-mx__pos { color: var(--bronze); }
html[data-design="boxenfunk"] .champ-mx__name {
  font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  border-right: 3px solid var(--bf-bg);
}
html[data-design="boxenfunk"] .champ-mx__row--link:hover .champ-mx__name { color: #fff; }
html[data-design="boxenfunk"] .champ-mx__tot {
  font-weight: 800; font-style: italic; color: #fff; border-left: 3px solid var(--bereich, var(--bf-gelb));
}
html[data-design="boxenfunk"] .champ-cell--win { color: var(--gold); }
html[data-design="boxenfunk"] .champ-cell--zero { color: #8089a0; }
html[data-design="boxenfunk"] .champ-cell--none { color: #3b4356; }
html[data-design="boxenfunk"] :is(.champ-cell--pen, .champ-row__pts--pen, .rpts--neg) { color: var(--bx-strafe); }
html[data-design="boxenfunk"] :is(.champ-mx__flag, .champ-tie) { color: var(--gold); }
html[data-design="boxenfunk"] .champ-legend { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .champ-key { border-radius: 0; }
html[data-design="boxenfunk"] .champ-key--pen { background: var(--bx-strafe); }
html[data-design="boxenfunk"] .champ-note {
  border: 0; border-radius: 0; background: var(--bf-panel); box-shadow: inset 4px 0 0 var(--bf-knopf-hell);
  font-family: var(--bf-text); color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .champ-note span { font-family: var(--bf-display); color: #8f9ab0; }

/* Handy-Liste der Meisterschaft. */
html[data-design="boxenfunk"] .champ-row { border: 0; border-radius: 0; background: rgba(255, 255, 255, .045); }
html[data-design="boxenfunk"] .champ-row:hover { background: rgba(255, 255, 255, .09); }
html[data-design="boxenfunk"] .champ-row--open { background: rgba(255, 255, 255, .08); box-shadow: inset 4px 0 0 var(--bereich, var(--bf-gelb)); }
html[data-design="boxenfunk"] .champ-row__pos { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .champ-row--top .champ-row__pos { color: var(--gold); }
html[data-design="boxenfunk"] .champ-row__name { font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; }
html[data-design="boxenfunk"] .champ-row__bar { border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .champ-row__bar > i { border-radius: 0; background: var(--bereich, var(--bf-gelb)); }
html[data-design="boxenfunk"] :is(.champ-row__pts, .rpts) { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: #fff; }
html[data-design="boxenfunk"] .champ-row__pts--zero { color: #8089a0; }

/* ---------- Rennliste: Kacheln ---------- */
html[data-design="boxenfunk"] .racecard {
  border: 0; border-radius: 0;
  background:
    linear-gradient(var(--bereich, var(--bf-knopf)), var(--bereich, var(--bf-knopf))) top left / 100% 4px no-repeat,
    var(--bx-flaeche);
}
html[data-design="boxenfunk"] a.racecard:hover { transform: none; filter: brightness(1.15); }
html[data-design="boxenfunk"] .racecard__track { filter: none; opacity: .08; }
html[data-design="boxenfunk"] a.racecard:hover .racecard__track { opacity: .16; transform: none; }
html[data-design="boxenfunk"] .racecard__no { font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .1em; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .racecard__num { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: #fff; }
html[data-design="boxenfunk"] .racecard__num small { color: #8f9ab0; }
html[data-design="boxenfunk"] .racecard__name {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; font-size: 1.3rem;
}
html[data-design="boxenfunk"] .racecard__wn { font-family: var(--bf-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .racecard__pod { border-top-color: rgba(255, 255, 255, .08); }
html[data-design="boxenfunk"] .racecard__pn { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] :is(.racecard__meta, .racecard__ort) { font-family: var(--bf-text); color: #8f9ab0; }
html[data-design="boxenfunk"] .racecard__car { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .racecard--soon { opacity: .5; background: rgba(255, 255, 255, .025); }
html[data-design="boxenfunk"] .racecard--soon.racecard--today { opacity: 1; background: var(--bx-flaeche); box-shadow: inset 5px 0 0 var(--bf-gut); }
html[data-design="boxenfunk"] .soon-today { color: var(--bf-gut); }
/* Wettersymbol in der Kachelecke: auf der Vollflaeche Wolke hell, Rand dunkel. */
html[data-design="boxenfunk"] .racecard__wetter .ws-wolke { fill: #fff; stroke: var(--bf-dunkel); }

/* ---------- Blaettern ---------- */
html[data-design="boxenfunk"] .racenav { font-family: var(--bf-display); font-weight: 700; }
html[data-design="boxenfunk"] .racenav__l {
  border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink);
  font-style: italic; text-transform: uppercase; letter-spacing: .04em; clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .racenav__l:hover { color: #fff; background: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .racenav__all { color: var(--bf-dunkel); background: var(--bereich, var(--bf-gelb)); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .racenav__l { padding: 7px 20px; }
}

/* ---------- Rennergebnis ---------- */
/* Das Platz-Schild sitzt an der Ziffer, nicht am ganzen Feld (sonst stuende „▲15" darin).
   Reihenfolge per `of .lb__row`: die Erklaerzeile (.rerkl) rutscht zwischen die Zeilen. */
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .lb--race .pos {
    justify-self: stretch; min-width: 0; padding: 0; background: none; clip-path: none; color: var(--bf-ink);
  }
  html[data-design="boxenfunk"] .lb--race .pos__nr {
    display: inline-block; min-width: 36px; padding: 2px 11px 1px 7px; 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%);
  }
  html[data-design="boxenfunk"] .lb--race .pos--soft .pos__nr { background: var(--bf-knopf); color: var(--bf-ink-dim); }
}
/* Medaille aus leaderboard.css (zaehlt alle Kinder) zuruecknehmen — gleiche Spezifitaet, steht davor. */
html[data-design="boxenfunk"] .lb--race .lb__body > .lb__row:nth-child(n) .pos { --bx-medaille: initial; }
html[data-design="boxenfunk"] .lb--race .lb__row:nth-child(1 of .lb__row) .pos--top { --bx-medaille: var(--gold); }
html[data-design="boxenfunk"] .lb--race .lb__row:nth-child(2 of .lb__row) .pos--top { --bx-medaille: var(--silver); }
html[data-design="boxenfunk"] .lb--race .lb__row:nth-child(3 of .lb__row) .pos--top { --bx-medaille: var(--bronze); }
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .lb--race .lb__body > .lb__row:nth-child(-n+3) .pos { color: var(--bf-ink); }
  html[data-design="boxenfunk"] .lb--race .pos--top .pos__nr { color: var(--bx-medaille, var(--bf-ink)); }
}
html[data-design="boxenfunk"] .lb--race .time--lap { font-family: var(--bf-display); font-weight: 700; font-style: italic; color: var(--bf-ink); }
html[data-design="boxenfunk"] .lb--race .time--lap.time--best {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--bx-violett); -webkit-text-fill-color: var(--bx-violett); font-weight: 800;
}
html[data-design="boxenfunk"] .gain { font-family: var(--bf-display); font-weight: 800; font-style: italic; border-radius: 0; }
html[data-design="boxenfunk"] .gain--up { color: var(--bf-gut); }
html[data-design="boxenfunk"] .gain--down { color: #ff6b78; }
html[data-design="boxenfunk"] .gain--mini { background: none; border-color: transparent; opacity: 1; }
/* Abzeichen als kleine TV-Schilder. */
html[data-design="boxenfunk"] .rbadge {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .03em;
  border-radius: 0; border-color: var(--bf-knopf-hell); color: var(--bf-ink); background: var(--bf-knopf);
}
html[data-design="boxenfunk"] .rbadge--pole { color: var(--bf-dunkel); background: var(--gold); border-color: var(--gold); }
html[data-design="boxenfunk"] .rbadge--fl { color: #fff; background: #7b3fe4; border-color: #7b3fe4; }
html[data-design="boxenfunk"] .rbadge--out { color: var(--bf-ink-dim); background: none; border-color: #4a5468; }
html[data-design="boxenfunk"] .rbadge--photo { color: #fff; background: none; border-color: #fff; }
/* Zeitstrafe: oranges Schild — erklaert „schnellste Zeit, trotzdem P3" auf einen Blick. */
html[data-design="boxenfunk"] .rbadge--strafe { color: var(--bf-dunkel); background: var(--bx-strafe); border-color: var(--bx-strafe); }
html[data-design="boxenfunk"] .rbadge--pending { color: var(--gold); background: none; border-color: var(--gold); }
html[data-design="boxenfunk"] .rstatus { font-family: var(--bf-display); font-weight: 800; font-style: italic; border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] :is(.gap--runden, .lb__na) { font-family: var(--bf-display); font-style: italic; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .rerkl {
  font-family: var(--bf-text); color: var(--bf-ink); background: var(--bf-panel-2); border-left: 4px solid var(--bf-gelb);
}
/* Erklaerblase (ram.css `.erkl-blase`, gebaut von js/util/erklBlase.js). */
html[data-design="boxenfunk"] .erkl-blase {
  font-family: var(--bf-text); font-size: 14px; font-weight: 600; font-style: normal; border-radius: 0;
  background: var(--bf-panel-2); border: 0; border-left: 4px solid var(--bf-gelb); color: var(--bf-ink);
  max-width: min(300px, calc(100vw - 16px));
}