From 4a7214255568d9257e3ca036c77f016f6c9cf76e Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 18 May 2026 09:18:38 +0200
Subject: [PATCH] WindAreaPanel: compact key-value rows instead of cards

Label left, value right, divided rows. No more padded bg cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/components/WindAreaPanel.svelte | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/WindAreaPanel.svelte b/src/lib/components/WindAreaPanel.svelte
index 516aea4..e5f7117 100644
--- a/src/lib/components/WindAreaPanel.svelte
+++ b/src/lib/components/WindAreaPanel.svelte
@@ -76,29 +76,29 @@
     <!-- Body -->
     <div class="flex-1 space-y-5 px-5 py-4 text-sm">
       <!-- Kenndaten -->
-      <div class="grid grid-cols-1 gap-2">
+      <div class="flex flex-col divide-y divide-stein-100 border border-stein-100 rounded-lg overflow-hidden text-sm">
         {#if area.flaeche_ha != null}
-          <div class="rounded-lg bg-stein-50 p-3">
-            <p class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</p>
-            <p class="mt-0.5 font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</p>
+          <div class="flex items-center justify-between px-3 py-1.5">
+            <span class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</span>
+            <span class="font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</span>
           </div>
         {/if}
         {#if area.anlagen_geplant != null}
-          <div class="rounded-lg bg-stein-50 p-3">
-            <p class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</p>
-            <p class="mt-0.5 font-semibold text-stein-800">{area.anlagen_geplant}</p>
+          <div class="flex items-center justify-between px-3 py-1.5">
+            <span class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</span>
+            <span class="font-semibold text-stein-800">{area.anlagen_geplant}</span>
           </div>
         {/if}
         {#if area.hoehe_max_m != null}
-          <div class="rounded-lg bg-stein-50 p-3">
-            <p class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</p>
-            <p class="mt-0.5 font-semibold text-stein-800">{area.hoehe_max_m} m</p>
+          <div class="flex items-center justify-between px-3 py-1.5">
+            <span class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</span>
+            <span class="font-semibold text-stein-800">{area.hoehe_max_m} m</span>
           </div>
         {/if}
         {#if area.investor}
-          <div class="rounded-lg bg-stein-50 p-3 col-span-2">
-            <p class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</p>
-            <p class="mt-0.5 font-semibold text-stein-800">{area.investor}</p>
+          <div class="flex items-center justify-between px-3 py-1.5">
+            <span class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</span>
+            <span class="font-semibold text-stein-800">{area.investor}</span>
           </div>
         {/if}
       </div>