/* NANU Optik – Bewegung der Texte und Inhalte (Runde 18c, Eldins Wahl: Entwurf 5). Titel blenden weich auf wie der Text im Einstieg; die Textabschnitte selbst gehen auf wie in „Aufgehen“; der Einstieg blendet weich auf und treibt beim Wegscrollen sanft nach oben weg wie in „Mitfließen“. - Titel: genau die Bewegung des Einstieg-Texts (einstieg.css, bild-auf): weich aufblenden und 0,75 rem heben, 700 ms, gleiche Kurve – als Ganzes. - Textabschnitte, Listen, Flächen: gehen 1,25 rem auf, 900 ms, ruhig auslaufend; jedes Glied einer Liste, wenn es ins Bild kommt; was gemeinsam kommt (eine Reihe nebeneinander), im Takt nacheinander. - Fotos: als Ganzes 2,25 rem tiefer herein (kein Zoom im Rahmen). Rundgang-Fotos behalten „Fluss“ (a.css). - Zeitleisten (Chronik, Ablauf beim Meister, Garantie-Weg): der Punkt springt auf, die Linie zeichnet sich zur nächsten Station. - Häufige Fragen: die Antwort geht beim Aufklappen kurz auf. Geöffnet: der grüne Punkt pulsiert dreimal leise. Einmal beim Erscheinen; Markierung und Takt: bewegung.js. Bewegt wird nur translate, scale und opacity – Knöpfe behalten ihr transform. Ohne data-bewegung (kein Skript, „Bewegung reduzieren“) und im Druck steht alles da. Kopfleiste, Menü und Handy-Leiste bleiben still: Werkzeuge, die sofort bereit sein müssen. */ :root { --bw-ease: cubic-bezier(0.22, 1, 0.36, 1); --bw-titel-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* wie der Einstieg-Text */ --bw-dauer: 900ms; } /* ---------- vor dem Erscheinen ---------- */ :root[data-bewegung] :is([data-bw], [data-bw-glied]):not([data-bw-da]) { opacity: 0; } /* ---------- Textabschnitte, Listen, Flächen: gehen auf ---------- */ :root[data-bewegung] :is([data-bw=""], [data-bw="tafel"])[data-bw-da], :root[data-bewegung] :is([data-bw="folge"], [data-bw="linie"]) [data-bw-glied][data-bw-da] { animation: bw-auf var(--bw-dauer) var(--bw-ease) calc(var(--bw-d, 0) * 1ms) backwards; } :root[data-bewegung] [data-bw="tafel"][data-bw-da] { animation-duration: 1000ms; } /* ---------- Titel: wie der Einstieg-Text ---------- */ :root[data-bewegung] [data-bw="titel"][data-bw-da], :root[data-bewegung] [data-bw="folge"] > :is(h1, h2, h3, h4)[data-bw-glied][data-bw-da] { animation: bw-titel 700ms var(--bw-titel-ease) calc(var(--bw-d, 0) * 1ms) backwards; } /* ---------- Fotos ---------- */ :root[data-bewegung] [data-bw="bild"][data-bw-da], :root[data-bewegung] [data-bw="bilder"] > [data-bw-glied][data-bw-da] { animation: bw-bild 1100ms var(--bw-ease) calc(var(--bw-d, 0) * 1ms) backwards; } /* ---------- Zeitleisten: Punkt springt auf, die Linie läuft zur nächsten Station ---------- Kommen mehrere Stationen gemeinsam ins Bild (nebeneinander), läuft die Linie gleichmäßig von Punkt zu Punkt (data-bw-kette, 150 ms je Strecke wie der Takt in bewegung.js); kommt eine Station allein, zeichnet sie sich ruhig. */ :root[data-bewegung] :is(.chronik > li::before, .schritte > li::after, .weg > li::after) { transform-origin: 0 0; } :root[data-bewegung] .chronik > li[data-bw-da]::after, :root[data-bewegung] .schritte > li[data-bw-da]::before, :root[data-bewegung] .weg > li[data-bw-da]::before { animation: bw-punkt 500ms var(--bw-ease) calc(var(--bw-d, 0) * 1ms) backwards; } :root[data-bewegung] .chronik > li[data-bw-da]::before, :root[data-bewegung] .schritte > li[data-bw-da]::after, :root[data-bewegung] .weg > li[data-bw-da]::after { animation: bw-strich-y 700ms var(--bw-ease) calc((var(--bw-d, 0) + 120) * 1ms) backwards; } :root[data-bewegung] :is(.chronik, .weg) > li[data-bw-kette][data-bw-da]::before, :root[data-bewegung] :is(.chronik, .weg) > li[data-bw-kette][data-bw-da]::after { animation-duration: 150ms; animation-timing-function: linear; } :root[data-bewegung] .chronik > li[data-bw-kette][data-bw-da]::before, :root[data-bewegung] .weg > li[data-bw-kette][data-bw-da]::after { animation-delay: calc((var(--bw-d, 0) + 80) * 1ms); } /* nebeneinander: die Linie läuft waagrecht */ @media (min-width: 64em) { :root[data-bewegung] .chronik > li[data-bw-da]::before { animation-name: bw-strich-x; } } @media (min-width: 52em) { :root[data-bewegung] .weg > li[data-bw-da]::after { animation-name: bw-strich-x; } } /* ---------- Häufige Fragen: die Antwort geht beim Aufklappen kurz auf ---------- */ :root[data-bewegung] .fragen details[open] > :not(summary) { animation: bw-antwort 420ms var(--bw-ease); } /* ---------- Einstieg wie „Mitfließen“: weich aufblenden (einstieg.css), beim Wegscrollen sanft nach oben weg ---------- */ @supports (animation-timeline: view()) { :root[data-bewegung] .einstieg { view-timeline: --bw-einstieg block; } :root[data-bewegung] .einstieg__text { animation: bw-weg linear both; animation-timeline: --bw-einstieg; animation-range: exit 0% exit 100%; } } /* ---------- Geöffnet: der grüne Punkt pulsiert dreimal leise, dann ist Ruhe ---------- */ :root[data-bewegung] [data-zustand="offen"] > .punkt { animation: bw-puls 2400ms cubic-bezier(0.2, 0.6, 0.3, 1) 1200ms 3; } @keyframes bw-auf { from { opacity: 0; translate: 0 1.25rem; } } @keyframes bw-titel { from { opacity: 0; translate: 0 0.75rem; } } /* = bild-auf in einstieg.css */ @keyframes bw-bild { from { opacity: 0; translate: 0 2.25rem; } } @keyframes bw-antwort { from { opacity: 0; translate: 0 0.5rem; } } @keyframes bw-weg { to { translate: 0 -3.5rem; opacity: 0.2; } } @keyframes bw-punkt { from { opacity: 0; scale: 0.3; } } @keyframes bw-strich-y { from { scale: 1 0; } } @keyframes bw-strich-x { from { scale: 0 1; } } @keyframes bw-puls { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--offen) 30%, transparent); } to { box-shadow: 0 0 0 11px color-mix(in srgb, var(--offen) 0%, transparent); } } @media print { :root[data-bewegung] :is([data-bw], [data-bw-glied], .einstieg__text) { opacity: 1 !important; animation: none !important; } :root[data-bewegung] :is(.chronik, .schritte, .weg) > li::before, :root[data-bewegung] :is(.chronik, .schritte, .weg) > li::after { animation: none !important; } }