/* ==========================================================================
 view-switcher.css — Besonderheiten des ViewSwitcher-Moduls

 Konsument: web/js/components/badges/view-switcher.js
 (window.ViewSwitcher.create())

 ★ DAS AUSSEHEN LIEGT NICHT MEHR HIER, sondern im geteilten Primitive
 `primitives/segmented.css` (`.seg-track` / `.seg-item`) — dieselbe Pillen-
 Leiste tragen seit 2026-08-01 auch die Drawer-Register (`.drawer-tabs`).
 Vorher gab es zwei Umschalter-Sprachen in EINEM Bild: hier die gefuellte
 Pille, im Drawer Fluent-Underline-Tabs (transparente Buttons auf einer
 Haarlinie). Die billigere davon stand in der Flaeche, die am hochwertigsten
 wirken soll. Das Modul-JS setzt jetzt BEIDE Klassen (`view-switcher
 anfr-view-switcher seg-track` bzw. `anfr-view-switcher-btn seg-item`); die
 alten Namen bleiben, weil elf Section-Stylesheets darauf zeigen.

 Uebrig bleibt hier, was WIRKLICH nur dieses Modul betrifft: Icon-only unter
 600px und der gemessene Kompakt-Zustand der Header-Kollaps-Kette. Beide
 ueberschreiben die Basis planmaessig — `primitives/*` laedt vor `components/*`,
 bei gleicher Spezifitaet (0,2,0) gewinnt die spaetere Datei.

 Klassennamen: `.anfr-view-switcher` (historisch aus Anfragen, wurde
 generisch). Scope-Anchors: Der Switcher kann entweder im klassischen
 Section-Body (.app-scope) oder im neuen Page-Header (.page-header-subtabs)
 leben. Doppelte Selektor-Liste matched beide Kontexte.
 ========================================================================== */

/* Mobile: Icon-only — ABER NUR, wenn jede Pill ein Icon hat. Die Klasse setzt das Modul-JS
   (`--mit-icons`, geprüft über alle views). Vorher galt die Regel unbedingt: ein Switcher
   ohne Icons verlor seine Labels und stand als DREI LEERE 20px-Kästchen da (gemessen an den
   Einstellungs-Sub-Tabs). Die Kollaps-Kette des Page-Headers prüft dieselbe Bedingung längst
   in JS (`_canIconOnly` in page-header-responsive.js) — hier fehlte sie. */
@media (max-width: 599px) {
  .app-scope .anfr-view-switcher--mit-icons .anfr-view-switcher-btn,
  .page-header-subtabs .anfr-view-switcher--mit-icons .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
  .app-scope .anfr-view-switcher--mit-icons .anfr-view-switcher-btn span,
  .page-header-subtabs .anfr-view-switcher--mit-icons .anfr-view-switcher-btn span { display: none; }

  /* Ohne Icons bleiben die Labels — dann muss der Switcher selbst scrollen können.
     Repo-Regel: breiter Inhalt scrollt im EIGENEN Container, der Body nie horizontal. */
  .app-scope .anfr-view-switcher:not(.anfr-view-switcher--mit-icons),
  .page-header-subtabs .anfr-view-switcher:not(.anfr-view-switcher--mit-icons) {
    max-width: 100%;
    overflow-x: auto;
    /* Scrollbar nicht sichtbar machen, aber scrollbar bleiben: eine 12px-Leiste unter drei
       Pills wäre auf einem Telefon mehr Störung als Hinweis. */
    scrollbar-width: none;
  }
  .app-scope .anfr-view-switcher:not(.anfr-view-switcher--mit-icons)::-webkit-scrollbar,
  .page-header-subtabs .anfr-view-switcher:not(.anfr-view-switcher--mit-icons)::-webkit-scrollbar { display: none; }
}

/* Gemessener Kompakt-Zustand (page-header-responsive.js setzt `.is-compact`,
   wenn die Pills sonst die rechten Header-Actions über die Kante schöben — Stufe 1
   der Header-Kollaps-Kette). Icon-only; wird nur gesetzt, wenn jede Pill ein Icon
   trägt (JS-Guard), daher bleibt hier nie ein leerer Button zurück. */
.page-header-subtabs.is-compact .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
.page-header-subtabs.is-compact .anfr-view-switcher-btn span { display: none; }