feat: Premium-Redesign + Fortschritts-UI

- Zentrales Design-Token-System in index.css (Farben/Spacing/Radien/Schatten/Fonts)
- Alle Live-Screens auf Tokens: Karten, BottomNav (aktiver Pill), Feed, Auth
- Auth: DM Sans entfernt, Akzent vereinheitlicht (Braun), Tokens gescoped
- Profil neu: Tagesziel-Ring, Streak-Heatmap, Wochen-Graph, echter Skills-Radar, Eckdaten
- Feed-EP-Badge mit Tagesziel-Ring (ProgressRing-Komponente)
- Game/Pro als gestaltetes 'Bald verfügbar' (ComingSoon)
- Konsumiert neue API: getStats/setDailyGoal, degradiert sauber bei 404

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/App.jsx

@@ -15,9 +15,8 @@ function AppContent() {
 
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F5F0E8' }}>
-        <div style={{ width: '32px', height: '32px', border: '2px solid #E2DAD0', borderTopColor: '#5C7A5E', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
-        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
+        <div className="app-spinner" />
       </div>
     )
   }
@@ -29,8 +28,8 @@ function AppContent() {
   const PageComponent = PAGES[page] || Feed
 
   return (
-    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#F5F0E8', overflow: 'hidden' }}>
-      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: 'var(--bg)', overflow: 'hidden' }}>
+      <div key={page} className="page-enter" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <PageComponent />
       </div>
       <BottomNav active={page} onNavigate={setPage} />