/* ========================================================================= assistic — Polish-Ebene (Astro-Relaunch 2026-07) Lädt als LETZTES Stylesheet (nach site.css + home.css) und hebt das Scroll-/Reveal-Gefühl an, ohne die bestehende Mechanik zu ersetzen: - verfeinerte Reveal-Choreografie (site.js setzt .is-visible — wir stylen nur schöner) - gestaffelte Kinder-Reveals für Raster ([data-stagger]) - Scroll-Fortschritts-Haarlinie (Lime) — native scroll-timeline, graceful - Header verdichtet sich beim Scrollen (.is-scrolled aus polish.js) - Anker-Offset unter den Sticky-Header Alles bewusst RUHIG/editorial — kein Hype, respektiert prefers-reduced-motion. ========================================================================= */ /* ---------- Anker-Sprünge unter dem Sticky-Header ausrichten ---------- */ html { scroll-padding-top: 92px; } /* ---------- Lenis (Smooth-Scroll, self-hosted/gebündelt) ---------- Nötige Basis-Styles laut Lenis-Doku. Aktiv nur, wenn Lenis initialisiert (kein reduced-motion) — dann trägt die .lenis-Klassen. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- Verfeinerte Reveal-Grundbewegung ---------- Überschreibt nur Distanz/Easing/Dauer der bestehenden .reveal — die Sichtbarkeits-Logik (body.js-reveal + .is-visible) bleibt site.js/site.css. */ body.js-reveal .reveal { transform: translateY(26px) scale(0.988); transition: opacity .75s var(--ease-out), transform .85s var(--ease-out), filter .75s var(--ease-out); filter: blur(0); } body.js-reveal .reveal:not(.is-visible) { filter: blur(2px); } body.js-reveal .reveal.is-visible { transform: none; filter: blur(0); } /* ---------- Gestaffelte Kinder-Reveals ---------- Container trägt [data-stagger].reveal: er selbst blendet nicht als Block ein, stattdessen laufen seine direkten Kinder nacheinander herein. */ body.js-reveal [data-stagger].reveal { opacity: 1; transform: none; filter: none; } body.js-reveal [data-stagger].reveal > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } body.js-reveal [data-stagger].reveal.is-visible > * { opacity: 1; transform: none; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(1) { transition-delay: .04s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(2) { transition-delay: .12s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(3) { transition-delay: .20s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(4) { transition-delay: .28s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(5) { transition-delay: .36s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(6) { transition-delay: .44s; } body.js-reveal [data-stagger].reveal.is-visible > *:nth-child(7) { transition-delay: .52s; } @media (prefers-reduced-motion: reduce) { body.js-reveal .reveal, body.js-reveal [data-stagger].reveal > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ---------- Scroll-Fortschritt (Lime-Haarlinie ganz oben) ---------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright)); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .scroll-progress { animation: sp-grow linear both; animation-timeline: scroll(root block); } @keyframes sp-grow { to { transform: scaleX(1); } } } } /* ---------- Header verdichtet sich beim Scrollen ---------- */ .site-header { transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out); } .site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-border), var(--shadow-md); } /* ---------- Karten-/Interaktions-Feinschliff ---------- */ /* Primär-CTA: Pfeil rückt beim Hover leicht nach — falls die Buttons ein SVG tragen. */ .btn-primary svg, .btn-secondary svg { transition: transform var(--duration-base) var(--ease-out); } .btn-primary:hover svg, .btn-secondary:hover svg { transform: translateX(3px); } /* ---------- Sehr dezente Hero-Tiefe beim Scrollen ---------- Nur das Hairline-Raster driftet minimal — die Aurora bleibt ruhig. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .hero::after { animation: hero-grid-drift linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; } @keyframes hero-grid-drift { from { transform: translateY(-2%); } to { transform: translateY(5%); } } } } /* ---------- Hero-Auftritt: choreografierter Eintritt beim Laden ---------- Der Hauptschriftzug kommt bewusst herein, und die Lime-Wertzeile ("keiner abholt.") wird ZULETZT scharf — der Fokus-Moment der Seite. Fallback + reduced-motion: alles sofort sichtbar (opacity:1), keine Bewegung. */ .hero-intro > * { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hero-intro > * { opacity: 0; transform: translateY(28px); animation: hero-enter .95s var(--ease-out) forwards; } .hero-intro > .eyebrow { animation-delay: .10s; } .hero-intro > h1 { animation-delay: .24s; animation-duration: 1.05s; } .hero-intro > .hero__lead { animation-delay: .52s; } .hero-intro > .hero__cta-row { animation-delay: .66s; } .hero-intro > .hero__trust { animation-delay: .80s; } @keyframes hero-enter { to { opacity: 1; transform: none; } } /* Lime-Wertzeile trällt der übrigen Headline nach, rückt „scharf" — und danach zieht sich die Lime-Linie L→R darunter (der Fokus-Moment). */ .hero-intro h1 em { animation: hero-em-focus 1.1s var(--ease-out) both, hero-em-underline .7s var(--ease-out) 1.85s both; animation-delay: .92s, 1.85s; } @keyframes hero-em-focus { from { opacity: .45; filter: blur(7px); } to { opacity: 1; filter: blur(0); } } @keyframes hero-em-underline { from { background-size: 0% 2px; } to { background-size: 100% 2px; } } /* Der Lime-Strich vor der Eyebrow zeichnet sich beim Auftritt. */ .hero-intro .eyebrow::before { animation: eyebrow-line .7s var(--ease-out) both; animation-delay: .18s; } @keyframes eyebrow-line { from { width: 0; opacity: 0; } to { width: 26px; opacity: 0.7; } } } /* ---------- Dezente Bild-Parallaxe (Remagen-Band + Portrait) ---------- object-position driftet minimal, während das Bild durchs Bild scrollt — Tiefe ohne Wrapper/Markup-Eingriff. Nur wo scroll-timeline unterstützt wird. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .region-img { animation: img-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } .about-photo { animation: img-drift-portrait linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes img-drift { from { object-position: 50% 32%; } to { object-position: 50% 68%; } } /* Portrait startet bei seiner Bild-Ausrichtung (center 30%) und driftet leicht. */ @keyframes img-drift-portrait { from { object-position: 50% 22%; } to { object-position: 50% 42%; } } } } /* ---------- Mechanismus-Dreischritt: sich zeichnende Lime-Ablauflinie ---------- Zieht sich beim Reinscrollen über die bestehende .steps-Trennlinie (Ordner → Ansprache → Termin) — reine Führung/Bewegung, kein neuer Text/Markup nötig. Nur Desktop-Grid (Mobile: .steps::after in home.css ausgeblendet, dort stapeln die Karten und die Trennlinie hat keine "Verbindungs"-Bedeutung mehr). */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .steps::after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); animation: steps-line-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; } @keyframes steps-line-draw { to { transform: scaleX(1); } } } } /* ---------- Akzentwort-Unterstrich („sanftes Wort-Highlighting") ---------- Die Lime-Kursiv-Akzentwörter (h1/h2 ) bekommen eine feine Lime-Linie, die sich beim Erscheinen L→R unter das Wort zieht — der „das ist der Punkt"- Marker. Umgesetzt als Hintergrund-Verlauf (kein Extra-Markup), 2px am Boden; die aktuellen Akzentphrasen haben keine Unterlängen, die Linie kollidiert nicht. Fallback/ohne Trigger: Linie unsichtbar (background-size 0), reines Lime-Wort. */ /* Nur der HERO trägt den Lime-Unterstrich — als Signatur-Moment auf der einen Wert-Zeile („keiner abholt."). Bewusst NICHT auf allen Überschriften: der Rest der Seite bleibt ruhig, damit dieser eine Moment wirkt. Die Linie zieht sich beim Hero-Auftritt (Keyframe hero-em-underline weiter unten). */ .hero h1 em { background-image: linear-gradient(var(--color-accent-bright), var(--color-accent-bright)); background-repeat: no-repeat; background-position: left 100%; background-size: 0% 2px; padding-bottom: 0.06em; } @media (prefers-reduced-motion: reduce) { .hero h1 em { background-size: 0% 2px; } } /* ---------- Kataster-Panel „baut sich auf" ---------- Das Beispiel-Kataster trägt [data-stagger]: der Rahmen steht sofort, dann fallen Kopf → Zeilen → Fuß nacheinander ein (die Daten werden zusammengestellt). Die generischen [data-stagger]-Regeln oben liefern die Staffelung; hier nur die Bewegung etwas kleiner, damit es „einrastet" statt zu rutschen. */ body.js-reveal .kat-demo[data-stagger].reveal.is-visible > * { transition-duration: .5s; } body.js-reveal .kat-demo[data-stagger].reveal > * { transform: translateY(12px); }