/* ============================================================================ MOTION · Dauern, Easing, Verzögerungen, Bewegungs-Offsets ---------------------------------------------------------------------------- Spring (--ease-spring) gehört auf Transform, NICHT auf Farbe. Theme-/Mode- Wechsel nutzt --duration-theme; prefers-reduced-motion in utilities.css. ============================================================================ */ :root { /* ---- Bewegung als Stellgröße ---- EIN Faktor (--motion-scale) skaliert jede Dauer/jeden Offset — wie --text-scale bei der Typografie, statt einer Sammlung von `animation:none !important`-Regeln. Muss an sitzen: Custom Properties werden als BERECHNETER Wert vererbt und hier in `:root` aufgelöst, deshalb `data-animationen` auf . */ --motion-scale:1; --duration-fast:calc(120ms * var(--motion-scale)); --duration-base:calc(180ms * var(--motion-scale)); --duration-slow:calc(280ms * var(--motion-scale)); --duration-theme:calc(320ms * var(--motion-scale)); /* Theme-/Mode-Wechsel */ --duration-shimmer:calc(1400ms * var(--motion-scale)); /* Ladeplatzhalter */ --ease-out:cubic-bezier(0.16,1,0.3,1); /* abbremsen */ --ease-in:cubic-bezier(0.4,0,1,1); /* beschleunigen */ --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* beides */ --ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* überschwingen */ --delay-tooltip:500ms; /* bewusst NICHT skaliert: eine Wartezeit ist keine Bewegung, sondern verhindert, dass Tooltips beim Überfahren aufblitzen. */ /* Hebung/Absenkung nach §3.9: Karten heben sich 2 px und wechseln auf --shadow-hover; ein gedrückter Knopf sinkt 1 px und verliert den Schatten. */ --lift-hover:calc(2px * var(--motion-scale)); /* Hover-Anhebung */ --sink-press:calc(1px * var(--motion-scale)); /* Klick-Absenkung */ } /* ============================================================================ ANIMATIONS-INTENSITÄT · drei wählbare Stufen (NutzerPrefs.animationen) ---------------------------------------------------------------------------- sexy ist der App-Standard. ⚠ „ohne" ist NICHT 0 — bei Dauer 0 feuern `transitionend`/`animationend` in manchen Maschinen nicht mehr, deshalb 0.0001 statt 0. ============================================================================ */ :root[data-animationen="ohne"]{--motion-scale:0.0001;} :root[data-animationen="minimalistisch"]{--motion-scale:0.5;} :root[data-animationen="sexy"]{--motion-scale:1;}