/* ============================================================ Komponente: shortcut ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Shortcut Media, node 13844:15459, ausgelesen am 04.09.2026. Sieben runde Abkürzungen zu den Medienarten, ganz oben auf Entdecken. Dieselben Kategorien wie im Inhalte-Overlay, nur ohne „Spiele". Setzt tokens.css und base.css voraus. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 75 Breite je Abkürzung. 60 Kreis. Über der Untergrenze von 44 (§11.2), unter dem Zielwert 48 — hier deutlich darüber, gut. 24 Icon. ============================================================ */ .shortcuts { display: flex; align-items: flex-start; gap: var(--space-xs); /* 8 */ /* Läuft über den Rand hinaus wie die Cover-Reihen. */ overflow-x: auto; overscroll-behavior-x: contain; margin-right: calc(-1 * var(--sektion-rand, var(--space-lg))); padding-right: var(--sektion-rand, var(--space-lg)); scrollbar-width: none; /* Die Liste bringt ihre Zurücksetzung selbst mit; der Abstand nach oben kommt vom Screen und braucht dort `ul` vor der Klasse (siehe prototyp.css §14). */ list-style: none; padding-block: 0; } .shortcuts::-webkit-scrollbar { display: none; } .shortcut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); /* 8 */ width: 75px; /* gemessen, siehe Kopf */ flex-shrink: 0; border: 0; background: none; cursor: pointer; color: var(--text-primary); } .shortcut__kreis { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 60px; /* gemessen, siehe Kopf */ height: 60px; border-radius: var(--radius-full); background-color: var(--label-fill); color: var(--text-accent); /* 1 px label-outline als inset box-shadow, damit der Kreis im Zustandswechsel nicht springt (AGENTS.md §15). */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); } .shortcut__ikon { display: block; overflow: visible; width: 24px; /* gemessen, siehe Kopf */ height: 24px; } /* Das Label darf zweizeilig werden („Magazine & Zeitungen"). Zeilenhöhe 1,25 aus Figma. OHNE NEGATIVES LETTER-SPACING. Figma trägt hier -2 % (tracking -0.28px). Die Tokens kennen nur +1 % für „small text bold"; ein negativer Wert ist im System nicht vorgesehen, und auf 14 px zieht er die Wörter merklich zusammen. Entschieden von Lisi am 04.09.2026: raus. In Figma nachzuziehen. OHNE DIE -2 % BRICHT „Magazine & Zeitungen" DREIZEILIG um — das „&" landet allein auf einer Zeile und die Reihe wird 17 px höher. Statt die Schrift zu stauchen hält ein geschütztes Leerzeichen im Markup „Magazine &" zusammen; der Umbruch liegt dann vor „Zeitungen", wie in Figma. Zwei Zeilen, ohne an der Laufweite zu drehen. DIE BREITE MUSS HIER STEHEN. Ohne sie ist der Text ein Flex-Kind, das breiter werden darf als seine Spalte: „Magazine & Zeitungen" lief mit 77 über die 75 der Abkürzung hinaus und rückte optisch an „Aktuelles" heran — die beiden lasen sich als eine Zeile. Mit width: 100% bricht der Text innerhalb seiner Spalte um. Die Schriftgröße stimmt (small text, 14, wie in Figma) und der Abstand von 8 auch; es war der Umbruch. Aufgefallen am 04.09.2026. DIE ZEILENHÖHE IST SEIT DEM 09.09.2026 AUCH IN FIGMA 21. Die Komponente „Media Navbar and shortcuts" (2659:25877) trug lange `leading: 1,25` und eine Laufweite von −2 % — aus einem Stil namens „Bottom Navigation", den die Bottom Nav gar nicht benutzt (die ist mobil Extra Small 12/18 und ab 768 Small Text 14/21). Ein Überbleibsel also. Der Prototyp rechnete von Anfang an mit dem Token 14 / 21, und damit war die Abkürzung hier 89 statt der 86 im Rahmen. Lisi hat die Ebenen auf `small text` gestellt. Nachgemessen: der Knoten bindet jetzt line-height/small und keine Laufweite, die Beschriftung ist 21 hoch und die Komponente 75 x 89 — genau das, was hier steht. Die Abweichung ist damit weg. Die Regel dahinter gilt weiter und überall: bei Fließtext schlägt das Typeface-Token eine abweichende Zeilenhöhe an der Ebene. REGULAR, NICHT BOLD (Lisi, 09.09.2026: „schrift sollte sein wie in figma regular"). Der Textknoten bindet in Figma weight/regular und size/small text — hier stand bold mit „title text". Die Größe ist in beiden Fällen 14, mobil wie auf dem Tablet; erst auf Desktop laufen die zwei Tokens auseinander (title text 20, small text 14). Deshalb jetzt small text, wie in Figma gebunden. Und damit fällt auch die Laufweite weg: 1 % gehört zum Stil „small text bold", der hier nicht mehr gilt. „small text" hat keine. */ .shortcut__label { 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); text-align: center; color: var(--text-primary); /* DIE BREITE ALLEIN REICHT BEI DEUTSCHEN WÖRTERN NICHT. „Kreuzworträtsel" ist EIN Wort ohne Umbruchstelle: die Spalte ist 75 breit, das Wort 120, und ohne Trennung läuft es einfach heraus und über den Nachbarn. Genau das war am 04.09.2026 auf Entdecken zu sehen. hyphens: auto trennt nach den Regeln der Sprache, die im steht — „Kreuzwort-rätsel" statt eines harten Bruchs mitten im Wort. KEIN overflow-wrap: break-word HIER. „Magazine &" ist durch das geschützte Leerzeichen eine Einheit von 81 und damit breiter als die Spalte; break-word zerhackt sie dann mitten im Wort und macht drei Zeilen mit einem einsamen „&". Ohne die Regel bleibt sie eine Zeile, ragt 3 px links und rechts in den Abstand von 8 und stößt an nichts an. */ width: 100%; hyphens: auto; } @media (hover: hover) and (pointer: fine) { .shortcut:hover .shortcut__kreis { background-color: var(--button-icon-button-fill-hover); box-shadow: inset 0 0 0 var(--outline-default) var(--button-icon-button-outline); } } .shortcut:active .shortcut__kreis { background-color: var(--button-icon-button-fill-press); box-shadow: inset 0 0 0 calc(var(--outline-default) * 2) var(--button-icon-button-outline-press); transform: scale(0.96); } .shortcut__kreis { transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out), 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) { .shortcut:active .shortcut__kreis { transform: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Die Zeilenhöhe 1,25 steht in Figma als eigener Textstil „Bottom Navigation" — derselbe Stil, der am 28.08.2026aus Figma entfernt wurde (base.css, .nav-label). Er ist hier wieder da. Zu klären, welcher Stil gilt. · Hover und Press STEHEN inzwischen an der Komponente (3749:6395 und 3749:6413) und sind am 04.09.2026 daraus übernommen: Hover icon-button-fill-hover mit 1 px icon-button-outline, Press icon-button-fill-press mit 2 px icon-button-outline-press. Vorher stand hier label-fill-inverted — geraten, nicht gemessen. ============================================================ */ /* ------------------------------------------------------------ Ohne Ziel ------------------------------------------------------------ „Aktuelles" und „Rätsel" sind im Prototyp nicht abgebildet. Sie stehen trotzdem da — der Screen soll zeigen, was es gibt, nicht nur was hier klickbar ist. Sie sind ein , kein