Lagebild: Zitate verlinken auf Quell-URL, Quellenverzeichnis kompakter, Em-Dashes entfernt

- Zitat-Refs zeigen Quellenname im Tooltip, oeffnen URL in neuem Tab
- Quellenverzeichnis: kompaktes 2-Spalten-Layout, nur Name als Link
- Alle Em-Dashes durch Bindestriche ersetzt
- Stand im Hero zeigt jetzt auch Uhrzeit

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

lagebild/lagebild.css

@@ -563,29 +563,26 @@
     padding: 0;
     margin: 0;
     counter-reset: src;
+    columns: 2;
+    column-gap: 24px;
 }
 .sources-list li {
     counter-increment: src;
-    padding: 10px 0;
+    padding: 4px 0;
-    border-bottom: 1px solid var(--lb-border);
+    font-size: 0.88rem;
-    font-size: 0.92rem;
-    display: flex;
-    align-items: baseline;
-    gap: 10px;
     color: var(--lb-text);
+    break-inside: avoid;
 }
-.sources-list li:last-child { border-bottom: none; }
 .sources-list li::before {
     content: "[" counter(src) "]";
     color: var(--lb-accent);
     font-weight: 700;
-    font-size: 0.85rem;
+    font-size: 0.82rem;
-    flex-shrink: 0;
+    margin-right: 6px;
 }
 .sources-list a {
     color: var(--lb-accent);
     text-decoration: none;
-    word-break: break-all;
 }
 .sources-list a:hover { text-decoration: underline; }
 .source-name {
@@ -598,34 +595,31 @@
     font-size: 1rem;
     font-weight: 700;
     color: var(--lb-text);
-    margin: 0 0 12px;
+    margin: 0 0 8px;
 }
 .inline-sources-list {
     list-style: none;
     padding: 0;
     margin: 0;
+    columns: 2;
+    column-gap: 24px;
 }
 .inline-sources-list li {
-    padding: 6px 0;
+    padding: 2px 0;
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     color: var(--lb-text-sec);
-    display: flex;
+    break-inside: avoid;
-    gap: 8px;
-    align-items: baseline;
 }
 .inline-sources-list .src-nr {
     color: var(--lb-accent);
     font-weight: 700;
-    min-width: 24px;
+    margin-right: 4px;
 }
 .inline-sources-list a {
     color: var(--lb-accent);
     text-decoration: none;
 }
 .inline-sources-list a:hover { text-decoration: underline; }
-.inline-sources-list strong {
-    color: var(--lb-text);
-}
 
 /* ---------- Article Cards ---------- */
 .article-card {
@@ -1121,4 +1115,9 @@
     .status-progression {
         gap: 4px;
     }
+
+    .inline-sources-list,
+    .sources-list {
+        columns: 1;
+    }
 }

lagebild/lagebild.js

@@ -3,7 +3,7 @@
  * Count-Up, Timeline mit Dropdown, Scroll-Reveal, Smooth-Scroll, Favicons
  */
 
-/** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */
+/** Feste Zeitzone fuer alle Anzeigen - NIEMALS aendern. */
 var TIMEZONE = 'Europe/Berlin';
 
 var Lagebild = {
@@ -40,7 +40,6 @@ var Lagebild = {
             this.render();
             this.initTabs();
             this.initLangToggle();
-            this.initSmoothScroll();
             this.initScrollReveal();
         } catch (e) {
             console.error('Lagebild laden fehlgeschlagen:', e);
@@ -60,7 +59,7 @@ var Lagebild = {
         var d = this.data;
         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>';
+            ' <span class="hero-date-info">- Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
 
         // Stat Cards (3: Artikel, Quellen, Faktenchecks)
         var statsHtml = '';
@@ -249,7 +248,7 @@ var Lagebild = {
         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>';
+        var h = '<div class="timeline-dropdown-header">' + dateLabel + ' - ' + snaps.length + ' Updates</div>';
         h += '<div class="timeline-snap-list">';
         for (var i = 0; i < snaps.length; i++) {
             var snap = snaps[i];
@@ -322,7 +321,22 @@ var Lagebild = {
         document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at);
         var md = this.fixUmlauts(v.summary || '');
         var html = this.mdToHtml(md);
-        html = html.replace(/\[(\d+)\]/g, '<a class="citation-ref" href="#src-$1" title="Quelle $1">[$1]</a>');
+
+        // Build source lookup for citation links
+        var srcMap = {};
+        var sources = v.sources_json || [];
+        for (var i = 0; i < sources.length; i++) {
+            srcMap[sources[i].nr] = sources[i];
+        }
+        var self = this;
+        html = html.replace(/\[(\d+)\]/g, function(match, nr) {
+            var src = srcMap[nr];
+            if (src && src.url) {
+                return '<a class="citation-ref" href="' + self.esc(src.url) + '" target="_blank" rel="noopener" title="' + self.esc(src.name || '') + '">[' + nr + ']</a>';
+            }
+            return '<a class="citation-ref" title="Quelle ' + nr + '">[' + nr + ']</a>';
+        });
+
         document.getElementById('summary-content').innerHTML = html;
     },
 
@@ -333,10 +347,13 @@ var Lagebild = {
         h += '<ul class="inline-sources-list">';
         for (var i = 0; i < sources.length; i++) {
             var s = sources[i];
-            h += '<li id="src-' + s.nr + '"><span class="src-nr">[' + s.nr + ']</span><span>';
+            h += '<li id="src-' + s.nr + '"><span class="src-nr">[' + s.nr + ']</span>';
-            h += '<strong>' + this.esc(s.name || '') + '</strong>';
+            if (s.url) {
-            if (s.url) h += ' &mdash; <a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.url) + '</a>';
+                h += '<a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a>';
-            h += '</span></li>';
+            } else {
+                h += '<span>' + this.esc(s.name || '') + '</span>';
+            }
+            h += '</li>';
         }
         h += '</ul>';
         document.getElementById('inline-sources').innerHTML = h;
@@ -353,9 +370,11 @@ var Lagebild = {
             h += '<ol class="sources-list">';
             for (var i = 0; i < sources.length; i++) {
                 var s = sources[i];
-                h += '<li><span class="source-name">' + this.esc(s.name || '') + '</span>';
+                if (s.url) {
-                if (s.url) h += ' &mdash; <a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.url) + '</a>';
+                    h += '<li><a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a></li>';
-                h += '</li>';
+                } else {
+                    h += '<li><span class="source-name">' + this.esc(s.name || '') + '</span></li>';
+                }
             }
             h += '</ol>';
         }
@@ -429,8 +448,8 @@ var Lagebild = {
         var locs = [
             {n:'Teheran, Iran',lat:35.6892,lng:51.3890,d:'Hauptziel der US-israelischen Luftschläge. Über 1.000 Tote nach fünf Tagen Krieg.',ic:redIcon},
             {n:'Beirut, Libanon',lat:33.8938,lng:35.5018,d:'Gleichzeitige US-israelische Luftschläge auf Beirut und Teheran [6].',ic:redIcon},
-            {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis — Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon},
+            {n:'Juffair, Bahrain',lat:26.2235,lng:50.6001,d:'US-Marinebasis - Ziel iranischer Vergeltungsraketen [3].',ic:orangeIcon},
-            {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt — Ziel iranischer Gegenangriffe.',ic:orangeIcon},
+            {n:'Al Udeid, Katar',lat:25.1173,lng:51.3150,d:'US-Luftwaffenstützpunkt - Ziel iranischer Gegenangriffe.',ic:orangeIcon},
             {n:'Tel Aviv, Israel',lat:32.0853,lng:34.7818,d:'Operationsbasis für israelische Angriffe auf den Iran.',ic:blueIcon},
             {n:'Ankara, Türkei',lat:39.9334,lng:32.8597,d:'NATO vermutet iranischen Raketenbeschuss auf Türkei [10]. Keine NATO-Beteiligung geplant.',ic:orangeIcon},
             {n:'Bagdad, Irak',lat:33.3152,lng:44.3661,d:'Lage im Irak als Faktor im Kriegsverlauf [2].',ic:blueIcon},
@@ -572,26 +591,6 @@ var Lagebild = {
         });
     },
 
-    /* ===== SMOOTH SCROLL FOR CITATIONS ===== */
-    initSmoothScroll: function() {
-        document.addEventListener('click', function(e) {
-            var link = e.target.closest('.citation-ref');
-            if (!link) return;
-            e.preventDefault();
-            var href = link.getAttribute('href');
-            if (!href) return;
-            var targetId = href.substring(1);
-            var target = document.getElementById(targetId);
-            if (!target) return;
-
-            target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            target.classList.add('source-highlight');
-            setTimeout(function() {
-                target.classList.remove('source-highlight');
-            }, 1500);
-        });
-    },
-
     /* ===== SCROLL REVEAL ===== */
     initScrollReveal: function() {
         var cards = document.querySelectorAll('.content-card, .lagebild-cta');