/* Boxenfunk — Ebene 10: Blaetter (Plan 2026-10-01, Schritt 6).
   Fahrer-Detail am Handy (.sheet, DetailSheet.js), Rundenvergleich (.sheet--breit,
   .vgl-*, VergleichBlatt.js), Tempo-Legende. Das Filterblatt steht in filter.css.
   Fahrerfarben im Vergleich (--vgl-farbe: Cyan/Magenta) bleiben Kennung — wie im
   Telemetrie-Boxenfunk (--bf-du/--bf-ref). Nur unter html[data-design="boxenfunk"];
   Abstaende nur in eigenen @media-Bloecken (mobile.css-Falle). */

/* ---------- Blatt-Rahmen ---------- */
html[data-design="boxenfunk"] .sheet-back { background: rgba(7, 9, 14, .78); }
html[data-design="boxenfunk"] .sheet {
  border-top: 0; border-radius: 0; background: var(--bf-panel);
  box-shadow: inset 0 4px 0 var(--bereich, var(--bf-gelb)), 0 -14px 44px rgba(0, 0, 0, .8);
}
html[data-design="boxenfunk"] .sheet__grip { border-radius: 0; background: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .sheet__name { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .sheet__meta { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .sheet__head [data-close] {
  border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink); clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .sheet__head [data-close]:is(:hover, :focus-visible) { color: var(--bf-dunkel); background: var(--bf-gelb); border-color: transparent; }

/* ---------- Fahrer-Detail ---------- */
html[data-design="boxenfunk"] .sheet__time {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; color: #fff; font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] .sheet__gap { font-family: var(--bf-display); font-weight: 700; font-style: italic; color: #ffb4bd; }
html[data-design="boxenfunk"] .sheet__kv { border: 0; border-radius: 0; background: var(--bf-panel-2); box-shadow: inset 0 3px 0 var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .sheet__k { font-family: var(--bf-display); font-weight: 700; letter-spacing: .1em; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .sheet__v { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: #fff; }
html[data-design="boxenfunk"] .sheet__hint { font-family: var(--bf-text); font-style: normal; color: #8f9ab0; }
html[data-design="boxenfunk"] .sheet__btn {
  border: 0; border-radius: 0; font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .05em; clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .sheet__btn--1 { color: var(--bf-dunkel); background: var(--bf-gelb); box-shadow: none; }
html[data-design="boxenfunk"] .sheet__btn--2 { color: var(--bf-ink); background: var(--bf-knopf); }

/* ---------- Rundenvergleich ---------- */
html[data-design="boxenfunk"] .sheet__unter {
  font-family: var(--bf-display); font-weight: 700; border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .vgl-karte {
  border: 0; border-radius: 0; background: var(--bx-flaeche);
  box-shadow: inset 5px 0 0 var(--vgl-farbe, var(--bf-knopf-hell));
}
html[data-design="boxenfunk"] .vgl-karte--sieger {
  box-shadow: inset 5px 0 0 var(--vgl-farbe, #fff), inset 0 0 0 2px color-mix(in srgb, var(--vgl-farbe, #fff) 40%, transparent);
}
html[data-design="boxenfunk"] .vgl-karte--ungueltig { box-shadow: inset 5px 0 0 var(--amber); }
html[data-design="boxenfunk"] .vgl-karte h4 { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .vgl-karte__rang {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; border-radius: 0; color: var(--bf-dunkel);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
html[data-design="boxenfunk"] .vgl-karte__auto { font-family: var(--bf-text); color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .vgl-karte__zeit {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-shadow: none; font-variant-numeric: tabular-nums;
}
html[data-design="boxenfunk"] :is(.vgl-karte__ab, .vgl-sekt) { font-family: var(--bf-display); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-design="boxenfunk"] .vgl-karte__marke { font-family: var(--bf-display); font-weight: 800; border-radius: 0; }
html[data-design="boxenfunk"] .vgl-karte__fakten { border-top: 2px solid var(--bf-knopf); }
html[data-design="boxenfunk"] .vgl-fakt > span { font-family: var(--bf-display); font-weight: 700; letter-spacing: .1em; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .vgl-fakt > b { font-family: var(--bf-display); font-weight: 700; }
html[data-design="boxenfunk"] .vgl-duell { border: 0; border-radius: 0; background: var(--bf-panel-2); }
html[data-design="boxenfunk"] .vgl-duell__kappe { font-family: var(--bf-display); font-weight: 800; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .vgl-duell__wert { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-shadow: none; }
html[data-design="boxenfunk"] .vgl-duell__wer { font-family: var(--bf-display); font-weight: 700; text-transform: uppercase; }
html[data-design="boxenfunk"] .vgl-duell__wer i { border-radius: 0; }
html[data-design="boxenfunk"] .tempo-legende__eintrag { font-family: var(--bf-display); font-weight: 700; color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .tempo-legende__eintrag i { border-radius: 0; }
html[data-design="boxenfunk"] .pf-appkey code { font-family: var(--bf-display); }
/* Tempo-Diagramm + Streckenbild im Vergleich: SVG-Schrift (Attribut 10–10,5 px) auf den Schriftboden. */
html[data-design="boxenfunk"] .vgl-bild svg text { font-family: var(--bf-display); font-weight: 700; font-size: 13px; }
html[data-design="boxenfunk"] .sheet__head h3 { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
html[data-design="boxenfunk"] .vgl-karte__hinweis { font-family: var(--bf-text); }
/* Sektor-Unterschied: Kasten flach, Werte als Schilder mit Fahrerfarben-Kante. */
html[data-design="boxenfunk"] .vgl-sekdelta { border: 0; border-radius: 0; background: var(--bf-panel-2); }
html[data-design="boxenfunk"] .vgl-sekdelta__titel { font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; }
html[data-design="boxenfunk"] .vgl-sekdelta__quelle { font-family: var(--bf-text); font-style: normal; text-transform: none; }
html[data-design="boxenfunk"] .vgl-sekdelta__wert {
  border: 0; border-radius: 0; background: var(--bf-panel); box-shadow: inset 4px 0 0 var(--vgl-farbe, var(--bf-knopf-hell));
}
html[data-design="boxenfunk"] .vgl-sekdelta__wert--summe { box-shadow: inset 4px 0 0 var(--vgl-farbe, var(--bf-knopf-hell)), inset 8px 0 0 var(--bf-panel), inset 10px 0 0 var(--vgl-farbe, var(--bf-knopf-hell)); }
html[data-design="boxenfunk"] .vgl-sekdelta__wert b { font-family: var(--bf-display); font-weight: 800; font-style: italic; }
html[data-design="boxenfunk"] :is(.vgl-sekdelta__marke, .vgl-sekdelta__fuss) { font-family: var(--bf-display); font-weight: 600; }