/* ───────────────────────────────────────────────────────────────────────── Erfaro Motion-System (erfaro-motion.css) Fundament: C1 Subtil-Editorial · Aufsatz an Beweis-Stellen: C3 Kinetic-Data Auto-Enhancing über bestehende erfaro.css-Klassen. Progressive Enhancement: Startzustände (opacity:0 / translate) greifen NUR wenn gesetzt ist. Ohne JS und bei prefers-reduced-motion ist ALLES sofort sichtbar. Ausschließlich transform/opacity animiert -> CLS = 0, GPU-freundlich. Bernstein (--accent) ist genau EIN aktiver Zielpunkt, nirgends sonst bewegt. ───────────────────────────────────────────────────────────────────────── */ :root{ --ease-out:cubic-bezier(.22,.61,.36,1); /* C1-Signatur: overshoot-frei */ --ease-fill:cubic-bezier(.16,1,.3,1); /* C3-Balken: sanftes Einpendeln */ --reveal-dur:620ms; --reveal-shift:16px; --stagger-step:60ms; /* Cap 8 -> max 480ms (siehe unten) */ } /* ── Harte Doppel-Absicherung: reduced-motion überstimmt ALLES ──────────── */ @media (prefers-reduced-motion:reduce){ html.js-motion [data-reveal], html.js-motion .section > .container > *, html.js-motion .hero .container > *, html.js-motion .card, html.js-motion .grid > *, html.js-motion .stat, html.js-motion [data-fill] .fill-bar{ opacity:1 !important; transform:none !important; transition:none !important; width:var(--fill-target,auto) !important; } } /* ═══════════════════════════════════════════════════════════════════════ C1 — SCROLL-REVEAL (fade-up) · auto-enhancing Startzustand nur unter .js-motion. Reveal via .is-in (JS/IO gesetzt). ═══════════════════════════════════════════════════════════════════════ */ html.js-motion [data-reveal]{ opacity:0; transform:translateY(var(--reveal-shift)); transition:opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } html.js-motion [data-reveal].is-in{ opacity:1; transform:none; } /* ── Hero-Load-Stagger: Kicker -> H1 -> Lede -> Buttons ─────────────────── */ html.js-motion .hero .container > *{ opacity:0; transform:translateY(var(--reveal-shift)); transition:opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); } html.js-motion .hero.is-loaded .container > *{opacity:1;transform:none} html.js-motion .hero.is-loaded .container > *:nth-child(1){transition-delay:0ms} html.js-motion .hero.is-loaded .container > *:nth-child(2){transition-delay:80ms} html.js-motion .hero.is-loaded .container > *:nth-child(3){transition-delay:160ms} html.js-motion .hero.is-loaded .container > *:nth-child(4){transition-delay:240ms} html.js-motion .hero.is-loaded .container > *:nth-child(5){transition-delay:320ms} html.js-motion .hero.is-loaded .container > *:nth-child(n+6){transition-delay:400ms} /* ═══════════════════════════════════════════════════════════════════════ C1 — NAV-VERDICHTUNG · nur box-shadow/background, NIE Höhe (kein Reflow) Zustand via .is-scrolled (Sentinel-IO, kein Scroll-Listener). ═══════════════════════════════════════════════════════════════════════ */ html.js-motion .site-header{ transition:box-shadow .25s var(--ease-out), background-color .25s var(--ease-out); } html.js-motion .site-header.is-scrolled{ background:rgba(247,248,250,.95); box-shadow:0 1px 0 var(--border), 0 6px 20px -12px rgba(26,42,51,.35); } /* ═══════════════════════════════════════════════════════════════════════ C1 — MICRO-INTERACTIONS · Karten-Lift + Button-Lift (KEIN Glow) ═══════════════════════════════════════════════════════════════════════ */ html.js-motion .card{ transition:transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } @media (hover:hover){ html.js-motion .card:hover{ transform:translateY(-2px); border-color:var(--petrol-200); box-shadow:var(--shadow); } html.js-motion .btn:hover, html.js-motion .nav-cta:hover{ transform:translateY(-1px); } } html.js-motion .btn:active, html.js-motion .nav-cta:active{transform:translateY(0)} html.js-motion .btn{transition:background .15s,border-color .15s,transform .12s var(--ease-out)} /* ═══════════════════════════════════════════════════════════════════════ C3 — COUNT-UP · tabular-nums, Format bleibt erhalten (JS toLocaleString) Wert ist Quelltext -> screenreaderfest. Kein Layout-Shift, feste Breite. ═══════════════════════════════════════════════════════════════════════ */ .stat .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ═══════════════════════════════════════════════════════════════════════ C3 — PROGRESS / SOUVERÄNITÄTS-REGLER · width-Transition im fixen Track Markup:
…
Fill füllt sich beim Sichtbarwerden (.is-in). CLS=0: fixer Track, overflow. ═══════════════════════════════════════════════════════════════════════ */ .fill-track{ position:relative; background:var(--petrol-100); border-radius:99px; height:10px; overflow:hidden; } .fill-bar{ display:block; height:100%; width:var(--fill-target,0%); background:var(--primary); border-radius:99px; } html.js-motion [data-fill] .fill-bar{ width:0%; transition:width 900ms var(--ease-fill); transition-delay:var(--reveal-delay,120ms); } html.js-motion [data-fill].is-in .fill-bar{width:var(--fill-target,0%)} /* Bernstein: EIN aktiver Zielpunkt/Marker (nur mit data-accent gesetzt) */ [data-fill][data-accent] .fill-bar{background:var(--accent)} .fill-label{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)} /* ═══════════════════════════════════════════════════════════════════════ C1/C3 — SVG LINE-DRAW · einziger 'zeichnender' Akzent (Hero/Datengrafik) Markup: pathLength=1 im JS gesetzt; zeichnet bei Sichtbarkeit. ═══════════════════════════════════════════════════════════════════════ */ /* Basiszustand = sichtbar (No-JS / reduced-motion: Endzustand ist Default) */ .line-draw path{stroke-dashoffset:0} /* Leeren Startzustand nur unter js-motion VOR dem Reveal setzen */ html.js-motion .line-draw path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1400ms var(--ease-out); } html.js-motion .line-draw.is-in path{stroke-dashoffset:0} /* ── 2-Service-Betriebsmodell: dezenter aktiver-Karten-Rahmen ───────────── */ html.js-motion .betrieb-card{transition:transform .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)} @media (hover:hover){html.js-motion .betrieb-card:hover{transform:translateY(-2px);border-color:var(--petrol-200);box-shadow:var(--shadow)}}