feat: Phase 3 - Micro-Interactions + Polish

glass.css - Phase 3 Ergänzungen:

Nav Auto-Hide (Section 18):
- .nav-bottom: will-change: transform + transition für smooth slide
- .nav-bottom--hidden: translateY(100% + safe-area) + pointer-events: none

Modal Spring-Entrance (Section 19):
- Desktop: glass-modal-scale-in mit --ease-glass (spring overshoot)
  0.32s, scale(0.90) → scale(1) + translateY(8px) → 0
- Mobile: glass-sheet-in, sanfterer Slide (40% statt 100%) + opacity ramp
- Beide Animationen ersetzen die linearen layout.css-Varianten

Seitentransitionen (Section 20):
- In-Animationen: 0.30s mit --ease-glass statt 0.20s ease
- Out-Animationen: 0.14s mit --ease-out (schnell raus, langsam rein)

List-Stagger (Section 21):
- 0.28s + --ease-glass für physikalisch plausibleren Erscheinungseffekt

Focus-Ring (Section 22):
- transition auf outline-offset + box-shadow für sanften Focus-Pop

Skeleton Shimmer (Section 23):
- 105° Gradient mit glass-highlight-Tint statt flat-grey
- Hellerer Mittelpunkt simuliert Lichtreflexion

FAB Attention Pulse (Section 24):
- Einmaliger Ring-Expand 0.6s nach Erscheinen (fab-ring-pulse)
- Kombinierte animation-Deklaration mit fab-in

Accessibility (Section 25):
- prefers-reduced-motion deaktiviert alle Phase-3-Animationen

router.js:
- initNavHideOnScroll(): scroll-Listener auf #main-content
  versteckt .nav-bottom beim Runterscrollen (+ 4px Hysterese)
  zeigt wieder beim Hochscrollen (- 4px) oder bei < 10px
  nur aktiv bei < 1024px (Mobile/Tablet, kein Desktop)
- wird in renderAppShell() nach initBottomNavSwipe() aufgerufen

public/router.js

@@ -296,6 +296,35 @@ function renderAppShell(container) {
 
   // Bottom-Nav: Scroll-Snap + Dot-Indikator
   initBottomNavSwipe(container);
+
+  // Bottom-Nav: Auto-Hide beim Runterscrollen (Mobile)
+  initNavHideOnScroll(container);
+}
+
+/**
+ * Versteckt die Bottom-Nav beim Runterscrollen, zeigt sie beim Hochscrollen.
+ * Nur auf Mobile aktiv (< 1024px), da auf Desktop die Sidebar fest sichtbar ist.
+ */
+function initNavHideOnScroll(container) {
+  const content = container.querySelector('#main-content');
+  const nav = container.querySelector('.nav-bottom');
+  if (!content || !nav) return;
+
+  let lastY = 0;
+
+  content.addEventListener('scroll', () => {
+    if (window.innerWidth >= 1024) return;
+
+    const y = content.scrollTop;
+    if (y < 10) {
+      nav.classList.remove('nav-bottom--hidden');
+    } else if (y > lastY + 4) {
+      nav.classList.add('nav-bottom--hidden');
+    } else if (y < lastY - 4) {
+      nav.classList.remove('nav-bottom--hidden');
+    }
+    lastY = y;
+  }, { passive: true });
 }
 
 /**