From 96dd88247de73b9c392ed84af8c5d18694831b50 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Wed, 27 May 2026 15:57:27 +0200
Subject: [PATCH] feat(stellungnahme): UX-Verbesserungen, localStorage,
 Mini-Map, Druck
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- localStorage: Formularstand + Ausgabe-Historie (max 5) persistieren
- Fortsetzen-Banner: gespeicherte Sitzung erkannt → Sprung zu letztem Schritt
- Neustart-Button: alles inkl. localStorage leeren
- Frist-Banner: deadline-Feld in StellingnahmeGeneratorBlockData, Ampelfarben
- Step 1 überspringen wenn keine ortskonkreten Argumente vorhanden
- Step-Indikator: goTo() statt step= (scrollt jetzt korrekt)
- "Alle wählen" öffnet Gruppe automatisch
- Download als .txt neben Kopieren/Drucken
- <pre> → <div> für konsistentes Schriftbild im Output
- Mini-Map für Vorranggebiet in Step 0 (tap-to-activate, fitBoundsMaxZoom=13)
- WindkarteMap: fitBoundsMaxZoom-Prop ergänzt
- Druckausgabe: 13pt Serif, 2cm Ränder, kein Markdown im Fertigtext

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/block-types.ts                        |   2 +
 src/lib/components/WindkarteMap.svelte        |   4 +-
 .../blocks/StellingnahmeGeneratorBlock.svelte | 904 ++++++++++++------
 3 files changed, 593 insertions(+), 317 deletions(-)

diff --git a/src/lib/block-types.ts b/src/lib/block-types.ts
index 0d81891..9e9e72f 100644
--- a/src/lib/block-types.ts
+++ b/src/lib/block-types.ts
@@ -468,5 +468,7 @@ export interface StellingnahmeGeneratorBlockData {
   allgemeineArgumenteTag?: string | { _slug: string; name?: string };
   /** Vom Resolver befüllt: allgemeine (gebietsunabhängige) Fragmente via Tag. */
   allgemeineArgumente?: TextFragment[];
+  /** ISO-Datum: Einwendungsfrist-Ende (z.B. "2026-07-04"). */
+  deadline?: string;
   layout?: BlockLayout;
 }
diff --git a/src/lib/components/WindkarteMap.svelte b/src/lib/components/WindkarteMap.svelte
index d89a7e4..aae832d 100644
--- a/src/lib/components/WindkarteMap.svelte
+++ b/src/lib/components/WindkarteMap.svelte
@@ -11,6 +11,7 @@
     initialGebietsNr = null,
     hiddenStatuses = [],
     hiddenRings = [],
+    fitBoundsMaxZoom = 11,
   }: {
     areas: WindArea[];
     onselect: (area: WindArea | null, center: [number, number] | null) => void;
@@ -18,6 +19,7 @@
     initialGebietsNr?: string | null;
     hiddenStatuses?: string[];
     hiddenRings?: string[];
+    fitBoundsMaxZoom?: number;
   } = $props();
 
   const t = useTranslate();
@@ -167,7 +169,7 @@
       map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), {
         paddingTopLeft:     [40, 40],
         paddingBottomRight: [desktop ? 320 : 40, desktop ? 40 : 300],
-        maxZoom: 11,
+        maxZoom: fitBoundsMaxZoom,
       });
     }
   }
diff --git a/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte b/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
index 5b199d8..fb510d4 100644
--- a/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
+++ b/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import { env } from "$env/dynamic/public";
   import { marked } from "$lib/markdown-safe";
   import { getBlockLayoutClasses } from "$lib/block-layout";
   import type { StellingnahmeGeneratorBlockData } from "$lib/block-types";
   import type { TextFragment, WindArea } from "$lib/windkarte";
+  import "$lib/iconify-offline";
+  import Icon from "@iconify/svelte";
 
   let {
     block,
@@ -14,7 +19,7 @@
 
   const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
 
-  // Resolved data from server
+  // ── Resolved server data ─────────────────────────────────────────────────────
   const windArea = $derived(
     typeof block.windArea === "object" && block.windArea !== null
       ? (block.windArea as WindArea & { stellungnahme_kriterien?: TextFragment[] })
@@ -31,79 +36,170 @@
     (block.allgemeineArgumente ?? []) as TextFragment[],
   );
 
-  // ── Step state ──────────────────────────────────────────────────────────────
-  type Step = 0 | 1 | 2 | 3 | 4;
+  // Tag used to fetch allgemeineArgumente — exclude from grouping categories
+  const fetchTagSlug = $derived(
+    typeof block.allgemeineArgumenteTag === "object" && block.allgemeineArgumenteTag !== null
+      ? (block.allgemeineArgumenteTag as { _slug: string })._slug
+      : (block.allgemeineArgumenteTag as string | undefined) ?? "",
+  );
+
+  // Deduplicate: remove allgemeine fragments already covered by ortskonkrete (id, fallback _slug)
+  const ortskonkreteIds = $derived(new Set(kriterien.map((k) => k.id ?? k._slug)));
+  const allgemeineDeduped = $derived(
+    allgemeineArgumente.filter((f) => !ortskonkreteIds.has(f.id ?? f._slug)),
+  );
+
+  // Group allgemeine by first non-fetch tag; use tag.name as label
+  type Group = { slug: string; label: string; items: TextFragment[] };
+  const allgemeineGruppen = $derived.by((): Group[] => {
+    const map = new Map<string, Group>();
+    for (const f of allgemeineDeduped) {
+      const relevantTags = (f.tags ?? []).filter((t) => {
+        const slug = typeof t === "string" ? t : t._slug;
+        return slug !== fetchTagSlug;
+      });
+      let groupSlug = "__weitere";
+      let groupLabel = "Weitere Argumente";
+      if (relevantTags.length > 0) {
+        const first = relevantTags[0];
+        if (typeof first === "string") {
+          groupSlug = first;
+          // Slug → label: strip "tag-" prefix, replace hyphens with spaces, capitalize
+          groupLabel = first
+            .replace(/^tag-?/, "")
+            .replace(/-/g, " ")
+            .replace(/^\w/, (c) => c.toUpperCase());
+        } else {
+          groupSlug = first._slug;
+          groupLabel =
+            first.name ??
+            first._slug
+              .replace(/^tag-?/, "")
+              .replace(/-/g, " ")
+              .replace(/^\w/, (c) => c.toUpperCase());
+        }
+      }
+      if (!map.has(groupSlug)) {
+        map.set(groupSlug, { slug: groupSlug, label: groupLabel, items: [] });
+      }
+      map.get(groupSlug)!.items.push(f);
+    }
+    return Array.from(map.values());
+  });
+
+  // ── localStorage ────────────────────────────────────────────────────────────
+  const storageKey = `stellungnahme:${block._slug ?? block.id ?? "default"}`;
+  const historyKey = `${storageKey}:history`;
+
+  type HistoryEntry = { text: string; date: string; argCount: number };
+  let outputHistory = $state<HistoryEntry[]>([]);
+  let historyExpanded = $state(false);
+  let mounted = $state(false);
+  let hadSavedState = $state(false);
+
+  function saveState() {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify({
+        selectedSlugs: Array.from(selectedSlugs),
+        mode,
+        persoenlicheEingabe,
+        absenderName,
+        absenderAnschrift,
+        absenderOrt,
+      }));
+    } catch {}
+  }
+
+  $effect(() => {
+    // track all persisted fields reactively
+    void [selectedSlugs, mode, persoenlicheEingabe, absenderName, absenderAnschrift, absenderOrt];
+    if (mounted) saveState();
+  });
+
+  // ── Step state ───────────────────────────────────────────────────────────────
+  // 0 Gebietskontext | 1 Ortskonkret | 2 Allgemein | 3 Modus | 4 Betroffenheit | 5 Ausgabe
+  type Step = 0 | 1 | 2 | 3 | 4 | 5;
   let step = $state<Step>(0);
 
-  // Step 1: selected argument slugs
   let selectedSlugs = $state<Set<string>>(new Set());
+  let expandedGroups = $state<Set<string>>(new Set()); // empty = all collapsed
+  let expandedItems = $state<Set<string>>(new Set()); // per-item text expand
+
+  function toggleItem(slug: string) {
+    const next = new Set(expandedItems);
+    if (next.has(slug)) next.delete(slug);
+    else next.add(slug);
+    expandedItems = next;
+  }
 
-  // Step 2: mode
   let mode = $state<"fertig" | "leitfaden">("fertig");
-
-  // Step 3: personal statement
   let persoenlicheEingabe = $state("");
-
-  // Step 4: sender
   let absenderName = $state("");
   let absenderAnschrift = $state("");
   let absenderOrt = $state("");
   let showOutput = $state(false);
 
-  // ── Helpers ─────────────────────────────────────────────────────────────────
-  function slugLabel(slug: string) {
-    return slug.replace(/_/g, " ");
-  }
-
-  function fragmentTags(f: TextFragment): string[] {
-    return (f.tags ?? []).map((t) =>
-      typeof t === "string" ? t : ((t as { name?: string })?.name ?? ""),
-    ).filter(Boolean);
-  }
-
-  // Group kriterien by first tag (ortskonkret) vs. allgemeine
-  const ortskonkreteKriterien = $derived(kriterien);
-  const allgemeineArgList = $derived(allgemeineArgumente);
-
-  // Pre-select all ortskonkrete on mount
-  $effect(() => {
-    const initial = new Set<string>();
-    for (const k of kriterien) {
-      initial.add(k._slug);
-    }
-    selectedSlugs = initial;
-  });
 
   function toggleSlug(slug: string) {
     const next = new Set(selectedSlugs);
+    const nextExpanded = new Set(expandedItems);
     if (next.has(slug)) {
       next.delete(slug);
+      nextExpanded.delete(slug);
     } else {
       next.add(slug);
+      nextExpanded.add(slug);
     }
     selectedSlugs = next;
+    expandedItems = nextExpanded;
   }
 
-  // Build selected fragments in order: ortskonkret first, then allgemeine
+  function toggleGroup(slug: string) {
+    const next = new Set(expandedGroups);
+    if (next.has(slug)) next.delete(slug);
+    else next.add(slug);
+    expandedGroups = next;
+  }
+
+  function toggleGroupSelection(group: Group) {
+    const slugs = group.items.map((f) => f._slug);
+    const allSelected = slugs.every((s) => selectedSlugs.has(s));
+    const next = new Set(selectedSlugs);
+    for (const s of slugs) {
+      if (allSelected) next.delete(s);
+      else next.add(s);
+    }
+    selectedSlugs = next;
+    // Expand group when selecting so user sees what they picked
+    if (!allSelected) {
+      const nextGroups = new Set(expandedGroups);
+      nextGroups.add(group.slug);
+      expandedGroups = nextGroups;
+    }
+  }
+
+  // Combined selection for output — ortskonkrete first, then allgemeine
   const selectedFragments = $derived([
-    ...ortskonkreteKriterien.filter((k) => selectedSlugs.has(k._slug)),
-    ...allgemeineArgList.filter((k) => selectedSlugs.has(k._slug)),
+    ...kriterien.filter((k) => selectedSlugs.has(k._slug)),
+    ...allgemeineDeduped.filter((k) => selectedSlugs.has(k._slug)),
   ]);
 
-  // ── Output generation ────────────────────────────────────────────────────────
+  const ortskonkreteSelectedCount = $derived(
+    kriterien.filter((k) => selectedSlugs.has(k._slug)).length,
+  );
+  const allgemeineSelectedCount = $derived(
+    allgemeineDeduped.filter((k) => selectedSlugs.has(k._slug)).length,
+  );
+
+  // ── Output ───────────────────────────────────────────────────────────────────
   const RECIPIENT = `Regionale Planungsgemeinschaft Südwestthüringen
 Regionale Planungsstelle
 Karl-Liebknecht-Straße 4
 98527 Suhl`;
 
   const heute = $derived(
-    new Date().toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    }),
+    new Date().toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }),
   );
-
   const gebietsBez = $derived(
     windArea
       ? `${windArea.gebiets_nr}${windArea.bezeichnung ? " – " + windArea.bezeichnung : ""}`
@@ -114,78 +210,94 @@ Karl-Liebknecht-Straße 4
     const sender = [absenderName.trim(), absenderAnschrift.trim(), absenderOrt.trim()]
       .filter(Boolean)
       .join("\n");
-
     const betreff = `Einwendung zum Entwurf des Regionalplans Südwestthüringen (2. Entwurf)\nWindenergie-Vorranggebiet ${gebietsBez}`;
-
     let body = "";
 
     if (mode === "fertig") {
-      // Fließtext: Einleitung + Argumente ausformuliert
       body += `ich erhebe Einwendung gegen die Ausweisung des Windenergie-Vorranggebiets ${gebietsBez} im 2. Entwurf des Regionalplans Südwestthüringen.\n\n`;
-
       for (const f of selectedFragments) {
-        if (f.title) body += `**${f.title}**\n\n`;
-        if (f.text) body += `${f.text.trim()}\n\n`;
-        if (f.bulletPoints?.length) {
-          for (const bp of f.bulletPoints) {
-            body += `- ${bp}\n`;
-          }
-          body += "\n";
-        }
+        if (f.title) body += `${f.title}\n\n`;
+        if (f.text) body += `${stripMd(f.text)}\n\n`;
       }
-
-      if (persoenlicheEingabe.trim()) {
-        body += `**Persönliche Betroffenheit**\n\n${persoenlicheEingabe.trim()}\n\n`;
-      }
-
+      if (persoenlicheEingabe.trim())
+        body += `Persönliche Betroffenheit\n\n${persoenlicheEingabe.trim()}\n\n`;
       body +=
-        "Ich fordere die Regionalplanung auf, das Vorranggebiet aus dem Regionalplan zu streichen oder zumindest einer erneuten, umfassenden Überprüfung zu unterziehen.\n\n";
-      body += "Mit freundlichen Grüßen";
+        "Ich fordere die Regionalplanung auf, das Vorranggebiet aus dem Regionalplan zu streichen oder zumindest einer erneuten, umfassenden Überprüfung zu unterziehen.\n\nMit freundlichen Grüßen";
     } else {
-      // Leitfaden: Stichpunkte als Gliederung
-      body += `Betreff: Einwendung gegen Windenergie-Vorranggebiet ${gebietsBez}\n\n`;
-      body += "Gliederung meiner Einwendung (bitte in eigenen Worten ausformulieren):\n\n";
-
+      body += `Gliederung meiner Einwendung (bitte in eigenen Worten ausformulieren):\n\n`;
       let i = 1;
       for (const f of selectedFragments) {
-        body += `${i}. ${f.title ?? slugLabel(f._slug)}\n`;
-        if (f.bulletPoints?.length) {
-          for (const bp of f.bulletPoints) {
-            body += `   - ${bp}\n`;
-          }
-        }
+        body += `${i}. ${f.title ?? f._slug.replace(/_/g, " ")}\n`;
+        if (f.bulletPoints?.length)
+          for (const bp of f.bulletPoints) body += `   - ${bp}\n`;
         body += "\n";
         i++;
       }
-
-      if (persoenlicheEingabe.trim()) {
+      if (persoenlicheEingabe.trim())
         body += `${i}. Persönliche Betroffenheit\n   ${persoenlicheEingabe.trim()}\n\n`;
-      }
+      body += "Ich fordere die Regionalplanung auf, das Vorranggebiet aus dem Regionalplan zu streichen oder zumindest einer erneuten, umfassenden Überprüfung zu unterziehen.\n\nMit freundlichen Grüßen";
     }
 
-    const lines = [
-      sender,
-      "",
-      heute,
-      "",
-      "An:",
-      RECIPIENT,
-      "",
-      "Betreff: " + betreff.split("\n")[0],
-      betreff.split("\n")[1] ?? "",
-      "",
-      "Sehr geehrte Damen und Herren,",
-      "",
-      body.trimEnd(),
-    ];
-    return lines.join("\n").replace(/\n{3,}/g, "\n\n");
+    return [sender, "", heute, "", "An:", RECIPIENT, "", "Betreff: " + betreff.split("\n")[0], betreff.split("\n")[1] ?? "", "", "Sehr geehrte Damen und Herren,", "", body.trimEnd()]
+      .join("\n")
+      .replace(/\n{3,}/g, "\n\n");
+  }
+
+  let sectionEl: HTMLElement | undefined;
+
+  function goTo(target: Step) {
+    // Skip step 1 when no ortskonkrete arguments exist
+    let s = target;
+    if (s === 1 && kriterien.length === 0) {
+      s = (target > step ? 2 : 0) as Step;
+    }
+    step = s;
+    setTimeout(() => sectionEl?.scrollIntoView({ behavior: "smooth", block: "start" }), 0);
   }
 
   let outputText = $state("");
+  let copyFeedback = $state("");
 
   function generateOutput() {
     outputText = buildText();
     showOutput = true;
+    const entry: HistoryEntry = {
+      text: outputText,
+      date: new Date().toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }),
+      argCount: selectedFragments.length,
+    };
+    outputHistory = [entry, ...outputHistory.filter((h) => h.text !== outputText)].slice(0, 5);
+    try { localStorage.setItem(historyKey, JSON.stringify(outputHistory)); } catch {}
+  }
+
+  function clearHistory() {
+    outputHistory = [];
+    try { localStorage.removeItem(historyKey); } catch {}
+  }
+
+  function resetAll() {
+    selectedSlugs = new Set();
+    expandedItems = new Set();
+    expandedGroups = new Set();
+    mode = "fertig";
+    persoenlicheEingabe = "";
+    absenderName = "";
+    absenderAnschrift = "";
+    absenderOrt = "";
+    showOutput = false;
+    outputText = "";
+    hadSavedState = false;
+    try { localStorage.removeItem(storageKey); } catch {}
+  }
+
+  function downloadText() {
+    const blob = new Blob([outputText], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `einwendung-${windArea?.gebiets_nr ?? "stellungnahme"}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
   }
 
   async function copyText() {
@@ -198,50 +310,174 @@ Karl-Liebknecht-Straße 4
     }
   }
 
-  let copyFeedback = $state("");
-
   function printText() {
     const w = window.open("", "_blank");
     if (!w) return;
     w.document.write(
       `<html><head><title>Stellungnahme</title><style>
-        body { font-family: serif; font-size: 12pt; max-width: 700px; margin: 40px auto; white-space: pre-wrap; }
-        @media print { body { margin: 0; } }
-      </style></head><body><pre>${outputText.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre></body></html>`,
+        body { font-family: serif; font-size: 13pt; line-height: 1.6; margin: 2cm; white-space: pre-wrap; }
+        @media print { body { margin: 2cm; } }
+      </style></head><body>${outputText.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</body></html>`,
     );
     w.document.close();
     w.print();
   }
 
-  // ── Markdown helper ──────────────────────────────────────────────────────────
   function md(text: string | undefined): string {
     if (!text) return "";
     return marked.parse(text) as string;
   }
+
+  function stripMd(text: string): string {
+    return text
+      .replace(/\*\*(.+?)\*\*/g, "$1")
+      .replace(/\*(.+?)\*/g, "$1")
+      .replace(/^#{1,6}\s+/gm, "")
+      .replace(/\[(.+?)\]\(.+?\)/g, "$1")
+      .trim();
+  }
+
+  const STEP_LABELS = ["Gebiet", "Ortskonkret", "Allgemein", "Modus", "Betroffenheit", "Ausgabe"] as const;
+  const TOTAL_STEPS = 6;
+
+  // ── Deadline ─────────────────────────────────────────────────────────────────
+  const deadlineDate = $derived(block.deadline ? new Date(block.deadline) : null);
+  const deadlineDays = $derived.by(() => {
+    if (!deadlineDate) return null;
+    const now = new Date(); now.setHours(0, 0, 0, 0);
+    const d = new Date(deadlineDate); d.setHours(0, 0, 0, 0);
+    return Math.ceil((d.getTime() - now.getTime()) / 86_400_000);
+  });
+  const deadlineFormatted = $derived(
+    deadlineDate?.toLocaleDateString("de-DE", { day: "2-digit", month: "long", year: "numeric" }) ?? "",
+  );
+
+  // ── Mini-map ─────────────────────────────────────────────────────────────────
+  const CMS_BASE = (env.PUBLIC_CMS_URL || "http://localhost:3000").replace(/\/$/, "");
+
+  let mapAreaData = $state<WindArea[]>([]);
+  let mapReady = $state(false);
+  let mapActive = $state(false);
+
+  const MapComponent = browser
+    ? import("$lib/components/WindkarteMap.svelte").then((m) => m.default)
+    : null;
+
+  // ── Hash navigation ──────────────────────────────────────────────────────────
+  function parseStepHash(hash: string): Step | null {
+    const m = hash.match(/^#step-(\d+)$/);
+    if (!m) return null;
+    const n = (parseInt(m[1], 10) - 1) as Step;
+    return n >= 0 && n < TOTAL_STEPS ? n : null;
+  }
+
+  // Sync step → hash (only when hash doesn't already match)
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    const target = `#step-${step + 1}`;
+    if (location.hash !== target) location.hash = target;
+  });
+
+  onMount(() => {
+    // Restore persisted state
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const s = JSON.parse(saved);
+        if (Array.isArray(s.selectedSlugs)) selectedSlugs = new Set(s.selectedSlugs);
+        if (s.mode === "fertig" || s.mode === "leitfaden") mode = s.mode;
+        if (typeof s.persoenlicheEingabe === "string") persoenlicheEingabe = s.persoenlicheEingabe;
+        if (typeof s.absenderName === "string") absenderName = s.absenderName;
+        if (typeof s.absenderAnschrift === "string") absenderAnschrift = s.absenderAnschrift;
+        if (typeof s.absenderOrt === "string") absenderOrt = s.absenderOrt;
+        if ((s.selectedSlugs?.length ?? 0) > 0 || s.absenderName || s.persoenlicheEingabe) {
+          hadSavedState = true;
+        }
+      }
+      const savedHistory = localStorage.getItem(historyKey);
+      if (savedHistory) outputHistory = JSON.parse(savedHistory);
+    } catch {}
+    mounted = true;
+
+    const parsed = parseStepHash(location.hash);
+    if (parsed !== null) step = parsed;
+
+    const onHashChange = () => {
+      const p = parseStepHash(location.hash);
+      if (p !== null && p !== step) step = p;
+    };
+    window.addEventListener("hashchange", onHashChange);
+
+    // Fetch wind_area with geometry for mini-map
+    if (windArea?._slug) {
+      fetch(`${CMS_BASE}/api/content/wind_area/${windArea._slug}`, {
+        signal: AbortSignal.timeout(6_000),
+      })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((data) => {
+          if (data) mapAreaData = [data];
+        })
+        .catch(() => {})
+        .finally(() => { mapReady = true; });
+    } else {
+      mapReady = true;
+    }
+
+    return () => window.removeEventListener("hashchange", onHashChange);
+  });
 </script>
 
-<section class="{layoutClasses} {className}">
+<section bind:this={sectionEl} class="{layoutClasses} {className}">
+  <!-- Deadline banner -->
+  {#if deadlineDays !== null && deadlineDays >= 0}
+    {@const urgent = deadlineDays <= 3}
+    {@const soon = deadlineDays <= 7}
+    <div class="mb-4 flex items-center gap-3 rounded-lg border px-4 py-3 text-sm font-medium
+      {urgent ? 'border-red-300 bg-red-50 text-red-800' : soon ? 'border-orange-300 bg-orange-50 text-orange-800' : 'border-gelb-300 bg-gelb-50 text-gelb-800'}">
+      <Icon icon="mdi:clock-alert-outline" class="size-5 shrink-0" />
+      <span>
+        Einwendungsfrist: <strong>{deadlineFormatted}</strong>
+        {#if deadlineDays === 0}— <strong>heute letzter Tag!</strong>
+        {:else if deadlineDays === 1}— <strong>morgen letzter Tag!</strong>
+        {:else}— noch {deadlineDays} Tage
+        {/if}
+      </span>
+    </div>
+  {/if}
+
   <!-- Privacy notice -->
-  <div class="mb-6 flex items-start gap-2 rounded-lg border border-himmel-200 bg-himmel-50 px-4 py-3 text-sm text-himmel-800">
+  <div class="mb-4 flex items-start gap-2 rounded-lg border border-himmel-200 bg-himmel-50 px-4 py-3 text-sm text-himmel-800">
     <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
     </svg>
     <span><strong>Ihre Daten bleiben auf Ihrem Gerät.</strong> Name, Anschrift und alle Eingaben werden nicht an Server übertragen.</span>
   </div>
 
-  <!-- Headline / Intro -->
+  <!-- Fortsetzen-Banner -->
+  {#if hadSavedState && step === 0}
+    <div class="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-wald-300 bg-wald-50 px-4 py-3 text-sm">
+      <span class="text-wald-800"><Icon icon="mdi:content-save-outline" class="mr-1 inline size-4" />Letzte Sitzung wiederhergestellt.</span>
+      <div class="flex gap-2">
+        {#if outputHistory.length > 0}
+          <button class="rounded-md bg-wald-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-wald-800" onclick={() => goTo(5)}>Zur Ausgabe →</button>
+        {:else if selectedSlugs.size > 0}
+          <button class="rounded-md bg-wald-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-wald-800" onclick={() => goTo(3)}>Fortsetzen →</button>
+        {/if}
+        <button class="rounded-md border border-stein-300 px-3 py-1.5 text-xs text-stein-600 hover:bg-stein-50" onclick={resetAll}>Neu starten</button>
+      </div>
+    </div>
+  {/if}
+
   {#if block.headline}
     <h2 class="mb-2 text-2xl font-bold text-wald-900">{block.headline}</h2>
   {/if}
   {#if block.intro}
-    <div class="prose prose-wald mb-6 max-w-none text-stein-700">
-      {@html md(block.intro)}
-    </div>
+    <div class="prose prose-wald mb-6 max-w-none text-stein-700">{@html md(block.intro)}</div>
   {/if}
 
   <!-- Step indicator -->
   <div class="mb-8 flex items-center gap-1 text-xs font-medium">
-    {#each ([0, 1, 2, 3, 4] as const) as s}
+    {#each Array.from({ length: TOTAL_STEPS }, (_, i) => i) as s}
       <button
         class="flex h-7 w-7 items-center justify-center rounded-full border transition-colors
           {s === step
@@ -249,34 +485,29 @@ Karl-Liebknecht-Straße 4
             : s < step
               ? 'border-wald-400 bg-wald-100 text-wald-700'
               : 'border-stein-300 bg-white text-stein-400'}"
-        onclick={() => { if (s <= step) step = s; }}
+        onclick={() => { if (s <= step) goTo(s as Step); }}
         disabled={s > step}
         aria-current={s === step ? "step" : undefined}
-        title={["Gebiet", "Argumente", "Modus", "Betroffenheit", "Ausgabe"][s]}
+        title={STEP_LABELS[s]}
       >{s + 1}</button>
-      {#if s < 4}
+      {#if s < TOTAL_STEPS - 1}
         <div class="h-px flex-1 {s < step ? 'bg-wald-400' : 'bg-stein-200'}"></div>
       {/if}
     {/each}
   </div>
 
-  <!-- ── Step 0: Gebietskontext ─────────────────────────────────────────── -->
+  <!-- ── Step 0: Gebietskontext ─────────────────────────────────────────────── -->
   {#if step === 0}
     <div>
-      <h3 class="mb-4 text-lg font-semibold text-wald-800">
-        Schritt 1 – Ihr Vorranggebiet
-      </h3>
+      <h3 class="mb-4 text-lg font-semibold text-wald-800">Schritt 1 – Ihr Vorranggebiet</h3>
 
       {#if windArea}
         <div class="mb-6 rounded-xl border border-wald-200 bg-wald-50 p-5">
-          <div class="mb-2 text-xs font-medium uppercase tracking-wide text-wald-600">
-            Vorranggebiet
-          </div>
+          <div class="mb-2 text-xs font-medium uppercase tracking-wide text-wald-600">Vorranggebiet</div>
           <div class="text-xl font-bold text-wald-900">{windArea.gebiets_nr}</div>
           {#if windArea.bezeichnung}
             <div class="mt-0.5 text-base text-wald-700">{windArea.bezeichnung}</div>
           {/if}
-
           <dl class="mt-4 grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
             {#if windArea.gemeinden?.length}
               <div class="col-span-full">
@@ -315,145 +546,228 @@ Karl-Liebknecht-Straße 4
               </div>
             {/if}
           </dl>
-
           {#if windArea.notizen}
-            <div class="mt-4 border-t border-wald-200 pt-3 text-sm text-stein-700">
-              {@html md(windArea.notizen)}
-            </div>
+            <div class="mt-4 border-t border-wald-200 pt-3 text-sm text-stein-700">{@html md(windArea.notizen)}</div>
           {/if}
         </div>
+
+        <!-- Mini-map -->
+        {#if browser && MapComponent && mapReady && mapAreaData.length > 0}
+          <div class="relative mb-6 overflow-hidden rounded-xl border border-stein-200 shadow-sm" style="height:320px">
+            {#await MapComponent then Map}
+              <Map
+                areas={mapAreaData}
+                initialGebietsNr={windArea.gebiets_nr}
+                hiddenStatuses={[]}
+                hiddenRings={["2km","5km"]}
+                fitBoundsMaxZoom={13}
+                onselect={() => {}}
+              />
+            {/await}
+            {#if !mapActive}
+              <button
+                type="button"
+                onclick={() => (mapActive = true)}
+                class="absolute inset-0 z-[500] flex cursor-pointer flex-col items-center justify-center gap-2 bg-black/10 backdrop-blur-[1px]"
+                aria-label="Karte aktivieren"
+              >
+                <span class="rounded-lg bg-white/90 px-4 py-2 text-sm font-medium text-stein-700 shadow">
+                  Klicken zum Aktivieren der Karte
+                </span>
+              </button>
+            {/if}
+          </div>
+        {:else if mapReady && mapAreaData.length === 0}
+          <!-- no geometry available, skip silently -->
+        {:else if !mapReady}
+          <div class="mb-6 flex h-40 items-center justify-center rounded-xl border border-stein-200 bg-stein-50 text-sm text-stein-400">
+            Karte wird geladen …
+          </div>
+        {/if}
+
       {:else}
         <div class="mb-6 rounded-xl border border-erde-200 bg-erde-50 p-4 text-sm text-erde-700">
-          Kein Vorranggebiet konfiguriert. Bitte Seite im CMS einrichten.
+          Kein Vorranggebiet konfiguriert.
         </div>
       {/if}
 
       <p class="mb-6 text-sm text-stein-600">
         Dieser Assistent hilft Ihnen, eine individuelle Einwendung für den
         <strong>2. Entwurf des Regionalplans Südwestthüringen</strong> zu verfassen.
-        Im nächsten Schritt wählen Sie die Argumente, die auf Ihre Situation zutreffen.
+        Sie wählen zuerst ortskonkrete Argumente für Ihr Gebiet, dann allgemeine Einwände.
       </p>
-
-      <button
-        class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
-        disabled={!windArea}
-        onclick={() => (step = 1)}
-      >
-        Weiter zu den Argumenten →
-      </button>
+      <div class="flex flex-wrap items-center gap-3">
+        <button
+          class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
+          disabled={!windArea}
+          onclick={() => goTo(1)}
+        >Weiter zu den Argumenten →</button>
+        {#if selectedSlugs.size > 0 || absenderName}
+          <button class="text-xs text-stein-400 hover:text-stein-600" onclick={resetAll}>Neu starten</button>
+        {/if}
+      </div>
     </div>
 
-  <!-- ── Step 1: Argumente wählen ──────────────────────────────────────── -->
+  <!-- ── Step 1: Ortskonkrete Argumente ───────────────────────────────────── -->
   {:else if step === 1}
     <div>
-      <h3 class="mb-1 text-lg font-semibold text-wald-800">
-        Schritt 2 – Argumente wählen
-      </h3>
+      <h3 class="mb-1 text-lg font-semibold text-wald-800">Schritt 2 – Ortskonkrete Argumente</h3>
       <p class="mb-5 text-sm text-stein-600">
-        Wählen Sie alle Punkte, die auf Ihr Gebiet und Ihre Situation zutreffen.
-        Ortskonkrete Argumente sind vorausgewählt.
+        Diese Argumente beziehen sich direkt auf das Gebiet <strong>{windArea?.gebiets_nr ?? ""}</strong>.
+        Wählen Sie die Punkte, die auf Ihre Situation zutreffen.
       </p>
 
-      {#if ortskonkreteKriterien.length > 0}
-        <div class="mb-6">
-          <div class="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-wald-700">
-            <span class="h-1.5 w-1.5 rounded-full bg-wald-600"></span>
-            Ortskonkrete Argumente
-          </div>
-          <div class="space-y-2">
-            {#each ortskonkreteKriterien as k}
-              <label class="flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors
-                {selectedSlugs.has(k._slug) ? 'border-wald-400 bg-wald-50' : 'border-stein-200 bg-white hover:border-wald-200'}">
+      {#if kriterien.length > 0}
+        <div class="mb-6 space-y-2">
+          {#each kriterien as k}
+            <div class="rounded-lg border transition-colors {selectedSlugs.has(k._slug) ? 'border-wald-400 bg-wald-50' : 'border-stein-200 bg-white'}">
+              <div class="flex items-start gap-3 p-3">
                 <input
                   type="checkbox"
                   class="mt-0.5 h-4 w-4 shrink-0 rounded accent-wald-700"
                   checked={selectedSlugs.has(k._slug)}
                   onchange={() => toggleSlug(k._slug)}
                 />
-                <div>
-                  <div class="font-medium text-stein-800">{k.title ?? slugLabel(k._slug)}</div>
-                  {#if k.bulletPoints?.length}
-                    <ul class="mt-1 space-y-0.5 text-xs text-stein-500">
-                      {#each k.bulletPoints.slice(0, 2) as bp}
-                        <li>– {bp}</li>
-                      {/each}
-                      {#if k.bulletPoints.length > 2}
-                        <li class="text-stein-400">+ {k.bulletPoints.length - 2} weitere …</li>
-                      {/if}
-                    </ul>
-                  {/if}
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center justify-between gap-2">
+                    <span class="cursor-pointer font-medium text-stein-800" onclick={() => toggleSlug(k._slug)}>{k.title ?? k._slug.replace(/_/g, " ")}</span>
+                    {#if k.text}
+                      <button
+                        class="shrink-0 text-wald-500 hover:text-wald-800"
+                        onclick={() => toggleItem(k._slug)}
+                        aria-label={expandedItems.has(k._slug) ? "Einklappen" : "Ausklappen"}
+                      ><Icon icon={expandedItems.has(k._slug) ? "mdi:chevron-up" : "mdi:chevron-down"} class="size-4" /></button>
+                    {/if}
+                  </div>
                 </div>
-              </label>
-            {/each}
-          </div>
-        </div>
-      {/if}
-
-      {#if allgemeineArgList.length > 0}
-        <div class="mb-6">
-          <div class="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-stein-500">
-            <span class="h-1.5 w-1.5 rounded-full bg-stein-400"></span>
-            Allgemeine Argumente
-          </div>
-          <div class="space-y-2">
-            {#each allgemeineArgList as k}
-              <label class="flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors
-                {selectedSlugs.has(k._slug) ? 'border-stein-400 bg-stein-50' : 'border-stein-200 bg-white hover:border-stein-300'}">
-                <input
-                  type="checkbox"
-                  class="mt-0.5 h-4 w-4 shrink-0 rounded accent-stein-600"
-                  checked={selectedSlugs.has(k._slug)}
-                  onchange={() => toggleSlug(k._slug)}
-                />
-                <div>
-                  <div class="font-medium text-stein-800">{k.title ?? slugLabel(k._slug)}</div>
-                  {#if k.bulletPoints?.length}
-                    <ul class="mt-1 space-y-0.5 text-xs text-stein-500">
-                      {#each k.bulletPoints.slice(0, 2) as bp}
-                        <li>– {bp}</li>
-                      {/each}
-                      {#if k.bulletPoints.length > 2}
-                        <li class="text-stein-400">+ {k.bulletPoints.length - 2} weitere …</li>
-                      {/if}
-                    </ul>
-                  {/if}
+              </div>
+              {#if k.text && expandedItems.has(k._slug)}
+                <div class="border-t border-stein-100 px-3 pb-3 pt-2">
+                  <div class="prose prose-sm prose-stein max-w-none text-sm text-stein-700">{@html md(k.text)}</div>
                 </div>
-              </label>
-            {/each}
-          </div>
+              {/if}
+            </div>
+          {/each}
         </div>
-      {/if}
-
-      {#if ortskonkreteKriterien.length === 0 && allgemeineArgList.length === 0}
+      {:else}
         <div class="mb-6 rounded-xl border border-erde-200 bg-erde-50 p-4 text-sm text-erde-700">
-          Noch keine Argumente im CMS hinterlegt.
+          Für dieses Gebiet sind noch keine ortskonkreten Argumente hinterlegt.
         </div>
       {/if}
 
       <div class="flex items-center gap-3">
-        <button
-          class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50"
-          onclick={() => (step = 0)}
-        >← Zurück</button>
-        <button
-          class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
-          disabled={selectedSlugs.size === 0}
-          onclick={() => (step = 2)}
-        >
-          Weiter ({selectedSlugs.size} Argument{selectedSlugs.size !== 1 ? "e" : ""}) →
+        <button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(0)}>← Zurück</button>
+        <button class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800" onclick={() => goTo(2)}>
+          Weiter{ortskonkreteSelectedCount > 0 ? ` (${ortskonkreteSelectedCount} gewählt)` : ""} →
         </button>
       </div>
     </div>
 
-  <!-- ── Step 2: Modus ─────────────────────────────────────────────────── -->
+  <!-- ── Step 2: Allgemeine Argumente ─────────────────────────────────────── -->
   {:else if step === 2}
     <div>
-      <h3 class="mb-1 text-lg font-semibold text-wald-800">
-        Schritt 3 – Ausgabeform
-      </h3>
-      <p class="mb-5 text-sm text-stein-600">
-        Wie soll Ihre Einwendung aufgebaut sein?
+      <h3 class="mb-1 text-lg font-semibold text-wald-800">Schritt 3 – Grundsätzliche Einwände</h3>
+      <p class="mb-1 text-sm text-stein-600">
+        Welche allgemeinen Argumente teilen Sie? Diese gelten unabhängig vom konkreten Standort.
       </p>
+      {#if ortskonkreteSelectedCount > 0}
+        <p class="mb-4 text-xs text-stein-400">
+          Bereits aus Schritt 2 übernommen: {ortskonkreteSelectedCount} ortskonkrete{ortskonkreteSelectedCount !== 1 ? "s Argument" : " Argumente"}.
+        </p>
+      {:else}
+        <p class="mb-4 text-xs text-stein-400">Aus Schritt 2: keine ortskonkreten Argumente ausgewählt.</p>
+      {/if}
+
+      {#if allgemeineGruppen.length > 0}
+        <div class="mb-6 space-y-2">
+          {#each allgemeineGruppen as group}
+            {@const groupSelectedCount = group.items.filter((f) => selectedSlugs.has(f._slug)).length}
+            {@const allSelected = groupSelectedCount === group.items.length}
+            {@const isExpanded = expandedGroups.has(group.slug)}
+            <div class="rounded-lg border {groupSelectedCount > 0 ? 'border-stein-400' : 'border-stein-200'} overflow-hidden">
+              <!-- Group header -->
+              <div class="flex items-center gap-2 bg-stein-50 px-3 py-2.5">
+                <button
+                  class="flex flex-1 items-center gap-2 text-left"
+                  onclick={() => toggleGroup(group.slug)}
+                  aria-expanded={isExpanded}
+                >
+                  <Icon icon={isExpanded ? "mdi:chevron-down" : "mdi:chevron-right"} class="size-4 shrink-0 text-stein-400" />
+                  <span class="font-medium text-stein-800 text-sm">{group.label}</span>
+                  <span class="ml-auto text-xs text-stein-500">
+                    {groupSelectedCount > 0 ? `${groupSelectedCount}/` : ""}{group.items.length}
+                  </span>
+                </button>
+                <button
+                  class="rounded px-2 py-0.5 text-xs font-medium transition
+                    {allSelected ? 'bg-stein-200 text-stein-700 hover:bg-stein-300' : 'bg-wald-100 text-wald-700 hover:bg-wald-200'}"
+                  onclick={() => toggleGroupSelection(group)}
+                  title={allSelected ? "Alle abwählen" : "Alle wählen"}
+                >
+                  {allSelected ? "Alle ab" : "Alle"}
+                </button>
+              </div>
+
+              <!-- Group items -->
+              {#if isExpanded}
+                <div class="divide-y divide-stein-100">
+                  {#each group.items as f}
+                    <div class="transition-colors {selectedSlugs.has(f._slug) ? 'bg-wald-50' : 'bg-white'}">
+                      <div class="flex items-start gap-3 px-3 py-2.5">
+                        <input
+                          type="checkbox"
+                          class="mt-0.5 h-4 w-4 shrink-0 rounded accent-wald-700"
+                          checked={selectedSlugs.has(f._slug)}
+                          onchange={() => toggleSlug(f._slug)}
+                        />
+                        <div class="min-w-0 flex-1">
+                          <div class="flex items-center justify-between gap-2">
+                            <span class="cursor-pointer text-sm font-medium text-stein-800" onclick={() => toggleSlug(f._slug)}>{f.title ?? f._slug.replace(/_/g, " ")}</span>
+                            {#if f.text}
+                              <button
+                                class="shrink-0 text-wald-500 hover:text-wald-800"
+                                onclick={() => toggleItem(f._slug)}
+                                aria-label={expandedItems.has(f._slug) ? "Einklappen" : "Ausklappen"}
+                              ><Icon icon={expandedItems.has(f._slug) ? "mdi:chevron-up" : "mdi:chevron-down"} class="size-4" /></button>
+                            {/if}
+                          </div>
+                        </div>
+                      </div>
+                      {#if f.text && expandedItems.has(f._slug)}
+                        <div class="border-t border-stein-100 px-3 pb-3 pt-2">
+                          <div class="prose prose-sm prose-stein max-w-none text-sm text-stein-700">{@html md(f.text)}</div>
+                        </div>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {:else}
+        <div class="mb-6 rounded-xl border border-erde-200 bg-erde-50 p-4 text-sm text-erde-700">
+          Keine allgemeinen Argumente hinterlegt.
+        </div>
+      {/if}
+
+      <div class="flex items-center gap-3">
+        <button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(1)}>← Zurück</button>
+        <button
+          class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
+          disabled={selectedFragments.length === 0}
+          onclick={() => goTo(3)}
+        >
+          Weiter ({selectedFragments.length} Argument{selectedFragments.length !== 1 ? "e" : ""}) →
+        </button>
+      </div>
+    </div>
+
+  <!-- ── Step 3: Modus ─────────────────────────────────────────────────────── -->
+  {:else if step === 3}
+    <div>
+      <h3 class="mb-1 text-lg font-semibold text-wald-800">Schritt 4 – Ausgabeform</h3>
+      <p class="mb-5 text-sm text-stein-600">Wie soll Ihre Einwendung aufgebaut sein?</p>
 
       <div class="mb-6 grid gap-3 sm:grid-cols-2">
         <label class="flex cursor-pointer flex-col gap-2 rounded-xl border-2 p-4 transition-colors
@@ -461,50 +775,31 @@ Karl-Liebknecht-Straße 4
           <input type="radio" class="sr-only" name="mode" value="fertig" bind:group={mode} />
           <div class="flex items-center justify-between">
             <span class="font-semibold text-wald-900">Fertigtext</span>
-            {#if mode === "fertig"}
-              <span class="text-wald-600">✓</span>
-            {/if}
+            {#if mode === "fertig"}<span class="text-wald-600">✓</span>{/if}
           </div>
-          <p class="text-sm text-stein-600">
-            Ausformulierter Brieftext auf Basis der gewählten Argumente.
-            Ideal als Grundlage zum Anpassen und Ergänzen.
-          </p>
+          <p class="text-sm text-stein-600">Ausformulierter Brieftext. Ideal als Grundlage zum Anpassen.</p>
         </label>
-
         <label class="flex cursor-pointer flex-col gap-2 rounded-xl border-2 p-4 transition-colors
           {mode === 'leitfaden' ? 'border-wald-600 bg-wald-50' : 'border-stein-200 bg-white hover:border-wald-200'}">
           <input type="radio" class="sr-only" name="mode" value="leitfaden" bind:group={mode} />
           <div class="flex items-center justify-between">
             <span class="font-semibold text-wald-900">Leitfaden</span>
-            {#if mode === "leitfaden"}
-              <span class="text-wald-600">✓</span>
-            {/if}
+            {#if mode === "leitfaden"}<span class="text-wald-600">✓</span>{/if}
           </div>
-          <p class="text-sm text-stein-600">
-            Gegliederte Stichpunkte. Schreiben Sie Ihren Text komplett selbst –
-            empfohlen für individuelle Einwendungen.
-          </p>
+          <p class="text-sm text-stein-600">Gegliederte Stichpunkte zum selbst Ausformulieren. Für individuelle Einwendungen empfohlen.</p>
         </label>
       </div>
 
       <div class="flex items-center gap-3">
-        <button
-          class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50"
-          onclick={() => (step = 1)}
-        >← Zurück</button>
-        <button
-          class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800"
-          onclick={() => (step = 3)}
-        >Weiter →</button>
+        <button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(2)}>← Zurück</button>
+        <button class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800" onclick={() => goTo(4)}>Weiter →</button>
       </div>
     </div>
 
-  <!-- ── Step 3: Persönliche Betroffenheit ─────────────────────────────── -->
-  {:else if step === 3}
+  <!-- ── Step 4: Persönliche Betroffenheit ─────────────────────────────────── -->
+  {:else if step === 4}
     <div>
-      <h3 class="mb-1 text-lg font-semibold text-wald-800">
-        Schritt 4 – Persönliche Betroffenheit
-      </h3>
+      <h3 class="mb-1 text-lg font-semibold text-wald-800">Schritt 5 – Persönliche Betroffenheit</h3>
       <p class="mb-2 text-sm text-stein-600">
         Beschreiben Sie kurz, wie Sie persönlich betroffen sind.
         <strong>Wichtig:</strong> Individuelle Betroffenheit stärkt Ihre Einwendung erheblich
@@ -513,7 +808,6 @@ Karl-Liebknecht-Straße 4
       <p class="mb-4 text-xs text-stein-400">
         Beispiel: Ich wohne 800 m vom geplanten Standort entfernt und bin Eigentümer von …
       </p>
-
       <textarea
         class="w-full rounded-lg border border-stein-300 px-4 py-3 text-sm text-stein-800 focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200"
         rows="6"
@@ -521,69 +815,33 @@ Karl-Liebknecht-Straße 4
         bind:value={persoenlicheEingabe}
       ></textarea>
       <p class="mt-1 text-xs text-stein-400">Bleibt auf Ihrem Gerät. Wird nicht übertragen.</p>
-
       <div class="mt-5 flex items-center gap-3">
-        <button
-          class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50"
-          onclick={() => (step = 2)}
-        >← Zurück</button>
-        <button
-          class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800"
-          onclick={() => (step = 4)}
-        >Weiter →</button>
+        <button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(3)}>← Zurück</button>
+        <button class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800" onclick={() => goTo(5)}>Weiter →</button>
       </div>
     </div>
 
-  <!-- ── Step 4: Absender + Ausgabe ────────────────────────────────────── -->
-  {:else if step === 4}
+  <!-- ── Step 5: Absender + Ausgabe ────────────────────────────────────────── -->
+  {:else if step === 5}
     <div>
-      <h3 class="mb-1 text-lg font-semibold text-wald-800">
-        Schritt 5 – Absender & Ausgabe
-      </h3>
-      <p class="mb-1 text-sm text-stein-600">
-        Ihre Daten werden nur lokal zur Texterstellung genutzt.
-      </p>
+      <h3 class="mb-1 text-lg font-semibold text-wald-800">Schritt 6 – Absender & Ausgabe</h3>
+      <p class="mb-4 text-sm text-stein-600">Ihre Daten werden nur lokal zur Texterstellung genutzt.</p>
 
       <div class="mb-5 grid gap-3 sm:grid-cols-2">
         <div>
-          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-name">
-            Vor- und Nachname
-          </label>
-          <input
-            id="absender-name"
-            type="text"
-            class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200"
-            placeholder="Max Mustermann"
-            bind:value={absenderName}
-          />
+          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-name">Vor- und Nachname</label>
+          <input id="absender-name" type="text" class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200" placeholder="Max Mustermann" bind:value={absenderName} />
         </div>
         <div>
-          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-anschrift">
-            Straße und Hausnummer
-          </label>
-          <input
-            id="absender-anschrift"
-            type="text"
-            class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200"
-            placeholder="Hauptstr. 1"
-            bind:value={absenderAnschrift}
-          />
+          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-anschrift">Straße und Hausnummer</label>
+          <input id="absender-anschrift" type="text" class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200" placeholder="Hauptstr. 1" bind:value={absenderAnschrift} />
         </div>
         <div class="sm:col-span-2">
-          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-ort">
-            PLZ und Ort
-          </label>
-          <input
-            id="absender-ort"
-            type="text"
-            class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200"
-            placeholder="98529 Suhl"
-            bind:value={absenderOrt}
-          />
+          <label class="mb-1 block text-xs font-medium text-stein-600" for="absender-ort">PLZ und Ort</label>
+          <input id="absender-ort" type="text" class="w-full rounded-lg border border-stein-300 px-3 py-2 text-sm focus:border-wald-500 focus:outline-none focus:ring-2 focus:ring-wald-200" placeholder="98529 Suhl" bind:value={absenderOrt} />
         </div>
       </div>
 
-      <!-- Empfänger-Info -->
       <div class="mb-5 rounded-lg border border-stein-200 bg-stein-50 p-3 text-xs text-stein-600">
         <div class="mb-1 font-semibold text-stein-700">Einzureichen bei:</div>
         <div class="whitespace-pre">{RECIPIENT}</div>
@@ -594,13 +852,8 @@ Karl-Liebknecht-Straße 4
           class="rounded-lg bg-wald-700 px-6 py-2.5 font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
           disabled={!absenderName.trim()}
           onclick={generateOutput}
-        >
-          Text erstellen
-        </button>
-        <button
-          class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50"
-          onclick={() => (step = 3)}
-        >← Zurück</button>
+        >Text erstellen</button>
+        <button class="rounded-lg border border-stein-300 px-4 py-2 text-sm text-stein-600 hover:bg-stein-50" onclick={() => goTo(4)}>← Zurück</button>
       </div>
 
       {#if showOutput}
@@ -608,31 +861,50 @@ Karl-Liebknecht-Straße 4
           <div class="flex items-center justify-between border-b border-wald-200 px-4 py-3">
             <span class="text-sm font-semibold text-wald-800">Ihre Einwendung</span>
             <div class="flex gap-2">
-              <button
-                class="rounded-md border border-stein-300 px-3 py-1.5 text-xs font-medium text-stein-700 hover:bg-stein-50"
-                onclick={copyText}
-              >
-                {copyFeedback || "Kopieren"}
-              </button>
-              <button
-                class="rounded-md border border-stein-300 px-3 py-1.5 text-xs font-medium text-stein-700 hover:bg-stein-50"
-                onclick={printText}
-              >
-                Drucken / Speichern
-              </button>
+              <button class="rounded-md border border-stein-300 px-3 py-1.5 text-xs font-medium text-stein-700 hover:bg-stein-50" onclick={copyText}>{copyFeedback || "Kopieren"}</button>
+              <button class="rounded-md border border-stein-300 px-3 py-1.5 text-xs font-medium text-stein-700 hover:bg-stein-50" onclick={downloadText}>Herunterladen</button>
+              <button class="rounded-md border border-stein-300 px-3 py-1.5 text-xs font-medium text-stein-700 hover:bg-stein-50" onclick={printText}>Drucken</button>
             </div>
           </div>
-          <pre class="overflow-x-auto whitespace-pre-wrap break-words px-5 py-4 text-sm leading-relaxed text-stein-800 font-sans">{outputText}</pre>
+          <div class="overflow-x-auto whitespace-pre-wrap break-words px-5 py-4 font-sans text-sm leading-relaxed text-stein-800">{outputText}</div>
         </div>
-
         <div class="mt-4 rounded-lg border border-himmel-200 bg-himmel-50 px-4 py-3 text-sm text-himmel-800">
           <strong>Hinweis:</strong> Bitte passen Sie den Text vor dem Einreichen individuell an.
           Einwendungen mit persönlichen Formulierungen sind wirksamer als identische Kopien.
-          Einreichfrist: {#if windArea?.stellungnahme && typeof windArea.stellungnahme === "object" && "slug" in windArea.stellungnahme}
-            siehe Verfahrensbekanntmachung
-          {:else}
-            bitte bei der Planungsstelle erfragen
-          {/if}.
+        </div>
+      {/if}
+
+      <!-- History -->
+      {#if outputHistory.length > 0}
+        <div class="mt-6">
+          <button
+            class="flex w-full items-center justify-between rounded-lg border border-stein-200 bg-stein-50 px-4 py-2.5 text-sm font-medium text-stein-700 hover:bg-stein-100"
+            onclick={() => (historyExpanded = !historyExpanded)}
+          >
+            <span>Frühere Versionen ({outputHistory.length})</span>
+            <Icon icon={historyExpanded ? "mdi:chevron-up" : "mdi:chevron-down"} class="size-4" />
+          </button>
+
+          {#if historyExpanded}
+            <div class="mt-2 space-y-2">
+              {#each outputHistory as entry, i}
+                <div class="rounded-lg border border-stein-200 bg-white">
+                  <div class="flex items-center justify-between border-b border-stein-100 px-4 py-2 text-xs text-stein-500">
+                    <span>{entry.date} · {entry.argCount} Argument{entry.argCount !== 1 ? "e" : ""}</span>
+                    <button
+                      class="text-wald-600 hover:text-wald-800"
+                      onclick={() => { outputText = entry.text; showOutput = true; }}
+                    >Wiederherstellen</button>
+                  </div>
+                  <div class="max-h-40 overflow-y-auto whitespace-pre-wrap break-words px-4 py-3 font-sans text-xs text-stein-600">{entry.text.slice(0, 400)}{entry.text.length > 400 ? " …" : ""}</div>
+                </div>
+              {/each}
+              <button
+                class="text-xs text-stein-400 hover:text-stein-600"
+                onclick={clearHistory}
+              >Verlauf löschen</button>
+            </div>
+          {/if}
         </div>
       {/if}
     </div>