/* ============================================================ Komponente: sektion (Sektions-Header + Cover-Reihe) ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" · Sektion / Regionale Tageszeitungen 12850:11197 · Frisör Mustermann empfiehlt 13863:60272 ausgelesen am 04.09.2026. Das Sektions-Header-Pattern aus SKILL.md §8, in zwei Klassen: Klasse 1 Titel allein (selbsterklärende Sektion) Klasse 2 Titel + Sub-Info (ohne Erklärung mehrdeutig) Rechts steht immer der Link „Alle →". Setzt tokens.css, base.css und components/link-button.css voraus. Für die Reihe zusätzlich components/cover.css. VERWENDUNG

Regionale Tageszeitungen

Aktuelle Ausgabe

…Cover…
------------------------------------------------------------ DIE REIHE LÄUFT ÜBER DEN RAND In Figma ist die Cover-Reihe breiter als der Inhaltsbereich — sie ragt rechts über den Screen hinaus. Das ist kein Überlauf-Fehler, sondern die Ansage „hier geht es weiter". Umgesetzt über einen negativen Außenabstand rechts in Höhe des Screen-Randes: die Reihe reicht damit bis an die Screenkante, und was danach kommt, ist gescrollt. Das Polster rechts INNEN sorgt dafür, dass das letzte Cover am Ende des Scrollens nicht an der Kante klebt. --sektion-rand kommt vom Screen, nicht von hier — die Reihe weiß nicht, wie breit der Rand ist, in dem sie liegt. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 45 Höhe der Kopfzeile. Sie folgt dem Link Button, der das Touch-Target trägt — nicht dem Titel. ============================================================ */ .sektion { display: flex; flex-direction: column; gap: var(--space-sm); /* 12 */ } .sektion__kopf { display: flex; align-items: center; gap: var(--space-xs); min-height: 45px; /* gemessen, siehe Kopf */ } .sektion__titelblock { display: flex; flex-direction: column; gap: var(--space-2xs); /* 4 */ flex: 1 0 0; min-width: 0; } /* H3, Outfit Bold, text-primary — so schreibt es §8 vor. Die Größe kommt aus dem Token und wechselt mit dem Breakpoint (Tablet 22). */ .sektion__titel { font-family: var(--font-family-display); font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-bold); color: var(--text-primary); } /* Sub-Info: extra small oder small in text-description (§8). Hier extra small, so gemessen. */ .sektion__sub { 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); color: var(--text-description); } /* ------------------------------------------------------------ Cover-Reihe ------------------------------------------------------------ */ .sektion__reihe { display: flex; align-items: flex-start; gap: var(--space-sm); /* 12 */ overflow-x: auto; /* Fasst man die Reihe an, soll nicht die Seite mitscrollen. */ overscroll-behavior-x: contain; /* Bis an die Screenkante und darüber hinaus. Der Rand kommt vom Screen. */ /* NACH BEIDEN SEITEN, NICHT NUR NACH RECHTS (15.09.2026, Lisi: „der horizontal scroll sollte wenn man scrollt bis ans ende gehen, nicht abgeschnitten. bis an an die kante"). Nur rechts zu überlaufen reicht nicht: beim Scrollen wurden die Kacheln schon am Screenrand-Abstand abgeschnitten, also 24 (bzw. mobil 20) VOR der Kante. Dazwischen blieb ein toter Streifen, in dem nichts mehr zu sehen war — im Rahmen laufen sie bis an die Kante heraus. Das Polster hält den ersten Eintrag trotzdem am Screenrand, solange nicht gescrollt ist. Sichtbar ändert sich also nur der ABGANG. */ margin-inline: calc(-1 * var(--sektion-rand, var(--space-lg))); padding-inline: var(--sektion-rand, var(--space-lg)); /* Kein Scrollbalken: in Figma ist keiner, und auf dem Tablet gibt es keinen. Auf dem Zeigergerät bleibt das Scrollen über Rad und Trackpad möglich, und die Reihe läuft sichtbar über den Rand — das ist die Affordanz. ZU KLÄREN: reicht das für Maus-Bedienung im Web? */ scrollbar-width: none; } .sektion__reihe::-webkit-scrollbar { display: none; } /* DER FOKUS-RING BRAUCHT LUFT, UND DIE LUFT DARF NICHTS VERSCHIEBEN. overflow-x: auto schneidet auch oben und unten ab — ohne Polster wäre der Ring des ersten Covers gekappt. Das Polster wird durch negative Außenabstände wieder herausgerechnet: die Reihe liegt danach genau dort, wo sie ohne beides läge. 4 px Ring-Abstand plus 2 px Ring. */ .sektion__reihe { --fokus-luft: calc(var(--focus-ring-offset) + var(--focus-ring-width)); /* 6 */ padding-block: var(--fokus-luft); margin-block: calc(-1 * var(--fokus-luft)); } /* ------------------------------------------------------------ Abstand Kopf zu Reihe: 12 oder 16 ------------------------------------------------------------ FIGMA WIDERSPRICHT SICH HIER. Auf der Inhalte-Seite haben alle elf Sektionen 12 (Cover-Reihe bei y=57 bis 59 unter einem 45er Kopf). Auf „Vor Ort" hat die einzige Sektion 16 (Cover-Reihe bei y=61). Nachgemessen am 04.09.2026. 12 ist deshalb der Standard, 16 eine benannte Variante — statt einen Mittelwert zu erfinden oder die Mehrheit zu überstimmen. IN FIGMA ZU KLÄREN: einer der beiden Werte ist ein Versehen. ------------------------------------------------------------ */ .sektion--luft { gap: var(--space-md); /* 16 */ } /* HIER STAND `.sektion__reihe--luft` MIT 16 (10.09.2026, angeblich gemessen an 1678:13455 und 14058:49009, „wo die Karten breit sind, sind die 12 zu eng"). Das war falsch abgelesen. Im Auto-Layout der Reihe „Meist gelesene E-Books" steht 12 — Lisi am 15.09.2026 mit dem Figma-Panel daneben: „hier muss auch 12 gap sein zwischen den beiden … zwischen covern und cards überall 12". Die Variante ist damit ersatzlos weg, nicht auf 12 gesetzt: eine benannte Fassung, die dasselbe tut wie der Standard, ist eine zweite Stelle für denselben Wert — und genau die laufen auseinander. NICHT ZU VERWECHSELN mit `.sektion--luft` gleich darüber. Die gilt senkrecht, zwischen Kopf und Reihe, und bleibt: waagerecht ist überall 12, senkrecht nicht. */ /* ------------------------------------------------------------ Chip-Leiste in einer Sektion ------------------------------------------------------------ Manche Sektionen tragen zwischen Kopf und Reihe eine Chip-Leiste („Beliebte Magazine", Figma 13844:15571). Der Abstand Kopf → Leiste ist der Abstand der Sektion (12, Figma 55 → 67), der Abstand Leiste → Reihe ist 16 (Figma 112 → 128). Die 4 Unterschied stehen deshalb hier — und davon geht das Polster ab, das die Leiste für Fokus-Ring und Glow mitbringt (chip-leiste.css). Ergänzt am 11.09.2026. ------------------------------------------------------------ */ .sektion__chips { margin-bottom: calc(var(--space-2xs) - var(--fokus-luft)); } /* ============================================================ OFFEN ------------------------------------------------------------ · Der Titel ist in Figma auf BEIDEN Screens Outfit ExtraBold, SKILL.md §8 sagt Bold. In Figma ist es eine losgelöste Textebene ohne benannten Stil — deshalb folgt diese Datei §8. Wenn ExtraBold gewollt ist, gehört es in §8 und in base.css, nicht hierher. · Ob der versteckte Scrollbalken im Web reicht, ist offen. ============================================================ */