Effektive Werte als eingebettete Ansicht statt Pop-up

Klick auf "Effektive Werte" in der Sidebar oeffnet neu -- analog zu
"Szenarien" -- eine Liste im Hauptbereich statt eines Modals. Neuer
Plan-Tab "actuals"; ActualsDialog bekommt einen embedded-Modus (ohne
Overlay, Backdrop und Schliessen-Knopf). Der Modal-Weg ueber den
Matrix-Knopf bleibt bestehen.

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

src/components/ActualsDialog.tsx

@@ -43,6 +43,7 @@ export function ActualsDialog({
   planName,
   scenarioMetas,
   initial,
+  embedded = false,
   onClose,
   onChanged,
 }: {
@@ -52,6 +53,9 @@ export function ActualsDialog({
   scenarioMetas: { id: string; name: string; isBase: boolean }[];
   // Das bereits geöffnete Szenario, damit der Dialog sofort etwas anzeigen kann.
   initial: LoadedScenario;
+  // Eingebettet in den Hauptbereich (Plan-Ansicht) statt als Pop-up -- ohne Overlay,
+  // ohne Backdrop, ohne Schliessen-Knopf.
+  embedded?: boolean;
   onClose: () => void;
   onChanged: () => void;
 }) {
@@ -252,9 +256,8 @@ export function ActualsDialog({
   const setRow = (rootId: string, patch: { value?: number; mortgage?: number }) =>
     setValues((prev) => ({ ...prev, [rootId]: { ...prev[rootId], ...patch } }));
 
-  return (
-    <div className="ui-fade 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="ui-pop flex w-full max-w-4xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl">
+  const body = (
+    <>
         <div className="flex items-start justify-between gap-3">
           <div>
             <h2 className="flex items-center gap-2 text-base font-semibold text-fg">
@@ -264,9 +267,11 @@ export function ActualsDialog({
               Plan «{planName}». Was tatsächlich eingetreten ist – der Plan selbst bleibt unverändert.
             </p>
           </div>
-          <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>
+          {!embedded && (
+            <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>
 
         {mode === "list" && (
@@ -435,6 +440,17 @@ export function ActualsDialog({
             </div>
           </>
         )}
+    </>
+  );
+
+  // Eingebettet: schlichter Container im Hauptbereich. Sonst: Pop-up mit Overlay.
+  if (embedded) {
+    return <div className="flex flex-col gap-4">{body}</div>;
+  }
+  return (
+    <div className="ui-fade 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="ui-pop flex w-full max-w-4xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl">
+        {body}
       </div>
     </div>
   );