V5-Modell: Einkommen nominal, Ausgaben real->nominal, Inflation plan-weit, Sparquoten-Grafik

- Einkommen: nominale Basis + nominale Lohnerhoehung (Default 0). Real read-only als Info.
- Ausgaben: REALE Basis (heutige Kaufkraft) + reale Mehrausgaben (Default 0); nominal =
  real x plan-weite Inflation, read-only. Loest die "nominale Ausgaben verwirren"-Problematik.
- Inflation nur noch plan-weit (Phasen-Override entfernt).
- Engine liefert flowDeflatorEnd (Flow-Realwerte) + yearly-Serie (Jahr/Alter/Einkommen/
  Ausgabe nominal/real). Nominal/Real-Umschalter nutzt Flow- vs. Bestands-Deflatoren.
- Neue Grafik (Dashboard): Einkommen vs. nominale Ausgabe mit eingefaerbter Sparquoten-
  Flaeche (gruen/rot) + reale Ausgabe als Referenzlinie (Inflationskeil).
- In-Tool-Erklaerungen in den Einkommen/Ausgaben-Popups.
- Golden Tests aufs neue Modell hergeleitet (8 gruen, u.a. Ausgaben real->nominal, Ruin 94).

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

src/components/Dashboard.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { BarChart3, Download, LineChart as LineChartIcon } from "lucide-react";
 import { WealthChart, type TimelineSeries } from "@/components/WealthChart";
+import { SparquoteChart } from "@/components/SparquoteChart";
 import { api } from "@/lib/api-client";
 import { formatChf } from "@/lib/format";
 import type { PlanComputed } from "@/lib/calculations";
@@ -97,6 +98,18 @@ export function Dashboard({
         <StatCard label="Geschaetzter Nachlass" value={computed.nachlass} help="Endvermoegen der letzten Phase - potenziell vererbbar." />
       </div>
 
+      <section className="rounded-xl border border-border bg-surface p-4 shadow-sm">
+        <h3 className="mb-1 flex items-center gap-1.5 text-sm font-semibold text-fg">
+          <LineChartIcon className="h-4 w-4 text-accent" />
+          Einkommen vs. Ausgaben pro Jahr
+        </h3>
+        <p className="mb-3 text-xs text-muted">
+          Die Flaeche zwischen Einkommen und nominalen Ausgaben ist die Spar- (gruen) bzw. Verzehrquote (rot).
+          Die blasse Linie sind die realen Ausgaben &ndash; der Abstand zur nominalen Linie ist der Inflationsanteil.
+        </p>
+        <SparquoteChart computed={computed} />
+      </section>
+
       <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-fg">