#14/#15/#16 Heatmaps und Drift-Kurve in den Analyse-Views

Backend:
- /api/analyses/density: Faktendichte je Episode in 20 Bins ueber die
  Paragraph-Achse, getrennt nach total und verifizierbar (#16).

Frontend:
- ShiftsView (#15): Inline-SVG-Sparkline ueber die gesamte Drift-Sequenz je Theme,
  mit Schwellen-Linie bei 50% und klickbaren Spike-Markern.
- GapsView (#14): Cluster-Heatmap mit zwei Zeilen (LdN, NEU DENKEN), Cluster-Breite
  proportional zur Cluster-Groesse, Farbe interpoliert von kuehl (geringer Anteil im
  Podcast) zu warm (hoher Anteil); Klick filtert die darunter liegende Liste.
- DensityView (#16): neue View 'Faktendichte', sortiert nach Claims/Absatz,
  pro Episode eine 20-Bin-Heatmap (gruen = verifizierbar, warm = normativ),
  Filter nach Podcast und Sortierung; Klick oeffnet die Episode.
- AnalysisView (#17 questions): zeigt jetzt 'Antwort: <Episode>@p<idx>'-Link
  fuer Fragen mit answered_by_episode; Klick navigiert zur Antwort-Stelle.
- escAttr-Helper, hide-Cascade um DensityView erweitert, Buttons in Selector
  und init() hinzugefuegt.

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

backend/app.py

@@ -243,6 +243,71 @@ def get_shifts_analysis(podcast: Optional[str] = None, theme: Optional[str] = No
     }
 
 
+@app.get("/api/analyses/density")
+def get_density(podcast_id: Optional[str] = None, bins: int = 20):
+    """Faktendichte (#16): claims-Verteilung je Episode in N Bins ueber die Paragraph-Achse."""
+    db = get_db()
+    if not _table_exists(db, "claims"):
+        db.close()
+        return {"available": False, "episodes": []}
+    where = "WHERE 1=1"
+    params = []
+    if podcast_id:
+        where += " AND e.podcast_id = ?"
+        params.append(podcast_id)
+    rows = db.execute(
+        f"""
+        SELECT e.podcast_id, e.id AS episode_id, e.title, e.guest, e.staffel,
+               (SELECT MAX(p.idx) FROM paragraphs p
+                WHERE p.podcast_id = e.podcast_id AND p.episode_id = e.id) AS max_para,
+               (SELECT COUNT(*) FROM paragraphs p
+                WHERE p.podcast_id = e.podcast_id AND p.episode_id = e.id) AS n_para
+        FROM episodes e
+        {where}
+        ORDER BY e.podcast_id, e.id
+        """,
+        params,
+    ).fetchall()
+
+    out = []
+    for r in rows:
+        n_para = r["n_para"] or 0
+        max_para = r["max_para"] or 0
+        if n_para == 0:
+            continue
+        claim_rows = db.execute(
+            "SELECT paragraph_idx, claim_type, verifiable FROM claims "
+            "WHERE podcast_id = ? AND episode_id = ?",
+            (r["podcast_id"], r["episode_id"]),
+        ).fetchall()
+        total_claims = len(claim_rows)
+        verifiable = sum(1 for c in claim_rows if c["verifiable"])
+        bin_counts = [0] * bins
+        bin_verifiable = [0] * bins
+        denom = max(max_para, 1)
+        for c in claim_rows:
+            idx = c["paragraph_idx"] or 0
+            b = min(bins - 1, int(idx * bins / (denom + 1)))
+            bin_counts[b] += 1
+            if c["verifiable"]:
+                bin_verifiable[b] += 1
+        out.append({
+            "podcast_id": r["podcast_id"],
+            "episode_id": r["episode_id"],
+            "title": r["title"],
+            "guest": r["guest"],
+            "staffel": r["staffel"],
+            "n_paragraphs": n_para,
+            "total_claims": total_claims,
+            "verifiable_claims": verifiable,
+            "density_bins": bin_counts,
+            "verifiable_bins": bin_verifiable,
+            "claims_per_para": (total_claims / n_para) if n_para else 0.0,
+        })
+    db.close()
+    return {"available": True, "bins": bins, "episodes": out}
+
+
 @app.get("/api/analyses/debates")
 def get_debates(topic: Optional[str] = None, source_podcast: Optional[str] = None,
                 target_podcast: Optional[str] = None, limit: int = 200):

webapp/index.html

@@ -746,7 +746,7 @@ const AnalysisView = {
 
   async show(episodeId, mode) {
     if (!CURRENT_PODCAST) return;
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
     this.episodeId = episodeId;
     this.mode = mode;
     this.visible = true;
@@ -822,16 +822,33 @@ const AnalysisView = {
       if (this.mode === 'claims' && it.verifiable) {
         badges += `<span class="theme-tag" style="font-size:10px;margin-right:4px;opacity:0.7">verifizierbar</span>`;
       }
+      let answerLink = '';
       if (this.mode === 'questions') {
         const a = it.answered;
         const lbl = {no:'offen', partial:'teilweise', yes:'beantwortet', self_answered:'selbst beantwortet'}[a] || a;
         const col = a === 'no' ? 'var(--accent-warm)' : (a === 'yes' ? 'var(--accent-green)' : 'var(--text-muted)');
         badges += `<span class="theme-tag" style="font-size:10px;margin-right:4px;color:${col};border-color:${col}44">${lbl}</span>`;
+
+        if (it.answered_by_episode && (a === 'yes' || a === 'partial')) {
+          const samePodcast = !it.answered_by_podcast || it.answered_by_podcast === CURRENT_PODCAST;
+          const arrow = samePodcast ? '→' : '↗';
+          const target = samePodcast ? `${escHtml(it.answered_by_episode)}` : `${escHtml(it.answered_by_podcast)} / ${escHtml(it.answered_by_episode)}`;
+          if (samePodcast) {
+            answerLink = `<div style="margin-top:4px;font-size:12px;color:var(--accent-green)" onclick="event.stopPropagation(); AnalysisView.jumpAnswer('${it.answered_by_episode}', ${it.answered_by_idx})">
+              ${arrow} Antwort: ${target}@p${it.answered_by_idx}
+            </div>`;
+          } else {
+            answerLink = `<div style="margin-top:4px;font-size:12px;color:var(--accent-green);opacity:0.85">
+              ${arrow} Antwort in ${target}@p${it.answered_by_idx}
+            </div>`;
+          }
+        }
       }
       html += `<div class="transcript-para" onclick="AnalysisView.jumpTo(${it.start_time || 0})">`;
       html += `<span class="ts">${ts}</span>`;
       html += badges;
       html += escHtml(text);
+      html += answerLink;
       html += '</div>';
     });
     panel.innerHTML = html;
@@ -844,6 +861,24 @@ const AnalysisView = {
     TranscriptView.show(this.episodeId, time);
   },
 
+  jumpAnswer(episodeId, paraIdx) {
+    if (!CURRENT_PODCAST) return;
+    const ep = DATA && DATA.episodes && DATA.episodes.find(e => e.id === episodeId);
+    if (!ep) return;
+    showEpisode(ep);
+    // Transkript an der Para-Stelle aufschlagen — paragraph_idx ueber Transkript laden
+    setTimeout(async () => {
+      try {
+        const r = await fetch(`${API_BASE}/api/podcasts/${CURRENT_PODCAST}/transcript/${episodeId}`);
+        const d = await r.json();
+        const para = d.paragraphs && d.paragraphs[paraIdx];
+        if (para && typeof para.start === 'number') {
+          TranscriptView.show(episodeId, para.start);
+        }
+      } catch (_) { /* fallback: Episode wurde geoeffnet */ }
+    }, 250);
+  },
+
   hide() { this.visible = false; this.episodeId = null; this.items = null; }
 };
 
@@ -855,7 +890,7 @@ const GapsView = {
   minSize: 0,
 
   async show() {
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
     this.visible = true;
     const panel = document.getElementById('panel');
     panel.innerHTML = `<h2>Leerstellen</h2><p class="subtitle">Lädt …</p>`;
@@ -885,7 +920,36 @@ const GapsView = {
     const chip = (label, count, active, onclick) =>
       `<span class="theme-tag" style="cursor:pointer;${active ? 'background:var(--accent)33;border-color:var(--accent);color:var(--text)' : ''}" onclick="${onclick}">${label}${count !== null ? ` (${count})` : ''}</span>`;
 
-    html += `<div style="margin-top:12px;display:flex;flex-wrap:wrap;gap:6px">`;
+    // Heatmap: Cluster x Podcast, Farbintensitaet nach Anteil im Podcast
+    const clusters = (d.clusters || []).slice().sort((a, b) => (b.size || 0) - (a.size || 0));
+    if (clusters.length && podcasts.length >= 2) {
+      const maxSize = Math.max(...clusters.map(c => c.size || 0)) || 1;
+      html += `<div style="margin-top:14px"><strong style="font-size:13px">Cluster-Verteilung</strong> <span class="subtitle">(grosse Clustern zuerst, Farbe = Anteil je Podcast)</span></div>`;
+      html += `<div style="display:grid;grid-template-columns:120px 1fr;gap:6px;margin-top:6px;align-items:center;font-size:12px">`;
+      podcasts.forEach(p => {
+        html += `<div style="text-align:right;color:var(--text-muted);padding-right:6px">${escHtml(p)}</div>`;
+        html += `<div style="display:flex;gap:1px;height:28px">`;
+        clusters.forEach(c => {
+          const pSize = (c.per_podcast || {})[p] || 0;
+          const total = c.size || 1;
+          const share = pSize / total;
+          const widthPct = ((c.size || 0) / maxSize * 100).toFixed(2);
+          // Color: dark blue for low share, accent-warm for high share, opacity scaled
+          const intensity = Math.min(1, share);
+          // Lerp between cool (#1e3a8a) and warm (#dc7850)
+          const r = Math.round(30 + (220 - 30) * intensity);
+          const g = Math.round(58 + (120 - 58) * intensity);
+          const b = Math.round(138 + (80 - 138) * intensity);
+          const bg = `rgba(${r},${g},${b},${(0.25 + intensity * 0.65).toFixed(2)})`;
+          const title = `${c.label.split(',').slice(0, 4).join(',')} · ${p}: ${pSize}/${total} (${(share*100).toFixed(0)}%)`;
+          html += `<div title="${escAttr(title)}" style="flex:0 0 ${widthPct}%;min-width:6px;background:${bg};border-radius:2px;cursor:pointer" onclick="GapsView.scrollToCluster(${c.id})"></div>`;
+        });
+        html += `</div>`;
+      });
+      html += `</div>`;
+    }
+
+    html += `<div style="margin-top:14px;display:flex;flex-wrap:wrap;gap:6px">`;
     html += chip('alle Podcasts', d.gaps.length, !this.missingFilter, `GapsView.setMissing(null)`);
     podcasts.forEach(p => {
       const n = d.gaps.filter(g => g.missing_in === p).length;
@@ -930,6 +994,12 @@ const GapsView = {
     if (ep) showEpisode(ep);
   },
 
+  scrollToCluster(clusterId) {
+    // Filter auf Cluster-ID, falls eine entsprechende Gap existiert; sonst nur Heatmap-Hover.
+    const gap = (this.data?.gaps || []).find(g => g.cluster_id === clusterId);
+    if (gap && gap.missing_in) { this.setMissing(gap.missing_in); }
+  },
+
   hide() { this.visible = false; }
 };
 
@@ -942,7 +1012,7 @@ const ShiftsView = {
   expanded: {},
 
   async show() {
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
     this.visible = true;
     const panel = document.getElementById('panel');
     panel.innerHTML = `<h2>Narrative Shifts</h2><p class="subtitle">Lädt …</p>`;
@@ -1013,6 +1083,36 @@ const ShiftsView = {
       if (spikes.length) html += ` · <span style="color:var(--accent-warm)">${spikes.length} Spike${spikes.length > 1 ? 's' : ''}</span>`;
       html += `</div>`;
 
+      // Inline-Sparkline der gesamten Drift-Sequenz
+      const allDrifts = s.drifts || [];
+      if (allDrifts.length >= 2) {
+        const W = 360, H = 44, PAD = 4;
+        const maxScale = Math.max(0.6, ...allDrifts.map(dr => dr.drift || 0));
+        const pts = allDrifts.map((dr, i) => {
+          const x = PAD + (W - 2 * PAD) * i / (allDrifts.length - 1);
+          const y = H - PAD - (H - 2 * PAD) * Math.min(1, (dr.drift || 0) / maxScale);
+          return `${x.toFixed(1)},${y.toFixed(1)}`;
+        }).join(' ');
+        // Threshold-Linie bei 50% drift
+        const yThr = H - PAD - (H - 2 * PAD) * Math.min(1, 0.5 / maxScale);
+        // Spike-Marker
+        let spikeMarks = '';
+        allDrifts.forEach((dr, i) => {
+          if ((dr.drift || 0) >= 0.5) {
+            const x = PAD + (W - 2 * PAD) * i / (allDrifts.length - 1);
+            const y = H - PAD - (H - 2 * PAD) * Math.min(1, (dr.drift || 0) / maxScale);
+            const safeFrom = escAttr(dr.from);
+            const safeTo = escAttr(dr.to);
+            spikeMarks += `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="3" fill="var(--accent-warm)" style="cursor:pointer" onclick="ShiftsView.jumpTo('${escAttr(s.podcast)}','${safeTo}')"><title>${safeFrom} → ${safeTo}: ${(dr.drift*100).toFixed(0)}%</title></circle>`;
+          }
+        });
+        html += `<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:${H}px;display:block;margin:6px 0">`;
+        html += `<line x1="${PAD}" y1="${yThr.toFixed(1)}" x2="${W-PAD}" y2="${yThr.toFixed(1)}" stroke="var(--border)" stroke-dasharray="2,3" stroke-width="0.6"/>`;
+        html += `<polyline fill="none" stroke="var(--accent)" stroke-width="1.4" points="${pts}"/>`;
+        html += spikeMarks;
+        html += `</svg>`;
+      }
+
       // Top-Drifts (Spikes oder Top 3)
       const top = spikes.length ? spikes : (s.drifts || []).slice().sort((a,b) => (b.drift||0)-(a.drift||0)).slice(0, 3);
       top.forEach(dr => {
@@ -1027,8 +1127,7 @@ const ShiftsView = {
         html += `</div>`;
       });
 
-      // Toggle für vollständige Drift-Sequenz
+      // Toggle für vollständige Drift-Sequenz (allDrifts oben definiert)
-      const allDrifts = s.drifts || [];
       if (allDrifts.length > top.length) {
         html += `<div style="margin-top:6px"><span class="theme-tag" style="cursor:pointer;font-size:11px" onclick="ShiftsView.toggle('${key}')">${isOpen ? 'verkürzen' : `alle ${allDrifts.length} Übergänge zeigen`}</span></div>`;
         if (isOpen) {
@@ -1289,6 +1388,115 @@ const ArgumentsView = {
   hide() { this.visible = false; }
 };
 
+// ── Density View (#16 Faktendichte / Claim-Density-Map) ──
+const DensityView = {
+  visible: false,
+  data: null,
+  podcastFilter: null,
+  sort: 'density', // 'density' | 'order'
+
+  async show() {
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
+    this.visible = true;
+    const panel = document.getElementById('panel');
+    panel.innerHTML = `<h2>Faktendichte</h2><p class="subtitle">Lädt …</p>`;
+    try {
+      const url = CURRENT_PODCAST ? `${API_BASE}/api/analyses/density?podcast_id=${CURRENT_PODCAST}` : `${API_BASE}/api/analyses/density`;
+      const r = await fetch(url);
+      const data = await r.json();
+      if (!data.available) {
+        panel.innerHTML = `<h2>Faktendichte</h2><p class="subtitle">Keine Claim-Daten vorhanden.</p>`;
+        return;
+      }
+      this.data = data;
+    } catch (e) {
+      panel.innerHTML = `<h2>Faktendichte</h2><p style="color:var(--accent-warm)">Fehler: ${escHtml(e.message)}</p>`;
+      return;
+    }
+    this.render();
+  },
+
+  render() {
+    if (!this.visible || !this.data) return;
+    const panel = document.getElementById('panel');
+    const eps = this.data.episodes || [];
+    const podcasts = [...new Set(eps.map(e => e.podcast_id))];
+    let html = `<h2>Faktendichte</h2>`;
+    html += `<p class="subtitle">${eps.length} Episoden mit Claims · Heatmap je Episode in ${this.data.bins} Bins über die Paragraph-Achse</p>`;
+
+    const chip = (label, count, active, onclick) =>
+      `<span class="theme-tag" style="cursor:pointer;${active ? 'background:var(--accent)33;border-color:var(--accent);color:var(--text)' : ''}" onclick="${onclick}">${label}${count !== null ? ` (${count})` : ''}</span>`;
+
+    if (podcasts.length > 1) {
+      html += `<div style="margin-top:12px;display:flex;flex-wrap:wrap;gap:6px">`;
+      html += chip('alle', eps.length, !this.podcastFilter, `DensityView.setPodcast(null)`);
+      podcasts.forEach(p => {
+        const n = eps.filter(e => e.podcast_id === p).length;
+        html += chip(escHtml(p), n, this.podcastFilter === p, `DensityView.setPodcast('${p}')`);
+      });
+      html += `</div>`;
+    }
+
+    html += `<div style="margin-top:6px;display:flex;flex-wrap:wrap;gap:6px">`;
+    html += chip('nach Faktendichte', null, this.sort === 'density', `DensityView.setSort('density')`);
+    html += chip('chronologisch', null, this.sort === 'order', `DensityView.setSort('order')`);
+    html += `</div>`;
+
+    let filtered = eps;
+    if (this.podcastFilter) filtered = filtered.filter(e => e.podcast_id === this.podcastFilter);
+    if (this.sort === 'density') {
+      filtered = filtered.slice().sort((a, b) => (b.claims_per_para || 0) - (a.claims_per_para || 0));
+    } else {
+      filtered = filtered.slice().sort((a, b) => a.episode_id.localeCompare(b.episode_id));
+    }
+
+    const maxBin = filtered.length
+      ? Math.max(...filtered.flatMap(e => e.density_bins || []))
+      : 1;
+
+    filtered.slice(0, 60).forEach(e => {
+      const click = `onclick="DensityView.jumpTo('${escAttr(e.podcast_id)}','${escAttr(e.episode_id)}')"`;
+      const verPct = e.total_claims ? ((e.verifiable_claims / e.total_claims) * 100).toFixed(0) : '0';
+      const bins = e.density_bins || [];
+      const verBins = e.verifiable_bins || [];
+      // Heatmap inline
+      const cells = bins.map((c, i) => {
+        const v = verBins[i] || 0;
+        const intensity = c / (maxBin || 1);
+        // Verifizierbar = grün, restlich (Meinung) = warm
+        const greenShare = c > 0 ? v / c : 0;
+        const r = Math.round(220 - 100 * greenShare);
+        const g = Math.round(120 + 100 * greenShare);
+        const b = Math.round(80 + 50 * greenShare);
+        const op = (0.15 + intensity * 0.7).toFixed(2);
+        return `<div title="Bin ${i+1}: ${c} Claims (${v} verifizierbar)" style="flex:1;background:rgba(${r},${g},${b},${op});border-radius:1.5px"></div>`;
+      }).join('');
+      html += `<div class="transcript-para" style="cursor:pointer" ${click}>`;
+      html += `<div style="display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;align-items:baseline">`;
+      html += `<span><strong>${escHtml(e.episode_id)}</strong> ${escHtml(e.title)}${e.guest ? ` · ${escHtml(e.guest)}` : ''}</span>`;
+      html += `<span class="ts">${e.total_claims} Claims · ${verPct}% verifizierbar · ${(e.claims_per_para || 0).toFixed(2)}/Absatz</span>`;
+      html += `</div>`;
+      html += `<div style="display:flex;gap:1px;height:18px">${cells}</div>`;
+      html += `</div>`;
+    });
+    if (filtered.length > 60) {
+      html += `<p class="subtitle" style="margin-top:8px">… ${filtered.length - 60} weitere durch Filter eingrenzen.</p>`;
+    }
+    panel.innerHTML = html;
+  },
+
+  setPodcast(p) { this.podcastFilter = p; this.render(); },
+  setSort(s) { this.sort = s; this.render(); },
+
+  jumpTo(podcastId, episodeId) {
+    if (CURRENT_PODCAST !== podcastId) return;
+    const ep = DATA && DATA.episodes && DATA.episodes.find(e => e.id === episodeId);
+    if (ep) showEpisode(ep);
+  },
+
+  hide() { this.visible = false; }
+};
+
 // ── Search ──
 const Search = {
   init() {
@@ -1385,7 +1593,7 @@ const Search = {
 
   showResults(results, query) {
     const panel = document.getElementById('panel');
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
 
     if (results.length === 0) {
       panel.innerHTML = `<p class="subtitle">Keine Treffer für "${escHtml(query)}"</p>`;
@@ -1413,7 +1621,7 @@ const Search = {
   },
 
   showSemanticResults(results, query) {
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
     const panel = document.getElementById('panel');
     let html = `<h2>${results.length} semantische Treffer für "${escHtml(query)}" <span class="semantic-badge">KI</span></h2>`;
     results.forEach(r => {
@@ -1426,7 +1634,7 @@ const Search = {
   },
 
   showApiResults(results, query) {
-    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+    TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
     const panel = document.getElementById('panel');
     let html = `<h2>${results.length} Treffer für "${escHtml(query)}"</h2>`;
     results.forEach(r => {
@@ -1570,6 +1778,7 @@ function showPodcastSelector(podcasts) {
     selectorHtml += '<button class="compare-btn" onclick="ShiftsView.show()">Narrative Shifts</button>';
     selectorHtml += '<button class="compare-btn" onclick="DebatesView.show()">Debatten</button>';
     selectorHtml += '<button class="compare-btn" onclick="ArgumentsView.show()">Argumentketten</button>';
+    selectorHtml += '<button class="compare-btn" onclick="DensityView.show()">Faktendichte</button>';
     selectorHtml += '</div>';
   }
 
@@ -1722,8 +1931,12 @@ function init() {
         <button class="transcript-toggle" onclick="ShiftsView.show()">Narrative Shifts</button>
         <button class="transcript-toggle" onclick="DebatesView.show()">Debatten</button>
         <button class="transcript-toggle" onclick="ArgumentsView.show()">Argumentketten</button>
+        <button class="transcript-toggle" onclick="DensityView.show()">Faktendichte</button>
       </p>`
-    : `<p style="margin-top:12px"><button class="transcript-toggle" onclick="ArgumentsView.show()">Argumentketten</button></p>`;
+    : `<p style="margin-top:12px;display:flex;flex-wrap:wrap;gap:6px">
+        <button class="transcript-toggle" onclick="ArgumentsView.show()">Argumentketten</button>
+        <button class="transcript-toggle" onclick="DensityView.show()">Faktendichte</button>
+      </p>`;
   // Panel kann von showPodcastSelector ueberschrieben worden sein — welcome-panel ggf. neu anlegen
   let welcome = document.getElementById('welcome-panel');
   if (!welcome) {
@@ -1956,7 +2169,7 @@ function drag(sim) {
 
 // ── Panel: Theme ──
 function showTheme(theme) {
-  TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide();
+  TranscriptView.hide(); AnalysisView.hide(); GapsView.hide(); ShiftsView.hide(); DebatesView.hide(); ArgumentsView.hide(); DensityView.hide();
   const panel = document.getElementById('panel');
   const td = DATA.themes.find(t => t.id === theme.id);
   const quotes = DATA.quotes.filter(q => q.themes.includes(theme.id));