/* ============================================================ Deep5 — Bewegung Die ganze Bewegung der Seite an einer Stelle. Zeiten, Kurven und Wege stehen als Token in marken.css; hier steht keine Zahl, die man dort nachschlagen könnte. Zwei Schalter, und nur diese zwei: html.bewegung setzt js/bewegung.js noch im , bevor das erste Bild steht. NUR was hinter diesem Schalter steht, darf etwas verbergen. Kein Skript, kein Schalter, nichts verborgen — wer JavaScript blockt, sieht die vollständige Seite. @media (prefers-reduced-motion: no-preference) umschließt jede Regel, die einen Weg zurücklegt. Wer Ruhe eingestellt hat, bekommt die Endzustände sofort, und zwar ohne dass irgendwo !important nötig wäre: die Regeln existieren dort schlicht nicht. Was bleibt, steht in Abschnitt 6 — Zustände über Farbe, Rahmen und Linie statt über Verschiebung. Aufteilung gegenüber den Bausteindateien: Ein Weg, der etwas BEDEUTET — Balken zu Kreuz, Plus zu Minus, Haarlinie unter einer Zeile, Balken des Lese- fortschritts —, steht beim Baustein und gilt immer. Hier steht nur, wie lange er dafür braucht. Ein Weg, der nur AUFMERKSAMKEIT LENKT — Auftritt, Pfeil- versatz, Anheben, Zeileneinzug —, steht hier. Damit entfällt er bei Ruhe von selbst, statt zurückgenommen werden zu müssen. Reihenfolge in dieser Datei: 0 Bildfolgen (@keyframes) 1 Auftritt — Abschnitte und Karten treten ein 2 Passer — der Einzug in den Case-Block 3 Hero — der Einlauf beim Laden 4 Zustände — die Wege unter dem Zeigefinger 5 Lesefortschritt 6 Ersatz bei prefers-reduced-motion 7 Druck ============================================================ */ /* ============================================================ 0 — Bildfolgen Stehen außerhalb jeder Medienabfrage, weil eine @keyframes-Regel von sich aus nichts auslöst. Angewandt werden sie nur in 3. ============================================================ */ @keyframes d5-steigt{ from{ opacity:0; transform:translate3d(0,var(--weg-hero),0); } to { opacity:1; transform:none; } } @keyframes d5-senkt{ from{ opacity:0; transform:translate3d(0,calc(var(--weg-hero) * -.5),0); } to { opacity:1; transform:none; } } @keyframes d5-zieht{ from{ transform:scaleX(0); } to { transform:scaleX(1); } } @keyframes d5-laufband{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } @keyframes d5-lage-fliesst{ from{ transform:translate3d(-4%,-3%,0) scale(.94); } to { transform:translate3d(7%,5%,0) scale(1.08); } } @keyframes d5-uebergabe{ 0%,12%{ transform:translate3d(-10px,0,0); } 45%,58%{ transform:translate3d(10px,0,0); } 88%,100%{ transform:translate3d(-10px,0,0); } } @keyframes d5-spur{ from{ stroke-dashoffset:64; } to { stroke-dashoffset:0; } } @keyframes d5-dringend{ 0%,22%,100%{ transform:scale(.84); opacity:.56; } 48%,72%{ transform:scale(1); opacity:1; } } @keyframes d5-signalisiert{ 0%{ stroke-dashoffset:290; opacity:.34; } 42%,88%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:.34; } } @keyframes d5-klingelt{ 0%,48%,100%{ opacity:0; transform:scale(.84); } 58%,78%{ opacity:1; transform:none; } } @keyframes d5-zufuhr-links{ from{ transform:translate3d(-4px,-3px,0); } to { transform:translate3d(9px,6px,0); } } @keyframes d5-zufuhr-rechts{ from{ transform:translate3d(4px,-3px,0); } to { transform:translate3d(-9px,6px,0); } } @keyframes d5-zufuhr-unten{ from{ transform:translate3d(-4px,4px,0); } to { transform:translate3d(9px,-6px,0); } } @keyframes d5-wissen-fehlt{ 0%,32%,100%{ opacity:1; transform:none; } 54%,74%{ opacity:.18; transform:translate3d(0,-3px,0); } } @keyframes d5-verbindung-fehlt{ 0%,32%,100%{ opacity:.8; } 54%,74%{ opacity:.12; } } @media (prefers-reduced-motion: no-preference){ /* ============================================================ 1 — Auftritt Jedes Element mit .rv tritt genau einmal ein. js/bewegung.js setzt .is-in, sobald es im Bild ist, und meldet es sofort ab. Gestaffelt wird über .rv-d1 bis .rv-d3 im HTML: die Reihenfolge steht dort, wo die Reihenfolge entsteht. ============================================================ */ .bewegung .rv{ opacity:0; transform:translate3d(0,var(--weg-auftritt),0); } .bewegung .rv.is-in{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .rv-d1.is-in{ transition-delay:var(--staffel); } .bewegung .rv-d2.is-in{ transition-delay:calc(var(--staffel) * 2); } .bewegung .rv-d3.is-in{ transition-delay:calc(var(--staffel) * 3); } .bewegung .rv-d4.is-in{ transition-delay:calc(var(--staffel) * 4); } /* Eine Industriegruppe setzt sich zusammen, statt fertig dazustehen: Die Überschrift kommt von links, das Motiv blendet sich danach ein, dann folgen die Fälle einer nach dem anderen. Der Leser merkt so, dass ein neuer Bereich beginnt, ohne dass ein Trennstrich es ihm sagen muss. Der Weg zur Seite ist länger als der nach oben, weil eine waagerechte Bewegung über dieselbe Strecke kürzer wirkt. */ .bewegung .rv--links{ transform:translate3d(calc(var(--weg-auftritt) * -1.8),0,0); } /* Das Motiv bewegt sich nicht, es kommt nur auf. Ein Bild, das einfährt, zieht den Blick von der Überschrift ab, die gleichzeitig läuft. */ .bewegung .rv--auf{ transform:none; } .bewegung .rv--auf.is-in{ transition:opacity calc(var(--zeit-auftritt) * 2) var(--kurve-auftritt); } /* Das Band „Gebaut für": die Einträge rücken nacheinander ein, nicht als Block. Sie hängen an derselben .is-in-Kennung wie alles andere, gestaffelt über nth-child statt über eigene Klassen — es sind immer dieselben fünf. */ .bewegung .gebaut__pos{ opacity:0; transform:translate3d(0,8px,0); } .bewegung .gebaut.is-in .gebaut__pos{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .gebaut.is-in .gebaut__pos:nth-child(2){ transition-delay:calc(var(--staffel) * 1); } .bewegung .gebaut.is-in .gebaut__pos:nth-child(3){ transition-delay:calc(var(--staffel) * 2); } .bewegung .gebaut.is-in .gebaut__pos:nth-child(4){ transition-delay:calc(var(--staffel) * 3); } .bewegung .gebaut.is-in .gebaut__pos:nth-child(5){ transition-delay:calc(var(--staffel) * 4); } /* Die drei Zeichen. Sie laufen erst, wenn ihr Weg im Bild ist, und genau einmal — eine Dauerschleife im Randbereich zieht den Blick vom Text ab. */ .bewegung .weg.is-in .zx__akte2{ animation:d5-faellt .72s var(--kurve-auftritt) calc(var(--staffel) * 2) backwards; } .bewegung .weg.is-in .zx__akte1{ animation:d5-faellt .72s var(--kurve-auftritt) calc(var(--staffel) * 4) backwards; } @keyframes d5-faellt{ from{ transform:translate3d(0,-14px,0); opacity:0; } to { transform:none; opacity:1; } } /* Der Bausatz: drei Teile fahren von außen ein, der Rahmen rastet zuletzt darum. Drei Bildfolgen statt einer mit Variablen — eine Eigenschaft in @keyframes ist nicht animierbar, und ausgeschrieben liest es sich ohnehin wie das, was zu sehen ist. */ .bewegung .weg.is-in .zx__teil--l{ animation:d5-rastet-l .62s var(--kurve-auftritt) backwards; } .bewegung .weg.is-in .zx__teil--r{ animation:d5-rastet-r .62s var(--kurve-auftritt) var(--staffel) backwards; } .bewegung .weg.is-in .zx__teil--m{ animation:d5-rastet-m .62s var(--kurve-auftritt) calc(var(--staffel) * 2) backwards; } .bewegung .weg.is-in .zx__rahmen{ transform-box:fill-box; transform-origin:center; animation:d5-schliesst .5s var(--kurve-auftritt) calc(var(--staffel) * 4) backwards; } @keyframes d5-rastet-l{ from{ transform:translate3d(-16px,0,0); opacity:0; } to { transform:none; opacity:1; } } @keyframes d5-rastet-r{ from{ transform:translate3d(16px,0,0); opacity:0; } to { transform:none; opacity:1; } } @keyframes d5-rastet-m{ from{ transform:translate3d(0,16px,0); opacity:0; } to { transform:none; opacity:1; } } @keyframes d5-schliesst{ from{ transform:scale(1.14); opacity:0; } to { transform:none; opacity:1; } } .bewegung .weg.is-in .zx__lauf{ animation:d5-laeuft 1.9s var(--kurve-auftritt) calc(var(--staffel) * 2) backwards; } @keyframes d5-laeuft{ from{ stroke-dashoffset:100; } to { stroke-dashoffset:0; } } /* Die sechs Prozessbilder laufen je Schritt genau einmal. Jede Bewegung beschreibt den Inhalt: sortieren, planen, bauen, antreiben, lernen, erweitern. Ohne Bewegungskennung stehen alle Endzustände sofort da. */ /* 01 — Achsen entstehen, danach ordnen sich die Fälle ein. */ .bewegung .ablauf__step .prozessbild--analyse .pb__achse{ stroke-dasharray:520; stroke-dashoffset:520; } .bewegung .ablauf__step .prozessbild--analyse .pb__achsenlabel, .bewegung .ablauf__step .prozessbild--analyse .pb__fall{ opacity:0; transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step .prozessbild--analyse .pb__fall{ transform:translate3d(0,calc(var(--weg-auftritt) * .5),0); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__achse{ stroke-dashoffset:0; transition:stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__achsenlabel, .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__fall{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__achsenlabel{ transition-delay:var(--staffel); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__fall--4{ transition-delay:calc(var(--staffel) * 2); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__fall--3{ transition-delay:calc(var(--staffel) * 3); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__fall--2{ transition-delay:calc(var(--staffel) * 4); } .bewegung .ablauf__step.is-in .prozessbild--analyse .pb__fall--1{ transition-delay:calc(var(--staffel) * 5); } /* 02 — lose Bausteine rücken in den Plan, dann schließen sich die Wege. */ .bewegung .ablauf__step .prozessbild--planung .pb__planrahmen, .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein{ opacity:0; transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein--1{ transform:translate3d(calc(var(--weg-auftritt) * -.65),0,0); } .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein--2{ transform:translate3d(0,calc(var(--weg-auftritt) * -.65),0); } .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein--3{ transform:scale(.82); } .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein--4{ transform:translate3d(0,calc(var(--weg-auftritt) * .65),0); } .bewegung .ablauf__step .prozessbild--planung .pb__planbaustein--5{ transform:translate3d(calc(var(--weg-auftritt) * .65),0,0); } .bewegung .ablauf__step .prozessbild--planung .pb__planlinie{ stroke-dasharray:100; stroke-dashoffset:100; } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planrahmen, .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planrahmen{ transition-delay:var(--staffel); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein--1{ transition-delay:calc(var(--staffel) * 2); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein--2{ transition-delay:calc(var(--staffel) * 3); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein--4{ transition-delay:calc(var(--staffel) * 4); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein--5{ transition-delay:calc(var(--staffel) * 5); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planbaustein--3{ transition-delay:calc(var(--staffel) * 6); } .bewegung .ablauf__step.is-in .prozessbild--planung .pb__planlinie{ stroke-dashoffset:0; transition:stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt) calc(var(--staffel) * 6); } /* 03 — die vier Arbeitsstationen erscheinen, das Vorhaben läuft hindurch. */ .bewegung .ablauf__step .prozessbild--bau .pb__baulinie{ stroke-dasharray:300; stroke-dashoffset:300; } .bewegung .ablauf__step .prozessbild--bau .pb__baustation, .bewegung .ablauf__step .prozessbild--bau .pb__bauknoten, .bewegung .ablauf__step .prozessbild--bau .pb__bauimpuls{ opacity:0; transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step .prozessbild--bau .pb__baustation{ transform:translate3d(0,calc(var(--weg-auftritt) * .5),0); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baulinie{ stroke-dashoffset:0; transition:stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baustation, .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauknoten{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baustation--1, .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauknoten--1{ transition-delay:var(--staffel); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baustation--2, .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauknoten--2{ transition-delay:calc(var(--staffel) * 2); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baustation--3, .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauknoten--3{ transition-delay:calc(var(--staffel) * 3); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__baustation--4, .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauknoten--4{ transition-delay:calc(var(--staffel) * 4); } .bewegung .ablauf__step.is-in .prozessbild--bau .pb__bauimpuls{ animation:d5-baut calc(var(--zeit-auftritt-tief) * 3) var(--kurve-auftritt) calc(var(--staffel) * 5) both; } @keyframes d5-baut{ 0% { opacity:0; transform:none; } 12% { opacity:1; } 88% { opacity:1; } 100%{ opacity:0; transform:translate3d(230px,0,0); } } /* 04 — der große Antrieb setzt die beiden kleineren Räder in Bewegung. */ .bewegung .ablauf__step .prozessbild--betrieb .pb__maschinenbett{ opacity:0; } .bewegung .ablauf__step.is-in .prozessbild--betrieb .pb__maschinenbett{ opacity:1; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step .prozessbild--betrieb .pb__zahnrad{ transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step.is-in .prozessbild--betrieb .pb__zahnrad--1{ animation:d5-dreht-rechts calc(var(--zeit-auftritt-tief) * 3) var(--kurve-auftritt) var(--staffel) both; } .bewegung .ablauf__step.is-in .prozessbild--betrieb .pb__zahnrad--2{ animation:d5-dreht-links calc(var(--zeit-auftritt-tief) * 3) var(--kurve-auftritt) calc(var(--staffel) * 2) both; } .bewegung .ablauf__step.is-in .prozessbild--betrieb .pb__zahnrad--3{ animation:d5-dreht-rechts calc(var(--zeit-auftritt-tief) * 3) var(--kurve-auftritt) calc(var(--staffel) * 3) both; } @keyframes d5-dreht-rechts{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } } @keyframes d5-dreht-links { from{ transform:rotate(0); } to{ transform:rotate(-540deg); } } /* 05 — die Schulung entsteht vorne, die Lernenden gewinnen nacheinander sichtbar an Höhe. */ .bewegung .ablauf__step .prozessbild--schulung .pb__tafel, .bewegung .ablauf__step .prozessbild--schulung .pb__tafelinhalt, .bewegung .ablauf__step .prozessbild--schulung .pb__trainer, .bewegung .ablauf__step .prozessbild--schulung .pb__person, .bewegung .ablauf__step .prozessbild--schulung .pb__level{ opacity:0; transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step .prozessbild--schulung .pb__trainer{ transform:translate3d(calc(var(--weg-auftritt) * -.5),0,0); } .bewegung .ablauf__step .prozessbild--schulung .pb__person{ transform:translate3d(0,calc(var(--weg-auftritt) * .5),0); } .bewegung .ablauf__step .prozessbild--schulung .pb__level{ transform:translate3d(0,calc(var(--weg-auftritt) * .35),0); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__tafel, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__tafelinhalt, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__trainer, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__person, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__level{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt), transform var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__tafel, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__tafelinhalt{ transition-delay:var(--staffel); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__trainer{ transition-delay:calc(var(--staffel) * 2); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__person--1, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__level--1{ transition-delay:calc(var(--staffel) * 3); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__person--2, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__level--2{ transition-delay:calc(var(--staffel) * 4); } .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__person--3, .bewegung .ablauf__step.is-in .prozessbild--schulung .pb__level--3{ transition-delay:calc(var(--staffel) * 5); } /* 06 — das vorhandene System steht zuerst; der neue Baustein fährt in den freien Platz und schließt den nächsten Entwicklungszyklus. */ .bewegung .ablauf__step .prozessbild--ausbau .pb__systemkern, .bewegung .ablauf__step .prozessbild--ausbau .pb__systemmodul, .bewegung .ablauf__step .prozessbild--ausbau .pb__zielslot, .bewegung .ablauf__step .prozessbild--ausbau .pb__zyklus{ opacity:0; } .bewegung .ablauf__step .prozessbild--ausbau .pb__systemlinie, .bewegung .ablauf__step .prozessbild--ausbau .pb__ausbaulinie, .bewegung .ablauf__step .prozessbild--ausbau .pb__zyklus{ stroke-dasharray:260; stroke-dashoffset:260; } .bewegung .ablauf__step .prozessbild--ausbau .pb__ausbaumodul{ opacity:0; transform:translate3d(calc(var(--weg-auftritt) * 1.6),calc(var(--weg-auftritt) * -.8),0); transform-box:fill-box; transform-origin:center; } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__systemkern, .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__systemmodul, .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__zielslot{ opacity:1; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt); } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__systemlinie{ stroke-dashoffset:0; transition:stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt) var(--staffel); } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__zielslot{ transition-delay:calc(var(--staffel) * 2); } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__ausbaumodul{ opacity:1; transform:none; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 3), transform var(--zeit-auftritt-tief) var(--kurve-auftritt) calc(var(--staffel) * 3); } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__ausbaulinie{ stroke-dashoffset:0; transition:stroke-dashoffset var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 5); } .bewegung .ablauf__step.is-in .prozessbild--ausbau .pb__zyklus{ opacity:1; stroke-dashoffset:0; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 6), stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt) calc(var(--staffel) * 6); } /* ============================================================ 2 — Passer: der Einzug in den Case-Block Der Case-Block ist das Belegblatt der Seite — die Stelle, an der sie ihre Behauptungen belegt. Er tritt deshalb nicht auf wie die hellen Abschnitte, sondern richtet sich ein wie ein Andruck: erst fährt das Scharnierbild über die Passage in seinen Stand, dann kommt der Block schwerer herein als alles davor, und zuletzt rücken die vier Passermarken jedes Belegblatts in ihre Ecken. ============================================================ */ /* Der Block trägt weiter und länger. .cases__kopf und .case sind die einzigen .rv im Dunklen — der Abschluss hat keine. */ .bewegung .cases__kopf, .bewegung .case{ transform:translate3d(0,var(--weg-auftritt-tief),0); } .bewegung .cases__kopf.is-in, .bewegung .case.is-in{ transform:none; transition-duration:var(--zeit-auftritt-tief); } /* Scharnierbild. js/bewegung.js schreibt in --einzug den Restweg: 1 beim Auftauchen am unteren Rand, 0, sobald der Block das Bild übernommen hat. Das Bild kommt also in seinen Stand, statt aus ihm heraus zu treiben. Der Bleibereich ist nachgerechnet, nicht geraten. Das Bild ist breitenbestimmt (object-fit:cover, 1536×1024 in einem Kasten von höchstens 420px Höhe), zusätzliche Kastenhöhe skaliert es deshalb nicht, sie gibt nur Weg frei. Damit der Ausschnitt bei --einzug:0 exakt derselbe ist wie ohne Bewegung, muss für object-position 52 % gelten: oben = 13/12 · unten. Unten reicht genau der Weg, also --weg-passer; oben folgt 13/12 davon, zusammen 25/12. Unter 720px wäre das Bild nicht mehr breiten- bestimmt — dort bleibt der Kasten unangetastet. */ @media (min-width:720px){ .hinge img{ --blei-unten: var(--weg-passer); /* genau der Weg */ --blei-oben: calc(var(--weg-passer) * 13 / 12); /* 13/12 davon */ top: calc(var(--blei-oben) * -1); bottom: auto; height: calc(100% + var(--blei-oben) + var(--blei-unten)); transform:translate3d(0, calc(var(--einzug,0) * var(--weg-passer)), 0); } } /* Die vier Passermarken rücken im Uhrzeigersinn ein, oben links zuerst. Beobachtet werden .beleg__field (obere Ecken) und .mk (untere) — zwei Knoten, vier Marken, kein tieferer Selektor. */ .bewegung .beleg__field::before, .bewegung .beleg__field::after, .bewegung .mk::before, .bewegung .mk::after{ opacity:0; transition:opacity var(--zeit-marke) var(--kurve-auftritt), transform var(--zeit-marke) var(--kurve-auftritt); } .bewegung .beleg__field::before{ transform:translate3d(calc(var(--weg-marke) * -1), calc(var(--weg-marke) * -1), 0); } .bewegung .beleg__field::after{ transform:translate3d(var(--weg-marke), calc(var(--weg-marke) * -1), 0); transition-delay:calc(var(--staffel) * .5); } .bewegung .mk::after{ transform:translate3d(var(--weg-marke), var(--weg-marke), 0); transition-delay:var(--staffel); } .bewegung .mk::before{ transform:translate3d(calc(var(--weg-marke) * -1), var(--weg-marke), 0); transition-delay:calc(var(--staffel) * 1.5); } .bewegung .beleg__field.im-passer::before, .bewegung .beleg__field.im-passer::after, .bewegung .mk.im-passer::before, .bewegung .mk.im-passer::after{ opacity:1; transform:none; } /* ============================================================ 3 — Hero-Einlauf Auflage: Die Überschrift wartet auf nichts. Sie hat keine Animation, keine Verzögerung und keinen Ausgangszustand — sie steht mit dem ersten Bild da. Alles andere ordnet sich um sie herum ein: die Augenbraue kommt von oben herunter, ihr Strich zieht sich nach rechts aus, Satz, Knöpfe und die drei Zellen der Betriebsleiste steigen von unten nach. Reines CSS, ohne Schalter: der Einlauf braucht kein Skript und läuft auch dann, wenn js/bewegung.js blockiert ist. Damit kann er auch nicht dazu führen, dass etwas verborgen stehen bleibt. Folge in Schritten von --staffel: Strich 0, Augenbraue 1, Satzblock 3, Zellen 5 / 6 / 7. ============================================================ */ /* backwards, nicht both: der Ausgangszustand gilt während der Verzögerung, danach gibt die Bildfolge das Element wieder frei. Mit "both" bliebe opacity:1/transform:none auf Animationsebene hängen und würde jede spätere Regel für dieses Element schlagen. */ /* Das Zitat kommt zuerst und weicher als alles andere: es wird nicht geschoben, sondern scharf. Der Rest der Seite folgt in Stufen. */ @keyframes d5-schaerft{ from{ opacity:0; filter:blur(10px); transform:translate3d(0,6px,0); } to { opacity:1; filter:blur(0); transform:none; } } .hero__zitat{ animation:d5-schaerft var(--zeit-auftritt-tief) var(--kurve-auftritt) backwards; } .hero__quelle{ animation:d5-senkt var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 3) backwards; } .hero__quelle::before{ transform-origin:left; animation:d5-zieht var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 3) backwards; } /* Ausgangslage: Der Grund fließt sehr langsam. In den sechs Szenen bewegt sich nur der Teil, der das jeweilige Problem trägt. */ .lage__fluss span:nth-child(1){ animation:d5-lage-fliesst calc(var(--zeit-auftritt-tief) * 18) var(--kurve-auftritt) infinite alternate; } .lage__fluss span:nth-child(2){ animation:d5-lage-fliesst calc(var(--zeit-auftritt-tief) * 22) var(--kurve-auftritt) infinite alternate-reverse; } .lage__fluss span:nth-child(3){ animation:d5-lage-fliesst calc(var(--zeit-auftritt-tief) * 20) var(--kurve-auftritt) infinite alternate; } .lage__szene .lg__handoff, .lage__szene .lg__dringend, .lage__szene .lg__klingel, .lage__szene .lg__quelle, .lage__szene .lg__kollege{ transform-box:fill-box; transform-origin:center; } .lage__szene.is-in .lg__handoff{ animation:d5-uebergabe calc(var(--zeit-auftritt-tief) * 6) var(--kurve-auftritt) infinite; } .lage__szene.is-in .lg__alterweg{ animation:d5-spur calc(var(--zeit-auftritt-tief) * 3) linear infinite; } .lage__szene.is-in .lg__dringend{ animation:d5-dringend calc(var(--zeit-auftritt-tief) * 4) var(--kurve-auftritt) infinite; } .lage__szene .lg__signal{ stroke-dasharray:290; stroke-dashoffset:290; } .lage__szene.is-in .lg__signal{ animation:d5-signalisiert calc(var(--zeit-auftritt-tief) * 6) var(--kurve-auftritt) infinite; } .lage__szene.is-in .lg__klingel--1{ animation:d5-klingelt calc(var(--zeit-auftritt-tief) * 6) var(--kurve-auftritt) infinite; } .lage__szene.is-in .lg__klingel--2{ animation:d5-klingelt calc(var(--zeit-auftritt-tief) * 6) var(--kurve-auftritt) calc(var(--staffel) * 2) infinite; } .lage__szene.is-in .lg__quelle--1{ animation:d5-zufuhr-links calc(var(--zeit-auftritt-tief) * 5) var(--kurve-auftritt) infinite alternate; } .lage__szene.is-in .lg__quelle--2{ animation:d5-zufuhr-rechts calc(var(--zeit-auftritt-tief) * 5) var(--kurve-auftritt) infinite alternate; } .lage__szene.is-in .lg__quelle--3{ animation:d5-zufuhr-unten calc(var(--zeit-auftritt-tief) * 5) var(--kurve-auftritt) infinite alternate; } .lage__szene.is-in .lg__kollege{ animation:d5-wissen-fehlt calc(var(--zeit-auftritt-tief) * 7) var(--kurve-auftritt) infinite; } .lage__szene.is-in .lg__wissenslinie{ animation:d5-verbindung-fehlt calc(var(--zeit-auftritt-tief) * 7) var(--kurve-auftritt) infinite; } .bewegung .lage__aufloesung .lg__sammellinie{ stroke-dasharray:720; stroke-dashoffset:720; } .bewegung .lage__aufloesung .lg__sammelpunkt{ opacity:0; transform-origin:center; } .bewegung .lage__aufloesung.is-in .lg__sammellinie{ stroke-dashoffset:0; transition:stroke-dashoffset calc(var(--zeit-auftritt-tief) * 2) var(--kurve-auftritt); } .bewegung .lage__aufloesung.is-in .lg__sammelpunkt{ opacity:1; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 5); } .hero__under{ animation:d5-steigt var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 4) backwards; } .hero__fuss{ animation:d5-steigt var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 6) backwards; } .betrieb__cell{ animation:d5-steigt var(--zeit-auftritt) var(--kurve-auftritt) calc(var(--staffel) * 5) backwards; } .betrieb__cell:nth-child(2){ animation-delay:calc(var(--staffel) * 6); } .betrieb__cell:nth-child(3){ animation-delay:calc(var(--staffel) * 7); } /* ============================================================ 4 — Zustände: die Wege unter dem Zeigefinger Kurz genug, dass es sich wie eine Reaktion anfühlt und nicht wie eine Vorführung. Farbe, Rahmen und Haarlinie stehen bei den Bausteinen; hier stehen nur die Wege. ============================================================ */ /* Pfeilversatz — überall derselbe Weg */ .arw{ transition:transform var(--zeit-zustand) var(--kurve-zustand); } .btn:hover .arw, .tief-link:hover .arw, .rail__link:hover .arw, .betrieb__cell:hover .arw, .betrieb__cell:focus-visible .arw, .ind__row:hover .arw, .ind__row:focus-visible .arw{ transform:translateX(var(--pfeil-weg)); } /* Anheben — nur die Preiskarten. Alle anderen "Karten" dieser Seite sind Zellen in einem gemeinsamen Raster; sie anzuheben würde die Linienarbeit zerschneiden, die sie zusammenhält. Dort trägt die Haarlinie den Zustand. */ .preis{ transition:transform var(--zeit-zustand) var(--kurve-zustand); } .preis:hover{ transform:translateY(calc(var(--weg-anheben) * -1)); } /* Zeileneinzug in den Industrien. Auf schmalen Fenstern nicht: dort ist die Zeile ein Block, kein Raster. */ .ind__row{ transition:padding-left var(--zeit-zustand-weit) var(--kurve-zustand); } .ind__row:hover{ padding-left:var(--raum-14); } @media (max-width:1023px){ .ind__row:hover{ padding-left:0; } } /* Leistungsbühne: ein kurzer Aufbau, danach bleibt die Information still. Nur das Licht im Grund bewegt sich langsam weiter. */ @keyframes d5-leistung-licht{ 0%,100%{ transform:translate3d(-2%,0,0) scale(1); } 50%{ transform:translate3d(2%,-1%,0) scale(1.04); } } .leistungen{ transition:background-color var(--zeit-auftritt) var(--kurve-auftritt),color var(--zeit-zustand) var(--kurve-zustand); } .leistungen::before{ transition:opacity var(--zeit-auftritt) var(--kurve-auftritt); } .leistungen[data-aktiv]::before{ animation:d5-leistung-licht var(--zeit-ambiente) var(--kurve-auftritt) infinite; } .leistungen h2, .leistungen h3, .leistungen .lead, .leistungen .label{ transition:color var(--zeit-zustand-weit) var(--kurve-zustand),border-color var(--zeit-zustand-weit) var(--kurve-zustand); } .leistungen__alle{ transition:color var(--zeit-zustand-weit) var(--kurve-zustand),opacity var(--zeit-zustand) var(--kurve-zustand),transform var(--zeit-zustand) var(--kurve-zustand),visibility var(--zeit-zustand) step-end; } .technikband__spur{ animation:d5-laufband 64s linear infinite; } .technikband__reihe--gebaut .technikband__spur{ animation-duration:60s; animation-direction:reverse; } .technikband__reihe:hover .technikband__spur, .technikband__reihe:focus-within .technikband__spur{ animation-play-state:paused; } .leistung__wahl{ transition:opacity var(--zeit-zustand-weit) var(--kurve-zustand),border-color var(--zeit-zustand-weit) var(--kurve-zustand),background-color var(--zeit-zustand-weit) var(--kurve-zustand); } .leistung__wahl::before, .leistungen__grundbild{ transition:opacity var(--zeit-zustand-weit) var(--kurve-zustand); } .leistung__wahl p, .leistung__anlass, .leistung__hinweis, .leistung__hinweis span{ transition:color var(--zeit-zustand) var(--kurve-zustand),border-color var(--zeit-zustand) var(--kurve-zustand),transform var(--zeit-zustand) var(--kurve-zustand); } .leistung__szene{ transform:translateY(var(--weg-auftritt)); transition:opacity var(--zeit-auftritt) var(--kurve-auftritt),transform var(--zeit-auftritt) var(--kurve-auftritt); } .leistungen[data-aktiv="workshop"] .leistung__szene--workshop, .leistungen[data-aktiv="schulung"] .leistung__szene--schulung, .leistungen[data-aktiv="wissen"] .leistung__szene--wissen, .leistungen[data-aktiv="umsetzung"] .leistung__szene--umsetzung{ transform:none; transition-delay:0s; } .leistung__szenenlinie path{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset var(--zeit-auftritt-tief) var(--kurve-auftritt) calc(var(--staffel) * 2); } .leistungen[data-aktiv] .leistung__szenenlinie path{ stroke-dashoffset:0; } .schulung__kern, .wissen__kern, .umsetzung__ziel, .workshop__waage{ opacity:0; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt) var(--staffel); } .leistungen[data-aktiv="schulung"] .schulung__kern, .leistungen[data-aktiv="wissen"] .wissen__kern, .leistungen[data-aktiv="umsetzung"] .umsetzung__ziel, .leistungen[data-aktiv="workshop"] .workshop__waage{ opacity:1; } .leistung__satellit, .wissen__seite span, .umsetzung__quellen span, .umsetzung__schritte span, .workshop__faelle span, .workshop__reihe span, .workshop__achse, .leistung__detail{ opacity:0; transition:opacity var(--zeit-auftritt) var(--kurve-auftritt),transform var(--zeit-auftritt) var(--kurve-auftritt),color var(--zeit-zustand) var(--kurve-zustand); } .leistung__satellit, .wissen__seite--quellen span, .umsetzung__quellen span, .workshop__faelle span{ transform:translateX(calc(var(--weg-auftritt) * -1)); } .wissen__seite--ergebnisse span, .umsetzung__schritte span, .workshop__reihe span{ transform:translateX(var(--weg-auftritt)); } .workshop__achse{ transform:translateY(var(--raum-8)); } .leistung__detail{ transform:translateY(var(--raum-8)); } .leistungen[data-aktiv="schulung"] .leistung__satellit, .leistungen[data-aktiv="wissen"] .wissen__seite span, .leistungen[data-aktiv="umsetzung"] .umsetzung__quellen span, .leistungen[data-aktiv="umsetzung"] .umsetzung__schritte span, .leistungen[data-aktiv="workshop"] .workshop__faelle span, .leistungen[data-aktiv="workshop"] .workshop__reihe span, .leistungen[data-aktiv="workshop"] .workshop__achse, .leistungen[data-aktiv] .leistung__detail{ opacity:1; transform:none; } .leistung__satellit:nth-of-type(2), .wissen__seite span:nth-child(2), .umsetzung__quellen span:nth-child(2), .umsetzung__schritte span:nth-child(2), .workshop__faelle span:nth-child(2), .workshop__reihe span:nth-child(2){ transition-delay:var(--staffel); } .leistung__satellit:nth-of-type(3), .wissen__seite span:nth-child(3), .umsetzung__quellen span:nth-child(3), .umsetzung__schritte span:nth-child(3), .workshop__faelle span:nth-child(3), .workshop__reihe span:nth-child(3){ transition-delay:calc(var(--staffel) * 2); } .leistung__satellit:nth-of-type(4), .umsetzung__schritte span:nth-child(4), .workshop__faelle span:nth-child(4){ transition-delay:calc(var(--staffel) * 3); } /* Die Achsenbeschriftung kommt zuletzt, wenn die Waage steht. */ .workshop__achse{ transition-delay:calc(var(--staffel) * 3); } .leistung__satellit:nth-of-type(5){ transition-delay:calc(var(--staffel) * 4); } /* ---------------------------------------------------------- Rasten auf den Cases Der Browser hält beim Scrollen auf jedem Case kurz an, damit man einen nach dem anderen sieht. `proximity` rastet nur in der Nähe eines Cases — überall sonst scrollt die Seite unverändert, und niemand verliert die Kontrolle über sein Rad. `scroll-snap-stop:always` ist das eigentliche Halten: Eine Wischbewegung kann keinen Case überspringen. Steht hier und nicht in abschnitte.css, weil es einen Weg zurücklegt: Wer Ruhe eingestellt hat, scrollt frei. ---------------------------------------------------------- */ html{ scroll-snap-type:y proximity; } .case{ scroll-snap-align:start; scroll-snap-stop:always; } } /* Ende prefers-reduced-motion: no-preference */ /* ============================================================ 5 — Lesefortschritt Die Form der Anzeige steht bei .rule-scale in abschnitte.css: transform:scaleY(var(--gelesen,0)). js/bewegung.js schreibt die Zahl, mehr nicht. Ohne Skript greift der Vorgabewert 0 und der Balken bleibt leer. Der Balken läuft AUCH bei Ruhe. Er bewegt sich nur, wenn der Leser die Seite bewegt, und er ist Auskunft, keine Zierde. Entwurf D hat ihn dort abgeschaltet — das ist die eine Stelle, an der diese Fassung bewusst anders entscheidet. will-change setzt js/bewegung.js für die Dauer eines Blätterns auf genau die zwei Knoten, die dabei fahren, und nimmt es 240 ms nach dem letzten Scrollereignis wieder ab. Deshalb steht hier keine Regel dafür. ============================================================ */ /* ============================================================ 6 — Ersatz bei prefers-reduced-motion Nicht "aus": die Endzustände stehen sofort, und jeder Zustand bleibt sichtbar — nur nicht mehr über einen Weg. Auftritt, Hero, Passer, Pfeilversatz, Anheben, Zeileneinzug entfallen, weil sie ausschließlich im Zweig darüber stehen. Nichts ist verborgen, nichts muss zurückgenommen werden, kein !important. Haarlinie unter Zeile und Zelle, Unterstrich in der Navigation, Balken zu Kreuz, Plus zu Minus bleiben, erscheinen aber sofort statt zu wachsen. Farbe und Rahmen wechseln weiter mit ihrer kurzen Zeit. Farbe legt keinen Weg zurück; das ist hier der Ersatz und nicht der Rest. Die Preiskarte zeigt so, was sie sonst durch Anheben zeigt: .preis:hover dunkelt ihren Rahmen, und diese Regel steht in abschnitte.css und gilt in beiden Zweigen. ============================================================ */ @media (prefers-reduced-motion: reduce){ .technikband__fenster{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; scrollbar-width:none; } .technikband__fenster::-webkit-scrollbar{ display:none; } .technikband__gruppe[aria-hidden="true"]{ display:none; } html{ scroll-behavior:auto; } .nav a::after, .betrieb__cell::before, .ind__row::before, .lage__karte, .lage__seite, .lage__schalter::after, .balken__strich, .faq__zeichen::before, .faq__zeichen::after{ transition:none; } .lage__schalter:hover::after{ transform:none; } } /* ============================================================ 7 — Druck Ein Beobachter meldet nichts, was nie im Bild war: ohne diesen Zweig kämen die unteren Abschnitte leer aus dem Drucker. ============================================================ */ @media print{ .bewegung .rv, .bewegung .cases__kopf, .bewegung .case, .bewegung .beleg__field::before, .bewegung .beleg__field::after, .bewegung .mk::before, .bewegung .mk::after{ opacity:1; transform:none; } .hero__zitat, .hero__quelle, .hero__quelle::before, .hero__under, .hero__fuss, .gebaut__pos, .zx__lauf, .betrieb__cell{ animation:none; } .technikband__spur{ animation:none; transform:none; } .technikband__gruppe[aria-hidden="true"]{ display:none; } .lage__fluss span, .lage__szene svg *, .lage__sammler *{ opacity:1; transform:none; animation:none; transition:none; stroke-dashoffset:0; } .bewegung .prozessbild svg *{ opacity:1; transform:none; stroke-dashoffset:0; animation:none; transition:none; } }