design: Frontend-Redesign v2 — Design-System, kompaktere UI, Mikrointeraktionen

Umfassendes Redesign des gesamten Frontends in 9 Schritten:

1. Design-Tokens: Neutral-Farbskala (50–950), Modul-Akzentfarben,
   --text-2xs Token, Easing-Kurven, Z-Index-System, Dark-Mode-Overrides
2. Reset: Reduced-motion Query (prefers-reduced-motion)
3. Sidebar/Navigation: Flaches Design, Glassmorphismus Bottom-Nav,
   Akzentstreifen-Indikator, collapsed/expanded States
4. Layout-Grid: Master-Detail, Content-Aside, Sticky-Header-Primitives
5. Cards/Container: Einheitliches Card-Pattern, Modal-System (Bottom-Sheet
   mobil, zentriert Desktop), Skeleton-Loading, Empty-States
6. Dashboard: Kompaktere Widgets, Token-basierte Farben/Schatten,
   4-Spalten-Grid ab 1440px
7. Module: Mobile-first Kanban/Day-Slots/Budget-Summary, border-subtle
   für sekundäre Trennlinien, responsive Quick-Add, Token-Migration
   aller hardcoded px/rgba-Werte
8. Mikrointeraktionen: Page-out Fade, Checkbox-Pop-Animation,
   Hover-States für Filter/Tabs/Toggles, Toast-Ausblendung,
   done-State Opacity-Transition
9. Feinschliff: Print-Styles, --text-2xs Token für Micro-Labels,
   Konsistenz-Audit (alle 9/10/11px → Token)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/router.js

@@ -116,12 +116,20 @@ async function renderPage(route) {
       renderAppShell(app);
     }
 
+    const content = document.getElementById('page-content') || app;
+
+    // Alte Seite kurz ausfaden, falls vorhanden
+    const oldPage = content.querySelector('.page-transition');
+    if (oldPage) {
+      oldPage.classList.add('page-transition--out');
+      await new Promise(r => setTimeout(r, 120));
+    }
+
     // Seiten-Wrapper bereits jetzt in den DOM einfügen, damit
     // document.getElementById() in render() die richtigen Elemente findet.
     const pageWrapper = document.createElement('div');
     pageWrapper.className = 'page-transition';
     pageWrapper.style.animation = 'page-in 0.2s ease forwards';
-    const content = document.getElementById('page-content') || app;
     content.replaceChildren(pageWrapper);
 
     await module.render(pageWrapper, { user: currentUser });
@@ -236,7 +244,10 @@ function showToast(message, type = 'default', duration = 3000) {
   toast.setAttribute('role', 'alert');
 
   container.appendChild(toast);
-  setTimeout(() => toast.remove(), duration);
+  setTimeout(() => {
+    toast.classList.add('toast--out');
+    toast.addEventListener('animationend', () => toast.remove(), { once: true });
+  }, duration);
 }
 
 // --------------------------------------------------------