diff --git a/tourenplan-mit-tram.html b/tourenplan-mit-tram.html
index 2ad548c..7089060 100644
--- a/tourenplan-mit-tram.html
+++ b/tourenplan-mit-tram.html
@@ -124,11 +124,15 @@
   .layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; }
   .layer-toggle label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; }
   .layer-toggle input { cursor: pointer; }
-  .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); }
-  .legend h4 { margin: 0 0 8px 0; font-size: 14px; }
-  .legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
-  .legend .emoji { font-size: 18px; }
-  .legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; }
+  .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); }
+  .legend h4 { margin: 0; font-size: 13px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
+  .legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; }
+  .legend.open h4 .toggle { transform: rotate(180deg); }
+  .legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; }
+  .legend.open .body { display: block; }
+  .legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; }
+  .legend .emoji { font-size: 14px; }
+  .legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; }
   .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
   .popup-content .emoji-big { font-size: 28px; margin-right: 8px; }
   .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; }
@@ -916,43 +920,30 @@ const legend = L.control({ position: 'bottomright' });
 legend.onAdd = function() {
   const div = L.DomUtil.create('div', 'legend');
   div.innerHTML = `
-    <h4>🥳 JGA Prag Tourenplan</h4>
-    <div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno (Basis)</strong></div>
-    <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
-    <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
-    <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
-    <div class="item"><span class="dot" style="background:#ab47bc"></span>🎳 Bowling</div>
-    <div class="item"><span class="dot" style="background:#7e57c2"></span>👻 Geister-Tour</div>
-    <div class="item"><span class="dot" style="background:#5d4037"></span>🎯 Schießstand</div>
-    <div class="item"><span class="dot" style="background:#ffb300"></span>⛵ Beer Boat</div>
-    <div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
-    <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
-    <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
-    <div class="layer-toggle">
-      <div style="color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div>
-      <label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel (immer sichtbar)</label>
-      <label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label>
-      <label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label>
-      <label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label>
-    </div>
-    <div style="margin-top:8px;padding-top:6px;border-top:1px solid #555;font-size:11px;color:#aaa;">
-      🚇 Metro: <span style="color:#00A562;font-weight:700">A</span> ·
-      <span style="color:#F8B322;font-weight:700">B</span> ·
-      <span style="color:#CF003D;font-weight:700">C</span><br>
-      🚋 Tram: eine Linie zur Zeit wählen (Radio)<br>
-      <span style="font-size:10px;">Marker anklicken für Details</span>
+    <h4 onclick="this.parentElement.classList.toggle('open')">📍 Legende<span class="toggle">▼</span></h4>
+    <div class="body">
+      <div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno</strong></div>
+      <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
+      <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
+      <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
+      <div class="item"><span class="dot" style="background:#ab47bc"></span>🎳 Bowling</div>
+      <div class="item"><span class="dot" style="background:#7e57c2"></span>👻 Geister-Tour</div>
+      <div class="item"><span class="dot" style="background:#5d4037"></span>🎯 Schießstand</div>
+      <div class="item"><span class="dot" style="background:#ffb300"></span>⛵ Beer Boat</div>
+      <div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
+      <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
+      <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
+      <div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--card-border);font-size:11px;">
+        🚇 Metro:
+        <span style="color:#00A562;font-weight:700">A</span> ·
+        <span style="color:#F8B322;font-weight:700">B</span> ·
+        <span style="color:#CF003D;font-weight:700">C</span>
+        &nbsp; 🚋 Tram: Radio
+      </div>
     </div>
   `;
-  setTimeout(() => {
-    div.querySelectorAll('input[data-layer]').forEach(cb => {
-      cb.addEventListener('change', () => {
-        const layer = cb.dataset.layer;
-        (markersByCategory[layer] || []).forEach(m => {
-          if (cb.checked) m.addTo(map); else map.removeLayer(m);
-        });
-      });
-    });
-  }, 10);
+  L.DomEvent.disableClickPropagation(div);
+  L.DomEvent.disableScrollPropagation(div);
   return div;
 };
 legend.addTo(map);
diff --git a/tourenplan.html b/tourenplan.html
index c4f1d4d..e30c025 100644
--- a/tourenplan.html
+++ b/tourenplan.html
@@ -139,11 +139,15 @@
 .layer-toggle input { cursor: pointer; }
 
 /* Legende */
-.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); }
-.legend h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); }
-.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--text); }
-.legend .emoji { font-size: 18px; }
-.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; }
+.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); }
+.legend h4 { margin: 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
+.legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; }
+.legend.open h4 .toggle { transform: rotate(180deg); }
+.legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; }
+.legend.open .body { display: block; }
+.legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--text); font-size: 12px; }
+.legend .emoji { font-size: 14px; }
+.legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; }
   .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
   .popup-content .emoji-big { font-size: 28px; margin-right: 8px; }
   .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; }
@@ -553,27 +557,31 @@ const legend = L.control({ position: 'bottomright' });
 legend.onAdd = function() {
   const div = L.DomUtil.create('div', 'legend');
   div.innerHTML = `
-    <h4>🥳 JGA Prag Tourenplan</h4>
-    <div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno (Basis)</strong></div>
-    <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
-    <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
-    <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
-    <div class="item"><span class="dot" style="background:#ab47bc"></span>🎳 Bowling</div>
-    <div class="item"><span class="dot" style="background:#7e57c2"></span>👻 Geister-Tour</div>
-    <div class="item"><span class="dot" style="background:#5d4037"></span>🎯 Schießstand</div>
-    <div class="item"><span class="dot" style="background:#ffb300"></span>⛵ Beer Boat</div>
-    <div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
-    <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
-    <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
-    <div class="layer-toggle">
-      <div style="color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div>
-      <label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel (immer sichtbar)</label>
-      <label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label>
-      <label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label>
-      <label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label>
+    <h4 onclick="this.parentElement.classList.toggle('open')">📍 Legende<span class="toggle">▼</span></h4>
+    <div class="body">
+      <div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno</strong></div>
+      <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
+      <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
+      <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
+      <div class="item"><span class="dot" style="background:#ab47bc"></span>🎳 Bowling</div>
+      <div class="item"><span class="dot" style="background:#7e57c2"></span>👻 Geister-Tour</div>
+      <div class="item"><span class="dot" style="background:#5d4037"></span>🎯 Schießstand</div>
+      <div class="item"><span class="dot" style="background:#ffb300"></span>⛵ Beer Boat</div>
+      <div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
+      <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
+      <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
+      <div class="layer-toggle">
+        <div style="color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div>
+        <label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel</label>
+        <label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label>
+        <label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label>
+        <label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label>
+      </div>
+      <div style="margin-top:8px;font-size:11px;color:var(--text-muted);">📍 Karten-Zentrum: Hotel</div>
     </div>
-    <div style="margin-top:8px;font-size:11px;color:#aaa;">📍 Karten-Zentrum: Hotel</div>
   `;
+  L.DomEvent.disableClickPropagation(div);
+  L.DomEvent.disableScrollPropagation(div);
   // Layer-Toggle Handler
   setTimeout(() => {
     div.querySelectorAll('input[data-layer]').forEach(cb => {