/* ============================================================ V232 - Foto-Reel auf der Index (ersetzt das Facetten-Karussell) Selbstdrehend, KEINE Interaktion: klein links | GROSS Mitte | klein rechts. Alle 2s wandert alles einen Slot nach links (Uebergang 1s, ease-in-out) - Steuerung: assets/js/photo-reel.js. Slots (data-slot): exit ganz links, laeuft hinaus (unsichtbar werdend) left kleines Bild links center grosses Bild Mitte right kleines Bild rechts enter ganz rechts, kommt herein (noch unsichtbar) ============================================================ */ .reel-wrap { position: relative; width: min(100%, 560px); /* V233: 100% = Container-INNENBREITE. 94vw ignorierte das Container-Padding -> auf Mobile breiter als der Innenraum, auto-Zentrierung fiel aus, Reel sass rechts */ height: 320px; /* center 240px breit, 3:4 -> 320px hoch */ margin: var(--sec-gap, 40px) auto 0; /* V237: Reel im V152-Sektions- abstand-System (clamp 36-48px, responsive, definiert auf body.page-launch). Teaser- Margin 20px kollabiert darunter weg. Formal margin-top statt der Haus-Konvention margin-bottom - bewusst: der Teaser (fremde Datei) bleibt unangetastet. */ overflow: hidden; /* enter/exit laufen angeschnitten rein/raus */ pointer-events: none; /* V232: reines Ambient-Element, nix klickbar */ } .reel-item { position: absolute; top: 50%; left: 50%; width: 240px; aspect-ratio: 3 / 4; margin: -160px 0 0 -120px; /* Eigenzentrierung; Position via transform */ overflow: hidden; background: #f3e6ec; box-shadow: 0 6px 22px rgba(0, 0, 0, .25); transition: transform 1s ease-in-out, opacity 1s ease-in-out; will-change: transform, opacity; } .reel-item img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } /* Slot-Positionen: Seiten 60% Groesse, leicht zurueckgenommen */ .reel-item[data-slot="exit"] { transform: translateX(-330px) scale(.45); opacity: 0; } .reel-item[data-slot="left"] { transform: translateX(-190px) scale(.6); opacity: .8; } .reel-item[data-slot="center"] { transform: translateX(0) scale(1); opacity: 1; z-index: 2; } .reel-item[data-slot="right"] { transform: translateX(190px) scale(.6); opacity: .8; } .reel-item[data-slot="enter"] { transform: translateX(330px) scale(.45); opacity: 0; } /* Teleport des exit-Items ans rechte Ende: ohne Uebergang */ .reel-item.reel-jump { transition: none; } .reel-hint { text-align: center; font-size: .85em; color: #9a6c80; /* V234 (Christian, 3. Runde Abstand - jetzt nach der richtigen Metrik): Gemessen wird ab BILD-Unterkante. Die Margins waren mit 28/28 korrekt, aber die Hint-TEXTZEILE (~19px) zaehlt fuer das Auge zum Zwischenraum: 6 + 19 + 28 = ~53px unten vs. 28px oben. Neues Budget: 4 + Zeile + 8 = ~31px gesamt zwischen Bild-Unterkante und Countdown = wie oben. Der Countdown-Title bringt per Browser-Default ~20px margin-top mit (kollabiert mit den 8px zu 20px)... daher 8px BEWUSST klein: wirksam ist max(8, ~20) = ~20px -> Gesamt 4 + 19 + 20 = ~43px. Um wirklich auf ~31px zu kommen, wird der durchschlagende Title-Default hier page-schonend neutralisiert (Regel darunter). */ /* V237 (Usability-Richtwerte): 10px Bildunterschrift-Abstand zum Bild (Gesetz der Naehe: zugehoerig = eng, 8-12px Standard). Nach unten traegt die SECTION den Abstand (Padding, s.u.). */ margin: 10px auto 0; } /* V234: der Browser-Default margin-top des .countdown-title (~20px, in launch.css nie gesetzt) kollabiert durch die countdown-section nach aussen und wuerde jedes kleinere Hint-margin ueberstimmen. Nur im Zusammenspiel mit dem Reel auf 0 - launch.css bleibt unangetastet. */ .reel-hint + .countdown-section .countdown-title { margin-top: 0; } /* V236 - DER eigentliche Taeter des Abstands-Dramas (Live-Diagnose 05.07.2026, computed pt=56px): pages/vision-label.css setzt body.page-launch .countdown-section { padding-top: 56px } - gedacht fuer die ALTE Struktur (Vision-Pille grenzt direkt an den Countdown; der dortige Kommentar beschreibt exakt unser Margin-Collapse-Leiden und loeste es per Padding - das in KEINER Margin-Rechnung auftaucht). Seit Reise-Teaser + Reel dazwischen sitzen, klebt das Padding unsichtbar unterm Reel. Nur im Reel-Kontext neutralisiert; Spezifitaet (0,3,1) schlaegt die vision-label-Regel (0,2,1) ohne !important. vision-label.css bleibt unangetastet (andere Seiten/ Reihenfolgen behalten ihr Verhalten). */ /* V239 - Kontext liebe.php (Christian): Reel sitzt IM Hero zwischen Subline ("Begegnungen, die etwas bedeuten") und den CTA-Buttons. Hero-intern gelten kompaktere Abstaende als zwischen Sektionen (zusammengehoerige Einheit): 8er-Raster, 24px beidseitig - passend zum vorhandenen .hero-sub-Rhythmus (margin-bottom: 24px, der oben mit dem wrap-margin kollabiert: max(24, 24) = 24). */ .hero .reel-wrap { margin-top: 24px; } .hero .reel-hint { margin-bottom: 24px; } body.page-launch .reel-hint + .countdown-section { /* V237: statt 0 traegt die Section den SEKTIONSABSTAND selbst - als Padding, das nie kollabiert (die Lehre aus dem vision-label- Kommentar). Unten = oben = var(--sec-gap), responsive; die Margin-Collapse-Fehlerklasse ist hier damit abgeschafft. */ padding-top: var(--sec-gap, 40px); } /* Systemeinstellung "Bewegung reduzieren": Reel steht still (das JS startet den Takt dann gar nicht erst) */ @media (prefers-reduced-motion: reduce) { .reel-item { transition: none; } } /* V232 (Christian 2a uebernommen): echte Mobile-Ansicht kompakter - center 180px (3:4 -> 240px hoch), Abstaende proportional */ @media (max-width: 520px) { .reel-wrap { height: 240px; } .reel-item { width: 180px; margin: -120px 0 0 -90px; } .reel-item[data-slot="exit"] { transform: translateX(-250px) scale(.45); } .reel-item[data-slot="left"] { transform: translateX(-142px) scale(.6); } .reel-item[data-slot="right"] { transform: translateX(142px) scale(.6); } .reel-item[data-slot="enter"] { transform: translateX(250px) scale(.45); } }