feat(windkarte): Legend-Toggle — Status ein-/ausblendbar per Klick

Klick auf Legendenitem blendet den Status aus (opacity 0, kein Klick,
kein Hover). Panel schließt sich wenn der Status des gewählten Gebiets
ausgeblendet wird. Visuell: opacity + line-through auf versteckten Items.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/components/WindkarteMap.svelte

@@ -8,13 +8,37 @@
     onselect,
     onready = null,
     initialGebietsNr = null,
+    hiddenStatuses = [],
   }: {
     areas: WindArea[];
     onselect: (area: WindArea | null, center: [number, number] | null) => void;
     onready?: ((ctrl: { reset: () => void }) => void) | null;
     initialGebietsNr?: string | null;
+    hiddenStatuses?: string[];
   } = $props();
 
+  // Mirror prop into plain variable so Leaflet event handlers read current value.
+  let _hidden: string[] = [];
+  $effect(() => {
+    _hidden = hiddenStatuses;
+    if (!geojsonLayer) return;
+    restyleAll(selectedSlug);
+    // Deselect if selected area's status was just hidden.
+    if (selectedSlug) {
+      geojsonLayer.eachLayer((l) => {
+        const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature;
+        if (f?.properties?.name === selectedSlug) {
+          const s = f.properties?.status ?? "rechtskraeftig";
+          if (_hidden.includes(s)) {
+            selectedSlug = null;
+            onselect(null, null);
+            bufferLayer?.clearLayers();
+          }
+        }
+      });
+    }
+  });
+
   let mapEl: HTMLDivElement;
   let map: import("leaflet").Map | null = null;
   let bufferLayer: import("leaflet").LayerGroup | null = null;
@@ -46,7 +70,11 @@
       const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature;
       if (!f) return;
       const s = f.properties?.status ?? "rechtskraeftig";
+      if (_hidden.includes(s)) {
+        (l as import("leaflet").Path).setStyle({ opacity: 0, fillOpacity: 0, weight: 0 });
+      } else {
         (l as import("leaflet").Path).setStyle(style(s, f.properties?.name === sel));
+      }
     });
   }
 
@@ -168,19 +196,23 @@
 
           // Hover highlight
           layer.on("mouseover", () => {
-            if (feature.properties?.name !== selectedSlug) {
             const s = feature.properties?.status ?? "rechtskraeftig";
+            if (_hidden.includes(s)) return;
+            if (feature.properties?.name !== selectedSlug) {
               (layer as import("leaflet").Path).setStyle(style(s, false, true));
             }
           });
           layer.on("mouseout", () => {
-            if (feature.properties?.name !== selectedSlug) {
             const s = feature.properties?.status ?? "rechtskraeftig";
+            if (_hidden.includes(s)) return;
+            if (feature.properties?.name !== selectedSlug) {
               (layer as import("leaflet").Path).setStyle(style(s, false, false));
             }
           });
 
           layer.on("click", async (e) => {
+            const s = feature.properties?.status ?? "rechtskraeftig";
+            if (_hidden.includes(s)) return;
             L.DomEvent.stopPropagation(e);
             await selectFeature(L, feature, layer, area);
           });

src/lib/components/blocks/WindkarteBlock.svelte

@@ -21,6 +21,13 @@ let areas = $state<WindArea[]>([]);
   let mapReady = $state(false);
   let initialGebietsNr = $state<string | null>(null);
   let resetMap: (() => void) | null = null;
+  let hiddenStatuses = $state<string[]>([]);
+
+  function toggleStatus(status: string) {
+    hiddenStatuses = hiddenStatuses.includes(status)
+      ? hiddenStatuses.filter((s) => s !== status)
+      : [...hiddenStatuses, status];
+  }
 
   const MapComponent = browser
     ? import("$lib/components/WindkarteMap.svelte").then((m) => m.default)
@@ -105,6 +112,7 @@ let areas = $state<WindArea[]>([]);
         <Map
           {areas}
           {initialGebietsNr}
+          {hiddenStatuses}
           onselect={handleSelect}
           onready={(ctrl) => { resetMap = ctrl.reset; }}
         />
@@ -127,18 +135,22 @@ let areas = $state<WindArea[]>([]);
 
   <!-- Legend -->
   <div class="mt-2 flex flex-wrap gap-x-5 gap-y-1.5 text-xs text-stein-400">
-    <span class="flex items-center gap-1.5">
-      <span class="inline-block size-2.5 rounded-sm" style="background:#2d7a45; opacity:.7"></span>
-      {t(T.windkarte_legend_rechtskraeftig)}
-    </span>
-    <span class="flex items-center gap-1.5">
-      <span class="inline-block size-2.5 rounded-sm" style="background:#b08a52; opacity:.7"></span>
-      {t(T.windkarte_legend_entwurf_2)}
-    </span>
-    <span class="flex items-center gap-1.5">
-      <span class="inline-block size-2.5 rounded-sm" style="background:#d4752a; opacity:.7"></span>
-      {t(T.windkarte_legend_entwurf_2_voraussichtlich)}
-    </span>
+    {#each [
+      { status: "rechtskraeftig",            color: "#2d7a45", label: t(T.windkarte_legend_rechtskraeftig) },
+      { status: "entwurf_2",                 color: "#b08a52", label: t(T.windkarte_legend_entwurf_2) },
+      { status: "entwurf_2_voraussichtlich", color: "#d4752a", label: t(T.windkarte_legend_entwurf_2_voraussichtlich) },
+    ] as item}
+      <button
+        type="button"
+        onclick={() => toggleStatus(item.status)}
+        class="flex items-center gap-1.5 transition-opacity cursor-pointer select-none
+               {hiddenStatuses.includes(item.status) ? 'opacity-35' : 'opacity-100'}"
+        title={hiddenStatuses.includes(item.status) ? 'Einblenden' : 'Ausblenden'}
+      >
+        <span class="inline-block size-2.5 rounded-sm shrink-0" style="background:{item.color}; opacity:.7"></span>
+        <span class="{hiddenStatuses.includes(item.status) ? 'line-through' : ''}">{item.label}</span>
+      </button>
+    {/each}
     <span class="flex items-center gap-x-3 gap-y-1 flex-wrap text-stein-300">
       <span class="text-stein-400">{t(T.windkarte_legend_distances)}</span>
       {#each [{ color: "#e35651", label: "200 m" }, { color: "#b08a52", label: "600 m" }, { color: "#436e85", label: "1 km" }] as ring}