Lagebild: Quellenverzeichnis collapsible mit Inline-Flow-Layout

- Standardmaessig zugeklappt: Pfeil + Quellenverzeichnis (91 Quellen)
- Klick klappt auf: Quellen inline mit Mittelpunkt-Trenner
- Jede Quelle verlinkt auf URL

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

lagebild/lagebild.css

@@ -590,36 +590,52 @@
     color: var(--lb-text);
 }
 
-/* Inline sources (Lagebild tab footer) */
-.inline-sources-title {
-    font-size: 1rem;
-    font-weight: 700;
-    color: var(--lb-text);
-    margin: 0 0 8px;
-}
-.inline-sources-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    columns: 2;
-    column-gap: 24px;
-}
-.inline-sources-list li {
-    padding: 2px 0;
-    font-size: 0.82rem;
+/* Inline sources (Lagebild tab footer) - Collapsible */
+.inline-sources-toggle {
+    font-size: 0.9rem;
+    font-weight: 600;
     color: var(--lb-text-sec);
-    break-inside: avoid;
+    cursor: pointer;
+    padding: 8px 0;
+    user-select: none;
+    transition: color 0.2s;
 }
-.inline-sources-list .src-nr {
+.inline-sources-toggle:hover {
+    color: var(--lb-accent);
+}
+.inline-sources-arrow {
+    display: inline-block;
+    transition: transform 0.2s;
+    font-size: 0.8em;
+}
+#inline-sources.open .inline-sources-arrow {
+    transform: rotate(90deg);
+}
+.inline-sources-body {
+    display: none;
+    padding: 8px 0 0;
+    font-size: 0.82rem;
+    line-height: 1.8;
+    color: var(--lb-text-sec);
+}
+#inline-sources.open .inline-sources-body {
+    display: block;
+}
+.src-inline .src-nr {
     color: var(--lb-accent);
     font-weight: 700;
-    margin-right: 4px;
 }
-.inline-sources-list a {
+.src-sep {
+    color: var(--lb-border);
+    margin: 0 2px;
+}
+.inline-sources-body a {
     color: var(--lb-accent);
     text-decoration: none;
 }
-.inline-sources-list a:hover { text-decoration: underline; }
+.inline-sources-body a:hover {
+    text-decoration: underline;
+}
 
 /* ---------- Article Cards ---------- */
 .article-card {
@@ -1116,7 +1132,6 @@
         gap: 4px;
     }
 
-    .inline-sources-list,
     .sources-list {
         columns: 1;
     }

lagebild/lagebild.js

@@ -343,20 +343,29 @@ var Lagebild = {
     renderInlineSources: function() {
         var sources = this.currentView.sources_json || [];
         if (!sources.length) { document.getElementById('inline-sources').innerHTML = ''; return; }
-        var h = '<h3 class="inline-sources-title">Quellenverzeichnis</h3>';
-        h += '<ul class="inline-sources-list">';
+        var el = document.getElementById('inline-sources');
+        el.classList.remove('open');
+        var h = '<div class="inline-sources-toggle">';
+        h += '<span class="inline-sources-arrow">&#9656;</span> Quellenverzeichnis (' + sources.length + ' Quellen)';
+        h += '</div>';
+        h += '<div class="inline-sources-body">';
         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>';
+            if (i > 0) h += ' <span class="src-sep">&middot;</span> ';
+            h += '<span class="src-inline" id="src-' + s.nr + '">';
+            h += '<span class="src-nr">[' + s.nr + ']</span> ';
             if (s.url) {
                 h += '<a href="' + this.esc(s.url) + '" target="_blank" rel="noopener">' + this.esc(s.name || '') + '</a>';
             } else {
-                h += '<span>' + this.esc(s.name || '') + '</span>';
+                h += this.esc(s.name || '');
             }
-            h += '</li>';
+            h += '</span>';
         }
-        h += '</ul>';
-        document.getElementById('inline-sources').innerHTML = h;
+        h += '</div>';
+        el.innerHTML = h;
+        el.querySelector('.inline-sources-toggle').addEventListener('click', function() {
+            el.classList.toggle('open');
+        });
     },
 
     /* ===== TAB: QUELLEN ===== */