/* ============================================================ Komponente: suchliste ------------------------------------------------------------ Quelle: Figma „Screens: App und Web", am 09.09.2026 an allen vier ausgewählten Rahmen nachgemessen: mobil Start 2143:21548 · Kategorie gewählt 2000:17568 Tablet Start 13970:16656 · Kategorie gewählt 13970:16788 MOBIL UND TABLET SIND HIER GLEICH. Die Zeile ist auf beiden Breakpoints 21 hoch, die Zeilen stehen 36 auseinander, und Trennlinien gibt es auf keinem von beiden. Deshalb steht nichts mehr in einem Media Query. Bis zum 09.09.2026 stand hier für das Tablet eine andere Fassung — 48 Zeilenhöhe, Trennlinie, Icon 14, Abstand 12, Beifügung extra small. Die war aus einem Screenshot abgelesen, nicht gemessen, und ist damit erledigt. Die Zeilen unter der Suche: links ein Icon, das sagt, WOHER der Vorschlag kommt, dann der Begriff, rechts eine Beifügung. Lupe + Begriff + Kategorie häufig gesucht Uhr + Begriff + „vor 2 Tagen" zuletzt gesucht DAS ICON TRÄGT DIE HERKUNFT, nicht die Farbe. Beide Zeilenarten sehen gleich aus und unterscheiden sich nur im Icon und in der Beifügung rechts — genau so wie im Design System, wo sie als `search small` und `recent small` zwei Fassungen EINER Komponente sind (239:8506). DIE BEIFÜGUNG RECHTS GIBT NACH, nicht der Begriff. Wird es eng, kürzt „Magazine & Zeitungen" und nicht „Handelsblatt" — der Begriff ist das, wonach getippt wird. Setzt tokens.css und base.css voraus. VERWENDUNG ------------------------------------------------------------ KEINE TRENNLINIEN. Die Zeilen „Search screen elements" sind je 21 hoch — eine Zeile Text, kein Polster, kein Strich — und stehen 36 auseinander. Die einzige Linie in den Rahmen steht unter dem letzten Block. Getrennt wird durch Luft. Damit ist die Zeile als Ziel zu klein. Die Untergrenze von 44 (§11.2) trägt .touch-target am Knopf: die Trefferfläche liegt als ::after mittig über der Zeile und wächst in den Abstand hinein, ohne ihn zu verändern. Bei 21 Text und 36 Luft reicht das — 44 braucht 11,5 nach oben und unten, da sind 18. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 21 Zeilenhöhe — genau eine Zeile small text (14 / 21). 36 Abstand zwischen zwei Zeilen (--space-xl). 14,578 Lupe, 15,75 Uhr. Native Größen der Figma-Komponenten. ============================================================ */ ul.suchliste { display: flex; flex-direction: column; gap: var(--space-xl); /* 36 — gemessen */ width: 100%; margin: 0; padding: 0; list-style: none; } .suchliste__zeile { display: flex; align-items: center; /* 16 zwischen Lupe und Begriff (I2143:21562). */ gap: var(--space-md); width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } .suchliste__ikon { display: block; overflow: visible; flex-shrink: 0; width: 14.58px; /* gemessen, siehe Kopf */ height: 14.58px; color: var(--text-primary); } /* DIE UHR IST GRÖSSER ALS DIE LUPE — 15,75 gegen 14,578 (Figma I2143:21568;3767:7671 gegen I2143:21562;3767:7633). Ein Pixel Unterschied, aber gemessen ist gemessen. */ .suchliste__ikon--uhr { width: 15.75px; /* gemessen, siehe Kopf */ height: 15.75px; } .suchliste__begriff { flex-shrink: 0; 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-primary); } /* Rechts, und sie ist die, die nachgibt. */ .suchliste__beifuegung { flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; /* SO GROSS WIE DER BEGRIFF. Beide tragen small text 14 / 21; unterschieden werden sie über die Farbe, nicht über die Größe. GRAY 500 UND NICHT text-description. Der Figma-Knoten bindet Colors/Gray/Gray 500 (#78909C) unmittelbar, nicht das semantische Token (#8EA5B1 in Dark) — eine Stufe dunkler. Übernommen wie gemessen, siehe OFFEN. */ 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(--gray-500); } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Die Zeile hat keine eigene Fläche, auf die ein Hover legen könnte, ohne über die Trennlinien zu laufen. Deshalb hellt sich das Icon auf und der Begriff bleibt — dieselbe Zurückhaltung wie am facette-header. ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .suchliste__zeile:hover .suchliste__ikon { color: var(--text-accent); } .suchliste__zeile:hover .suchliste__begriff { color: var(--text-accent); } } .suchliste__zeile { transition: color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } @media (prefers-reduced-motion: reduce) { .suchliste__zeile { transition: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Erledigt am 09.09.2026: die Maße sind an allen vier Rahmen gemessen, nicht mehr aus einem Screenshot abgelesen. · Die Beifügung bindet in Figma die Palettenfarbe Gray 500 statt eines semantischen Tokens. Entweder gehört dort text-description hin, oder es braucht ein eigenes Token. Zur Klärung an Lisi. · Im Design System gibt es die Zeilen schon als „Search screen elements" (239:8506) mit den Fassungen recent small · search small · search · author · category · cover — dort sind sie 357 x 21 bzw. 357 x 60. Diese Datei deckt nur die zwei kleinen ab, die in den beiden Screens vorkommen. Die vier anderen fehlen. · Hover steht nicht an der Komponente. ============================================================ */