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>
Dieser Commit ist enthalten in:
Claude Code
2026-04-06 18:26:59 +02:00
Ursprung 9c5ce933fb
Commit bfc545abda
3 geänderte Dateien mit 34 neuen und 44 gelöschten Zeilen

Datei anzeigen

@@ -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 ==================== */
.wave-divider { line-height:0; margin:0; overflow:hidden; }
.wave-divider svg { display:block; width:100%; height:auto; }
.wave-dark-to-light { background:var(--alt-solid); }
.wave-alt-to-base { background:var(--base); }
.wave-base-to-alt { background:var(--base); }
.wave-base-to-dark { background:var(--base); }
.wave-dark-to-base { background:var(--base); }
/* ==================== SECTION DIVIDERS ==================== */
.divider { line-height:0; margin:0; overflow:hidden; }
.divider svg { display:block; width:100%; height:auto; }
.divider-chevron { background:var(--alt-solid); }
.divider-diagonal { background:var(--base); }
.divider-diagonal-dark { background:var(--base); }
.divider-gradient-alt-to-base { height:80px; background:linear-gradient(to bottom, var(--alt-solid), 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.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 { font-size:0.88rem; color:var(--text); line-height:1.65; }
.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; }