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/Dashboard.tsx

@@ -86,15 +86,15 @@ export function Dashboard({
         <StatCard label="Geschaetzter Nachlass" value={computed.nachlass} help="Endvermoegen der letzten Phase - potenziell vererbbar." />
       </div>
 
-      <section className="rounded-xl border border-zinc-200/70 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+      <section className="rounded-xl border border-border bg-surface p-4 shadow-sm">
         <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-          <h3 className="flex items-center gap-1.5 text-sm font-semibold text-zinc-800 dark:text-zinc-100">
-            <LineChartIcon className="h-4 w-4 text-indigo-500 dark:text-indigo-400" />
+          <h3 className="flex items-center gap-1.5 text-sm font-semibold text-fg">
+            <LineChartIcon className="h-4 w-4 text-accent" />
             Vermoegensverlauf
           </h3>
           <a
             href={`/api/plans/${plan.id}/export`}
-            className="flex items-center gap-1.5 rounded-lg border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-muted hover:bg-surface-2"
           >
             <Download className="h-3.5 w-3.5" />
             CSV-Export
@@ -102,9 +102,9 @@ export function Dashboard({
         </div>
         {otherPlans.length > 0 && (
           <div className="mb-3 flex flex-wrap gap-2">
-            <span className="text-xs text-zinc-500">Vergleichen mit:</span>
+            <span className="text-xs text-muted">Vergleichen mit:</span>
             {otherPlans.map((p) => (
-              <label key={p.id} className="flex items-center gap-1 text-xs text-zinc-600 dark:text-zinc-300">
+              <label key={p.id} className="flex items-center gap-1 text-xs text-muted">
                 <input
                   type="checkbox"
                   checked={compareIds.includes(p.id)}
@@ -118,15 +118,15 @@ export function Dashboard({
         <WealthChart series={series} />
       </section>
 
-      <section className="rounded-xl border border-zinc-200/70 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
-        <h3 className="mb-3 flex items-center gap-1.5 text-sm font-semibold text-zinc-800 dark:text-zinc-100">
-          <BarChart3 className="h-4 w-4 text-indigo-500 dark:text-indigo-400" />
+      <section className="rounded-xl border border-border bg-surface p-4 shadow-sm">
+        <h3 className="mb-3 flex items-center gap-1.5 text-sm font-semibold text-fg">
+          <BarChart3 className="h-4 w-4 text-accent" />
           Vermoegensaufteilung pro Phase (Endvermoegen)
         </h3>
         <div className="h-72 w-full">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart data={barData} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-zinc-200 dark:stroke-zinc-700" />
+              <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
               <XAxis dataKey="phase" tick={{ fontSize: 11 }} />
               <YAxis
                 tick={{ fontSize: 11 }}
@@ -147,11 +147,11 @@ export function Dashboard({
 
 function StatCard({ label, value, help }: { label: string; value: number; help?: string }) {
   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="text-xs text-zinc-500 dark:text-zinc-400" title={help}>
+    <div className="rounded-xl border border-border bg-surface p-4 shadow-sm">
+      <div className="text-xs text-muted" title={help}>
         {label}
       </div>
-      <div className="mt-1 text-xl font-semibold text-indigo-600 dark:text-indigo-400">
+      <div className="mt-1 text-xl font-semibold text-accent">
         {formatChf(value)} CHF
       </div>
     </div>