/* Cine-Hero "Der mystische Blick" (7 Schritte) Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 193-402 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ /* ============ CINE-HERO: „Der mystische Blick" ============ */ /* Der Hero ist EIN Bildschirm hoch — keine künstliche Scrollstrecke, kein Pinning, kein position:fixed-Hack. Die Schritte der Erzählung schaltet Swiper (vertikal, Fade); die Optik machen CSS-Transitions, die an [data-step] auf der Bühne bzw. an .swiper-slide-active hängen. Höhe in dvh: Da der Hero das Scrollen anhält, wackelt die iOS-Adressleiste hier gar nicht erst — und falls doch (Rückkehr von weiter unten), wächst die Bühne einfach mit, statt unten einen Streifen freizugeben. --vp-bar (= Höhe der iOS-Adressleiste, 0 auf Desktop) bleibt für Overlays mit position:fixed erhalten, die weiterhin gegen lvh gerechnet werden. */ :root { --vp-bar: 0px; } @supports (height: 100lvh) and (height: 100svh) { :root { --vp-bar: calc(100lvh - 100svh); } } .cine { position: relative; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; background: var(--cine-bg); } .cine-stage { position: relative; height: 100%; overflow: hidden; } .cine-bg { position: absolute; inset: 0; background-color: var(--cine-bg); /* Mystischer Glow hinter dem Streifen + sanfte Abdunklung oben/unten */ background-image: radial-gradient(ellipse 78% 54% at 50% 46%, var(--cine-glow) 0%, rgba(0,0,0,0) 68%), linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 32% 68%, rgba(0,0,0,0.32) 100%); transition: background-color 0.5s ease; } /* Nebelwald-Silhouette: am unteren Rand verankert, liegt ZWISCHEN dem Grün-Gradient (.cine-bg) und dem Kino-Streifen; oben sanft ausgeblendet */ .cine-bg::after { content: ""; position: absolute; inset: 0; background: url('../img/background-woods.png') center bottom / 100% auto no-repeat; /* Dasselbe Bild in modernen Formaten. Die Zeile steht BEWUSST nach der Kurzschreibweise: ein Browser ohne image-set() ueberspringt sie und behaelt das PNG darueber. Der Alphakanal bleibt in AVIF und WebP erhalten. */ background-image: image-set(url('../img/v/background-woods.avif') type('image/avif'), url('../img/v/background-woods.webp') type('image/webp'), url('../img/background-woods.png') type('image/png')); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%); pointer-events: none; } /* Foto-Kapitel (übereinander gestapelt; sichtbar ist immer genau eines). Überblendung: Das ausblendende Kapitel hält seine Deckung lange und fällt dann schnell, das einblendende steigt schnell an — zusammen bleibt die Fläche durchgehend gedeckt, sonst blitzt beim Crossfade der Hintergrund durch (klassischer Doppel-Fade-Einbruch). */ .chapter { position: absolute; inset: 0; opacity: 0; transition: opacity 0.75s cubic-bezier(0.7, 0, 1, 0.25); } .chapter img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); transition: transform 2.6s cubic-bezier(0.22, 1, 0.36, 1); } .chapter.is-on { opacity: 1; transition-timing-function: cubic-bezier(0, 0.85, 0.25, 1); } .chapter.is-on img { transform: scale(1); } /* Kapitel 1 hat kein Ken-Burns, sondern den Öffnungs-Zoom: --eye-strip ist die Lage im Kino-Streifen, --eye-open die im Vollbild. Beide rechnet JS einmal pro Größenänderung; dazwischen liegt eine reine Transform-Animation. */ .cine-stage .ch-eyes img { object-position: center 32%; transform: var(--eye-strip, none); transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); } .cine-stage:not([data-step="0"]) .ch-eyes img { transform: var(--eye-open, none); } .ch-pups img { object-position: center 55%; } .ch-run img { object-position: center 40%; } /* Kapitel-1-Wrapper trägt den Kino-Streifen. --strip-* berechnet JS EINMALIG pro Größenänderung (nie pro Frame): Der Streifen darf weder ins Logo noch in den Titel laufen. */ .letterbox { position: absolute; inset: 0; clip-path: inset(var(--strip-t, 37%) var(--strip-x, 11%) var(--strip-b, 37%) var(--strip-x, 11%) round 14px); transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1); } .cine-stage:not([data-step="0"]) .letterbox { clip-path: inset(0% 0% 0% 0% round 0px); } /* Mystischer Schleier: folgt der Streifenlage, verschwindet beim Öffnen */ .letterbox::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cine-bg) 6%, rgba(0,0,0,0) 34% 66%, var(--cine-bg) 94%), linear-gradient(180deg, var(--cine-bg) calc(var(--strip-t, 37%) - 10%), rgba(0,0,0,0) calc(var(--strip-t, 37%) + 4%) calc(100% - var(--strip-b, 37%) - 4%), var(--cine-bg) calc(100% - var(--strip-b, 37%) + 10%)); opacity: 1; transition: opacity 0.6s ease; pointer-events: none; } .cine-stage:not([data-step="0"]) .letterbox::after { opacity: 0; } /* Vignette für Lesbarkeit — erst wenn das Foto den Schirm füllt */ .veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center 42%, rgba(0,0,0,0) 42%, rgba(10,14,12,0.42) 100%); opacity: 0; transition: opacity 0.7s ease; } .cine-stage:not([data-step="0"]) .veil { opacity: 1; } /* ---- Swiper als reine Schritt-Maschine ---- Liegt als Gesten-Ebene über den Fotos. Man sieht KEINEN Slider: die Slides sind transparent und tragen nur den Text des jeweiligen Schritts, das Fade übernimmt Swipers fadeEffect. */ /* touch-action bleibt bewusst unangetastet: Swiper setzt für die vertikale Achse selbst `pan-x` und hebt es beim ersten Touch auf `auto` an, sobald touchReleaseOnEdges aktiv ist — genau das gibt an den Rand-Schritten den nativen iOS-Scroll wieder frei. */ /* Dass nur der aktive Slide Klicks annimmt (sonst fingen die unsichtbaren Slides darüber die CTAs ab), regelt Swipers Fade-CSS bereits selbst. */ .hero-swiper { position: absolute; inset: 0; z-index: 5; } /* Titelblock (Schritt 1) — Prozent statt vh: der Slide ist exakt so hoch wie die Bühne, damit hängt der Titel auf iOS nie hinter der Adressleiste. */ .cine-title { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; z-index: 5; color: var(--creme); padding: 0 28px; transform: translateY(26px); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .swiper-slide-active .cine-title { transform: none; } .cine-title .place { font-size: 12.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose-2); text-shadow: 0 1px 12px rgba(10,14,12,0.45); } .cine-title h1 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 58px); font-weight: 420; line-height: 1.12; letter-spacing: -0.01em; margin-top: 14px; font-variation-settings: "opsz" 60; text-wrap: balance; /* Schutz während der Streifen-Öffnung: Titel steht kurz über Foto */ text-shadow: 0 2px 22px rgba(10,14,12,0.38); } .cine-title h1 em { font-style: italic; color: var(--rose-2); font-weight: 450; } .cine-ctas { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 14px 28px; border-radius: 999px; transition: transform 0.15s ease; } .btn:hover { transform: translateY(-2px); } /* Primär-Buttons im Band-Dunkelgrün (User-Entscheid) — Creme-Text 9.0:1. Auf dunklen Flächen (Hero, Zitat-Band, Chiots-Karte) gilt die Umkehrung: Creme-Button mit Ink-Text. */ .btn-primary { background: var(--band-bg); color: var(--btn-ink); box-shadow: 0 8px 24px rgba(15,25,20,0.25); } .btn-primary:hover { background: #3D5A53; } .cine-ctas .btn-primary, .quote-inner .btn-primary { background: var(--creme); color: var(--ink); } .cine-ctas .btn-primary:hover, .quote-inner .btn-primary:hover { background: #fff; } .btn-ghost { border: 1.5px solid rgba(248,243,234,0.75); color: var(--creme); } .scroll-cue { margin-top: 30px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(248,243,234,0.8); animation: cueBob 2.4s ease-in-out infinite; } @keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* Kapitel-Zeilen (Schritte 3, 5, 7). Die Deckkraft macht Swipers Crossfade auf Slide-Ebene, hier nur das Nachziehen — so bleibt pro Schritt genau eine Transform-Animation. */ .cine-line { position: absolute; left: 0; right: 0; z-index: 5; text-align: center; color: var(--creme); font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3.4vw, 46px); font-weight: 400; text-shadow: 0 2px 24px rgba(0,0,0,0.55); text-wrap: balance; transform: translateY(18px); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .swiper-slide-active .cine-line { transform: none; } /* Kino-Gradients von der Bildkante, im Dunkelgrün des Themes statt Schwarz */ .line-1, .line-2 { bottom: 0; /* Fallback ohne color-mix(): sonst fällt die ganze Deklaration weg und der Text steht schutzlos auf dem Foto */ background: linear-gradient(180deg, rgba(27,41,36,0) 0%, rgba(27,41,36,0.88) 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--cine-bg) 0%, transparent) 0%, color-mix(in srgb, var(--cine-bg) 88%, transparent) 100%); } .line-1 { padding: 24vh 28px 13vh; padding: 24dvh 28px 13dvh; } .line-2 { padding: 26vh 28px 11vh; padding: 26dvh 28px 11dvh; } /* Schlusszeile hängt oben — der Logo-Puck ragt in den Hero hinein, deshalb ein Mindestabstand in px statt reiner vh-Rechnung (auf kurzen Viewports klebte die Zeile sonst am Logo). */ .line-3 { top: 0; padding: 16vh 28px 20vh; padding: max(16dvh, 182px) 28px 20dvh; background: linear-gradient(180deg, rgba(27,41,36,0.88) 0%, rgba(27,41,36,0) 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--cine-bg) 88%, transparent) 0%, color-mix(in srgb, var(--cine-bg) 0%, transparent) 100%); }