/* ============================================================ EnergyEng V2 — motion.css · Bewegungssystem (Core) Lädt nach style.css. Die Tokens in :root sind verbindlich für alle Dateien und werden nirgends überschrieben. API — KLASSEN (Ausgangszustände gelten nur unter html.js, ohne JavaScript ist alles sofort sichtbar) .rev Text: opacity 0 + 16 px Versatz → .on (--t-3) .rev-h Überschrift als Zeilenmaske (clip-path + 35 %). Mit data-split="lines" läuft jede Zeile einzeln (90 ms Stagger), sonst die ganze Überschrift. .rev-img Bild/Fläche als Clip-Wipe (--t-4), Bild darin scale 1.08 → 1. Richtung: data-wipe="top|left| bottom|right" (Standard top = fallende Klappe). .rev-row Container: Kinder fliegen mit 55 ms Stagger ein (nth-child, ab dem 8. Kind gleiches Delay). .rev-line Linie: scaleX 0 → 1 von links (.7 s). .rev-blur opacity + blur(8px) → 0 (Unterseiten-Sublines). --d / --rd optionales Delay je Element (V1-kompatibel). Nach Abschluss entfernt motion.js die .rev*-Klassen und setzt .rev-done, damit Hover-Übergänge der Bauteile wieder greifen. .cnt[data-to][data-dec] Zähler als Odometer (IO threshold .6). .lbl .lbl-wide .readout Mono-Label-Stufen (style.css). .svc-grid.cols-2/.cols-3 · .sec-tight · .sec-cta · .mt-16/18/24/32 Raster und Abstände (style.css). .target-flash 1,5 s roter Rahmen am Anker-Ziel. API — ATTRIBUTE data-seq="1..8" Einschaltsequenz: sichtbar ab body.ready mit Delay var(--seq-n); data-seq="nav" staffelt die Kinder der Nav mit 40 ms ab --seq-7. data-split="lines" Zeilen-Spans …; bei einer Trennung an zeigt .ln.hy den Strich per CSS. data-ziel="leistung-05" hängt zur Laufzeit #ziel an href an. data-nav="light" Zone, in der die Nav hell wird (Standard: jede .on-light ohne data-nav; data-nav="dark" nimmt eine .on-light heraus). Setzt .nav.light und body.on-light-zone. data-no-transition Link ohne Seitenvorhang. data-bg="pfad.jpg" Menü-Vorschaubild, lazy beim ersten Öffnen. data-wipe siehe .rev-img. API — ZUSTÄNDE html.js motion.js läuft · html.js-ready Vorhang übernommen html.static ?static=1 · html.lerp Wheel-Lerp aktiv body.ready Vorhang öffnet, Sequenzen starten body.seq-done Sequenz fertig (Sequenz-Übergänge entfallen) body.leaving Seitenwechsel läuft · body.menu-open Menü offen body.on-light-zone Nav über heller Zone API — JAVASCRIPT (window.EE, siehe Kopf von motion.js) EE.static EE.reduce(MediaQueryList) EE.coarse EE.fine EE.onTick(fn) EE.offTick(fn) EE.scrollTo(y) EE.lerp(a,b,t) EE.odometer(el,to,opts) EE.splitLines(el) EE.reveal(root) EE.openMenu() EE.closeMenu() EE.onReady(fn) LADEREIHENFOLGE : style.css → motion.css → (journey.css | pages.css) -Ende: motion.js → main.js → (journey.js | pages.js) PFLICHT: Jede neue Klasse mit Ausgangszustand opacity 0, clip-path oder transform wird im Statik-Block (html.static) UND im Reduced-Motion-Block neutralisiert. BILDVARIANTEN (assets/img, erzeugt mit sips, Originale bleiben) Mobil (-m, lange Kante 900 px) · Desktop (-d, lange Kante 1600 px, kleinere Originale nicht hochgerechnet), alle JPEG: uav-trassenflug-m.jpg 900×506 67 KB uav-trassenflug-d.jpg 1600×900 192 KB hero-freileitung-m.jpg 900×506 53 KB hero-freileitung-d.jpg 1600×900 188 KB kabeltiefbau-m.jpg 900×506 133 KB kabeltiefbau-d.jpg 1600×900 330 KB traverse-blick-m.jpg 675×900 103 KB traverse-blick-d.jpg 1200×1600 332 KB mastmontage-nacht-m.jpg 900×506 101 KB mastmontage-nacht-d.jpg 1600×900 325 KB nestmonitoring-m.jpg 675×900 122 KB nestmonitoring-d.jpg 1200×1600 303 KB psaga-m.jpg 675×900 97 KB psaga-d.jpg 1200×1600 257 KB trackway-real-schnee-m.jpg 900×506 70 KB trackway-real-schnee-d.jpg 1600×900 158 KB trackway-real-kiesufer-m.jpg 900×506 147 KB trackway-real-kiesufer-d.jpg 1600×900 404 KB hero-erdseilspitze-m.jpg 900×509 107 KB hero-erdseilspitze-d.jpg 1600×904 254 KB (neues Startbild, 15.09.) umspannwerk-m.jpg 900×506 93 KB umspannwerk-d.jpg 1600×900 311 KB strommast-m.jpg 900×537 41 KB strommast-d.jpg 1012×604 49 KB trackway-detail-m.jpg 900×550 94 KB trackway-detail-d.jpg 916×560 88 KB trackway-m.jpg 795×448 108 KB trackway-d.jpg 795×448 111 KB (PNG-Quellen sind vollflächig deckend, daher JPEG statt PNG) Summe aller -m: 1,12 MB logo-energyeng-white-2x.png 295×142 11 KB · logo-energyeng-black-2x.png 295×142 10 KB ============================================================ */ :root{ /* Dauern */ --t-1:.22s; /* Hover, Farbwechsel, Pfeile */ --t-2:.45s; /* Zustandswechsel */ --t-3:.9s; /* Reveal von Text, Zeilen, Masken */ --t-4:1.4s; /* Kino: Bild-Clip, Hero-Bild, Band */ /* Easing: Eintritt Out · Austritt In · Zustand InOut */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1); --ease-in:cubic-bezier(.7,0,.84,0); /* Einschaltsequenz (relativ zu body.ready) */ --seq-1:0s; --seq-2:.15s; --seq-3:.3s; --seq-4:.4s; --seq-5:.9s; --seq-6:.95s; --seq-7:1.05s; --seq-8:1.1s; /* Faktoren und Abstände der Reveal-Grammatik */ --mk:1; /* Dauer-Faktor */ --dk:1; /* Delay-Faktor */ --rev-y:16px; --stagger:55ms; --line-stagger:90ms; } /* Touch: kürzer, halbe Delays, weniger Versatz */ @media(pointer:coarse){ :root{ --mk:.6; --dk:.5; --rev-y:14px; } } /* Browser-Seitenwechsel als Erweiterung (gleicher Ursprung) */ @view-transition{ navigation:auto; } html.lerp{scroll-behavior:auto;} /* ---------- Reveal-Grammatik ---------- */ html.js .rev{opacity:0;translate:0 var(--rev-y);} html.js .rev.on{ opacity:1;translate:none; transition:opacity calc(var(--t-3) * var(--mk)) var(--ease-out),translate calc(var(--t-3) * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } /* Zeilenmaske: ohne Split die ganze Überschrift, mit Split je Zeile */ .ln{display:block;} .ln-in{display:inline-block;white-space:nowrap;} .ln.hy .ln-in::after{content:"\2010";} html.js .rev-h:not(.is-split){clip-path:inset(0 0 100% 0);translate:0 35%;} html.js .rev-h.on:not(.is-split){ clip-path:inset(-.25em -.1em -.25em -.1em);translate:none; transition:clip-path calc(var(--t-3) * var(--mk)) var(--ease-out),translate calc(var(--t-3) * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } html.js .rev-h.is-split .ln-in{clip-path:inset(0 0 100% 0);translate:0 35%;} html.js .rev-h.is-split.on .ln-in{ clip-path:inset(-.25em -.1em -.25em -.1em);translate:none; transition:clip-path calc(var(--t-3) * var(--mk)) var(--ease-out),translate calc(var(--t-3) * var(--mk)) var(--ease-out); transition-delay:calc((var(--rd, var(--d, 0s)) + var(--i, 0) * var(--line-stagger)) * var(--dk)); } /* Bild-Wipe: Richtung trägt Bedeutung (oben fällt, links rollt aus, unten hebt aus) */ html.js .rev-img{clip-path:inset(0 0 100% 0);} html.js .rev-img[data-wipe="left"]{clip-path:inset(0 100% 0 0);} html.js .rev-img[data-wipe="right"]{clip-path:inset(0 0 0 100%);} html.js .rev-img[data-wipe="bottom"]{clip-path:inset(100% 0 0 0);} html.js .rev-img img{scale:1.08;} html.js .rev-img.on{ clip-path:inset(0); transition:clip-path calc(var(--t-4) * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } html.js .rev-img.on img{ scale:1; transition:scale calc(var(--t-4) * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } /* Container mit Stagger der Kinder */ html.js .rev-row > *{opacity:0;translate:0 var(--rev-y);} html.js .rev-row.on > *{ opacity:1;translate:none; transition:opacity calc(var(--t-3) * var(--mk)) var(--ease-out),translate calc(var(--t-3) * var(--mk)) var(--ease-out); transition-delay:calc((var(--rd, 0s) + 7 * var(--stagger)) * var(--dk)); } html.js .rev-row.on > :nth-child(1){transition-delay:calc(var(--rd, 0s) * var(--dk));} html.js .rev-row.on > :nth-child(2){transition-delay:calc((var(--rd, 0s) + 1 * var(--stagger)) * var(--dk));} html.js .rev-row.on > :nth-child(3){transition-delay:calc((var(--rd, 0s) + 2 * var(--stagger)) * var(--dk));} html.js .rev-row.on > :nth-child(4){transition-delay:calc((var(--rd, 0s) + 3 * var(--stagger)) * var(--dk));} html.js .rev-row.on > :nth-child(5){transition-delay:calc((var(--rd, 0s) + 4 * var(--stagger)) * var(--dk));} html.js .rev-row.on > :nth-child(6){transition-delay:calc((var(--rd, 0s) + 5 * var(--stagger)) * var(--dk));} html.js .rev-row.on > :nth-child(7){transition-delay:calc((var(--rd, 0s) + 6 * var(--stagger)) * var(--dk));} /* Linie: .7 s laut Motion-System Punkt 4 (Linien sind kürzer als Text) */ html.js .rev-line{scale:0 1;transform-origin:left center;} html.js .rev-line.on{ scale:1 1; transition:scale calc(.7s * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } html.js .rev-blur{opacity:0;filter:blur(8px);} html.js .rev-blur.on{ opacity:1;filter:none; transition:opacity calc(var(--t-3) * var(--mk)) var(--ease-out),filter calc(var(--t-3) * var(--mk)) var(--ease-out); transition-delay:calc(var(--rd, var(--d, 0s)) * var(--dk)); } /* Unterseiten-Hero: Staffel unter dem abfahrenden Vorhang */ .page-hero .crumb{--rd:0s;} .page-hero h1{--rd:.1s;} .page-hero .sub{--rd:.22s;} .page-hero .hero-cta{--rd:.34s;} /* Hero-Bild setzt sich in 1,6 s (Motion-System Punkt 8, länger als --t-4: Nachlauf unter dem Text) */ html.js .page-hero .ph-img img{scale:1.08;} html.js body.ready .page-hero .ph-img img{scale:1;transition:scale calc(1.6s * var(--mk)) var(--ease-out);} /* ---------- Einschaltsequenz [data-seq] ---------- */ [data-seq="1"]{--seq-d:var(--seq-1);} [data-seq="2"]{--seq-d:var(--seq-2);} [data-seq="3"]{--seq-d:var(--seq-3);} [data-seq="4"]{--seq-d:var(--seq-4);} [data-seq="5"]{--seq-d:var(--seq-5);} [data-seq="6"]{--seq-d:var(--seq-6);} [data-seq="7"]{--seq-d:var(--seq-7);} [data-seq="8"]{--seq-d:var(--seq-8);} [data-seq="nav"]{--seq-d:var(--seq-7);} html.js body:not(.ready) [data-seq]:not([data-seq="nav"]):not([data-split]){opacity:0;translate:0 18px;} html.js body.ready:not(.seq-done) [data-seq]:not([data-seq="nav"]):not([data-split]){ transition:opacity var(--t-3) var(--ease-out),translate var(--t-3) var(--ease-out); transition-delay:var(--seq-d, 0s); } /* Überschrift mit Zeilen: bis zum Split verborgen, dann Zeilenmaske mit 90 ms Stagger */ html.js body:not(.ready) [data-seq][data-split],html.js [data-seq][data-split]:not(.is-split){opacity:0;} html.js body:not(.ready) [data-seq] .ln-in{clip-path:inset(0 0 100% 0);translate:0 35%;} html.js body.ready:not(.seq-done) [data-seq] .ln-in{ transition:clip-path var(--t-3) var(--ease-out),translate var(--t-3) var(--ease-out); transition-delay:calc(var(--seq-d, 0s) + var(--i, 0) * var(--line-stagger)); } html.js body.ready [data-seq] .ln-in{clip-path:inset(-.25em -.1em -.25em -.1em);} /* Nav: Kinder mit 40 ms Stagger */ html.js body:not(.ready) [data-seq="nav"] > *{opacity:0;translate:0 -10px;} html.js body.ready:not(.seq-done) [data-seq="nav"] > *{ transition:opacity var(--t-3) var(--ease-out),translate var(--t-3) var(--ease-out); transition-delay:calc(var(--seq-7) + 3 * 40ms); } html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(1){transition-delay:var(--seq-7);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(2){transition-delay:calc(var(--seq-7) + 40ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(3){transition-delay:calc(var(--seq-7) + 80ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(4){transition-delay:calc(var(--seq-7) + 120ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(5){transition-delay:calc(var(--seq-7) + 160ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(6){transition-delay:calc(var(--seq-7) + 200ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(7){transition-delay:calc(var(--seq-7) + 240ms);} html.js body.ready:not(.seq-done) [data-seq="nav"] > :nth-child(n+8){transition-delay:calc(var(--seq-7) + 280ms);} /* ---------- Vorhang ---------- */ /* Vor dem ersten Paint schwarz vorgezeichnet; motion.js übernimmt mit .curtain. Sicherung: ohne Übernahme blendet er nach 4 s von selbst aus. */ @media(scripting:enabled) and (prefers-reduced-motion:no-preference){ html:not(.static):not(.js-ready) body::before{ content:"";position:fixed;inset:0;z-index:9000;background:var(--ink); animation:ee-failsafe 0s 4s forwards; } } @keyframes ee-failsafe{to{visibility:hidden;}} .curtain{ position:fixed;inset:0;z-index:9000;background:var(--ink); clip-path:inset(0);pointer-events:none; } /* Abfahrt nach oben: Unterseiten .6 s Out (Punkt 8), Startseite .7 s InOut (S1) */ .curtain.up{clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out);} .curtain.intro.up{transition:clip-path .7s var(--ease-inout);} /* Seitenwechsel: fährt von unten hoch, .4 s In (Punkt 8) */ .curtain.leave{clip-path:inset(100% 0 0 0);pointer-events:auto;} .curtain.leave.in{clip-path:inset(0);transition:clip-path .4s var(--ease-in);} .curtain-alt{ position:absolute;right:calc(var(--pad) * .55);top:50%; display:flex;align-items:baseline;gap:6px; font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.04em; font-variant-numeric:tabular-nums;color:#fff; translate:0 -50%; } .curtain-alt .ca-unit{font-size:12px;font-weight:500;color:var(--mut-d);} .curtain.intro.up .curtain-alt{translate:0 calc(-50vh - 60px);transition:translate .7s var(--ease-inout);} @media(max-width:900px){ .curtain-alt{font-size:20px;right:18px;} } body.leaving{pointer-events:none;} /* ---------- Odometer ---------- */ /* Je Ziffer ein Slot: unsichtbare Ziffer gibt Breite und Grundlinie, die Walze läuft darüber */ .od{position:relative;display:inline-block;line-height:1;clip-path:inset(-.08em 0);transition:opacity var(--t-1) var(--ease-out);} .od-ghost{visibility:hidden;} .od-col{position:absolute;left:0;right:0;top:0;display:block;will-change:transform;} .od-col > span{display:block;height:1em;text-align:center;} .od.od-lz{opacity:.28;} .od-unit{opacity:0;transition:opacity var(--t-1) var(--ease-out);} .od-unit.is-on{opacity:1;} /* ---------- Marquee ---------- */ /* Grundlauf linear (einzige erlaubte Ausnahme), läuft nur im Viewport (.run) */ .marq-shift{display:block;width:max-content;} .marq-track{animation:ee-marq 26s linear infinite;animation-play-state:paused;} .marq.run .marq-track{animation-play-state:running;} @keyframes ee-marq{to{transform:translateX(calc(-100% / var(--marq-n, 2)));}} @media(hover:hover){ .marq.run:hover .marq-track{animation-play-state:paused;} } /* ---------- Anker-Ziele ---------- */ [id^="leistung-"],[id^="referenz-"],[id^="wp-"]{scroll-margin-top:110px;} .target-flash{position:relative;} .target-flash::after{ content:"";position:absolute;inset:-6px;pointer-events:none;z-index:3; border:2px solid var(--red);border-radius:calc(var(--r-md) + 6px); animation:ee-flash 1.5s var(--ease-in) forwards; } /* Signature-Keyframe: 1,5 s halten und ausblenden (Punkt „Anker-Mechanik“) */ @keyframes ee-flash{0%,55%{opacity:1;}100%{opacity:0;}} /* ---------- Overlay-Menü: Vorhang (Punkt 9) ---------- */ /* Öffnen .7 s InOut, Schließen .5 s In, Leisten-Links .25 s: Werte aus dem Motion-System */ .menu{transition:visibility 0s var(--ease-in) .5s;} body.menu-open .menu{transition:visibility 0s var(--ease-inout) 0s;} .menu-list{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease-in);} .menu-view{clip-path:inset(0 0 0 100%);transition:clip-path .5s var(--ease-in);} body.menu-open .menu-list,body.menu-open .menu-view{clip-path:inset(0);transition:clip-path .7s var(--ease-inout);} .menu-list a{opacity:0;translate:0 40px;transition:opacity .25s var(--ease-in),translate .25s var(--ease-in);} body.menu-open .menu-list a{ opacity:1;translate:none; transition:opacity var(--t-3) var(--ease-out),translate var(--t-3) var(--ease-out); transition-delay:calc(.25s + var(--i, 0) * 50ms); } body:not(.menu-open) .menu-list a{transition-delay:0s;transition-duration:.25s;} .menu-list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out);} .menu-list a:focus-visible::after{transform:scaleX(1);} .menu-list a:focus-visible .mn{color:var(--red);} .menu-list a:focus-visible .mt{color:var(--red);transform:translateX(10px);} @media(hover:hover){ .menu-list a:hover::after{transform:scaleX(1);} .menu-list a:hover .mn{color:var(--red);} .menu-list a:hover .mt{color:var(--red);transform:translateX(10px);} } .menu-foot{opacity:0;transition:opacity .25s var(--ease-in);} body.menu-open .menu-foot{opacity:1;transition:opacity var(--t-3) var(--ease-out) .55s;} /* Vorschau: neues Bild wischt von rechts über das alte, setzt sich von 1.06 auf 1 */ .menu-view .mv{ clip-path:inset(0 0 0 100%);scale:1.06;filter:grayscale(35%) contrast(1.05); transition:clip-path .6s var(--ease-inout) .6s,scale var(--t-4) var(--ease-out) .6s,filter var(--t-2) var(--ease-out); } .menu-view .mv.show{ clip-path:inset(0);scale:1; transition:clip-path .6s var(--ease-inout),scale var(--t-4) var(--ease-out),filter var(--t-2) var(--ease-out); } body:not(.menu-open) .menu-view .mv.show{scale:1.06;} .menu-view.hovering .mv.show{filter:grayscale(0) contrast(1.05);} /* Leisten-Links und CTA blenden bei offenem Menü aus */ .nav-cta{transition:transform var(--t-2) var(--ease-out),color var(--t-1) var(--ease-out),border-color var(--t-1) var(--ease-out),opacity .25s var(--ease-inout);} body.menu-open .nav-links .nl,body.menu-open .nav-cta{opacity:0;pointer-events:none;} .burger span:nth-child(2){transition-delay:40ms;} .burger span:nth-child(3){transition-delay:80ms;} @media(max-width:900px){ /* Bildstreifen: Clip liegt am Bild selbst, da .menu-view hier display:contents ist */ body:not(.menu-open) .menu-view .mv.show{clip-path:inset(0 0 0 100%);} } /* ---------- Statik-Modus: alles sofort sichtbar ---------- */ /* Keine Übergänge, auch keine Farbwechsel beim Laden (z. B. aria-current) */ html.static *,html.static *::before,html.static *::after{transition:none!important;animation:none!important;} html.static .rev,html.static .rev-h,html.static .rev-img,html.static .rev-img img, html.static .rev-row > *,html.static .rev-line,html.static .rev-blur, html.static .ln-in,html.static [data-seq],html.static [data-seq="nav"] > *, html.static .page-hero .ph-img img{ opacity:1!important;translate:none!important;scale:none!important; clip-path:none!important;filter:none!important;transition:none!important;animation:none!important; } html.static .curtain{display:none!important;} html.static .marq-track{animation:none!important;padding:0 16px;row-gap:4px;} html.static .marq-track span{font-size:clamp(17px,2.6vw,34px);gap:14px;padding:0 7px;} html.static .marq-clone{display:none!important;} html.static .menu,html.static .menu-list,html.static .menu-list a,html.static .menu-view,html.static .menu-view .mv{transition:none!important;} html.static .od-unit{opacity:1!important;} /* ---------- Ohne Frame-Takt (html.noframes, von motion.js erkannt): Endzustände sofort ---------- */ html.noframes *,html.noframes *::before,html.noframes *::after{transition:none!important;animation:none!important;} /* ---------- Reduced Motion: jede Bewegung aus ---------- */ @media(prefers-reduced-motion:reduce){ .rev,.rev-h,.rev-img,.rev-img img,.rev-row > *,.rev-line,.rev-blur, .ln-in,[data-seq],[data-seq="nav"] > *,.page-hero .ph-img img{ opacity:1!important;translate:none!important;scale:none!important; clip-path:none!important;filter:none!important;transition:none!important;animation:none!important; } .curtain{display:none!important;} .marq-track{animation:none!important;padding:0 16px;row-gap:4px;} .marq-track span{font-size:clamp(17px,2.6vw,34px);gap:14px;padding:0 7px;} .marq-clone{display:none!important;} .od-unit{opacity:1!important;} .target-flash::after{animation:none;opacity:0;} .menu,.menu-list,.menu-view,.menu-list a,.menu-view .mv,.menu-foot{transition:none!important;} } /* Screenreader-Text der Zähler */ .od-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}