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/css/style.css

@@ -130,11 +130,17 @@ a { color:inherit; text-decoration:none; }
 .feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
 .feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
 
-/* ==================== CAROUSEL ==================== */
-.carousel-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -24px; padding:0 24px; }
-.carousel-wrapper::-webkit-scrollbar { display:none; }
-.carousel { display:flex; gap:24px; padding:8px 0 16px; }
-.carousel-card { min-width:340px; max-width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; }
+/* ==================== 3D CAROUSEL ==================== */
+.carousel-viewport { perspective:1200px; overflow:visible; padding:40px 0 20px; }
+.carousel-track { display:flex; justify-content:center; align-items:center; position:relative; min-height:440px; }
+.carousel-card { width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; }
+.carousel-card.active { transform:scale(1) translateX(0) rotateY(0); z-index:3; opacity:1; pointer-events:all; }
+.carousel-card.left { transform:scale(0.78) translateX(-110%) rotateY(12deg); z-index:1; opacity:0.5; pointer-events:all; }
+.carousel-card.right { transform:scale(0.78) translateX(110%) rotateY(-12deg); z-index:1; opacity:0.5; pointer-events:all; }
+.carousel-card.hidden { transform:scale(0.6) translateX(0); z-index:0; opacity:0; pointer-events:none; }
+.carousel-nav { display:flex; justify-content:center; gap:10px; margin-top:24px; }
+.carousel-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
+.carousel-dot.active { background:var(--gold); }
 .card-live { border:2px solid var(--gold); box-shadow:0 4px 24px rgba(200,168,81,0.15); }
 .card-placeholder { border:2px dashed var(--gray-200); opacity:0.55; }
 .demo-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; width:fit-content; background:var(--gold); color:var(--navy); }
@@ -162,18 +168,17 @@ a { color:inherit; text-decoration:none; }
 .map-title { font-size:1.1rem; font-weight:600; color:var(--navy); margin-bottom:16px; text-align:center; }
 #map-container { height:420px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-100); }
 
-/* Map pulse markers */
-.pulse-marker { width:12px; height:12px; border-radius:50%; position:relative; }
-.pulse-marker::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid; opacity:0.5; animation:mapPulse 2s infinite; }
-.pulse-marker.cat-primary { background:#E74C3C; }
-.pulse-marker.cat-primary::after { border-color:#E74C3C; }
-.pulse-marker.cat-secondary { background:#F39C12; }
-.pulse-marker.cat-secondary::after { border-color:#F39C12; }
-.pulse-marker.cat-tertiary { background:#3498DB; }
-.pulse-marker.cat-tertiary::after { border-color:#3498DB; }
-.pulse-marker.cat-mentioned { background:#95A5A6; }
-.pulse-marker.cat-mentioned::after { border-color:#95A5A6; }
-@keyframes mapPulse { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(2.5);opacity:0} }
+/* Map pulse markers (exact lagebild style) */
+.pulse-marker-wrapper { position:relative; width:20px; height:20px; }
+.pulse-marker-ring { position:absolute; inset:0; border-radius:50%; border:2px solid; animation:mapPulseRing 2s infinite; opacity:0; }
+.pulse-marker-ring:nth-child(2) { animation-delay:1s; }
+@keyframes mapPulseRing { 0%{transform:scale(0.5);opacity:0} 30%{opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
+.pulse-marker-dot { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; animation:pulseDot 2s infinite; }
+@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
+/* Dark popup style */
+.leaflet-popup-content-wrapper { background:#151D2E!important; color:#E8ECF4!important; border:1px solid #1E2D45!important; border-radius:4px!important; box-shadow:0 4px 16px rgba(0,0,0,0.4)!important; }
+.leaflet-popup-tip { background:#151D2E!important; }
+.leaflet-popup-content { margin:10px 14px!important; font-size:0.85rem!important; }
 
 /* ==================== TRUST ==================== */
 .trust-grid { margin-top:48px; }
@@ -205,7 +210,7 @@ a { color:inherit; text-decoration:none; }
     .hero-title { font-size:2.8rem; }
     .section { padding:64px 0; }
     .workflow-connector { width:40px; }
-    .carousel-card { min-width:300px; }
+    
 }
 
 @media(max-width:768px) {
@@ -224,12 +229,12 @@ a { color:inherit; text-decoration:none; }
     .hero-cta { flex-direction:column; }
     .hero-cta .btn { width:100%; }
     .footer-content { flex-direction:column; text-align:center; gap:16px; }
-    .carousel-card { min-width:280px; }
+    
     #map-container { height:300px; }
 }
 
 @media(max-width:480px) {
     .hero-title { font-size:1.8rem; }
     .container { padding:0 16px; }
-    .carousel-card { min-width:260px; }
+    
 }