diff --git a/CLAUDE.md b/CLAUDE.md index 016b164..1f7a807 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -616,8 +616,15 @@ Tabellen-Legende). Bewusste Ausnahme von der Token-Disziplin (siehe oben): ein b A5-Blatt ist kein responsives Website-Element und braucht eine eigene Skala. `letter-spacing` bleibt trotzdem über `--ls-*` (dimensionslose `em`-Vielfache, kein Konflikt). **Falle beim Containment:** `width: auto` + `max-height` kollabiert eine inline-size-contained Box auf ihr -Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommt `.stadionzeitung-page` deshalb eine -definite Breite (`min(calc(72vh * 148 / 210), 100%)`), nie `width: auto`. Das Cover war der +Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommen `.stadionzeitung-page` **und +`.stadionzeitung-cover`** deshalb eine definite Breite (`min(calc(72vh * 148 / 210), 100%)`), +nie `width: auto`. **Beide stehen dafür in EINER Regel**, und das ist der Punkt: das Cover hatte +als eigene Klasse zunächst nur eine „harmlose Höhen-Deckelung" mit `width: auto` und blieb am +iPhone unsichtbar, während Chrome am Desktop es zeigte (31.07.2026). Der Unterschied entsteht, +weil `.stadionzeitung-viewer__page` `display: flex` ist: auf einem Flex-Kind heißt `width: auto` +„richte dich nach dem Inhalt", Chrome rettet sich über `aspect-ratio` plus gestreckte Höhe, +Safari nicht. **Chrome kann diesen Fehler nicht reproduzieren** — wer hier etwas ändert, prüft +es an einem echten iOS-Gerät, nicht im Desktop-Browser. Das Cover war der Anfang dieses Prinzips: Kontrast der Schlagzeile kommt aus der flachen Verlauf-Fläche selbst, bewusst **ohne** `text-shadow`: Chrome rendert `text-shadow` auf mehrzeiligem, umbrechendem Text (lange Gegner-Namen) beim diff --git a/public/assets/css/components.css b/public/assets/css/components.css index c266501..ab82370 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -5593,10 +5593,24 @@ a.match-row__link:hover { bloße Padding kollabieren (der Inhalt zählt beim Containment per Definition nicht mit — reproduzierbar 48px schmale Seiten). min() hält die Seite auf schmalen Viewports in der Track-Breite. */ -.stadionzeitung-viewer.is-enhanced .stadionzeitung-page { + Das COVER steht bewusst im selben Selektor, obwohl es sonst eine eigene Klasse + hat: es ist genauso ein inline-size-Container und war genauso betroffen. Es hatte + hier `width: auto` und blieb am iPhone unsichtbar, während Chrome am Desktop es + zeigte (31.07.2026). Der Grund für den Unterschied: .stadionzeitung-viewer__page + ist `display: flex`, und auf einem Flex-Kind heißt `width: auto` „richte dich nach + dem Inhalt" — Chrome rettet sich über aspect-ratio plus gestreckte Höhe zu einem + Wert, Safari nicht. Zusammen in EINER Regel, damit die beiden nicht wieder + auseinanderlaufen; nur das interne Scrollen bleibt den Seiten vorbehalten (das + Cover ist `overflow: hidden`, sein Spielerfoto darf randabfallend beschnitten + werden). */ +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page, +.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { width: min(calc(72vh * 148 / 210), 100%); max-width: none; aspect-ratio: 148 / 210; +} + +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page { overflow-y: auto; } @@ -5691,13 +5705,11 @@ body.is-sz-full .back-to-top { } } -/* Cover hat die aspect-ratio schon fest (siehe .stadionzeitung-cover) — im - Swipe-Modus nur dieselbe Höhen-Deckelung wie die anderen Live-Seiten. */ -.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { - max-height: 72vh; - width: auto; - max-width: none; -} +/* Die frühere Cover-Sonderregel (max-height: 72vh; width: auto) stand hier und war + der Grund, warum das Cover am iPhone fehlte — siehe die gemeinsame Regel weiter + oben bei .stadionzeitung-page. Nicht wieder einführen: „nur eine Höhen-Deckelung" + klingt harmlos, erzeugt auf einem Flex-Kind mit inline-size-Containment aber eine + Breite von null. */ .stadionzeitung-viewer__print { display: flex;