/* Boxenfunk — Ebene 3b: Filter der Leaderboard-Ansicht (Plan 2026-10-01, Schritt 2).
   Reiter (.tabs/.tab, auch Trocken/Regen und Streckenwahl), Schnellfilter (.preset),
   Auswahl/Suche/Zeitraum, Knopf „Runden vergleichen", Filterblatt am Handy.
   Aktiv = Signalgelb. Nur unter html[data-design="boxenfunk"]; Abstaende nur in
   eigenen @media-Bloecken (mobile.css-Falle). Ausgelagert aus leaderboard.css (Dateigroesse).
 */

/* ---------- Filter: Reiter, Schnellfilter, Felder ---------- */
html[data-design="boxenfunk"] .controls__label {
  font-family: var(--bf-display); font-weight: 700; letter-spacing: .12em; color: var(--bf-ink-dim);
}
html[data-design="boxenfunk"] .tabs { background: none; border: 0; border-radius: 0; gap: 3px; padding: 0; }
html[data-design="boxenfunk"] .tab {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bf-ink); border-radius: 0; box-shadow: none;
  background: linear-gradient(var(--bx-klasse, transparent), var(--bx-klasse, transparent)) left / 12px 100% no-repeat, var(--bf-knopf);
  clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .tab:hover { color: #fff; background-color: var(--bf-knopf-hell); }
html[data-design="boxenfunk"] .tab[data-class="GT3"] { --bx-klasse: var(--gt3); }
html[data-design="boxenfunk"] .tab[data-class="GTE"] { --bx-klasse: var(--gte); }
html[data-design="boxenfunk"] .tab[data-class="GT4"] { --bx-klasse: var(--gt4); }
/* Aktiv = Signalgelb (Boxenfunk-Auswahlfarbe), die Klasse bleibt als Streifen sichtbar. */
html[data-design="boxenfunk"] :is(.tab.active, .tab.active[data-class], .tab.active:not([data-class])) {
  color: var(--bf-dunkel); box-shadow: none;
  background: linear-gradient(var(--bx-klasse, transparent), var(--bx-klasse, transparent)) left / 12px 100% no-repeat, var(--bf-gelb);
}
html[data-design="boxenfunk"] .tab__now { color: var(--bf-gut); }
html[data-design="boxenfunk"] .tab.active .tab__now { color: var(--bf-dunkel); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .tab { font-size: 17px; padding: 8px 22px 8px 24px; }
}

html[data-design="boxenfunk"] .preset {
  font-family: var(--bf-text); font-weight: 600; color: var(--bf-ink-dim);
  border: 0; border-radius: 0; background: var(--bf-panel-2); clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .preset:hover { color: #fff; background: var(--bf-knopf); transform: none; }
html[data-design="boxenfunk"] .preset.active {
  color: var(--bf-dunkel); background: var(--bf-gelb); box-shadow: none;
}
html[data-design="boxenfunk"] .preset__dot { border-radius: 0; box-shadow: none; transform: skewX(-12deg); }
html[data-design="boxenfunk"] .preset.active .preset__dot { background: var(--bf-dunkel); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .preset { padding: 8px 20px; }
}

/* Felder: flache Panels, Kante links (Gelb bei Fokus), Pfeil in Signalgelb. */
html[data-design="boxenfunk"] :is(.select, .month-select, .dr__in, .search, .toggle) {
  border: 0; border-radius: 0; box-shadow: inset 4px 0 0 var(--bf-knopf-hell);
  font-family: var(--bf-text); font-weight: 600; color: var(--bf-ink);
  background-color: var(--bf-panel-2);
}
html[data-design="boxenfunk"] .select {
  background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 3.5l4.5 5 4.5-5z' fill='%23ff3b30'/%3E%3C/svg%3E");
}
html[data-design="boxenfunk"] :is(.select, .month-select, .dr__in, .search):focus-within { box-shadow: inset 4px 0 0 var(--bf-gelb); }
html[data-design="boxenfunk"] .search input { font-family: var(--bf-text); }
html[data-design="boxenfunk"] :is(.search__ico, .dr__sep) { color: var(--bf-ink-dim); }
html[data-design="boxenfunk"] .dr__clear {
  border: 0; border-radius: 0; background: var(--bf-knopf); color: var(--bf-ink);
  font-family: var(--bf-display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .04em;
  clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .dr__clear:hover { background: var(--bf-knopf-hell); color: #fff; }
html[data-design="boxenfunk"] .toggle.on { color: #fff; box-shadow: inset 4px 0 0 var(--bf-gelb); }
html[data-design="boxenfunk"] .toggle__sw { border-radius: 0; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .toggle.on .toggle__sw { background: var(--bf-gelb); }
html[data-design="boxenfunk"] .toggle__sw::after { border-radius: 0; background: var(--bf-ink); }
html[data-design="boxenfunk"] .toggle.on .toggle__sw::after { background: var(--bf-dunkel); }

/* „Runden vergleichen": schraeger gelber Kasten, ruhig (kein Fliessen/Atmen). */
html[data-design="boxenfunk"] .vgl-knopf {
  border: 0; border-radius: 0; animation: none;
  background: var(--bf-panel-2); color: #fff; box-shadow: inset 0 0 0 2px var(--bf-gelb);
  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"] .vgl-knopf:hover { animation: none; transform: none; background: var(--bf-knopf); box-shadow: inset 0 0 0 2px var(--bf-gelb); }
html[data-design="boxenfunk"] .vgl-knopf[data-an="true"] {
  animation: none; color: var(--bf-dunkel); background: var(--bf-gelb); box-shadow: none;
}
html[data-design="boxenfunk"] .vgl-knopf:focus-visible { outline-color: var(--bf-gelb); }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .vgl-knopf { font-size: 17px; }
}

/* Filterblatt + Knopf (Handy). */
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .fleiste__btn {
    border: 0; border-radius: 0; background: var(--bf-panel); box-shadow: inset 4px 0 0 var(--bf-knopf-hell);
    font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .05em;
  }
  html[data-design="boxenfunk"] .fleiste__btn.is-on { color: var(--bf-gelb); box-shadow: inset 4px 0 0 var(--bf-gelb); }
  html[data-design="boxenfunk"] .fleiste__n { border-radius: 0; background: var(--bf-gelb); color: var(--bf-dunkel); font-family: var(--bf-display); }
  html[data-design="boxenfunk"] .fsheet { background: var(--bf-panel); border-top: 0; border-radius: 0; box-shadow: inset 0 4px 0 var(--bf-gelb), 0 -12px 44px rgba(0, 0, 0, .7); }
  html[data-design="boxenfunk"] .fsheet__grip { border-radius: 0; background: var(--bf-knopf-hell); }
  html[data-design="boxenfunk"] .fsheet__t { font-family: var(--bf-display); font-weight: 800; font-style: italic; color: var(--bf-gelb); }
  html[data-design="boxenfunk"] .fsheet__ok {
    border-radius: 0; background: var(--bf-gelb); color: var(--bf-dunkel);
    font-family: var(--bf-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  }
}