/* ========================================================================== section-03-images — Bandfoto links (oben-links) + Songtext-Modul und zweites Bandfoto rechts (beides oben-zentriert) Referenziert nur Werte aus tokens.css, siehe ARCHITECTURE.md. Figma: node 1:3407. Das Songtext-Modul selbst (eatme-lyrics-link, Hover, Zeilen, icon-play) ist ausgelagert nach components/eatme-lyrics.css -- hier steht nur noch die Positionierung innerhalb dieser Sektion (Spalten, Gaps, Bildgrößen). ========================================================================== */ #section-03-images { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 100px 32px; } /* ---- Linke Spalte: Bandfoto 1, oben-links ---- */ #section-03-images .col-image-left { display: flex; flex: 1 0 0; align-items: center; align-self: stretch; min-width: 0; } /* image-container spannt die volle Spaltenhöhe (h-full aus Figma), das Bild selbst wird darin per items:flex-start an den oberen Rand gesetzt -> in Summe "oben-links" innerhalb der ganzen Sektionshöhe, unabhängig davon, wie hoch die rechte Spalte durch Songtext+Gap+Bild 2 tatsächlich wird. */ #section-03-images .image-container { display: flex; flex: 1 0 0; height: 100%; align-items: flex-start; min-width: 0; position: relative; } /* Bildwechsel: eatme-image-01.webp (Querformat) ersetzt eatme-image-01.jpg (Hochformat). Design-Maß aus Figma jetzt 410x273 statt vorher 216x288 (Node 221:232). FIX (28.08.2026): war bisher bewusst fix (nicht fluid) -- das verursachte auf schmalen Mobile-Viewports (Spaltenbreite < 410px, z.B. iPhone SE/ Standard) einen horizontalen Overflow, weil width:410px nicht schrumpfen konnte. Jetzt fluid nach demselben Muster wie .eatme-image-02 unten (width:100% + max-width als Deckel + aspect-ratio statt fixer Höhe). Auf Desktop UND den meisten Mobile-Breiten ändert sich dadurch optisch nichts, weil die Spalte praktisch immer >= 410px breit ist und der Deckel greift -- nur unterhalb 410px Spaltenbreite schrumpft das Bild jetzt proportional mit, statt zu überlaufen. Wichtig: .birds-black unten geht NICHT mehr von einer garantiert fixen 273px-Höhe aus, sondern von "fix, SOLANGE die Spalte >= 410px breit ist" -- siehe dortiger Kommentar zu margin-top/min(). */ #section-03-images .eatme-image-01 { display: block; width: 100%; max-width: 410px; aspect-ratio: 410 / 273; object-fit: cover; will-change: transform; } /* ---- Vogel-Silhouetten (birds-black.webp, Figma-Node 169:212) ---- Liegt in der linken Spalte, überlappt Bandfoto 1 leicht am unteren Rand (Design-Update -- vorher als eigenständiges Overlay über section-03/04 geplant, siehe ARCHITECTURE.md "Gelernte Lektionen" zur alten Variante). WICHTIG -- zwei unterschiedliche Bezugsgrößen, nicht verwechseln: - `top`/`margin-top` sind FIX (218px), SOLANGE Bandfoto 1 seine volle Design-Höhe (273px) erreicht -- das ist ab 410px Spaltenbreite immer der Fall (siehe .eatme-image-01 oben, Deckel bei max-width:410px). FIX (28.08.2026): seit .eatme-image-01 unterhalb 410px Spaltenbreite fluid mitschrumpft (vorher Overflow-Bug), muss auch dieser Offset ab dort proportional mitschrumpfen, sonst würde die Vogel-Grafik auf sehr schmalen Viewports zu weit unten sitzen bzw. über das (jetzt kleinere) Bandfoto hinausragen. Umsetzung: `margin-top: min(218px, 53.17%)` -- 53.17% = 218/410, also derselbe Anteil, den 218px an der vollen 410px-Bildbreite ausmacht. Bewusst `margin-top` statt `top` für den Prozent-Anteil: Prozentwerte bei `top`/`bottom` beziehen sich auf die HÖHE des containing blocks (hier .image-container, auf Desktop durch align-self:stretch/height:100% sehr groß -- ungeeignet), während Prozentwerte bei `margin-top`/`margin-bottom` sich IMMER auf dessen BREITE beziehen (CSS-Spezialfall, gilt auch für absolut positionierte Elemente) -- also dieselbe Bezugsgröße wie bei `left`/`width` unten. `top: 0` bleibt als Anker stehen, `margin-top` verschiebt von dort aus. Unterhalb 410px Spaltenbreite gewinnt der Prozentwert (kleiner als 218px), ab 410px gewinnt der Fixwert 218px -- exakt wie vorher. - `left`/`width` sind PROZENTUAL (relativ zu .image-container, dessen Breite mit der Spalte mitschrumpft/-wächst), weil das Vogelbild in Figma breiter ist als das Bandfoto (445px vs. 410px) und in den leeren Spaltenraum rechts daneben hineinragt -- dieser leere Raum ist NICHT fix, sondern skaliert mit der Spalte. Bildwechsel eatme-image-01 (Quer- statt Hochformat, siehe .eatme-image-01 oben): per get_metadata gegen Figma-Node 1:3408 (image-container, 602x717) geprüft -- left/top/width/height dieses Elements sind dabei NICHT verrutscht (weiterhin 79/218/445/311), nur das Bandfoto darunter hat sich geändert. Diese Regel bleibt daher unverändert, nur der Mobile-Wert unten (abhängig von der neuen Bildhöhe 273 statt 288) musste neu berechnet werden. `aspect-ratio` nutzt bewusst das ECHTE Seitenverhältnis der Bilddatei (3286×2294), NICHT den Figma-Rahmen (445×311, der bei genauerem Hinsehen leicht abweicht) -- vorher wurden Figmas exportierte Crop-Prozentwerte (width/height/top/left in %) 1:1 übernommen, die aber das Bild nicht-uniform gestreckt UND unten beschnitten haben (sichtbar am Ergebnis, siehe ARCHITECTURE.md "Gelernte Lektionen"). Jetzt wird die komplette, unbeschnittene Grafik gezeigt, seitenrichtig skaliert -- kein Crop, keine Verzerrung mehr nötig. Asset hat echte Alpha-Transparenz (weißer Hintergrund → Alpha 0, schwarze Vögel → Alpha 255) statt mix-blend-mode -- siehe ARCHITECTURE.md "Gelernte Lektionen": mix-blend-mode hatte beim alten Cross-Section-Overlay gegen den fixed Himmel-Hintergrund nicht geblendet, außerdem sitzt dieses Overlay jetzt ohnehin über einem normalen , nicht mehr über dem WebGL-Wolken-Canvas -- das Performance-Problem von vorher (Alpha-Blending gegen einen pausenlos neu gerenderten Shader) entfällt dadurch von selbst. */ #section-03-images .birds-black { position: absolute; left: 13.12%; /* 79/602 aus Figma */ top: 0; margin-top: min(218px, 53.17%); /* 218/410 -- siehe Kommentar oben */ width: 73.92%; /* 445/602 aus Figma */ max-width: 445px; aspect-ratio: 3286 / 2294; /* echtes Bildverhältnis -- zeigt die komplette Grafik unbeschnitten */ pointer-events: none; } #section-03-images .birds-black-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ---- Rechte Spalte: Songtext-Modul + Bandfoto 2, oben-zentriert ---- */ #section-03-images .col-text-image { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; gap: 200px; min-width: 0; } /* Bandfoto 2: fixe Figma-Maße (500x375) als Deckel (max-width + aspect-ratio), aber width:100% statt fixer px -> schrumpft fluide mit, sobald die Spalte zwischen 1280px und 768px schmaler wird als 500px (ein reiner Fixwert würde hier überlaufen, siehe tokens-notes.md Fluid-Regel). */ #section-03-images .eatme-image-02 { display: block; width: 100%; max-width: 500px; aspect-ratio: 500 / 375; object-fit: cover; will-change: transform; } /* ---- Mobile (siehe tokens-notes.md: 768px ist der verbindliche, fest verdrahtete Breakpoint für alle Sektionen) ---- Rechte Spalte rutscht unter die linke. Beide Spalten auf Hug-Höhe (kein self-stretch/h-full mehr nötig), 100px Gap zwischen den Spalten statt der schmalen 12px auf Desktop. Interner Gap der rechten Spalte wird auf 100px reduziert (statt 200px auf Desktop). Alignment pro Spalte bleibt unverändert (links weiterhin oben-links, rechts weiterhin oben-zentriert bzw. modulintern linksbündig -- letzteres kommt aus der Komponente). */ @media (max-width: 768px) { #section-03-images { flex-direction: column; align-items: center; gap: 100px; padding: 100px 16px; } #section-03-images .col-image-left { align-self: auto; width: 100%; height: auto; } #section-03-images .image-container { height: auto; /* Vogel-Silhouette ragt über Bandfoto 1 hinaus (siehe .birds-black oben) -- auf Desktop kein Problem, weil .image-container auf die Zeilenhöhe der (viel höheren) rechten Spalte gestreckt wird, da ist reichlich Platz. Im gestapelten Mobile-Layout gibt es diesen Platz nicht automatisch -- ohne diese Reservierung würde die Vogel-Grafik in den Songtext darunter hineinragen (sah aus wie "Text überlagert"/"Bild unten abgeschnitten"). Fix: exakt so viel padding-bottom reservieren, wie die Vogel-Grafik unten übersteht. 51.66% = wie viel die Vogel-HÖHE (aus width * 311/445) im Verhältnis zur Container-BREITE ausmacht (padding-bottom-Prozente beziehen sich immer auf die Breite, nicht die Höhe -- daher lässt sich das rein in CSS ausdrücken, ohne JS, und ändert sich durch den Bildwechsel unten NICHT, da rein von der Vogel-Grafik abhängig). -55px, weil `top` (218px) 55px WENIGER ist als die neue Bildhöhe (273px, vorher 288px/70px) -- der Überhang unten ist also (Vogel-Höhe - 55px). `min()` deckelt das Ganze bei 256px (= 218 + 311 - 273, vorher 241px, der Wert ab der 445px-Breitenobergrenze der Vogel-Grafik), damit auch kurz unter der 768px-Grenze nicht mehr Platz reserviert wird als nötig. FIX (28.08.2026): Diese Formel gilt nur, SOLANGE Bandfoto 1 seine vollen 273px Höhe erreicht (Spaltenbreite >= 410px, siehe .eatme-image-01/.birds-black oben). Unterhalb 410px Spaltenbreite schrumpft jetzt auch das Bandfoto proportional, wodurch der Überhang nicht mehr (Vogel-Höhe - 55px) ist, sondern durchgehend 38.2% der Spaltenbreite beträgt (hergeleitet aus denselben Verhältnissen wie oben: 218/410 + (445/602)*(2294/3286) - 273/410). `max()` wählt automatisch die richtige der beiden Formeln: unterhalb 410px liefert 38.2% den größeren (= korrekten) Wert, ab 410px übernimmt wieder die ursprüngliche Formel -- kein Bruch am Übergang, keine zusätzliche Breakpoint-Abfrage nötig. */ padding-bottom: max(38.2%, min(256px, calc(51.6% - 55px))); } #section-03-images .col-text-image { width: 100%; gap: 100px; } }