/* ============================================================ Komponente: optionsliste ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Access sheet, node 13832:13947, ausgelesen am 04.09.2026. Eine Liste benannter Wege, jeder mit Icon, Titel, Erklärung und Chevron. Sitzt im Sheet „Zugang aktivieren" und im Sheet „Standort wechseln". 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. VERWENDUNG ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 35 Icon-Fläche (Figma size-[35px]). Nicht auf der Skala. 2 Abstand Titel zu Erklärung (Figma gap-[2px]). Die Skala beginnt bei 4. 4,5 x 10 Chevron. Native Größe der Figma-Komponente. ZU KLÄREN: gehen die 2 auf --space-2xs (4)? ============================================================ */ .optionsliste { display: flex; flex-direction: column; align-items: flex-start; width: 100%; /* Im Sheet trägt .overlay__inhalt die 16 seitlich (§22.2a). Steht die Liste anderswo, kommt das Padding von dort. */ list-style: none; margin: 0; padding: 0; } .optionsliste__eintrag { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } /* Die Trennlinie gehört an den Eintrag, nicht an die Zeile: sie liegt unter der Klickfläche und darf nicht mit ihr den Zustand wechseln. Nach dem letzten Eintrag steht keine — eine Linie trennt, und unter dem letzten ist nichts mehr zu trennen. */ .optionsliste__eintrag:not(:last-child) { border-bottom: var(--outline-default) solid var(--label-outline); } /* Die Zeile ist der Button. Das Padding von 24 oben und unten ergibt eine Klickfläche von 92 px — weit über der Untergrenze von 44 (§11.2), und das ist gewollt: hier wird im Wartebereich einhändig und ohne Einarbeitung getroffen. */ .optionsliste__zeile { display: flex; align-items: center; gap: var(--space-xs); /* 8 */ width: 100%; padding-block: var(--space-lg); /* 24 */ padding-inline: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-primary); } /* 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); } .optionsliste__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; /* gemessen, siehe Kopf */ flex: 1 0 0; min-width: 0; } .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__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); } /* 4,5 x 10 aus Figma, nicht quadratisch — deshalb eigene Maße statt .ikon. */ .optionsliste__chevron { display: block; overflow: visible; flex-shrink: 0; width: 4.5px; height: 10px; color: var(--text-description); } /* ------------------------------------------------------------ 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. ============================================================ */ /* ============================================================ NACHTRAG 04.09.2026 — Sheet-Abstände nach Figma ------------------------------------------------------------ Entschieden von Lisi: bei einem Widerspruch zwischen Figma und dem Design System gilt das gemessene Maß aus Figma. sheet.css setzt zwischen Grabber, Kopf und Aktionen --space-lg (24) und beruft sich auf SKILL.md §22.3, bestätigt am 31.08.2026. Die Access-Sheet-Instanz in „Screens: App und Web" (13832:13947) trägt dort aber „rows-gap-small" = 16, nachgemessen am 04.09.2026: der Titel sitzt sonst 9 px zu tief. Der Wert wird NICHT in sheet.css geändert (AGENTS.md §16: nichts Bestehendes anfassen), sondern hier als Modifier überschrieben. Wer das Sheet ohne .sheet--figma-abstaende benutzt, bekommt weiterhin die 24 des Systems. IN FIGMA ODER IM SYSTEM NACHZUZIEHEN: einer der beiden Werte ist falsch, und diese Datei ist nicht der Ort, das zu entscheiden. ============================================================ */ .sheet--figma-abstaende { gap: var(--space-md); /* 16 statt 24 */ }