diff --git a/vorschau/css/style.css b/vorschau/css/style.css index 430f36d..a39fa29 100644 --- a/vorschau/css/style.css +++ b/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 ==================== */ -.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; } diff --git a/vorschau/index.html b/vorschau/index.html index 268e50c..5f763a8 100644 --- a/vorschau/index.html +++ b/vorschau/index.html @@ -101,9 +101,9 @@ - -
- + +
+
@@ -135,7 +135,6 @@
Lagebild wird geladen...
-
Daten werden geladen...
Vollständiges Lagebild öffnen @@ -147,7 +146,7 @@

In Vorbereitung

- - -
- + +
+
@@ -234,10 +231,8 @@
- -
- -
+ +
@@ -290,9 +285,9 @@
- -
- + +
+
@@ -332,10 +327,8 @@
- -
- -
+ +
diff --git a/vorschau/js/app.js b/vorschau/js/app.js index e8ebb15..7ee1a69 100644 --- a/vorschau/js/app.js +++ b/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