/* ============================================================ Komponente: meist-gelesen ------------------------------------------------------------ Quelle: Figma → meist gelesen, Tablet 13844:15556 (04.09.2026) Mobil 2297:24848 (07.09.2026, neu vermessen) Eine Rangliste in einer Karte: Ziffer, Cover, dann ein Textblock aus Label, Titel und Verlag. Zeilen durch Linien getrennt. DIE INSTANZ IST AM 11.09.2026 ERNEUERT WORDEN. Drei Dinge haben sich gegenüber der Fassung vom 07.09. geändert, an BEIDEN Breiten gleich (13844:15556 und 2297:24848): Reihenfolge TITEL, VERLAG, LABEL. Vorher stand das Label oben. Es liest sich jetzt als Begründung hinterher, nicht als Ankündigung davor. Zeilen alle drei gleich hoch (73). Die erste war vorher 81 hoch mit einem breiteren Cover — das ist weg. Polster rundum 16. Rechts standen vorher 24 in der Karte und noch einmal 16 am Textblock. DIE LABEL SIND BLAU, NICHT GRAU. Nach §21 heißt Blau „ohne Reaktion kommt er nicht weiter / verpasst etwas" — das trifft hier: es sind Hinweise, warum dieser Titel gerade oben steht. Sie sind nicht klickbar und tragen deshalb nur abgeschwächte Strokes (§5, Affordanz-Regel). Setzt tokens.css, base.css und components/status-label.css voraus. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 0,702 Seitenverhältnis des Covers (51,27 : 73). 73 Zeilenhöhe, für alle drei gleich. 33 Breite der Ziffernspalte MIT dem Abstand zum Cover: die Ziffer ist 17 breit, dahinter 16 Luft. Das Cover beginnt bei 33. 16 Abstand Cover → Text. 8 Abstand Verlag → Label. ============================================================ */ .meist-gelesen { display: flex; flex-direction: column; /* 32 zwischen zwei Zeilen: 16 bis zur Trennlinie und 16 wieder weg (Figma — Zeile 1 endet bei 97, Linie bei 113, Zeile 2 beginnt bei 129). Kein Token dafür, es sind zwei md. */ gap: calc(var(--space-md) * 2); /* Rundum 16 (Figma: Zeile bei x 16, Karte 674 breit, Zeile 642 — also links wie rechts 16). Bis zum 11.09.2026 standen hier 24 rechts. */ padding: var(--space-md); border-radius: var(--radius-md); background-color: var(--surface-card); /* Der Strich als innerer Schatten, nicht als border: er liegt in Figma INNEN und darf die automatische Höhe nicht vergrößern (AGENTS.md §8a). Nachgezogen am 04.09.2026. */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); list-style: none; margin: 0; } /* STRETCH, NICHT CENTER: das Cover ist genauso hoch wie der Textblock daneben und muss deshalb mitwachsen. */ .meist-gelesen__eintrag { position: relative; display: flex; align-items: stretch; gap: 0; } /* Die Trennlinie liegt MITTIG im Zwischenraum und nicht als padding-bottom am Eintrag. Mit Polster am Eintrag würde das gestreckte Cover über das Polster mitwachsen und wäre 16 zu hoch. Nach dem letzten Eintrag steht keine Linie. */ .meist-gelesen__eintrag:not(:last-child)::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-md)); height: var(--outline-default); background-color: var(--label-outline); } /* Die Ziffer ist H1 in text-description. In Figma trägt sie 29 px — den MOBILE H1-Wert auf einem Tablet-Frame — und -1 % Letter-Spacing. Hier gilt das H1-Token (34 auf Tablet) und kein negatives Letter-Spacing (Entscheidung Lisi, 04.09.2026). In Figma nachzuziehen. */ /* 33 FÜR ALLE DREI ZIFFERN. In Figma ist die Spalte bei der „1" nur 27 breit — der Rahmen legt sich um die Glyphe, und die „1" ist schmaler als „2" und „3". Dadurch beginnt das Cover der ersten Zeile 6 px weiter links als das der zweiten. Das ist ein Nebeneffekt des Auto-Layouts, keine Gestaltung: untereinander stehende Cover, die um 6 px versetzt sind, liest man als Fehler. Deshalb hier eine feste Spalte. */ .meist-gelesen__ziffer { flex-shrink: 0; /* Mittig in der Zeile — die Zeile ist jetzt stretch, also macht das der eigene Flexkasten. */ display: flex; align-items: center; justify-content: center; /* 33 EINSCHLIESSLICH des Abstands zum Cover, nicht zusätzlich: border-box, nicht content-box. Vorher waren es 33 + 16 = 49, und die Cover standen 16 zu weit rechts. */ box-sizing: border-box; width: 33px; /* gemessen, siehe Kopf */ padding-right: var(--space-md); font-family: var(--font-family-display); font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-bold); color: var(--text-description); text-align: center; } /* BREITE FEST, HÖHE AUS DEM VERHÄLTNIS. Zeile 1 ist höher als Zeile 2 und 3, das Cover wächst mit: 56,88 x 81 gegen 51,27 x 73 — beides 0,702. NICHT über align-self: stretch mit width: auto. Das sah richtig aus, war es aber nicht: bei einem Bild mit loading="lazy" ist die Eigenbreite null, solange es nicht geladen ist, und die Spalte fiel auf 0 zusammen. Eine feste Breite hängt an nichts. */ .meist-gelesen__cover { flex-shrink: 0; width: 51.27px; /* gemessen, siehe Kopf */ height: auto; aspect-ratio: 51.27 / 73; /* 0,702, gemessen */ object-fit: cover; border-radius: var(--radius-sm); background-color: var(--label-fill); box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); } /* Der Textblock: Titel, Verlag, Label. Der Abstand steht nur vor dem Label — Titel und Verlag hängen direkt aneinander (21 + 18 = 39, so gemessen). */ .meist-gelesen__texte { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 0; min-width: 0; /* Nur links. Rechts endet der Text bündig mit der Karte (Figma: Textbreite 541,73, Kartenrand bei 642). */ padding-left: var(--space-md); } .meist-gelesen__texte > .status-label { margin-top: var(--space-xs); /* 8 — gemessen */ } .meist-gelesen__quelle { font-family: var(--font-family-inter); font-size: var(--font-size-extra-small-text); line-height: var(--line-height-extra-small-text); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-small-text-bold); color: var(--text-description); } /* Einzeilig mit Auslassung. In Figma steht „Wie Stretching das Gehirn ver…" — der Titel bricht dort nicht um, weil die Zeile sonst höher würde als die gemessenen 73. */ .meist-gelesen__titel { align-self: stretch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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); color: var(--text-primary); } /* ============================================================ OFFEN ------------------------------------------------------------ · Ob eine Zeile klickbar ist, sagt Figma nicht. Hier ist sie es nicht — es fehlt ein Ziel. · Die Ziffer trägt in Figma den Mobile-H1-Wert. Siehe oben. · Beide Frames sind am 11.09.2026 neu vermessen und stimmen überein. ============================================================ */ /* ------------------------------------------------------------ Mobil ------------------------------------------------------------ Rundum 16 statt 16/24: der Inhalt steht in Figma bei x 16 und endet bei 337 von 353 (2297:24848). ------------------------------------------------------------ */ @media (max-width: 767px) { /* Nichts mehr. Seit dem 11.09.2026 sind beide Breiten gleich gebaut: rundum 16, Ziffernspalte 33 einschließlich Abstand. Der Abschnitt bleibt als Merkposten stehen — falls Figma die Breiten wieder auseinanderlaufen lässt, gehört es hierher. */ }