Szenario-Hierarchie: Plan als Behaelter, Diff-Markierung (V6)

Groesste Umstrukturierung bisher. Der PLAN ist neu ein schlanker Behaelter ohne
Finanzdaten; die berechenbare Einheit ist das SZENARIO.

Modell:
- Jeder Plan bekommt beim Anlegen automatisch ein Basisszenario (isBase).
- Das Grundprofil liegt am Szenario, nicht am Plan -- nur so sind Szenarien mit
  abweichendem PENSIONSALTER moeglich (Fruehpensionierung), das in Person steckt.
- Neue Szenarien sind vollstaendige Kopien eines BELIEBIGEN Szenarios und haengen
  als Baum darunter (parentScenarioId); die Seitenleiste rueckt sie ein.
- Kopierte Phasen/Elemente tragen Herkunfts-Verweise (sourcePhaseId,
  sourceElementId). Ueber den Namen zu matchen waere fragil gewesen.

Abweichungs-Markierung (Diff gegen das Eltern-Szenario, live):
- geaendert = gelb, neu = gruen + Badge, entfernt = graue Geisterzeile.
- Markiert: Phasen-/Uebergangszellen, Element-Zeilen, Phasenkoepfe, Cash-Anfangswert,
  Cash-Uebergaenge, Grundprofil. Zaehler ueber der Matrix.
- Eigene Theme-Tokens fuer Hell/Dunkel/Warm -- ein fester Gelbwert waere im
  Dunkelschema unbrauchbar.

Charts vergleichen neu die Geschwister-Szenarien statt fremder Plaene.

Datenmodell/Migration:
- Neue Tabelle Plan; bisheriger Plan -> Scenario (IDs erhalten, damit alle
  Kind-Fremdschluessel gueltig bleiben); planId -> scenarioId in Person/Phase/
  FinancialElement. Bestehende Szenarien werden per rekursivem CTE demselben
  Behaelter zugeordnet, auch mehrfach verschachtelte.
- Migration VOR dem Deploy gegen echtes PostgreSQL verifiziert (PGlite, in-process),
  inkl. verschachtelter Szenarien und Cascade. Der Test ist als
  migrations.test.ts committet und sichert kuenftige Migrationen ab.

API neu unter /api/scenarios/*. 10 neue Tests (48 -> 58). Spezifikation auf v0.8.

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

src/components/AppShell.tsx

@@ -2,8 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 import {
+  Copy,
   FileText,
   FolderKanban,
+  GitBranch,
   LayoutDashboard,
   Menu,
   PiggyBank,
@@ -17,42 +19,39 @@ import { SpecView } from "@/components/SpecView";
 import { ProfileMenu } from "@/components/ProfileMenu";
 import { PlanProfileFields, emptyProfileDraft, type ProfileDraft } from "@/components/PlanProfileFields";
 import { api } from "@/lib/api-client";
-import type { PlanInput } from "@/lib/types";
+import { computeScenarioDiff } from "@/lib/diff";
+import type { PlanInput, PlanListItem, ScenarioMeta } from "@/lib/types";
 import type { PlanComputed } from "@/lib/calculations";
 
-interface PlanListItem {
-  id: string;
-  name: string;
-  parentPlanId: string | null;
-  branchFromPhaseId: string | null;
-  phases: { id: string; name: string; sequenceNumber: number }[];
+interface ScenarioDetail {
+  plan: PlanInput; // das Szenario selbst (berechenbare Einheit)
+  computed: PlanComputed;
+  base: PlanInput | null; // Eltern-Szenario als Vergleichsbasis
+  meta: ScenarioMeta & { planName: string };
 }
 
 export function AppShell({ username }: { username: string }) {
   const [plans, setPlans] = useState<PlanListItem[]>([]);
-  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
-  const [detail, setDetail] = useState<{ plan: PlanInput; computed: PlanComputed } | null>(null);
+  const [selectedScenarioId, setSelectedScenarioId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<ScenarioDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [showNewPlan, setShowNewPlan] = useState(false);
-  const [showScenario, setShowScenario] = useState(false);
-  // Die Spezifikation ist eine eigene Ansicht neben Uebersicht und Plan (schliessen sich aus).
+  const [copyFrom, setCopyFrom] = useState<ScenarioMeta | null>(null);
   const [showSpec, setShowSpec] = useState(false);
 
-  const loadPlans = useCallback(async (preferId?: string) => {
+  const loadPlans = useCallback(async () => {
     const data = await api.get<{ plans: PlanListItem[] }>("/api/plans");
     setPlans(data.plans);
-    if (preferId) setSelectedPlanId(preferId);
     return data.plans;
   }, []);
 
   // silent = Hintergrund-Refresh ohne Loading-Umschaltung: die PlanView bleibt montiert,
   // damit die Scrollposition (z. B. nach dem Schliessen eines Popups) erhalten bleibt.
-  const loadDetail = useCallback(async (planId: string, silent = false) => {
+  const loadDetail = useCallback(async (scenarioId: string, silent = false) => {
     if (!silent) setLoading(true);
     try {
-      const data = await api.get<{ plan: PlanInput; computed: PlanComputed }>(`/api/plans/${planId}`);
-      setDetail(data);
+      setDetail(await api.get<ScenarioDetail>(`/api/scenarios/${scenarioId}`));
     } finally {
       if (!silent) setLoading(false);
     }
@@ -64,26 +63,46 @@ export function AppShell({ username }: { username: string }) {
   }, [loadPlans]);
 
   useEffect(() => {
-    if (selectedPlanId) {
+    if (selectedScenarioId) {
       // eslint-disable-next-line react-hooks/set-state-in-effect -- asynchroner Datenabruf
-      loadDetail(selectedPlanId);
+      loadDetail(selectedScenarioId);
     } else {
       setDetail(null);
     }
-  }, [selectedPlanId, loadDetail]);
+  }, [selectedScenarioId, loadDetail]);
 
   function refreshCurrent() {
-    if (selectedPlanId) loadDetail(selectedPlanId, true);
+    if (selectedScenarioId) loadDetail(selectedScenarioId, true);
+  }
+
+  function openScenario(id: string) {
+    setSelectedScenarioId(id);
+    setShowSpec(false);
+    setSidebarOpen(false);
   }
 
   async function handleDeletePlan(id: string) {
-    if (!confirm("Diesen Plan wirklich loeschen?")) return;
+    if (!confirm("Diesen Plan mit ALLEN Szenarien wirklich loeschen?")) return;
     await api.delete(`/api/plans/${id}`);
-    await loadPlans();
-    if (selectedPlanId === id) setSelectedPlanId(null);
+    const rest = await loadPlans();
+    if (!rest.some((p) => p.scenarios.some((s) => s.id === selectedScenarioId))) {
+      setSelectedScenarioId(null);
+    }
   }
 
-  const activePlan = plans.find((p) => p.id === selectedPlanId) ?? null;
+  async function handleDeleteScenario(s: ScenarioMeta) {
+    if (!confirm(`Szenario "${s.name}" wirklich loeschen?`)) return;
+    try {
+      await api.delete(`/api/scenarios/${s.id}`);
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "Loeschen fehlgeschlagen.");
+      return;
+    }
+    await loadPlans();
+    if (selectedScenarioId === s.id) setSelectedScenarioId(null);
+  }
+
+  const activePlan = plans.find((p) => p.scenarios.some((s) => s.id === selectedScenarioId)) ?? null;
 
   const sidebar = (
     <div className="flex h-full flex-col">
@@ -98,14 +117,12 @@ export function AppShell({ username }: { username: string }) {
         <button
           type="button"
           onClick={() => {
-            setSelectedPlanId(null);
+            setSelectedScenarioId(null);
             setShowSpec(false);
             setSidebarOpen(false);
           }}
           className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium ${
-            selectedPlanId === null && !showSpec
-              ? "bg-accent-soft text-accent-soft-fg"
-              : "text-muted hover:bg-surface-2"
+            selectedScenarioId === null && !showSpec ? "bg-accent-soft text-accent-soft-fg" : "text-muted hover:bg-surface-2"
           }`}
         >
           <LayoutDashboard className="h-4 w-4" />
@@ -124,25 +141,31 @@ export function AppShell({ username }: { username: string }) {
           </button>
         </div>
         {plans.length === 0 && <p className="px-3 py-2 text-xs text-faint">Noch keine Plaene.</p>}
+
         {plans.map((p) => (
-          <button
-            key={p.id}
-            type="button"
-            onClick={() => {
-              setSelectedPlanId(p.id);
-              setShowSpec(false);
-              setSidebarOpen(false);
-            }}
-            className={`flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${
-              selectedPlanId === p.id && !showSpec
-                ? "bg-accent-soft font-medium text-accent-soft-fg"
-                : "text-muted hover:bg-surface-2"
-            }`}
-          >
-            <FolderKanban className="h-4 w-4 shrink-0" />
-            <span className="min-w-0 flex-1 truncate">{p.name}</span>
-            <span className="text-[11px] text-faint">{p.phases.length}</span>
-          </button>
+          <div key={p.id} className="mb-1">
+            <div className="group flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold text-fg">
+              <FolderKanban className="h-3.5 w-3.5 shrink-0 text-faint" />
+              <span className="min-w-0 flex-1 truncate" title={p.name}>{p.name}</span>
+              <button
+                type="button"
+                aria-label="Plan loeschen"
+                onClick={() => handleDeletePlan(p.id)}
+                className="rounded p-0.5 text-faint opacity-0 hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+            <ScenarioTree
+              scenarios={p.scenarios}
+              parentId={null}
+              depth={0}
+              selectedId={selectedScenarioId}
+              onSelect={openScenario}
+              onCopy={setCopyFrom}
+              onDelete={handleDeleteScenario}
+            />
+          </div>
         ))}
 
         <div className="mt-4 border-t border-border pt-3">
@@ -150,7 +173,7 @@ export function AppShell({ username }: { username: string }) {
             type="button"
             onClick={() => {
               setShowSpec(true);
-              setSelectedPlanId(null);
+              setSelectedScenarioId(null);
               setSidebarOpen(false);
             }}
             className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium ${
@@ -165,16 +188,16 @@ export function AppShell({ username }: { username: string }) {
     </div>
   );
 
+  const diff = detail ? computeScenarioDiff(detail.plan, detail.base) : null;
+
   return (
     <div className="flex min-h-screen w-full">
-      {/* Sidebar Desktop */}
-      <aside className="hidden w-60 shrink-0 border-r border-border bg-surface lg:block">{sidebar}</aside>
+      <aside className="hidden w-64 shrink-0 border-r border-border bg-surface lg:block">{sidebar}</aside>
 
-      {/* Sidebar Mobile (Overlay) */}
       {sidebarOpen && (
         <div className="fixed inset-0 z-40 lg:hidden">
           <div className="absolute inset-0 bg-black/40" onClick={() => setSidebarOpen(false)} />
-          <aside className="absolute left-0 top-0 h-full w-64 border-r border-border bg-surface shadow-xl">
+          <aside className="absolute left-0 top-0 h-full w-72 border-r border-border bg-surface shadow-xl">
             <button
               type="button"
               onClick={() => setSidebarOpen(false)}
@@ -188,7 +211,6 @@ export function AppShell({ username }: { username: string }) {
         </div>
       )}
 
-      {/* Hauptbereich */}
       <div className="flex min-w-0 flex-1 flex-col">
         <header className="flex items-center gap-3 border-b border-border bg-surface px-4 py-3">
           <button
@@ -200,7 +222,11 @@ export function AppShell({ username }: { username: string }) {
             <Menu className="h-4 w-4" />
           </button>
           <h1 className="min-w-0 flex-1 truncate text-base font-semibold text-fg">
-            {showSpec ? "Spezifikation" : activePlan ? activePlan.name : "Uebersicht"}
+            {showSpec
+              ? "Spezifikation"
+              : detail
+                ? `${detail.meta.planName} · ${detail.meta.name}`
+                : "Uebersicht"}
           </h1>
           <ProfileMenu username={username} />
         </header>
@@ -210,80 +236,169 @@ export function AppShell({ username }: { username: string }) {
 
           {!showSpec && loading && <p className="text-sm text-muted">Laedt…</p>}
 
-          {!showSpec && !loading && selectedPlanId === null && (
+          {!showSpec && !loading && selectedScenarioId === null && (
             <DashboardHome
               username={username}
               plans={plans}
-              onSelect={(id) => {
-                setSelectedPlanId(id);
-                setShowSpec(false);
-              }}
+              onSelect={openScenario}
               onCreate={() => setShowNewPlan(true)}
               onDelete={handleDeletePlan}
             />
           )}
 
-          {!showSpec && !loading && detail && selectedPlanId && (
+          {!showSpec && !loading && detail && selectedScenarioId && (
             <div className="flex flex-col gap-6">
               <div className="flex flex-wrap items-center gap-2">
-                {detail.plan.phases.length > 0 && (
-                  <button
-                    type="button"
-                    onClick={() => setShowScenario(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"
-                  >
-                    <Plus className="h-4 w-4" />
-                    Szenario
-                  </button>
-                )}
                 <button
                   type="button"
-                  onClick={() => handleDeletePlan(selectedPlanId)}
-                  className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:border-danger hover:bg-danger-soft hover:text-danger"
+                  onClick={() => setCopyFrom(detail.meta)}
+                  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"
                 >
-                  <Trash2 className="h-4 w-4" />
-                  Plan loeschen
+                  <Copy className="h-4 w-4" />
+                  Neues Szenario aus diesem
                 </button>
+                {!detail.meta.isBase && (
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteScenario(detail.meta)}
+                    className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted hover:border-danger hover:bg-danger-soft hover:text-danger"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Szenario loeschen
+                  </button>
+                )}
+                {diff && detail.base && (
+                  <span className="ml-auto flex items-center gap-1.5 rounded-lg border border-diff bg-diff-soft px-3 py-1.5 text-xs font-medium text-diff">
+                    <GitBranch className="h-3.5 w-3.5" />
+                    {diff.total === 0
+                      ? "Unveraendert gegenueber der Vorlage"
+                      : `${diff.total} Abweichung${diff.total === 1 ? "" : "en"} gegenueber der Vorlage`}
+                  </span>
+                )}
               </div>
 
-              <PlanView plan={detail.plan} computed={detail.computed} onChanged={refreshCurrent} />
+              <PlanView plan={detail.plan} computed={detail.computed} diff={diff} onChanged={refreshCurrent} />
 
-              {detail.plan.phases.length > 0 && <Dashboard plan={detail.plan} computed={detail.computed} allPlans={plans} />}
+              {detail.plan.phases.length > 0 && (
+                <Dashboard
+                  plan={detail.plan}
+                  computed={detail.computed}
+                  siblings={(activePlan?.scenarios ?? []).filter((s) => s.id !== detail.meta.id)}
+                />
+              )}
             </div>
           )}
         </main>
       </div>
 
-      {/* Dialoge */}
       {showNewPlan && (
         <PlanDialog
           onCreate={async (name, profile) => {
-            const { plan } = await api.post<{ plan: { id: string } }>("/api/plans", { name, ...profile });
+            const { scenario } = await api.post<{ plan: { id: string }; scenario: { id: string } }>(
+              "/api/plans",
+              { name, ...profile }
+            );
             setShowNewPlan(false);
-            await loadPlans(plan.id);
+            await loadPlans();
+            openScenario(scenario.id);
           }}
           onClose={() => setShowNewPlan(false)}
         />
       )}
-      {showScenario && detail && selectedPlanId && (
-        <ScenarioDialog
-          phases={detail.plan.phases}
-          onCreate={async (name, branchFromPhaseId) => {
-            const { planId } = await api.post<{ planId: string }>(`/api/plans/${selectedPlanId}/scenario`, {
-              name,
-              branchFromPhaseId,
-            });
-            setShowScenario(false);
-            await loadPlans(planId);
+
+      {copyFrom && (
+        <CopyScenarioDialog
+          source={copyFrom}
+          onClose={() => setCopyFrom(null)}
+          onCreate={async (name) => {
+            const { scenarioId } = await api.post<{ scenarioId: string }>(
+              `/api/scenarios/${copyFrom.id}/copy`,
+              { name }
+            );
+            setCopyFrom(null);
+            await loadPlans();
+            openScenario(scenarioId);
           }}
-          onClose={() => setShowScenario(false)}
         />
       )}
     </div>
   );
 }
 
-// Startansicht: Begruessung + Plan-Kacheln.
+// Rekursiver Szenario-Baum: Kinder werden eingerueckt, damit Sub-Szenarien sichtbar sind.
+function ScenarioTree({
+  scenarios,
+  parentId,
+  depth,
+  selectedId,
+  onSelect,
+  onCopy,
+  onDelete,
+}: {
+  scenarios: ScenarioMeta[];
+  parentId: string | null;
+  depth: number;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onCopy: (s: ScenarioMeta) => void;
+  onDelete: (s: ScenarioMeta) => void;
+}) {
+  const level = scenarios.filter((s) => (s.parentScenarioId ?? null) === parentId);
+  if (level.length === 0) return null;
+  return (
+    <>
+      {level.map((s) => (
+        <div key={s.id}>
+          <div
+            className={`group flex items-center gap-1.5 rounded-lg py-1.5 pr-1.5 text-sm ${
+              selectedId === s.id ? "bg-accent-soft font-medium text-accent-soft-fg" : "text-muted hover:bg-surface-2"
+            }`}
+            style={{ paddingLeft: `${12 + depth * 14}px` }}
+          >
+            <button type="button" onClick={() => onSelect(s.id)} className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
+              {s.isBase ? (
+                <PiggyBank className="h-3.5 w-3.5 shrink-0" />
+              ) : (
+                <GitBranch className="h-3.5 w-3.5 shrink-0" />
+              )}
+              <span className="min-w-0 flex-1 truncate" title={s.name}>{s.name}</span>
+            </button>
+            <button
+              type="button"
+              aria-label="Kopie erstellen"
+              title="Neues Szenario aus diesem"
+              onClick={() => onCopy(s)}
+              className="rounded p-0.5 text-faint opacity-0 hover:bg-accent-soft hover:text-accent group-hover:opacity-100"
+            >
+              <Copy className="h-3.5 w-3.5" />
+            </button>
+            {!s.isBase && (
+              <button
+                type="button"
+                aria-label="Szenario loeschen"
+                onClick={() => onDelete(s)}
+                className="rounded p-0.5 text-faint opacity-0 hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <ScenarioTree
+            scenarios={scenarios}
+            parentId={s.id}
+            depth={depth + 1}
+            selectedId={selectedId}
+            onSelect={onSelect}
+            onCopy={onCopy}
+            onDelete={onDelete}
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+// Startansicht: Begruessung + Plan-Kacheln (Klick oeffnet das Basisszenario).
 function DashboardHome({
   username,
   plans,
@@ -293,7 +408,7 @@ function DashboardHome({
 }: {
   username: string;
   plans: PlanListItem[];
-  onSelect: (id: string) => void;
+  onSelect: (scenarioId: string) => void;
   onCreate: () => void;
   onDelete: (id: string) => void;
 }) {
@@ -302,42 +417,46 @@ function DashboardHome({
       <div>
         <h2 className="text-xl font-semibold text-fg">Willkommen, {username}</h2>
         <p className="mt-1 text-sm text-muted">
-          Waehlen Sie einen Plan oder erstellen Sie einen neuen, um Ihre finanzielle Zukunft zu planen.
+          Waehlen Sie einen Plan oder erstellen Sie einen neuen. Jeder Plan enthaelt ein Basisszenario
+          und beliebig viele Varianten davon.
         </p>
       </div>
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
-        {plans.map((p) => (
-          <div
-            key={p.id}
-            className="group relative flex cursor-pointer flex-col gap-2 rounded-xl border border-border bg-surface p-4 shadow-sm transition-shadow hover:shadow-md"
-            onClick={() => onSelect(p.id)}
-          >
-            <div className="flex items-center gap-2">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent-soft">
-                <FolderKanban className="h-5 w-5 text-accent-soft-fg" />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="truncate font-medium text-fg">{p.name}</div>
-                <div className="text-xs text-muted">
-                  {p.phases.length} {p.phases.length === 1 ? "Phase" : "Phasen"}
-                  {p.parentPlanId ? " · Szenario" : ""}
+        {plans.map((p) => {
+          const base = p.scenarios.find((s) => s.isBase) ?? p.scenarios[0];
+          const others = p.scenarios.length - 1;
+          return (
+            <div
+              key={p.id}
+              className="group relative flex cursor-pointer flex-col gap-2 rounded-xl border border-border bg-surface p-4 shadow-sm transition-shadow hover:shadow-md"
+              onClick={() => base && onSelect(base.id)}
+            >
+              <div className="flex items-center gap-2">
+                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent-soft">
+                  <FolderKanban className="h-5 w-5 text-accent-soft-fg" />
                 </div>
+                <div className="min-w-0 flex-1">
+                  <div className="truncate font-medium text-fg">{p.name}</div>
+                  <div className="text-xs text-muted">
+                    Basisszenario{others > 0 ? ` + ${others} Variante${others === 1 ? "" : "n"}` : ""}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  aria-label="Plan loeschen"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(p.id);
+                  }}
+                  className="rounded-md p-1.5 text-faint opacity-0 transition-opacity hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
               </div>
-              <button
-                type="button"
-                aria-label="Plan loeschen"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete(p.id);
-                }}
-                className="rounded-md p-1.5 text-faint opacity-0 transition-opacity hover:bg-danger-soft hover:text-danger group-hover:opacity-100"
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
             </div>
-          </div>
-        ))}
+          );
+        })}
 
         <button
           type="button"
@@ -359,7 +478,7 @@ function PlanDialog({
   onCreate: (name: string, profile: ProfileDraft) => void;
   onClose: () => void;
 }) {
-  const [name, setName] = useState("Basisplan");
+  const [name, setName] = useState("Meine Planung");
   const [draft, setDraft] = useState<ProfileDraft>(emptyProfileDraft);
   const [saving, setSaving] = useState(false);
 
@@ -370,6 +489,10 @@ function PlanDialog({
         className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
       >
         <h2 className="text-base font-semibold text-fg">Neuen Plan erstellen</h2>
+        <p className="text-xs text-muted">
+          Es wird automatisch ein <strong className="text-fg">Basisszenario</strong> angelegt. Weitere
+          Szenarien entstehen spaeter als Kopien davon.
+        </p>
         <div>
           <label className="mb-1 block text-xs font-medium text-muted">Name des Plans</label>
           <input
@@ -406,24 +529,28 @@ function PlanDialog({
   );
 }
 
-function ScenarioDialog({
-  phases,
+function CopyScenarioDialog({
+  source,
   onCreate,
   onClose,
 }: {
-  phases: { id: string; name: string }[];
-  onCreate: (name: string, branchFromPhaseId: string) => void;
+  source: ScenarioMeta;
+  onCreate: (name: string) => void;
   onClose: () => void;
 }) {
-  const [name, setName] = useState("Neues Szenario");
-  const [branchFromPhaseId, setBranchFromPhaseId] = useState(phases[phases.length - 1]?.id ?? "");
+  const [name, setName] = useState(`${source.name} – Variante`);
+  const [saving, setSaving] = useState(false);
   return (
     <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4" onClick={onClose}>
       <div
         onClick={(e) => e.stopPropagation()}
         className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-border bg-surface p-6 shadow-xl"
       >
-        <h2 className="text-base font-semibold text-fg">Szenario erstellen</h2>
+        <h2 className="text-base font-semibold text-fg">Neues Szenario</h2>
+        <p className="text-xs text-muted">
+          Vollstaendige Kopie von <strong className="text-fg">{source.name}</strong>. Aenderungen darin
+          werden anschliessend farblich hervorgehoben.
+        </p>
         <input
           autoFocus
           className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
@@ -431,25 +558,17 @@ function ScenarioDialog({
           onChange={(e) => setName(e.target.value)}
           placeholder="Name des Szenarios"
         />
-        <label className="text-xs text-muted">Verzweigen ab Phase</label>
-        <select
-          className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
-          value={branchFromPhaseId}
-          onChange={(e) => setBranchFromPhaseId(e.target.value)}
-        >
-          {phases.map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.name}
-            </option>
-          ))}
-        </select>
         <div className="flex gap-2">
           <button
             type="button"
-            onClick={() => onCreate(name, branchFromPhaseId)}
-            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg shadow-sm hover:bg-accent-hover"
+            disabled={saving}
+            onClick={() => {
+              setSaving(true);
+              onCreate(name.trim() || "Szenario");
+            }}
+            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"
           >
-            Erstellen
+            {saving ? "..." : "Erstellen"}
           </button>
           <button
             type="button"