Lagebild: Quellen-Tab als Tile-Grid mit Aufklapp-Detail

- Quellen werden als 6-Spalten-Kachel-Grid dargestellt (wie im echten Monitor)
- Jede Kachel zeigt Favicon, Quellenname, Sprache und Artikelanzahl
- Klick auf Kachel öffnet Detail-Panel mit allen Artikeln dieser Quelle
- Nur eine Quelle gleichzeitig offen, Panel erscheint unter der Kachel-Reihe
- Gold-Glow Hover-Effekte, Slide-In Animation
- Responsive: 6 Spalten Desktop, 4 Tablet, 2 Mobile
- Live-Feed: Quellen-Zeile entfernt

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

lagebild/index.html

@@ -114,13 +114,14 @@
             <div class="tab-panel" id="panel-quellen">
                 <section class="content-card">
                     <div class="card-header">
-                        <h2>Quellen &amp; Quellenberichte</h2>
+                        <h2>Quellen</h2>
-                        <p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
+                        <p class="card-description">Alle vom AegisSight Monitor überwachten Quellen</p>
+                    </div>
+                    <div class="card-body" id="sources-grid-container">
+                        <div class="loading-skeleton">
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line short"></div>
                         </div>
-                    <div class="card-body">
-                        <div id="sources-cited" class="sources-section"></div>
-                        <h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
-                        <div id="articles-content"></div>
                     </div>
                 </section>
             </div>

lagebild/lagebild.css

@@ -620,51 +620,202 @@
     transition: background 1.5s ease-out;
 }
 
-/* Sources List */
+/* ---------- Source Overview Grid ---------- */
-.sources-section h3 {
+.sources-overview-header {
-    font-size: 1.1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+.sources-overview-title {
+    font-size: 1.05rem;
     font-weight: 700;
     color: var(--lb-text);
-    margin: 0 0 12px;
 }
-.section-subtitle {
+.sources-lang-chips {
-    font-size: 1.1rem;
+    display: flex;
-    font-weight: 700;
+    gap: 8px;
-    color: var(--lb-text);
-    margin: 2rem 0 12px;
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--lb-border);
 }
-.sources-list {
+.sources-lang-chip {
-    list-style: none;
+    background: rgba(200, 168, 81, 0.12);
-    padding: 0;
-    margin: 0;
-    counter-reset: src;
-    columns: 2;
-    column-gap: 24px;
-}
-.sources-list li {
-    counter-increment: src;
-    padding: 4px 0;
-    font-size: 0.88rem;
-    color: var(--lb-text);
-    break-inside: avoid;
-}
-.sources-list li::before {
-    content: "[" counter(src) "]";
     color: var(--lb-accent);
-    font-weight: 700;
+    padding: 4px 12px;
-    font-size: 0.82rem;
+    border-radius: 12px;
-    margin-right: 6px;
+    font-size: 0.78rem;
+    font-weight: 600;
 }
-.sources-list a {
+.sources-grid {
-    color: var(--lb-accent);
+    display: grid;
-    text-decoration: none;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 10px;
 }
-.sources-list a:hover { text-decoration: underline; }
+.source-tile {
-.source-name {
+    background: var(--lb-bg-secondary);
+    border: 1px solid var(--lb-border);
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-height: 64px;
+    min-width: 0;
+    overflow: hidden;
+}
+.source-tile::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--lb-border);
+    border-radius: 4px 4px 0 0;
+    transition: background 0.2s;
+}
+.source-tile:hover {
+    border-color: rgba(200, 168, 81, 0.4);
+    box-shadow: 0 0 20px var(--lb-glow-soft);
+}
+.source-tile:hover::before {
+    background: var(--lb-accent);
+}
+.source-tile.active {
+    border-color: var(--lb-accent);
+    box-shadow: 0 0 24px var(--lb-glow-soft);
+    background: rgba(200, 168, 81, 0.06);
+}
+.source-tile.active::before {
+    background: var(--lb-accent);
+}
+.source-tile-top {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+.source-tile-favicon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+.source-tile-name {
+    font-size: 0.78rem;
     font-weight: 600;
     color: var(--lb-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.source-tile-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: auto;
+}
+.source-tile-lang {
+    font-size: 0.65rem;
+    color: var(--lb-text-sec);
+    background: var(--lb-bg-card);
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid var(--lb-border);
+    text-transform: uppercase;
+}
+.source-tile-count {
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: var(--lb-accent);
+    line-height: 1;
+}
+
+/* Source Detail Panel */
+.source-detail-panel {
+    grid-column: 1 / -1;
+    background: var(--lb-bg-card);
+    border: 1px solid rgba(200, 168, 81, 0.3);
+    border-radius: 4px;
+    overflow: hidden;
+    animation: sourceDetailSlideIn 0.3s ease-out;
+}
+@keyframes sourceDetailSlideIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.source-detail-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--lb-border);
+    background: rgba(200, 168, 81, 0.04);
+}
+.source-detail-name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--lb-text);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.source-detail-count {
+    font-size: 0.85rem;
+    color: var(--lb-text-sec);
+    margin-left: auto;
+}
+.source-detail-close {
+    background: none;
+    border: none;
+    color: var(--lb-text-sec);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+    transition: color 0.2s;
+    font-family: inherit;
+}
+.source-detail-close:hover {
+    color: var(--lb-text);
+}
+.source-detail-articles {
+    padding: 8px 20px 16px;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--lb-border) transparent;
+}
+.source-detail-article {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--lb-border);
+}
+.source-detail-article:last-child {
+    border-bottom: none;
+}
+.source-detail-article-title {
+    font-size: 0.88rem;
+    color: var(--lb-text);
+    text-decoration: none;
+    flex: 1;
+    min-width: 0;
+    line-height: 1.4;
+}
+a.source-detail-article-title:hover {
+    color: var(--lb-accent);
+}
+.source-detail-article-date {
+    font-size: 0.78rem;
+    color: var(--lb-text-sec);
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
 /* Inline sources (Lagebild tab footer) - Collapsible */
@@ -727,92 +878,7 @@
     text-decoration: underline;
 }
 
-/* ---------- Article Cards ---------- */
+
-.article-card {
-    display: flex;
-    gap: 16px;
-    padding: 16px 0;
-    border-bottom: 1px solid var(--lb-border);
-}
-.article-card:last-child { border-bottom: none; }
-.article-date {
-    flex-shrink: 0;
-    width: 60px;
-    text-align: center;
-}
-.article-date .day {
-    display: block;
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--lb-accent);
-    line-height: 1;
-}
-.article-date .month {
-    display: block;
-    font-size: 0.72rem;
-    color: var(--lb-text-sec);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.article-info {
-    flex: 1;
-    min-width: 0;
-}
-.article-headline {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: var(--lb-text);
-    margin: 0 0 6px;
-    line-height: 1.4;
-}
-.article-headline a {
-    color: inherit;
-    text-decoration: none;
-}
-.article-headline a:hover {
-    color: var(--lb-accent);
-}
-.article-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 0.8rem;
-    color: var(--lb-text-sec);
-    flex-wrap: wrap;
-}
-.article-source {
-    font-weight: 600;
-    color: var(--lb-text);
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-.article-favicon {
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    vertical-align: middle;
-}
-.article-lang {
-    background: var(--lb-bg-secondary);
-    border: 1px solid var(--lb-border);
-    padding: 1px 6px;
-    border-radius: 3px;
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    color: var(--lb-text-sec);
-}
-.article-link {
-    color: var(--lb-accent) !important;
-    text-decoration: none !important;
-    font-size: 0.78rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-}
-.article-link:hover {
-    text-decoration: underline !important;
-}
 
 /* ---------- Map ---------- */
 #map-container {
@@ -1183,6 +1249,9 @@
 
 /* Tablet */
 @media (max-width: 1024px) {
+    .sources-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
     .hero-stats {
         max-width: 550px;
     }
@@ -1279,19 +1348,28 @@
         align-items: flex-start;
         gap: 6px;
     }
-    .article-card {
+    .sources-grid {
-        flex-direction: column;
+        grid-template-columns: repeat(2, 1fr);
         gap: 8px;
     }
-    .article-date {
+    .source-tile {
-        width: auto;
+        padding: 10px;
-        text-align: left;
+        min-height: 70px;
-        display: flex;
-        gap: 6px;
-        align-items: baseline;
     }
-    .article-date .day {
+    .source-tile-count {
-        font-size: 1rem;
+        font-size: 1.1rem;
+    }
+    .source-detail-header {
+        padding: 12px 16px;
+    }
+    .source-detail-articles {
+        padding: 8px 16px 12px;
+        max-height: 350px;
+    }
+    .source-detail-article {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
     }
     #map-container {
         height: 350px !important;
@@ -1307,9 +1385,6 @@
         gap: 4px;
     }
 
-    .sources-list {
-        columns: 1;
-    }
 
     .live-feed {
         margin-top: 1rem;

lagebild/lagebild.js

@@ -149,7 +149,7 @@ var Lagebild = {
 
         var messages = [
             'Letzte Aktualisierung: ' + diffText,
-            d.incident.source_count + ' Quellen aktiv \u00fcberwacht',
+
             d.incident.article_count + ' Artikel analysiert \u2013 ' + d.incident.factcheck_count + ' Faktenchecks durchgef\u00fchrt',
         ];
 
@@ -459,60 +459,163 @@ var Lagebild = {
         document.getElementById('inline-sources').innerHTML = '';
     },
 
-    /* ===== TAB: QUELLEN ===== */
+    /* ===== TAB: QUELLEN (Tile Grid) ===== */
     renderSourcesTab: function() {
-        var sources = this.currentView.sources_json || [];
         var articles = this.currentView.articles || [];
-        var h = '';
+        var container = document.getElementById('sources-grid-container');
+        if (!container) return;
 
-        h += '<div class="sources-section"><h3>Im Lagebild zitierte Quellen (' + sources.length + ')</h3>';
+        // Aggregate by source
-        if (sources.length) {
+        var sourceMap = {};
-            h += '<ol class="sources-list">';
-            for (var i = 0; i < sources.length; i++) {
-                var s = sources[i];
-                if (s.url) {
-                    h += '<li><a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a></li>';
-                } else {
-                    h += '<li><span class="source-name">' + this.esc(s.name || '') + '</span></li>';
-                }
-            }
-            h += '</ol>';
-        }
-        h += '</div>';
-        document.getElementById('sources-cited').innerHTML = h;
-
-        document.getElementById('articles-heading').textContent = 'Alle gesammelten Artikel (' + articles.length + ')';
-        var ah = '';
         for (var i = 0; i < articles.length; i++) {
             var a = articles[i];
+            var name = a.source || 'Unbekannt';
+            if (!sourceMap[name]) sourceMap[name] = { count: 0, articles: [], languages: {}, domain: null };
+            sourceMap[name].count++;
+            sourceMap[name].articles.push(a);
+            var lang = (a.language || '').toUpperCase();
+            if (lang) sourceMap[name].languages[lang] = (sourceMap[name].languages[lang] || 0) + 1;
+            if (!sourceMap[name].domain && a.source_url) sourceMap[name].domain = this.extractDomain(a.source_url);
+        }
+
+        // Sort by count desc
+        var sources = [];
+        for (var name in sourceMap) {
+            sources.push({ name: name, data: sourceMap[name] });
+        }
+        sources.sort(function(a, b) { return b.data.count - a.data.count; });
+
+        // Language totals
+        var langTotals = {};
+        for (var i = 0; i < articles.length; i++) {
+            var lang = (articles[i].language || '').toUpperCase();
+            if (lang) langTotals[lang] = (langTotals[lang] || 0) + 1;
+        }
+
+        var h = '';
+
+        // Header
+        h += '<div class="sources-overview-header">';
+        h += '<span class="sources-overview-title">' + articles.length + ' Artikel aus ' + sources.length + ' Quellen</span>';
+        h += '<div class="sources-lang-chips">';
+        var langKeys = Object.keys(langTotals).sort(function(a, b) { return langTotals[b] - langTotals[a]; });
+        for (var i = 0; i < langKeys.length; i++) {
+            h += '<span class="sources-lang-chip">' + langKeys[i] + ' ' + langTotals[langKeys[i]] + '</span>';
+        }
+        h += '</div></div>';
+
+        // Grid
+        h += '<div class="sources-grid" id="sources-grid">';
+        for (var i = 0; i < sources.length; i++) {
+            var s = sources[i];
+            var langBadge = Object.keys(s.data.languages).join('/');
+            h += '<div class="source-tile" data-source-index="' + i + '">';
+            h += '<div class="source-tile-top">';
+            if (s.data.domain) {
+                h += '<img class="source-tile-favicon" src="https://www.google.com/s2/favicons?domain=' + encodeURIComponent(s.data.domain) + '&sz=16" width="16" height="16" alt="" loading="lazy">';
+            }
+            h += '<span class="source-tile-name">' + this.esc(s.name) + '</span>';
+            h += '</div>';
+            h += '<div class="source-tile-bottom">';
+            h += '<span class="source-tile-lang">' + langBadge + '</span>';
+            h += '<span class="source-tile-count">' + s.data.count + '</span>';
+            h += '</div>';
+            h += '</div>';
+        }
+        h += '</div>';
+
+        container.innerHTML = h;
+        this._sourceTiles = sources;
+
+        // Click handler
+        var self = this;
+        document.getElementById('sources-grid').addEventListener('click', function(e) {
+            var tile = e.target.closest('.source-tile');
+            if (!tile) return;
+            self.toggleSourceDetail(tile);
+        });
+    },
+
+    toggleSourceDetail: function(tile) {
+        var grid = document.getElementById('sources-grid');
+        var idx = parseInt(tile.getAttribute('data-source-index'));
+        var existingPanel = grid.querySelector('.source-detail-panel');
+        var wasActive = tile.classList.contains('active');
+
+        // Remove active from all tiles
+        var allTiles = grid.querySelectorAll('.source-tile');
+        for (var k = 0; k < allTiles.length; k++) allTiles[k].classList.remove('active');
+
+        // Remove existing panel
+        if (existingPanel) existingPanel.remove();
+
+        // If same tile was active, just close
+        if (wasActive) return;
+
+        tile.classList.add('active');
+
+        // Find last tile in same visual row (by offsetTop)
+        var clickedTop = tile.offsetTop;
+        var lastInRow = tile;
+        for (var k = 0; k < allTiles.length; k++) {
+            if (allTiles[k].offsetTop === clickedTop) {
+                lastInRow = allTiles[k];
+            }
+        }
+
+        // Build detail panel
+        var src = this._sourceTiles[idx];
+        var arts = src.data.articles.slice().sort(function(a, b) {
+            var da = new Date(Lagebild.toUTC(a.published_at || a.collected_at || ''));
+            var db = new Date(Lagebild.toUTC(b.published_at || b.collected_at || ''));
+            return db - da;
+        });
+
+        var h = '<div class="source-detail-panel">';
+        h += '<div class="source-detail-header">';
+        h += '<span class="source-detail-name">';
+        if (src.data.domain) {
+            h += '<img class="source-tile-favicon" src="https://www.google.com/s2/favicons?domain=' + encodeURIComponent(src.data.domain) + '&sz=16" width="16" height="16" alt="" loading="lazy"> ';
+        }
+        h += this.esc(src.name) + '</span>';
+        h += '<span class="source-detail-count">' + src.data.count + ' Artikel</span>';
+        h += '<button class="source-detail-close" aria-label="Schließen">&times;</button>';
+        h += '</div>';
+        h += '<div class="source-detail-articles">';
+        for (var j = 0; j < arts.length; j++) {
+            var a = arts[j];
             var dt = a.published_at || a.collected_at || '';
             var dObj = dt ? new Date(this.toUTC(dt)) : null;
             var hl = this.fixUmlauts(a.headline_de || a.headline || '');
-            var domain = this.extractDomain(a.source_url);
+            h += '<div class="source-detail-article">';
+            if (a.source_url) {
+                h += '<a href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener" class="source-detail-article-title">' + this.esc(hl) + ' ' + this.icons.externalLink + '</a>';
+            } else {
+                h += '<span class="source-detail-article-title">' + this.esc(hl) + '</span>';
+            }
+            if (dObj && !isNaN(dObj.getTime())) {
+                h += '<span class="source-detail-article-date">' + dObj.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: TIMEZONE }) + '</span>';
+            }
+            h += '</div>';
+        }
+        h += '</div></div>';
 
-            ah += '<div class="article-card">';
+        // Insert after last tile in row
-            ah += '<div class="article-date">';
+        lastInRow.insertAdjacentHTML('afterend', h);
-            if (dObj && !isNaN(dObj.getTime())) {
+
-                ah += '<span class="day">' + dObj.toLocaleDateString('de-DE', { day: 'numeric', timeZone: TIMEZONE }) + '</span>';
+        // Close button handler
-                ah += '<span class="month">' + dObj.toLocaleDateString('de-DE', { month: 'short', timeZone: TIMEZONE }) + '</span>';
+        var panel = grid.querySelector('.source-detail-panel');
-            }
+        var self = this;
-            ah += '</div><div class="article-info">';
+        panel.querySelector('.source-detail-close').addEventListener('click', function(e) {
-            ah += '<p class="article-headline">';
+            e.stopPropagation();
-            if (a.source_url) ah += '<a href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener">';
+            panel.remove();
-            ah += this.esc(hl);
+            tile.classList.remove('active');
-            if (a.source_url) ah += '</a>';
+        });
-            ah += '</p><div class="article-meta">';
+
-            ah += '<span class="article-source">';
+        // Scroll into view
-            if (domain) ah += '<img class="article-favicon" src="https://www.google.com/s2/favicons?domain=' + encodeURIComponent(domain) + '&sz=16" width="16" height="16" alt="" loading="lazy"> ';
+        setTimeout(function() {
-            ah += this.esc(a.source || '') + '</span>';
+            panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            if (a.language) ah += '<span class="article-lang">' + a.language.toUpperCase() + '</span>';
+        }, 50);
-            if (dObj && !isNaN(dObj.getTime())) {
-                ah += '<span>' + dObj.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: TIMEZONE }) + ', ' + dObj.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }) + ' Uhr</span>';
-            }
-            if (a.source_url) ah += '<a class="article-link" href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener">Artikel lesen ' + this.icons.externalLink + '</a>';
-            ah += '</div></div></div>';
-        }
-        document.getElementById('articles-content').innerHTML = ah;
     },
 
     renderArticlesTab: function() {},