/* Bewegung auf den Unterseiten (Thomas 16.10.2026: „für alle Seiten auch bereits Animationen einbauen, die du für gut befindest und die
   zum Stil der Startseite passen, sich aber nicht unbedingt wiederholen“). Gehört zu js/seiten-bewegung.js.
   Gleiche Sprache wie die Startseite (weiche Kurve, Wörter steigen aus ihrer Zeile, grüne Linien), aber je Seite ein eigener Akzent:
     Seitenkopf-Rahmen (About/Services/Work/Blog) zeichnet sich von links, dann steigen die Wörter auf
     About: Experience/Approach/Philosophy gleiten nacheinander herein, das Etikett links zuerst
     Services: in den Leistungs-Feldern zeichnen sich die Trennlinien, die Punkte erscheinen Zeile für Zeile
     Work: Case-Karten heben sich nacheinander, die Linie unter dem Titel zeichnet sich
     Contact: Formularfelder erscheinen Feld für Feld, die Kontakt-Symbole setzen sich
     Blog/Kategorien: Karten heben sich gestaffelt
     Artikel + Policies: feine grüne Lese-Fortschrittslinie unter der Kopfzeile, Zwischenüberschriften steigen auf
     Newsletter-Feld + Discovery-Block: Überschrift steigt Wort für Wort
   Nur transform/opacity/clip-path (keine Ladezeit). html.bew setzt ein Mini-Skript im <head>; ohne JS bzw. „Bewegung reduzieren“
   bleibt alles sichtbar; Notfall: nach 4 s wird alles gezeigt. */

:root { --bw-kurve: cubic-bezier(.44, 0, .28, .99); }

/* ---------- 1. Einblenden beim Scrollen (Grundbaustein) ---------- */
html.bew [data-bw] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--bw-kurve), transform .9s var(--bw-kurve); transition-delay: calc(var(--bi, 0) * .09s); }
html.bew [data-bw="links"] { transform: translateX(-28px); }
html.bew [data-bw="setzen"] { transform: scale(.82); }
html.bew [data-bw].da { opacity: 1; transform: none; }

/* ---------- 2. Wörter steigen aus ihrer Zeile ---------- */
.bw-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.bw-wi { display: inline-block; }
html.bew [data-bw-worte] .bw-wi { transform: translateY(105%); transition: transform 1s var(--bw-kurve); transition-delay: calc(var(--wi, 0) * .07s + var(--wd, 0s)); }
html.bew [data-bw-worte].da .bw-wi { transform: none; }

/* ---------- 3. Seitenkopf-Rahmen zeichnet sich von links ---------- */
html.bew .bw-rahmen { clip-path: inset(0 100% 0 0 round 6px); transition: clip-path 1.2s var(--bw-kurve); }
html.bew .bw-rahmen.da { clip-path: inset(0 0 0 0 round 6px); }

/* ---------- 4. Linien zeichnen sich (Services, Work) ---------- */
html.bew .bw-linie { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--bw-kurve); transition-delay: calc(var(--bi, 0) * .09s); }
html.bew .bw-linie.da { transform: none; }

/* ---------- 5. Lese-Fortschritt (Artikel, Policies) ---------- */
.bw-fortschritt { position: fixed; left: 0; top: 0; z-index: 1001; height: 2px; width: 100%; background: var(--swatch-var-2425); transform: scaleX(var(--f, 0)); transform-origin: left center; pointer-events: none; }

/* Notfall ohne JS: nach 4 s alles zeigen */
html.bew:not(.bew-an) [data-bw], html.bew:not(.bew-an) [data-bw-worte] .bw-wi, html.bew:not(.bew-an) .bw-rahmen, html.bew:not(.bew-an) .bw-linie { animation: bw-notfall 0s 4s forwards; }
@keyframes bw-notfall { to { opacity: 1; transform: none; clip-path: none; } }

@media (prefers-reduced-motion: reduce) {
	[data-bw], [data-bw-worte] .bw-wi, .bw-rahmen, .bw-linie { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	.bw-fortschritt { display: none; }
}