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

@@ -4,20 +4,20 @@ import { useState } from "react";
 import { Trash2 } from "lucide-react";
 import { NumberField, TextField } from "@/components/FormField";
 import { api } from "@/lib/api-client";
-import type { HouseholdInput, PhaseInput } from "@/lib/types";
+import type { PhaseInput } from "@/lib/types";
 
 export function PhaseDetail({
   phase,
   maxDurationYears,
   isLast,
-  household,
+  inflationDefault,
   onSaved,
   onDeleted,
 }: {
   phase: PhaseInput;
   maxDurationYears: number | null;
   isLast: boolean;
-  household: HouseholdInput;
+  inflationDefault: number;
   onSaved: () => void;
   onDeleted: () => void;
 }) {
@@ -55,14 +55,14 @@ export function PhaseDetail({
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
-        <div className="text-xs font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
+        <div className="text-xs font-semibold uppercase tracking-wide text-accent-soft-fg">
           Lebensphase
         </div>
         {isLast && (
           <button
             type="button"
             onClick={remove}
-            className="flex items-center gap-1 rounded-lg border border-zinc-300 px-2 py-1 text-xs text-zinc-500 hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-zinc-700 dark:hover:bg-red-950"
+            className="flex items-center gap-1 rounded-lg border border-border px-2 py-1 text-xs text-muted hover:border-danger hover:bg-danger-soft hover:text-danger"
           >
             <Trash2 className="h-3.5 w-3.5" /> Phase loeschen
           </button>
@@ -81,20 +81,20 @@ export function PhaseDetail({
         />
         <NumberField
           label="Inflationsrate (%)"
-          help="Ueberschreibt die Standardannahme aus dem Grundprofil."
-          value={inflationRate ?? household.inflationRateDefault}
+          help="Ueberschreibt die Standardannahme aus dem Plan-Grundprofil."
+          value={inflationRate ?? inflationDefault}
           step={0.1}
           onChange={setInflationRate}
         />
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-danger">{error}</p>}
       <div>
         <button
           type="button"
           disabled={saving}
           onClick={save}
-          className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+          className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg shadow-sm hover:bg-accent-hover disabled:opacity-50"
         >
           {saving ? "Speichern..." : "Speichern"}
         </button>