Vorwort-Seite: Rasenbild bis zur Blattkante

Unter dem einblendenden Rasenbild blieb ein weißer Streifen, responsiv wurde er
größer. Gemessen bei 390px Viewport: Seite 559px hoch, Vorwort 515px — 44px
Lücke.

Ursache lag nicht am Vorwort, sondern an der Seite: .stadionzeitung-viewer__page
ist display:flex, und der Flex-Default align-items:stretch streckt die Seite auf
die Höhe der Flex-Zeile und übersteuert ihre aspect-ratio. Die Seite war damit
gar kein A5 mehr (559/363 statt 210/148) — das betraf ALLE Seiten, sichtbar wurde
es nur beim Vorwort, weil dort ein Bild die Blattkante erreichen muss.

align-items: center behebt es an der Wurzel: alle Seiten sind wieder exakt A5,
Lücke 0px. Zusätzlich bekommt das Vorwort min-height: calc(100% + 2x Padding) als
Absicherung — die aspect-ratio trägt weiter, wenn die Seite keine definite Höhe
hat (No-JS-Stapel, Druck), die min-height füllt sie, wenn sie eine hat.

Gemessen vorher/nachher, Desktop-Viewer per Screenshot gegengeprüft.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 17:43:52 +02:00
parent a63822f3d4
commit 344727bed0

View File

@@ -5343,6 +5343,13 @@ a.match-row__link:hover {
.stadionzeitung-viewer.is-enhanced .stadionzeitung-viewer__page {
display: flex;
/* align-items MUSS gesetzt sein: der Flex-Default `stretch` streckt die Seite auf
die Höhe der Flex-Zeile und übersteuert damit ihre aspect-ratio — bei 390px
Viewport war die Seite 559px statt 515px hoch, also gar kein A5 mehr. Sichtbar
wurde das nur auf der Vorwort-Seite, deren Rasenbild bis zur Blattkante reichen
muss: darunter blieben 44px weiß (31.07.2026). Die anderen Seiten sind oben
ausgerichtet und weiß, dort fällt eine zu hohe Seite nicht auf. */
align-items: center;
flex: 0 0 100%;
/* Ohne das schrumpft ein Flex-Item nie unter die Content-Breite seiner
Kinder (Default: min-width:auto) — eine breite Tabelle in der
@@ -6065,6 +6072,13 @@ body.is-sz-full .back-to-top {
nicht, das erzeugt noch keinen Stacking-Context). */
z-index: 0;
aspect-ratio: 148 / 210;
/* Gürtel und Hosenträger: die aspect-ratio gibt der Box eine Fläche, wenn die
Seite keine definite Höhe hat (No-JS-Stapel, Druck). Hat sie eine, füllt
min-height die Seite wirklich aus — 100% plus das doppelte Seiten-Padding,
weil der negative Margin unten genau um diesen Betrag über die Kante geht.
Ohne das entstand ein weißer Streifen unter dem Rasenbild, sobald die Seite
aus irgendeinem Grund höher war als ihr A5-Verhältnis. */
min-height: calc(100% + var(--space-l) * 2);
overflow-y: auto;
margin: calc(var(--space-l) * -1);
/* cqi statt Space-Token: Selbst-Containment wie das Cover — die Seite