Quellenübersicht: Klick auf Quelle klappt Artikel-Liste auf

Quellen-Boxen waren bisher reine Anzeige. Jetzt sind sie klickbar:
beim Klick erscheint direkt unter der Box (über die volle Grid-Breite)
eine Liste der Artikel-Headlines dieser Quelle, jede mit Link zum
Originalartikel. Mutual-exclusive — Klick auf eine andere Quelle
schließt die vorherige automatisch.

- components.js: Item bekommt data-source, onclick + Tastatur-Support
  (Enter/Space), aria-expanded.
- app.js: toggleSourceOverviewDetail filtert _currentArticles nach
  Quelle, sortiert chronologisch absteigend, fügt das Detail-Element
  via insertAdjacentElement direkt nach dem geklickten Item ein.
- CSS: aktiver Item-Status (Glow + Tint), Detail-Block mit
  grid-column 1/-1 (volle Breite) + max-height 320px scrollbar bei
  vielen Artikeln + dezente Slide-In-Animation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/static/css/style.css

@@ -1704,6 +1704,72 @@ a.dev-source-pill:hover {
     border-radius: var(--radius);
     background: var(--bg-primary);
     border: 1px solid var(--border);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+    outline: none;
+}
+.source-overview-item:hover {
+    border-color: var(--accent);
+    background: var(--bg-elevated);
+}
+.source-overview-item:focus-visible {
+    box-shadow: 0 0 0 2px var(--tint-accent-strong);
+}
+.source-overview-item.active {
+    border-color: var(--accent);
+    background: var(--tint-accent-subtle);
+    box-shadow: var(--glow-accent);
+}
+
+/* Inline-Aufklapp-Bereich (volle Reihen-Breite, direkt unter dem geklickten Item) */
+.source-overview-detail {
+    grid-column: 1 / -1;
+    padding: var(--sp-md) var(--sp-lg);
+    background: var(--bg-elevated);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius);
+    animation: source-detail-in 0.18s ease;
+}
+@keyframes source-detail-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.source-overview-detail-empty {
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-style: italic;
+}
+.source-overview-detail-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 320px;
+    overflow-y: auto;
+}
+.source-overview-detail-list::-webkit-scrollbar { width: 6px; }
+.source-overview-detail-list::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; }
+.source-overview-detail-list::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 3px; }
+.source-overview-detail-list li {
+    font-size: 12px;
+    line-height: 1.4;
+    padding: 2px 0;
+    border-top: 1px dashed var(--border);
+}
+.source-overview-detail-list li:first-child { border-top: none; }
+.source-overview-detail-list li a {
+    color: var(--text-primary);
+    text-decoration: none;
+}
+.source-overview-detail-list li a:hover {
+    color: var(--accent);
+    text-decoration: underline;
+}
+@media (prefers-reduced-motion: reduce) {
+    .source-overview-detail { animation: none; }
+    .source-overview-item { transition: none; }
 }
 
 .source-overview-name {