V3: 3 Farbschemata, Grundprofil auf Plan-Ebene, Erstellungs-Popups, integer-Zahlenfelder mit Beschleunigungs-Spinner, Carry-Forward des Zielwerts, gefuehrter Uebergang

- Theming: semantische CSS-Tokens + 3 waehlbare Schemata (Hell/Dunkel/Warm/Sunset), Umschalter im Profil-Menue, FOUC-frei via Inline-Script, localStorage; Klassen-Sweep aller Komponenten, Recharts aus Tokens
- Datenmodell: Household entfaellt; Plan traegt Haushaltsform/Personen/Inflation selbst (Person -> planId, Plan -> userId); destruktive Migration (TRUNCATE); Onboarding/HouseholdSettings entfernt; Plan-Erstellung & -Einstellungen mit Profilfeldern
- Popups: Element-Erstellung mit Inline-Feldern (geteilte ElementPhaseFields/ElementTransitionFields), Phase- und Plan-Popups mit Direkteingabe
- Zahlenfelder: 1'000er-Runden entfernt (floorToThousand/roundToHundred weg), integer MoneyInput mit beschleunigendem Press-and-Hold-Spinner, 0-Bug-Fix, harte Live-Caps
- Quote: Amortisation + Tilgung neu quotenwirksam; Restquote sichtbar (sinkt beim Verteilen); Invest-Deckel = verfuegbares Kapital + fortgeschriebener Zielwert
- Carry-Forward: Startwert der Folgephase = Zielwert der Vorphase minus Uebergangs-Bezug (live abgeleitet); optionale Zusatzinvestition aus verfuegbarem Kapital
- Matrix: Zelle zeigt Start -> Ziel; Uebergangs-Spaltenkopf mit "n offen"-Badge + gefuehrtem Pruef-Panel

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

src/components/Timeline.tsx

@@ -32,10 +32,10 @@ export function Timeline({ phases, persons }: { phases: PhaseComputed[]; persons
   }
 
   return (
-    <div className="rounded-xl border border-zinc-200/70 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+    <div className="rounded-xl border border-border bg-surface p-4 shadow-sm">
       <div className="mb-3 flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Zeitachse</h3>
-        <div className="flex gap-3 text-xs text-zinc-500">
+        <h3 className="text-sm font-semibold text-fg">Zeitachse</h3>
+        <div className="flex gap-3 text-xs text-muted">
           {persons.map((p) => (
             <span key={p.role} className="flex items-center gap-1">
               <span className="inline-block h-2 w-2 rounded-full" style={{ backgroundColor: p.color }} />
@@ -65,18 +65,18 @@ export function Timeline({ phases, persons }: { phases: PhaseComputed[]; persons
         )}
 
         {/* Achse */}
-        <div className="relative h-2 w-full rounded-full bg-gradient-to-r from-indigo-200 to-indigo-400 dark:from-indigo-500/30 dark:to-indigo-500/60">
+        <div className="relative h-2 w-full rounded-full bg-gradient-to-r from-accent-soft to-accent">
           {boundaries.slice(1).map((b) => (
             <div
               key={b.year}
-              className="absolute top-0 h-2 w-px bg-white/70 dark:bg-zinc-900/70"
+              className="absolute top-0 h-2 w-px bg-surface/70"
               style={{ left: pct(minAge + b.year) }}
             />
           ))}
         </div>
 
         {/* Alters-Beschriftung */}
-        <div className="mt-1 flex justify-between text-[11px] text-zinc-500">
+        <div className="mt-1 flex justify-between text-[11px] text-muted">
           <span>{minAge} J.</span>
           <span>{maxAge} J.</span>
         </div>