/* ============================================================
   Komponente: schriftgroesse-wahl (Fontsize option)
   ------------------------------------------------------------
   Quelle: Figma „Design System" → Fontsize option,
   Komponenten-Satz 3910:7267 (State=small / medium / large),
   ausgelesen am 04.09.2026.

   Drei Schriftgrößen im Reader. Dieselbe Spur wie beim
   Segmented Control, aber die Auswahl steht NICHT im Text,
   sondern in der Größe: jedes „Aa" ist so groß, wie der Text
   danach sein wird. Das ist der ganze Trick — die Vorschau ist
   die Beschriftung.

   Deshalb auch eine eigene Datei und kein Modifier am
   Segmented Control: dort tragen alle Segmente denselben
   Textstil, hier drei verschiedene.

     klein   small text  (14)
     mittel  medium text (18)
     groß    large text  (22 mobil, 24 auf dem Tablet)

   DIE GEWÄHLTE GRÖSSE IST EINE GEFÜLLTE PILLE in label-text,
   also WEISS, mit Text in text-opposite-background. Nicht blau
   — dieselbe Umkehrung wie beim Dark/Light-Umschalter und beim
   An-Zustand des Toggles.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <div class="schriftgroesse-wahl" role="radiogroup"
          aria-label="Schriftgröße">
       <button class="schriftgroesse-wahl__stufe schriftgroesse-wahl__stufe--klein"
               type="button" role="radio" aria-checked="false"
               aria-label="Klein">Aa</button>
       <button class="schriftgroesse-wahl__stufe schriftgroesse-wahl__stufe--mittel"
               type="button" role="radio" aria-checked="true"
               aria-label="Mittel">Aa</button>
       <button class="schriftgroesse-wahl__stufe schriftgroesse-wahl__stufe--gross"
               type="button" role="radio" aria-checked="false"
               aria-label="Groß">Aa</button>
     </div>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     121 x 45  Spur.
     40 x 36   Gewählte Pille.
   ============================================================ */

.schriftgroesse-wahl {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;

  width: 121px;                            /* gemessen, siehe Kopf */
  height: 45px;
  padding-inline: var(--space-sm);         /* 12 */
  border-radius: var(--radius-full);
  background-color: var(--label-fill);

  /* Innerer Schatten statt border (AGENTS.md §8a). */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

.schriftgroesse-wahl__stufe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;

  font-family: var(--font-family-inter);
  font-weight: var(--font-weight-regular);
  text-align: center;
  white-space: nowrap;
  color: var(--text-primary);
}

/* Jede Stufe zeigt ihre eigene Größe — das ist die Auskunft. */
.schriftgroesse-wahl__stufe--klein {
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
}

.schriftgroesse-wahl__stufe--mittel {
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
}

.schriftgroesse-wahl__stufe--gross {
  font-size: var(--font-size-large-text);
  line-height: var(--line-height-large-text);
}

/* Die gewählte Stufe. Die feste Größe der Pille steht hier und
   nicht am Text: sonst wäre die Pille um „Aa" herum je Stufe
   verschieden breit und die Spur wackelte beim Umschalten. */
.schriftgroesse-wahl__stufe[aria-checked="true"] {
  width: 40px;                             /* gemessen, siehe Kopf */
  height: 36px;
  padding-inline: var(--space-xs);         /* 8 */
  overflow: hidden;
  background-color: var(--label-text);
  color: var(--text-opposite-background);
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .schriftgroesse-wahl__stufe:not([aria-checked="true"]):hover {
    color: var(--text-accent);
  }
}

.schriftgroesse-wahl__stufe {
  transition:
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    color            calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

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

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Hover steht nicht an der Komponente. Hier tönt sich der
     Buchstabe; eine Fläche wäre die Regel (§10.1a), sie würde
     aber wie die gewählte Pille aussehen und damit lügen.
   · Die gewählte Pille ist in allen drei Fassungen 40 x 36 —
     auch unter dem großen „Aa" (24 auf dem Tablet, Zeilenhöhe
     26,4). Der Text ragt dort rechnerisch heraus; in Figma
     steht `overflow: clip` daran, hier ebenso. Zu prüfen, ob
     die Pille auf dem Tablet mitwachsen soll.
   ============================================================ */