/* ============================================================
Komponente: cover-gitter
------------------------------------------------------------
Quelle: aus dem Prototypen übernommen (prototyp.css), gemeldet
am 11.09.2026. Kein eigener Figma-Node — das Gitter ist die
Anordnung, die Cover-Komponente selbst liegt in cover.css.
Ein Raster aus Covern, das die Breite füllt: Kategorie-Listen,
Suchergebnisse, „alle Titel". Es ist ein LAYOUT, kein
Seitendetail — deshalb steht es hier und nicht im Prototypen.
Setzt tokens.css, base.css und cover.css voraus.
------------------------------------------------------------
DER UNTERSCHIED ZUR COVER-REIHE
In einer waagerecht scrollenden Reihe hat das Cover seine
feste Breite aus Figma (156 bzw. 100, cover.css) und die Reihe
scrollt. Im Gitter ist es umgekehrt: die Spaltenzahl ergibt
sich aus der Breite, und das Cover füllt seine Spalte.
Deshalb hebt diese Datei die feste Breite auf — aber NUR
innerhalb des Gitters. `cover.css` bleibt unangetastet, und
ein Cover in einer Reihe behält seine gemessene Breite.
DAS SEITENVERHÄLTNIS BLEIBT. Das Bild rechnet seine Höhe aus
der Breite (`aspect-ratio` in cover.css), also wächst und
schrumpft das Cover als Ganzes. Hier steht keine Höhe.
------------------------------------------------------------
DIE SPALTEN ZÄHLT DER BROWSER, NICHT DER SCREEN
`auto-fill` mit einer Untergrenze statt einer festen
Spaltenzahl je Breakpoint: das Gitter passt sich auch in einem
schmalen Panel richtig an, nicht nur am Fenster. Eine feste
Zahl stimmt auf einem Screen und ist auf dem nächsten falsch —
dieselbe Begründung wie bei der gemessenen Scroll-Strecke im
klebenden Kopf (SKILL.md §26).
Untergrenze mobil 150 (korrigiert 11.09.2026, siehe unten),
ab 768 dann 140.
DASS DIE MOBILE UNTERGRENZE GRÖSSER IST ALS DIE AUF DEM
TABLET, ist kein Fehler. Die Zahl ist keine Wunschbreite,
sondern die Schwelle, ab der eine Spalte mehr hineinpasst.
Mobil soll sie hoch liegen, damit es bei zwei Spalten bleibt
und die Cover groß genug sind; auf dem Tablet ist so viel
Breite da, dass schon 140 zu vier Spalten à 143 führt. Wer die
beiden Werte „angleicht", bekommt auf dem Telefon wieder drei
zu kleine Cover.
VERWENDUNG
------------------------------------------------------------
NACHGEMESSEN (11.09.2026, nach der Korrektur auf 150)
390 Viewport → 2 Spalten à 169
ab ~514 → 3 Spalten
768 (609 neben dem Navigationsstreifen)
→ 4 Spalten à 143
GESETZTE MASSE OHNE TOKEN-GRUNDLAGE
150 Spalten-Untergrenze mobil. Keine Kachelbreite, sondern
die Schwelle, ab der ein Telefon von zwei auf drei
Spalten geht.
140 Spalten-Untergrenze ab 768.
110 dasselbe für --zeitung ab 768. Mobil stehen dort drei
feste Spalten (109,67 bei 393).
============================================================ */
.cover-gitter {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
/* Zeilen 16, Spalten 12. Zwischen zwei Zeilen steht ein Titel,
zwischen zwei Spalten nur Luft — deshalb senkrecht mehr. */
gap: var(--space-md) var(--space-sm); /* 16 / 12 */
}
@media (min-width: 768px) {
.cover-gitter {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
/* ------------------------------------------------------------
Zeitungen (14.09.2026)
------------------------------------------------------------
Zeitungscover sind schmaler als Magazincover — in der Reihe
100 statt 156 (cover.css). Im Gitter passen deshalb mehr
nebeneinander: 3 statt 2 mobil, 5 statt 4 auf dem Tablet.
Quelle: Figma „Magazine und Zeitungen / Top Zeitungen"
(7863:10796). Der Rahmen dort rechnet sich nicht aus — die
Kacheln stehen mit 110 bei x 0 / 126 / 252, das sind 362 und
damit neun mehr, als zwischen die Ränder passen. Er führt den
senkrechten Abstand (16) auch waagerecht. Mit 12 geht es auf:
3 x 109,67 + 2 x 12 = 353 — dieselbe Aufteilung wie beim
Favoriten-Gitter in „Meine Titel Mobile", wo sie so gemessen
ist. Die Fassung bleibt deshalb bei den 16 / 12 der Komponente.
SEIT 15.09.2026 IST DAS KEINE ABWÄGUNG MEHR, SONDERN FESTGELEGT:
waagerecht ist zwischen Covern und Karten überall 12 (SKILL.md
§25c). Wo ein Figma-Rahmen dort 16 zeigt, ist der Rahmen der
Fehler — bei „Top Zeitungen" addieren sich die drei Kacheln
dadurch auf 362 statt 353. Senkrecht bleiben die 16: zwischen
zwei Zeilen steht ein Titel, der Abstand trägt dort mehr als
nur Luft.
MOBIL IST DIE DREI GENANNT, NICHT GERECHNET. Eine Untergrenze
fiele bei 320 Breite auf zwei Spalten zurück; drei sollen es
auf jedem Telefon sein.
------------------------------------------------------------ */
.cover-gitter--zeitung {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 768px) {
.cover-gitter--zeitung {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
}
/* Im Gitter füllt das Cover seine Spalte. Gilt für alle
Fassungen — auch --zeitung und --raetsel, die in der Reihe
100 breit sind. Ihr Seitenverhältnis behalten sie. */
.cover-gitter .cover {
width: 100%;
}
/* Der Titel steht auf zwei Zeilen. Mehr würde die Zeilen des
Gitters ungleich hoch machen, und das Raster ist das, was hier
Ordnung schafft. */
.cover-gitter .cover__titel {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* ============================================================
ZWEI ZEILEN SIND ENTSCHIEDEN (Lisi, 11.09.2026)
------------------------------------------------------------
Der Titel unter einem Cover läuft über höchstens zwei Zeilen.
Grund: Mit drei Zeilen stehen die Karten ungleich tief, die
Abstände im Raster werden unregelmäßig, und das Gitter
verliert genau die Ordnung, für die es da ist. Die meisten
Titel gehen sich in zwei Zeilen aus; länger ist die Ausnahme.
Das ist die eine benannte Ausnahme zu accessibility.md §3
(„Umbruch statt Abschneiden") und steht dort auch so.
Was dabei NICHT verloren geht: der Screenreader liest den
ganzen Titel. Abgeschnitten wird das Bild, nicht der
zugängliche Name — die Karte ist EIN Link mit dem vollen Titel
als Namen.
Was verloren gehen kann: bei sehr großer Systemschrift trifft
die Klemme auch kürzere Titel. Wer das prüft, prüft es bei
200 % (accessibility.md §25) und sieht dort, wie viel vom
Namen übrig bleibt.
NICHT ÜBERALL. Die Klemme gilt im Gitter, nicht am Cover
selbst — in der scrollenden Reihe bleibt der Titel frei
(cover.css, mit hyphens: auto). Deshalb steht sie hier und
nicht dort.
============================================================ */