/* ============================================================ Komponente: cover (Titel-Karte in einer Cover-Reihe) ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" · Magazines cards horizontal scroll 13863:60286 (156 breit) · Cover / Hamburger Abendblatt 13780:13947 (100 breit) ausgelesen am 04.09.2026. Ein Cover mit Titel darunter. Zwei Breiten, ein Aufbau: .cover 156 breit — Magazine .cover--zeitung 100 breit — Zeitungen DAS SEITENVERHÄLTNIS IST IN BEIDEN GLEICH. Aus den Instanzhöhen zurückgerechnet: eine Magazin-Instanz ist 236 hoch (Cover + 8 Abstand + 21 Titel) → Cover 207. Bei zwei Titelzeilen wird die Instanz 257, das Cover bleibt 207. 156 / 207 = 0,7536 · 100 / 134 = 0,7463 — dieselbe Form. Deshalb aspect-ratio und keine festen Höhen: der Titel darf ein- oder zweizeilig sein, ohne dass das Cover mitwächst. Das ist genau der Fall, den §17.1 meint — verbindlich ist das Ergebnis, nicht der Aufbau. Setzt tokens.css und base.css voraus. VERWENDUNG Bild der Frau Das alt bleibt leer: der Titel steht als Text daneben, und ein Screenreader würde ihn sonst zweimal lesen. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 156 / 100 Breiten. 156 / 207 Seitenverhältnis des Covers. ============================================================ */ .cover { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); /* 8 */ width: 156px; /* gemessen, siehe Kopf */ flex-shrink: 0; text-decoration: none; color: var(--text-primary); cursor: pointer; } .cover--zeitung { width: 100px; } /* Rätsel-Kachel. Dieselbe Bauform, anderes Seitenverhältnis: 100 x 121,549 statt 100 x 134 (Figma 13844:15577). Ein Rätsel ist kein Titelblatt — es ist eine Vorschau auf ein Spielfeld und deshalb weniger hoch. */ .cover--raetsel { width: 100px; } .cover--raetsel .cover__bild { aspect-ratio: 100 / 121.549; } .cover__bild { width: 100%; aspect-ratio: 156 / 207; /* gemessen, siehe Kopf */ object-fit: cover; border-radius: var(--radius-sm); /* 10 */ background-color: var(--label-fill); /* 1 px label-outline. Als inset box-shadow und nicht als border: ein border liegt bei border-box INNEN und würde das Bild um 1 px beschneiden — bei einem Cover fällt das als abgeschnittener Rand des Titelkopfes auf. Der Schatten liegt darüber (AGENTS.md §8a). */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); } .cover__titel { font-family: var(--font-family-inter); font-size: var(--font-size-title-text); line-height: var(--line-height-title-text); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-small-text-bold); /* 1 % */ color: var(--text-primary); /* „Kreuzworträtsel" ist EIN Wort ohne Umbruchstelle und breiter als die 100 der Rätsel-Kachel. Ohne Trennung läuft es über den Nachbarn — am 04.09.2026 auf Entdecken zu sehen. hyphens: auto trennt nach der Sprache aus , overflow-wrap fängt den Rest. */ width: 100%; hyphens: auto; overflow-wrap: break-word; } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Das Cover IST das Bedienelement — es gibt keine Fläche darunter, die einen Hover tragen könnte. Deshalb Anheben statt Tönen: scale über transform, kein box-shadow (§23.1). Der Fokus-Ring liegt auf .on-image (base.css): ein weißer Ring auf einem hellen Cover verschwindet sonst, und ein Cover ist hell oder dunkel unabhängig vom Mode (§18). ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .cover:hover .cover__bild { transform: scale(1.03); } } .cover:active .cover__bild { transform: scale(0.98); } .cover__bild { transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } @media (prefers-reduced-motion: reduce) { .cover:hover .cover__bild, .cover:active .cover__bild { transform: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Der Favoriten-Stern auf dem Cover (§18, „Meine Titel") ist hier nicht Teil der Komponente — er kommt mit dem Favoriten-Raster. · Hover und Press stehen in Figma nicht an der Komponente. ============================================================ */