feat(windkarte): tap-to-activate overlay for mobile scroll fix

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

src/lib/components/blocks/WindkarteBlock.svelte

@@ -23,6 +23,7 @@ let areas = $state<WindArea[]>([]);
   let resetMap: (() => void) | null = null;
   let hiddenStatuses = $state<string[]>([]);
   let hiddenRings = $state<string[]>(["2km", "5km"]);
+  let mapActive = $state(false);
 
   function toggleStatus(status: string) {
     hiddenStatuses = hiddenStatuses.includes(status)
@@ -131,6 +132,24 @@ let areas = $state<WindArea[]>([]);
       </div>
     {/if}
 
+    <!-- Mobile tap-to-activate overlay (touch devices only) -->
+    {#if !mapActive}
+      <button
+        type="button"
+        onclick={() => { mapActive = true; }}
+        class="map-activate-overlay"
+        aria-label={t(T.windkarte_tap_to_activate)}
+      >
+        <span class="map-activate-label">
+          <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 11l3 3L22 4"/>
+            <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
+          </svg>
+          {t(T.windkarte_tap_to_activate)}
+        </span>
+      </button>
+    {/if}
+
     <!-- Panel: bottom-sheet on mobile, side-panel on sm+ -->
     <div class="panel-slide {selectedArea ? 'open' : ''}" style="pointer-events: none; z-index: 1001;">
       <WindAreaPanel
@@ -217,6 +236,38 @@ let areas = $state<WindArea[]>([]);
     }
   }
 
+  /* Touch-only overlay — hidden on hover-capable devices (desktop/mouse) */
+  .map-activate-overlay {
+    display: none;
+  }
+  @media (hover: none) {
+    .map-activate-overlay {
+      display: flex;
+      position: absolute;
+      inset: 0;
+      z-index: 490;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.25);
+      cursor: pointer;
+      border: none;
+      padding: 0;
+    }
+  }
+  .map-activate-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.92);
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    color: #333735;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.625rem 1rem;
+    pointer-events: none;
+  }
+
   .dashed-line {
     display: inline-block;
     width: 18px;

src/lib/translations.ts

@@ -198,6 +198,7 @@ const TRANSLATION_KEYS = [
   "post_action_reading_time",
   // Windkarte (WindkarteBlock / WindAreaPanel).
   "windkarte_loading",
+  "windkarte_tap_to_activate",
   "windkarte_panel_close",
   "windkarte_reset_aria",
   "windkarte_status_rechtskraeftig",