/* ============================================================
   Filter hinter einem Knopf (nur Telefon) + Sektor-Knöpfe in der Zeile.
   ============================================================ */
.fbar { display: none; }
.sec-chips { display: none; }
/* Am Desktop unsichtbar; css/mobile.css blendet es unter 768 px ein. */
.nur-handy { display: none; }

@media (max-width: 767px) {
  /* --- Knopf, der das Filterblatt öffnet -------------------- */
  .fbar { display: block; margin-bottom: var(--space-3); }
  .fbar__btn {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; min-height: var(--tap); padding: 0 var(--space-3);
    border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--card); color: var(--text);
    font-family: var(--font-ui); font-size: var(--text-md); font-weight: 700;
    letter-spacing: 1px; transition: border-color 0.2s, background 0.2s, transform 0.16s;
  }
  .fbar__btn:active { transform: scale(0.99); }
  .fbar__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .fbar__btn.is-on { border-color: var(--cyan); color: var(--cyan); }
  .fbar__n {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
    display: inline-grid; place-items: center; background: var(--grad-main); color: #05060a;
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 800;
  }
  .fbar__n[hidden] { display: none; }

  /* --- Das Filterblatt selbst ------------------------------- */
  .fsheet-back { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, 0.62); }
  .fsheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
    max-height: 86vh; overflow-y: auto;
    padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--bg-1); border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.62);
  }
  .fsheet__grip { width: 42px; height: 4px; border-radius: 99px; background: var(--line-strong); margin: var(--space-1) auto var(--space-3); }
  .fsheet__t { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); }
  /* Im Blatt ist Platz nach unten — hier wird umgebrochen statt gewischt,
     damit alle Möglichkeiten auf einen Blick dastehen. */
  .fsheet .controls { gap: var(--space-4); margin: 0; }
  .fsheet .controls__row { display: flex; flex-wrap: wrap; overflow: visible; gap: var(--space-2); }
  .fsheet .controls__label { width: 100%; margin: 0 0 2px; }
  .fsheet .tabs, .fsheet .presets, .fsheet .toolbar, .fsheet .daterange { flex-wrap: wrap; }
  .fsheet .search { flex: 1 1 100%; min-width: 0; }
  .fsheet .dr__in { flex: 1 1 40%; }
  .fsheet__ok {
    width: 100%; min-height: var(--tap); margin-top: var(--space-4); border-radius: var(--radius-sm);
    background: var(--grad-main); color: #05060a;
    font-family: var(--font-ui); font-size: var(--text-md); font-weight: 700; letter-spacing: 1px;
  }
  .fsheet__ok:active { filter: brightness(1.08); }

  /* --- Sektor-Knöpfe auf der zweiten Ebene der Zeile --------
     Violett = schnellster Sektor im Feld (Farbe --sector, dieselbe Bedeutung
     wie in der Tabellenspalte), grün = alle anderen. Nachgetragene Sektoren
     werden nie violett (siehe _lb_sectors.js) und bleiben gepunktet. */
  .lb--sectors .car-cell { display: none; }
  /* `min-width: 0` und `overflow: hidden` sind Pflicht: sonst kann der Block
     nie schrumpfen und schiebt sich bei schmalen Geraeten an die Rundenzahl
     heran (gemessen: nur 8 px Abstand). */
  .lb--sectors .sec-chips { grid-area: car; display: flex; gap: 4px; min-width: 0; overflow: hidden; padding-right: 4px; }
  .secchip {
    display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
    flex: 0 1 auto; min-width: 0; overflow: hidden;
    padding: 1px 4px; border-radius: 5px; border: 1px solid transparent;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.3px;
    color: var(--text-faint); background: rgba(255, 255, 255, 0.03);
  }
  .secchip b { font-size: 10px; font-weight: 700; }
  .secchip--ok { color: var(--sector-ok); border-color: rgba(61, 220, 132, 0.32); background: rgba(61, 220, 132, 0.08); }
  .secchip--best { color: var(--sector); border-color: rgba(179, 136, 255, 0.55); background: rgba(179, 136, 255, 0.14); box-shadow: 0 0 10px -2px var(--sector); }
  .secchip--nach b { border-bottom: 1px dotted currentColor; }
  .secchip--leer { opacity: 0.4; }
}

/* Auf schmalen Geräten wird es zu dritt eng — dann fällt die Beschriftung
   „S1/S2/S3" weg. Die Reihenfolge sagt dasselbe, die Zeit bleibt lesbar.
   Schwelle gemessen: unter 400 px passen Beschriftung + Zeit nicht mehr
   neben Runden und Rückstand. */
@media (max-width: 399px) {
  .secchip { font-size: 0; gap: 0; padding: 1px 4px; }
  .secchip b { font-size: 10px; }
}