HEX
Server: LiteSpeed
System: Linux houston.panomity.com 6.8.0-100-generic #100-Ubuntu SMP PREEMPT_DYNAMIC Tue Jan 13 16:40:06 UTC 2026 x86_64
User: nudepix (1011)
PHP: 7.4.33
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Upload Files
File: /home/kiwerkzeuge.de/public_html/music.html
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Musik aus Text erstellen | kiwerkzeuge.de</title>
    <meta name="description" content="Erstelle Musik aus Textbeschreibungen. Gib einen Stil vor und lass dir einen passenden Track generieren." />
    <link rel="canonical" href="https://kiwerkzeuge.de/music.html" />
    <link rel="stylesheet" href="/assets/fonts/inter.css" />
    <script src="/assets/theme.js"></script>
    <link rel="stylesheet" href="/assets/styles.css" />
    <script defer src="/assets/music-app.js?v=20260716"></script>
  </head>
  <body>
    <div class="page">
      <header class="site-header">
        <div class="brand">
          <div class="logo">♪</div>
          <div>
            <h1>Musikgenerator</h1>
            <p>Erstelle Musik aus Text – einfach und schnell.</p>
          </div>
        </div>
        <div class="header-actions">
          <button class="icon-button" id="themeToggle" type="button" aria-label="Design umschalten" title="Design umschalten">
            <svg class="icon icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="4"></circle>
              <path d="M12 2v2"></path>
              <path d="M12 20v2"></path>
              <path d="m4.93 4.93 1.41 1.41"></path>
              <path d="m17.66 17.66 1.41 1.41"></path>
              <path d="M2 12h2"></path>
              <path d="M20 12h2"></path>
              <path d="m6.34 17.66-1.41 1.41"></path>
              <path d="m19.07 4.93-1.41 1.41"></path>
            </svg>
            <svg class="icon icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M12 3a7 7 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
            </svg>
          </button>
          <div class="status-pill" id="serviceStatus">
            <span class="dot"></span>
            <span>Status wird geprüft…</span>
          </div>
        </div>
      </header>

      <nav class="nav-tabs" aria-label="Hauptnavigation">
        <a href="/" class="nav-tab">Start</a>
        <a href="/tiefenkarte.html" class="nav-tab">Tiefenkarte</a>
        <a href="/stable-diffusion.html" class="nav-tab">Bildgenerator</a>
        <a href="/music.html" class="nav-tab active" aria-current="page">Musik</a>
        <a href="/video-studio.html" class="nav-tab">Video Studio</a>
        <a href="/ki-tools.html" class="nav-tab">Business-Werkzeuge</a>
        <a href="/preise.html" class="nav-tab">Preise</a>
      </nav>

      <main class="main">
        <section class="hero">
          <div class="hero-grid">
            <div class="hero-copy">
              <div class="badges">
                <span class="badge">KI‑Musikgenerator</span>
                <span class="badge">Sofort-Download</span>
                <span class="badge">Kommerziell nutzbar</span>
              </div>
              <h2 class="hero-title">Beschreibe deinen Sound.</h2>
              <p class="hero-subtitle">
                Schreib, was du hören willst – zum Beispiel "entspannter Lo-Fi mit Piano" oder "epic trailer music mit Drums". 
                Wir generieren daraus einen passenden Track.
              </p>
              <div class="hero-actions">
                <a class="secondary" href="#create">Loslegen</a>
              </div>
            </div>

            <div class="hero-features">
              <div class="feature-grid">
                <article class="feature-card">
                  <h3>Text → Musik</h3>
                  <p>Beschreibe Stil, Stimmung oder Instrumente – so detailliert oder vage wie du willst.</p>
                </article>
                <article class="feature-card">
                  <h3>Als WAV downloaden</h3>
                  <p>Der fertige Track lässt sich direkt anhören und herunterladen.</p>
                </article>
              </div>
            </div>
          </div>
        </section>

        <div class="layout">
          <section class="panel" id="create">
            <div>
              <h2>Deine Beschreibung</h2>
              <p>Wie soll deine Musik klingen?</p>
            </div>

            <div class="form-group">
              <label for="musicPrompt" style="display:flex; align-items:center; justify-content:space-between; gap:0.5rem;">
                <span>Beschreibe den Sound</span>
                <button type="button" id="openHelpModal" class="ghost" style="margin-left:auto;">Hilfe & Beispiele</button>
              </label>
              <textarea id="musicPrompt" rows="4" placeholder="z.B.: relaxter Lo-Fi Hip Hop, sanftes Piano, leichte Beats, zum Entspannen"></textarea>
            </div>

            <div class="form-group">
              <label for="lyricsPrompt">Lyrics (optional – für Gesang)</label>
              <div class="lyrics-mode" style="margin-bottom: 0.6rem;">
                <label class="radio-inline" style="margin-right: 1rem; cursor: pointer;">
                  <input type="radio" name="lyricsMode" value="manual" checked style="margin-right: 0.3rem;"> Eigene Lyrics eingeben
                </label>
              </div>
              <div id="lyricsPromptWrapper">
                <textarea id="lyricsPrompt" rows="10" style="min-height: 240px; width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.6; padding: 0.75rem;" placeholder="Gib hier deinen Songtext ein, um Gesang zu generieren. Leer lassen für instrumentale Musik."></textarea>
              </div>
              <small class="muted">Eigene Lyrics werden zusammen mit dem Musikauftrag ausschließlich lokal verarbeitet. Leer lassen für instrumentale Musik.</small>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="durationSelect">Wie lang?</label>
                <input type="range" id="durationSelect" min="10" max="600" step="1" value="30" />
                <small id="durationValue">0:30</small>
              </div>
              <div class="form-group" style="display:none">
                <label for="seedInput">Seed (optional)</label>
                <input type="hidden" id="seedInput" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="diffusionSteps">Qualität</label>
                <input type="range" id="diffusionSteps" min="10" max="100" value="50" />
                <small id="diffusionStepsValue">50 (Standard)</small>
              </div>
            </div>

            <button id="generateMusicBtn" class="primary">
              <span>Musik erstellen</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
            </button>

            <div class="progress" id="musicProgress" hidden style="display: none;">
              <div class="spinner"></div>
              <div>
                <p id="musicProgressTitle">Generiere Musik…</p>
                <small id="musicProgressSub">Das kann je nach Auslastung etwas dauern.</small>
              </div>
            </div>
          </section>

          <section class="panel results">
            <h2>Dein Ergebnis</h2>
            <div class="results-grid">
              <article class="result-card">
                <header>
                  <h3>Track</h3>
                  <button class="ghost" id="downloadMusic" disabled>WAV herunterladen</button>
                </header>
                <div class="result-preview" id="musicPreview">
                  <p class="placeholder">Hier erscheint dein Track, sobald er fertig ist.</p>
                </div>
              </article>
              <article class="result-card" id="lyricsResultCard" hidden>
                <header>
                  <h3>Lyrics</h3>
                </header>
                <div id="lyricsResultSlot">
                </div>
              </article>
            </div>
          </section>
        </div>

        <section class="panel" aria-labelledby="music-safety-title">
          <h2 id="music-safety-title">Sicherer sicherer Betrieb</h2>
          <p class="muted">Die Musikerstellung wird ausschließlich als lokaler Auftrag ausgeführt. Offenes Voice-Cloning und kundenseitiges LoRA-Training sind aus Sicherheits- und Missbrauchsschutzgründen nicht freigeschaltet.</p>
        </section>

        <section class="panel info" id="faq">
          <h2>Tipps & Hilfe</h2>
          <details class="details" open>
            <summary>Wie beschreibe ich am besten, was ich will?</summary>
            <p class="muted">
              Sei so spezifisch oder vage wie du magst. Gute Prompts enthalten oft: Stil (z.B. Lo-Fi, Orchestral, Electronic), Stimmung (entspannt, energiegeladen, dramatisch) und Instrumente (Piano, Gitarre, Synths). 
              Beispiel: "Cinematic ambient, dreamy pads, soft piano, chill atmosphere"
            </p>
          </details>
          <details class="details">
            <summary>Wie lange dauert die Erstellung?</summary>
            <p class="muted">
              Je nach Länge und Server-Auslastung meist zwischen 10 und 30 Sekunden. Längere Tracks brauchen natürlich etwas mehr Zeit.
            </p>
          </details>
          <details class="details">
            <summary>Darf ich die Musik verwenden?</summary>
            <p class="muted">
              Ja, die generierten Tracks können frei verwendet werden – auch in kommerziellen Projekten.
            </p>
          </details>
        </section>
      </main>
      <footer class="site-footer">
        <p>© 2026 Panomity GmbH</p>
        <nav aria-label="Footer">
          <a href="/preise.html">Preise</a>
          <a href="/impressum.html">Impressum</a>
          <a href="/datenschutz.html">Datenschutz</a>
        </nav>
      </footer>
      <div id="helpModal" hidden style="position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); backdrop-filter: blur(2px); z-index:9999;">
        <div id="helpBackdrop" style="position:absolute; inset:0;"></div>
        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="helpTitle" style="position:relative; max-width:960px; width:92%; background:var(--panel); color:var(--text); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.35); padding:1rem;">
          <header style="display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.25rem 0.5rem 0.75rem; border-bottom:1px solid var(--border);">
            <h3 id="helpTitle" style="margin:0;">Hilfe & Beispiele</h3>
            <button id="closeHelpModal" class="ghost">Schließen</button>
          </header>
          <div class="modal-body" style="max-height:70vh; overflow:auto; padding:0.75rem; display:grid; gap:1rem;">
            <section>
              <h4 style="margin:0 0 0.3rem;">Fertige Rezepte <small style="font-weight:normal; color:var(--muted);">– Klick setzt den kompletten Prompt</small></h4>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem;">
                <button type="button" class="keyword-chip recipe-chip" data-recipe="pop, synth, drums, guitar, 120 bpm, upbeat, catchy, vibrant, female vocals, polished vocals">Modern Pop</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="rock, electric guitar, drums, bass, 130 bpm, energetic, rebellious, gritty, male vocals, raw vocals">Classic Rock</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="hip hop, 808 bass, hi-hats, synth, 90 bpm, bold, urban, intense, male vocals, rhythmic vocals">Hip Hop</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="jazz, saxophone, piano, double bass, 110 bpm, smooth, improvisational, soulful, male vocals, crooning vocals">Smooth Jazz</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="edm, synth, bass, kick drum, 128 bpm, euphoric, pulsating, energetic, instrumental">EDM / Dance</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="r&b, synth, bass, drums, 85 bpm, sultry, groovy, romantic, female vocals, silky vocals">Chill R&B</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="classical, orchestral, strings, piano, 60 bpm, elegant, emotive, timeless, instrumental">Klassik / Orchester</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="country, acoustic guitar, steel guitar, fiddle, 100 bpm, heartfelt, rustic, warm, male vocals, twangy vocals">Country</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="metal, electric guitar, double kick drum, bass, 160 bpm, aggressive, intense, heavy, male vocals, screamed vocals">Heavy Metal</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="reggae, guitar, bass, drums, 80 bpm, chill, soulful, positive, male vocals, smooth vocals">Reggae</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="funk, pop, soul, rock, melodic, guitar, drums, bass, keyboard, percussion, 105 bpm, energetic, upbeat, groovy, vibrant, dynamic">Funk / Soul</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="synth-pop, electronic, pop, synthesizer, drums, bass, piano, 128 bpm, energetic, uplifting, modern">Synth‑Pop</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="electronic, house, synthesizer, drums, bass, percussion, fast, energetic, dark, atmospheric">Dark Electronic</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="lo-fi hip hop, piano, vinyl crackle, drums, 75 bpm, chill, dreamy, mellow, instrumental">Lo‑Fi Chill</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="anime, cute female vocals, kawaii pop, j-pop, piano, guitar, synthesizer, fast, happy, cheerful, lighthearted">Anime / J‑Pop</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="country rock, folk rock, southern rock, bluegrass, acoustic guitar, fiddle, 110 bpm, heartfelt, warm">Folk / Bluegrass</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="pop, piano, rap, dark, atmospheric, 90 bpm, male vocals">Dark Pop Rap</button>
                <button type="button" class="keyword-chip recipe-chip" data-recipe="cinematic, orchestral, strings, brass, percussion, 70 bpm, epic, dramatic, powerful, instrumental">Filmmusik / Episch</button>
              </div>
            </section>
            <section>
              <h4 style="margin:0 0 0.5rem;">Einzelne Keywords <small style="font-weight:normal; color:var(--muted);">– fügt zum bestehenden Prompt hinzu</small></h4>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem;">
                <strong style="width:100%;">Genre</strong>
                <button type="button" class="keyword-chip" data-insert="pop">Pop</button>
                <button type="button" class="keyword-chip" data-insert="rock">Rock</button>
                <button type="button" class="keyword-chip" data-insert="hip hop">Hip Hop</button>
                <button type="button" class="keyword-chip" data-insert="jazz">Jazz</button>
                <button type="button" class="keyword-chip" data-insert="blues">Blues</button>
                <button type="button" class="keyword-chip" data-insert="soul">Soul</button>
                <button type="button" class="keyword-chip" data-insert="funk">Funk</button>
                <button type="button" class="keyword-chip" data-insert="r&b">R&B</button>
                <button type="button" class="keyword-chip" data-insert="electronic">Electronic</button>
                <button type="button" class="keyword-chip" data-insert="house">House</button>
                <button type="button" class="keyword-chip" data-insert="techno">Techno</button>
                <button type="button" class="keyword-chip" data-insert="edm">EDM</button>
                <button type="button" class="keyword-chip" data-insert="ambient">Ambient</button>
                <button type="button" class="keyword-chip" data-insert="synth-pop">Synth‑Pop</button>
                <button type="button" class="keyword-chip" data-insert="trap">Trap</button>
                <button type="button" class="keyword-chip" data-insert="drum and bass">Drum & Bass</button>
                <button type="button" class="keyword-chip" data-insert="lo-fi hip hop">Lo‑Fi</button>
                <button type="button" class="keyword-chip" data-insert="country">Country</button>
                <button type="button" class="keyword-chip" data-insert="folk rock">Folk Rock</button>
                <button type="button" class="keyword-chip" data-insert="bluegrass">Bluegrass</button>
                <button type="button" class="keyword-chip" data-insert="reggae">Reggae</button>
                <button type="button" class="keyword-chip" data-insert="metal">Metal</button>
                <button type="button" class="keyword-chip" data-insert="classical">Klassik</button>
                <button type="button" class="keyword-chip" data-insert="j-pop">J‑Pop</button>
              </div>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem;">
                <strong style="width:100%;">Stimmung / Mood</strong>
                <button type="button" class="keyword-chip" data-insert="energetic">energetisch</button>
                <button type="button" class="keyword-chip" data-insert="upbeat">upbeat</button>
                <button type="button" class="keyword-chip" data-insert="chill">chill</button>
                <button type="button" class="keyword-chip" data-insert="dark">dark</button>
                <button type="button" class="keyword-chip" data-insert="atmospheric">atmospheric</button>
                <button type="button" class="keyword-chip" data-insert="melancholic">melancholisch</button>
                <button type="button" class="keyword-chip" data-insert="euphoric">euphorisch</button>
                <button type="button" class="keyword-chip" data-insert="aggressive">aggressiv</button>
                <button type="button" class="keyword-chip" data-insert="romantic">romantisch</button>
                <button type="button" class="keyword-chip" data-insert="happy">happy</button>
                <button type="button" class="keyword-chip" data-insert="dreamy">verträumt</button>
                <button type="button" class="keyword-chip" data-insert="dramatic">dramatisch</button>
                <button type="button" class="keyword-chip" data-insert="elegant">elegant</button>
                <button type="button" class="keyword-chip" data-insert="smooth">smooth</button>
                <button type="button" class="keyword-chip" data-insert="groovy">groovy</button>
                <button type="button" class="keyword-chip" data-insert="bold">bold</button>
                <button type="button" class="keyword-chip" data-insert="uplifting">uplifting</button>
                <button type="button" class="keyword-chip" data-insert="soulful">soulful</button>
                <button type="button" class="keyword-chip" data-insert="catchy">catchy</button>
                <button type="button" class="keyword-chip" data-insert="melodic">melodisch</button>
              </div>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem;">
                <strong style="width:100%;">Instrumente</strong>
                <button type="button" class="keyword-chip" data-insert="piano">Piano</button>
                <button type="button" class="keyword-chip" data-insert="acoustic guitar">Akustikgitarre</button>
                <button type="button" class="keyword-chip" data-insert="electric guitar">E‑Gitarre</button>
                <button type="button" class="keyword-chip" data-insert="bass">Bass</button>
                <button type="button" class="keyword-chip" data-insert="drums">Drums</button>
                <button type="button" class="keyword-chip" data-insert="synthesizer">Synthesizer</button>
                <button type="button" class="keyword-chip" data-insert="keyboard">Keyboard</button>
                <button type="button" class="keyword-chip" data-insert="strings">Streicher</button>
                <button type="button" class="keyword-chip" data-insert="saxophone">Saxophon</button>
                <button type="button" class="keyword-chip" data-insert="fiddle">Geige / Fiddle</button>
                <button type="button" class="keyword-chip" data-insert="steel guitar">Steel Guitar</button>
                <button type="button" class="keyword-chip" data-insert="double bass">Kontrabass</button>
                <button type="button" class="keyword-chip" data-insert="808 bass">808 Bass</button>
                <button type="button" class="keyword-chip" data-insert="hi-hats">Hi‑Hats</button>
                <button type="button" class="keyword-chip" data-insert="kick drum">Kick Drum</button>
                <button type="button" class="keyword-chip" data-insert="percussion">Percussion</button>
                <button type="button" class="keyword-chip" data-insert="brass">Blechbläser</button>
                <button type="button" class="keyword-chip" data-insert="flute">Flöte</button>
                <button type="button" class="keyword-chip" data-insert="choir">Chor</button>
              </div>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem;">
                <strong style="width:100%;">Tempo (BPM)</strong>
                <button type="button" class="keyword-chip" data-insert="60 bpm">60 – Largo</button>
                <button type="button" class="keyword-chip" data-insert="75 bpm">75 – Chill</button>
                <button type="button" class="keyword-chip" data-insert="85 bpm">85 – R&B</button>
                <button type="button" class="keyword-chip" data-insert="90 bpm">90 – Hip Hop</button>
                <button type="button" class="keyword-chip" data-insert="100 bpm">100 – Country</button>
                <button type="button" class="keyword-chip" data-insert="110 bpm">110 – Swing</button>
                <button type="button" class="keyword-chip" data-insert="120 bpm">120 – Pop</button>
                <button type="button" class="keyword-chip" data-insert="128 bpm">128 – Dance</button>
                <button type="button" class="keyword-chip" data-insert="130 bpm">130 – Rock</button>
                <button type="button" class="keyword-chip" data-insert="140 bpm">140 – D&B</button>
                <button type="button" class="keyword-chip" data-insert="160 bpm">160 – Metal</button>
              </div>
              <div class="chips" style="display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem;">
                <strong style="width:100%;">Vocals</strong>
                <button type="button" class="keyword-chip" data-insert="instrumental">Instrumental</button>
                <button type="button" class="keyword-chip" data-insert="female vocals">Weiblich</button>
                <button type="button" class="keyword-chip" data-insert="male vocals">Männlich</button>
                <button type="button" class="keyword-chip" data-insert="polished vocals">Poliert</button>
                <button type="button" class="keyword-chip" data-insert="raw vocals">Rau</button>
                <button type="button" class="keyword-chip" data-insert="smooth vocals">Smooth</button>
                <button type="button" class="keyword-chip" data-insert="silky vocals">Seidig</button>
                <button type="button" class="keyword-chip" data-insert="crooning vocals">Crooning</button>
                <button type="button" class="keyword-chip" data-insert="rhythmic vocals">Rhythmisch</button>
                <button type="button" class="keyword-chip" data-insert="screamed vocals">Screaming</button>
              </div>
            </section>
            <section>
              <h4 style="margin:0.5rem 0;">Prompt‑Assistent</h4>
              <div style="display:grid; gap:0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
                <div>
                  <label for="wizardGenre">Genre</label>
                  <select id="wizardGenre">
                    <option value="pop">Pop</option>
                    <option value="rock">Rock</option>
                    <option value="hip hop">Hip Hop</option>
                    <option value="jazz">Jazz</option>
                    <option value="classical, orchestral">Klassik / Orchester</option>
                    <option value="electronic, house">Electronic / House</option>
                    <option value="edm">EDM</option>
                    <option value="r&b, soul">R&B / Soul</option>
                    <option value="funk">Funk</option>
                    <option value="country">Country</option>
                    <option value="reggae">Reggae</option>
                    <option value="metal">Metal</option>
                    <option value="synth-pop, electronic">Synth‑Pop</option>
                    <option value="lo-fi hip hop">Lo‑Fi Hip Hop</option>
                    <option value="folk rock, bluegrass">Folk / Bluegrass</option>
                    <option value="ambient">Ambient</option>
                    <option value="trap">Trap</option>
                    <option value="blues">Blues</option>
                  </select>
                </div>
                <div>
                  <label for="wizardMood">Stimmung</label>
                  <select id="wizardMood">
                    <option value="energetic, upbeat">energetisch</option>
                    <option value="chill, smooth">chill / smooth</option>
                    <option value="dark, atmospheric">dark / atmospheric</option>
                    <option value="euphoric, uplifting">euphorisch</option>
                    <option value="romantic, sultry">romantisch</option>
                    <option value="melancholic, dreamy">melancholisch</option>
                    <option value="aggressive, intense">aggressiv</option>
                    <option value="happy, cheerful">fröhlich</option>
                    <option value="elegant, emotive">elegant</option>
                    <option value="groovy, vibrant">groovy</option>
                    <option value="dramatic, powerful">dramatisch</option>
                    <option value="soulful, heartfelt">soulful</option>
                  </select>
                </div>
                <div>
                  <label for="wizardTempo">Tempo</label>
                  <select id="wizardTempo">
                    <option value="60 bpm">60 BPM – Largo</option>
                    <option value="80 bpm">80 BPM – Langsam</option>
                    <option value="90 bpm">90 BPM – Gemäßigt</option>
                    <option value="100 bpm">100 BPM – Mittel</option>
                    <option value="110 bpm">110 BPM – Flott</option>
                    <option value="120 bpm">120 BPM – Pop</option>
                    <option value="128 bpm">128 BPM – Dance</option>
                    <option value="140 bpm">140 BPM – Schnell</option>
                    <option value="160 bpm">160 BPM – Sehr schnell</option>
                  </select>
                </div>
                <div>
                  <label for="wizardVocals">Vocals</label>
                  <select id="wizardVocals">
                    <option value="instrumental">Instrumental</option>
                    <option value="female vocals, polished vocals">Weiblich – poliert</option>
                    <option value="female vocals, silky vocals">Weiblich – seidig</option>
                    <option value="male vocals, raw vocals">Männlich – rau</option>
                    <option value="male vocals, smooth vocals">Männlich – smooth</option>
                    <option value="male vocals, crooning vocals">Männlich – Crooner</option>
                    <option value="rhythmic vocals">Rap / rhythmisch</option>
                    <option value="screamed vocals">Screaming</option>
                    <option value="choir">Chor</option>
                  </select>
                </div>
              </div>
              <div id="wizardInstruments" style="margin-top:0.6rem; display:flex; flex-wrap:wrap; gap:0.4rem;">
                <span style="width:100%; font-weight:600;">Instrumente (mehrere wählbar)</span>
                <button type="button" class="chip-select" data-val="piano">Piano</button>
                <button type="button" class="chip-select" data-val="acoustic guitar">Akustikgitarre</button>
                <button type="button" class="chip-select" data-val="electric guitar">E‑Gitarre</button>
                <button type="button" class="chip-select" data-val="bass">Bass</button>
                <button type="button" class="chip-select" data-val="drums">Drums</button>
                <button type="button" class="chip-select" data-val="synthesizer">Synthesizer</button>
                <button type="button" class="chip-select" data-val="keyboard">Keyboard</button>
                <button type="button" class="chip-select" data-val="strings">Streicher</button>
                <button type="button" class="chip-select" data-val="saxophone">Saxophon</button>
                <button type="button" class="chip-select" data-val="fiddle">Geige / Fiddle</button>
                <button type="button" class="chip-select" data-val="steel guitar">Steel Guitar</button>
                <button type="button" class="chip-select" data-val="808 bass">808</button>
                <button type="button" class="chip-select" data-val="hi-hats">Hi‑Hats</button>
                <button type="button" class="chip-select" data-val="percussion">Percussion</button>
                <button type="button" class="chip-select" data-val="brass">Blechbläser</button>
                <button type="button" class="chip-select" data-val="flute">Flöte</button>
                <button type="button" class="chip-select" data-val="choir">Chor</button>
              </div>
              <div style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:0.8rem;">
                <button type="button" id="applyWizard" class="primary">Prompt zusammenstellen</button>
                <button type="button" id="closeHelpModalFooter" class="ghost">Schließen</button>
              </div>
            </section>
            <section style="border-top:1px solid var(--border); padding-top:0.8rem;">
              <h4 style="margin:0 0 0.3rem;">Tipps</h4>
              <ul style="margin:0; padding-left:1.2rem; color:var(--muted); font-size:0.88rem; line-height:1.6;">
                <li><strong>Englische Tags</strong> funktionieren am besten (das Modell wurde überwiegend mit englischen Daten trainiert).</li>
                <li>Kombiniere Genre + Instrumente + BPM + Stimmung + Vocals für die besten Ergebnisse.</li>
                <li>Für <strong>Instrumentalmusik</strong> nutze den Tag „instrumental" oder lasse die Lyrics leer.</li>
                <li><strong>Lyrics-Struktur</strong>: Verwende [verse], [chorus], [bridge], [pre-chorus], [outro] in deinen Lyrics.</li>
                <li>Ergebnisse variieren je nach Seed &ndash; probiere mehrere Generierungen für dasselbe Prompt.</li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
    <!-- Matomo Analytics -->
    <script>
      var _paq = window._paq = window._paq || [];
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="https://statsdeluxe.com/statistics/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '149']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://statsdeluxe.com/statistics/matomo.php?idsite=149&amp;rec=1" style="border:0;" alt="" /></p></noscript>
    <!-- End Matomo Code -->
  </body>
</html>