/* ============================================================ 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 REIHENFOLGE IM TEXTBLOCK HAT SICH GEÄNDERT (07.09.2026). Vorher: Quelle über dem Titel, Label darunter. Jetzt wie in Figma: LABEL, TITEL, VERLAG. Das Label steht damit an der Stelle, an der man liest, warum die Zeile hier oben ist — vor dem Titel und nicht als Nachtrag. 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). DIE ERSTE ZEILE IST GRÖSSER. In Figma sind Zeile 2 und 3 je 73 hoch, Zeile 1 dagegen 81 — der Abstand zwischen Label und Titel ist dort 16 statt 8. Die Höhe zieht das Cover mit, das in Zeile 1 deshalb 56,9 statt 51,3 breit ist. Das liest sich als Auszeichnung des ersten Platzes und ist so übernommen. 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 / 81 Zeilenhöhe: Zeile 2 und 3 / Zeile 1. 33 Breite der Ziffernspalte. 16 Abstand Ziffer → Cover → Text. 8 / 16 Abstand Label → Titel (Zeile 2+3 / Zeile 1). ============================================================ */ .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); /* Padding nicht symmetrisch, so gemessen: 16 links, 24 rechts. */ padding: var(--space-md) var(--space-lg) var(--space-md) 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; width: 33px; /* gemessen, siehe Kopf */ padding-right: var(--space-md); box-sizing: content-box; 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: Label, Titel, Verlag. Der Abstand steht nur zwischen Label und Titel — 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; padding-inline: var(--space-md); } .meist-gelesen__texte > .status-label { margin-bottom: var(--space-xs); /* 8 — gemessen */ } .meist-gelesen__eintrag--erster .meist-gelesen__texte > .status-label { margin-bottom: var(--space-md); /* 16 — siehe Kopf */ } .meist-gelesen__eintrag--erster .meist-gelesen__cover { width: 56.88px; /* gemessen, siehe Kopf */ } .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. · Der Tablet-Frame ist seit dem 04.09.2026 nicht wieder vermessen. Die neue Anordnung (Label, Titel, Verlag) gilt dort mit, die Abstände stehen aber noch auf den alten Werten — unter anderem die 16 zwischen Ziffer und Cover, die es mobil nicht gibt. · Zeile 1 ist 8 px höher als Zeile 2 und 3. Übernommen als Auszeichnung des ersten Platzes — falls das in Figma nur ein Versehen war, fällt hier eine Zeile weg. ============================================================ */ /* ------------------------------------------------------------ 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) { .meist-gelesen { padding: var(--space-md); } /* KEIN ABSTAND ZWISCHEN ZIFFER UND COVER. In Figma sitzt das Cover unmittelbar an der Ziffernspalte (Frame 234 endet bei 27, das Cover beginnt bei 27). Die 16, die auf dem Tablet gemessen wurden, gibt es mobil nicht. */ .meist-gelesen__ziffer { padding-right: 0; } }