fix: 3D-Karussell + exakte Leaflet-Karte wie /lagebild

- 3D-Perspektiv-Karussell: Zentrale Card gross, seitliche klein/gekippt
- Klick auf seitliche Cards wechselt Ansicht, Dot-Navigation
- Karte mit exakten Pulse-Markern (Ring + Dot Animation)
- Dark Popups und Dark Legende wie bei /lagen/iran-konflikt/
- Kategorie-Farben und Labels aus der API

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vorschau/index.html

@@ -112,11 +112,11 @@
             <h2 class="section-title">Sehen Sie den Monitor in Aktion</h2>
             <p class="section-subtitle">Echte Lagebilder, erstellt vom AegisSight Monitor. Live und ohne Bearbeitung.</p>
 
-            <!-- Carousel -->
-            <div class="carousel-wrapper">
-                <div class="carousel" id="carousel">
+            <!-- 3D Carousel -->
+            <div class="carousel-viewport">
+                <div class="carousel-track" id="carousel">
                     <!-- Iran Card -->
-                    <div class="carousel-card card-live">
+                    <div class="carousel-card card-live active" data-index="0">
                         <div class="demo-badge">LIVE</div>
                         <h3 class="demo-title">Iran-Konflikt</h3>
                         <div class="demo-stats" id="demo-stats-iran">
@@ -141,18 +141,23 @@
                         <a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
                     </div>
                     <!-- Placeholder 2 -->
-                    <div class="carousel-card card-placeholder">
+                    <div class="carousel-card card-placeholder" data-index="1">
                         <div class="demo-badge badge-soon">Demnächst</div>
                         <h3 class="demo-title placeholder-title">Weitere Lage</h3>
                         <p class="placeholder-text">In Vorbereitung</p>
                     </div>
                     <!-- Placeholder 3 -->
-                    <div class="carousel-card card-placeholder">
+                    <div class="carousel-card card-placeholder" data-index="2"data-index="1">
                         <div class="demo-badge badge-soon">Demnächst</div>
                         <h3 class="demo-title placeholder-title">Weitere Lage</h3>
                         <p class="placeholder-text">In Vorbereitung</p>
                     </div>
                 </div>
+                <div class="carousel-nav">
+                    <button class="carousel-dot active" data-index="0"></button>
+                    <button class="carousel-dot" data-index="1"></button>
+                    <button class="carousel-dot" data-index="2"></button>
+                </div>
             </div>
 
             <!-- Map -->