Karten-Legende einklappbar machen

User-Report: Legende verdeckt die Karte unten rechts.

Fix für beide Map-Files (tourenplan.html + tourenplan-mit-tram.html):
- Default eingeklappt — nur Header sichtbar (~150x35px statt ~240x340px)
- Klick auf Header togglet open/close, Pfeil rotiert
- Body scrollbar bei max-height 280px (nicht mehr Viewport-überschreitend)
- disableClickPropagation + disableScrollPropagation damit Klicks
  im Legenden-Panel nicht als Map-Klicks interpretiert werden
  (vorher: Klick auf Header öffnete versehentlich Hotel-Popup)
- Font-size kompakter (12-13px statt 13-14px)
- tourenplan.html behält Layer-Toggle (Action/Fun/Sight-Filter),
  tourenplan-mit-tram.html nicht (ÖPNV-Filter ist eigenes Panel)

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 => {