From 77fee9b1c235d883afa36267c039ea435b76cf2c Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sat, 30 May 2026 11:43:01 +0200
Subject: [PATCH] feat(stellungnahme): Step-0 als Cards, Step-3 ohne
 Mindest-Auswahl, Steckbrief default offen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Step 0 (Gebietskontext):
- Gebiets-Nummer (W-37) deutlich größer: text-4xl tracking-tight
- Detail-Felder als Cards: rounded-lg border-wald-200 bg-white/70 p-3 shadow-sm
- Icons (Gemeinden, Fläche, Anlagen geplant, Max. Höhe, Investor, Status)
  oben links als eigenes Element statt inline; size-5 text-wald-600
- Labels: text-sm sm:text-base font-semibold text-wald-800 whitespace-nowrap
  (kleiner auf Mobile damit "Anlagen geplant" in der Card bleibt)
- Werte: text-stein-600 (grau) mit mt-1 Abstand
- Steckbrief-<details> default open

Step 2 (Allgemeine Argumente):
- "Weiter"-Button nicht mehr disabled bei 0 Auswahl — Mindest-Auswahl
  weggefallen, Anzahl nur im Label wenn >0

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../blocks/StellingnahmeGeneratorBlock.svelte | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte b/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
index 4ad1a44..cc4f941 100644
--- a/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
+++ b/src/lib/components/blocks/StellingnahmeGeneratorBlock.svelte
@@ -561,50 +561,56 @@ ${"=".repeat(64)}`;
       {#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="text-xl font-bold text-wald-900">{windArea.gebiets_nr}</div>
+          <div class="text-4xl font-bold tracking-tight 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">
+          <dl class="mt-4 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
             {#if windArea.gemeinden?.length}
-              <div class="col-span-full">
-                <dt class="text-stein-500">Gemeinden</dt>
-                <dd class="font-medium text-stein-800">{windArea.gemeinden.join(", ")}</dd>
+              <div class="col-span-full rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:home-group" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Gemeinden</dt>
+                <dd class="mt-1 text-stein-600">{windArea.gemeinden.join(", ")}</dd>
               </div>
             {/if}
             {#if windArea.flaeche_ha}
-              <div>
-                <dt class="text-stein-500">Fläche</dt>
-                <dd class="font-medium text-stein-800">{windArea.flaeche_ha.toLocaleString("de-DE")} ha</dd>
+              <div class="rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:vector-square" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Fläche</dt>
+                <dd class="mt-1 text-stein-600">{windArea.flaeche_ha.toLocaleString("de-DE")} ha</dd>
               </div>
             {/if}
             {#if windArea.anlagen_geplant}
-              <div>
-                <dt class="text-stein-500">Anlagen geplant</dt>
-                <dd class="font-medium text-stein-800">{windArea.anlagen_geplant}</dd>
+              <div class="rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:wind-turbine" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Anlagen geplant</dt>
+                <dd class="mt-1 text-stein-600">{windArea.anlagen_geplant}</dd>
               </div>
             {/if}
             {#if windArea.hoehe_max_m}
-              <div>
-                <dt class="text-stein-500">Max. Höhe</dt>
-                <dd class="font-medium text-stein-800">{windArea.hoehe_max_m} m</dd>
+              <div class="rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:arrow-expand-vertical" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Max. Höhe</dt>
+                <dd class="mt-1 text-stein-600">{windArea.hoehe_max_m} m</dd>
               </div>
             {/if}
             {#if windArea.investor}
-              <div>
-                <dt class="text-stein-500">Investor</dt>
-                <dd class="font-medium text-stein-800">{windArea.investor}</dd>
+              <div class="rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:domain" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Investor</dt>
+                <dd class="mt-1 text-stein-600">{windArea.investor}</dd>
               </div>
             {/if}
             {#if windArea.status}
-              <div>
-                <dt class="text-stein-500">Status</dt>
-                <dd class="font-medium text-stein-800 capitalize">{windArea.status.replace(/_/g, " ")}</dd>
+              <div class="rounded-lg border border-wald-200 bg-white/70 p-3 shadow-sm">
+                <Icon icon="mdi:flag-outline" class="mb-1 size-5 text-wald-600" aria-hidden="true" />
+                <dt class="whitespace-nowrap text-sm font-semibold text-wald-800 sm:text-base">Status</dt>
+                <dd class="mt-1 text-stein-600 capitalize">{windArea.status.replace(/_/g, " ")}</dd>
               </div>
             {/if}
           </dl>
           {#if windArea.notizen}
-            <details class="mt-4 border-t border-wald-200 pt-3">
+            <details class="mt-4 border-t border-wald-200 pt-3" open>
               <summary class="flex cursor-pointer items-center gap-1 text-sm font-medium text-wald-700 list-none">
                 <Icon icon="mdi:chevron-down" class="det-chevron size-4" />
                 Steckbrief des Gebiets
@@ -851,11 +857,10 @@ ${"=".repeat(64)}`;
       <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-5 py-2.5 text-sm font-semibold text-white transition hover:bg-wald-800 disabled:opacity-40"
-          disabled={selectedFragments.length === 0}
+          class="rounded-lg bg-wald-700 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-wald-800"
           onclick={() => goTo(3)}
         >
-          Weiter ({selectedFragments.length} Argument{selectedFragments.length !== 1 ? "e" : ""}) →
+          Weiter{selectedFragments.length > 0 ? ` (${selectedFragments.length} Argument${selectedFragments.length !== 1 ? "e" : ""})` : ""} →
         </button>
       </div>
     </div>