/* segmented.css — SSOT für die Segment-Leiste (Pillen-Track) des Hauses.

   EIN Umschalter-Aussehen für die ganze App: ein ruhiger grauer Track, in dem
   die aktive Wahl als gefüllte Pille liegt. Konsumenten setzen `seg-track` auf
   die Hülle und `seg-item` auf jede Schaltfläche und behalten daneben ihre
   eigene Klasse für Verhalten/Sonderfälle (`anfr-view-switcher`, `drawer-tabs`).

   ★ WARUM EIN PRIMITIVE UND KEINE ZWEITE KOPIE: bis 2026-08-01 gab es dieses
   Aussehen genau einmal (ViewSwitcher), und die Drawer-Register liefen daneben
   als Fluent-Underline-Tabs — zwei Umschalter-Sprachen in EINEM Bild, die
   billigere davon in der Fläche, die am hochwertigsten wirken soll. Die Leiste
   ein zweites Mal auszuschreiben wäre der Weg gewesen, der am Tag der Kopie
   identisch aussieht und danach auseinanderläuft; `check:css-doppel` meldet
   genau diese Bauform (≥5 Deklarationen, ≥3 Chrome-Familien unter zwei Namen).

   ★ SPEZIFITÄT IST HIER KEINE STILFRAGE: der Item-Selektor lautet
   `.seg-track .seg-item` (0,2,0) und nicht `.seg-item` (0,1,0), weil der
   globale Reset `.app-scope button { border:none; background:none; padding:0 }`
   (0,1,1) sonst GEWINNT und Fläche, Rahmen und Polsterung der Pille wegnimmt —
   ohne Fehler, die Leiste stünde nur als nackter Text da (Gate
   `audit:button-reset`). Und der Track trägt bewusst KEIN `.app-scope`-Präfix:
   Drawer hängen am Body, nicht in der Section-Hülle.

   Reihenfolge: `primitives/*` lädt VOR `components/*` — die Feinheiten der
   Konsumenten (Icon-only unter 600px, `is-compact` der Header-Kollaps-Kette,
   Sticky-Verhalten der Drawer-Leiste) überschreiben diese Basis planmäßig. */

.seg-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 36px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--lod-gray-50);
  border: 1px solid var(--lod-gray-100);
  flex-shrink: 0;
}

.seg-track .seg-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 var(--space-3-5);
  border: none;
  background: transparent;
  color: var(--lod-gray-700);
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* filter + transform mit in die Transition: der aktive Eintrag nutzt bei Hover
     brightness() — ohne diese Zeile snappte das (kein Hover-Feedback). */
  transition: background-color var(--duration-snappy) var(--ease-enter),
              color var(--duration-snappy) var(--ease-enter),
              box-shadow var(--duration-snappy) var(--ease-enter),
              filter var(--duration-snappy) var(--ease-enter),
              transform var(--duration-snappy) var(--ease-enter);
}

.seg-track .seg-item img {
  opacity: 0.55;
  transition: opacity var(--duration-snappy), filter var(--duration-snappy);
  flex-shrink: 0;
}

/* Inactive-Hover: solides Weiss + zarter Schatten (Pillen-Lift). Ein
   halbtransparentes Weiss wäre auf dem fast-weissen gray-50-Track unsichtbar
   und läse sich als „kein Hover". */
.seg-track .seg-item:not(.is-active):hover {
  color: var(--lod-darkblue);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 46, 72, 0.14);
}
.seg-track .seg-item:hover img { opacity: 0.8; }

/* Active-Hover: auch die gefüllte Pille reagiert auf den Mauszeiger. */
.seg-track .seg-item.is-active:hover { filter: brightness(1.12); }

.seg-track .seg-item:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}

.seg-track .seg-item.is-active {
  background: var(--lod-darkblue);
  color: #fff;
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(15, 46, 72, 0.18);
}
.seg-track .seg-item.is-active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}