diff --git a/webapp/index.html b/webapp/index.html
index 5617d6a..f7ef9e9 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -12,9 +12,9 @@
     --text: #e8e6e3;
     --text-muted: #9ca3af;
     --accent: #60a5fa;
+    --accent-green: #22c55e;
     --border: #374151;
   }
-
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
   body {
@@ -27,314 +27,206 @@
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 380px;
-    grid-template-rows: 56px 1fr;
+    grid-template-columns: 1fr 400px;
+    grid-template-rows: 52px 1fr;
     height: 100vh;
   }
 
   @media (max-width: 800px) {
     #app {
       grid-template-columns: 1fr;
-      grid-template-rows: 48px 50vh 1fr;
+      grid-template-rows: 48px 45vh 1fr;
     }
-    header { padding: 0 12px; }
-    header h1 { font-size: 14px; }
-    .filter-bar { gap: 4px; }
-    .filter-btn { padding: 4px 10px; font-size: 11px; }
+    header { padding: 0 12px; gap: 8px; }
+    header h1 { font-size: 13px; }
+    .search-box { max-width: 120px; }
+    .filter-bar { gap: 3px; }
+    .filter-btn { padding: 3px 8px; font-size: 10px; }
     #panel { border-left: none; border-top: 1px solid var(--border); }
   }
 
-  /* Header */
+  /* ── Header ── */
   header {
     grid-column: 1 / -1;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
-    padding: 0 24px;
-    gap: 16px;
+    padding: 0 20px;
+    gap: 12px;
   }
-
-  header h1 {
-    font-size: 18px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  }
-
+  header h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
   header h1 span { color: var(--accent); }
 
-  .filter-bar {
-    display: flex;
-    gap: 8px;
-    margin-left: auto;
-  }
-
-  .filter-btn {
+  .search-box {
     background: var(--surface2);
     border: 1px solid var(--border);
-    color: var(--text-muted);
-    padding: 6px 14px;
-    border-radius: 20px;
+    border-radius: 6px;
+    padding: 5px 10px;
+    color: var(--text);
     font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
+    width: 200px;
+    outline: none;
   }
+  .search-box:focus { border-color: var(--accent); }
+  .search-box::placeholder { color: var(--text-muted); }
 
+  .filter-bar { display: flex; gap: 6px; margin-left: auto; }
+  .filter-btn {
+    background: var(--surface2); border: 1px solid var(--border);
+    color: var(--text-muted); padding: 5px 12px; border-radius: 16px;
+    font-size: 11px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
+  }
   .filter-btn:hover, .filter-btn.active {
-    background: var(--accent);
-    color: var(--bg);
-    border-color: var(--accent);
+    background: var(--accent); color: var(--bg); border-color: var(--accent);
   }
 
-  /* Mindmap Canvas */
-  #mindmap {
-    position: relative;
-    overflow: hidden;
-    background: var(--bg);
-  }
+  /* ── Mindmap ── */
+  #mindmap { position: relative; overflow: hidden; background: var(--bg); }
+  #mindmap svg { width: 100%; height: 100%; }
 
-  #mindmap svg {
-    width: 100%;
-    height: 100%;
-  }
+  .node-theme { cursor: pointer; }
+  .node-theme circle { stroke-width: 2; transition: r 0.3s, stroke-width 0.3s; }
+  .node-theme:hover circle { stroke-width: 4; }
+  .node-theme text { fill: var(--text); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }
 
-  /* Nodes */
-  .node-theme {
-    cursor: pointer;
-  }
+  .node-episode circle { stroke-width: 1.5; cursor: pointer; transition: r 0.3s; }
+  .node-episode:hover circle { r: 22; }
+  .node-episode text { fill: var(--text-muted); font-size: 9px; text-anchor: middle; pointer-events: none; }
 
-  .node-theme circle {
-    stroke-width: 2;
-    transition: r 0.3s, stroke-width 0.3s;
-  }
+  .node-quote { cursor: pointer; }
+  .node-quote circle { transition: r 0.3s, opacity 0.3s; }
+  .node-quote:hover circle { r: 8; opacity: 1; }
 
-  .node-theme:hover circle {
-    stroke-width: 4;
-  }
+  .link { stroke: var(--border); stroke-opacity: 0.3; fill: none; }
+  .link-theme-episode { stroke-opacity: 0.15; stroke-width: 1; }
+  .link-episode-quote { stroke-opacity: 0.08; stroke-width: 0.5; }
 
-  .node-theme text {
-    fill: var(--text);
-    font-size: 12px;
-    font-weight: 600;
-    text-anchor: middle;
-    pointer-events: none;
-  }
-
-  .node-episode circle {
-    stroke-width: 1.5;
-    cursor: pointer;
-    transition: r 0.3s;
-  }
-
-  .node-episode:hover circle {
-    r: 22;
-  }
-
-  .node-episode text {
-    fill: var(--text-muted);
-    font-size: 9px;
-    text-anchor: middle;
-    pointer-events: none;
-  }
-
-  .node-quote {
-    cursor: pointer;
-  }
-
-  .node-quote circle {
-    transition: r 0.3s, opacity 0.3s;
-  }
-
-  .node-quote:hover circle {
-    r: 8;
-    opacity: 1;
-  }
-
-  .link {
-    stroke: var(--border);
-    stroke-opacity: 0.3;
-    fill: none;
-  }
-
-  .link-theme-episode {
-    stroke-opacity: 0.15;
-    stroke-width: 1;
-  }
-
-  .link-episode-quote {
-    stroke-opacity: 0.08;
-    stroke-width: 0.5;
-  }
-
-  /* Side Panel */
+  /* ── Side Panel ── */
   #panel {
     background: var(--surface);
     border-left: 1px solid var(--border);
     overflow-y: auto;
-    padding: 20px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
-  }
-
-  #panel h2 {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text);
-  }
-
-  #panel .subtitle {
-    font-size: 13px;
-    color: var(--text-muted);
-    margin-top: 4px;
+    gap: 12px;
+    padding-bottom: 80px; /* space for audio bar */
   }
+  #panel h2 { font-size: 15px; font-weight: 600; }
+  #panel .subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
 
+  /* ── Quote Cards ── */
   .quote-card {
     background: var(--surface2);
     border-radius: 8px;
-    padding: 14px;
-    border-left: 3px solid var(--accent);
-    cursor: pointer;
-    transition: transform 0.15s, background 0.15s;
+    padding: 12px;
+    border-left: 3px solid var(--border);
+    transition: background 0.15s;
+    position: relative;
   }
-
-  .quote-card:hover {
-    transform: translateX(4px);
-    background: #2d3142;
-  }
-
-  .quote-card.playing {
-    border-left-color: #22c55e;
-    background: #1a2e1a;
-  }
-
   .quote-card .quote-text {
-    font-size: 13px;
-    line-height: 1.5;
-    color: var(--text);
-    font-style: italic;
+    font-size: 13px; line-height: 1.5; color: var(--text); font-style: italic;
+    cursor: default;
   }
-
   .quote-card .quote-meta {
-    margin-top: 8px;
-    font-size: 11px;
-    color: var(--text-muted);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    margin-top: 6px; font-size: 11px; color: var(--text-muted);
+    display: flex; justify-content: space-between; align-items: center;
   }
+  .quote-card.loaded { border-left-color: var(--accent); }
+  .quote-card.playing { border-left-color: var(--accent-green); background: #1a2e1a; }
 
-  .quote-card .play-icon {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: var(--accent);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    opacity: 0.7;
-    transition: opacity 0.2s;
+  /* Play button inside card — explicit, not the whole card */
+  .play-btn {
+    width: 28px; height: 28px; border-radius: 50%;
+    background: var(--accent); border: none; color: var(--bg);
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s, transform 0.1s;
   }
-
-  .quote-card:hover .play-icon { opacity: 1; }
-
-  .quote-card .play-icon svg {
-    width: 12px;
-    height: 12px;
-    fill: var(--bg);
-  }
-
-  .no-audio .play-icon { display: none; }
+  .play-btn:hover { opacity: 1; transform: scale(1.1); }
+  .play-btn:active { transform: scale(0.95); }
+  .play-btn svg { width: 12px; height: 12px; fill: currentColor; }
+  .no-audio .play-btn { display: none; }
 
   .top-badge {
-    display: inline-block;
-    background: #f59e0b;
-    color: #000;
-    font-size: 9px;
-    font-weight: 700;
-    padding: 1px 6px;
-    border-radius: 3px;
-    margin-left: 6px;
+    display: inline-block; background: #f59e0b; color: #000;
+    font-size: 9px; font-weight: 700; padding: 1px 6px;
+    border-radius: 3px; margin-left: 4px;
   }
 
-  /* Audio Player Bar */
-  #audio-bar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 64px;
-    background: var(--surface);
-    border-top: 1px solid var(--border);
-    display: none;
-    align-items: center;
-    padding: 0 24px;
-    gap: 16px;
-    z-index: 100;
+  /* ── Transcript View ── */
+  .transcript-toggle {
+    background: var(--surface2); border: 1px solid var(--border);
+    color: var(--text-muted); padding: 6px 14px; border-radius: 6px;
+    font-size: 11px; cursor: pointer; transition: all 0.2s;
   }
+  .transcript-toggle:hover { border-color: var(--accent); color: var(--text); }
 
-  #audio-bar.visible { display: flex; }
-
-  #audio-bar .now-playing {
-    font-size: 12px;
-    color: var(--text-muted);
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  #audio-bar .now-playing strong {
-    color: var(--text);
-  }
-
-  #audio-bar button {
-    background: var(--accent);
-    border: none;
-    color: var(--bg);
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
+  .transcript-para {
+    font-size: 13px; line-height: 1.6; color: var(--text-muted);
+    padding: 8px 12px; border-radius: 6px; border-left: 2px solid transparent;
+    transition: background 0.3s, border-color 0.3s, color 0.3s;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
-
-  #audio-bar .time {
-    font-size: 11px;
-    color: var(--text-muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Welcome state */
-  .welcome {
-    text-align: center;
-    padding: 40px 20px;
-    color: var(--text-muted);
-  }
-
-  .welcome h2 {
+  .transcript-para:hover { background: var(--surface2); }
+  .transcript-para.active {
+    background: var(--surface2); border-left-color: var(--accent-green);
     color: var(--text);
-    margin-bottom: 8px;
+  }
+  .transcript-para .ts {
+    font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
+    margin-right: 6px;
   }
 
-  .welcome p {
-    font-size: 13px;
-    line-height: 1.6;
+  /* ── Search Results ── */
+  .search-result {
+    background: var(--surface2); border-radius: 8px; padding: 12px;
+    border-left: 3px solid var(--accent); cursor: pointer;
+    transition: background 0.15s;
   }
+  .search-result:hover { background: #2d3142; }
+  .search-result .sr-episode { font-size: 10px; color: var(--accent); font-weight: 600; }
+  .search-result .sr-text { font-size: 12px; line-height: 1.5; margin-top: 4px; }
+  .search-result mark { background: #f59e0b44; color: var(--text); border-radius: 2px; padding: 0 2px; }
+
+  /* ── Audio Bar ── */
+  #audio-bar {
+    position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
+    background: var(--surface); border-top: 1px solid var(--border);
+    display: none; align-items: center; padding: 0 20px; gap: 12px; z-index: 100;
+  }
+  #audio-bar.visible { display: flex; }
+  #audio-bar .bar-play-btn {
+    background: var(--accent); border: none; color: var(--bg);
+    width: 36px; height: 36px; border-radius: 50%;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+  }
+  #audio-bar .now-playing {
+    font-size: 12px; color: var(--text-muted); flex: 1;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    cursor: pointer;
+  }
+  #audio-bar .now-playing:hover { color: var(--text); }
+  #audio-bar .now-playing strong { color: var(--text); }
+  #audio-bar .time {
+    font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
+  }
+  #audio-bar .bar-transcript-btn {
+    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
+    padding: 4px 10px; border-radius: 4px; font-size: 10px; cursor: pointer;
+  }
+  #audio-bar .bar-transcript-btn:hover { border-color: var(--accent); color: var(--text); }
+
+  .welcome { text-align: center; padding: 40px 20px; color: var(--text-muted); }
+  .welcome h2 { color: var(--text); margin-bottom: 8px; }
+  .welcome p { font-size: 13px; line-height: 1.6; }
 
   .theme-tag {
-    display: inline-block;
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 11px;
-    font-weight: 500;
-    margin: 2px;
+    display: inline-block; padding: 3px 10px; border-radius: 12px;
+    font-size: 11px; font-weight: 500; margin: 2px; cursor: pointer;
   }
 
-  /* Scrollbar */
   #panel::-webkit-scrollbar { width: 6px; }
   #panel::-webkit-scrollbar-track { background: transparent; }
   #panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -343,67 +235,397 @@
 <body>
 <div id="app">
   <header>
-    <h1><span id="app-title">Podcast</span> Themen-Mindmap</h1>
+    <h1><span id="app-title">Podcast</span> Mindmap</h1>
+    <input type="search" class="search-box" id="search-input" placeholder="Transkripte durchsuchen…">
     <div class="filter-bar" id="staffel-filters"></div>
   </header>
-
-  <div id="mindmap">
-    <svg id="svg"></svg>
-  </div>
-
-  <div id="panel">
-    <div class="welcome" id="welcome-panel">
-    </div>
-  </div>
+  <div id="mindmap"><svg id="svg"></svg></div>
+  <div id="panel"><div class="welcome" id="welcome-panel"></div></div>
 </div>
 
 <div id="audio-bar">
-  <button id="play-pause-btn">
+  <button class="bar-play-btn" id="bar-play-btn">
     <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-      <path id="play-pause-icon" d="M8 5v14l11-7z"/>
+      <path id="bar-play-icon" d="M8 5v14l11-7z"/>
     </svg>
   </button>
-  <div class="now-playing" id="now-playing"></div>
-  <span class="time" id="audio-time">00:00</span>
+  <div class="now-playing" id="now-playing" title="Klick: Transkript anzeigen"></div>
+  <span class="time" id="audio-time">0:00</span>
+  <button class="bar-transcript-btn" id="bar-transcript-btn">Transkript</button>
 </div>
 <audio id="main-audio" preload="none"></audio>
 
 <script src="d3.v7.min.js"></script>
 <script>
 // ============================================================
-// Podcast Mindmap App
+// Podcast Mindmap App v2
 // ============================================================
 
 let DATA = null;
+let TRANSCRIPTS = null; // loaded on demand
 let simulation = null;
-let currentAudio = null;
-let currentQuoteId = null;
 
-const PLAY_SVG = 'M8 5v14l11-7z';
-const PAUSE_SVG = 'M6 4h4v16H6zM14 4h4v16h-4z';
+// Audio state — completely independent from panel state
+const AudioPlayer = {
+  el: document.getElementById('main-audio'),
+  bar: document.getElementById('audio-bar'),
+  barPlayBtn: document.getElementById('bar-play-btn'),
+  barIcon: document.getElementById('bar-play-icon'),
+  nowPlaying: document.getElementById('now-playing'),
+  timeDisplay: document.getElementById('audio-time'),
+  currentQuote: null,
+  isPlaying: false,
 
-// Load data
+  PLAY_PATH: 'M8 5v14l11-7z',
+  PAUSE_PATH: 'M6 4h4v16H6zM14 4h4v16h-4z',
+
+  load(q) {
+    // Load quote into bar WITHOUT playing
+    if (!q.audioFile || q.startTime === null) return;
+    this.currentQuote = q;
+    const sameFile = this.el.src && this.el.src.endsWith(q.audioFile);
+    if (!sameFile) {
+      this.el.src = `audio/${q.audioFile}`;
+    }
+    this.nowPlaying.innerHTML = `<strong>"${q.text.substring(0, 70)}…"</strong> — ${q.speaker} (${q.episode})`;
+    this.bar.classList.add('visible');
+    this._updateCardStates();
+  },
+
+  play(q) {
+    // Play a specific quote — requires user gesture
+    if (q) this.load(q);
+    if (!this.currentQuote) return;
+    const cq = this.currentQuote;
+
+    this.el.currentTime = cq.startTime;
+    const p = this.el.play();
+    if (p) p.then(() => {
+      if (Math.abs(this.el.currentTime - cq.startTime) > 2) {
+        this.el.currentTime = cq.startTime;
+      }
+    }).catch(() => {});
+
+    this.isPlaying = true;
+    this.barIcon.setAttribute('d', this.PAUSE_PATH);
+    this._setupTimeUpdater();
+    this._updateCardStates();
+  },
+
+  toggle() {
+    if (!this.currentQuote) return;
+    if (this.el.paused) {
+      this.el.play().catch(() => {});
+      this.isPlaying = true;
+      this.barIcon.setAttribute('d', this.PAUSE_PATH);
+    } else {
+      this.el.pause();
+      this.isPlaying = false;
+      this.barIcon.setAttribute('d', this.PLAY_PATH);
+    }
+  },
+
+  stop() {
+    this.el.pause();
+    this.isPlaying = false;
+    this.barIcon.setAttribute('d', this.PLAY_PATH);
+    this._updateCardStates();
+  },
+
+  _setupTimeUpdater() {
+    const cq = this.currentQuote;
+    this.el.ontimeupdate = () => {
+      if (cq.endTime && this.el.currentTime >= cq.endTime) {
+        this.stop();
+      }
+      this.timeDisplay.textContent = fmtTime(this.el.currentTime);
+      // Sync transcript if visible
+      if (TranscriptView.visible && TranscriptView.episodeId === cq.episode) {
+        TranscriptView.syncToTime(this.el.currentTime);
+      }
+    };
+    this.el.onended = () => this.stop();
+  },
+
+  _updateCardStates() {
+    document.querySelectorAll('.quote-card.loaded,.quote-card.playing').forEach(c => {
+      c.classList.remove('loaded', 'playing');
+    });
+    if (this.currentQuote) {
+      const card = document.getElementById(`card-${this.currentQuote.id}`);
+      if (card) card.classList.add(this.isPlaying ? 'playing' : 'loaded');
+    }
+  }
+};
+
+// Bar button handlers
+AudioPlayer.barPlayBtn.onclick = () => {
+  if (AudioPlayer.currentQuote && AudioPlayer.el.paused && !AudioPlayer.el.src.endsWith(AudioPlayer.currentQuote.audioFile)) {
+    AudioPlayer.play();
+  } else {
+    AudioPlayer.toggle();
+  }
+};
+
+document.getElementById('bar-transcript-btn').onclick = () => {
+  if (AudioPlayer.currentQuote) {
+    TranscriptView.show(AudioPlayer.currentQuote.episode, AudioPlayer.el.currentTime);
+  }
+};
+
+document.getElementById('now-playing').onclick = () => {
+  if (AudioPlayer.currentQuote) {
+    TranscriptView.show(AudioPlayer.currentQuote.episode, AudioPlayer.el.currentTime);
+  }
+};
+
+// ── Transcript View ──
+const TranscriptView = {
+  visible: false,
+  episodeId: null,
+  paragraphs: null,
+  userScrolled: false,
+  activeIdx: -1,
+
+  async show(episodeId, seekTime) {
+    if (!TRANSCRIPTS) await this.loadTranscripts();
+    const key = Object.keys(TRANSCRIPTS).find(k => k.startsWith(episodeId.replace('E', 'E')));
+    if (!key || !TRANSCRIPTS[key]) return;
+
+    this.episodeId = episodeId;
+    this.paragraphs = TRANSCRIPTS[key].paragraphs;
+    this.visible = true;
+    this.userScrolled = false;
+
+    const panel = document.getElementById('panel');
+    const ep = DATA.episodes.find(e => e.id === episodeId);
+    const staffel = DATA.staffeln.find(s => s.id === ep.staffel);
+
+    let html = `<h2 style="color:${staffel.color}">${ep.id}: ${ep.title} — Transkript</h2>`;
+    html += `<p class="subtitle">${ep.guest}</p>`;
+
+    this.paragraphs.forEach((p, i) => {
+      html += `<div class="transcript-para" data-idx="${i}" onclick="TranscriptView.seekTo(${p.start})">`;
+      html += `<span class="ts">${fmtTime(p.start)}</span>`;
+      html += escHtml(p.text);
+      html += `</div>`;
+    });
+
+    panel.innerHTML = html;
+
+    // Detect user scroll
+    panel.onscroll = () => { this.userScrolled = true; };
+
+    if (seekTime !== undefined) this.syncToTime(seekTime);
+  },
+
+  syncToTime(time) {
+    if (!this.visible || !this.paragraphs) return;
+    let idx = -1;
+    for (let i = 0; i < this.paragraphs.length; i++) {
+      if (time >= this.paragraphs[i].start) idx = i;
+      else break;
+    }
+    if (idx === this.activeIdx) return;
+    this.activeIdx = idx;
+
+    document.querySelectorAll('.transcript-para.active').forEach(el => el.classList.remove('active'));
+    if (idx >= 0) {
+      const el = document.querySelector(`.transcript-para[data-idx="${idx}"]`);
+      if (el) {
+        el.classList.add('active');
+        if (!this.userScrolled) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+    }
+  },
+
+  seekTo(time) {
+    const audio = AudioPlayer.el;
+    if (AudioPlayer.currentQuote && AudioPlayer.currentQuote.episode === this.episodeId) {
+      audio.currentTime = time;
+      if (audio.paused) AudioPlayer.toggle();
+    } else {
+      // Load episode audio and seek
+      const ep = DATA.episodes.find(e => e.id === this.episodeId);
+      if (ep && ep.audioFile) {
+        const fakeQuote = {
+          audioFile: ep.audioFile, startTime: time, endTime: null,
+          text: `${ep.title} ab ${fmtTime(time)}`, speaker: ep.guest,
+          episode: ep.id, id: '_transcript'
+        };
+        AudioPlayer.play(fakeQuote);
+      }
+    }
+    this.userScrolled = false;
+  },
+
+  hide() {
+    this.visible = false;
+    this.episodeId = null;
+  },
+
+  async loadTranscripts() {
+    try {
+      const resp = await fetch('srt_index.json');
+      TRANSCRIPTS = await resp.json();
+    } catch (e) {
+      // Try from data subdir
+      try {
+        const resp = await fetch('data/srt_index.json');
+        TRANSCRIPTS = await resp.json();
+      } catch (e2) {
+        TRANSCRIPTS = {};
+      }
+    }
+  }
+};
+
+// ── Search ──
+const Search = {
+  init() {
+    const input = document.getElementById('search-input');
+    let debounce = null;
+    input.addEventListener('input', () => {
+      clearTimeout(debounce);
+      debounce = setTimeout(() => this.run(input.value.trim()), 300);
+    });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') { input.value = ''; this.clear(); }
+    });
+  },
+
+  async run(query) {
+    if (query.length < 3) { this.clear(); return; }
+    if (!TRANSCRIPTS) await TranscriptView.loadTranscripts();
+
+    const results = [];
+    const qLower = query.toLowerCase();
+
+    // Search transcripts
+    for (const [key, epData] of Object.entries(TRANSCRIPTS)) {
+      const epId = key.split('-')[0]; // S1E1-Wachstum → S1E1
+      const ep = DATA.episodes.find(e => e.id === epId);
+      if (!ep) continue;
+
+      epData.paragraphs.forEach(p => {
+        const idx = p.text.toLowerCase().indexOf(qLower);
+        if (idx === -1) return;
+        // Get context around match
+        const start = Math.max(0, idx - 60);
+        const end = Math.min(p.text.length, idx + query.length + 60);
+        let snippet = (start > 0 ? '…' : '') + p.text.substring(start, end) + (end < p.text.length ? '…' : '');
+
+        results.push({
+          episodeId: epId,
+          episode: ep,
+          start: p.start,
+          snippet: snippet,
+          query: query
+        });
+      });
+    }
+
+    // Also search quotes
+    DATA.quotes.forEach(q => {
+      const text = q.verbatim || q.text;
+      if (text.toLowerCase().includes(qLower)) {
+        results.push({
+          episodeId: q.episode,
+          episode: DATA.episodes.find(e => e.id === q.episode),
+          start: q.startTime,
+          snippet: text,
+          query: query,
+          isQuote: true,
+          quote: q
+        });
+      }
+    });
+
+    this.showResults(results, query);
+  },
+
+  showResults(results, query) {
+    const panel = document.getElementById('panel');
+    TranscriptView.hide();
+
+    if (results.length === 0) {
+      panel.innerHTML = `<p class="subtitle">Keine Treffer für "${escHtml(query)}"</p>`;
+      return;
+    }
+
+    let html = `<h2>${results.length} Treffer für "${escHtml(query)}"</h2>`;
+
+    results.slice(0, 50).forEach(r => {
+      const staffel = DATA.staffeln.find(s => s.id === r.episode.staffel);
+      const highlighted = this.highlight(r.snippet, r.query);
+      html += `<div class="search-result" onclick="Search.goTo('${r.episodeId}', ${r.start})">`;
+      html += `<div class="sr-episode" style="color:${staffel.color}">${r.episodeId}: ${r.episode.title} — ${r.episode.guest}`;
+      if (r.start !== null) html += ` · ${fmtTime(r.start)}`;
+      html += `</div>`;
+      html += `<div class="sr-text">${highlighted}</div>`;
+      html += `</div>`;
+    });
+
+    if (results.length > 50) {
+      html += `<p class="subtitle">… und ${results.length - 50} weitere Treffer</p>`;
+    }
+
+    panel.innerHTML = html;
+  },
+
+  highlight(text, query) {
+    const escaped = escHtml(text);
+    const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return escaped.replace(re, '<mark>$1</mark>');
+  },
+
+  goTo(episodeId, startTime) {
+    TranscriptView.show(episodeId, startTime);
+    if (startTime !== null) {
+      const ep = DATA.episodes.find(e => e.id === episodeId);
+      if (ep && ep.audioFile) {
+        AudioPlayer.load({
+          audioFile: ep.audioFile, startTime: startTime, endTime: null,
+          text: `${ep.title} ab ${fmtTime(startTime)}`, speaker: ep.guest,
+          episode: episodeId, id: '_search'
+        });
+      }
+    }
+  },
+
+  clear() {
+    // Show welcome
+    const panel = document.getElementById('panel');
+    panel.innerHTML = document.getElementById('welcome-panel')?.outerHTML || '';
+  }
+};
+
+// ── Data Loading ──
 fetch('mindmap_data.json')
   .then(r => r.json())
   .then(data => { DATA = data; init(); })
   .catch(e => console.error('Failed to load data:', e));
 
 function init() {
-  // Set dynamic titles from data
   const name = DATA.name || 'Podcast';
-  document.title = name + ' — Themen-Mindmap';
+  document.title = name + ' — Mindmap';
   document.getElementById('app-title').textContent = name;
   document.getElementById('welcome-panel').innerHTML = `
     <h2>${name}</h2>
     <p>${DATA.description || ''}<br>
     ${DATA.episodes.length} Folgen, ${DATA.staffeln.length} Staffeln, ${DATA.quotes.length} Zitate</p>
-    <p style="margin-top:16px">Klicke auf einen Themenknoten oder eine Episode in der Mindmap.</p>`;
+    <p style="margin-top:16px">Klicke auf einen Themenknoten oder eine Episode.</p>`;
 
   buildFilters();
   buildGraph();
+  Search.init();
 }
 
-// ---- Staffel Filters ----
+// ── Staffel Filters ──
+let activeStaffel = 0;
+
 function buildFilters() {
   const bar = document.getElementById('staffel-filters');
   const allBtn = document.createElement('button');
@@ -417,15 +639,12 @@ function buildFilters() {
     const btn = document.createElement('button');
     btn.className = 'filter-btn';
     btn.textContent = `S${s.id}: ${s.name}`;
-    btn.style.setProperty('--color', s.color);
     btn.dataset.staffel = s.id;
     btn.onclick = () => filterStaffel(s.id);
     bar.appendChild(btn);
   });
 }
 
-let activeStaffel = 0;
-
 function filterStaffel(id) {
   activeStaffel = id;
   document.querySelectorAll('.filter-btn').forEach(b => {
@@ -434,242 +653,114 @@ function filterStaffel(id) {
   updateVisibility();
 }
 
-// ---- Graph ----
+// ── Graph ──
 function buildGraph() {
   const svg = d3.select('#svg');
   const container = document.getElementById('mindmap');
   const W = container.clientWidth || window.innerWidth;
-  const H = container.clientHeight || window.innerHeight * 0.5;
+  const H = container.clientHeight || window.innerHeight * 0.45;
   const isMobile = W < 600;
-  const scale = isMobile ? 0.6 : 1;
+  const sc = isMobile ? 0.6 : 1;
 
-  // Set SVG viewBox for proper scaling
   svg.attr('viewBox', `0 0 ${W} ${H}`).attr('preserveAspectRatio', 'xMidYMid meet');
 
-  // Build nodes and links
-  const nodes = [];
-  const links = [];
-  const themeMap = {};
-  const episodeMap = {};
+  const nodes = [], links = [], episodeMap = {};
 
-  // Center node
-  nodes.push({
-    id: 'center',
-    type: 'center',
-    label: (DATA.name || 'PODCAST').replace(/\s+/g, '\n'),
-    r: 40 * scale,
-    fx: W / 2,
-    fy: H / 2,
-    color: '#60a5fa'
-  });
+  nodes.push({ id: 'center', type: 'center', label: (DATA.name || 'PODCAST').replace(/\s+/g, '\n'),
+    r: 40 * sc, fx: W / 2, fy: H / 2, color: '#60a5fa' });
 
-  // Theme nodes
   DATA.themes.forEach(t => {
-    const maxLen = isMobile ? 18 : 25;
-    const node = {
-      id: t.id,
-      type: 'theme',
-      label: t.label.length > maxLen ? t.label.substring(0, maxLen - 3) + '…' : t.label,
-      fullLabel: t.label,
-      description: t.description,
-      r: 28 * scale,
-      color: t.color,
-      episodes: t.episodes
-    };
-    nodes.push(node);
-    themeMap[t.id] = node;
+    const ml = isMobile ? 18 : 25;
+    nodes.push({ id: t.id, type: 'theme', label: t.label.length > ml ? t.label.substring(0, ml - 3) + '…' : t.label,
+      fullLabel: t.label, description: t.description, r: 28 * sc, color: t.color, episodes: t.episodes });
     links.push({ source: 'center', target: t.id, type: 'center-theme' });
   });
 
-  // Episode nodes
   DATA.episodes.forEach(ep => {
-    const staffel = DATA.staffeln.find(s => s.id === ep.staffel);
-    const node = {
-      id: ep.id,
-      type: 'episode',
-      label: ep.id,
-      title: ep.title,
-      guest: ep.guest,
-      staffel: ep.staffel,
-      audioFile: ep.audioFile,
-      r: 16 * scale,
-      color: staffel ? staffel.color : '#666'
-    };
-    nodes.push(node);
-    episodeMap[ep.id] = node;
+    const st = DATA.staffeln.find(s => s.id === ep.staffel);
+    const n = { id: ep.id, type: 'episode', label: ep.id, title: ep.title, guest: ep.guest,
+      staffel: ep.staffel, audioFile: ep.audioFile, r: 16 * sc, color: st ? st.color : '#666' };
+    nodes.push(n);
+    episodeMap[ep.id] = n;
   });
 
-  // Links: theme → episode
-  DATA.themes.forEach(t => {
-    t.episodes.forEach(epId => {
-      if (episodeMap[epId]) {
-        links.push({ source: t.id, target: epId, type: 'theme-episode' });
-      }
-    });
-  });
+  DATA.themes.forEach(t => t.episodes.forEach(epId => {
+    if (episodeMap[epId]) links.push({ source: t.id, target: epId, type: 'theme-episode' });
+  }));
 
-  // Quote nodes (only top quotes and quotes with audio get visible nodes)
-  const visibleQuotes = DATA.quotes.filter(q => q.isTopQuote || q.startTime !== null);
-  visibleQuotes.forEach(q => {
+  DATA.quotes.filter(q => q.isTopQuote || q.startTime !== null).forEach(q => {
     const ep = episodeMap[q.episode];
-    nodes.push({
-      id: q.id,
-      type: 'quote',
-      text: q.text,
-      speaker: q.speaker,
-      episode: q.episode,
-      themes: q.themes,
-      startTime: q.startTime,
-      endTime: q.endTime,
-      audioFile: q.audioFile,
-      isTopQuote: q.isTopQuote,
-      r: (q.isTopQuote ? 6 : 4) * scale,
-      color: ep ? ep.color : '#666',
-      staffel: ep ? ep.staffel : 0
-    });
+    nodes.push({ id: q.id, type: 'quote', text: q.text, speaker: q.speaker, episode: q.episode,
+      themes: q.themes, startTime: q.startTime, endTime: q.endTime, audioFile: q.audioFile,
+      isTopQuote: q.isTopQuote, verbatim: q.verbatim,
+      r: (q.isTopQuote ? 6 : 4) * sc, color: ep ? ep.color : '#666', staffel: ep ? ep.staffel : 0 });
     links.push({ source: q.episode, target: q.id, type: 'episode-quote' });
   });
 
-  // D3 Force Simulation
   simulation = d3.forceSimulation(nodes)
     .force('link', d3.forceLink(links).id(d => d.id).distance(d => {
-      if (d.type === 'center-theme') return 160 * scale;
-      if (d.type === 'theme-episode') return 100 * scale;
-      return 50 * scale;
-    }).strength(d => {
-      if (d.type === 'center-theme') return 0.8;
-      if (d.type === 'theme-episode') return 0.3;
-      return 0.2;
-    }))
+      if (d.type === 'center-theme') return 160 * sc;
+      if (d.type === 'theme-episode') return 100 * sc;
+      return 50 * sc;
+    }).strength(d => d.type === 'center-theme' ? 0.8 : d.type === 'theme-episode' ? 0.3 : 0.2))
     .force('charge', d3.forceManyBody().strength(d => {
-      const s = scale;
-      if (d.type === 'center') return -800 * s;
-      if (d.type === 'theme') return -400 * s;
-      if (d.type === 'episode') return -150 * s;
-      return -30 * s;
+      if (d.type === 'center') return -800 * sc;
+      if (d.type === 'theme') return -400 * sc;
+      if (d.type === 'episode') return -150 * sc;
+      return -30 * sc;
     }))
     .force('center', d3.forceCenter(W / 2, H / 2).strength(0.05))
     .force('collision', d3.forceCollide().radius(d => d.r + 4))
     .alphaDecay(0.02);
 
-  // Zoom
-  const zoom = d3.zoom()
-    .scaleExtent([0.3, 3])
-    .on('zoom', e => g.attr('transform', e.transform));
-
+  const zoom = d3.zoom().scaleExtent([0.3, 3]).on('zoom', e => g.attr('transform', e.transform));
   svg.call(zoom);
 
   const g = svg.append('g');
 
-  // Links
-  const linkG = g.append('g');
-  const linkEls = linkG.selectAll('line')
-    .data(links)
-    .join('line')
+  const linkEls = g.append('g').selectAll('line').data(links).join('line')
     .attr('class', d => `link link-${d.type}`)
     .attr('stroke', d => {
       const src = nodes.find(n => n.id === (typeof d.source === 'object' ? d.source.id : d.source));
       return src ? src.color : '#374151';
     });
 
-  // Node groups
   const nodeG = g.append('g');
 
-  // Quote nodes
-  const quoteNodes = nodeG.selectAll('.node-quote')
-    .data(nodes.filter(n => n.type === 'quote'))
-    .join('g')
-    .attr('class', 'node-quote')
-    .on('click', (e, d) => playQuote(d))
-    .call(drag(simulation));
-
-  quoteNodes.append('circle')
-    .attr('r', d => d.r)
-    .attr('fill', d => d.color)
+  // Quote nodes — tap shows in panel, does NOT play
+  const quoteNodes = nodeG.selectAll('.node-quote').data(nodes.filter(n => n.type === 'quote')).join('g')
+    .attr('class', 'node-quote').call(drag(simulation));
+  quoteNodes.append('circle').attr('r', d => d.r).attr('fill', d => d.color)
     .attr('opacity', d => d.isTopQuote ? 0.9 : 0.4)
     .attr('stroke', d => d.isTopQuote ? '#f59e0b' : 'none')
     .attr('stroke-width', d => d.isTopQuote ? 2 : 0);
 
-  // Episode nodes
-  const epNodes = nodeG.selectAll('.node-episode')
-    .data(nodes.filter(n => n.type === 'episode'))
-    .join('g')
-    .attr('class', 'node-episode')
-    .on('click', (e, d) => showEpisode(d))
-    .call(drag(simulation));
+  const epNodes = nodeG.selectAll('.node-episode').data(nodes.filter(n => n.type === 'episode')).join('g')
+    .attr('class', 'node-episode').call(drag(simulation));
+  epNodes.append('circle').attr('r', d => d.r).attr('fill', 'transparent').attr('stroke', d => d.color).attr('stroke-width', 1.5);
+  epNodes.append('text').attr('dy', 4).text(d => d.label);
 
-  epNodes.append('circle')
-    .attr('r', d => d.r)
-    .attr('fill', 'transparent')
-    .attr('stroke', d => d.color)
-    .attr('stroke-width', 1.5);
+  const themeNodes = nodeG.selectAll('.node-theme').data(nodes.filter(n => n.type === 'theme')).join('g')
+    .attr('class', 'node-theme').call(drag(simulation));
+  themeNodes.append('circle').attr('r', d => d.r).attr('fill', d => d.color + '33').attr('stroke', d => d.color);
+  themeNodes.append('text').attr('dy', d => -d.r - 8).text(d => d.label);
 
-  epNodes.append('text')
-    .attr('dy', 4)
-    .text(d => d.label);
+  const centerNode = nodeG.selectAll('.node-center').data(nodes.filter(n => n.type === 'center')).join('g').attr('class', 'node-center');
+  centerNode.append('circle').attr('r', d => d.r).attr('fill', d => d.color + '22').attr('stroke', d => d.color).attr('stroke-width', 2);
+  centerNode.append('text').attr('text-anchor', 'middle').attr('fill', '#60a5fa').attr('font-size', '11px').attr('font-weight', '700')
+    .selectAll('tspan').data(d => d.label.split('\n')).join('tspan')
+    .attr('x', 0).attr('dy', (d, i) => i === 0 ? '-0.3em' : '1.2em').text(d => d);
 
-  // Theme nodes
-  const themeNodes = nodeG.selectAll('.node-theme')
-    .data(nodes.filter(n => n.type === 'theme'))
-    .join('g')
-    .attr('class', 'node-theme')
-    .on('click', (e, d) => showTheme(d))
-    .call(drag(simulation));
-
-  themeNodes.append('circle')
-    .attr('r', d => d.r)
-    .attr('fill', d => d.color + '33')
-    .attr('stroke', d => d.color);
-
-  themeNodes.append('text')
-    .attr('dy', d => -d.r - 8)
-    .text(d => d.label);
-
-  // Center node
-  const centerNode = nodeG.selectAll('.node-center')
-    .data(nodes.filter(n => n.type === 'center'))
-    .join('g')
-    .attr('class', 'node-center');
-
-  centerNode.append('circle')
-    .attr('r', d => d.r)
-    .attr('fill', d => d.color + '22')
-    .attr('stroke', d => d.color)
-    .attr('stroke-width', 2);
-
-  centerNode.append('text')
-    .attr('text-anchor', 'middle')
-    .attr('fill', '#60a5fa')
-    .attr('font-size', '11px')
-    .attr('font-weight', '700')
-    .selectAll('tspan')
-    .data(d => d.label.split('\n'))
-    .join('tspan')
-    .attr('x', 0)
-    .attr('dy', (d, i) => i === 0 ? '-0.3em' : '1.2em')
-    .text(d => d);
-
-  // Tick
   simulation.on('tick', () => {
-    linkEls
-      .attr('x1', d => d.source.x)
-      .attr('y1', d => d.source.y)
-      .attr('x2', d => d.target.x)
-      .attr('y2', d => d.target.y);
-
+    linkEls.attr('x1', d => d.source.x).attr('y1', d => d.source.y).attr('x2', d => d.target.x).attr('y2', d => d.target.y);
     quoteNodes.attr('transform', d => `translate(${d.x},${d.y})`);
     epNodes.attr('transform', d => `translate(${d.x},${d.y})`);
     themeNodes.attr('transform', d => `translate(${d.x},${d.y})`);
     centerNode.attr('transform', d => `translate(${d.x},${d.y})`);
   });
 
-  // Store references
-  window._nodes = nodes;
-  window._links = links;
-  window._quoteNodes = quoteNodes;
-  window._epNodes = epNodes;
-  window._themeNodes = themeNodes;
-  window._linkEls = linkEls;
+  window._nodes = nodes; window._quoteNodes = quoteNodes;
+  window._epNodes = epNodes; window._themeNodes = themeNodes; window._linkEls = linkEls;
 }
 
 function updateVisibility() {
@@ -684,95 +775,99 @@ function updateVisibility() {
   });
 }
 
-// ---- Drag (with tap detection for mobile) ----
+// ── Drag with tap detection ──
 function drag(sim) {
-  let dragStartX, dragStartY, dragMoved;
-
+  let sx, sy, moved;
   return d3.drag()
     .on('start', (e, d) => {
       if (!e.active) sim.alphaTarget(0.1).restart();
-      d.fx = d.x; d.fy = d.y;
-      dragStartX = e.x; dragStartY = e.y;
-      dragMoved = false;
+      d.fx = d.x; d.fy = d.y; sx = e.x; sy = e.y; moved = false;
     })
     .on('drag', (e, d) => {
       d.fx = e.x; d.fy = e.y;
-      const dx = e.x - dragStartX, dy = e.y - dragStartY;
-      if (Math.sqrt(dx * dx + dy * dy) > 5) dragMoved = true;
+      if (Math.sqrt((e.x - sx) ** 2 + (e.y - sy) ** 2) > 5) moved = true;
     })
     .on('end', (e, d) => {
       if (!e.active) sim.alphaTarget(0);
       if (d.type !== 'center') { d.fx = null; d.fy = null; }
-      // Tap (not drag) → trigger click action
-      if (!dragMoved) {
+      if (!moved) {
         if (d.type === 'theme') showTheme(d);
         else if (d.type === 'episode') showEpisode(d);
-        else if (d.type === 'quote') playQuote(d);
+        else if (d.type === 'quote') showQuoteDetail(d);
       }
     });
 }
 
-// ---- Panel: Show Theme ----
+// ── Panel: Theme ──
 function showTheme(theme) {
+  TranscriptView.hide();
   const panel = document.getElementById('panel');
-  const themeData = DATA.themes.find(t => t.id === theme.id);
+  const td = DATA.themes.find(t => t.id === theme.id);
   const quotes = DATA.quotes.filter(q => q.themes.includes(theme.id));
 
-  let html = `<h2 style="color:${theme.color}">${themeData.label}</h2>`;
-  html += `<p class="subtitle">${themeData.description}</p>`;
-  html += `<p class="subtitle">${quotes.length} Zitate aus ${themeData.episodes.length} Episoden</p>`;
+  let html = `<h2 style="color:${theme.color}">${td.label}</h2>`;
+  html += `<p class="subtitle">${td.description}</p>`;
+  html += `<p class="subtitle">${quotes.length} Zitate aus ${td.episodes.length} Episoden</p>`;
 
-  // Episode tags
   html += '<div style="margin-top:8px">';
-  themeData.episodes.forEach(epId => {
+  td.episodes.forEach(epId => {
     const ep = DATA.episodes.find(e => e.id === epId);
     if (ep) {
       const st = DATA.staffeln.find(s => s.id === ep.staffel);
-      html += `<span class="theme-tag" style="background:${st.color}22;color:${st.color};border:1px solid ${st.color}44">${ep.id} ${ep.guest}</span> `;
+      html += `<span class="theme-tag" style="background:${st.color}22;color:${st.color};border:1px solid ${st.color}44" onclick="showEpisodeById('${ep.id}')">${ep.id} ${ep.guest}</span> `;
     }
   });
   html += '</div>';
 
-  // Quotes
-  quotes.forEach(q => {
-    html += buildQuoteCard(q, theme.color);
-  });
-
+  quotes.forEach(q => { html += buildQuoteCard(q, theme.color); });
   panel.innerHTML = html;
 }
 
-// ---- Panel: Show Episode ----
+// ── Panel: Episode ──
 function showEpisode(ep) {
+  TranscriptView.hide();
   const panel = document.getElementById('panel');
-  const epData = DATA.episodes.find(e => e.id === ep.id);
+  const epData = DATA.episodes.find(e => e.id === (ep.id || ep));
   const staffel = DATA.staffeln.find(s => s.id === epData.staffel);
-  const quotes = DATA.quotes.filter(q => q.episode === ep.id);
+  const quotes = DATA.quotes.filter(q => q.episode === epData.id);
 
-  let html = `<h2 style="color:${staffel.color}">${ep.id}: ${epData.title}</h2>`;
-  html += `<p class="subtitle">Gast: ${epData.guest}<br>Staffel ${epData.staffel}: ${staffel.name}</p>`;
-  html += `<p class="subtitle">${quotes.length} Zitate${epData.audioFile ? ' · Audio verfügbar' : ''}</p>`;
+  let html = `<h2 style="color:${staffel.color}">${epData.id}: ${epData.title}</h2>`;
+  html += `<p class="subtitle">Gast: ${epData.guest} · Staffel ${epData.staffel}: ${staffel.name}</p>`;
+  html += `<p class="subtitle">${quotes.length} Zitate</p>`;
 
-  // Theme tags
-  const epThemes = DATA.themes.filter(t => t.episodes.includes(ep.id));
+  // Transcript button
+  if (epData.audioFile) {
+    html += `<button class="transcript-toggle" onclick="TranscriptView.show('${epData.id}')">Transkript lesen</button>`;
+  }
+
+  const epThemes = DATA.themes.filter(t => t.episodes.includes(epData.id));
   html += '<div style="margin-top:8px">';
   epThemes.forEach(t => {
     html += `<span class="theme-tag" style="background:${t.color}22;color:${t.color};border:1px solid ${t.color}44;cursor:pointer" onclick="showThemeById('${t.id}')">${t.label}</span> `;
   });
   html += '</div>';
 
-  quotes.forEach(q => {
-    html += buildQuoteCard(q, staffel.color);
-  });
-
+  quotes.forEach(q => { html += buildQuoteCard(q, staffel.color); });
   panel.innerHTML = html;
 }
 
+function showEpisodeById(id) {
+  const ep = DATA.episodes.find(e => e.id === id);
+  if (ep) showEpisode(ep);
+}
+
 function showThemeById(id) {
   const theme = window._nodes.find(n => n.id === id);
   if (theme) showTheme(theme);
 }
 
-// ---- Quote Card HTML ----
+// ── Panel: Quote detail (from mindmap tap) ──
+function showQuoteDetail(q) {
+  const quoteData = DATA.quotes.find(dq => dq.id === q.id) || q;
+  AudioPlayer.load(quoteData);
+}
+
+// ── Quote Card ──
 function buildQuoteCard(q, color) {
   const hasAudio = q.audioFile && q.startTime !== null;
   const cls = hasAudio ? '' : ' no-audio';
@@ -780,102 +875,23 @@ function buildQuoteCard(q, color) {
   const timeStr = q.startTime !== null ? fmtTime(q.startTime) : '';
 
   return `
-    <div class="quote-card${cls}" id="card-${q.id}" style="border-left-color:${color}"
-         onclick="${hasAudio ? `playQuoteById('${q.id}')` : ''}">
+    <div class="quote-card${cls}" id="card-${q.id}" style="border-left-color:${color}">
       <div class="quote-text">"${escHtml(q.verbatim || q.text)}"</div>
       <div class="quote-meta">
         <span>${q.speaker} · ${q.episode}${timeStr ? ' · ' + timeStr : ''}${topBadge}</span>
-        ${hasAudio ? `<span class="play-icon"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>` : ''}
+        ${hasAudio ? `<button class="play-btn" onclick="event.stopPropagation();playQuoteById('${q.id}')"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>` : ''}
       </div>
     </div>`;
 }
 
-// ---- Audio Playback ----
 function playQuoteById(id) {
   const q = DATA.quotes.find(q => q.id === id);
-  if (q) playQuote(q);
+  if (q) AudioPlayer.play(q);
 }
 
-function playQuote(q) {
-  if (!q.audioFile || q.startTime === null) return;
-
-  const audio = document.getElementById('main-audio');
-  const bar = document.getElementById('audio-bar');
-  const nowPlaying = document.getElementById('now-playing');
-  const btn = document.getElementById('play-pause-btn');
-  const icon = document.getElementById('play-pause-icon');
-
-  // Stop current playback
-  audio.pause();
-  document.querySelectorAll('.quote-card.playing').forEach(c => c.classList.remove('playing'));
-
-  // Highlight card
-  const card = document.getElementById(`card-${q.id}`);
-  if (card) card.classList.add('playing');
-
-  currentQuoteId = q.id;
-  const endTime = q.endTime;
-
-  // Clear old event handlers
-  audio.ontimeupdate = null;
-  audio.onended = null;
-
-  // Set source — only reload if different file
-  const newSrc = `audio/${q.audioFile}`;
-  const sameFile = audio.src && audio.src.endsWith(q.audioFile);
-
-  if (!sameFile) {
-    audio.src = newSrc;
-  }
-
-  // iOS Safari requires play() in the same call stack as the user gesture.
-  // So we play first (even from wrong position), then seek once loaded.
-  audio.currentTime = q.startTime;
-  const playPromise = audio.play();
-  if (playPromise) {
-    playPromise.then(() => {
-      // Seek after play starts (needed when source just changed)
-      if (Math.abs(audio.currentTime - q.startTime) > 2) {
-        audio.currentTime = q.startTime;
-      }
-    }).catch(() => {
-      // Autoplay blocked — try after load
-      audio.addEventListener('canplay', function handler() {
-        audio.removeEventListener('canplay', handler);
-        audio.currentTime = q.startTime;
-        audio.play().catch(() => {});
-      });
-    });
-  }
-  icon.setAttribute('d', PAUSE_SVG);
-
-  // Stop at end time
-  audio.ontimeupdate = () => {
-    if (endTime && audio.currentTime >= endTime) {
-      audio.pause();
-      icon.setAttribute('d', PLAY_SVG);
-    }
-    document.getElementById('audio-time').textContent = fmtTime(audio.currentTime);
-  };
-
-  audio.onended = () => icon.setAttribute('d', PLAY_SVG);
-
-  nowPlaying.innerHTML = `<strong>"${q.text.substring(0, 80)}…"</strong> — ${q.speaker} (${q.episode})`;
-  bar.classList.add('visible');
-
-  btn.onclick = () => {
-    if (audio.paused) {
-      audio.play();
-      icon.setAttribute('d', PAUSE_SVG);
-    } else {
-      audio.pause();
-      icon.setAttribute('d', PLAY_SVG);
-    }
-  };
-}
-
-// ---- Helpers ----
+// ── Helpers ──
 function fmtTime(sec) {
+  if (sec === null || sec === undefined) return '';
   const m = Math.floor(sec / 60);
   const s = Math.floor(sec % 60);
   return `${m}:${s.toString().padStart(2, '0')}`;