Phasenkopf neu + Bezugsrate (Verzehrrate) beim Sonstigen Vermoegen

- Sonstiges Vermoegen bekommt "Jaehrliche Bezugsrate (Entnahme)": mindert das Vermoegen
  (gekappt am Bestand) und fliesst jaehrlich ins Cash.
- Phasenkopf neu strukturiert: Einkommen / Ausgaben / Quote, dann Geplante Sparrate
  (3a + Vermoegen-Sparbeitrag + Amortisation + Tilgung) und Geplante Verzehrrate
  (Bezugsraten), dann Kapitalzufluss (Verkaeufe + PK-/3a-Bezuege aus dem Uebergang) und
  Kapitalinvestitionen (Zusatz-/Neuinvestitionen + sofortige Tilgungen), dann Vermoegen.
  Die Cash-Zeile im Kopf entfaellt (die Cash-Zeile in der Matrix bleibt).
- Engine liefert plannedSaveRate/plannedWithdrawRate/capitalInflow/capitalInvest.
- Golden Tests: Bezugsrate ins Cash + Kapitalzufluss/-investitionen (10 gruen).

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

src/components/ElementDetail.tsx

@@ -307,10 +307,16 @@ export function ElementPhaseFields({
           <NumberField label="Erwartete Rendite (%/Jahr)" step={0.1} value={num(pd.expectedReturn)} onChange={(v) => setP({ expectedReturn: v })} />
           <MoneyField
             label="Jaehrlicher Sparbeitrag (CHF)"
-            help="Flacher Jahresbetrag, der ins Vermoegen fliesst und vom Cash abgezogen wird. Zum Entnehmen im Alter das Element im Uebergang verkaufen."
+            help="Flacher Jahresbetrag, der ins Vermoegen fliesst und vom Cash abgezogen wird (geplante Sparrate)."
             value={num(pd.annualContribution)}
             onChange={(v) => setP({ annualContribution: v })}
           />
+          <MoneyField
+            label="Jaehrliche Bezugsrate (CHF)"
+            help="Entnahme aus dem Vermoegen (z. B. laufende Renten-Entnahme im Alter). Mindert das Vermoegen und fliesst jaehrlich ins Cash (geplante Verzehrrate)."
+            value={num(pd.annualWithdrawal)}
+            onChange={(v) => setP({ annualWithdrawal: v })}
+          />
         </>
       );
     case "OTHER_DEBT":

src/components/PlanView.tsx

@@ -747,9 +747,19 @@ function PhaseHeader({
         <div>
           {quotaLabel} {valStr(phase.quotaStart, dS, mode)} → {valStr(phase.quotaEnd, dF, mode)}
         </div>
-        <div className={phase.cashNegative ? "text-danger font-medium" : ""}>
-          Cash {valStr(phase.cashStart, dS, mode)} → {valStr(phase.cashEnd, dE, mode)}
-        </div>
+        <div className="my-1 border-t border-border" />
+        <div>Geplante Sparrate {valStr(phase.plannedSaveRate, dS, mode)}</div>
+        <div>Geplante Verzehrrate {valStr(phase.plannedWithdrawRate, dS, mode)}</div>
+
+        {(phase.capitalInflow > 0 || phase.capitalInvest > 0) && (
+          <>
+            <div className="my-1 border-t border-border" />
+            {phase.capitalInflow > 0 && <div>Kapitalzufluss {valStr(phase.capitalInflow, dS, mode)}</div>}
+            {phase.capitalInvest > 0 && <div>Kapitalinvestitionen {valStr(phase.capitalInvest, dS, mode)}</div>}
+          </>
+        )}
+
+        <div className="my-1 border-t border-border" />
         <div>
           Vermoegen {valStr(phase.startWealthNominal, dS, mode)} → {valStr(phase.endWealthNominal, dE, mode)}
         </div>