Fix: Logo-Hintergrund, Scroll-Reveal-Bug, Timeline-Dropdown, UI-Cleanup

- Logo: Blau-grauer Hintergrund für Lesbarkeit auf dunkler Navbar
- Scroll-Reveal Fix: Cards in hidden tabs sofort revealed, nur sichtbare via Observer
- Tab-Wechsel: Reveal-Trigger für Cards im neu aktiven Panel
- Timeline-Dropdown: Aufklappbare Uhrzeiten pro Tag, neuester Tag standardmäßig offen
- Entfernt: FC-Quick-Stats im Hero, Powered-by Badge, CTA-Powered-Text
- CSS: Timeline-Dropdown Styles, unused hero-fc/powered-by Styles entfernt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lagebild/index.html

@@ -63,15 +63,6 @@
 
             <!-- Stat Cards -->
             <div class="hero-stats" id="hero-stats"></div>
-
-            <!-- FC Quick Stats -->
-            <div class="hero-fc-stats" id="hero-fc-stats"></div>
-
-            <!-- Powered By -->
-            <div class="hero-powered-by">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-                <span>Daten durch AegisSight Monitor — KI-gestützte OSINT-Analyse</span>
-            </div>
         </div>
     </section>
 
@@ -80,6 +71,7 @@
         <div class="container">
             <div class="timeline-wrapper">
                 <div class="timeline-strip" id="timeline-strip"></div>
+                <div class="timeline-dropdown" id="timeline-dropdown"></div>
             </div>
             <div class="tab-nav" id="tab-nav">
                 <button class="tab-btn active" data-tab="lagebild">Lagebild</button>
@@ -152,7 +144,6 @@
 
             <!-- CTA -->
             <section class="lagebild-cta">
-                <p class="cta-powered-text">Dieses Lagebild wird automatisch durch unseren KI-Monitor erstellt.</p>
                 <div class="cta-content">
                     <h3>Interesse an AegisSight Monitor?</h3>
                     <p>Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.</p>

lagebild/lagebild.css

@@ -32,6 +32,11 @@
     border-bottom: 1px solid var(--lb-border) !important;
     box-shadow: none !important;
 }
+.lagebild-page .logo-img {
+    background: rgba(160, 175, 200, 0.85);
+    padding: 4px 10px;
+    border-radius: 6px;
+}
 .lagebild-page .nav-menu a {
     color: var(--lb-text) !important;
 }
@@ -201,57 +206,6 @@
     margin-top: 2px;
 }
 
-/* Hero FC Quick Stats */
-.hero-fc-stats {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-top: 1.5rem;
-    flex-wrap: wrap;
-}
-.fc-quick-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 14px;
-    border-radius: 20px;
-    font-size: 0.82rem;
-    font-weight: 600;
-}
-.fc-quick-badge svg {
-    flex-shrink: 0;
-}
-.fc-quick-badge.success {
-    background: rgba(16, 185, 129, 0.12);
-    border: 1px solid rgba(16, 185, 129, 0.25);
-    color: #34d399;
-}
-.fc-quick-badge.warning {
-    background: rgba(245, 158, 11, 0.12);
-    border: 1px solid rgba(245, 158, 11, 0.25);
-    color: #fbbf24;
-}
-.fc-quick-badge.error {
-    background: rgba(239, 68, 68, 0.12);
-    border: 1px solid rgba(239, 68, 68, 0.25);
-    color: #f87171;
-}
-
-/* Powered By */
-.hero-powered-by {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 1.5rem;
-    font-size: 0.8rem;
-    color: var(--lb-text-sec);
-}
-.hero-powered-by svg {
-    color: var(--lb-accent);
-    flex-shrink: 0;
-}
-
 /* ---------- Control Bar ---------- */
 .control-bar {
     background: var(--lb-bg-card);
@@ -364,6 +318,62 @@
     margin-top: 2px;
 }
 
+/* Timeline Dropdown */
+.timeline-dropdown {
+    display: none;
+    background: var(--lb-bg-secondary);
+    border: 1px solid var(--lb-border);
+    border-top: none;
+    border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
+    padding: 10px 14px;
+    margin-top: 4px;
+}
+.timeline-dropdown.open {
+    display: block;
+}
+.timeline-dropdown-header {
+    font-size: 0.78rem;
+    color: var(--lb-text-sec);
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+.timeline-snap-list {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+.timeline-snap-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: var(--radius-sm, 4px);
+    border: 1px solid var(--lb-border);
+    background: transparent;
+    color: var(--lb-text-sec);
+    font-size: 0.78rem;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 0.2s;
+}
+.timeline-snap-item:hover {
+    background: var(--lb-bg-card);
+    border-color: rgba(200, 168, 81, 0.4);
+    color: var(--lb-text);
+}
+.timeline-snap-item.active {
+    background: rgba(200, 168, 81, 0.1);
+    border-color: var(--lb-accent);
+    color: var(--lb-accent);
+}
+.timeline-snap-time {
+    font-weight: 600;
+}
+.timeline-snap-meta {
+    font-size: 0.7rem;
+    opacity: 0.7;
+}
+
 /* Tab Navigation */
 .tab-nav {
     display: flex;
@@ -911,11 +921,6 @@
     margin-top: 2rem;
     text-align: center;
 }
-.cta-powered-text {
-    font-size: 0.85rem;
-    color: var(--lb-text-sec);
-    margin-bottom: 1rem;
-}
 .cta-content {
     background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%);
     border: 1px solid var(--lb-border);
@@ -1033,16 +1038,6 @@
     .stat-card-label {
         font-size: 0.65rem;
     }
-    .hero-fc-stats {
-        gap: 6px;
-    }
-    .fc-quick-badge {
-        font-size: 0.75rem;
-        padding: 4px 10px;
-    }
-    .hero-powered-by {
-        font-size: 0.72rem;
-    }
 
     .control-bar .container {
         flex-direction: column;
@@ -1058,6 +1053,16 @@
     .timeline-day-num {
         font-size: 0.95rem;
     }
+    .timeline-dropdown {
+        padding: 8px 10px;
+    }
+    .timeline-snap-list {
+        gap: 4px;
+    }
+    .timeline-snap-item {
+        padding: 5px 10px;
+        font-size: 0.72rem;
+    }
     .tab-nav {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;

lagebild/lagebild.js

@@ -1,6 +1,6 @@
 /**
  * AegisSight Lagebild Page - Dark Theme Design Refresh
- * Count-Up, Timeline, Scroll-Reveal, Smooth-Scroll, Favicons
+ * Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons
  */
 
 /** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */
@@ -11,6 +11,7 @@ var Lagebild = {
     allSnapshots: {},
     currentView: null,
     map: null,
+    timelineGroups: null,
 
     /* ===== Inline SVG Icons ===== */
     icons: {
@@ -18,9 +19,6 @@ var Lagebild = {
         fileText: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
         globe: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
         shieldCheck: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>',
-        checkCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
-        helpCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
-        xCircle: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
         externalLink: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>'
     },
 
@@ -70,23 +68,6 @@ var Lagebild = {
         statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" data-target="' + d.incident.factcheck_count + '">0</span>', 'Faktenchecks');
         document.getElementById('hero-stats').innerHTML = statsHtml;
 
-        // FC Quick Stats
-        var checks = d.fact_checks || [];
-        var stats = { confirmed: 0, unconfirmed: 0, contradicted: 0, developing: 0, established: 0, disputed: 0 };
-        for (var k = 0; k < checks.length; k++) {
-            var st = checks[k].status || 'developing';
-            if (stats[st] !== undefined) stats[st]++;
-        }
-        var confirmed = stats.confirmed + stats.established;
-        var open = stats.unconfirmed + stats.developing;
-        var contradicted = stats.contradicted + stats.disputed;
-
-        var fcHtml = '';
-        fcHtml += '<span class="fc-quick-badge success">' + this.icons.checkCircle + ' <span class="count-up" data-target="' + confirmed + '">0</span>&nbsp;Bestätigt</span>';
-        fcHtml += '<span class="fc-quick-badge warning">' + this.icons.helpCircle + ' <span class="count-up" data-target="' + open + '">0</span>&nbsp;Offen</span>';
-        fcHtml += '<span class="fc-quick-badge error">' + this.icons.xCircle + ' <span class="count-up" data-target="' + contradicted + '">0</span>&nbsp;Widerlegt</span>';
-        document.getElementById('hero-fc-stats').innerHTML = fcHtml;
-
         // Start count-up animations
         var self = this;
         requestAnimationFrame(function() {
@@ -149,6 +130,7 @@ var Lagebild = {
             });
         }
 
+        this.timelineGroups = groups;
         var dates = Object.keys(groups).sort();
         var strip = document.getElementById('timeline-strip');
         var h = '';
@@ -190,7 +172,7 @@ var Lagebild = {
             }, 150);
         }
 
-        // Click handler
+        // Click handler for day buttons
         var self = this;
         strip.addEventListener('click', function(e) {
             var btn = e.target.closest('.timeline-day');
@@ -200,7 +182,13 @@ var Lagebild = {
             for (var k = 0; k < allDays.length; k++) allDays[k].classList.remove('active');
             btn.classList.add('active');
 
+            var dateKey = btn.getAttribute('data-date');
             var snapId = btn.getAttribute('data-snapshot-id');
+
+            // Show dropdown for this day
+            self.showTimelineDropdown(dateKey, snapId);
+
+            // Load latest snapshot
             if (snapId === 'current') {
                 self.currentView = {
                     summary: self.data.current_lagebild.summary_markdown,
@@ -214,6 +202,67 @@ var Lagebild = {
                 self.loadSnapshot(parseInt(snapId));
             }
         });
+
+        // Click handler for dropdown snapshot items (delegated, set up once)
+        var dropdown = document.getElementById('timeline-dropdown');
+        dropdown.addEventListener('click', function(e) {
+            var item = e.target.closest('.timeline-snap-item');
+            if (!item) return;
+
+            var items = dropdown.querySelectorAll('.timeline-snap-item');
+            for (var k = 0; k < items.length; k++) items[k].classList.remove('active');
+            item.classList.add('active');
+
+            var snapId = item.getAttribute('data-snapshot-id');
+            if (snapId === 'current') {
+                self.currentView = {
+                    summary: self.data.current_lagebild.summary_markdown,
+                    sources_json: self.data.current_lagebild.sources_json,
+                    updated_at: self.data.current_lagebild.updated_at || self.data.generated_at,
+                    articles: self.data.articles,
+                    fact_checks: self.data.fact_checks
+                };
+                self.renderCurrentView();
+            } else {
+                self.loadSnapshot(parseInt(snapId));
+            }
+        });
+
+        // Show dropdown for newest day by default
+        var newestDate = dates[dates.length - 1];
+        if (newestDate && groups[newestDate].length > 1) {
+            this.showTimelineDropdown(newestDate, groups[newestDate][0].id);
+        }
+    },
+
+    showTimelineDropdown: function(dateKey, activeSnapId) {
+        var dropdown = document.getElementById('timeline-dropdown');
+        var snaps = this.timelineGroups[dateKey];
+
+        if (!snaps || snaps.length <= 1) {
+            dropdown.classList.remove('open');
+            dropdown.innerHTML = '';
+            return;
+        }
+
+        var d = new Date(dateKey + 'T12:00:00Z');
+        var dateLabel = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });
+
+        var h = '<div class="timeline-dropdown-header">' + dateLabel + ' &mdash; ' + snaps.length + ' Updates</div>';
+        h += '<div class="timeline-snap-list">';
+        for (var i = 0; i < snaps.length; i++) {
+            var snap = snaps[i];
+            var isActive = (String(snap.id) === String(activeSnapId));
+            h += '<button class="timeline-snap-item' + (isActive ? ' active' : '') + '"';
+            h += ' data-snapshot-id="' + snap.id + '">';
+            h += '<span class="timeline-snap-time">' + this.fmtTimeOnly(snap.created_at) + ' Uhr</span>';
+            h += '<span class="timeline-snap-meta">' + snap.article_count + ' Artikel, ' + snap.fact_check_count + ' FC</span>';
+            h += '</button>';
+        }
+        h += '</div>';
+
+        dropdown.innerHTML = h;
+        dropdown.classList.add('open');
     },
 
     toDateKey: function(iso) {
@@ -410,9 +459,12 @@ var Lagebild = {
         legend.addTo(this.map);
 
         // Dark popup styling
+        if (!document.getElementById('leaflet-dark-style')) {
             var style = document.createElement('style');
+            style.id = 'leaflet-dark-style';
             style.textContent = '.lagebild-page .leaflet-popup-content-wrapper{background:#151D2E;color:#E8ECF4;border:1px solid #1E2D45;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,0.4);}.lagebild-page .leaflet-popup-tip{background:#151D2E;}';
             document.head.appendChild(style);
+        }
 
         setTimeout(function() { if (Lagebild.map) Lagebild.map.invalidateSize(); }, 300);
     },
@@ -493,7 +545,15 @@ var Lagebild = {
                 this.classList.add('active');
                 var panels = document.querySelectorAll('.tab-panel');
                 for (var j = 0; j < panels.length; j++) panels[j].classList.remove('active');
-                document.getElementById('panel-' + tab).classList.add('active');
+                var activePanel = document.getElementById('panel-' + tab);
+                activePanel.classList.add('active');
+
+                // Trigger reveal for cards in newly active panel
+                var revealCards = activePanel.querySelectorAll('.reveal:not(.revealed)');
+                for (var k = 0; k < revealCards.length; k++) {
+                    revealCards[k].classList.add('revealed');
+                }
+
                 if (tab === 'karte') self.renderMap();
             });
         }
@@ -535,7 +595,6 @@ var Lagebild = {
     initScrollReveal: function() {
         var cards = document.querySelectorAll('.content-card, .lagebild-cta');
         if (!('IntersectionObserver' in window)) {
-            // Fallback: show all immediately
             for (var i = 0; i < cards.length; i++) cards[i].classList.add('revealed');
             return;
         }
@@ -550,8 +609,14 @@ var Lagebild = {
 
         for (var i = 0; i < cards.length; i++) {
             cards[i].classList.add('reveal');
+            // Immediately reveal cards in the active (visible) tab panel
+            var panel = cards[i].closest('.tab-panel');
+            if (!panel || panel.classList.contains('active')) {
+                cards[i].classList.add('revealed');
+            } else {
                 observer.observe(cards[i]);
             }
+        }
     },
 
     /* ===== HILFSFUNKTIONEN ===== */
@@ -634,6 +699,15 @@ var Lagebild = {
         } catch(e) { return iso; }
     },
 
+    fmtTimeOnly: function(iso) {
+        if (!iso) return '';
+        try {
+            var d = new Date(this.toUTC(iso));
+            if (isNaN(d.getTime())) return iso;
+            return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
+        } catch(e) { return iso; }
+    },
+
     fmtShort: function(iso) {
         if (!iso) return '';
         try { return new Date(this.toUTC(iso)).toLocaleDateString('de-DE', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }); }