/* ========================================================= PUELS.LEGAL · Transitions & Scroll Effects (Enhancement Layer) Additiv zu styles.css. Nutzt vorhandene Tokens (--ease, --ease-out, --dur, --dur-slow, --navy, --gold). ========================================================= */ /* ---------- 1) Cross-document View Transitions ---------- DEAKTIVIERT (2026-05-08) — auf file:// Protokoll wirft die Cross- Document View-Transitions-API "AbortError: Transition was skipped" und blockiert position:fixed-Overlays (urgent-banner, AI-button). Wieder aktivieren NUR wenn Site auf https:// produktiv läuft. */ /* @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } ::view-transition-old(root) { animation-name: pl-fade-out; } ::view-transition-new(root) { animation-name: pl-fade-in-up; } @keyframes pl-fade-out { to { opacity: 0; } } @keyframes pl-fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } */ /* ---------- 2) Page-Load Fade ---------- Body fadet beim ersten Laden sanft ein – pure CSS, kein JS nötig. Bei aktiver View-Transition (Cross-Doc-Navigation) übernimmt diese. WICHTIG: Keyframes dürfen KEIN transform enthalten – sonst behandelt WebKit/Safari das dauerhaft als Containing Block und position:fixed-Elemente (mobile Navigation) brechen beim Scrollen. */ body { animation: pl-page-in .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; } @keyframes pl-page-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- 3) Reveal-Varianten ---------- .reveal existiert bereits; wir ergänzen Richtungen + Effekte. */ .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur { opacity: 0; will-change: opacity, transform, filter; transition: opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .8s var(--ease-out, cubic-bezier(.16,1,.3,1)); transition-delay: var(--reveal-delay, 0ms); } .reveal-up { transform: translateY(28px); } .reveal-left { transform: translateX(-32px); } .reveal-right { transform: translateX(32px); } .reveal-scale { transform: scale(.94); } .reveal-blur { filter: blur(8px); transform: translateY(14px); } .reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible, .reveal-blur.is-visible { opacity: 1; transform: none; filter: none; } /* Stagger-Helper: Kinder einer Gruppe erscheinen nacheinander. JS setzt --reveal-delay je Kind. */ .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .85s var(--ease-out, cubic-bezier(.16,1,.3,1)); transition-delay: var(--reveal-delay, 0ms); } .reveal-stagger.is-visible > * { opacity: 1; transform: none; } /* ---------- 4) Auto-Reveal über IntersectionObserver-Marker ---------- JS markiert Sektionen + Karten + Headlines mit .auto-reveal, sofern sie noch keine Reveal-Klasse haben. */ .auto-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1)); transition-delay: var(--reveal-delay, 0ms); } .auto-reveal.is-visible { opacity: 1; transform: none; } /* ---------- 5) Bilder: weiches Reinfaden + Scale ---------- Sanfter Bildauftritt; JS fügt .img-reveal an Bildern hinzu. */ .img-reveal { opacity: 0; transform: scale(1.03); filter: saturate(.85); transition: opacity 1s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform 1.1s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter 1s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .img-reveal.is-visible { opacity: 1; transform: scale(1); filter: saturate(1); } /* ---------- 6) Scroll-driven Effekte (modernes API) ---------- Browser ohne `animation-timeline: view()` ignorieren das geräuschlos. Hero/Sections bekommen subtile Parallax + Fade-In/Out. */ @supports (animation-timeline: view()) { /* Hero-Bilder/-Videos: dezenter Parallax beim Hochscrollen */ .hero img, .hero video, .hero-media img, .hero-media video, [data-parallax] { animation: pl-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; will-change: transform; } @keyframes pl-parallax { from { transform: translateY(-4%) scale(1.04); } to { transform: translateY(6%) scale(1.04); } } /* Section-Header dezent mitscrollen lassen */ section h2, section .eyebrow { animation: pl-section-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } @keyframes pl-section-rise { from { opacity: .55; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Karten in Grids: Lift beim Reinscrollen */ .grid > .card, .cards > .card, .card-grid > .card, [class*="-grid"] > .card, [class*="cards-"] > .card { animation: pl-card-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; } @keyframes pl-card-rise { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Bilder in Sections: leichter Zoom-Out beim Scrollen */ section img:not(.no-scroll-fx), figure img:not(.no-scroll-fx) { animation: pl-img-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } @keyframes pl-img-zoom { from { transform: scale(1.06); } to { transform: scale(1); } } /* Sticky Header: am Anfang transparenter, beim Scrollen kompakter */ .site-header { animation: pl-header-shrink linear both; animation-timeline: scroll(root); animation-range: 0 200px; } @keyframes pl-header-shrink { to { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } } } /* ---------- 7) Button-Pfeil-Glide ---------- Der `→`-SVG in Buttons gleitet beim Hover dezent nach rechts. */ .btn svg, .btn-primary svg, .btn-ghost svg, .btn-secondary svg, a[class*="btn"] svg { transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)); will-change: transform; } .btn:hover svg, .btn-primary:hover svg, .btn-ghost:hover svg, .btn-secondary:hover svg, a[class*="btn"]:hover svg { transform: translateX(4px); } /* Card-Pfeile: subtiler Slide auf Karten-Hover */ .card a[href] svg.arrow, .card .arrow, li a svg.arrow { transition: transform .35s var(--ease-out, cubic-bezier(.16,1,.3,1)); } .card:hover a[href] svg.arrow, .card:hover .arrow, li:hover > a svg.arrow, li a:hover svg.arrow { transform: translateX(3px); } /* ---------- 8) Anchor-Smooth-Scroll polish ---------- Bestehender Header-Offset bleibt; sicherstellen, dass Snap nicht zappelt. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Reviews-Marquee läuft endlos durch — kein Pause auf Hover */ /* ========================================================== SECTION TRANSITIONS — Cinematic Scroll-Driven Approach Statt grafischer Trenner (Welle/Brush): die Übergänge entstehen durch Bewegung selbst. - Sanfte Innen-Vignette + Außenschatten an dunklen Sektionen - Scroll-driven Content-Parallax: Inhalt einer Sektion bewegt sich langsamer als der Scroll → Tiefenwirkung - Backdrop-blur bei adjazenten Cream → Navy Übergängen ========================================================== */ /* Dunkle Sektionen: kein overflow:visible nötig, Welle ist weg. Sanfte Innen-Vignette (oben + unten) + dezenter Außenschatten in angrenzende Cream-Sektionen. */ .about, .usp-bar, .cta-block, .bg-dark, section.bg-navy { position: relative; isolation: isolate; box-shadow: /* Innen: weiche Kanten an Top + Bottom */ inset 0 60px 60px -60px rgba(31, 49, 88, 0.65), inset 0 -60px 60px -60px rgba(31, 49, 88, 0.65), /* Goldene Haarlinie als premium Akzent */ inset 0 1px 0 rgba(176, 136, 86, .22), inset 0 -1px 0 rgba(176, 136, 86, .14), /* Außen: weicher Drop-Shadow in adjazente Sektionen */ 0 -28px 56px -28px rgba(10, 22, 40, 0.16), 0 28px 56px -28px rgba(10, 22, 40, 0.16); } /* ========================================================== SCROLL-DRIVEN CONTENT PARALLAX Inhalt einer Sektion bewegt sich beim Scrollen leicht langsamer als die Sektion selbst. Erzeugt Tiefenwirkung wie bei Premium-Editorial-Sites (Apple, Stripe). Nur in modernen Browsern (animation-timeline: view). ========================================================== */ @supports (animation-timeline: view()) { /* Dunkle Sektionen: Inhalt driftet sanft hoch beim Scrollen. Beim Eintritt 36px unter Normalposition, beim Austritt 36px darüber. Net: Content bewegt sich 72px während Section ganzen Viewport durchläuft. */ .about > .container, .usp-bar > .container, .cta-block > .container, .cta-block > .inner, .bg-dark > .container, section.bg-navy > .container { animation: pl-section-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; will-change: transform; } @keyframes pl-section-parallax { from { transform: translateY(36px); } to { transform: translateY(-36px); } } /* Cream Sektionen bekommen weniger Parallax (Hierarchie: dunkle Sektionen wirken "weiter weg" wegen mehr Bewegung). */ .hero > .container, .problem > .container, .testimonial > .container, .reviews-section > .container, .kuendigung-hero > .container, .page-hero > .container { animation: pl-section-parallax-light linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; will-change: transform; } @keyframes pl-section-parallax-light { from { transform: translateY(20px); } to { transform: translateY(-20px); } } /* Section-Background-Glow: dunkle Sektionen bekommen beim Eintritt einen sanft wachsenden Schatten (wirken "schwerer", Tiefe). */ .about, .usp-bar, .cta-block, .bg-dark, section.bg-navy { animation: pl-section-shadow linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } @keyframes pl-section-shadow { from { box-shadow: inset 0 60px 60px -60px rgba(31, 49, 88, 0.4), inset 0 -60px 60px -60px rgba(31, 49, 88, 0.4), inset 0 1px 0 rgba(176, 136, 86, .14), inset 0 -1px 0 rgba(176, 136, 86, .08), 0 -8px 20px -10px rgba(10, 22, 40, 0.06), 0 8px 20px -10px rgba(10, 22, 40, 0.06); } to { box-shadow: inset 0 60px 60px -60px rgba(31, 49, 88, 0.65), inset 0 -60px 60px -60px rgba(31, 49, 88, 0.65), inset 0 1px 0 rgba(176, 136, 86, .22), inset 0 -1px 0 rgba(176, 136, 86, .14), 0 -28px 56px -28px rgba(10, 22, 40, 0.16), 0 28px 56px -28px rgba(10, 22, 40, 0.16); } } } /* Reduced Motion: alle scroll-driven Animationen aus */ @media (prefers-reduced-motion: reduce) { .about > .container, .usp-bar > .container, .cta-block > .container, .cta-block > .inner, .bg-dark > .container, section.bg-navy > .container, .hero > .container, .problem > .container, .testimonial > .container, .reviews-section > .container, .kuendigung-hero > .container, .page-hero > .container { animation: none !important; transform: none !important; } } /* Container-Inhalt sitzt klar über Brush + Vignette. */ .about > *, .usp-bar > *, .cta-block > *, .bg-dark > *, section.bg-navy > * { position: relative; z-index: 2; } /* Scroll-driven Lift: dunkle Sektionen heben sich beim Reinscrollen leicht aus dem Hintergrund hoch. Inset-Shadows aus dem Static-State werden mit übernommen, damit Hairline + Vignette während Animation erhalten bleiben. */ @supports (animation-timeline: view()) { .about, .usp-bar, .cta-block, .bg-dark, section.bg-navy { animation: pl-darksection-lift linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } @keyframes pl-darksection-lift { from { box-shadow: 0 -8px 24px -16px rgba(10, 22, 40, 0.07), 0 8px 24px -16px rgba(10, 22, 40, 0.07); } to { box-shadow: 0 -18px 40px -18px rgba(10, 22, 40, 0.14), 0 18px 40px -18px rgba(10, 22, 40, 0.14); } } } /* Hero -> erste Sektion: weicher Schatten unten am Hero, damit der erste Sektionswechsel nicht hart wirkt. */ .hero { position: relative; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; pointer-events: none; background: linear-gradient(to bottom, transparent 0, rgba(20, 33, 61, .05) 100%); z-index: 1; } /* ---------- 10) Reduced Motion: alles aus ---------- */ @media (prefers-reduced-motion: reduce) { body { animation: none !important; } .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-stagger > *, .auto-reveal, .img-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .hero img, .hero video, .hero-media img, .hero-media video, [data-parallax], section h2, section .eyebrow, .grid > .card, .cards > .card, .card-grid > .card, [class*="-grid"] > .card, [class*="cards-"] > .card, section img, figure img, .site-header, .about, .usp-bar, .cta-block, .bg-dark, section.bg-navy { animation: none !important; } .btn svg, .btn-primary svg, .btn-ghost svg, .btn-secondary svg, a[class*="btn"] svg, .card a[href] svg.arrow, .card .arrow, li a svg.arrow { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }