/* ========================================================================== section-05-images-drops — Bandfoto links (oben-links) + Songtext-Modul rechts (zentriert), darüber 19 frei positionierte Wassertropfen Referenziert nur Werte aus tokens.css, siehe ARCHITECTURE.md. Figma: node 1:3415, Referenz-Frame aktuell 1280 x 657 (Update: war vorher 1280 x 688, hat sich mit dem Bildwechsel auf eatme-image-04 verschoben — Tropfen-Positionen unten sind bereits neu berechnet). Struktur identisch zu section-03-images (Flexbox, zwei Spalten), das Songtext-Modul selbst kommt unverändert aus components/eatme-lyrics.css (renderLyricsModule() in script.js) -- hier nur Positionierung + der zusätzliche Tropfen-Layer. ========================================================================== */ #section-05-images-drops { position: relative; /* Bezugsrahmen für die absolut positionierten Tropfen */ display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 100px 32px; } /* ---- Linke Spalte: Bandfoto, oben-links ---- Gleiches Muster wie section-03 .col-image-left/.image-container: image-container ist h-full + items:flex-start -> Bild sitzt oben, unabhängig davon wie hoch die rechte Spalte durch das Lyrics-Modul wird. padding-bottom: 200px kommt 1:1 aus Figma (Node 1:3416) -- der Wert bleibt auch mit dem neuen Querformat-Bild korrekt: Bild (257px Design-Höhe) + 200px Padding = exakt die 457px Spaltenhöhe aus Figma, kein Nachjustieren nötig. */ #section-05-images-drops .col-image-left { display: flex; flex: 1 0 0; align-items: center; align-self: stretch; min-width: 0; } #section-05-images-drops .image-container { display: flex; flex: 1 0 0; height: 100%; align-items: flex-start; padding-bottom: 200px; min-width: 0; position: relative; } /* eatme-image-04 (Querformat, ersetzt das bisherige eatme-image-03, Hochformat 216x288). Design-Maß aus Figma: 387x257 -- Seitenverhältnis 774/514 entspricht exakt der eatme-image-04.webp-Datei (774x514px). width:100% + max-width + aspect-ratio statt fixer px, aus demselben Grund wie bei den blauen Vögeln/eatme-image-02: die Spalte wird zwischen 1280px und 768px irgendwann schmaler als 387px, ein reiner Fixwert würde dann überlaufen (siehe tokens-notes.md Fluid-Regel). */ #section-05-images-drops .eatme-image-04 { display: block; width: 100%; max-width: 387px; aspect-ratio: 774 / 514; object-fit: cover; /* KEIN will-change: transform mehr (25.08.2026) -- dieses Bild wird nie per JS transformiert (nur section-03s Bilder bekommen Parallax), die Layer-Promotion war also eine dauerhafte GPU-Ebene ohne jeden Nutzen. Gleiches Muster wie bei .tropfen, siehe Kommentar unten. */ } /* ---- Rechte Spalte: Lyrics-Modul, zentriert (beide Achsen) ---- */ #section-05-images-drops .col-text-image { display: flex; flex: 1 0 0; flex-direction: column; align-self: stretch; align-items: center; justify-content: center; min-width: 0; } /* ========================================================================== Tropfen-Layer Absolute Kinder direkt der Sektion (nicht im Autolayout, 1:1 aus Figma übernommen). Positionen als % relativ zum aktuellen 1280x657- Referenzrahmen (Node 1:3415) -- Größe bewusst NICHT fluid (bleibt fix 24px/40px). 4 Formen (assets/visuals/drops/01–04.png) x 2 Größen = 8 Varianten, insgesamt 19 Desktop-Instanzen. Update (eatme-image-04-Wechsel): Referenzrahmen in Figma ist jetzt 1280x657 (vorher 1280x688) -- alle top%-Werte in index.html wurden entsprechend neu berechnet. Zusätzlich ist ein 40px-Tropfen laut Figma deutlich weiter nach links gerückt (5.313% statt vorher 17.226%). .tropfen--mobile ist ein zweiter, eigener Satz (9 Stück, weniger dicht) nur für den gestapelten Mobile-Zustand -- siehe Media-Query unten. In px statt % verankert, weil Bild + Bild-Padding + Gap auf Mobile eine feste Höhe haben, unabhängig von der Songtext-Länge weiter unten in der Spalte. Von diesem Update nicht betroffen. data-size steuert den Parallax-Faktor in script.js: größere Tropfen (40px) bewegen sich stärker (wirken näher), kleinere (24px) dezenter (wirken weiter weg) -- simple Tiefenwirkung, siehe initDropsParallax(). ========================================================================== */ /* Gruppen-Wrapper: buendelt alle Tropfen EINER Groesse (24px oder 40px) in einen gemeinsamen Container, der als Ganzes EINEN Transform pro Frame bekommt (siehe initDropsParallax() in script.js), statt vorher 19 (Desktop) bzw. 9 (Mobile) Tropfen EINZELN zu transformieren. Til hat per Web-Inspector-Aufnahme (25.08.2026) verifiziert, dass das Entfernen von will-change (siehe .tropfen unten) allein nicht ausreichte -- die schiere Anzahl individuell transformierter/gemalter Elemente war weiterhin ein grosser Paint/Composite-Kostenfaktor. Position/Groesse der einzelnen .tropfen-Kinder bleibt unveraendert (weiterhin absolute %/px-Werte, 1:1 aus Figma) -- der Wrapper deckt einfach die komplette Sektion ab (inset:0), damit sich daran nichts aendert. */ #section-05-images-drops .tropfen-group { position: absolute; inset: 0; pointer-events: none; } #section-05-images-drops .tropfen { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; /* KEIN will-change: transform mehr -- Til hat per Web-Inspector- Aufnahme (24./25.08.2026) verifiziert, dass das Entfernen die Ruckel-/Sprung-Haeufigkeit deutlich senkt. Vermutung: 19 (Desktop) bzw. 9 (Mobile) einzeln dauerhaft promotete Compositor-Ebenen gleichzeitig ueberschreiten offenbar ein internes Budget in Safari und kosten dadurch mehr an Paint/Composite-Zeit, als sie an Transform-Performance einsparen. Falls in Zukunft ein aehnliches Performance-Problem auftaucht: NICHT direkt wieder will-change auf viele Einzelelemente packen, sondern zuerst mit einer Web-Inspector- Aufnahme verifizieren. */ } #section-05-images-drops .tropfen img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Sichtbarkeit jetzt auf Gruppen-Ebene gesteuert (ein display:none auf dem Wrapper versteckt automatisch alle Kinder mit) -- die einzelnen .tropfen--desktop/--mobile-Klassen bleiben nur noch fuer den Parallax-Faktor (data-size) und Styling relevant, nicht mehr fuers Ein-/Ausblenden. */ #section-05-images-drops .tropfen-group--mobile { display: none; } /* ---- Mobile (siehe tokens-notes.md: 768px ist der verbindliche, fest verdrahtete Breakpoint für alle Sektionen) ---- Verhält sich wie section-03: rechte Spalte rutscht unter die linke, 100px Gap zwischen den Spalten statt 12px, Bild-Bottom-Padding (200px, war Desktop-Kompositionsabstand) auf 48px reduziert. Tropfen: eigener, kleinerer Satz (.tropfen--mobile) statt der %-positionierten Desktop- Tropfen, siehe Kommentar oben. */ @media (max-width: 768px) { #section-05-images-drops { flex-direction: column; align-items: center; gap: 100px; padding: 100px 16px; } #section-05-images-drops .col-image-left { align-self: auto; width: 100%; height: auto; } #section-05-images-drops .image-container { height: auto; padding-bottom: 48px; } #section-05-images-drops .col-text-image { width: 100%; align-self: auto; } #section-05-images-drops .tropfen-group--desktop { display: none; } #section-05-images-drops .tropfen-group--mobile { display: block; } }