/* ============================================================
   Komponente: optionsliste
   ------------------------------------------------------------
   Quelle: Figma „Design System" → option row, node 12055:428
     (medium=cover) und 11621:194 (option row/icon),
     im Zusammenhang: Access sheet 11325:2665 und
     Bottom sheet „Ausgabe wählen" 12063:6337.
   Ausgelesen am 11.09.2026. Vorfassung: Screens-Datei
   13832:13947, 04.09.2026.

   Eine Liste benannter Wege, jeder mit führendem Element, Titel,
   Erklärung und Chevron. Sitzt in Sheet und Dialog — nicht in
   Listen auf Screens; dafür gibt es einstellungen-liste.

   Sie ist KEIN Menü und KEIN Listen-Control (§6, noch nicht
   freigegeben): jede Zeile ist ein eigener, benannter Weg mit
   eigenem Ziel — also je Zeile ein Button.

   Setzt tokens.css und base.css voraus. Innerhalb eines Sheets
   zusätzlich dialog.css und sheet.css.

   ------------------------------------------------------------
   ZWEI FASSUNGEN, ZWEI HÖHEN, ZWEI TITELGRÖSSEN
     Icon    35 x 35, gap 8,  Polster 4 oben/unten   →  53 hoch
             Titel `medium text` bold (18)
     Cover   49 x 69, gap 12, kein Polster           →  69 hoch
             Titel `title text` bold (14 · 14 · 20)

   Die Zeilenhöhe ergibt sich, sie steht nicht da. Bei der
   Icon-Fassung bestimmt sie der Chevron (45) plus 4 + 4; bei der
   Cover-Fassung das Cover (69). Beide liegen über der
   Untergrenze von 44 und über dem Zielwert 48 (§11.2).

   DIE ABSTÄNDE LIEGEN AUSSEN, NICHT IM POLSTER. Zwischen zwei
   Zeilen stehen 36 (--space-xl) als gap an der Liste. Bis zum
   10.09.2026 trug die Zeile 24 Polster oben und unten und war
   damit 92 hoch; getrennt wurde mit einer Linie. Beides ist weg
   — entschieden am 11.09.2026, Figma gilt.

   KEINE TRENNLINIEN. Die Zeilen trennt der Abstand. Eine Linie
   dazu wäre eine zweite Auskunft über dieselbe Sache.

   ------------------------------------------------------------
   DAS SEITLICHE POLSTER SITZT NUR LINKS
   Die Liste trägt 16 links und nichts rechts. Rechts endet jede
   Zeile mit der 45er Fläche des Chevrons, und die bringt den
   optischen Rand selbst auf 20 — dieselbe Rechnung wie beim ✕ in
   der Titelzeile (§22.2a). Mit 16 auf beiden Seiten stünde der
   Chevron 14 px zu weit innen.

   Der sichtbare Seitenrand eines Bottom Sheets ist damit 20 und
   entspricht dem Screen-Rand (--layout-screen-margin). Die
   Aufteilung 4 aussen + 16 innen ist der Bauweg dorthin, kein
   eigenes Maß: im Ruhezustand haben ✕ und Chevron keine Fläche,
   nur das Zeichen ist zu sehen.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     35        Icon-Fläche (Figma size-[35px]). Nicht auf der Skala.
     49 x 69   Cover in der Zeile. Radius 10 = --radius-sm.
     2         Abstand Titel zu Erklärung (Figma gap-[2px]).
               Die Skala beginnt bei 4.
     4,5 x 10  Chevron-Zeichen in einer 45er Fläche.
   ZU KLÄREN: gehen die 2 auf --space-2xs (4)?

   ------------------------------------------------------------
   VERWENDUNG

   Die Liste ist ein GESCHWISTER von .overlay__kopf, direkt im
   .sheet — nicht in .overlay__inhalt. Nur so steht sie 24 unter
   dem Titel (der gap des Sheets) statt 8 (die Staffelung in
   §22.2b). So ist es in Figma gebaut.

     <div class="sheet" role="dialog" aria-modal="true" …>
       <div class="sheet__grabber" aria-hidden="true"></div>
       <div class="overlay__kopf">
         <div class="overlay__titelzeile">…</div>
       </div>

       <ul class="optionsliste" role="list">
         <li class="optionsliste__eintrag">
           <button class="optionsliste__zeile" type="button">
             <span class="optionsliste__ikon">
               <svg class="ikon"><use href="#icon-qr"></use></svg>
             </span>
             <span class="optionsliste__text">
               <span class="optionsliste__titel">QR-Code scannen</span>
               <span class="optionsliste__erklaerung">Code am Aushang</span>
             </span>
             <span class="optionsliste__chevron" aria-hidden="true">
               <svg><use href="#icon-chevron"></use></svg>
             </span>
           </button>
         </li>
       </ul>

   Cover-Fassung — dieselbe Zeile, anderes führendes Element:

         <button class="optionsliste__zeile optionsliste__zeile--cover"
                 type="button">
           <span class="optionsliste__cover">
             <img src="…" alt="">
           </span>
           <span class="optionsliste__text">
             <span class="optionsliste__titel">BILD Hamburg</span>
             <span class="optionsliste__erklaerung">Hamburg · Heute</span>
           </span>
           <span class="optionsliste__chevron" aria-hidden="true">…</span>
         </button>

   Das Cover ist dekorativ: leerer Alt-Text, gelesen wird der
   sichtbare Titel (accessibility.md §25). Der Chevron ebenso —
   er ist Anzeige, kein zweiter Button. In Figma liegt dort eine
   Icon-Button-Instanz; ein Button im Button ist im Markup nicht
   möglich, und die Zeile ist ganzflächig tappbar.

   WÄHREND DES LADENS ersetzt der Spinner den Chevron — nie
   beide gleichzeitig. In Figma ist das ein Slot (`instanz`), im
   Markup wird der Inhalt der 45er Fläche getauscht.
   ============================================================ */

.optionsliste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);                    /* 36 */
  width: 100%;
  /* 16 nur links — rechts trägt der Chevron seine 45er Fläche
     und bringt den Rand selbst auf 20. Siehe Kopf. */
  padding-left: var(--space-md);           /* 16 */
  padding-right: 0;
  list-style: none;
  margin: 0;
}

/* Steht die Liste doch einmal in .overlay__inhalt, trägt der
   Block das seitliche Polster schon — dann hier keins, sonst
   sind es 32. */
.overlay__inhalt .optionsliste {
  padding-left: 0;
}

.optionsliste__eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Die Zeile ist der Button. 4 oben und unten, damit die
   Klickfläche nicht exakt auf der Textkante endet — die Höhe
   bestimmt der Chevron (45), nicht das Polster. */
.optionsliste__zeile {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                    /*  8 */
  width: 100%;
  padding-block: var(--space-2xs);         /*  4 */
  padding-inline: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}

/* Cover-Fassung: das führende Element ist 69 hoch und bestimmt
   damit die Zeile. Kein Polster — sonst springt die Höhe auf 77.
   Die Polster der beiden Fassungen nicht vereinheitlichen. */
.optionsliste__zeile--cover {
  gap: var(--space-sm);                    /* 12 */
  padding-block: 0;
}

/* Der Fokus-Ring folgt der sichtbaren Fläche (§14). Die Zeile
   IST die sichtbare Fläche — kein Padding-Wrapper, also greift
   der Ring aus base.css unverändert. Nur der Einzug wird auf 0
   gezogen, damit der Ring nicht über die Sheet-Kante hinausläuft. */
.optionsliste__zeile:focus-visible {
  outline-offset: 0;
}

/* Icon-Fläche 35 x 35, Icon 24 darin. Die Fläche ist leer — kein
   Fill, kein Rand. Sie hält nur die Spalte, damit Titel und
   Erklärung aller Zeilen auf einer Achse fluchten, auch wenn ein
   Icon schmaler ist als das andere. */
.optionsliste__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;                             /* gemessen, siehe Kopf */
  height: 35px;
  /* Die Icons im Sheet sind blau: sie zeichnen den Weg aus, den
     die Zeile anbietet. In Figma #56B2DD = text-accent. */
  color: var(--text-accent);
}

/* Cover 49 x 69, Radius 10. Das Bild füllt die Fläche und wird
   beschnitten, nicht verzerrt — Verlagscover haben nicht alle
   dasselbe Verhältnis. */
.optionsliste__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 49px;                             /* gemessen, siehe Kopf */
  height: 69px;
  overflow: hidden;
}

.optionsliste__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);         /* 10 */
}

.optionsliste__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;                                /* gemessen, siehe Kopf */
  flex: 1 0 0;
  min-width: 0;
}

/* ZWEI TITELGRÖSSEN, EINE JE FASSUNG (Lisi, 11.09.2026).

   Icon-Fassung: `medium text` bold (18). Die Zeile führt in
   einen Handlungsweg — „QR-Code scannen" ist eine Ansage, und
   sie trägt die Zeile allein; links steht nur ein 35er Icon.

   Cover-Fassung: `title text` bold (14 · 14 · 20). Dort listet
   die Zeile Titel auf, und daneben steht ein Cover, das die
   Zeile ohnehin trägt. Der Titel ist damit ein Karten-Titel und
   nimmt denselben Stil wie auf jeder Cover-Karte (`cover.css`,
   `einstellungen-liste.css`) — einschließlich der 1 %
   Letter-Spacing, die dieser Stil im System überall mitbringt.

   Auf die Höhe wirkt das nicht: der Textblock wird 44 statt 45,
   die Zeile bestimmt weiterhin das Cover mit 69. */
.optionsliste__titel {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.optionsliste__zeile--cover .optionsliste__titel {
  font-size: var(--font-size-title-text);
  line-height: var(--line-height-title-text);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
}

.optionsliste__erklaerung {
  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);
  color: var(--text-description);
}

/* Der Chevron sitzt in einer 45 x 45 grossen Fläche, wie in
   Figma. Die Fläche ist im Ruhezustand leer — sie richtet das
   Zeichen aus und hält rechts den Rand auf 20 (siehe Kopf).
   Das Zeichen selbst ist 4,5 x 10 und nicht quadratisch,
   deshalb eigene Maße statt .ikon. */
.optionsliste__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  color: var(--text-description);
}

.optionsliste__chevron svg {
  display: block;
  overflow: visible;
  width: 4.5px;
  height: 10px;
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Die Zeile ist ein neutrales Bedienelement auf ruhigem Grund —
   dieselbe Rolle wie Tertiär (§10.1a). Sie nimmt deshalb dessen
   Zustandsfarbe: ghost-fill-hover, kein Glow. Glow ist Buttons
   und Chips vorbehalten (§7).

   Hover nur auf Zeigergeräten — sonst klebt der Zustand auf dem
   Tablet nach dem Tippen fest (AGENTS.md §17).
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .optionsliste__zeile:hover {
    background-color: var(--button-ghost-fill-hover);
  }
}

.optionsliste__zeile:active {
  background-color: var(--button-ghost-fill-hover);
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die Zeile hat in Figma keinen Hover- und keinen
     Press-Zustand. Beide sind hier aus der Rolle abgeleitet
     (neutral, ruhiger Grund → wie Tertiär) und in Figma
     nachzuziehen.
   · Der 2-px-Abstand zwischen Titel und Erklärung liegt neben
     der Spacing-Skala.
   · Der Seitenrand des Sheets ist auf dem Tablet 24 statt 20 —
     wie der Screen-Rand. `--layout-screen-margin` hat in
     tokens.css bisher nur einen Wert (20) und keinen
     Tablet-Mode. Gehört in Figma in die Collection `layout` und
     danach in den Export; von Hand wird tokens.css nicht
     geändert (AGENTS.md §14).
   · Die Komponentenbeschreibung in Figma ist veraltet: sie nennt
     94 als Höhe beider Fassungen, Polster 24 bzw. 12 und eine
     Property „Trennlinie zeigen". Gemessen sind 53 und 69,
     Polster 4 bzw. 0, und die Trennlinie gibt es nicht mehr.
     Der Titel ist seit dem 11.09.2026 `title text bold`.
   ============================================================ */

/* ============================================================
   ERLEDIGT 11.09.2026 — der Abstands-Widerspruch von Anfang
   September
   ------------------------------------------------------------
   Hier stand ein Modifier `.sheet--figma-abstaende`, der den
   gap des Sheets von 24 auf 16 zog. Grund war die damalige
   Access-Sheet-Instanz in „Screens: App und Web" (13832:13947),
   die 16 trug — während sheet.css und §22.3 auf 24 standen.
   Der Widerspruch blieb offen.

   Die neue Fassung im Design System (11325:2665, 12063:6337)
   trägt 24 — also den Systemwert. Der Modifier ist damit
   hinfällig und ersatzlos entfernt. Wer ihn noch im Markup
   stehen hat, kann die Klasse streichen; sie tut nichts mehr.
   ============================================================ */