/* ============================================================ Komponente: favorit ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Favorit / …, node 13865:14941, ausgelesen am 04.09.2026. Ein Cover im Favoriten-Raster, mit dem Stern-Knopf oben rechts DARAUF. Deshalb eine eigene Datei und keine Variante von cover.css: dort liegt nichts über dem Bild, und das Seitenverhältnis ist ein anderes (122,7 / 174 statt 156 / 207). DER STERN IST EIN BEDIENELEMENT ÜBER INHALT (SKILL.md §18). Dort gilt: „Mode-Regeln gelten nicht — ein Cover ist hell oder dunkel, unabhängig vom Theme." Fläche deshalb --overlay-action-fill, nicht ein Surface-Token. Setzt tokens.css und base.css voraus. VERWENDUNG
FOCUS
------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 122,7 / 174 Cover. Verhältnis 0,7052. 33,2 x 33,4 Stern-Scheibe. UNTER 44 (§11.2) — die Klickfläche wächst über .touch-target. 12,2 x 11,6 Stern-Glyphe. 5 Abstand der Scheibe von der Coverkante. ============================================================ */ .favorit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); /* 8 */ min-width: 0; } .favorit__cover { position: relative; width: 100%; } .favorit__bild { width: 100%; aspect-ratio: 122.7 / 174; /* gemessen, siehe Kopf */ object-fit: cover; border-radius: var(--radius-sm); background-color: var(--label-fill); /* 1 px label-outline als inset box-shadow, nicht als border: ein border liegt innen und würde das Bild um 1 px beschneiden (AGENTS.md §8a). */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); } .favorit__stern { position: absolute; top: 5px; /* gemessen, siehe Kopf */ right: 5px; display: flex; align-items: center; justify-content: center; /* 29,776 x 30 aus der Komponente „Favoriten cover icon button" (11210:577), nicht die 33,2 x 33,4 der gedehnten Instanz im Screen. Dasselbe Maß wie am ✕ der Fortsetzen-Karte — dieselbe Familie, dieselbe Größe. Lisi, 04.09.2026: „nimm die komponentenwerte". */ width: 29.78px; height: 30px; border: 0; border-radius: var(--radius-full); /* §18: Bedienelement über Inhalt. Der Fill ist ein echtes Token, der Blur ein Figma-Effekt ohne Variable. */ background-color: var(--overlay-action-fill); backdrop-filter: blur(var(--overlay-blur)); /* WEISS IN BEIDEN MODES, nicht text-primary (korrigiert 09.09.2026, Lisi: „der stern ist schwarz obwohl er im design system immer weiß ist, egal ob light oder dark mode"). text-primary kippt in Light auf Schwarz — die Scheibe darunter tut das nicht: overlay-action-fill zeigt auf surface-hintbox, und das ist in tokens.css ausdrücklich als mode-invariant markiert (rgba(33,44,62,0.85)). Ein schwarzer Stern auf dunkler Scheibe war praktisch unsichtbar. In Figma stehen beide Zeichnungen der Komponente „Favoriten cover icon button" (11210:577) auf #FCFDFD — der Umriss als stroke, der gefüllte zusätzlich als fill. Das ist --white, mode-unabhängig. */ color: var(--white); cursor: pointer; } /* IN EINER COVER-REIHE. Auf „Meine Titel" liegen die Favoriten in einem Raster, das die Breite vorgibt; in einer waagerecht scrollenden Reihe (Entdecken) gibt es die nicht — dort trägt der Favorit dieselbe Breite wie ein Cover daneben. */ .favorit--in-reihe { width: 156px; /* wie .cover */ flex-shrink: 0; } .favorit__stern > svg { display: block; overflow: visible; width: 12.2px; /* gemessen, siehe Kopf */ height: 11.6px; } /* Der Fokus-Ring liegt auf .on-image (base.css): ein weißer Ring auf hellem Cover verschwindet sonst. */ .favorit__titel { 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-bold); letter-spacing: var(--letter-spacing-small-text-bold); /* 1 % */ color: var(--text-primary); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Der Stern ist ein Umschalter: gedrückt heißt „ist Favorit". Der Zustand hängt an aria-pressed. Im nicht gedrückten Zustand ist der Stern ein Umriss — Form plus Farbe, nicht Farbe allein (WCAG 1.4.1). ------------------------------------------------------------ */ .favorit__stern[aria-pressed="false"] > svg { /* Umriss statt Füllung. Das Symbol im Sprite ist gefüllt; hier wird die Füllung entfernt, damit nicht zwei Sterne im Sprite liegen, die sich nur darin unterscheiden. */ fill: none; } .favorit__stern[aria-pressed="false"] > svg :where(path, use) { fill: none; } @media (hover: hover) and (pointer: fine) { .favorit__stern:hover { transform: scale(1.08); } } .favorit__stern:active { transform: scale(0.94); } .favorit__stern { transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } @media (prefers-reduced-motion: reduce) { .favorit__stern:hover, .favorit__stern:active { transform: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Der Blur steht in Figma auf 2, das Token --overlay-blur auf 4. Hier gilt das Token — ein Unschärferadius ist kein Abstandsmaß, und §18 nennt die 4 ausdrücklich als übernommenen Komponentenwert. In Figma zu prüfen. · §18 nennt zusätzlich einen Icon-Saum (--overlay-icon-shadow) für Icons auf Bildern. Der Export dieser Komponente trägt keinen. Zu klären. · Den nicht gedrückten Zustand zeigt Figma nicht — er ist hier aus der Umschalter-Rolle abgeleitet. ============================================================ */