fix: Breitere Lagen-Card, Map-Zoom, gemischte Sektionsübergänge

- Iran-Card deutlich breiter (720px), voller Lagebild-Text mit Überschriften
- Weiterlesen-Button entfernt, gesamter Inhalt sichtbar
- Mausrad-Zoom auf Leaflet-Karte aktiviert
- Sektionsübergänge: Chevron (Hero), Gradient-Fades, Diagonale Schnitte
  statt einheitlicher Wellen

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

vorschau/css/style.css

@@ -96,14 +96,14 @@ a { color:inherit; text-decoration:none; }
 .section-dark .section-title { color:var(--white); }
 .section-subtitle { font-size:1.05rem; color:var(--text-light); text-align:center; max-width:600px; margin:0 auto 48px; }
 
-/* ==================== WAVE DIVIDERS ==================== */
+/* ==================== SECTION DIVIDERS ==================== */
-.wave-divider { line-height:0; margin:0; overflow:hidden; }
+.divider { line-height:0; margin:0; overflow:hidden; }
-.wave-divider svg { display:block; width:100%; height:auto; }
+.divider svg { display:block; width:100%; height:auto; }
-.wave-dark-to-light { background:var(--alt-solid); }
+.divider-chevron { background:var(--alt-solid); }
-.wave-alt-to-base { background:var(--base); }
+.divider-diagonal { background:var(--base); }
-.wave-base-to-alt { background:var(--base); }
+.divider-diagonal-dark { background:var(--base); }
-.wave-base-to-dark { background:var(--base); }
+.divider-gradient-alt-to-base { height:80px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
-.wave-dark-to-base { background:var(--base); }
+.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
 
 /* ==================== GRID ==================== */
 .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@@ -133,7 +133,7 @@ a { color:inherit; text-decoration:none; }
 /* ==================== 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 { width:720px; 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; }
@@ -153,12 +153,13 @@ a { color:inherit; text-decoration:none; }
 .stat-label { display:block; font-size:0.72rem; color:var(--text-light); margin-top:3px; }
 
 .demo-excerpt { margin-bottom:16px; }
-.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; max-height:120px; overflow:hidden; position:relative; transition:max-height 0.4s ease; }
+.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; }
-.excerpt-text.expanded { max-height:600px; }
-.excerpt-text:not(.expanded)::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(transparent,var(--white)); }
-.excerpt-toggle { background:none; border:none; color:var(--gold); font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; padding:6px 0; }
-.excerpt-toggle:hover { color:var(--gold-dark); }
 
+.excerpt-text h2 { font-size:1.05rem; font-weight:700; color:var(--navy); margin:20px 0 8px; }
+.excerpt-text h3 { font-size:0.95rem; font-weight:600; color:var(--navy); margin:16px 0 6px; }
+.excerpt-text p { margin-bottom:10px; }
+.excerpt-text ul { margin:8px 0 12px 20px; }
+.excerpt-text li { margin-bottom:4px; font-size:0.88rem; color:var(--text); }
 .demo-updated { font-size:0.82rem; color:var(--text-light); margin-bottom:16px; }
 .placeholder-title { color:var(--gray-400); }
 .placeholder-text { font-size:0.95rem; color:var(--gray-400); flex:1; display:flex; align-items:center; justify-content:center; min-height:180px; }

vorschau/index.html

@@ -101,9 +101,9 @@
         </div>
     </section>
 
-    <!-- Wave: Hero -> Demos -->
+    <!-- Chevron: Hero -> Demos -->
-    <div class="wave-divider wave-dark-to-light">
+    <div class="divider divider-chevron">
-        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,40 C360,80 720,0 1080,40 C1260,60 1380,50 1440,40 L1440,0 L0,0 Z" fill="#0A1832"/></svg>
+        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,0 L720,80 L1440,0 L1440,0 L0,0 Z" fill="#0A1832"/></svg>
     </div>
 
     <!-- Live Demos / Showcase -->
@@ -135,7 +135,6 @@
                         </div>
                         <div class="demo-excerpt" id="demo-excerpt">
                             <div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
-                            <button class="excerpt-toggle" id="excerpt-toggle" style="display:none">Weiterlesen</button>
                         </div>
                         <div class="demo-updated" id="demo-updated">Daten werden geladen...</div>
                         <a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
@@ -147,7 +146,7 @@
                         <p class="placeholder-text">In Vorbereitung</p>
                     </div>
                     <!-- Placeholder 3 -->
-                    <div class="carousel-card card-placeholder" data-index="2"data-index="1">
+                    <div class="carousel-card card-placeholder" data-index="2">
                         <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>
@@ -168,10 +167,8 @@
         </div>
     </section>
 
-    <!-- Wave: Demos -> Problem -->
+    <!-- Gradient: Demos -> Problem -->
-    <div class="wave-divider wave-alt-to-base">
+    <div class="divider divider-gradient-alt-to-base"></div>
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,0 C480,60 960,0 1440,30 L1440,60 L0,60 Z" fill="#F0F3F7"/></svg>
-    </div>
 
     <!-- Problem Statement -->
     <section class="section section-base" id="problem">
@@ -203,9 +200,9 @@
         </div>
     </section>
 
-    <!-- Wave: Problem -> Solution -->
+    <!-- Diagonal: Problem -> Solution -->
-    <div class="wave-divider wave-base-to-alt">
+    <div class="divider divider-diagonal">
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,30 C360,0 720,60 1080,20 C1260,5 1380,15 1440,30 L1440,60 L0,60 Z" fill="#F0F3F7"/></svg>
+        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#F0F3F7"/></svg>
     </div>
 
     <!-- Solution / Workflow -->
@@ -234,10 +231,8 @@
         </div>
     </section>
 
-    <!-- Wave: Solution -> Features -->
+    <!-- Gradient: Solution -> Features -->
-    <div class="wave-divider wave-alt-to-base">
+    <div class="divider divider-gradient-alt-to-base"></div>
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,20 C240,60 480,0 720,40 C960,60 1200,10 1440,30 L1440,60 L0,60 Z" fill="#F0F3F7"/></svg>
-    </div>
 
     <!-- Features -->
     <section class="section section-base" id="features">
@@ -290,9 +285,9 @@
         </div>
     </section>
 
-    <!-- Wave: Features -> Trust -->
+    <!-- Diagonal: Features -> Trust -->
-    <div class="wave-divider wave-base-to-dark">
+    <div class="divider divider-diagonal-dark">
-        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,40 C480,80 960,0 1440,50 L1440,80 L0,80 Z" fill="#0A1832"/></svg>
+        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#0A1832"/></svg>
     </div>
 
     <!-- Trust / Unser Versprechen -->
@@ -332,10 +327,8 @@
         </div>
     </section>
 
-    <!-- Wave: Trust -> CTA -->
+    <!-- Gradient: Trust -> CTA -->
-    <div class="wave-divider wave-dark-to-base">
+    <div class="divider divider-gradient-dark-to-base"></div>
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,0 C360,50 720,10 1080,40 C1260,55 1380,30 1440,20 L1440,60 L0,60 Z" fill="#0A1832"/></svg>
-    </div>
 
     <!-- Contact CTA -->
     <section class="section section-base" id="contact">

vorschau/js/app.js

@@ -147,14 +147,10 @@
 
                 // Excerpt
                 var excerptEl = document.getElementById('excerpt-text');
-                var toggleBtn = document.getElementById('excerpt-toggle');
                 if (excerptEl && lag.summary_markdown) {
+                    // Show full lagebild text
                     excerptEl.innerHTML = mdToHtml(lag.summary_markdown);
-                    toggleBtn.style.display = 'inline-block';
+
-                    toggleBtn.addEventListener('click', function () {
-                        var expanded = excerptEl.classList.toggle('expanded');
-                        this.textContent = expanded ? 'Weniger anzeigen' : 'Weiterlesen';
-                    });
                 }
 
                 // Map
@@ -177,7 +173,7 @@
             center: [33.0, 48.0],
             zoom: 5,
             zoomControl: true,
-            scrollWheelZoom: false,
+            scrollWheelZoom: true,
             minZoom: 2,
             maxBounds: [[-85, -180], [85, 180]],
             maxBoundsViscosity: 1.0