/* filterbox.css — das eine Anzeige-Menü („🎯 Anzeige") für 2D und 3D.
 *
 * ── Warum es das gibt ──────────────────────────────────────────────────────
 * Die Box gab es zweimal, komplett von Hand gepflegt: einmal in
 * webmap/static/index.html, einmal in revier3d/index.html. Der Kommentar über
 * dem 2D-Block sagte es selbst — „3D-.filterbox nachempfunden". Nachempfunden
 * heißt: dieselbe Idee, andere Zahlen. Breite 224 gegen 210 px (am Handy 280
 * gegen starre 172), Kopfzeile 10px12px gegen 9px12px, Knopf-Radius 10 gegen 8,
 * Schrift 12,5 gegen 12 px, und in 3D fehlten die 44-px-Tippziele ganz. Das
 * sieht man nebeneinander sofort, und niemand konnte sagen, welcher Wert der
 * richtige ist. (t0mi 30.07.2026: „das menü sieht vom layout anders aus als in 2d")
 *
 * Ab hier gilt: die Form steht HIER, einmal. Was eine Ansicht wirklich für sich
 * braucht — Positionierung und Stapelordnung —, steht als kurzer Block in ihrer
 * eigenen index.html und überschreibt von dort aus. Die Datei wird vor dem
 * inline-<style> geladen, deshalb genügt gleiche Spezifität, kein !important.
 *
 * ── Was NICHT hierher gehört ───────────────────────────────────────────────
 * Der INHALT bleibt je Ansicht verschieden, und das ist Absicht: 3D hat Wind,
 * Distanzringe und Höhenlinien, 2D hat Kataster, Nachtsicht und die
 * Marker-Namenssuche. Regeln, die nur eine Ansicht kennt (#mk-suche, .mk-treffer),
 * bleiben deshalb dort, wo das Element lebt.
 *
 * ── Bauteile ───────────────────────────────────────────────────────────────
 *   .filterbox > .fb-head (Kopf, klappt auf/zu) + .fb-body
 *   .fb-ctrl      Schalterblock, darin .fb-pairrow mit je zwei .fb-cbtn
 *   .fb-cbtn      der Schalter. In 2D ein <label> mit verstecktem <input>,
 *                 in 3D ein echter <button> — die Regel muss BEIDE bedienen.
 *   .fb-sec       Abschnittsüberschrift
 *   .fb-row       Listenzeile 3D (ganze Zeile schaltet)
 *   .zone-row     Listenzeile 2D (mit eigenem 👁-Knopf)
 *   .zyk          Stellungsanzeige der Zyklus-Knöpfe (B19)
 */

/* ── Rahmen ─────────────────────────────────────────────────────────────────
   Position und z-index setzt jede Ansicht selbst: 2D liegt als `absolute` in
   #map, 3D als `fixed` über dem Canvas. Das ist kein Schönheitsunterschied,
   sondern ein anderer Bezugsrahmen — beim Zusammenlegen NICHT vereinheitlichen. */
.filterbox {
  width: var(--fb-w, 224px);
  background: linear-gradient(180deg, rgba(20,26,39,.74), rgba(9,13,21,.78));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px rgba(0,0,0,.44);
  color: #dfe6f2; font-family: system-ui,-apple-system,sans-serif;
  font-size: 12.5px; line-height: 1.5;
  user-select: none; overflow: hidden;
}
/* touch-action: vertikal scrollen ja, horizontale BROWSER-Gesten nein (11.08.2026).
   Seit die Box am Handy offen startet, beginnt so mancher Kartenzug versehentlich AUF
   ihr — und ein Links-nach-rechts-Zug, den niemand konsumiert, ist fuer Chrome die
   Zurueck-Wischgeste: die Seite verlaesst die App mitten in der Bedienung (zweimal
   gemessen, demo-skizze.mjs und tap-erkennung.mjs, beide ueber /login als Vorseite).
   pan-y laesst das Scrollen der Listen unberuehrt. */
.filterbox { touch-action: pan-y; }

.filterbox .fb-head { padding: 10px 12px; font-weight: 600; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px; color: #e8edf6; }
.filterbox .fb-caret { margin-left: auto; transition: transform .2s; color: #93a1b5; }
.filterbox:not(.collapsed) .fb-caret { transform: rotate(90deg); }
/* Kopf-Zahnrad (07.08.2026): Einstellungen erreichbar auch bei eingeklappter Box.
   Vorbild ist die .fb-gear-Klasse im Body (siehe unten), nur in der Kopfzeile.
   Margin-left:0 statt auto, weil der .fb-caret schon margin-left:auto hat und der
   Zahnrad RECHTS davon sitzen soll (Reihenfolge im HTML: Text → Caret → Zahnrad). */
.filterbox .fb-head-gear {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px; color: #c8d2e0; cursor: pointer;
  font-size: 13px; line-height: 1; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.filterbox .fb-head-gear:hover { background: rgba(255,255,255,.13); color: #fff; }
.filterbox .fb-head-gear.on { background: rgba(201,180,88,.24); border-color: rgba(201,180,88,.5); color: #f0e6bb; }
.filterbox .fb-body { max-height: var(--fb-body-max, 72vh); overflow-y: auto; padding: 2px 8px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.filterbox .fb-body::-webkit-scrollbar { width: 6px; }
.filterbox .fb-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; }
.filterbox.collapsed .fb-body { display: none; }

/* ── Schalter ───────────────────────────────────────────────────────────────
   `appearance:none` + `font-family:inherit` sind Pflicht, weil 3D echte
   <button> benutzt (die erben sonst UA-Schrift und Systemrahmen). Die
   `input{display:none}`-Regel ist in 3D wirkungslos und muss trotzdem hier
   stehen: 2D versteckt darüber seine Checkboxen/Radios. */
.filterbox .fb-ctrl { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; }
.filterbox .fb-pairrow { display: flex; gap: 6px; }
.filterbox .fb-cbtn {
  flex: 1 1 0; min-width: 0; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: rgba(255,255,255,.05); color: #c8d2e0;
  font-family: inherit; font-size: 12.5px; padding: 9px 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s, border-color .15s, transform .06s;
}
.filterbox label.fb-cbtn { cursor: pointer; }
/* Seit dem Papierkorb-Einstieg (05.08.2026) gibt es auch Links in der Zeile — sie sollen
   wie die Schalter aussehen, nicht wie Fließtext (2D und 3D teilen diese Zeile). */
.filterbox a.fb-cbtn { text-decoration: none; }
.filterbox .fb-cbtn input { display: none; }
.filterbox .fb-cbtn:hover { background: rgba(255,255,255,.13); color: #fff; }
.filterbox .fb-cbtn:active { transform: translateY(1px); }
.filterbox .fb-cbtn.on { background: rgba(201,180,88,.24); border-color: rgba(201,180,88,.5); color: #f0e6bb; }
.filterbox .fb-cbtn:disabled { opacity: .4; cursor: default; pointer-events: none; }
/* Zahnrad-Knopf (3D): schmal, damit der Partner in der Paarzeile die Breite bekommt. */
.filterbox .fb-cbtn.fb-gear { flex: 0 0 var(--fb-gear-w, 30px); width: var(--fb-gear-w, 30px);
  padding: 8px 0; text-align: center; overflow: visible; }
/* Wind läuft blau statt gold — er ist keine Ebene, sondern eine Richtungsangabe. */
.filterbox .fb-cbtn[data-ctrl="wind"].on { background: rgba(107,168,255,.24); border-color: rgba(107,168,255,.5); color: #cfe0ff; }
/* Nachtsicht rot: der einzige Schalter, dessen Farbe seine Wirkung IST. */
.filterbox .fb-cbtn.night.on { background: rgba(181,67,43,.34); border-color: rgba(181,67,43,.6); color: #ffd9d0; }
/* Die Stärkewahl zeigt sich nur, solange das Rotlicht läuft — ausgeschaltet ist
   sie eine Einstellung ohne Gegenstand und macht die Box nur länger. */
.filterbox .fb-nachtstufe { display: none; }
html.nightmode .filterbox .fb-nachtstufe { display: flex; }

/* Stellungsanzeige der Zyklus-Knöpfe (B19): klein und zurückhaltend, sie soll die
   Beschriftung nicht verdrängen. Auch ausserhalb der Box gültig (3D-Popups). */
.filterbox .zyk, .zyk { font-size: 8.5px; letter-spacing: .5px; opacity: .55; margin-left: 3px; vertical-align: 1px; }

/* ── Zyklus-Knöpfe zweizeilig ───────────────────────────────────────────────
   Ein Zyklus-Knopf trägt Beschriftung UND aktuellen Wert. Einzeilig passte das nie:
   der längste Zustand („🛤 Wege: im Revier ○●○") braucht ~130px, in einer
   50/50-Paarzeile neben „🌊 Gewässer" gab es ~75px am Desktop und ~56px am Handy.
   In 3D endete das mit „…", in 2D wegen `display:inline-flex` sogar beidseitig hart
   abgeschnitten und ganz ohne Auslassungszeichen. (t0mi 30.07.2026: „wenn man wege
   durchklickt sehe ich den text am button ned ganz")
   Zwei Zeilen statt einer: die Beschriftung steht fest, der Wert wechselt. Kostet
   keine zusätzliche Reihe in der Box und bringt nebenbei die 44-px-Tippfläche. */
.filterbox .fb-cbtn.fb-zyk { flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; white-space: normal; line-height: 1.15; padding: 6px; min-height: 44px; }
.filterbox .fb-cbtn.fb-zyk .fb-zyk-t { max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.filterbox .fb-cbtn.fb-zyk .fb-zyk-w { font-size: 11px; opacity: .85; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.filterbox .fb-sec { color: #8b98ac; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: 9px 4px 3px; }

/* ── Listenzeilen ───────────────────────────────────────────────────────────
   Zwei Bauformen, bewusst getrennt: in 3D schaltet die ganze Zeile (.fb-row,
   ausgeschaltet durchgestrichen), in 2D gibt es einen eigenen 👁-Knopf
   (.zone-row), weil dort der Rest der Zeile schon anderes tut. */
.filterbox .fb-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px;
  cursor: pointer; transition: background .15s, opacity .15s; }
.filterbox .fb-row:hover { background: rgba(255,255,255,.08); }
.filterbox .fb-row.off { opacity: .38; text-decoration: line-through; }
.filterbox .fb-row .fb-ic { font-weight: 700; }
.filterbox .fb-ic { font-size: 15px; width: 20px; text-align: center; }
.filterbox .fb-ico { width: 18px; height: 18px; vertical-align: -3px; }
.filterbox .fb-lb { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filterbox .fb-ct { color: #8b98ac; font-variant-numeric: tabular-nums; font-size: 11.5px; }
/* Kategorie-Zeile + "nur"-Knopf in der 3D-Markerliste (04.08.2026): die Kategorie-Zeile
   schaltet ihre ganze Gruppe, "nur" blendet alles andere aus. Der Knopf sitzt IN der
   klickbaren Zeile — bewusst dezent, aber ein eigenes Tippziel. */
.filterbox .fb-kat { margin-top: 3px; background: rgba(255,255,255,.04); }
.filterbox .fb-kat .fb-lb { font-weight: 600; }
.filterbox .fb-nur { border: 1px solid rgba(255,255,255,.22); background: none; color: #8b98ac;
  font: inherit; font-size: 10.5px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  cursor: pointer; flex: 0 0 auto; }
.filterbox .fb-nur:hover { color: #e7ebdf; border-color: rgba(255,255,255,.45); }
.filterbox .fb-row.off .fb-nur { text-decoration: none; opacity: 1; }
/* Schloss je Gebietstyp (05.08.2026, t0mi: „ich klicke immer wieder unabsichtlich auf ein
   gebiet"). Gesperrt heißt: Gebiet bleibt SICHTBAR, öffnet aber keine Karte mehr — das ist
   bewusst etwas anderes als das Ausblenden der Zeile, deshalb kein Ausgrauen (in dieser
   Box bedeutet blass „ausgeblendet") sondern ein eigener Zustand mit goldenem Rahmen.
   Bauform wie .fb-nur: eigenes Tippziel IN der klickbaren Zeile.
   Die Datei ist für BEIDE Ansichten da — 2D und 3D benutzen dieselbe Klasse und denselben
   localStorage-Schlüssel `revier_gebiete_gesperrt`, sonst müsste man zweimal sperren. */
.filterbox .fb-sperr { border: 1px solid rgba(255,255,255,.22); background: none; color: #8b98ac;
  font: inherit; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px;
  cursor: pointer; flex: 0 0 auto; }
.filterbox .fb-sperr:hover, .filterbox .fb-sperr:focus-visible { color: #e7ebdf; border-color: rgba(255,255,255,.45); outline: none; }
.filterbox .fb-sperr.on { color: #e6dcb4; border-color: rgba(215,201,143,.6); background: rgba(215,201,143,.16); }
.filterbox .fb-row.off .fb-sperr { text-decoration: none; opacity: 1; }

.filterbox .zone-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 9px;
  cursor: pointer; transition: background .15s, opacity .15s; }
.filterbox .zone-row:hover { background: rgba(255,255,255,.08); }
.filterbox .zone-row .zr-sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.filterbox .zone-row .zr-lbl { flex: 1; font-size: 12.5px; color: #dbe3ee;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Kompass (.fb-nord) stand bis 05.08.2026 hier: 34-px-Scheibe in der ersten
   Zeile, neben „⌂ Übersicht". Er hängt jetzt als eigene 68-px-Scheibe unter der
   Pillen-Säule (revier3d/src/kompass.js + #kompass3d in revier3d/index.html) —
   diese Box ist im Normalbetrieb eingeklappt, und ein Orientierungsmittel, das man
   erst aufklappen muss, ist keines. Nichts davon gehört mehr hierher: die Datei ist
   für BEIDE Ansichten da, der Kompass gibt es nur in 3D. */

/* ── Tabs (3D, seit 09.08.2026) ─────────────────────────────────────────────
   Zwei Tabs: „Ebenen" und „Gebiete & Marker". Früher war die Box eine flache
   Liste, die bei vollem Revier weit nach unten scrollte — jetzt sind die Listen
   einen Tab-Klick entfernt. Diese Klassen kommen NUR in 3D vor (main.js baut sie
   in rebuildFilterBox), 2D bleibt bei seiner flachen Liste und greift hier nicht.
   Stil: Segmented Control (iOS-artig) — eine Pille mit zwei Fächern, das aktive
   Fach hebt sich durch Hintergrund ab. Kein Border-Bottom, kein Emoji, keine
   Badges — bewusst clean für „highend"-Anspruch. */
.filterbox .fb-tabs { display: flex; gap: 2px; margin: 6px 8px 4px;
  padding: 2px; background: rgba(0,0,0,.28); border-radius: 9px; }
/* Erster Tab („🗂 Ebenen") ist kurz → nur so breit wie nötig. Zweiter Tab
   („📍 Gebiete & Marker") bekommt den Rest — sonst schneidet er ab. */
.filterbox .fb-tab { min-width: 0; appearance: none;
  background: transparent; color: #8b98ac; border: none;
  font: inherit; font-size: 11px; font-weight: 500; padding: 6px 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 7px;
  transition: color .15s, background .15s; }
.filterbox .fb-tab:first-child { flex: 0 0 auto; }
.filterbox .fb-tab:last-child { flex: 1 1 0; }
.filterbox .fb-tab:hover { color: #c8d2e0; }
.filterbox .fb-tab.active { color: #e6ebf5; background: rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.filterbox .fb-tab .count { background: rgba(255,255,255,.12); color: #c8d2e0;
  font-size: 9.5px; padding: 1px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.filterbox .fb-tab.active .count { background: rgba(106,166,255,.5); color: #fff; }
.filterbox .fb-tabbody { display: none; }
.filterbox .fb-tabbody.active { display: block; animation: fb-tab-in .14s ease-out; }
@keyframes fb-tab-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Kompakte Schalter (09.08.2026, t0mi: „bissl kompakter"): die 44-px-Tippfläche
   bleibt am Handy Pflicht (siehe @media unten), am Desktop dürfen die Schalter
   flacher sein, damit der Papierkorb ohne Scrollen erreichbar ist. */
.filterbox .fb-ctrl { gap: 4px; }
.filterbox .fb-pairrow { gap: 4px; }
.filterbox .fb-cbtn { padding: 7px 8px; font-size: 12px; }
.filterbox .fb-cbtn.fb-zyk { padding: 5px 6px; min-height: 38px; }
.filterbox .fb-cbtn.fb-gear { padding: 7px 0; }

/* ── Handy ──────────────────────────────────────────────────────────────────
   760px deckt beide Ansichten ab (2D klappt bei 640 um, 3D bei 760) — die
   Tippziele gelten in dem Bereich ohnehin für beide. */
@media (max-width: 760px) {
  /* Eingeklappt nur eine Pille, aufgeklappt so breit wie nötig — aber nie unter den
     Wechsel-Pillen rechts oben durch (#viewnav, ~124px). 3D stand hier bis M16 auf
     starren 172px und quetschte „🛤 Wege: im Revier" in 56px Textfläche. */
  .filterbox { width: auto; max-width: calc(100vw - 124px); }
  .filterbox:not(.collapsed) { width: min(280px, calc(100vw - 16px)); }
  /* Der Kopf ist selbst ein Schalter (er klappt das ganze Menue auf und zu) und stand
     als einziges Element hier auf 40px, waehrend die Regel drei Zeilen tiefer 44px
     verlangt. Gemessen waren es 39px am Desktop, 40 am Handy. `align-items: center`
     steht in der Grundregel, der Text bleibt also mittig. Gilt fuer 2D und 3D. */
  .filterbox .fb-head { padding: 9px 12px; min-height: 44px; }
  .filterbox .fb-body { max-height: var(--fb-body-max-handy, 66vh); max-height: var(--fb-body-max-handy, 66dvh); }
  /* 44px ist die Untergrenze für einen Finger. In 3D fehlte das bis 30.07.2026
     komplett — die Schalter waren dort 30px hoch. */
  .filterbox .fb-cbtn { min-height: 44px; font-size: 12.5px; padding: 10px 8px; }
  /* Tab-Köpfe am Handy: 44px Tippziel, dezenter als die Schalter darunter. */
  .filterbox .fb-tab { min-height: 44px; padding: 10px 4px; }
  .filterbox .zone-row { min-height: 40px; }
  .filterbox .zone-row .zr-eye { min-width: 44px; min-height: 44px; }
  .filterbox .fb-row { padding: 8px; }
  .filterbox .fb-nur { padding: 8px 12px; }
  .filterbox .fb-sperr { padding: 8px 11px; min-height: 44px; }
}
