<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>VoxiClean – RCM DIGITAL MEDIA</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="VoxiClean – Vocal Cleaning & Mix Tool von RCM DIGITAL MEDIA. Vocals aufnehmen oder hochladen, EQ, De-Esser, Parallel Compression, mit Instrumental mischen, Lyrics analysieren und als WAV exportieren." />
  <style>
    :root {
      color-scheme: dark;
      --bg: #020617;
      --bg-elevated: #0b1220;
      --border-subtle: #1f2937;
      --accent: #38bdf8;
      --text-main: #e5e7eb;
      --text-muted: #9ca3af;
      --text-soft: #6b7280;
    }

    * { box-sizing: border-box; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #1e293b 0, #020617 45%, #000 100%);
      color: var(--text-main);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
    }

    main {
      max-width: 980px;
      width: 100%;
      padding: 24px 16px 72px;
      position: relative;
      z-index: 1;
    }

    main::before {
      content: "";
      position: fixed;
      inset: auto 0 0 50%;
      width: 520px;
      height: 520px;
      translate: -50% 40%;
      background: radial-gradient(circle at center, rgba(56,189,248,0.16), transparent 60%);
      opacity: 0.6;
      pointer-events: none;
      z-index: -1;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .brand-block { display: flex; flex-direction: column; gap: 2px; }

    .brand-title-row { display: flex; align-items: center; gap: 8px; }

    .brand-title {
      font-size: 1.9rem;
      font-weight: 750;
      letter-spacing: 0.02em;
    }

    .brand-pill {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.4);
      color: #cbd5f5;
      background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.3));
    }

    .brand-voxi { color:#38bdf8; }
    .brand-clean { color:#ef4444; }

    .brand-sub {
      font-size: 0.8rem;
      color: var(--text-soft);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .header-tags { display: flex; gap: 8px; flex-wrap: wrap; }

    .tag {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(56,189,248,0.5);
      background: linear-gradient(120deg, rgba(56,189,248,0.18), rgba(15,23,42,0.7));
      color: #e0f2fe;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(56,189,248,0.9);
    }

    p.description {
      color: var(--text-muted);
      margin: 0 0 18px;
      max-width: 640px;
      font-size: 0.92rem;
    }

    .card {
      background: radial-gradient(circle at top left, rgba(148,163,184,0.18), transparent 40%),
                  linear-gradient(145deg, rgba(15,23,42,0.95), rgba(2,6,23,0.98));
      border-radius: 20px;
      padding: 16px 16px 14px;
      margin-bottom: 16px;
      box-shadow: 0 26px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(15,23,42,0.9);
      border: 1px solid rgba(148,163,184,0.25);
      position: relative;
      overflow: hidden;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 55%);
      opacity: 0;
      transition: opacity 0.12s ease;
      pointer-events: none;
    }

    .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(56,189,248,0.2);
      border-color: rgba(56,189,248,0.3);
    }

    .card:hover::before { opacity: 1; }

    .card-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .step-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-soft);
    }

    .step-badge {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: 600;
      background: radial-gradient(circle at 30% 10%, rgba(56,189,248,0.85), rgba(37,99,235,0.95));
      color: #e5f5ff;
      box-shadow: 0 0 12px rgba(56,189,248,0.9);
    }

    h2 {
      font-size: 1.02rem;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-sub {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin: 0 0 6px;
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      margin-top: 4px;
    }

    .control-group {
      background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
      border-radius: 14px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(30,64,175,0.5);
      box-shadow: inset 0 0 0 1px rgba(15,23,42,0.9), 0 14px 30px rgba(15,23,42,0.8);
    }

    .control-group h3 {
      font-size: 0.9rem;
      margin: 0 0 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .control-tag {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.5);
      color: #cbd5f5;
    }

    label {
      display: flex;
      flex-direction: column;
      font-size: 0.8rem;
      margin-bottom: 8px;
      gap: 3px;
      color: #e5e7eb;
    }

    .label-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .label-title {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .label-main { font-weight: 500; }

    .label-range {
      font-size: 0.72rem;
      color: var(--text-soft);
    }

    input[type="file"] {
      margin-top: 6px;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
      margin-top: 4px;
    }

    .value-display {
      font-size: 0.8rem;
      color: #e0f2fe;
      font-variant-numeric: tabular-nums;
      text-align: center;
      margin-top: 2px;
    }

    .hint {
      font-size: 0.78rem;
      color: var(--text-soft);
      margin-top: 4px;
    }

    button {
      margin-top: 12px;
      padding: 10px 18px;
      font-size: 0.94rem;
      border-radius: 999px;
      border: 1px solid rgba(56,189,248,0.5);
      cursor: pointer;
      background: radial-gradient(circle at 20% 0, #38bdf8, #0ea5e9);
      color: #02131f;
      font-weight: 600;
      box-shadow: 0 14px 40px rgba(56,189,248,0.46), 0 0 0 1px rgba(8,47,73,0.9);
      transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    button.secondary {
      background: radial-gradient(circle at 20% 0, #1d4ed8, #0f3fae);
      border-color: rgba(59,130,246,0.6);
      box-shadow: 0 14px 40px rgba(59,130,246,0.46), 0 0 0 1px rgba(15,23,42,0.9);
      color: #e0f2fe;
    }

    button.ghost {
      background: transparent;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.5);
      box-shadow: none;
      color: #e5e7eb;
      padding: 7px 14px;
      font-size: 0.8rem;
    }

    .btn-icon { font-size: 1rem; translate: 0 0.5px; }

    button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
      filter: grayscale(0.2);
    }

    button:hover:not(:disabled) {
      transform: translateY(-1.5px);
      box-shadow: 0 20px 50px rgba(56,189,248,0.6), 0 0 0 1px rgba(37,99,235,0.8);
      filter: saturate(1.1);
    }

    button.secondary:hover:not(:disabled) {
      box-shadow: 0 20px 50px rgba(59,130,246,0.6), 0 0 0 1px rgba(37,99,235,0.8);
    }

    button.ghost:hover:not(:disabled) {
      box-shadow: 0 0 0 1px rgba(148,163,184,0.8);
      filter: none;
      transform: translateY(-1px);
      background: rgba(15,23,42,0.9);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }

    #status {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-top: 8px;
      min-height: 1.2em;
    }

    audio {
      width: 100%;
      margin-top: 12px;
      border-radius: 999px;
      filter: drop-shadow(0 10px 30px rgba(15,23,42,0.9));
    }

    #downloadLink {
      display: none;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 0.86rem;
      color: var(--accent);
      text-decoration: none;
    }

    #downloadLink::before { content: "↓"; font-size: 0.9rem; }

    #downloadLink:hover { text-decoration: underline; }

    .export-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .export-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      color: var(--text-muted);
      background: rgba(15,23,42,0.9);
      border-radius: 999px;
      padding: 5px 10px;
      border: 1px solid rgba(148,163,184,0.5);
      cursor: pointer;
    }

    .export-option input { accent-color: var(--accent); }

    textarea {
      width: 100%;
      min-height: 200px;
      border-radius: 12px;
      border: 1px solid rgba(30,64,175,0.7);
      background: radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
      padding: 10px 12px;
      resize: vertical;
      color: var(--text-main);
      font-size: 0.86rem;
      font-family: inherit;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(15,23,42,0.9);
    }

    textarea::placeholder {
      color: var(--text-soft);
    }

    .flow-analysis {
      font-size: 0.78rem;
      color: var(--text-soft);
      margin-top: 8px;
      border-top: 1px solid rgba(30,64,175,0.6);
      padding-top: 6px;
    }

    .flow-line {
      padding: 2px 0;
    }

    .flow-line.ok {
      color: #bbf7d0;
    }

    .flow-line.low,
    .flow-line.high {
      color: #fecaca;
    }

    .dropzone {
      border: 1px dashed rgba(148,163,184,0.7);
      border-radius: 12px;
      padding: 10px;
      text-align: center;
      margin: 6px 0 8px;
      font-size: 0.8rem;
      color: var(--text-soft);
      background: rgba(15,23,42,0.8);
      cursor: pointer;
      transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
    }

    .dropzone.dragover {
      border-color: rgba(56,189,248,0.9);
      background: rgba(15,23,42,0.95);
      color: #e0f2fe;
    }

    footer {
      margin-top: 24px;
      font-size: 0.75rem;
      color: var(--text-soft);
      text-align: center;
      border-top: 1px solid rgba(31,41,55,0.9);
      padding-top: 10px;
    }

    .footer-brand {
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 2px;
      color: #9ca3af;
    }

    .footer-sub { font-size: 0.78rem; }

    .eq-visual {
      margin-top: 10px;
      border-radius: 10px;
      border: 1px solid rgba(30,64,175,0.8);
      background: radial-gradient(circle at top, rgba(15,23,42,0.96), rgba(15,23,42,0.9));
      padding: 6px 8px 8px;
    }

    .eq-visual canvas {
      width: 100%;
      height: 120px;
      display: block;
    }

    .eq-visual-label {
      font-size: 0.72rem;
      color: var(--text-soft);
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
    }

    @media (max-width: 640px) {
      body { justify-content: stretch; }

      .brand-title { font-size: 1.5rem; }

      main {
        max-width: 100%;
        padding: 18px 10px 60px;
      }

      header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .header-right { align-items: flex-start; }

      .card {
        padding: 12px 10px 10px;
        border-radius: 16px;
        margin-bottom: 12px;
      }

      .controls {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .button-row {
        flex-direction: column;
        align-items: stretch;
      }

      button,
      .export-option {
        width: 100%;
        justify-content: center;
      }

      input[type="file"] {
        width: 100%;
      }

      label { font-size: 0.85rem; }

      .label-range,
      .hint { font-size: 0.75rem; }

      audio { margin-top: 8px; }
    }

    /* EQ: Layout Low-/High-Cut + Bänder als Drehregler */
    .eq-row-pairs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 10px;
    }

    .eq-band-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 8px;
    }

    .knob-block {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .knob-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-soft);
    }

    .knob-circle {
      width: 70px;
      height: 70px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.6);
      background: radial-gradient(circle at 30% 0, rgba(56,189,248,0.18), rgba(15,23,42,0.95));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 6px;
      box-shadow: 0 10px 25px rgba(15,23,42,0.9);
    }

    .knob-value {
      font-size: 0.8rem;
      font-variant-numeric: tabular-nums;
      color: #e0f2fe;
      text-align: center;
    }

    .knob-slider {
      width: 100%;
      accent-color: var(--accent);
    }
  </style>
</head>
<body>
<main>
<header>
  <div class="brand-block">
    <div class="brand-title-row">
      <div class="brand-title">
      <span class="brand-voxi">Voxi</span>
      <span class="brand-clean">Clean</span>
      </div>
      <div class="brand-pill">RCM DIGITAL MEDIA</div>
    </div>
    <div class="brand-sub">Vocal pre-cleaning · EQ · Parallel Comp</div>
  </div>

  <div class="header-right">
    <div class="header-tags">
      <div class="tag">
        <span class="tag-dot"></span>VOCAL&nbsp;CLEANER
      </div>
      <div class="tag">FREE&nbsp;WEB&nbsp;APP</div>
    </div>

    <button id="worksheetToggleBtn" class="ghost">
      <span class="btn-icon">📝</span> Worksheet
    </button>
  </div>
</header>

  <p class="description">
    Browser-basierter Vocal-Cleaner: Optional Recording, Noise Gate, 3-Band-EQ mit Low-/High-Cut, De-Esser, Parallel-Kompressor, Rough-Mix mit Instrumental & Lyrics-Worksheet mit BPM-Check.
  </p>

  <div class="card" id="worksheetCard" style="display:none;">
    <div class="card-header-row">
      <div>
        <div class="step-label">
          <span class="step-badge">✎</span> Worksheet
        </div>
        <h2>Lyrics, BPM & Flow-Check</h2>
      </div>
    </div>
    <p class="card-sub">
      Schreibe deine Lyrics, stell BPM & Flow-Modus ein und check grob die Silben-Dichte pro Bar.
    </p>
    <div class="controls">
      <div class="control-group">
        <h3>Lyrics &amp; Timing<span class="control-tag">writing · bpm</span></h3>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Tempo</span>
              <span class="label-range">60 – 180 BPM</span>
            </span>
          </span>
          <input type="range" id="bpmInput" min="60" max="180" step="1" value="140" />
          <span class="value-display" id="bpmVal"></span>
        </label>

        <div style="display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 10px;">
          <label class="export-option" style="padding:4px 10px;">
            <input type="radio" name="flowMode" value="normal" checked />
            <span>Normal</span>
          </label>
          <label class="export-option" style="padding:4px 10px;">
            <input type="radio" name="flowMode" value="double" />
            <span>Doubletime</span>
          </label>
        </div>

        <textarea id="worksheetText" placeholder="Eine Zeile = eine Bar.&#10;Beispiel:&#10;Ich zähl die Silben, jede Line sitzt tight..."></textarea>

        <div class="button-row">
          <button id="worksheetExportBtn" class="secondary">
            📝 Lyrics als TXT exportieren
          </button>
        </div>

        <div class="flow-analysis" id="flowAnalysis"></div>

        <p class="hint">
          Die Silben-Analyse ist nur eine Orientierung. Am Ende entscheidet dein Gefühl, Delivery & Pausen.
        </p>
      </div>
    </div>
  </div>

  <div class="card" id="recordCard">
    <div class="card-header-row">
      <div>
        <div class="step-label"><span class="step-badge">🎤</span> Recording</div>
        <h2>Vocal Recording (optional)</h2>
      </div>
    </div>

    <p class="card-sub">
      Nimm direkt im Browser auf. Die Aufnahme wird wie eine Vocal-Datei verwendet. Optional kannst du einen Beat für Monitoring laden.
    </p>

    <div class="controls">
      <div class="control-group">
        <h3>Aufnahme<span class="control-tag">mic</span></h3>

        <button id="recordStartBtn">
          ● Aufnahme starten
        </button>

        <button id="recordStopBtn" disabled class="secondary">
          ■ Aufnahme stoppen
        </button>

        <button id="recordDeleteBtn" disabled style="margin-top:8px;">
          ✖ Aufnahme verwerfen
        </button>

        <p class="hint" id="recordStatus">Bereit.</p>
      </div>

      <div class="control-group">
        <h3>Beat fürs Recording<span class="control-tag">instrumental</span></h3>

        <div id="recordBeatDrop" class="dropzone">
          Beat hierher ziehen oder klicken, um eine Datei zu wählen (nur Audio).
        </div>

        <input type="file" id="recordBeatInput" accept="audio/*" style="margin-top:6px;" />

        <audio id="recordBeatPlayer" controls></audio>

        <p class="hint" id="recordBeatHint">
          Der Beat wird während der Aufnahme abgespielt (loop). Nutze Kopfhörer, sonst gibt’s Übersprechung.
        </p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header-row">
      <div>
        <div class="step-label"><span class="step-badge">1</span> Dateien</div>
        <h2>Vocal &amp; Instrumental laden</h2>
      </div>
    </div>
    <p class="card-sub">
      Lade deine Vocal-Spur und bei Bedarf das Instrumental. Alles passiert lokal im Browser.
    </p>

    <label>
      <span class="label-top-row">
        <span class="label-title"><span class="label-main">Vocal-Datei</span></span>
      </span>
      <input type="file" id="vocalInput" accept="audio/*" />
    </label>

    <label>
      <span class="label-top-row">
        <span class="label-title"><span class="label-main">Instrumental (optional)</span></span>
      </span>
      <input type="file" id="instrumentalInput" accept="audio/*" />
    </label>

    <p class="hint">Mindestens Vocals sind nötig. Instrumental nur für Rough-Mix & Export „Mix“.</p>
  </div>

  <div class="card">
    <div class="card-header-row">
      <div>
        <div class="step-label"><span class="step-badge">2</span> Processing</div>
        <h2>Noise Gate · EQ · Parallel-Kompressor · De-Esser</h2>
      </div>
    </div>
    <p class="card-sub">
      Erst Aufräumen mit Noise Gate & EQ, dann De-Esser für S-Laute und Parallel-Kompression für Dichte ohne platt zu machen.
    </p>

    <div class="controls">
      <div class="control-group">
        <h3>Noise Gate<span class="control-tag">dynamics</span></h3>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Threshold</span>
              <span class="label-range">−80 dB bis −20 dB</span>
            </span>
          </span>
          <input type="range" id="gateThreshold" min="-80" max="-20" step="1" value="-50" />
          <span class="value-display" id="gateThresholdVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Reduction</span>
              <span class="label-range">−60 dB bis −5 dB</span>
            </span>
          </span>
          <input type="range" id="gateReduction" min="-60" max="-5" step="1" value="-30" />
          <span class="value-display" id="gateReductionVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Attack</span>
              <span class="label-range">0,5 ms bis 30 ms</span>
            </span>
          </span>
          <input type="range" id="gateAttack" min="0.5" max="30" step="0.5" value="5" />
          <span class="value-display" id="gateAttackVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Release</span>
              <span class="label-range">10 ms bis 500 ms</span>
            </span>
          </span>
          <input type="range" id="gateRelease" min="10" max="500" step="10" value="150" />
          <span class="value-display" id="gateReleaseVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Hold</span>
              <span class="label-range">0 ms bis 200 ms</span>
            </span>
          </span>
          <input type="range" id="gateHold" min="0" max="200" step="10" value="60" />
          <span class="value-display" id="gateHoldVal"></span>
        </label>

        <p class="hint">Zu hartes Gate frisst Silben & Atmer. Lieber etwas softer starten.</p>
      </div>

      <div class="control-group">
        <h3>3-Band EQ &amp; Cuts<span class="control-tag">tone</span></h3>

        <div class="eq-row-pairs">
          <div class="knob-block">
            <div class="knob-label">Low-Cut</div>
            <div class="knob-circle">
              <span class="knob-value" id="eqLowCutVal">80 Hz</span>
            </div>
            <input type="range" id="eqLowCut" class="knob-slider" min="40" max="160" step="5" value="80" />
            <div class="label-range">40 Hz bis 160 Hz</div>
          </div>

          <div class="knob-block">
            <div class="knob-label">High-Cut</div>
            <div class="knob-circle">
              <span class="knob-value" id="eqHighCutVal">18000 Hz</span>
            </div>
            <input type="range" id="eqHighCut" class="knob-slider" min="8000" max="20000" step="500" value="18000" />
            <div class="label-range">8 kHz bis 20 kHz</div>
          </div>
        </div>

        <div class="eq-band">
          <div class="eq-band-header" style="font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--text-main);">Band 1 (Low)</div>
          <div class="eq-band-row">
            <div class="knob-block">
              <div class="knob-label">Freq</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand1FreqVal">120 Hz</span>
              </div>
              <input type="range" id="eqMidFreq" class="knob-slider" min="80" max="400" step="10" value="120" />
              <div class="label-range">80 Hz bis 400 Hz</div>
            </div>

            <div class="knob-block">
              <div class="knob-label">Gain</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand1GainVal">0 dB</span>
              </div>
              <input type="range" id="eqLowGain" class="knob-slider" min="-12" max="12" step="0.5" value="0" />
              <div class="label-range">−12 dB bis +12 dB</div>
            </div>
          </div>
        </div>

        <div class="eq-band" style="margin-top: 12px;">
          <div class="eq-band-header" style="font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--text-main);">Band 2 (Mid)</div>
          <div class="eq-band-row">
            <div class="knob-block">
              <div class="knob-label">Freq</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand2FreqVal">2000 Hz</span>
              </div>
              <input type="range" id="eqMidFreq_AlternativeID" class="knob-slider" min="400" max="4000" step="50" value="2000" oninput="document.getElementById('eqMidFreq').value=this.value; document.getElementById('eqMidFreq').dispatchEvent(new Event('input'));" />
              <div class="label-range">400 Hz bis 4 kHz</div>
            </div>

            <div class="knob-block">
              <div class="knob-label">Gain</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand2GainVal">0 dB</span>
              </div>
              <input type="range" id="eqMidGain" class="knob-slider" min="-12" max="12" step="0.5" value="0" />
              <div class="label-range">−12 dB bis +12 dB</div>
            </div>
          </div>
        </div>

        <div class="eq-band" style="margin-top: 12px;">
          <div class="eq-band-header" style="font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--text-main);">Band 3 (High)</div>
          <div class="eq-band-row">
            <div class="knob-block">
              <div class="knob-label">Freq</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand3FreqVal">8000 Hz</span>
              </div>
              <input type="range" id="eqBand3Freq" class="knob-slider" min="4000" max="12000" step="100" value="8000" />
              <div class="label-range">4 kHz bis 12 kHz</div>
            </div>

            <div class="knob-block">
              <div class="knob-label">Gain</div>
              <div class="knob-circle">
                <span class="knob-value" id="eqBand3GainVal">0 dB</span>
              </div>
              <input type="range" id="eqHighGain" class="knob-slider" min="-12" max="12" step="0.5" value="0" />
              <div class="label-range">−12 dB bis +12 dB</div>
            </div>
          </div>
        </div>

        <p class="hint" style="margin-top: 12px;">
          Low-Cut für Rumpeln, High-Cut gegen scharfe Höhen. Mit Mid-Band kannst du Nasalität oder Präsenz formen.
        </p>

        <div class="eq-visual">
          <canvas id="eqCanvas"></canvas>
          <div class="eq-visual-label">
            <span>EQ-Kurve</span>
            <span>20 Hz – 20 kHz</span>
          </div>
        </div>
      </div>

      <div class="control-group">
        <h3>Parallel Compressor<span class="control-tag">glue</span></h3>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Threshold</span>
              <span class="label-range">−40 dB bis −15 dB</span>
            </span>
          </span>
          <input type="range" id="compThreshold" min="-40" max="-15" step="1" value="-24" />
          <span class="value-display" id="compThresholdVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Ratio</span>
              <span class="label-range">1,5:1 bis 8:1</span>
            </span>
          </span>
          <input type="range" id="compRatio" min="1.5" max="8" step="0.1" value="3" />
          <span class="value-display" id="compRatioVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Attack</span>
              <span class="label-range">1 ms bis 30 ms</span>
            </span>
          </span>
          <input type="range" id="compAttack" min="1" max="30" step="1" value="5" />
          <span class="value-display" id="compAttackVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Release</span>
              <span class="label-range">50 ms bis 600 ms</span>
            </span>
          </span>
          <input type="range" id="compRelease" min="50" max="600" step="10" value="200" />
          <span class="value-display" id="compReleaseVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Mix (Wet)</span>
              <span class="label-range">0 % bis 100 %</span>
            </span>
          </span>
          <input type="range" id="compMix" min="0" max="100" step="1" value="40" />
          <span class="value-display" id="compMixVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Make-Up Gain</span>
              <span class="label-range">−6 dB bis +6 dB</span>
            </span>
          </span>
          <input type="range" id="compMakeup" min="-6" max="6" step="0.5" value="0" />
          <span class="value-display" id="compMakeupVal"></span>
        </label>

        <p class="hint">
          Parallel heißt: Dry + komprimiertes Signal gemischt. Mix hoch = dichter, aber auf die Transienten achten.
        </p>
      </div>

      <div class="control-group">
        <h3>De-Esser (High-Band)<span class="control-tag">sibilance</span></h3>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Frequenz</span>
              <span class="label-range">4 kHz bis 9 kHz</span>
            </span>
          </span>
          <input type="range" id="deessFreq" min="4000" max="9000" step="250" value="6500" />
          <span class="value-display" id="deessFreqVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Stärke</span>
              <span class="label-range">0 % bis 100 %</span>
            </span>
          </span>
          <input type="range" id="deessAmount" min="0" max="100" step="1" value="40" />
          <span class="value-display" id="deessAmountVal"></span>
        </label>

        <p class="hint">
          Reduziert harte S- und Sch-Laute, indem der Hochfrequenz-Anteil leicht komprimiert wird.
        </p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header-row">
      <div>
        <div class="step-label"><span class="step-badge">3</span> Mix</div>
        <h2>Rough-Mix mit Instrumental</h2>
      </div>
    </div>
    <p class="card-sub">
      Pegel von Vocals und Instrumental einstellen und in Echtzeit anhören, inklusive A/B-Vergleich Raw vs. Processed.
    </p>

    <div class="controls">
      <div class="control-group">
        <h3>Lautstärke<span class="control-tag">balance</span></h3>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Vocal Level</span>
              <span class="label-range">0,00× bis 2,00×</span>
            </span>
          </span>
          <input type="range" id="vocalGain" min="0" max="2" step="0.05" value="1.1" />
          <span class="value-display" id="vocalGainVal"></span>
        </label>

        <label>
          <span class="label-top-row">
            <span class="label-title">
              <span class="label-main">Instrumental Level</span>
              <span class="label-range">0,00× bis 2,00×</span>
            </span>
          </span>
          <input type="range" id="instrumentalGain" min="0" max="2" step="0.05" value="0.9" />
          <span class="value-display" id="instrumentalGainVal"></span>
        </label>

        <p class="hint">Richtwert: Vocals leicht vor dem Instrumental, nicht im Beat vergraben.</p>
      </div>
    </div>

    <div class="button-row">
      <button id="previewBtn" class="secondary" disabled>
        <span class="btn-icon">▶</span> Preview abspielen
      </button>
      <button id="abToggleBtn" class="ghost" disabled>
        A/B: Processed
      </button>
      <p class="hint">Während der Preview kannst du alle Regler bewegen.</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header-row">
      <div>
        <div class="step-label"><span class="step-badge">4</span> Export</div>
        <h2>Rendern &amp; WAV exportieren</h2>
      </div>
    </div>
    <p class="card-sub">
      VoxiClean rendert deine Einstellungen, inklusive De-Esser, normalisiert auf ca. −3 dB Peak und erstellt eine 16-bit WAV.
    </p>

    <div class="export-options">
      <label class="export-option">
        <input type="radio" name="exportMode" value="vocal" checked />
        <span>Nur Vocals (clean stem)</span>
      </label>
      <label class="export-option">
        <input type="radio" name="exportMode" value="mix" />
        <span>Vocal + Instrumental Mix</span>
      </label>
    </div>

    <div class="button-row">
      <button id="processBtn" disabled>
        <span class="btn-icon">⚡</span> Verarbeiten &amp; WAV erzeugen
      </button>
    </div>

    <p id="status"></p>
    <audio id="player" controls></audio>
    <a id="downloadLink" download="VoxiClean_output.wav">Verarbeitete Datei herunterladen</a>
  </div>

  <footer>
    <div class="footer-brand">RCM DIGITAL MEDIA</div>
    <div class="footer-sub">VoxiClean – Vocal Cleaner · 3-Band EQ · Parallel Compression · De-Esser · Worksheet & Flow-Check</div>
  </footer>
</main>

<script>
  const vocalInput = document.getElementById("vocalInput");
  const instrumentalInput = document.getElementById("instrumentalInput");
  const processBtn = document.getElementById("processBtn");
  const previewBtn = document.getElementById("previewBtn");
  const abToggleBtn = document.getElementById("abToggleBtn");
  const statusEl = document.getElementById("status");
  const player = document.getElementById("player");
  const downloadLink = document.getElementById("downloadLink");

  // Worksheet
  const worksheetToggleBtn = document.getElementById("worksheetToggleBtn");
  const worksheetCard = document.getElementById("worksheetCard");
  const worksheetText = document.getElementById("worksheetText");
  const worksheetExportBtn = document.getElementById("worksheetExportBtn");
  const bpmInput = document.getElementById("bpmInput");
  const bpmVal = document.getElementById("bpmVal");
  const flowModeRadios = document.querySelectorAll('input[name="flowMode"]');
  const flowAnalysisEl = document.getElementById("flowAnalysis");

  worksheetToggleBtn.addEventListener("click", () => {
    const isHidden = worksheetCard.style.display === "none" || worksheetCard.style.display === "";
    worksheetCard.style.display = isHidden ? "block" : "none";
    worksheetToggleBtn.innerHTML = isHidden
      ? '<span class="btn-icon">📝</span> Worksheet schließen'
      : '<span class="btn-icon">📝</span> Worksheet';
  });

  function dbToLinear(db) {
    return Math.pow(10, db / 20);
  }

  // Recording Variablen
  let mediaRecorder = null;
  let recordedChunks = [];
  let recordingActive = false;

  const recordStartBtn = document.getElementById("recordStartBtn");
  const recordStopBtn = document.getElementById("recordStopBtn");
  const recordDeleteBtn = document.getElementById("recordDeleteBtn");
  const recordStatus = document.getElementById("recordStatus");

  const recordBeatDrop = document.getElementById("recordBeatDrop");
  const recordBeatInput = document.getElementById("recordBeatInput");
  const recordBeatPlayer = document.getElementById("recordBeatPlayer");
  const recordBeatHint = document.getElementById("recordBeatHint");

  // Global audio files
  let vocalFile = null;
  let instrumentalFile = null;

  // Slider-Konfiguration
  // ACHTUNG: IDs im HTML wurden angepasst, um Konflikte zu vermeiden (z.B. eqMidFreq_AlternativeID)
  // Die Zuordnung hier muss zu den tatsächlichen IDs im HTML passen.
  const sliderConfigs = [
    { id: "gateThreshold",   labelId: "gateThresholdVal",   fmt: v => v + " dB" },
    { id: "gateReduction",   labelId: "gateReductionVal",   fmt: v => v + " dB" },
    { id: "gateAttack",      labelId: "gateAttackVal",      fmt: v => parseFloat(v).toFixed(1) + " ms" },
    { id: "gateRelease",     labelId: "gateReleaseVal",     fmt: v => v + " ms" },
    { id: "gateHold",        labelId: "gateHoldVal",        fmt: v => v + " ms" },

    { id: "eqLowCut",        labelId: "eqLowCutVal",        fmt: v => v + " Hz" },
    { id: "eqHighCut",       labelId: "eqHighCutVal",       fmt: v => v + " Hz" },
    { id: "eqLowGain",       labelId: "eqBand1GainVal",     fmt: v => v + " dB" }, // Korrigierte ID für Band 1 Gain
    // Band 1 Freq wird über eqMidFreq gesteuert
    { id: "eqMidFreq",       labelId: "eqBand1FreqVal",     fmt: v => v + " Hz" }, // Korrigierte ID für Band 1 Freq
    { id: "eqMidGain",       labelId: "eqBand2GainVal",     fmt: v => v + " dB" }, // Korrigierte ID für Band 2 Gain
    // Band 2 Freq hat eine alternative ID im HTML
    { id: "eqMidFreq_AlternativeID", labelId: "eqBand2FreqVal", fmt: v => v + " Hz" },

    { id: "eqHighGain",      labelId: "eqBand3GainVal",     fmt: v => v + " dB" }, // Korrigierte ID für Band 3 Gain
    { id: "eqBand3Freq",     labelId: "eqBand3FreqVal",     fmt: v => v + " Hz" },

    { id: "compThreshold",   labelId: "compThresholdVal",   fmt: v => v + " dB" },
    { id: "compRatio",       labelId: "compRatioVal",       fmt: v => parseFloat(v).toFixed(1) + ":1" },
    { id: "compAttack",      labelId: "compAttackVal",      fmt: v => v + " ms" },
    { id: "compRelease",     labelId: "compReleaseVal",     fmt: v => v + " ms" },
    { id: "compMix",         labelId: "compMixVal",         fmt: v => v + " %" },
    { id: "compMakeup",      labelId: "compMakeupVal",      fmt: v => v + " dB" },

    { id: "vocalGain",       labelId: "vocalGainVal",       fmt: v => parseFloat(v).toFixed(2) + "×" },
    { id: "instrumentalGain",labelId: "instrumentalGainVal",fmt: v => parseFloat(v).toFixed(2) + "×" },

    { id: "deessFreq",       labelId: "deessFreqVal",       fmt: v => v + " Hz" },
    { id: "deessAmount",     labelId: "deessAmountVal",     fmt: v => v + " %" },

    { id: "bpmInput",        labelId: "bpmVal",             fmt: v => v + " BPM" },
  ];

  // EQ-Canvas
  const eqCanvas = document.getElementById("eqCanvas");
  let eqCanvasCtx = eqCanvas ? eqCanvas.getContext("2d") : null;

  function resizeEqCanvas() {
    if (!eqCanvas || !eqCanvasCtx) return;
    const dpr = window.devicePixelRatio || 1;
    const rect = eqCanvas.getBoundingClientRect();
    if (!rect.width || !rect.height) return;

    eqCanvas.width = rect.width * dpr;
    eqCanvas.height = rect.height * dpr;
    eqCanvasCtx.setTransform(dpr, 0, 0, dpr, 0, 0);

    updateEqVisualization();
  }

  window.addEventListener("resize", resizeEqCanvas);

  let previewCtx = null;
  let previewVocalGainNode = null;
  let previewInstGainNode = null;

  let previewLowCut = null;
  let previewHighCut = null;
  let previewLowShelf = null;
  let previewMid = null;
  let previewHighShelf = null;

  let previewDeessLow = null;
  let previewDeessHigh = null;
  let previewDeessComp = null;
  let previewDeessLowGain = null;
  let previewDeessHighGain = null;
  let previewDeessSum = null;

  let previewComp = null;
  let previewDryGain = null;
  let previewWetGain = null;
  let previewSumGain = null;

  let previewAbDryGain = null;
  let previewAbProcGain = null;
  let previewMode = "processed";

  let previewPlaying = false;

  function handleLiveSliderUpdate(id, value) {
    if (!previewCtx || !previewPlaying) return;

    // Vocal/Inst Gain
    if (id === "vocalGain" && previewVocalGainNode) previewVocalGainNode.gain.value = value;
    if (id === "instrumentalGain" && previewInstGainNode) previewInstGainNode.gain.value = value;

    // EQ Cuts
    if (id === "eqLowCut" && previewLowCut) previewLowCut.frequency.value = value;
    if (id === "eqHighCut" && previewHighCut) previewHighCut.frequency.value = value;

    // EQ Bands - Mapping der IDs zu den Filtern
    // Band 1 (Low Shelf)
    if (id === "eqLowGain" && previewLowShelf) previewLowShelf.gain.value = value;
    if (id === "eqMidFreq" && previewLowShelf) previewLowShelf.frequency.value = value; // Band 1 Freq

    // Band 2 (Peaking)
    if (id === "eqMidGain" && previewMid) previewMid.gain.value = value;
    if (id === "eqMidFreq_AlternativeID" && previewMid) previewMid.frequency.value = value; // Band 2 Freq

    // Band 3 (High Shelf)
    if (id === "eqHighGain" && previewHighShelf) previewHighShelf.gain.value = value;
    if (id === "eqBand3Freq" && previewHighShelf) previewHighShelf.frequency.value = value;


    if (id === "deessFreq") {
      if (previewDeessLow) previewDeessLow.frequency.value = value;
      if (previewDeessHigh) previewDeessHigh.frequency.value = value;
    }
    if (id === "deessAmount") {
      const amt = Math.min(100, Math.max(0, value));
      if (previewDeessComp) {
        const thr = -10 - (amt * 0.4);
        const ratio = 2 + (amt * 0.06);
        previewDeessComp.threshold.value = thr;
        previewDeessComp.ratio.value = ratio;
      }
      if (previewDeessHighGain) {
        const gainLinear = 1 - (amt / 100) * 0.5;
        previewDeessHighGain.gain.value = gainLinear;
      }
    }

    if (!previewComp) return;

    if (id === "compThreshold") previewComp.threshold.value = value;
    if (id === "compRatio") previewComp.ratio.value = value;
    if (id === "compAttack") previewComp.attack.value = value / 1000;
    if (id === "compRelease") previewComp.release.value = value / 1000;
    if (id === "compMix" && previewDryGain && previewWetGain) {
      const mix = Math.min(1, Math.max(0, value / 100));
      previewDryGain.gain.value = 1 - mix;
      previewWetGain.gain.value = mix;
    }
    if (id === "compMakeup" && previewSumGain) {
      previewSumGain.gain.value = dbToLinear(value);
    }
  }

  function updateEqVisualization() {
    if (!eqCanvas || !eqCanvasCtx) return;

    const rect = eqCanvas.getBoundingClientRect();
    const w = rect.width;
    const h = rect.height;
    if (!w || !h) return;

    // Werte aus den Inputs holen
    const lowCut   = parseFloat(document.getElementById("eqLowCut").value || 80);
    const highCut  = parseFloat(document.getElementById("eqHighCut").value || 18000);
    
    // Band 1
    const band1Freq  = parseFloat(document.getElementById("eqMidFreq").value || 120);
    const band1Gain  = parseFloat(document.getElementById("eqLowGain").value || 0);
    
    // Band 2
    const band2Freq  = parseFloat(document.getElementById("eqMidFreq_AlternativeID").value || 2000);
    const band2Gain  = parseFloat(document.getElementById("eqMidGain").value || 0);
    
    // Band 3
    const band3Freq = parseFloat(document.getElementById("eqBand3Freq").value || 8000);
    const band3Gain = parseFloat(document.getElementById("eqHighGain").value || 0);

    const minHz = 20;
    const maxHz = 20000;
    const minDb = -18;
    const maxDb = 18;

    function hzFromT(t) {
      return minHz * Math.pow(maxHz / minHz, t);
    }

    function lowShelfDb(freq, gain, fc) {
      const o = Math.log2(freq / fc);
      if (o <= -1) return gain;
      if (o >= 1)  return 0;
      return gain * (1 - (o + 1) / 2);
    }

    function highShelfDb(freq, gain, fc) {
      const o = Math.log2(freq / fc);
      if (o <= -1) return 0;
      if (o >= 1)  return gain;
      return gain * ((o + 1) / 2);
    }

    function bellDb(freq, gain, center, q = 1) {
      if (gain === 0) return 0;
      const d = Math.log2(freq / center);
      const width = 1 / q;
      return gain * Math.exp(-(d * d) / (2 * width * width));
    }

    function lowCutDb(freq, fc) {
      if (freq >= fc) return 0;
      const o = Math.log2(fc / freq);
      return -24 * o;
    }

    function highCutDb(freq, fc) {
      if (freq <= fc) return 0;
      const o = Math.log2(freq / fc);
      return -24 * o;
    }

    function totalGainDb(freq) {
      let g = 0;
      // Band 1: Low Shelf
      g += lowShelfDb(freq,  band1Gain, band1Freq);
      // Band 3: High Shelf
      g += highShelfDb(freq, band3Gain, band3Freq);
      // Band 2: Peaking (Bell)
      g += bellDb(freq, band2Gain, band2Freq, 1);

      g += lowCutDb(freq, lowCut);
      g += highCutDb(freq, highCut);

      if (g > maxDb) g = maxDb;
      if (g < minDb) g = minDb;
      return g;
    }

    function yFromDb(db) {
      const norm = (db - minDb) / (maxDb - minDb);
      return h * (1 - norm);
    }

    eqCanvasCtx.clearRect(0, 0, w, h);
    eqCanvasCtx.fillStyle = "rgba(15,23,42,0.95)";
    eqCanvasCtx.fillRect(0, 0, w, h);

    const yZero = yFromDb(0);
    eqCanvasCtx.strokeStyle = "rgba(148,163,184,0.4)";
    eqCanvasCtx.lineWidth = 1;
    eqCanvasCtx.beginPath();
    eqCanvasCtx.moveTo(0, yZero);
    eqCanvasCtx.lineTo(w, yZero);
    eqCanvasCtx.stroke();

    eqCanvasCtx.strokeStyle = "#38bdf8";
    eqCanvasCtx.lineWidth = 2;
    eqCanvasCtx.beginPath();
    const steps = w;

    for (let i = 0; i <= steps; i++) {
      const t = i / steps;
      const hz = hzFromT(t);
      const db = totalGainDb(hz);
      const y = yFromDb(db);
      const x = (i / steps) * w;

      if (i === 0) eqCanvasCtx.moveTo(x, y);
      else eqCanvasCtx.lineTo(x, y);
    }
    eqCanvasCtx.stroke();
  }

  function updateSliderUI(id) {
    const cfg = sliderConfigs.find(c => c.id === id);
    if (!cfg) return;
    const slider = document.getElementById(cfg.id);
    const label = document.getElementById(cfg.labelId);
    if (!slider || !label) return;
    label.textContent = cfg.fmt(slider.value);
    handleLiveSliderUpdate(id, parseFloat(slider.value));
    updateEqVisualization();
  }

  sliderConfigs.forEach(cfg => {
    const slider = document.getElementById(cfg.id);
    const label = document.getElementById(cfg.labelId);
    if (!slider || !label) return;
    slider.addEventListener("input", () => updateSliderUI(cfg.id));
    updateSliderUI(cfg.id);
  });

  function updateButtonsState() {
    const hasVocal = !!vocalFile;
    processBtn.disabled = !hasVocal;
    previewBtn.disabled = !hasVocal;
    if (abToggleBtn) abToggleBtn.disabled = true;
  }

  function stopPreview() {
    if (previewCtx) {
      previewCtx.close();
      previewCtx = null;
    }
    previewVocalGainNode = null;
    previewInstGainNode = null;
    previewLowCut = null;
    previewHighCut = null;
    previewLowShelf = null;
    previewMid = null;
    previewHighShelf = null;

    previewDeessLow = null;
    previewDeessHigh = null;
    previewDeessComp = null;
    previewDeessLowGain = null;
    previewDeessHighGain = null;
    previewDeessSum = null;

    previewComp = null;
    previewDryGain = null;
    previewWetGain = null;
    previewSumGain = null;

    previewAbDryGain = null;
    previewAbProcGain = null;

    previewPlaying = false;
    previewMode = "processed";
    previewBtn.innerHTML = '<span class="btn-icon">▶</span> Preview abspielen';
    if (abToggleBtn) {
      abToggleBtn.disabled = true;
      abToggleBtn.textContent = "A/B: Processed";
    }
  }

  // Helper: Instrumental setzen (egal von wo)
  function setInstrumentalFile(file, sourceLabel) {
    if (!file) return;
    instrumentalFile = file;

    if (vocalFile) {
      statusEl.textContent = "Vocal: " + vocalFile.name + " | Instrumental: " + instrumentalFile.name;
    } else {
      statusEl.textContent = "Instrumental geladen: " + instrumentalFile.name;
    }

    const url = URL.createObjectURL(file);
    recordBeatPlayer.src = url;
    recordBeatPlayer.loop = true;
    recordBeatHint.textContent = "Beat geladen aus " + sourceLabel + ": " + file.name;
  }

  // File Upload Handling
  vocalInput.addEventListener("change", () => {
    if (vocalInput.files && vocalInput.files[0]) {
      vocalFile = vocalInput.files[0];
      statusEl.textContent = "Vocal-Datei ausgewählt: " + vocalFile.name;
    } else {
      vocalFile = null;
      statusEl.textContent = "";
    }
    player.removeAttribute("src");
    downloadLink.style.display = "none";
    stopPreview();
    updateButtonsState();
  });

  instrumentalInput.addEventListener("change", () => {
    if (instrumentalInput.files && instrumentalInput.files[0]) {
      setInstrumentalFile(instrumentalInput.files[0], "Instrumental-Bereich");
    } else {
      instrumentalFile = null;
      if (vocalFile) statusEl.textContent = "Vocal-Datei ausgewählt: " + vocalFile.name;
      else statusEl.textContent = "";
      recordBeatPlayer.removeAttribute("src");
      recordBeatHint.textContent = "Der Beat wird während der Aufnahme abgespielt (loop). Nutze Kopfhörer, sonst gibt’s Übersprechung.";
    }
    player.removeAttribute("src");
    downloadLink.style.display = "none";
    stopPreview();
    updateButtonsState();
  });

  // Drag & Drop für Beat im Recording-Fenster
  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ["dragenter", "dragover", "dragleave", "drop"].forEach(evt => {
    recordBeatDrop.addEventListener(evt, preventDefaults, false);
  });

  ["dragenter", "dragover"].forEach(evt => {
    recordBeatDrop.addEventListener(evt, () => {
      recordBeatDrop.classList.add("dragover");
    });
  });

  ["dragleave", "drop"].forEach(evt => {
    recordBeatDrop.addEventListener(evt, () => {
      recordBeatDrop.classList.remove("dragover");
    });
  });

  recordBeatDrop.addEventListener("drop", e => {
    const dt = e.dataTransfer;
    if (!dt || !dt.files || !dt.files.length) return;

    const file = dt.files[0];
    if (!file.type.startsWith("audio/")) {
      recordBeatHint.textContent = "Nur Audiodateien sind erlaubt.";
      return;
    }
    setInstrumentalFile(file, "Recording-Beat Dropzone");
  });

  recordBeatDrop.addEventListener("click", () => {
    recordBeatInput.click();
  });

  recordBeatInput.addEventListener("change", () => {
    if (recordBeatInput.files && recordBeatInput.files[0]) {
      const file = recordBeatInput.files[0];
      if (!file.type.startsWith("audio/")) {
        recordBeatHint.textContent = "Nur Audiodateien sind erlaubt.";
        recordBeatInput.value = "";
        return;
      }
      setInstrumentalFile(file, "Recording-Beat Upload");
    }
  });

  // Recording: Aufnahme starten
  recordStartBtn.addEventListener("click", async () => {
    // Check für HTTPS oder localhost, sonst wird AudioWorklet/MediaDevices oft blockiert
    if (location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
      console.warn("Recording benötigt HTTPS oder localhost.");
    }

    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      recordStatus.textContent = "Dein Browser unterstützt kein Recording (oder kein HTTPS).";
      return;
    }

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

      mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
      recordedChunks = [];

      mediaRecorder.ondataavailable = e => {
        if (e.data.size > 0) recordedChunks.push(e.data);
      };

      mediaRecorder.onstop = async () => {
        const blob = new Blob(recordedChunks, { type: "audio/webm" });
        // Konvertiere Blob zu ArrayBuffer für die Web Audio API
        const arrayBuffer = await blob.arrayBuffer();
        // Erstelle ein File-Objekt, damit der Rest der App es wie einen Upload behandeln kann
        vocalFile = new File([arrayBuffer], "Recording.webm", { type: "audio/webm" });

        statusEl.textContent = "Aufnahme gespeichert: Recording.webm";
        recordStatus.textContent = "Aufnahme gespeichert.";

        // Stoppe alle Tracks, um das Mikrofon-Icon im Browser/OS zu entfernen
        stream.getTracks().forEach(t => t.stop());

        updateButtonsState();
      };

      mediaRecorder.start();
      recordingActive = true;

      recordStartBtn.disabled = true;
      recordStopBtn.disabled = false;
      recordDeleteBtn.disabled = true;

      recordStatus.textContent = "Nimmt auf…";

      if (recordBeatPlayer.src) {
        try {
          recordBeatPlayer.currentTime = 0;
          recordBeatPlayer.play();
        } catch (e) {
          console.warn("Beat konnte nicht automatisch gestartet werden (Autoplay-Policy).");
        }
      }

    } catch (err) {
      recordStatus.textContent = "Fehler: Mikrofon blockiert oder nicht verfügbar.";
      console.error(err);
    }
  });

  // Recording: Aufnahme stoppen
  recordStopBtn.addEventListener("click", () => {
    if (!mediaRecorder || !recordingActive) return;
    mediaRecorder.stop();
    recordingActive = false;

    recordStartBtn.disabled = false;
    recordStopBtn.disabled = true;
    recordDeleteBtn.disabled = false;

    recordStatus.textContent = "Verarbeitung…";

    try {
      recordBeatPlayer.pause();
    } catch {}
  });

  // Recording: Aufnahme verwerfen
  recordDeleteBtn.addEventListener("click", () => {
    recordedChunks = [];
    mediaRecorder = null;
    vocalFile = null;

    recordStatus.textContent = "Aufnahme gelöscht.";
    statusEl.textContent = "";

    player.removeAttribute("src");
    downloadLink.style.display = "none";
    stopPreview();
    updateButtonsState();

    recordStartBtn.disabled = false;
    recordStopBtn.disabled = true;
    recordDeleteBtn.disabled = true;
  });

  // Worksheet TXT Export
  worksheetExportBtn.addEventListener("click", () => {
    const text = (worksheetText.value || "").trim();

    if (!text.length) {
      alert("Das Textfeld ist leer. Schreib erst Lyrics rein.");
      return;
    }

    const blob = new Blob([text], { type: "text/plain" });
    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "VoxiClean_Lyrics.txt";
    link.click();

    URL.revokeObjectURL(url);
  });

  // Silben-Zählung (grobe Heuristik)
  function countSyllables(line) {
    const cleaned = line
      .toLowerCase()
      .replace(/[^a-z0-9äöüßáéíóúàèìòùâêîôûäöüÿ]/gi, " ");
    const words = cleaned.split(/\s+/).filter(Boolean);
    if (!words.length) return 0;

    let count = 0;
    const vowelRegex = /[aeiouyäöü]+/gi;
    for (const w of words) {
      const matches = w.match(vowelRegex);
      if (matches && matches.length) count += matches.length;
      else count += 1;
    }
    return count;
  }

  function getTargetRange(bpm, mode) {
    const baseBpm = 90;
    const baseSyllables = 16;
    let target = baseSyllables * (bpm / baseBpm);
    if (mode === "double") target *= 2;
    const min = Math.round(target * 0.7);
    const max = Math.round(target * 1.3);
    return { min, max, target: Math.round(target) };
  }

  function updateFlowAnalysis() {
    if (!flowAnalysisEl) return;

    const raw = worksheetText.value || "";
    const lines = raw.split(/\r?\n/);
    const bpm = parseInt(bpmInput.value, 10) || 120;

    let mode = "normal";
    flowModeRadios.forEach(r => { if (r.checked) mode = r.value; });

    const { min, max } = getTargetRange(bpm, mode);

    let html = "";
    let barIndex = 0;

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();
      if (!line) continue;

      barIndex++;
      const syll = countSyllables(line);
      let cls = "ok";
      let note = "im Rahmen";

      if (syll < min) {
        cls = "low";
        note = "eher leer (wenig Silben)";
      } else if (syll > max) {
        cls = "high";
        note = "sehr dicht (viele Silben)";
      }

      html += `<div class="flow-line ${cls}">Bar ${barIndex}: ${syll} Silben – ${note}</div>`;
    }

    if (!html) {
      flowAnalysisEl.innerHTML =
        `<span class="hint">Eine Zeile = eine Bar. Ziel grob: ${min}–${max} Silben pro Bar bei ${bpm} BPM (${mode === "double" ? "Doubletime" : "Normal"}).</span>`;
    } else {
      flowAnalysisEl.innerHTML =
        `<div style="margin-bottom:4px;">Zielbereich: ca. ${min}–${max} Silben pro Bar bei ${bpm} BPM (${mode === "double" ? "Doubletime" : "Normal"}).</div>` +
        html;
    }
  }

  worksheetText.addEventListener("input", updateFlowAnalysis);
  bpmInput.addEventListener("input", () => {
    updateSliderUI("bpmInput");
    updateFlowAnalysis();
  });
  flowModeRadios.forEach(r => r.addEventListener("change", updateFlowAnalysis));

  // Noise Gate (Custom JS Implementation)
  function applyNoiseGatePro(ctx, buffer, options) {
    const { thresholdDb, reductionDb, attackMs, releaseMs, holdMs } = options;

    const channels = buffer.numberOfChannels;
    const length = buffer.length;
    const sampleRate = buffer.sampleRate;
    const out = ctx.createBuffer(channels, length, sampleRate);

    const threshold = dbToLinear(thresholdDb);
    const reduction = dbToLinear(reductionDb);

    // Zeitkonstanten berechnen
    const attackTime = Math.max(attackMs, 0.1) / 1000;
    const releaseTime = Math.max(releaseMs, 1) / 1000;
    const holdSamples = Math.max(0, Math.round((holdMs / 1000) * sampleRate));

    // Koeffizienten für Envelope Follower (exponentiell)
    const attackCoeff = Math.exp(-1 / (attackTime * sampleRate));
    const releaseCoeff = Math.exp(-1 / (releaseTime * sampleRate));

    // RMS-Fenster für Pegelmessung
    const rmsTime = 0.01; // 10ms Fenster
    const rmsCoeff = Math.exp(-1 / (rmsTime * sampleRate));

    for (let ch = 0; ch < channels; ch++) {
      const input = buffer.getChannelData(ch);
      const output = out.getChannelData(ch);

      let envGain = reduction; // Startzustand: geschlossen
      let level = 0;
      let state = "closed";
      let holdCounter = 0;

      for (let i = 0; i < length; i++) {
        const x = input[i];
        const abs = Math.abs(x);

        // 1. Pegelmessung (RMS-ähnlich)
        level = rmsCoeff * level + (1 - rmsCoeff) * abs;

        // 2. State Machine (Open/Hold/Closed)
        if (level >= threshold) {
          state = "open";
          holdCounter = holdSamples;
        } else {
          if (holdCounter > 0) {
             holdCounter--;
             // state bleibt "open" während hold
          } else {
             state = "closed";
          }
        }

        // 3. Ziel-Gain bestimmen
        const targetGain = state === "open" ? 1.0 : reduction;

        // 4. Envelope auf Ziel-Gain anwenden (Attack/Release)
        if (targetGain > envGain) {
          envGain = attackCoeff * envGain + (1 - attackCoeff) * targetGain;
        } else {
          envGain = releaseCoeff * envGain + (1 - releaseCoeff) * targetGain;
        }

        // Begrenzung (Sicherheit)
        if (envGain > 1.0) envGain = 1.0;
        if (envGain < reduction) envGain = reduction;

        // 5. Gain anwenden
        output[i] = x * envGain;
      }
    }

    return out;
  }

  // WAV-Header schreiben
  function audioBufferToWav(buffer) {
    const numChannels = buffer.numberOfChannels;
    const sampleRate = buffer.sampleRate;
    const format = 1; // PCM
    const bitDepth = 16;

    const numFrames = buffer.length;
    const bytesPerSample = bitDepth / 8;
    const blockAlign = numChannels * bytesPerSample;
    const byteRate = sampleRate * blockAlign;
    const dataSize = numFrames * blockAlign;

    const bufferSize = 44 + dataSize;
    const arrayBuffer = new ArrayBuffer(bufferSize);
    const view = new DataView(arrayBuffer);
    let offset = 0;

    function writeString(str) {
      for (let i = 0; i < str.length; i++) view.setUint8(offset++, str.charCodeAt(i));
    }

    // RIFF chunk
    writeString("RIFF");
    view.setUint32(offset, 36 + dataSize, true); offset += 4;
    writeString("WAVE");
    // fmt chunk
    writeString("fmt ");
    view.setUint32(offset, 16, true); offset += 4; // Subchunk1Size (16 for PCM)
    view.setUint16(offset, format, true); offset += 2;
    view.setUint16(offset, numChannels, true); offset += 2;
    view.setUint32(offset, sampleRate, true); offset += 4;
    view.setUint32(offset, byteRate, true); offset += 4;
    view.setUint16(offset, blockAlign, true); offset += 2;
    view.setUint16(offset, bitDepth, true); offset += 2;
    // data chunk
    writeString("data");
    view.setUint32(offset, dataSize, true); offset += 4;

    // Audio-Daten schreiben (Float32 -> Int16)
    const interleaved = new Float32Array(numFrames * numChannels);
    for (let ch = 0; ch < numChannels; ch++) {
      const chData = buffer.getChannelData(ch);
      for (let i = 0; i < numFrames; i++) {
        interleaved[i * numChannels + ch] = chData[i];
      }
    }

    for (let i = 0; i < interleaved.length; i++) {
      let sample = interleaved[i];
      // Clipping verhindern
      sample = Math.max(-1, Math.min(1, sample));
      // Konvertierung zu 16-bit PCM
      const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
      view.setInt16(offset, intSample, true);
      offset += 2;
    }

    return arrayBuffer;
  }

  // Normalisierung
  function normalizeBufferToMinus3dB(buffer) {
    const channels = buffer.numberOfChannels;
    const length = buffer.length;
    let peak = 0;

    // Peak finden
    for (let ch = 0; ch < channels; ch++) {
      const data = buffer.getChannelData(ch);
      for (let i = 0; i < length; i++) {
        const v = Math.abs(data[i]);
        if (v > peak) peak = v;
      }
    }

    if (peak === 0) return buffer;

    const targetPeak = dbToLinear(-3); // ca. 0.707
    const gain = targetPeak / peak;

    // Gain anwenden, wenn nötig (nur nach unten oder oben, wenn unter Ziel)
    // Hier wird immer auf -3dB normalisiert, auch wenn es leiser war.
    if (Math.abs(gain - 1) < 0.001) return buffer; // Nichts zu tun

    for (let ch = 0; ch < channels; ch++) {
      const data = buffer.getChannelData(ch);
      for (let i = 0; i < length; i++) {
        data[i] *= gain;
      }
    }

    return buffer;
  }

  function getExportMode() {
    const radios = document.querySelectorAll('input[name="exportMode"]');
    for (const r of radios) if (r.checked) return r.value;
    return "vocal";
  }

  // --- PREVIEW (Echtzeit) ---
  async function startPreview() {
    if (!vocalFile) {
      statusEl.textContent = "Du musst mindestens eine Vocal-Datei oder Aufnahme haben.";
      return;
    }

    stopPreview();
    statusEl.textContent = "Erzeuge Preview mit VoxiClean...";
    previewBtn.disabled = true;
    if (abToggleBtn) abToggleBtn.disabled = true;

    try {
      // Dateien laden und dekodieren
      const vocalArrayBuffer = await vocalFile.arrayBuffer();
      let instrumentalArrayBuffer = null;
      if (instrumentalFile) instrumentalArrayBuffer = await instrumentalFile.arrayBuffer();

      const AudioCtx = window.AudioContext || window.webkitAudioContext;
      // Temporärer Kontext zum Dekodieren und für das Noise Gate
      const tempCtx = new AudioCtx();
      const vocalBuffer = await tempCtx.decodeAudioData(vocalArrayBuffer);
      let instrumentalBuffer = null;
      if (instrumentalArrayBuffer) instrumentalBuffer = await tempCtx.decodeAudioData(instrumentalArrayBuffer);

      // Parameter holen
      const gateThresholdDb = parseFloat(document.getElementById("gateThreshold").value);
      const gateReductionDb = parseFloat(document.getElementById("gateReduction").value);
      const gateAttackMs = parseFloat(document.getElementById("gateAttack").value);
      const gateReleaseMs = parseFloat(document.getElementById("gateRelease").value);
      const gateHoldMs = parseFloat(document.getElementById("gateHold").value);

      const eqLowCutVal    = parseFloat(document.getElementById("eqLowCut").value);
      const eqHighCutVal   = parseFloat(document.getElementById("eqHighCut").value);
      // Korrekte IDs für die Bänder verwenden
      const eqLowGainVal   = parseFloat(document.getElementById("eqLowGain").value); // Band 1 Gain
      const eqMidFreqVal   = parseFloat(document.getElementById("eqMidFreq").value); // Band 1 Freq
      const eqMidGainVal   = parseFloat(document.getElementById("eqMidGain").value); // Band 2 Gain
      const eqHighGainVal  = parseFloat(document.getElementById("eqHighGain").value); // Band 3 Gain

      const compThreshold = parseFloat(document.getElementById("compThreshold").value);
      const compRatio     = parseFloat(document.getElementById("compRatio").value);
      const compAttack    = parseFloat(document.getElementById("compAttack").value);
      const compRelease   = parseFloat(document.getElementById("compRelease").value);
      const compMix       = parseFloat(document.getElementById("compMix").value) / 100;
      const compMakeup    = parseFloat(document.getElementById("compMakeup").value);

      const deessFreqVal   = parseFloat(document.getElementById("deessFreq").value);
      const deessAmountVal = parseFloat(document.getElementById("deessAmount").value);

      const vocalGainVal = parseFloat(document.getElementById("vocalGain").value);
      const instrumentalGainVal = parseFloat(document.getElementById("instrumentalGain").value);

      // 1. Noise Gate anwenden (destruktiv im Buffer, da JS-basiert)
      const gatedVocal = applyNoiseGatePro(tempCtx, vocalBuffer, {
        thresholdDb: gateThresholdDb,
        reductionDb: gateReductionDb,
        attackMs: gateAttackMs,
        releaseMs: gateReleaseMs,
        holdMs: gateHoldMs
      });
      // Temp Kontext schließen
      tempCtx.close();

      // Haupt-AudioContext für die Wiedergabe erstellen
      const AudioCtx2 = window.AudioContext || window.webkitAudioContext;
      previewCtx = new AudioCtx2();

      // Quelle für bearbeitetes Signal (gated)
      const vocalSrc = previewCtx.createBufferSource();
      vocalSrc.buffer = gatedVocal;
      vocalSrc.loop = true; // Endlos-Schleife für Preview

      // Quelle für trockenes Signal (Original für A/B)
      const drySrc = previewCtx.createBufferSource();
      drySrc.buffer = vocalBuffer;
      drySrc.loop = true;

      // --- Effektkette aufbauen ---

      // EQ Filter erstellen
      previewLowCut = previewCtx.createBiquadFilter();
      previewLowCut.type = "highpass";
      previewLowCut.frequency.value = eqLowCutVal;
      previewLowCut.Q.value = 0.707;

      previewHighCut = previewCtx.createBiquadFilter();
      previewHighCut.type = "lowpass";
      previewHighCut.frequency.value = eqHighCutVal;
      previewHighCut.Q.value = 0.707;

      previewLowShelf = previewCtx.createBiquadFilter();
      previewLowShelf.type = "lowshelf";
      previewLowShelf.frequency.value = eqMidFreqVal; // Band 1 Freq
      previewLowShelf.gain.value = eqLowGainVal; // Band 1 Gain

      previewMid = previewCtx.createBiquadFilter();
      previewMid.type = "peaking";
      // Frequenz für Band 2 wird live gesetzt, initialer Wert hier egal
      previewMid.frequency.value = 2000; 
      previewMid.Q.value = 1.0;
      previewMid.gain.value = eqMidGainVal; // Band 2 Gain

      previewHighShelf = previewCtx.createBiquadFilter();
      previewHighShelf.type = "highshelf";
      previewHighShelf.frequency.value = 8000; // Band 3 Freq (fix)
      previewHighShelf.gain.value = eqHighGainVal; // Band 3 Gain

      // De-Esser (Split-Band)
      // Pfad 1: Tiefpass (alles unter der Frequenz)
      previewDeessLow = previewCtx.createBiquadFilter();
      previewDeessLow.type = "lowpass";
      previewDeessLow.frequency.value = deessFreqVal;
      previewDeessLow.Q.value = 0.707;

      // Pfad 2: Hochpass (die S-Laute)
      previewDeessHigh = previewCtx.createBiquadFilter();
      previewDeessHigh.type = "highpass";
      previewDeessHigh.frequency.value = deessFreqVal;
      previewDeessHigh.Q.value = 0.707;

      // Kompressor nur für den Hochpass-Pfad
      previewDeessComp = previewCtx.createDynamicsCompressor();
      const deessAmt = Math.min(100, Math.max(0, deessAmountVal));
      previewDeessComp.threshold.value = -10 - (deessAmt * 0.4); // Dynamischer Threshold
      previewDeessComp.ratio.value = 2 + (deessAmt * 0.06);      // Dynamische Ratio
      previewDeessComp.attack.value = 0.003; // Sehr schnell (3ms)
      previewDeessComp.release.value = 0.12; // Schnell (120ms)
      previewDeessComp.knee.value = 6;

      // Gain-Knoten zum Wiederzusammenführen
      previewDeessLowGain = previewCtx.createGain();
      previewDeessLowGain.gain.value = 1;

      previewDeessHighGain = previewCtx.createGain();
      // Make-Up Gain für den komprimierten Hochtonpfad
      previewDeessHighGain.gain.value = 1 - (deessAmt / 100) * 0.5;

      previewDeessSum = previewCtx.createGain();

      // Parallel Compressor
      previewComp = previewCtx.createDynamicsCompressor();
      previewComp.threshold.value = compThreshold;
      previewComp.ratio.value = compRatio;
      previewComp.attack.value = compAttack / 1000;
      previewComp.release.value = compRelease / 1000;
      previewComp.knee.value = 6;

      // Dry/Wet Mix Knoten
      previewDryGain = previewCtx.createGain();
      previewWetGain = previewCtx.createGain();
      previewSumGain = previewCtx.createGain(); // Make-Up Gain

      const mix = Math.min(1, Math.max(0, compMix));
      previewDryGain.gain.value = 1 - mix;
      previewWetGain.gain.value = mix;
      previewSumGain.gain.value = dbToLinear(compMakeup);

      // A/B Switching Knoten
      previewVocalGainNode = previewCtx.createGain();
      previewVocalGainNode.gain.value = vocalGainVal;

      previewAbDryGain = previewCtx.createGain();
      previewAbProcGain = previewCtx.createGain();
      previewAbDryGain.gain.value = 0; // Startet mit Processed
      previewAbProcGain.gain.value = 1;

      // --- Routing verbinden ---
      // 1. EQ Kette
      vocalSrc.connect(previewLowCut);
      previewLowCut.connect(previewHighCut);
      previewHighCut.connect(previewLowShelf);
      previewLowShelf.connect(previewMid);
      previewMid.connect(previewHighShelf);

      // 2. Split für De-Esser
      previewHighShelf.connect(previewDeessLow);
      previewHighShelf.connect(previewDeessHigh);

      // Pfad 1: Tiefen
      previewDeessLow.connect(previewDeessLowGain);
      previewDeessLowGain.connect(previewDeessSum);

      // Pfad 2: Höhen (komprimiert)
      previewDeessHigh.connect(previewDeessComp);
      previewDeessComp.connect(previewDeessHighGain);
      previewDeessHighGain.connect(previewDeessSum);

      // 3. Split für Parallel Comp
      // De-Esser Summe geht in Dry und Wet Pfad
      previewDeessSum.connect(previewDryGain);
      previewDeessSum.connect(previewComp); // Wet Pfad

      // Wet Pfad geht durch Kompressor und dann in WetGain
      previewComp.connect(previewWetGain);

      // 4. Summe Parallel Comp
      previewDryGain.connect(previewSumGain);
      previewWetGain.connect(previewSumGain);

      // 5. A/B Routing
      // Processed Signal
      previewSumGain.connect(previewAbProcGain);
      previewAbProcGain.connect(previewVocalGainNode);

      // Dry Signal (Original)
      drySrc.connect(previewAbDryGain);
      previewAbDryGain.connect(previewVocalGainNode);

      // 6. Ausgang
      previewVocalGainNode.connect(previewCtx.destination);

      // --- Instrumental (optional) ---
      let instSrc = null;
      if (instrumentalBuffer) {
        instSrc = previewCtx.createBufferSource();
        instSrc.buffer = instrumentalBuffer;
        instSrc.loop = true;
        previewInstGainNode = previewCtx.createGain();
        previewInstGainNode.gain.value = instrumentalGainVal;
        instSrc.connect(previewInstGainNode);
        previewInstGainNode.connect(previewCtx.destination);
      }

      // Starten
      const now = previewCtx.currentTime;
      vocalSrc.start(now);
      drySrc.start(now);
      if (instSrc) instSrc.start(now);

      previewPlaying = true;
      previewBtn.innerHTML = '<span class="btn-icon">■</span> Preview stoppen';
      statusEl.textContent = "Preview läuft (Loop). Passe Gate, EQ, De-Esser, Kompressor & Mix nach Geschmack an.";
      previewMode = "processed";
      if (abToggleBtn) {
        abToggleBtn.disabled = false;
        abToggleBtn.textContent = "A/B: Processed";
      }
      
      // Initiales Update der Slider-Werte, die nicht im Konstruktor gesetzt wurden
      handleLiveSliderUpdate("eqMidFreq_AlternativeID", parseFloat(document.getElementById("eqMidFreq_AlternativeID").value));


    } catch (err) {
      console.error(err);
      statusEl.textContent = "Fehler bei der Preview: " + err.message;
      if (abToggleBtn) abToggleBtn.disabled = true;
      stopPreview();
    } finally {
      previewBtn.disabled = !vocalFile;
    }
  }

  previewBtn.addEventListener("click", () => {
    if (!previewPlaying) startPreview();
    else {
      stopPreview();
      statusEl.textContent = "Preview gestoppt.";
    }
  });

  if (abToggleBtn) {
    abToggleBtn.addEventListener("click", () => {
      if (!previewCtx || !previewPlaying || !previewAbDryGain || !previewAbProcGain) return;

      if (previewMode === "processed") {
        // Umschalten auf Dry
        previewAbDryGain.gain.setTargetAtTime(1, previewCtx.currentTime, 0.01); // Weiches Umschalten
        previewAbProcGain.gain.setTargetAtTime(0, previewCtx.currentTime, 0.01);
        previewMode = "dry";
        abToggleBtn.textContent = "A/B: Dry (Original)";
        statusEl.textContent = "Preview: Original-Vocals (A/B Vergleich).";
      } else {
        // Umschalten auf Processed
        previewAbDryGain.gain.setTargetAtTime(0, previewCtx.currentTime, 0.01);
        previewAbProcGain.gain.setTargetAtTime(1, previewCtx.currentTime, 0.01);
        previewMode = "processed";
        abToggleBtn.textContent = "A/B: Processed";
        statusEl.textContent = "Preview: Bearbeitete Vocals (A/B Vergleich).";
      }
    });
  }

  // --- OFFLINE PROCESSING (Export) ---
  async function processFiles(vocalFile, instrumentalFile, exportMode) {
    statusEl.textContent = "Verarbeite Audio mit VoxiClean (Offline-Rendering)...";
    processBtn.disabled = true;
    stopPreview();

    try {
      // 1. Dateien dekodieren
      const vocalArrayBuffer = await vocalFile.arrayBuffer();
      let instrumentalArrayBuffer = null;
      if (instrumentalFile) instrumentalArrayBuffer = await instrumentalFile.arrayBuffer();

      // Temporärer Kontext nur zum Dekodieren
      const decodeCtx = new (window.AudioContext || window.webkitAudioContext)();
      const vocalBuffer = await decodeCtx.decodeAudioData(vocalArrayBuffer);
      let instrumentalBuffer = null;
      if (instrumentalArrayBuffer) instrumentalBuffer = await decodeCtx.decodeAudioData(instrumentalArrayBuffer);
      
      // Parameter holen (gleiche wie Preview)
      const gateThresholdDb = parseFloat(document.getElementById("gateThreshold").value);
      const gateReductionDb = parseFloat(document.getElementById("gateReduction").value);
      const gateAttackMs = parseFloat(document.getElementById("gateAttack").value);
      const gateReleaseMs = parseFloat(document.getElementById("gateRelease").value);
      const gateHoldMs = parseFloat(document.getElementById("gateHold").value);

      const eqLowCutVal    = parseFloat(document.getElementById("eqLowCut").value);
      const eqHighCutVal   = parseFloat(document.getElementById("eqHighCut").value);
      const eqLowGainVal   = parseFloat(document.getElementById("eqLowGain").value);
      const eqMidFreqVal   = parseFloat(document.getElementById("eqMidFreq").value);
      const eqMidGainVal   = parseFloat(document.getElementById("eqMidGain").value);
      const eqHighGainVal  = parseFloat(document.getElementById("eqHighGain").value);

      const compThreshold = parseFloat(document.getElementById("compThreshold").value);
      const compRatio     = parseFloat(document.getElementById("compRatio").value);
      const compAttack    = parseFloat(document.getElementById("compAttack").value);
      const compRelease   = parseFloat(document.getElementById("compRelease").value);
      const compMix       = Math.min(1, Math.max(0, parseFloat(document.getElementById("compMix").value) / 100));
      const compMakeup    = parseFloat(document.getElementById("compMakeup").value);

      const deessFreqVal   = parseFloat(document.getElementById("deessFreq").value);
      const deessAmountVal = parseFloat(document.getElementById("deessAmount").value);

      const vocalGainVal = parseFloat(document.getElementById("vocalGain").value);
      const instrumentalGainVal = parseFloat(document.getElementById("instrumentalGain").value);

      // 2. Noise Gate anwenden
      const gatedVocal = applyNoiseGatePro(decodeCtx, vocalBuffer, {
        thresholdDb: gateThresholdDb,
        reductionDb: gateReductionDb,
        attackMs: gateAttackMs,
        releaseMs: gateReleaseMs,
        holdMs: gateHoldMs
      });
      
      decodeCtx.close(); // Wird nicht mehr gebraucht

      // 3. OfflineAudioContext für Vocal-Processing erstellen
      const channels = gatedVocal.numberOfChannels;
      const length = gatedVocal.length;
      const sampleRate = gatedVocal.sampleRate;
      
      // Offline Context: Rendert so schnell wie möglich
      const eqCtx = new OfflineAudioContext(channels, length, sampleRate);
      
      const src = eqCtx.createBufferSource();
      src.buffer = gatedVocal;

      // Effektkette exakt wie in der Preview nachbauen
      const lowCut = eqCtx.createBiquadFilter();
      lowCut.type = "highpass";
      lowCut.frequency.value = eqLowCutVal;
      lowCut.Q.value = 0.707;

      const highCut = eqCtx.createBiquadFilter();
      highCut.type = "lowpass";
      highCut.frequency.value = eqHighCutVal;
      highCut.Q.value = 0.707;

      const lowShelf = eqCtx.createBiquadFilter();
      lowShelf.type = "lowshelf";
      lowShelf.frequency.value = eqMidFreqVal;
      lowShelf.gain.value = eqLowGainVal;

      const mid = eqCtx.createBiquadFilter();
      mid.type = "peaking";
      // Hier müssen wir den Wert des zweiten Frequenzreglers nehmen
      mid.frequency.value = parseFloat(document.getElementById("eqMidFreq_AlternativeID").value);
      mid.Q.value = 1.0;
      mid.gain.value = eqMidGainVal;

      const highShelf = eqCtx.createBiquadFilter();
      highShelf.type = "highshelf";
      highShelf.frequency.value = 8000;
      highShelf.gain.value = eqHighGainVal;

      // De-Esser
      const deessLow = eqCtx.createBiquadFilter();
      deessLow.type = "lowpass";
      deessLow.frequency.value = deessFreqVal;
      deessLow.Q.value = 0.707;

      const deessHigh = eqCtx.createBiquadFilter();
      deessHigh.type = "highpass";
      deessHigh.frequency.value = deessFreqVal;
      deessHigh.Q.value = 0.707;

      const deessComp = eqCtx.createDynamicsCompressor();
      const deessAmt = Math.min(100, Math.max(0, deessAmountVal));
      deessComp.threshold.value = -10 - (deessAmt * 0.4);
      deessComp.ratio.value = 2 + (deessAmt * 0.06);
      deessComp.attack.value = 0.003;
      deessComp.release.value = 0.12;
      deessComp.knee.value = 6;

      const deessLowGain = eqCtx.createGain();
      deessLowGain.gain.value = 1;
      const deessHighGain = eqCtx.createGain();
      deessHighGain.gain.value = 1 - (deessAmt / 100) * 0.5;
      const deessSum = eqCtx.createGain();

      // Parallel Comp
      const comp = eqCtx.createDynamicsCompressor();
      comp.threshold.value = compThreshold;
      comp.ratio.value = compRatio;
      comp.attack.value = compAttack / 1000;
      comp.release.value = compRelease / 1000;
      comp.knee.value = 6;

      const dryGain = eqCtx.createGain();
      const wetGain = eqCtx.createGain();
      const sumGain = eqCtx.createGain();

      dryGain.gain.value = 1 - compMix;
      wetGain.gain.value = compMix;
      sumGain.gain.value = dbToLinear(compMakeup);

      // Routing verbinden
      src.connect(lowCut);
      lowCut.connect(highCut);
      highCut.connect(lowShelf);
      lowShelf.connect(mid);
      mid.connect(highShelf);

      highShelf.connect(deessLow);
      highShelf.connect(deessHigh);

      deessLow.connect(deessLowGain);
      deessLowGain.connect(deessSum);

      deessHigh.connect(deessComp);
      deessComp.connect(deessHighGain);
      deessHighGain.connect(deessSum);

      deessSum.connect(dryGain);
      deessSum.connect(comp);
      comp.connect(wetGain);

      dryGain.connect(sumGain);
      wetGain.connect(sumGain);

      sumGain.connect(eqCtx.destination);

      // Rendern starten
      src.start();
      const processedVocalBuffer = await eqCtx.startRendering();

      // 4. Finaler Mix (optional mit Instrumental)
      let finalBuffer;
      let modeUsed = exportMode;

      // Fallback: Wenn "Mix" gewählt, aber kein Instrumental da ist
      if (exportMode === "mix" && !instrumentalBuffer) {
        modeUsed = "vocal";
        statusEl.textContent = "Kein Instrumental geladen, exportiere nur Vocals.";
      }

      if (modeUsed === "mix" && instrumentalBuffer) {
        // Neuer Offline Context für den Mix
        const mixSampleRate = processedVocalBuffer.sampleRate;
        // Länge ist die längere der beiden Dateien
        const mixLength = Math.max(processedVocalBuffer.length, instrumentalBuffer.length);
        // Kanäle: Maximum (z.B. Stereo wenn eins Stereo ist)
        const mixChannels = Math.max(processedVocalBuffer.numberOfChannels, instrumentalBuffer.numberOfChannels);

        const mixCtx = new OfflineAudioContext(mixChannels, mixLength, mixSampleRate);

        // Vocal Spur
        const vocalSrc = mixCtx.createBufferSource();
        vocalSrc.buffer = processedVocalBuffer;
        const vocalGainNode = mixCtx.createGain();
        vocalGainNode.gain.value = vocalGainVal;

        // Instrumental Spur
        const instSrc = mixCtx.createBufferSource();
        instSrc.buffer = instrumentalBuffer;
        const instGainNode = mixCtx.createGain();
        instGainNode.gain.value = instrumentalGainVal;

        // Mischen
        vocalSrc.connect(vocalGainNode);
        vocalGainNode.connect(mixCtx.destination);
        instSrc.connect(instGainNode);
        instGainNode.connect(mixCtx.destination);

        vocalSrc.start(0);
        instSrc.start(0);

        finalBuffer = await mixCtx.startRendering();
        if (!statusEl.textContent.includes("Kein Instrumental")) {
          statusEl.textContent = "Fertig. Gereinigte, de-essete Vocals + Instrumental gemischt.";
        }
      } else {
        // Nur Vocals: Gain noch anwenden
        const finalVocalCtx = new OfflineAudioContext(processedVocalBuffer.numberOfChannels, processedVocalBuffer.length, processedVocalBuffer.sampleRate);
        const vSrc = finalVocalCtx.createBufferSource();
        vSrc.buffer = processedVocalBuffer;
        const vGain = finalVocalCtx.createGain();
        vGain.gain.value = vocalGainVal;
        vSrc.connect(vGain);
        vGain.connect(finalVocalCtx.destination);
        vSrc.start();
        finalBuffer = await finalVocalCtx.startRendering();

        if (!statusEl.textContent || !statusEl.textContent.includes("Kein Instrumental")) {
          statusEl.textContent = "Fertig. Gereinigte, de-essete Vocals ohne Instrumental.";
        }
      }

      // 5. Normalisieren auf -3dB
      normalizeBufferToMinus3dB(finalBuffer);

      // 6. Zu WAV konvertieren und Download anbieten
      const wavArrayBuffer = audioBufferToWav(finalBuffer);
      const wavBlob = new Blob([new Uint8Array(wavArrayBuffer)], { type: "audio/wav" });
      const url = URL.createObjectURL(wavBlob);

      player.src = url; // Ergebnis im Player anhören
      // Dateinamen generieren
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
      const filename = `VoxiClean_${modeUsed}_${timestamp}.wav`;
      downloadLink.download = filename;
      downloadLink.href = url;
      downloadLink.style.display = "inline-flex";
      downloadLink.textContent = `Datei herunterladen (${filename})`;

    } catch (err) {
      console.error(err);
      statusEl.textContent = "Fehler bei der Verarbeitung: " + err.message;
    } finally {
      processBtn.disabled = !vocalFile;
    }
  }

  processBtn.addEventListener("click", () => {
    if (!vocalFile) {
      statusEl.textContent = "Du musst mindestens eine Vocal-Datei oder Aufnahme wählen.";
      return;
    }
    const mode = getExportMode();
    processFiles(vocalFile, instrumentalFile, mode);
  });

  // Initial Flow-Analyse & Buttons-State & EQ-Canvas
  updateFlowAnalysis();
  updateButtonsState();
  // Warten bis DOM geladen für korrekte Canvas-Größe
  window.addEventListener('load', () => {
      resizeEqCanvas();
      updateEqVisualization();
      // Initiales Trigger-Event für korrekte Slider-Label-Formatierung
      sliderConfigs.forEach(cfg => updateSliderUI(cfg.id));
  });
</script>

</body>
</html>