fix: Stats in Boxen mit Titel, kleinerer Abstand zum Workflow

- 'Grosslage - Irankonflikt' als Titel ueber den Stats
- Zahlen in einzelnen Boxen mit Schatten und Rahmen
- Uebergangsbereich zwischen Workflow und Stats deutlich kleiner

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

vorschau/css/style.css

@@ -102,7 +102,7 @@ a { color:inherit; text-decoration:none; }
 .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-alt-to-base { height:40px; 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 ==================== */
@@ -130,14 +130,16 @@ 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; }
 
+/* ==================== DEMOS SECTION ==================== */
+#demos { padding-top:48px; }
+
 /* ==================== LIVE STATS BAR ==================== */
-.live-stats-bar { display:flex; justify-content:center; align-items:center; gap:48px; margin-bottom:40px; flex-wrap:wrap; }
-.live-stat { text-align:center; }
-.live-stat-value { display:block; font-size:2.8rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.02em; }
+.live-stats-bar { margin-bottom:40px; text-align:center; }
+.live-stats-title { font-size:1rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
+.live-stats-row { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
+.live-stat { text-align:center; background:var(--white); border-radius:var(--radius-lg); padding:20px 32px; box-shadow:var(--shadow); border:1px solid var(--gray-100); min-width:160px; }
+.live-stat-value { display:block; font-size:2.4rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.02em; }
 .live-stat-label { display:block; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }
-.live-stat-updated { font-size:0.82rem; color:var(--text-light); display:flex; align-items:center; gap:6px; }
-.live-stat-updated::before { content:''; width:8px; height:8px; border-radius:50%; background:#4CAF50; animation:livePulse 2s infinite; }
-@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
 
 /* ==================== 3D CAROUSEL ==================== */
 .carousel-viewport { overflow:hidden; padding:20px 0; position:relative; }

vorschau/index.html

@@ -140,6 +140,8 @@
         <div class="container">
             <!-- Live Stats Bar -->
             <div class="live-stats-bar">
+                <div class="live-stats-title">Grosslage - Irankonflikt</div>
+                <div class="live-stats-row">
                     <div class="live-stat">
                         <span class="live-stat-value" id="stat-articles">...</span>
                         <span class="live-stat-label">Artikel</span>
@@ -153,6 +155,7 @@
                         <span class="live-stat-label">Faktenchecks</span>
                     </div>
                 </div>
+            </div>
 
             <!-- 3D Carousel -->
             <div class="carousel-viewport">