From 3429a3fd9e77302dc1c32b624590faa05ad42acb Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@anthropic.com>
Date: Sat, 7 Mar 2026 14:54:59 +0100
Subject: [PATCH] Lagebild: Stand-Karte entfernt (Datum in Titel), Control-Bar
 nicht mehr sticky, Timeline-Dropdown Grid-Layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stand stat card entfernt, Datum als Span neben incident-title
- Hero-Stats Grid von 4 auf 3 Spalten, max-width 650px
- Control-Bar: position sticky/top/z-index entfernt
- Timeline-Dropdown: flex -> CSS grid (auto-fill minmax 210px)
- Responsive: Dropdown-Grid für Mobile angepasst (minmax 170px)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lagebild/lagebild.css | 19 +++++++++++--------
 lagebild/lagebild.js  |  7 ++++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css
index c288617..d5904b6 100644
--- a/lagebild/lagebild.css
+++ b/lagebild/lagebild.css
@@ -145,14 +145,19 @@
     color: rgba(255, 255, 255, 0.85);
     margin: 0 0 0.5rem;
 }
+.hero-date-info {
+    font-size: 0.85em;
+    color: rgba(255, 255, 255, 0.5);
+    font-weight: 400;
+}
 
 /* Hero Stat Cards */
 .hero-stats {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-top: 2rem;
-    max-width: 820px;
+    max-width: 650px;
     margin-left: auto;
     margin-right: auto;
 }
@@ -211,9 +216,6 @@
     background: var(--lb-bg-card);
     border-bottom: 1px solid var(--lb-border);
     padding: 0 20px;
-    position: sticky;
-    top: 70px;
-    z-index: 50;
 }
 .control-bar .container {
     max-width: 1000px;
@@ -338,9 +340,9 @@
     font-weight: 500;
 }
 .timeline-snap-list {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
     gap: 6px;
-    flex-wrap: wrap;
 }
 .timeline-snap-item {
     display: inline-flex;
@@ -997,7 +999,7 @@
 /* Tablet */
 @media (max-width: 1024px) {
     .hero-stats {
-        max-width: 600px;
+        max-width: 550px;
     }
     .stat-card {
         padding: 12px 14px;
@@ -1057,6 +1059,7 @@
         padding: 8px 10px;
     }
     .timeline-snap-list {
+        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
         gap: 4px;
     }
     .timeline-snap-item {
diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js
index 6866863..88cdf07 100644
--- a/lagebild/lagebild.js
+++ b/lagebild/lagebild.js
@@ -58,11 +58,12 @@ var Lagebild = {
     /* ===== HERO ===== */
     renderHero: function() {
         var d = this.data;
-        document.getElementById('incident-title').textContent = this.fixUmlauts(d.incident.title);
+        document.getElementById('incident-title').innerHTML =
+            this.esc(this.fixUmlauts(d.incident.title)) +
+            ' <span class="hero-date-info">&mdash; Stand: ' + this.fmtDateOnly(d.generated_at) + '</span>';
 
-        // Stat Cards
+        // Stat Cards (3: Artikel, Quellen, Faktenchecks)
         var statsHtml = '';
-        statsHtml += this.statCard(this.icons.clock, this.fmtDateOnly(d.generated_at), 'Stand');
         statsHtml += this.statCard(this.icons.fileText, '<span class="count-up" data-target="' + d.incident.article_count + '">0</span>', 'Artikel');
         statsHtml += this.statCard(this.icons.globe, '<span class="count-up" data-target="' + d.incident.source_count + '">0</span>', 'Quellen');
         statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" data-target="' + d.incident.factcheck_count + '">0</span>', 'Faktenchecks');