/* ============================================================
   Komponente: segmented-control
   ------------------------------------------------------------
   Quelle: Figma „Design System" → Segmented controll,
   Komponenten-Satz 11035:1308, ausgelesen am 04.09.2026.

   Zwei oder drei gleichrangige Möglichkeiten nebeneinander, von
   denen immer genau eine gilt. Kein Umschalter (der hat zwei
   Zustände, an und aus) und keine Filter-Chips (die lassen sich
   einzeln an- und abwählen).

   Der Unterschied zum Chip ist die Fläche darum: die Segmente
   liegen in einer gemeinsamen Spur. Das sagt „eines von diesen",
   während einzelne Chips „beliebig viele davon" sagen.

   DAS AKTIVE SEGMENT TRÄGT DREI SIGNALE (WCAG 1.4.1): eigene
   Fläche, 2 px Rand und Glow. Der Glow allein trägt nie (§4).

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <div class="segmented-control" role="radiogroup"
          aria-label="Schwierigkeit">
       <button class="segmented-control__segment" type="button"
               role="radio" aria-checked="true">Leicht</button>
       <button class="segmented-control__segment" type="button"
               role="radio" aria-checked="false">Mittel</button>
       <button class="segmented-control__segment" type="button"
               role="radio" aria-checked="false">Schwer</button>
     </div>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     45   Gesamthöhe (4 + 37 + 4). Über der Untergrenze von 44.
     36   Segment (8 + 21 + 8).
     2    Glow-Radius. Die Tokens kennen 4 / 10 / 25 —
          --glow-chip mit 4 ist der nächste. Siehe OFFEN.
   ============================================================ */

.segmented-control {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;

  padding: var(--space-2xs);               /* 4 */
  border-radius: var(--radius-full);
  background-color: var(--label-fill);

  /* Innerer Schatten statt border: die Breite ergibt sich aus
     den Segmenten (AGENTS.md §8a). */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

/* Die Fassung mit einem freien Text links und einem Segment
   rechts („Graben | Flagge"): links 16 Polster, rechts 4, und
   12 zwischen beiden. */
.segmented-control--mit-text {
  justify-content: flex-end;
  gap: var(--space-sm);                    /* 12 */
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
}

.segmented-control__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);                   /* 4 */
  flex-shrink: 0;

  padding: var(--space-xs) var(--space-sm);   /* 8 / 12 */
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;

  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  color: var(--label-text-active);
}

/* Das gewählte Segment. Der 2-px-Rand liegt als box-shadow und
   nicht als border-width — sonst verschöbe sich der Text beim
   Wechsel um 2 px (§23.6). */
.segmented-control__segment[aria-checked="true"],
.segmented-control__segment[aria-pressed="true"] {
  background-color: var(--label-fill-active);
  box-shadow:
    inset 0 0 0 var(--outline-active) var(--label-outline-active),
    var(--glow-chip);
}

/* Das Icon in einem Segment, falls eines dabei ist. */
.segmented-control__ikon {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Nur die nicht gewählten reagieren auf Hover: das gewählte ist
   schon da, wo der Klick hinführen würde.
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .segmented-control__segment:not([aria-checked="true"]):not([aria-pressed="true"]):hover {
    background-color: var(--button-icon-button-fill-hover);
  }
}

.segmented-control__segment:not([aria-checked="true"]):not([aria-pressed="true"]):active {
  background-color: var(--button-icon-button-fill-press);
}

.segmented-control__segment {
  transition:
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    box-shadow       calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .segmented-control__segment {
    transition: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Glow trägt in Figma Radius 2, die Tokens kennen
     4 / 10 / 25. Hier steht --glow-chip (4). Dieselbe Stelle
     wie am aktiven Chip und an der Kategorie-Karte — der
     2er-Radius gehört als Token nachgetragen oder die
     Komponenten auf 4 gezogen.
   · Hover und Press stehen nicht an der Komponente. Beide sind
     aus dem Icon-Button übernommen, wie beim Shortcut und der
     Kategorie-Karte, die Figma inzwischen so führt.
   ============================================================ */