diff --git a/src/lib/components/WindkarteMap.svelte b/src/lib/components/WindkarteMap.svelte
index 04086ba..ae01382 100644
--- a/src/lib/components/WindkarteMap.svelte
+++ b/src/lib/components/WindkarteMap.svelte
@@ -35,6 +35,8 @@
             selectedSlug = null;
             onselect(null, null);
             bufferLayer?.clearLayers();
+            if (ring2kmLayer && map?.hasLayer(ring2kmLayer)) map.removeLayer(ring2kmLayer);
+            if (ring5kmLayer && map?.hasLayer(ring5kmLayer)) map.removeLayer(ring5kmLayer);
           }
         }
       });
@@ -44,18 +46,20 @@
   let mapEl: HTMLDivElement;
   let map: import("leaflet").Map | null = null;
   let bufferLayer: import("leaflet").LayerGroup | null = null;
+  let ring2kmLayer: import("leaflet").LayerGroup | null = null;
+  let ring5kmLayer: import("leaflet").LayerGroup | null = null;
   let labelLayer: import("leaflet").LayerGroup | null = null;
   let selectedSlug = $state<string | null>(null);
   let geojsonLayer: import("leaflet").GeoJSON | null = null;
   let buffering = $state(false);
-  let permanentRing2km = $state<import("leaflet").LayerGroup | null>(null);
-  let permanentRing5km = $state<import("leaflet").LayerGroup | null>(null);
+  let _hiddenRings: string[] = ["2km", "5km"];
 
   $effect(() => {
-    const hidden = hiddenRings;
-    for (const [key, layer] of [["2km", permanentRing2km], ["5km", permanentRing5km]] as [string, import("leaflet").LayerGroup | null][]) {
-      if (!layer || !map) continue;
-      if (hidden.includes(key)) {
+    _hiddenRings = hiddenRings;
+    if (!map) return;
+    for (const [key, layer] of [["2km", ring2kmLayer], ["5km", ring5kmLayer]] as [string, import("leaflet").LayerGroup | null][]) {
+      if (!layer) continue;
+      if (_hiddenRings.includes(key)) {
         if (map.hasLayer(layer)) map.removeLayer(layer);
       } else {
         if (!map.hasLayer(layer)) map.addLayer(layer);
@@ -111,6 +115,21 @@
         style: { color, fillColor: color, fillOpacity: 0.05, weight: 1.5, dashArray: dash },
       }).addTo(bufferLayer!);
     }
+
+    // 2km / 5km — always compute on selection, show/hide controlled by hiddenRings toggle
+    if (!ring2kmLayer) ring2kmLayer = L.layerGroup();
+    else ring2kmLayer.clearLayers();
+    if (!ring5kmLayer) ring5kmLayer = L.layerGroup();
+    else ring5kmLayer.clearLayers();
+
+    const b2 = buffer(feature, 2, { units: "kilometers" });
+    if (b2) L.geoJSON(b2, { style: { color: "#5e6fa3", fillColor: "#5e6fa3", fillOpacity: 0.05, weight: 1.5, dashArray: "10 5" } }).addTo(ring2kmLayer);
+    const b5 = buffer(feature, 5, { units: "kilometers" });
+    if (b5) L.geoJSON(b5, { style: { color: "#8a567a", fillColor: "#8a567a", fillOpacity: 0.05, weight: 1.5, dashArray: "14 6" } }).addTo(ring5kmLayer);
+
+    if (!_hiddenRings.includes("2km") && !map!.hasLayer(ring2kmLayer)) map!.addLayer(ring2kmLayer);
+    if (!_hiddenRings.includes("5km") && !map!.hasLayer(ring5kmLayer)) map!.addLayer(ring5kmLayer);
+
     buffering = false;
   }
 
@@ -136,6 +155,8 @@
     } else {
       onselect(null, null);
       bufferLayer?.clearLayers();
+      if (ring2kmLayer && map!.hasLayer(ring2kmLayer)) map!.removeLayer(ring2kmLayer);
+      if (ring5kmLayer && map!.hasLayer(ring5kmLayer)) map!.removeLayer(ring5kmLayer);
     }
 
     if (zoom && prev !== name) {
@@ -176,6 +197,8 @@
       restyleAll(null);
       onselect(null, null);
       bufferLayer?.clearLayers();
+      if (ring2kmLayer && map!.hasLayer(ring2kmLayer)) map!.removeLayer(ring2kmLayer);
+      if (ring5kmLayer && map!.hasLayer(ring5kmLayer)) map!.removeLayer(ring5kmLayer);
     });
 
     try {
@@ -274,19 +297,6 @@
       map.on("zoomend", syncLabels);
       syncLabels();
 
-      // Permanent 2km / 5km rings for all areas (built async, shown/hidden via hiddenRings prop)
-      const { buffer: turfBuffer } = await import("@turf/buffer");
-      const r2 = L.layerGroup();
-      const r5 = L.layerGroup();
-      for (const feature of geo.features) {
-        const b2 = turfBuffer(feature, 2, { units: "kilometers" });
-        if (b2) L.geoJSON(b2, { style: { color: "#5e6fa3", fillColor: "#5e6fa3", fillOpacity: 0.04, weight: 1.5, dashArray: "10 5" }, interactive: false }).addTo(r2);
-        const b5 = turfBuffer(feature, 5, { units: "kilometers" });
-        if (b5) L.geoJSON(b5, { style: { color: "#8a567a", fillColor: "#8a567a", fillOpacity: 0.03, weight: 1.5, dashArray: "14 6" }, interactive: false }).addTo(r5);
-      }
-      permanentRing2km = r2;
-      permanentRing5km = r5;
-
       // Auto-select from hash
       if (initialGebietsNr) {
         const entry = layerMap.get(initialGebietsNr);