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

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { Trash2 } from "lucide-react";
-import { MoneyField, NumberField, SelectField } from "@/components/FormField";
+import { FieldLabel, MoneyField, NumberField, SelectField } from "@/components/FormField";
+import { formatChf } from "@/lib/format";
 import { api } from "@/lib/api-client";
 import { CATEGORY_LABELS, num } from "@/lib/elements";
 import { PILLAR_3A_MAX_ANNUAL } from "@/lib/constants";
@@ -16,6 +17,10 @@ export interface CellContext {
   durationYears: number;
   isRetirementTransition: boolean;
   carriedEndValue: number; // Endwert des Elements in der (Vor-)Phase, fuer Bezugs-Maxima
+  carried: boolean; // Phase >= 2: Startwert wird aus der Vorphase fortgeschrieben
+  derivedStart: number; // fortgeschriebener Basis-Startwert (read-only Anzeige)
+  quotaRateMax: number; // Max fuer eine Sparrate/Verzehrrate dieses Elements
+  capitalMax?: number; // Max fuer Startkapital/Neuinvestition (undefined = kein Cap)
 }
 
 interface Props {
@@ -27,6 +32,337 @@ interface Props {
   onDeleteElement: () => void;
 }
 
+// Read-only Anzeige eines abgeleiteten (fortgeschriebenen) Wertes.
+function DerivedField({ label, value, help }: { label: string; value: number; help?: string }) {
+  return (
+    <div>
+      <FieldLabel label={label} help={help} />
+      <div className="w-full rounded-lg border border-dashed border-border bg-surface-2 px-2.5 py-1.5 text-sm text-muted">
+        {formatChf(value)}
+      </div>
+    </div>
+  );
+}
+
+// --- Wiederverwendbare Feldgruppen (Detail-Panel, Erstell-Popup, Uebergangs-Review) ---
+
+export function ElementPhaseFields({
+  element,
+  context,
+  pd,
+  setP,
+}: {
+  element: { category: ElementCategory };
+  context: CellContext;
+  pd: PhaseData;
+  setP: (patch: Partial<PhaseData>) => void;
+}) {
+  const carried = context.carried;
+  switch (element.category) {
+    case "INCOME":
+      return <MoneyField label="Jahreseinkommen (CHF)" value={num(pd.amount)} onChange={(v) => setP({ amount: v })} />;
+    case "EXPENSE":
+      return <MoneyField label="Jahresausgaben (CHF)" value={num(pd.amount)} onChange={(v) => setP({ amount: v })} />;
+    case "AHV":
+      if (!context.ownerWorking) {
+        return (
+          <p className="col-span-2 text-sm text-muted">
+            Die AHV-Rente wird automatisch aus den bisherigen Ausfalljahren berechnet (siehe Kennzahl in der
+            Matrix). Bei Ehepaaren greift die Plafonierung auf 150% der Maximalrente.
+          </p>
+        );
+      }
+      return (
+        <NumberField
+          label="Geplante Ausfalljahre"
+          help="Jahre ohne AHV-Beitraege in dieser Phase. Jedes Ausfalljahr kuerzt die spaetere Rente um 1/44."
+          value={num(pd.gapYears)}
+          min={0}
+          max={context.durationYears}
+          onChange={(v) => setP({ gapYears: Math.max(0, Math.min(context.durationYears, Math.round(v))) })}
+        />
+      );
+    case "PENSION_FUND":
+      if (!context.ownerWorking) {
+        return (
+          <p className="col-span-2 text-sm text-muted">
+            Die PK-Rente wird aus dem beim Pensions-Uebergang gewaehlten Umwandlungssatz berechnet (siehe
+            Kennzahl). Bei reinem Kapitalbezug erscheint hier &quot;Vollstaendig bezogen&quot;.
+          </p>
+        );
+      }
+      return (
+        <>
+          {carried ? (
+            <>
+              <DerivedField label="Startwert (fortgeschrieben)" value={context.derivedStart} help="Endwert der Vorphase, fortgeschrieben." />
+              <MoneyField
+                label="Zusatzeinlage aus Kapital (CHF)"
+                help="Aufstockung aus dem verfuegbaren Kapital dieser Phase."
+                value={num(pd.additionalInvestment)}
+                max={context.capitalMax}
+                onChange={(v) => setP({ additionalInvestment: v })}
+              />
+            </>
+          ) : (
+            <MoneyField label="Aktueller PK-Wert (CHF)" value={num(pd.currentValue)} max={context.capitalMax} onChange={(v) => setP({ currentValue: v })} />
+          )}
+          <MoneyField
+            label="Jaehrliche Einzahlung (CHF)"
+            help="Arbeitnehmer- und Arbeitgeberbeitraege. Fliesst NICHT in die Sparquote ein (bereits in den Ausgaben beruecksichtigt)."
+            value={num(pd.annualContribution)}
+            onChange={(v) => setP({ annualContribution: v })}
+          />
+          <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
+        </>
+      );
+    case "PILLAR_3A":
+      if (!context.ownerWorking) {
+        return <p className="col-span-2 text-sm text-muted">Die Saeule 3a wird beim Pensions-Uebergang vollstaendig bezogen.</p>;
+      }
+      return (
+        <>
+          {carried ? (
+            <>
+              <DerivedField label="Startwert (fortgeschrieben)" value={context.derivedStart} help="Endwert der Vorphase, fortgeschrieben." />
+              <MoneyField
+                label="Zusatzeinlage aus Kapital (CHF)"
+                help="Aufstockung aus dem verfuegbaren Kapital dieser Phase."
+                value={num(pd.additionalInvestment)}
+                max={context.capitalMax}
+                onChange={(v) => setP({ additionalInvestment: v })}
+              />
+            </>
+          ) : (
+            <MoneyField label="Aktueller 3a-Wert (CHF)" value={num(pd.currentValue)} max={context.capitalMax} onChange={(v) => setP({ currentValue: v })} />
+          )}
+          <MoneyField
+            label="Jaehrliche Einzahlung (CHF)"
+            help={`Maximal CHF ${PILLAR_3A_MAX_ANNUAL.toLocaleString("de-CH")} (2026, mit PK) und hoechstens die Sparquote. Wird von der Sparquote abgezogen.`}
+            value={num(pd.annualContribution)}
+            max={Math.min(PILLAR_3A_MAX_ANNUAL, context.quotaRateMax)}
+            onChange={(v) => setP({ annualContribution: v })}
+          />
+          <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
+        </>
+      );
+    case "REAL_ESTATE":
+      if (carried) {
+        return (
+          <>
+            <DerivedField label="Startwert Netto (fortgeschrieben)" value={context.derivedStart} help="Kaufpreis minus fortgeschriebene Resthypothek." />
+            <MoneyField
+              label="Amortisation (CHF/Jahr)"
+              help="Jaehrliche Reduktion der Hypothek. Zaehlt gegen die Sparquote."
+              value={num(pd.amortization)}
+              max={context.quotaRateMax}
+              onChange={(v) => setP({ amortization: v })}
+            />
+          </>
+        );
+      }
+      return (
+        <>
+          <MoneyField label="Kaufpreis (CHF)" value={num(pd.purchasePrice)} max={context.capitalMax != null ? context.capitalMax + num(pd.mortgage) : undefined} onChange={(v) => setP({ purchasePrice: v })} />
+          <MoneyField label="Hypothek (CHF)" value={num(pd.mortgage)} onChange={(v) => setP({ mortgage: v })} />
+          <MoneyField
+            label="Amortisation (CHF/Jahr)"
+            help="Jaehrliche Reduktion der Hypothek. Zaehlt gegen die Sparquote."
+            value={num(pd.amortization)}
+            max={context.quotaRateMax}
+            onChange={(v) => setP({ amortization: v })}
+          />
+        </>
+      );
+    case "OTHER_ASSET":
+      return (
+        <>
+          {carried ? (
+            <>
+              <DerivedField label="Startwert (fortgeschrieben)" value={context.derivedStart} help="Endwert der Vorphase, fortgeschrieben." />
+              <MoneyField
+                label="Zusatzinvestition aus Kapital (CHF)"
+                help="Neuinvestition aus dem verfuegbaren Kapital dieser Phase."
+                value={num(pd.additionalInvestment)}
+                max={context.capitalMax}
+                onChange={(v) => setP({ additionalInvestment: v })}
+              />
+            </>
+          ) : (
+            <MoneyField label="Startwert (CHF)" value={num(pd.startValue)} max={context.capitalMax} onChange={(v) => setP({ startValue: v })} />
+          )}
+          <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
+          <MoneyField
+            label={context.isConsumption ? "Jaehrliche Bezugsrate (CHF)" : "Jaehrlicher Sparbeitrag (CHF)"}
+            help={
+              context.isConsumption
+                ? "In dieser Verzehrphase deckt dieser Betrag die Verzehrquote (max. die Verzehrquote)."
+                : "Wird von der Sparquote abgezogen (max. die Sparquote)."
+            }
+            value={num(pd.annualContribution)}
+            max={context.quotaRateMax}
+            onChange={(v) => setP({ annualContribution: v })}
+          />
+        </>
+      );
+    case "OTHER_DEBT":
+      return (
+        <>
+          {carried ? (
+            <DerivedField label="Restschuld (fortgeschrieben)" value={Math.abs(context.derivedStart)} help="Fortgeschriebene Restschuld aus der Vorphase." />
+          ) : (
+            <MoneyField label="Restschuld (CHF)" value={num(pd.startValue)} onChange={(v) => setP({ startValue: v })} />
+          )}
+          <MoneyField
+            label="Jaehrliche Tilgung (CHF)"
+            help="Zaehlt gegen die Sparquote (max. die Sparquote)."
+            value={num(pd.annualRepayment)}
+            max={context.quotaRateMax}
+            onChange={(v) => setP({ annualRepayment: v })}
+          />
+        </>
+      );
+  }
+}
+
+export function ElementTransitionFields({
+  element,
+  context,
+  td,
+  setT,
+}: {
+  element: { category: ElementCategory };
+  context: CellContext;
+  td: TransitionData;
+  setT: (patch: Partial<TransitionData>) => void;
+}) {
+  switch (element.category) {
+    case "INCOME":
+    case "EXPENSE":
+    case "AHV":
+      return (
+        <p className="col-span-2 text-sm text-muted">
+          Fuer diese Kategorie gibt es im Uebergang keine Eingaben. Die Werte werden 1:1 in die naechste
+          Lebensphase uebernommen und koennen dort angepasst werden.
+        </p>
+      );
+    case "PENSION_FUND":
+      if (context.isRetirementTransition) {
+        const mode = td.payoutMode ?? "PENSION";
+        return (
+          <>
+            <SelectField
+              label="Bezugsart bei Pensionierung"
+              value={mode}
+              onChange={(v: "CAPITAL" | "PENSION" | "COMBI") => setT({ payoutMode: v })}
+              options={[
+                { value: "PENSION", label: "Rente" },
+                { value: "CAPITAL", label: "Kapitalbezug" },
+                { value: "COMBI", label: "Kombination" },
+              ]}
+            />
+            {(mode === "PENSION" || mode === "COMBI") && (
+              <NumberField
+                label="Umwandlungssatz (%)"
+                help="Jaehrliche Rente = verrentetes Kapital x Umwandlungssatz."
+                step={0.1}
+                value={num(td.conversionRate, 6)}
+                onChange={(v) => setT({ conversionRate: v })}
+              />
+            )}
+            {(mode === "CAPITAL" || mode === "COMBI") && (
+              <NumberField label="Kapitalbezugssteuer (%)" step={0.5} value={num(td.capitalTaxRate, 8)} onChange={(v) => setT({ capitalTaxRate: v })} />
+            )}
+            {mode === "COMBI" && (
+              <MoneyField
+                label="Davon Kapitalbezug (CHF)"
+                help={`Der Rest wird verrentet. Maximal ${formatChf(context.carriedEndValue)}.`}
+                value={num(td.capitalAmount)}
+                max={context.carriedEndValue}
+                onChange={(v) => setT({ capitalAmount: v })}
+              />
+            )}
+          </>
+        );
+      }
+      return (
+        <MoneyField
+          label="PK-Bezug (CHF)"
+          help={`Optionaler Bezug. Maximal ${formatChf(context.carriedEndValue)} (Endwert der Vorphase).`}
+          value={num(td.withdrawal)}
+          max={context.carriedEndValue}
+          onChange={(v) => setT({ withdrawal: v })}
+        />
+      );
+    case "PILLAR_3A":
+      if (context.isRetirementTransition) {
+        return (
+          <NumberField
+            label="Kapitalbezugssteuer (%)"
+            help="Die Saeule 3a wird bei Pensionierung vollstaendig bezogen."
+            step={0.5}
+            value={num(td.capitalTaxRate, 8)}
+            onChange={(v) => setT({ capitalTaxRate: v })}
+          />
+        );
+      }
+      return (
+        <MoneyField
+          label="3a-Bezug (CHF)"
+          help={`Maximal ${formatChf(context.carriedEndValue)} (Endwert der Vorphase).`}
+          value={num(td.withdrawal)}
+          max={context.carriedEndValue}
+          onChange={(v) => setT({ withdrawal: v })}
+        />
+      );
+    case "REAL_ESTATE": {
+      const decision = td.decision ?? "HOLD";
+      return (
+        <>
+          <SelectField
+            label="Entscheidung"
+            value={decision}
+            onChange={(v: "HOLD" | "SELL") => setT({ decision: v })}
+            options={[
+              { value: "HOLD", label: "Halten" },
+              { value: "SELL", label: "Verkaufen" },
+            ]}
+          />
+          {decision === "SELL" && (
+            <>
+              <MoneyField label="Verkaufspreis (CHF)" value={num(td.salePrice)} onChange={(v) => setT({ salePrice: v })} />
+              <NumberField label="Grundstueckgewinnsteuer (%)" step={1} value={num(td.saleTaxRate, 20)} onChange={(v) => setT({ saleTaxRate: v })} />
+            </>
+          )}
+        </>
+      );
+    }
+    case "OTHER_ASSET": {
+      const decision = td.decision ?? "HOLD";
+      return (
+        <SelectField
+          label="Entscheidung"
+          value={decision}
+          onChange={(v: "HOLD" | "SELL") => setT({ decision: v })}
+          options={[
+            { value: "HOLD", label: "Halten" },
+            { value: "SELL", label: "Verkaufen" },
+          ]}
+        />
+      );
+    }
+    case "OTHER_DEBT":
+      return (
+        <MoneyField
+          label="Sofortige Tilgung (CHF)"
+          help="Wird sofort getilgt und vom verfuegbaren Kapital der naechsten Phase abgezogen."
+          value={num(td.immediateRepayment)}
+          onChange={(v) => setT({ immediateRepayment: v })}
+        />
+      );
+  }
+}
+
 export function ElementDetail({ element, context, phaseData, transitionData, onSaved, onDeleteElement }: Props) {
   const [pd, setPd] = useState<PhaseData>({ ...phaseData });
   const [td, setTd] = useState<TransitionData>({ ...transitionData });
@@ -52,43 +388,6 @@ export function ElementDetail({ element, context, phaseData, transitionData, onS
     }
   }
 
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <div className="text-xs font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
-            {CATEGORY_LABELS[element.category]}
-            {isTransition ? " · Uebergang" : ""}
-          </div>
-          <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">{element.name}</div>
-        </div>
-        <button
-          type="button"
-          onClick={onDeleteElement}
-          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"
-        >
-          <Trash2 className="h-3.5 w-3.5" /> Element loeschen
-        </button>
-      </div>
-
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        {isTransition ? renderTransitionFields() : renderPhaseFields()}
-      </div>
-
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{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"
-        >
-          {saving ? "Speichern..." : "Speichern"}
-        </button>
-      </div>
-    </div>
-  );
-
   function setP(patch: Partial<PhaseData>) {
     setPd((prev) => ({ ...prev, ...patch }));
   }
@@ -96,254 +395,44 @@ export function ElementDetail({ element, context, phaseData, transitionData, onS
     setTd((prev) => ({ ...prev, ...patch }));
   }
 
-  function renderPhaseFields() {
-    switch (element.category) {
-      case "INCOME":
-        return (
-          <MoneyField label="Jahreseinkommen (CHF)" value={num(pd.amount)} onChange={(v) => setP({ amount: v })} />
-        );
-      case "EXPENSE":
-        return (
-          <MoneyField label="Jahresausgaben (CHF)" value={num(pd.amount)} onChange={(v) => setP({ amount: v })} />
-        );
-      case "AHV":
-        if (!context.ownerWorking) {
-          return (
-            <p className="col-span-2 text-sm text-zinc-500 dark:text-zinc-400">
-              Die AHV-Rente wird automatisch aus den bisherigen Ausfalljahren berechnet (siehe Kennzahl in der
-              Matrix). Bei Ehepaaren greift die Plafonierung auf 150% der Maximalrente.
-            </p>
-          );
-        }
-        return (
-          <NumberField
-            label="Geplante Ausfalljahre"
-            help="Jahre ohne AHV-Beitraege in dieser Phase. Jedes Ausfalljahr kuerzt die spaetere Rente um 1/44."
-            value={num(pd.gapYears)}
-            min={0}
-            max={context.durationYears}
-            onChange={(v) => setP({ gapYears: Math.max(0, Math.min(context.durationYears, Math.round(v))) })}
-          />
-        );
-      case "PENSION_FUND":
-        if (!context.ownerWorking) {
-          return (
-            <p className="col-span-2 text-sm text-zinc-500 dark:text-zinc-400">
-              Die PK-Rente wird aus dem beim Pensions-Uebergang gewaehlten Umwandlungssatz berechnet (siehe
-              Kennzahl). Bei reinem Kapitalbezug erscheint hier &quot;Vollstaendig bezogen&quot;.
-            </p>
-          );
-        }
-        return (
-          <>
-            <MoneyField label="Aktueller PK-Wert (CHF)" value={num(pd.currentValue)} onChange={(v) => setP({ currentValue: v })} />
-            <MoneyField
-              label="Jaehrliche Einzahlung (CHF)"
-              help="Arbeitnehmer- und Arbeitgeberbeitraege. Fliesst NICHT in die Sparquote ein (bereits in den Ausgaben beruecksichtigt)."
-              value={num(pd.annualContribution)}
-              onChange={(v) => setP({ annualContribution: v })}
-            />
-            <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
-          </>
-        );
-      case "PILLAR_3A":
-        if (!context.ownerWorking) {
-          return (
-            <p className="col-span-2 text-sm text-zinc-500 dark:text-zinc-400">
-              Die Saeule 3a wird beim Pensions-Uebergang vollstaendig bezogen.
-            </p>
-          );
-        }
-        return (
-          <>
-            <MoneyField label="Aktueller 3a-Wert (CHF)" value={num(pd.currentValue)} onChange={(v) => setP({ currentValue: v })} />
-            <NumberField
-              label="Jaehrliche Einzahlung (CHF)"
-              help={`Maximal CHF ${PILLAR_3A_MAX_ANNUAL.toLocaleString("de-CH")} (2026, mit PK). Wird von der Sparquote abgezogen. Schritte von 100.`}
-              step={100}
-              min={0}
-              max={PILLAR_3A_MAX_ANNUAL}
-              value={num(pd.annualContribution)}
-              onChange={(v) => setP({ annualContribution: Math.max(0, Math.min(PILLAR_3A_MAX_ANNUAL, Math.round(v / 100) * 100)) })}
-            />
-            <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
-          </>
-        );
-      case "REAL_ESTATE":
-        return (
-          <>
-            <MoneyField label="Kaufpreis (CHF)" value={num(pd.purchasePrice)} onChange={(v) => setP({ purchasePrice: v })} />
-            <MoneyField label="Hypothek (CHF)" value={num(pd.mortgage)} onChange={(v) => setP({ mortgage: v })} />
-            <MoneyField
-              label="Amortisation (CHF/Jahr)"
-              help="Jaehrliche Reduktion der Hypothek."
-              value={num(pd.amortization)}
-              onChange={(v) => setP({ amortization: v })}
-            />
-          </>
-        );
-      case "OTHER_ASSET":
-        return (
-          <>
-            <MoneyField label="Startwert (CHF)" value={num(pd.startValue)} onChange={(v) => setP({ startValue: v })} />
-            <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
-            <MoneyField
-              label={context.isConsumption ? "Jaehrliche Bezugsrate (CHF)" : "Jaehrlicher Sparbeitrag (CHF)"}
-              help={
-                context.isConsumption
-                  ? "In dieser Verzehrphase wird dieser Betrag jaehrlich entnommen und deckt die Verzehrquote."
-                  : "Wird von der Sparquote abgezogen."
-              }
-              value={num(pd.annualContribution)}
-              onChange={(v) => setP({ annualContribution: v })}
-            />
-          </>
-        );
-      case "OTHER_DEBT":
-        return (
-          <>
-            <MoneyField label="Restschuld (CHF)" value={num(pd.startValue)} onChange={(v) => setP({ startValue: v })} />
-            <MoneyField label="Jaehrliche Tilgung (CHF)" value={num(pd.annualRepayment)} onChange={(v) => setP({ annualRepayment: v })} />
-          </>
-        );
-    }
-  }
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-wide text-accent-soft-fg">
+            {CATEGORY_LABELS[element.category]}
+            {isTransition ? " · Uebergang" : ""}
+          </div>
+          <div className="text-base font-semibold text-fg">{element.name}</div>
+        </div>
+        <button
+          type="button"
+          onClick={onDeleteElement}
+          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" /> Element loeschen
+        </button>
+      </div>
 
-  function renderTransitionFields() {
-    switch (element.category) {
-      case "INCOME":
-      case "EXPENSE":
-      case "AHV":
-        return (
-          <p className="col-span-2 text-sm text-zinc-500 dark:text-zinc-400">
-            Fuer diese Kategorie gibt es im Uebergang keine Eingaben. Die Werte werden 1:1 in die naechste
-            Lebensphase uebernommen und koennen dort angepasst werden.
-          </p>
-        );
-      case "PENSION_FUND":
-        if (context.isRetirementTransition) {
-          const mode = td.payoutMode ?? "PENSION";
-          return (
-            <>
-              <SelectField
-                label="Bezugsart bei Pensionierung"
-                value={mode}
-                onChange={(v: "CAPITAL" | "PENSION" | "COMBI") => setT({ payoutMode: v })}
-                options={[
-                  { value: "PENSION", label: "Rente" },
-                  { value: "CAPITAL", label: "Kapitalbezug" },
-                  { value: "COMBI", label: "Kombination" },
-                ]}
-              />
-              {(mode === "PENSION" || mode === "COMBI") && (
-                <NumberField
-                  label="Umwandlungssatz (%)"
-                  help="Jaehrliche Rente = verrentetes Kapital x Umwandlungssatz."
-                  step={0.1}
-                  value={num(td.conversionRate, 6)}
-                  onChange={(v) => setT({ conversionRate: v })}
-                />
-              )}
-              {(mode === "CAPITAL" || mode === "COMBI") && (
-                <NumberField
-                  label="Kapitalbezugssteuer (%)"
-                  step={0.5}
-                  value={num(td.capitalTaxRate, 8)}
-                  onChange={(v) => setT({ capitalTaxRate: v })}
-                />
-              )}
-              {mode === "COMBI" && (
-                <MoneyField
-                  label="Davon Kapitalbezug (CHF)"
-                  help={`Der Rest wird verrentet. Maximal ${context.carriedEndValue.toLocaleString("de-CH")}.`}
-                  value={num(td.capitalAmount)}
-                  max={context.carriedEndValue}
-                  onChange={(v) => setT({ capitalAmount: v })}
-                />
-              )}
-            </>
-          );
-        }
-        return (
-          <MoneyField
-            label="PK-Bezug (CHF)"
-            help={`Optionaler Bezug. Maximal ${context.carriedEndValue.toLocaleString("de-CH")} (Endwert der Vorphase).`}
-            value={num(td.withdrawal)}
-            max={context.carriedEndValue}
-            onChange={(v) => setT({ withdrawal: v })}
-          />
-        );
-      case "PILLAR_3A":
-        if (context.isRetirementTransition) {
-          return (
-            <NumberField
-              label="Kapitalbezugssteuer (%)"
-              help="Die Saeule 3a wird bei Pensionierung vollstaendig bezogen."
-              step={0.5}
-              value={num(td.capitalTaxRate, 8)}
-              onChange={(v) => setT({ capitalTaxRate: v })}
-            />
-          );
-        }
-        return (
-          <MoneyField
-            label="3a-Bezug (CHF)"
-            help={`Maximal ${context.carriedEndValue.toLocaleString("de-CH")} (Endwert der Vorphase).`}
-            value={num(td.withdrawal)}
-            max={context.carriedEndValue}
-            onChange={(v) => setT({ withdrawal: v })}
-          />
-        );
-      case "REAL_ESTATE": {
-        const decision = td.decision ?? "HOLD";
-        return (
-          <>
-            <SelectField
-              label="Entscheidung"
-              value={decision}
-              onChange={(v: "HOLD" | "SELL") => setT({ decision: v })}
-              options={[
-                { value: "HOLD", label: "Halten" },
-                { value: "SELL", label: "Verkaufen" },
-              ]}
-            />
-            {decision === "SELL" && (
-              <>
-                <MoneyField label="Verkaufspreis (CHF)" value={num(td.salePrice)} onChange={(v) => setT({ salePrice: v })} />
-                <NumberField
-                  label="Grundstueckgewinnsteuer (%)"
-                  step={1}
-                  value={num(td.saleTaxRate, 20)}
-                  onChange={(v) => setT({ saleTaxRate: v })}
-                />
-              </>
-            )}
-          </>
-        );
-      }
-      case "OTHER_ASSET": {
-        const decision = td.decision ?? "HOLD";
-        return (
-          <SelectField
-            label="Entscheidung"
-            value={decision}
-            onChange={(v: "HOLD" | "SELL") => setT({ decision: v })}
-            options={[
-              { value: "HOLD", label: "Halten" },
-              { value: "SELL", label: "Verkaufen" },
-            ]}
-          />
-        );
-      }
-      case "OTHER_DEBT":
-        return (
-          <MoneyField
-            label="Sofortige Tilgung (CHF)"
-            help="Wird sofort getilgt und vom verfuegbaren Kapital der naechsten Phase abgezogen."
-            value={num(td.immediateRepayment)}
-            onChange={(v) => setT({ immediateRepayment: v })}
-          />
-        );
-    }
-  }
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        {isTransition ? (
+          <ElementTransitionFields element={element} context={context} td={td} setT={setT} />
+        ) : (
+          <ElementPhaseFields element={element} context={context} pd={pd} setP={setP} />
+        )}
+      </div>
+
+      {error && <p className="text-sm text-danger">{error}</p>}
+      <div>
+        <button
+          type="button"
+          disabled={saving}
+          onClick={save}
+          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>
+      </div>
+    </div>
+  );
 }