From fb10b9d94cdcdeeb3b62259ce911657d0ee81599 Mon Sep 17 00:00:00 2001 From: nicolas Date: Tue, 18 Aug 2026 23:35:44 +0200 Subject: [PATCH] Hero: Figur unter den Header, Kopfabschnitt auf Mobil und Marquee-Sprung Drei Fehler an der Live-Seite: 1. Die Figur begann bei top-0 und ragte damit in die Navigationsleiste - Kopf und Schulter lagen hinter "Start" und "Ueber mich". Sie startet jetzt bei top-16 bzw. top-20, also genau unter dem Header. 2. Auf schmalen Screens war der Kopf komplett abgeschnitten. Das Bild skalierte ueber die Breite (h-auto w-full); bei 72 % Breite wird das hochformatige Motiv hoeher als sein Container, und items-end schneidet dann oben ab. Es skaliert jetzt durchgehend ueber die Hoehe (h-full w-auto object-bottom), damit passt es immer hinein. 3. Das Genre-Laufband sprang sichtbar zurueck. Zwei Kopien wurden um -50 % verschoben, aber eine Kopie ist auf breiten Bildschirmen schmaler als der Viewport - dadurch klaffte vor dem Neustart eine Luecke. Jetzt zwei Spuren mit min-w-full, beide um ihre volle eigene Breite (-100 %); Spur 2 steht beim Neustart exakt auf der Startposition von Spur 1. Das umgebende Element bekam ausserdem das fehlende overflow-hidden. Nachgemessen bei 1265x720 und 375x812: Kopf unterhalb der Headerkante, beide Spuren gleich breit und mindestens viewportbreit, kein horizontaler Scroll. Co-Authored-By: Claude Opus 5 --- src/components/Hero.astro | 26 ++++++++++++++++++++------ src/styles/global.css | 4 +++- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/Hero.astro b/src/components/Hero.astro index a8cac53..4fe572f 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -50,12 +50,17 @@ const genreLine = GENRES.map((g) => g.name).join(' • '); Die Figur liegt bewusst absolut und nicht im Textfluss: als Grid-Spalte wuerde ihre Eigenhoehe (649x1919 px) die Zeile auf ueber 1200 px aufziehen und Ueberschrift samt Buttons unter die Falz druecken. + + Sie skaliert ueber die Hoehe (h-full w-auto), nicht ueber die Breite - + sonst wird das hochformatige Bild auf schmalen Screens hoeher als der + Container und items-end schneidet oben den Kopf ab. top-16/top-20 + entspricht der Headerhoehe, damit sie nicht in die Navigation ragt. */}