Szenario-Vergleich in der Monte-Carlo-Simulation + Sensitivitaetsanalyse (Tornado)

Monte Carlo ueber mehrere Szenarien eines Plans in einem Lauf:
- Annahmen nur EINMAL je logischem Element (Zuordnung ueber sourceElementId,
  dieselbe Kette wie beim Diff) -- sonst vergleicht man die Eingaben statt
  der Szenarien
- gemeinsamer Seed fuer alle Szenarien (Common Random Numbers), damit
  Unterschiede strukturell und nicht zufaellig sind
- Zielbetrag bleibt szenario-eigen: die Erfolgswahrscheinlichkeit misst,
  wie oft ein Szenario sein EIGENES Versprechen haelt
- Vergleichstabelle + Median-Linien; bei einem Szenario unveraenderter Faecher

Sensitivitaetsanalyse (Roadmap Nr. 20), eigener Dialog "Einflussfaktoren":
- neues reines Modul sensitivity.ts, One-at-a-time ueber 7 Treiber
- Bandbreiten je Treiber pflichtig und ohne Default (die Balkenlaenge haengt
  direkt davon ab)
- Pensionsalter bewusst ausgeschlossen: nicht variierbar ohne Mitverschieben
  der Phasengrenzen (Begruendung in 9.18)

SPEZIFIKATION auf 1.0: neue Kapitel 3.6.6, 4.12.6, 4.13, 9.18, 9.19 sowie
vier korrigierte Dokumentationsfehler (Kap. 1.2, 4.6.5, 5.2/5.3/5.5.2/8.1,
Glossar). 20 Tests ergaenzt (60 -> 80). Keine DB-Aenderung.

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

src/components/AppShell.tsx

@@ -12,12 +12,14 @@ import {
   Menu,
   PiggyBank,
   Plus,
+  Tornado,
   Trash2,
   X,
 } from "lucide-react";
 import { PlanView } from "@/components/PlanView";
 import { Dashboard } from "@/components/Dashboard";
 import { MonteCarloDialog } from "@/components/MonteCarloDialog";
+import { SensitivityDialog } from "@/components/SensitivityDialog";
 import { SpecView } from "@/components/SpecView";
 import { ProfileMenu } from "@/components/ProfileMenu";
 import { PlanProfileFields, emptyProfileDraft, type ProfileDraft } from "@/components/PlanProfileFields";
@@ -44,6 +46,7 @@ export function AppShell({ username }: { username: string }) {
   const [showSpec, setShowSpec] = useState(false);
   const [showCharts, setShowCharts] = useState(false);
   const [showMonteCarlo, setShowMonteCarlo] = useState(false);
+  const [showSensitivity, setShowSensitivity] = useState(false);
 
   const loadPlans = useCallback(async () => {
     const data = await api.get<{ plans: PlanListItem[] }>("/api/plans");
@@ -290,6 +293,14 @@ export function AppShell({ username }: { username: string }) {
                       <Dices className="h-4 w-4" />
                       Monte-Carlo-Simulation
                     </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowSensitivity(true)}
+                      className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-2"
+                    >
+                      <Tornado className="h-4 w-4" />
+                      Einflussfaktoren berechnen
+                    </button>
                   </>
                 )}
                 {diff && detail.base && (
@@ -337,10 +348,16 @@ export function AppShell({ username }: { username: string }) {
         <MonteCarloDialog
           plan={detail.plan}
           computed={detail.computed}
+          meta={detail.meta}
+          scenarios={activePlan?.scenarios ?? [detail.meta]}
           onClose={() => setShowMonteCarlo(false)}
         />
       )}
 
+      {showSensitivity && detail && (
+        <SensitivityDialog plan={detail.plan} onClose={() => setShowSensitivity(false)} />
+      )}
+
       {copyFrom && (
         <CopyScenarioDialog
           source={copyFrom}

src/components/FormField.tsx

@@ -51,6 +51,53 @@ export function NumberField({
   );
 }
 
+// Pflicht-Zahlenfeld, das wirklich LEER sein kann (NumberField erzwingt eine Zahl und haette
+// damit immer einen Default -- genau das soll bei Annahmen vermieden werden, siehe
+// SPEZIFIKATION 9.15/9.18: ein stiller Default wird nicht hinterfragt). Der Wert wird als
+// String gefuehrt; die Validierung liegt beim Aufrufer.
+export function RequiredNumberField({
+  label,
+  help,
+  value,
+  onChange,
+  step = 0.1,
+  suffix,
+  placeholder = "Pflicht",
+}: {
+  label: string;
+  help?: string;
+  value: string;
+  onChange: (value: string) => void;
+  step?: number;
+  suffix?: string;
+  placeholder?: string;
+}) {
+  const empty = value.trim() === "";
+  return (
+    <div>
+      <FieldLabel label={label} help={help} />
+      <div className="relative">
+        <input
+          type="number"
+          step={step}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${baseInputClass} ${suffix ? "pr-8" : ""} ${
+            empty ? "border-danger focus:border-danger" : ""
+          }`}
+        />
+        {suffix && (
+          <span className="pointer-events-none absolute inset-y-0 right-2.5 flex items-center text-xs text-faint">
+            {suffix}
+          </span>
+        )}
+      </div>
+      {empty && <p className="mt-1 text-[11px] text-danger">Pflichtfeld – bitte ausfüllen.</p>}
+    </div>
+  );
+}
+
 // Ganzzahliges Betragsfeld. Zeigt den Wert unfokussiert mit 1'000er-Trennzeichen an,
 // akzeptiert fokussiert beliebige ganze Zahlen (keine Nachkommastellen) und bietet
 // Pfeil-Buttons mit Klick-und-Halten-BESCHLEUNIGUNG (1 -> 10 -> 100 -> 1'000 -> ...).

src/components/MonteCarloDialog.tsx

@@ -1,26 +1,35 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { useEffect, useMemo, useState } from "react";
+import { Area, CartesianGrid, ComposedChart, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { Dices, X } from "lucide-react";
-import { NumberField, SelectField, MoneyField } from "@/components/FormField";
+import { NumberField, SelectField, MoneyField, RequiredNumberField } from "@/components/FormField";
 import { InfoBubble } from "@/components/InfoBubble";
+import { api } from "@/lib/api-client";
 import { formatChf } from "@/lib/format";
 import {
-  runMonteCarlo,
+  buildElementGroups,
   defaultVolatilityLevel,
-  RETURN_VOLATILITY_LEVELS,
+  floorFor,
+  paramsForScenario,
+  runMonteCarloMulti,
   INFLATION_VOLATILITY_LEVELS,
   RETURN_BEARING,
-  floorFor,
-  type ReturnVolatilityLevel,
+  RETURN_VOLATILITY_LEVELS,
+  type ElementGroup,
+  type ElementMcParams,
   type InflationVolatilityLevel,
-  type MonteCarloResult,
+  type ReturnVolatilityLevel,
+  type ScenarioMcResult,
+  type ScenarioRunInput,
 } from "@/lib/montecarlo";
 import { CATEGORY_LABELS } from "@/lib/elements";
-import type { PlanInput } from "@/lib/types";
+import type { PlanInput, ScenarioMeta } from "@/lib/types";
 import type { PlanComputed } from "@/lib/calculations";
 
+// Farben der Szenario-Serien -- wie im Vermoegensverlauf, damit die Zuordnung vertraut bleibt.
+const PALETTE = ["#4f46e5", "#0ea5e9", "#16a34a", "#d97706", "#dc2626", "#7c3aed"];
+
 const RETURN_LEVEL_OPTIONS: { value: ReturnVolatilityLevel; label: string }[] = [
   { value: "sehr_niedrig", label: "Sehr niedrig" },
   { value: "niedrig", label: "Niedrig" },
@@ -40,149 +49,186 @@ const RETURN_HELP =
 const INFLATION_HELP =
   "Wie stark die Inflation schwankt. Für die Schweiz ist sie historisch sehr stabil (Sehr niedrig ≈ 1 %). Höhere Stufen wären Hyperinflations-Annahmen.";
 
-// Pflicht-Zahlenfeld, das wirklich leer sein kann (NumberField erzwingt eine Zahl).
-function MeanField({
-  label,
-  help,
-  value,
-  onChange,
-}: {
-  label: string;
-  help: string;
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  const empty = value.trim() === "";
-  return (
-    <div>
-      <label className="mb-1 flex items-center text-xs font-medium text-muted">
-        {label}
-        <InfoBubble text={help} />
-      </label>
-      <input
-        type="number"
-        step={0.1}
-        value={value}
-        placeholder="Pflicht"
-        onChange={(e) => onChange(e.target.value)}
-        className={`w-full rounded-lg border bg-input px-2.5 py-1.5 text-sm text-fg shadow-sm focus:outline-none focus:ring-2 focus:ring-accent/25 ${
-          empty ? "border-danger" : "border-border focus:border-accent"
-        }`}
-      />
-      {empty && <p className="mt-1 text-[11px] text-danger">Pflichtfeld – bitte ausfüllen.</p>}
-    </div>
-  );
+interface ElementDraft {
+  mean: string;
+  level: ReturnVolatilityLevel;
+  manualSigma: string;
 }
 
-type ElementInput = { mean: string; level: ReturnVolatilityLevel; manualSigma: string };
+interface LoadedScenario {
+  id: string;
+  name: string;
+  plan: PlanInput;
+  computed: PlanComputed;
+}
 
-function returnSigma(el: ElementInput): number {
-  return el.level === "manuell"
-    ? Number(el.manualSigma) || 0
-    : RETURN_VOLATILITY_LEVELS[el.level];
+function returnSigma(el: ElementDraft): number {
+  return el.level === "manuell" ? Number(el.manualSigma) || 0 : RETURN_VOLATILITY_LEVELS[el.level];
 }
 function inflationSigma(level: InflationVolatilityLevel, manual: string): number {
   return level === "manuell" ? Number(manual) || 0 : INFLATION_VOLATILITY_LEVELS[level];
 }
 
+// Deterministische Planungslinie eines Szenarios (Alterspunkte = Phasengrenzen).
+function detPointsOf(plan: PlanInput, computed: PlanComputed): { age: number; det: number }[] {
+  const startAge = plan.persons.find((p) => p.role === "PERSON_A")?.age ?? plan.persons[0]?.age ?? 0;
+  if (computed.phases.length === 0) return [];
+  const pts = [{ age: startAge, det: computed.phases[0].startWealthNominal }];
+  let acc = 0;
+  for (const ph of computed.phases) {
+    acc += ph.durationYears;
+    pts.push({ age: startAge + acc, det: ph.endWealthNominal });
+  }
+  return pts;
+}
+
 export function MonteCarloDialog({
   plan,
   computed,
+  meta,
+  scenarios,
   onClose,
 }: {
   plan: PlanInput;
   computed: PlanComputed;
+  meta: ScenarioMeta;
+  // Alle Szenarien dieses Plans (auch nicht ausgewaehlte) -- sie werden geladen, damit sich
+  // die Herkunfts-Kette der Elemente auch ueber uebersprungene Zwischen-Szenarien aufloest.
+  scenarios: ScenarioMeta[];
   onClose: () => void;
 }) {
-  const returnElements = useMemo(
-    () => plan.elements.filter((e) => RETURN_BEARING.includes(e.category)),
-    [plan.elements]
-  );
+  const [loaded, setLoaded] = useState<Record<string, LoadedScenario>>(() => ({
+    [meta.id]: { id: meta.id, name: meta.name, plan, computed },
+  }));
+  const [loading, setLoading] = useState(scenarios.some((s) => s.id !== meta.id));
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [selectedIds, setSelectedIds] = useState<string[]>([meta.id]);
+  const [targets, setTargets] = useState<Record<string, number>>({
+    [meta.id]: Math.max(0, computed.nachlass),
+  });
 
   const [runs, setRuns] = useState(1000);
   const [inflMean, setInflMean] = useState("");
   const [inflLevel, setInflLevel] = useState<InflationVolatilityLevel>("sehr_niedrig");
   const [inflManual, setInflManual] = useState("1");
-  const [target, setTarget] = useState(Math.max(0, computed.nachlass));
-  const [els, setEls] = useState<Record<string, ElementInput>>(() =>
-    Object.fromEntries(
-      returnElements.map((e) => [e.id, { mean: "", level: defaultVolatilityLevel(e.category), manualSigma: "10" }])
-    )
-  );
+  const [drafts, setDrafts] = useState<Record<string, ElementDraft>>({});
 
   const [running, setRunning] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [result, setResult] = useState<MonteCarloResult | null>(null);
+  const [progress, setProgress] = useState({ index: 0, count: 1, fraction: 0 });
+  const [results, setResults] = useState<ScenarioMcResult[] | null>(null);
 
-  function setEl(id: string, patch: Partial<ElementInput>) {
-    setEls((prev) => ({ ...prev, [id]: { ...prev[id], ...patch } }));
+  const scenarioKey = scenarios.map((s) => s.id).join(",");
+
+  // Die uebrigen Szenarien einmalig nachladen. Ein Plan hat realistisch eine Handvoll
+  // Szenarien -- gegenueber tausenden Simulationslaeufen faellt das nicht ins Gewicht.
+  useEffect(() => {
+    const missing = scenarios.filter((s) => s.id !== meta.id);
+    if (missing.length === 0) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const entries = await Promise.all(
+          missing.map(async (s) => {
+            const data = await api.get<{ plan: PlanInput; computed: PlanComputed }>(`/api/scenarios/${s.id}`);
+            return [s.id, { id: s.id, name: s.name, plan: data.plan, computed: data.computed }] as const;
+          })
+        );
+        if (cancelled) return;
+        setLoaded((prev) => ({ ...prev, ...Object.fromEntries(entries) }));
+        setTargets((prev) => ({
+          ...prev,
+          ...Object.fromEntries(entries.map(([id, v]) => [id, Math.max(0, v.computed.nachlass)])),
+        }));
+      } catch (e) {
+        if (!cancelled) setLoadError(e instanceof Error ? e.message : "Szenarien konnten nicht geladen werden.");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scenarioKey, meta.id]);
+
+  const allLoaded = useMemo(
+    () => scenarios.map((s) => loaded[s.id]).filter((s): s is LoadedScenario => !!s),
+    [scenarios, loaded]
+  );
+
+  // Ein Parametersatz je LOGISCHEM Element (ueber die sourceElementId-Kette zusammengefasst).
+  const groups = useMemo(
+    () => buildElementGroups(allLoaded, selectedIds),
+    [allLoaded, selectedIds]
+  );
+
+  function draftFor(g: ElementGroup): ElementDraft {
+    return drafts[g.rootId] ?? { mean: "", level: defaultVolatilityLevel(g.category), manualSigma: "10" };
+  }
+  function setDraft(rootId: string, group: ElementGroup, patch: Partial<ElementDraft>) {
+    setDrafts((prev) => ({ ...prev, [rootId]: { ...draftFor(group), ...prev[rootId], ...patch } }));
   }
 
-  // Pflichtfelder: historische Inflation + je Element die historische Rendite muessen gesetzt sein.
+  function toggleScenario(id: string) {
+    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+    setResults(null);
+  }
+
+  const selected = selectedIds.map((id) => loaded[id]).filter((s): s is LoadedScenario => !!s);
+  const anyReturnBearing = selected.some((s) => s.plan.elements.some((e) => RETURN_BEARING.includes(e.category)));
+
+  // Pflichtfelder: historische Inflation + je logischem Element die historische Rendite.
   const missing =
-    inflMean.trim() === "" || returnElements.some((e) => (els[e.id]?.mean ?? "").trim() === "");
+    inflMean.trim() === "" || groups.some((g) => draftFor(g).mean.trim() === "");
+  const canRun = !missing && selected.length > 0 && anyReturnBearing && !loading;
 
-  // Deterministische Endwert-Linie fuer den Vergleich im Faecher.
-  const detPoints = useMemo(() => {
-    const startAge = plan.persons.find((p) => p.role === "PERSON_A")?.age ?? plan.persons[0]?.age ?? 0;
-    const pts: { age: number; det: number }[] = [];
-    if (computed.phases.length > 0) {
-      pts.push({ age: startAge, det: computed.phases[0].startWealthNominal });
-      let acc = 0;
-      for (const ph of computed.phases) {
-        acc += ph.durationYears;
-        pts.push({ age: startAge + acc, det: ph.endWealthNominal });
-      }
-    }
-    return pts;
-  }, [computed.phases, plan.persons]);
-
-  const estSeconds = Math.max(1, Math.round(runs / 6000));
+  const estSeconds = Math.max(1, Math.round((runs * Math.max(1, selected.length)) / 6000));
 
   async function run() {
     setRunning(true);
-    setResult(null);
-    setProgress(0);
+    setResults(null);
+    setProgress({ index: 0, count: selected.length, fraction: 0 });
     try {
-      const elements = Object.fromEntries(
-        returnElements.map((e) => {
-          const ei = els[e.id];
-          return [e.id, { mean: Number(ei.mean) || 0, sigma: returnSigma(ei), floor: floorFor(e.category) }];
+      const paramByRoot: Record<string, ElementMcParams> = Object.fromEntries(
+        groups.map((g) => {
+          const d = draftFor(g);
+          return [g.rootId, { mean: Number(d.mean) || 0, sigma: returnSigma(d), floor: floorFor(g.category) }];
         })
       );
-      const res = await runMonteCarlo(
-        plan,
+      // EIN Seed fuer alle Szenarien: strukturgleiche Szenarien teilen damit dieselben
+      // Marktpfade, und die Unterschiede sind strukturell statt zufaellig.
+      const seed = (Math.random() * 2 ** 32) >>> 0;
+      const runInputs: ScenarioRunInput[] = selected.map((s) => ({
+        scenarioId: s.id,
+        name: s.name,
+        plan: s.plan,
+        target: targets[s.id] ?? 0,
+      }));
+      const res = await runMonteCarloMulti(
+        runInputs,
         {
           runs,
           inflationMean: Number(inflMean) || 0,
           inflationSigma: inflationSigma(inflLevel, inflManual),
-          elements,
-          target,
+          seed,
+          elementsFor: (p) => paramsForScenario(p, groups, paramByRoot),
         },
-        (done, total) => setProgress(done / total)
+        (index, count, fraction) => setProgress({ index, count, fraction })
       );
-      setResult(res);
+      setResults(res);
     } finally {
       setRunning(false);
     }
   }
 
-  const chartData = useMemo(() => {
-    if (!result) return [];
-    return result.bands.map((b) => ({
-      age: b.age,
-      // Range-Flaeche als [unten, oben]-Tupel -- robust auch bei negativem p10 (Ruin-Faelle).
-      band: [b.p10, b.p90] as [number, number],
-      median: b.p50,
-      det: detPoints.find((d) => d.age === b.age)?.det ?? null,
-    }));
-  }, [result, detPoints]);
+  const overallProgress =
+    progress.count > 0 ? (progress.index + progress.fraction) / progress.count : 0;
 
   return (
     <div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8" onClick={onClose}>
       <div
         onClick={(e) => e.stopPropagation()}
-        className="flex w-full max-w-3xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
+        className="flex w-full max-w-4xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
       >
         <div className="flex items-center justify-between">
           <h2 className="flex items-center gap-2 text-base font-semibold text-fg">
@@ -206,6 +252,12 @@ export function MonteCarloDialog({
             <strong className="text-fg"> Ergebnis:</strong> die Wahrscheinlichkeit, dass das Geld reicht bzw. dein Zielbetrag
             erreicht wird, plus ein Fächer vom pessimistischen bis zum optimistischen Fall.
           </p>
+          <p className="mb-2">
+            <strong className="text-fg">Mehrere Szenarien:</strong> Du kannst unten mehrere Szenarien dieses Plans
+            gleichzeitig rechnen. Die historischen Annahmen werden dabei nur <strong className="text-fg">einmal</strong> erfasst
+            und für alle Szenarien verwendet – sonst würdest du deine Eingaben vergleichen statt der Szenarien. Alle
+            Szenarien laufen zudem mit demselben Zufalls-Seed, damit Unterschiede nicht blosses Rauschen sind.
+          </p>
           <p>
             <strong className="text-fg">Verteilung:</strong> Renditen werden mit «fetten Rändern» gezogen (Extremcrashs so
             häufig wie in der Realität, nicht wie in der Glockenkurve), und alle riskanten Anlagen fallen in einem
@@ -214,11 +266,60 @@ export function MonteCarloDialog({
           </p>
         </div>
 
+        {/* Szenario-Auswahl inkl. Zielbetrag je Szenario */}
+        <div>
+          <div className="mb-2 flex items-center text-xs font-semibold uppercase tracking-wide text-faint">
+            Szenarien
+            <InfoBubble text="Wähle, für welche Szenarien dieses Plans gerechnet werden soll. Der Zielbetrag ist je Szenario eigen und mit dem jeweils geplanten Endvermögen vorbelegt: So misst die Erfolgswahrscheinlichkeit, wie oft jedes Szenario sein eigenes Versprechen hält. Ein pessimistisch geplantes Szenario hat einen tieferen Zielbetrag und damit eine höhere Erfolgswahrscheinlichkeit." />
+          </div>
+          {loading && <p className="text-xs text-muted">Szenarien werden geladen…</p>}
+          {loadError && <p className="text-xs text-danger">{loadError}</p>}
+          <div className="flex flex-col gap-2">
+            {scenarios.map((s) => {
+              const isLoaded = !!loaded[s.id];
+              const checked = selectedIds.includes(s.id);
+              return (
+                <div
+                  key={s.id}
+                  className={`flex flex-wrap items-center gap-3 rounded-xl border p-3 ${
+                    checked ? "border-accent bg-accent-soft/30" : "border-border bg-surface-2"
+                  }`}
+                >
+                  <label className="flex min-w-0 flex-1 items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      disabled={!isLoaded}
+                      onChange={() => toggleScenario(s.id)}
+                    />
+                    <span className="truncate font-medium text-fg">{s.name}</span>
+                    {s.isBase && <span className="rounded bg-surface px-1.5 text-[10px] text-muted">Basis</span>}
+                    {!isLoaded && <span className="text-[11px] text-faint">lädt…</span>}
+                  </label>
+                  {checked && (
+                    <div className="w-56">
+                      <MoneyField
+                        label="Zielbetrag (Endvermögen)"
+                        help="Vorbelegt mit dem geplanten Endvermögen DIESES Szenarios. Die Erfolgswahrscheinlichkeit misst, wie oft dieser Betrag erreicht wird."
+                        value={targets[s.id] ?? 0}
+                        onChange={(v) => setTargets((prev) => ({ ...prev, [s.id]: v }))}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          {selected.length === 0 && (
+            <p className="mt-2 text-xs text-danger">Bitte mindestens ein Szenario auswählen.</p>
+          )}
+        </div>
+
         {/* Inflation */}
         <div>
           <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-faint">Inflation (Plan-Ebene)</div>
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-            <MeanField
+            <RequiredNumberField
               label="Ø Inflation letzte 20 J. (%)"
               help={`Der Mittelpunkt, um den gewürfelt wird. Deine Planung nutzt aktuell ${plan.inflationRateDefault} %. CH langfristig ~2 %.`}
               value={inflMean}
@@ -239,45 +340,61 @@ export function MonteCarloDialog({
           </div>
         </div>
 
-        {/* Elemente */}
+        {/* Renditetragende Elemente -- ein Satz je logischem Element */}
         <div>
-          <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-faint">Renditetragende Elemente</div>
-          {returnElements.length === 0 && (
+          <div className="mb-2 flex items-center text-xs font-semibold uppercase tracking-wide text-faint">
+            Renditetragende Elemente
+            {selected.length > 1 && (
+              <InfoBubble text="Ein Element, das in mehreren Szenarien vorkommt, erscheint hier nur einmal – erkannt über seine Herkunft beim Kopieren des Szenarios, nicht über den Namen. Elemente, die es nur in einem Szenario gibt, erscheinen mit einem entsprechenden Hinweis." />
+            )}
+          </div>
+          {groups.length === 0 && (
             <p className="rounded-lg border border-dashed border-border bg-surface-2 p-3 text-xs text-muted">
-              Dieser Plan hat keine renditetragenden Elemente (PK, 3a, Sonstiges Vermögen, Immobilie).
+              Die ausgewählten Szenarien haben keine renditetragenden Elemente (PK, 3a, Sonstiges Vermögen, Immobilie).
             </p>
           )}
           <div className="flex flex-col gap-3">
-            {returnElements.map((e) => {
-              const ei = els[e.id];
+            {groups.map((g) => {
+              const d = draftFor(g);
+              const partial = g.scenarioIds.length < selected.length;
               return (
-                <div key={e.id} className="rounded-xl border border-border bg-surface-2 p-3">
-                  <div className="mb-2 flex items-center gap-2 text-sm">
-                    <span className="font-semibold text-fg">{e.name}</span>
-                    <span className="text-xs text-faint">{CATEGORY_LABELS[e.category]}</span>
+                <div key={g.rootId} className="rounded-xl border border-border bg-surface-2 p-3">
+                  <div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
+                    <span className="font-semibold text-fg">{g.name}</span>
+                    <span className="text-xs text-faint">{CATEGORY_LABELS[g.category]}</span>
+                    {partial && (
+                      <span className="rounded bg-surface px-1.5 py-0.5 text-[10px] text-muted">
+                        nur in: {g.scenarioIds.map((id) => loaded[id]?.name ?? id).join(", ")}
+                      </span>
+                    )}
                   </div>
                   <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-                    <MeanField
+                    <RequiredNumberField
                       label="Ø Rendite letzte 20 J. (%)"
                       help="Der Mittelpunkt, um den gewürfelt wird – die realistische Rendite dieser Anlage, nicht deine (evtl. optimistische) Planannahme."
-                      value={ei?.mean ?? ""}
-                      onChange={(v) => setEl(e.id, { mean: v })}
+                      value={d.mean}
+                      onChange={(v) => setDraft(g.rootId, g, { mean: v })}
                     />
                     <SelectField
                       label="Streuung"
                       help={RETURN_HELP}
-                      value={ei.level}
-                      onChange={(v: ReturnVolatilityLevel) => setEl(e.id, { level: v })}
+                      value={d.level}
+                      onChange={(v: ReturnVolatilityLevel) => setDraft(g.rootId, g, { level: v })}
                       options={RETURN_LEVEL_OPTIONS}
                     />
-                    {ei.level === "manuell" ? (
-                      <NumberField label="Standardabw. (%)" step={0.5} value={Number(ei.manualSigma) || 0} onChange={(v) => setEl(e.id, { manualSigma: String(v) })} />
+                    {d.level === "manuell" ? (
+                      <NumberField
+                        label="Standardabw. (%)"
+                        step={0.5}
+                        value={Number(d.manualSigma) || 0}
+                        onChange={(v) => setDraft(g.rootId, g, { manualSigma: String(v) })}
+                      />
                     ) : (
-                      <ReadOnlySigma value={RETURN_VOLATILITY_LEVELS[ei.level]} />
+                      <ReadOnlySigma value={RETURN_VOLATILITY_LEVELS[d.level]} />
                     )}
                   </div>
-                  {(e.category === "PENSION_FUND" || e.category === "PILLAR_3A") && (
-                    <p className="mt-2 text-[11px] text-faint">Boden 0 %: {CATEGORY_LABELS[e.category]} schreibt keine negative Rendite gut.</p>
+                  {(g.category === "PENSION_FUND" || g.category === "PILLAR_3A") && (
+                    <p className="mt-2 text-[11px] text-faint">Boden 0 %: {CATEGORY_LABELS[g.category]} schreibt keine negative Rendite gut.</p>
                   )}
                 </div>
               );
@@ -298,14 +415,10 @@ export function MonteCarloDialog({
                 { value: "10000", label: "10'000 (genau)" },
               ]}
             />
-            <p className="mt-1 text-[11px] text-faint">geschätzt ~{estSeconds} s</p>
+            <p className="mt-1 text-[11px] text-faint">
+              {selected.length > 1 ? `${selected.length} Szenarien · ` : ""}geschätzt ~{estSeconds} s
+            </p>
           </div>
-          <MoneyField
-            label="Zielbetrag (Endvermögen)"
-            help="Die Erfolgswahrscheinlichkeit misst, wie oft das Endvermögen mindestens diesen Betrag erreicht. Vorbelegt mit deinem geplanten Nachlass."
-            value={target}
-            onChange={setTarget}
-          />
         </div>
 
         {missing && <p className="text-xs text-danger">Bitte alle Pflichtfelder (Ø-Werte) ausfüllen, um die Simulation zu starten.</p>}
@@ -313,20 +426,31 @@ export function MonteCarloDialog({
         <div className="flex items-center gap-3">
           <button
             type="button"
-            disabled={missing || running || returnElements.length === 0}
+            disabled={!canRun || running}
             onClick={run}
             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"
           >
-            {running ? `Berechne… ${Math.round(progress * 100)} %` : "Berechnung jetzt durchführen"}
+            {running
+              ? `Berechne… ${progress.count > 1 ? `Szenario ${progress.index + 1}/${progress.count} · ` : ""}${Math.round(overallProgress * 100)} %`
+              : "Berechnung jetzt durchführen"}
           </button>
           {running && (
             <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-2">
-              <div className="h-full bg-accent transition-all" style={{ width: `${progress * 100}%` }} />
+              <div className="h-full bg-accent transition-all" style={{ width: `${overallProgress * 100}%` }} />
             </div>
           )}
         </div>
 
-        {result && <MonteCarloResults result={result} target={target} chartData={chartData} />}
+        {results && results.length > 0 && (
+          <MonteCarloResults
+            results={results}
+            detPoints={
+              results.length === 1 && loaded[results[0].scenarioId]
+                ? detPointsOf(loaded[results[0].scenarioId].plan, loaded[results[0].scenarioId].computed)
+                : []
+            }
+          />
+        )}
       </div>
     </div>
   );
@@ -347,74 +471,161 @@ function ReadOnlySigma({ value }: { value: number }) {
 }
 
 function MonteCarloResults({
-  result,
-  target,
-  chartData,
+  results,
+  detPoints,
 }: {
-  result: MonteCarloResult;
-  target: number;
-  chartData: { age: number; band: [number, number]; median: number; det: number | null }[];
+  results: ScenarioMcResult[];
+  detPoints: { age: number; det: number }[];
 }) {
+  const single = results.length === 1;
+
+  // Einzelnes Szenario: der gewohnte Faecher (Band + Median + Planungslinie).
+  const singleData = useMemo(() => {
+    if (!single) return [];
+    return results[0].bands.map((b) => ({
+      age: b.age,
+      band: [b.p10, b.p90] as [number, number],
+      median: b.p50,
+      det: detPoints.find((d) => d.age === b.age)?.det ?? null,
+    }));
+  }, [single, results, detPoints]);
+
+  // Mehrere Szenarien: nur die Median-Linien -- uebereinandergelegte Baender waeren Farbbrei.
+  const compareData = useMemo(() => {
+    if (single) return [];
+    const ages = Array.from(new Set(results.flatMap((r) => r.bands.map((b) => b.age)))).sort((a, b) => a - b);
+    return ages.map((age) => {
+      const row: Record<string, number | null> = { age };
+      for (const r of results) row[r.scenarioId] = r.bands.find((b) => b.age === age)?.p50 ?? null;
+      return row;
+    });
+  }, [single, results]);
+
   return (
     <div className="flex flex-col gap-4 border-t border-border pt-4">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <Stat label="Erfolgswahrscheinlichkeit" value={`${Math.round(result.successProbability * 100)} %`} help={`Anteil der Läufe mit Endvermögen ≥ ${formatChf(target)}.`} good />
-        <Stat label="Ruinwahrscheinlichkeit" value={`${Math.round(result.ruinProbability * 100)} %`} help="Anteil der Läufe, in denen das Vermögen vor Planende unter 0 fällt." danger />
-        <Stat label="Läufe" value={result.runs.toLocaleString("de-CH")} />
-      </div>
-
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 text-sm">
-        <Band label="Pessimistisch (10 %)" value={result.finalWealthP10} />
-        <Band label="Median" value={result.finalWealthMedian} />
-        <Band label="Optimistisch (90 %)" value={result.finalWealthP90} />
+      {/* Vergleichstabelle -- das eigentliche Vergleichsinstrument */}
+      <div>
+        <div className="mb-1 flex items-center text-xs font-semibold text-fg">
+          Ergebnis je Szenario
+          {!single && (
+            <InfoBubble text="Die Erfolgswahrscheinlichkeit bezieht sich je Szenario auf dessen EIGENEN Zielbetrag (Spalte Ziel) – sie misst, wie oft ein Szenario sein eigenes Versprechen hält. Die Ruinwahrscheinlichkeit ist zielbetrags-unabhängig und damit direkt vergleichbar." />
+          )}
+        </div>
+        <div className="overflow-x-auto rounded-xl border border-border">
+          <table className="w-full border-collapse text-sm">
+            <thead>
+              <tr className="bg-surface-2 text-xs text-faint">
+                <th className="px-3 py-2 text-left font-semibold">Szenario</th>
+                <th className="px-3 py-2 text-right font-semibold">Ziel</th>
+                <th className="px-3 py-2 text-right font-semibold">Erfolg</th>
+                <th className="px-3 py-2 text-right font-semibold">Ruin</th>
+                <th className="px-3 py-2 text-right font-semibold">Pessimistisch (10 %)</th>
+                <th className="px-3 py-2 text-right font-semibold">Median</th>
+                <th className="px-3 py-2 text-right font-semibold">Optimistisch (90 %)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {results.map((r, i) => (
+                <tr key={r.scenarioId} className="border-t border-border">
+                  <td className="px-3 py-2">
+                    <span className="flex items-center gap-2 font-medium text-fg">
+                      {!single && (
+                        <span
+                          className="inline-block h-2 w-2 shrink-0 rounded-full"
+                          style={{ backgroundColor: PALETTE[i % PALETTE.length] }}
+                        />
+                      )}
+                      {r.name}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-right text-muted">{formatChf(r.target)}</td>
+                  <td className="px-3 py-2 text-right font-semibold text-success">
+                    {Math.round(r.successProbability * 100)} %
+                  </td>
+                  <td className="px-3 py-2 text-right font-semibold text-danger">
+                    {Math.round(r.ruinProbability * 100)} %
+                  </td>
+                  <td className="px-3 py-2 text-right text-muted">{formatChf(r.finalWealthP10)}</td>
+                  <td className="px-3 py-2 text-right text-fg">{formatChf(r.finalWealthMedian)}</td>
+                  <td className="px-3 py-2 text-right text-muted">{formatChf(r.finalWealthP90)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="mt-1 text-[11px] text-faint">
+          {results[0].runs.toLocaleString("de-CH")} Läufe je Szenario
+          {!single && " · gemeinsamer Zufalls-Seed"}
+        </p>
       </div>
 
       <div>
-        <div className="mb-1 text-xs font-semibold text-fg">Vermögensfächer nach Alter (nominal)</div>
+        <div className="mb-1 text-xs font-semibold text-fg">
+          {single ? "Vermögensfächer nach Alter (nominal)" : "Vermögensverlauf im Median nach Alter (nominal)"}
+        </div>
         <p className="mb-2 text-[11px] text-muted">
-          Das Band reicht vom pessimistischen (10 %) bis zum optimistischen (90 %) Fall, die dunkle Linie ist der Median.
-          Die gestrichelte Linie ist deine deterministische Planung – sie liegt meist leicht über dem Median (Schwankung
-          frisst Rendite).
+          {single ? (
+            <>
+              Das Band reicht vom pessimistischen (10 %) bis zum optimistischen (90 %) Fall, die dunkle Linie ist der
+              Median. Die gestrichelte Linie ist deine deterministische Planung – sie liegt meist leicht über dem Median
+              (Schwankung frisst Rendite).
+            </>
+          ) : (
+            <>
+              Je Szenario die mittlere Entwicklung (Median). Die vollständigen 10–90 %-Bänder werden hier bewusst nicht
+              übereinandergelegt – wähle ein einzelnes Szenario, um den Fächer zu sehen.
+            </>
+          )}
         </p>
         <div className="h-72 w-full">
           <ResponsiveContainer width="100%" height="100%">
-            <ComposedChart data={chartData} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
-              <XAxis dataKey="age" tick={{ fontSize: 11 }} tickFormatter={(v) => `${v} J.`} />
-              <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)} />
-              <Tooltip
-                formatter={(v, name) => [typeof v === "number" ? formatChf(v) : v, name]}
-                labelFormatter={(v) => `Alter ${v}`}
-              />
-              <Legend wrapperStyle={{ fontSize: 12 }} />
-              <Area dataKey="band" name="10–90 % Band" stroke="none" fill="var(--accent)" fillOpacity={0.16} isAnimationActive={false} />
-              <Line dataKey="median" name="Median" stroke="var(--accent)" strokeWidth={2} dot={false} isAnimationActive={false} />
-              <Line dataKey="det" name="Planung (deterministisch)" stroke="var(--muted)" strokeWidth={1.5} strokeDasharray="5 3" dot={false} connectNulls isAnimationActive={false} />
-            </ComposedChart>
+            {single ? (
+              <ComposedChart data={singleData} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis dataKey="age" tick={{ fontSize: 11 }} tickFormatter={(v) => `${v} J.`} />
+                <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)} />
+                <Tooltip
+                  formatter={(v, name) => [typeof v === "number" ? formatChf(v) : v, name]}
+                  labelFormatter={(v) => `Alter ${v}`}
+                />
+                <Legend wrapperStyle={{ fontSize: 12 }} />
+                <Area dataKey="band" name="10–90 % Band" stroke="none" fill="var(--accent)" fillOpacity={0.16} isAnimationActive={false} />
+                <Line dataKey="median" name="Median" stroke="var(--accent)" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line dataKey="det" name="Planung (deterministisch)" stroke="var(--muted)" strokeWidth={1.5} strokeDasharray="5 3" dot={false} connectNulls isAnimationActive={false} />
+              </ComposedChart>
+            ) : (
+              <LineChart data={compareData} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                <XAxis
+                  dataKey="age"
+                  type="number"
+                  domain={["dataMin", "dataMax"]}
+                  tick={{ fontSize: 11 }}
+                  tickFormatter={(v) => `${v} J.`}
+                />
+                <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)} />
+                <Tooltip
+                  formatter={(v, name) => [typeof v === "number" ? formatChf(v) : v, name]}
+                  labelFormatter={(v) => `Alter ${v}`}
+                />
+                <Legend wrapperStyle={{ fontSize: 12 }} />
+                {results.map((r, i) => (
+                  <Line
+                    key={r.scenarioId}
+                    dataKey={r.scenarioId}
+                    name={r.name}
+                    stroke={PALETTE[i % PALETTE.length]}
+                    strokeWidth={2}
+                    dot={false}
+                    connectNulls
+                    isAnimationActive={false}
+                  />
+                ))}
+              </LineChart>
+            )}
           </ResponsiveContainer>
         </div>
       </div>
     </div>
   );
 }
-
-function Stat({ label, value, help, good, danger }: { label: string; value: string; help?: string; good?: boolean; danger?: boolean }) {
-  return (
-    <div className="rounded-xl border border-border bg-surface p-4 shadow-sm">
-      <div className="flex items-center text-xs text-muted">
-        {label}
-        {help && <InfoBubble text={help} />}
-      </div>
-      <div className={`mt-1 text-2xl font-semibold ${good ? "text-success" : danger ? "text-danger" : "text-fg"}`}>{value}</div>
-    </div>
-  );
-}
-
-function Band({ label, value }: { label: string; value: number }) {
-  return (
-    <div className="rounded-lg border border-border bg-surface-2 px-3 py-2">
-      <div className="text-[11px] text-muted">{label}</div>
-      <div className="font-semibold text-fg">{formatChf(value)}</div>
-    </div>
-  );
-}

src/components/SensitivityDialog.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Tornado, X } from "lucide-react";
+import { RequiredNumberField, SelectField } from "@/components/FormField";
+import { InfoBubble } from "@/components/InfoBubble";
+import { formatChf } from "@/lib/format";
+import {
+  computeTornado,
+  DRIVERS,
+  UNIT_SUFFIX,
+  type DriverDef,
+  type DriverId,
+  type TornadoMetric,
+  type TornadoResult,
+} from "@/lib/sensitivity";
+import type { PlanInput } from "@/lib/types";
+
+interface RangeDraft {
+  checked: boolean;
+  low: string;
+  high: string;
+}
+
+// Bewusst OHNE Defaults: Die Balkenlaenge haengt direkt von der eingegebenen Bandbreite ab.
+// Ein stiller Default wuerde nicht hinterfragt und das Ranking waere dann eine Aussage ueber
+// unsere Vorgabe statt ueber den Plan (gleiche Begruendung wie bei den Monte-Carlo-Mittelwerten).
+const emptyDraft: RangeDraft = { checked: false, low: "", high: "" };
+
+function formatRange(low: number, high: number, unit: DriverDef["unit"]): string {
+  const suffix = UNIT_SUFFIX[unit];
+  const sign = (v: number) => (unit === "abs_pct" ? `${v}` : v > 0 ? `+${v}` : `${v}`);
+  return `${sign(low)} ${suffix} → ${sign(high)} ${suffix}`;
+}
+
+export function SensitivityDialog({ plan, onClose }: { plan: PlanInput; onClose: () => void }) {
+  const available = useMemo(() => DRIVERS.filter((d) => d.applies(plan)), [plan]);
+
+  const [metric, setMetric] = useState<TornadoMetric>("real");
+  const [drafts, setDrafts] = useState<Record<string, RangeDraft>>({});
+  const [result, setResult] = useState<TornadoResult | null>(null);
+
+  function draftFor(id: DriverId): RangeDraft {
+    return drafts[id] ?? emptyDraft;
+  }
+  function setDraft(id: DriverId, patch: Partial<RangeDraft>) {
+    setDrafts((prev) => ({ ...prev, [id]: { ...draftFor(id), ...patch } }));
+    setResult(null);
+  }
+
+  const checked = available.filter((d) => draftFor(d.id).checked);
+  const incomplete = checked.filter((d) => {
+    const dr = draftFor(d.id);
+    return dr.low.trim() === "" || dr.high.trim() === "";
+  });
+  const degenerate = checked.filter((d) => {
+    const dr = draftFor(d.id);
+    return dr.low.trim() !== "" && dr.high.trim() !== "" && Number(dr.low) === Number(dr.high);
+  });
+
+  // Mindestens zwei Treiber: Ein Tornado ist eine RANGLISTE. Mit einem einzigen Balken gibt
+  // es nichts zu ordnen und die Grafik wuerde eine Aussage suggerieren, die sie nicht hat.
+  const canRun =
+    checked.length >= 2 && incomplete.length === 0 && degenerate.length === 0 && plan.phases.length > 0;
+
+  function run() {
+    setResult(
+      computeTornado(
+        plan,
+        metric,
+        checked.map((d) => {
+          const dr = draftFor(d.id);
+          return { id: d.id, low: Number(dr.low), high: Number(dr.high) };
+        })
+      )
+    );
+  }
+
+  const chartData = useMemo(() => {
+    if (!result) return [];
+    // Von unten nach oben gezeichnet -> fuer die Trichterform (groesster Balken zuoberst)
+    // muss die Reihenfolge umgekehrt in die Grafik.
+    return [...result.bars].reverse().map((b) => ({
+      label: b.shortLabel,
+      range: [b.min, b.max] as [number, number],
+      swing: b.swing,
+    }));
+  }, [result]);
+
+  return (
+    <div className="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8" onClick={onClose}>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex w-full max-w-4xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
+      >
+        <div className="flex items-center justify-between">
+          <h2 className="flex items-center gap-2 text-base font-semibold text-fg">
+            <Tornado className="h-5 w-5 text-accent" /> Einflussfaktoren (Sensitivitätsanalyse)
+          </h2>
+          <button type="button" onClick={onClose} aria-label="Schliessen" className="rounded-md p-1 text-faint hover:bg-surface-2">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Erklaerung */}
+        <div className="rounded-xl border border-border bg-surface-2 p-4 text-xs leading-relaxed text-muted">
+          <p className="mb-2">
+            <strong className="text-fg">Was ist das?</strong> Nicht «wie viel Geld habe ich am Schluss», sondern
+            <strong className="text-fg"> «welche meiner Annahmen entscheidet überhaupt über das Ergebnis»</strong>. Bei
+            manchen Annahmen ist es egal, ob du sie exakt triffst – bei anderen kippt eine kleine Abweichung den ganzen Plan.
+          </p>
+          <p className="mb-2">
+            <strong className="text-fg">Wie es funktioniert:</strong> Zuerst wird dein Plan wie erfasst gerechnet
+            (Basisfall). Dann wird <em>ein einziger</em> Parameter auf seinen tiefen und seinen hohen Wert gesetzt, alle
+            übrigen bleiben unverändert – das ergibt zwei Ergebnisse. Das für jeden Parameter wiederholt und nach
+            <strong className="text-fg"> Spannweite</strong> sortiert ergibt die Trichterform: längster Balken zuoberst.
+          </p>
+          <p className="mb-2">
+            <strong className="text-fg">Was du davon hast:</strong> Die Reihenfolge ist die Botschaft. Bei den obersten
+            Balken lohnt sich Genauigkeit (dort exakte Zahlen beschaffen) – und sie sind meist auch die, die du selbst
+            steuern kannst. Bei den untersten darfst du grob schätzen.
+          </p>
+          <p>
+            <strong className="text-fg">Zwei ehrliche Grenzen.</strong> Erstens hängt die Balkenlänge von den
+            Bandbreiten ab, die du unten eingibst – wähle sie so, dass sie <em>ähnlich plausibel</em> sind, nicht ähnlich
+            gross. Zweitens wird immer nur ein Parameter auf einmal variiert; <em>Kombinationen</em> (schlechte Renditen
+            <em> und</em> hohe Ausgaben) treffen härter als die Summe der Einzelbalken – dafür ist die
+            Monte-Carlo-Simulation zuständig.
+          </p>
+        </div>
+
+        {/* Zielgroesse */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <SelectField
+            label="Zielgrösse"
+            help="Woran die Wirkung gemessen wird: das Endvermögen der letzten Lebensphase. «Real» ist kaufkraftbereinigt auf den Planbeginn und damit die ehrlichere Grösse."
+            value={metric}
+            onChange={(v: TornadoMetric) => {
+              setMetric(v);
+              setResult(null);
+            }}
+            options={[
+              { value: "real", label: "Endvermögen real (kaufkraftbereinigt)" },
+              { value: "nominal", label: "Endvermögen nominal" },
+            ]}
+          />
+        </div>
+
+        {/* Parameter */}
+        <div>
+          <div className="mb-2 flex items-center text-xs font-semibold uppercase tracking-wide text-faint">
+            Parameter und Bandbreiten
+            <InfoBubble text="Hake an, welche Parameter in die Analyse einfliessen sollen, und gib je Parameter eine tiefe und eine hohe Ausprägung an. Es gibt bewusst keine Vorgabewerte: Die Balkenlänge hängt direkt von diesen Bandbreiten ab, deshalb sollst du sie bewusst setzen. Die Hilfe je Parameter nennt plausible Grössenordnungen." />
+          </div>
+          <div className="flex flex-col gap-2">
+            {available.map((d) => {
+              const dr = draftFor(d.id);
+              const suffix = UNIT_SUFFIX[d.unit];
+              const unitHint =
+                d.unit === "abs_pct"
+                  ? "absoluter Wert in %"
+                  : d.unit === "delta_pp"
+                    ? "Verschiebung in Prozentpunkten"
+                    : d.unit === "rel_pct"
+                      ? "Abweichung vom Planwert in %"
+                      : "Verschiebung in Jahren";
+              return (
+                <div
+                  key={d.id}
+                  className={`rounded-xl border p-3 ${dr.checked ? "border-accent bg-accent-soft/30" : "border-border bg-surface-2"}`}
+                >
+                  <label className="flex items-center gap-2 text-sm">
+                    <input type="checkbox" checked={dr.checked} onChange={(e) => setDraft(d.id, { checked: e.target.checked })} />
+                    <span className="font-medium text-fg">{d.label}</span>
+                    <InfoBubble text={d.help} />
+                    <span className="text-[11px] text-faint">({unitHint})</span>
+                  </label>
+                  {dr.checked && (
+                    <div className="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-3">
+                      <RequiredNumberField
+                        label="tief"
+                        value={dr.low}
+                        suffix={suffix}
+                        step={d.unit === "delta_years" ? 1 : 0.1}
+                        onChange={(v) => setDraft(d.id, { low: v })}
+                      />
+                      <RequiredNumberField
+                        label="hoch"
+                        value={dr.high}
+                        suffix={suffix}
+                        step={d.unit === "delta_years" ? 1 : 0.1}
+                        onChange={(v) => setDraft(d.id, { high: v })}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          <p className="mt-2 text-[11px] text-faint">
+            Das <strong>Pensionsalter</strong> ist bewusst nicht enthalten: Es lässt sich nicht sinnvoll variieren, ohne
+            gleichzeitig die Phasengrenzen mitzuverschieben – sonst arbeitet die Person im Modell unverändert weiter
+            bzw. der Pensions-Übergang entfällt ganz. Der verwandte Treiber «Lebensdauer» ist dagegen sauber abgebildet.
+          </p>
+        </div>
+
+        {checked.length < 2 && (
+          <p className="text-xs text-danger">Bitte mindestens zwei Parameter auswählen – der Tornado ist eine Rangliste.</p>
+        )}
+        {incomplete.length > 0 && (
+          <p className="text-xs text-danger">Bitte für jeden ausgewählten Parameter eine tiefe und eine hohe Ausprägung angeben.</p>
+        )}
+        {degenerate.length > 0 && (
+          <p className="text-xs text-danger">
+            Tiefer und hoher Wert sind identisch bei: {degenerate.map((d) => d.label).join(", ")}. Damit gibt es keine Spannweite.
+          </p>
+        )}
+
+        <div>
+          <button
+            type="button"
+            disabled={!canRun}
+            onClick={run}
+            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"
+          >
+            Einflussfaktoren berechnen
+          </button>
+        </div>
+
+        {result && <TornadoResults result={result} metric={metric} chartData={chartData} />}
+      </div>
+    </div>
+  );
+}
+
+function TornadoResults({
+  result,
+  metric,
+  chartData,
+}: {
+  result: TornadoResult;
+  metric: TornadoMetric;
+  chartData: { label: string; range: [number, number]; swing: number }[];
+}) {
+  const metricLabel = metric === "real" ? "Endvermögen real" : "Endvermögen nominal";
+  return (
+    <div className="flex flex-col gap-4 border-t border-border pt-4">
+      <div className="rounded-xl border border-border bg-surface-2 px-4 py-3">
+        <div className="text-xs text-muted">Basisfall · {metricLabel}</div>
+        <div className="mt-0.5 text-xl font-semibold text-accent">{formatChf(result.base)} CHF</div>
+      </div>
+
+      <div>
+        <div className="mb-1 text-xs font-semibold text-fg">Einflussfaktoren nach Spannweite</div>
+        <p className="mb-2 text-[11px] text-muted">
+          Jeder Balken zeigt, zwischen welchen Werten das {metricLabel} schwankt, wenn nur dieser eine Parameter
+          innerhalb seiner Bandbreite variiert. Die senkrechte Linie ist der Basisfall.
+        </p>
+        <div className="w-full" style={{ height: Math.max(200, chartData.length * 46 + 60) }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData} layout="vertical" margin={{ top: 8, right: 24, left: 8, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+              <XAxis
+                type="number"
+                tick={{ fontSize: 11 }}
+                tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)}
+              />
+              <YAxis type="category" dataKey="label" tick={{ fontSize: 11 }} width={130} />
+              <Tooltip
+                formatter={(v) =>
+                  Array.isArray(v)
+                    ? `${formatChf(Number(v[0]))} – ${formatChf(Number(v[1]))}`
+                    : typeof v === "number"
+                      ? formatChf(v)
+                      : v
+                }
+              />
+              <ReferenceLine x={result.base} stroke="var(--muted)" strokeDasharray="4 3" />
+              <Bar dataKey="range" name={metricLabel} fill="var(--accent)" radius={[3, 3, 3, 3]} isAnimationActive={false} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto rounded-xl border border-border">
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className="bg-surface-2 text-xs text-faint">
+              <th className="px-3 py-2 text-left font-semibold">Parameter</th>
+              <th className="px-3 py-2 text-left font-semibold">Bandbreite</th>
+              <th className="px-3 py-2 text-right font-semibold">bei «tief»</th>
+              <th className="px-3 py-2 text-right font-semibold">bei «hoch»</th>
+              <th className="px-3 py-2 text-right font-semibold">Spannweite</th>
+            </tr>
+          </thead>
+          <tbody>
+            {result.bars.map((b) => (
+              <tr key={b.id} className="border-t border-border">
+                <td className="px-3 py-2 font-medium text-fg">{b.label}</td>
+                <td className="px-3 py-2 text-muted">{formatRange(b.low, b.high, b.unit)}</td>
+                <td className="px-3 py-2 text-right text-muted">{formatChf(b.lowResult)}</td>
+                <td className="px-3 py-2 text-right text-muted">{formatChf(b.highResult)}</td>
+                <td className="px-3 py-2 text-right font-semibold text-fg">{formatChf(b.swing)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-[11px] text-faint">
+        Die Reihenfolge – nicht der absolute Betrag – ist die Aussage. Sie hängt von den eingegebenen Bandbreiten ab.
+      </p>
+    </div>
+  );
+}