Sprint D: Karten-Familie auf UI.map.create+svgMarker konsolidiert, SW by-v1107

Neue zentrale Helper (in Sprint B vorbereitet) jetzt von 5 Seiten genutzt:

walks.js (1 Karten-Init):
- L.map+L.tileLayer → await UI.map.create('walks-map', {...})
- _initMap zu async, Aufrufer in _switchView und _loadData angepasst
- Mini-Karte im Walk-Formular (Modal) bleibt unverändert
  (braucht eigene dragging/scrollWheelZoom-Options)
- view-toggle nicht migriert (responsive CSS-Konflikt mit Desktop)

poison.js (1 Karten-Init):
- L.map+L.tileLayer → await UI.map.create('poison-map', {...})
- _initMap zu async, manueller UI.loadLeaflet entfernt
- DangerCircle + User-Marker unverändert

events.js (1 Karten-Init + Diamant-Marker):
- await UI.map.create('ev-map', {...})
- Rotierter Diamant: L.divIcon+L.marker → UI.map.svgMarker
  (HTML 1:1 erhalten)

lost.js (1 Karten-Init + Puls-Marker):
- Eigene async _loadLeaflet() Funktion komplett entfernt — UI.map.create
  übernimmt das jetzt zentral
- await UI.map.create('lost-map', {...})
- Puls-Animation 🐕: L.divIcon+L.marker → UI.map.svgMarker
- _initMap zu async

routes.js (6 von 7 Karten-Inits):
- _suggestMap, _recMap, _searchMap, _navMap, trimMap, _buildDetailMap
  alle auf UI.map.create umgestellt + zu async
- _buildMiniMap (Route-Card-Preview) bleibt unverändert
  (braucht 6 spezifische Interaction-Disable Options)
- View-Toggle auf neue .map-list-toggle Klasse umgestellt
  (Border-Inline-Styles raus)

NEUE CSS-KLASSE in components.css:
- .map-list-toggle (vereinheitlichter Karten/Listen-Umschalter)
- Verwendet von routes.js; walks/events können später folgen

Tests 19/19 grün. GPS-Tracking-Logik (Polylines, Recording, Trim)
komplett unangetastet. Marker-Cluster-Logik unverändert.

backend/static/js/pages/walks.js

@@ -222,8 +222,7 @@ window.Page_walks = (() => {
     document.getElementById('walks-map-view').style.display  = view === 'karte' ? '' : 'none';
 
     if (view === 'karte') {
-      UI.loadLeaflet().then(() => {
-        _initMap();
+      _initMap().then(() => {
         setTimeout(() => _map?.invalidateSize(), 150);
         setTimeout(() => _map?.invalidateSize(), 400);
       });
@@ -245,8 +244,7 @@ window.Page_walks = (() => {
       _renderList();
       _renderMarkers();
       if (window.innerWidth >= 1024) {
-        UI.loadLeaflet().then(() => {
-          _initMap();
+        _initMap().then(() => {
           setTimeout(() => _map?.invalidateSize(), 150);
           setTimeout(() => _map?.invalidateSize(), 400);
         });
@@ -363,13 +361,11 @@ window.Page_walks = (() => {
   // ----------------------------------------------------------
   // Leaflet + Karte
   // ----------------------------------------------------------
-  function _initMap() {
+  async function _initMap() {
     const el = document.getElementById('walks-map');
-    if (!el || !window.L || _map) return;
+    if (!el || _map) return;
     const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
-    _map = L.map('walks-map', { zoomControl: true, attributionControl: false })
-             .setView(center, _userPos ? 12 : 6);
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map);
+    _map = await UI.map.create('walks-map', { center, zoom: _userPos ? 12 : 6 });
     _renderMarkers();
   }