feat(stellungnahme): Step-0 als Cards, Step-3 ohne Mindest-Auswahl, Steckbrief default offen
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>
This commit is contained in:
Peter Meier
@@ -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="mb-2 text-xs font-medium uppercase tracking-wide text-wald-600">Vorranggebiet</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}
|
||||
{/if}
|
||||
<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>
|
||||
{#if windArea.gemeinden?.length}
|
||||
<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>
|
||||
{#if windArea.flaeche_ha}
|
||||
<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>
|
||||
{#if windArea.anlagen_geplant}
|
||||
<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>
|
||||
{#if windArea.hoehe_max_m}
|
||||
<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>
|
||||
{#if windArea.investor}
|
||||
<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>
|
||||
{#if windArea.status}
|
||||
<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}
|
||||
{#if windArea.notizen}
|
||||
<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" />
|
||||
@@ -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"
|
||||
<button
|
||||
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 > 0 ? ` (${selectedFragments.length} Argument${selectedFragments.length !== 1 ? "e" : ""})` : ""} →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user