Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- tools:pruefung-regelschule [17/05/2026 11:24] – angelegt Eric Weber
+++ tools:pruefung-regelschule [17/05/2026 11:37] (aktuell) – Eric Weber
@@ Zeile 28: / Zeile 28: @@
   </style>
 </head>
 <style>
-#mpt*{box-sizing:border-box;font-family:var(--font-sans)}
+#mpt*{box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}
-#mpt{padding:1rem 0;color:var(--color-text-primary)}
+#mpt{padding:1rem 0;color:var(--color-text-primary,#1a1a1a)}
-.mpt-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1.25rem}
+.mpt-card{background:var(--color-background-primary,#fff);border:0.5px solid var(--color-border-tertiary,rgba(0,0,0,0.12));border-radius:12px;padding:1.25rem}
-.mpt-btn{background:transparent;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:8px 16px;cursor:pointer;font-size:14px;color:var(--color-text-primary);transition:background 0.15s;font-family:var(--font-sans)}
+.mpt-btn{background:transparent;border:0.5px solid rgba(0,0,0,0.25);border-radius:8px;padding:8px 16px;cursor:pointer;font-size:14px;color:var(--color-text-primary,#1a1a1a);transition:background 0.15s;font-family:inherit}
-.mpt-btn:hover{background:var(--color-background-secondary)}
+.mpt-btn:hover{background:rgba(0,0,0,0.05)}
 .mpt-btn:active{transform:scale(0.98)}
 .mpt-hidden{display:none!important}
-.mpt-progress{height:6px;background:var(--color-background-secondary);border-radius:99px;overflow:hidden;margin-bottom:1.25rem}
+.mpt-progress{height:6px;background:rgba(0,0,0,0.08);border-radius:99px;overflow:hidden;margin-bottom:1.25rem}
 .mpt-progress-fill{height:100%;border-radius:99px;transition:width 0.4s}
-.mpt-mc-opt{width:100%;text-align:left;padding:11px 16px;margin-bottom:8px;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);cursor:pointer;background:var(--color-background-primary);color:var(--color-text-primary);font-size:14px;transition:all 0.15s;display:flex;align-items:center;gap:10px;font-family:var(--font-sans)}
+.mpt-mc-opt{width:100%;text-align:left;padding:11px 16px;margin-bottom:8px;border:0.5px solid rgba(0,0,0,0.12);border-radius:8px;cursor:pointer;background:var(--color-background-primary,#fff);color:var(--color-text-primary,#1a1a1a);font-size:14px;transition:all 0.15s;display:flex;align-items:center;gap:10px;font-family:inherit}
-.mpt-mc-opt:hover{background:var(--color-background-secondary)}
+.mpt-mc-opt:hover{background:rgba(0,0,0,0.04)}
-.mpt-mc-opt.correct{border-color:var(--color-border-success);background:var(--color-background-success);color:var(--color-text-success)}
+.mpt-mc-opt.correct{border-color:#639922;background:#eaf3de;color:#27500a}
-.mpt-mc-opt.wrong{border-color:var(--color-border-danger);background:var(--color-background-danger);color:var(--color-text-danger)}
+.mpt-mc-opt.wrong{border-color:#e24b4a;background:#fcebeb;color:#791f1f}
 .mpt-mc-opt:disabled{cursor:default}
-.mpt-chat-area{display:flex;flex-direction:column;gap:6px;min-height:180px;max-height:340px;overflow-y:auto;padding:1rem;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);margin-bottom:10px}
-.mpt-bubble-ai{padding:10px 14px;border-radius:var(--border-radius-md);font-size:14px;line-height:1.6;max-width:88%;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);align-self:flex-start}
-.mpt-bubble-user{padding:10px 14px;border-radius:var(--border-radius-md);font-size:14px;line-height:1.6;max-width:88%;align-self:flex-end;border:none}
-.mpt-sugg{display:inline-block;padding:5px 12px;border:0.5px solid var(--color-border-secondary);border-radius:99px;font-size:13px;cursor:pointer;margin:3px 3px 3px 0;color:var(--color-text-primary);background:var(--color-background-primary);transition:background 0.15s;font-family:var(--font-sans)}
-.mpt-sugg:hover{background:var(--color-background-secondary)}
 .mpt-stat-num{font-size:22px;font-weight:500}
-.mpt-stat-label{font-size:12px;color:var(--color-text-secondary);margin-top:2px}
+.mpt-stat-label{font-size:12px;color:var(--color-text-secondary,#666);margin-top:2px}
-.mpt-spinner{width:16px;height:16px;border:2px solid var(--color-border-tertiary);border-top-color:currentColor;border-radius:50%;animation:mpt-spin 0.7s linear infinite;display:inline-block;vertical-align:middle}
+.mpt-textarea{width:100%;padding:10px 12px;border:0.5px solid rgba(0,0,0,0.25);border-radius:8px;font-size:14px;font-family:inherit;color:var(--color-text-primary,#1a1a1a);background:var(--color-background-primary,#fff);resize:vertical;min-height:110px;line-height:1.55}
-@keyframes mpt-spin{to{transform:rotate(360deg)}}
+.mpt-check-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:0.5px solid rgba(0,0,0,0.08);font-size:14px;line-height:1.5}
-.mpt-theme-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:500}
+.mpt-check-item:last-child{border-bottom:none}
-.mpt-mode-card{cursor:pointer;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1.25rem;background:var(--color-background-primary);transition:border-color 0.15s}
+.mpt-check-box{width:20px;height:20px;border:0.5px solid rgba(0,0,0,0.25);border-radius:4px;cursor:pointer;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;background:var(--color-background-primary,#fff)}
-.mpt-mode-card:hover{border-color:var(--color-border-primary)}
+.mpt-check-box.checked{background:#eaf3de;border-color:#639922;color:#27500a}
+.mpt-phase-label{font-size:11px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-secondary,#666);margin:0 0 8px}
 </style>
 <div id="mpt">
-  <h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Musik-Prüfungstrainer für die mündliche Realschulabschlussprüfung</h2>
   <div id="s-home">
     <div style="display:flex;align-items:center;gap:12px;margin-bottom:1.5rem">
-      <div style="width:44px;height:44px;border-radius:var(--border-radius-md);background:#EEEDFE;display:flex;align-items:center;justify-content:center">
+      <div style="width:44px;height:44px;border-radius:8px;background:#EEEDFE;display:flex;align-items:center;justify-content:center;font-size:22px">🎵</div>
-        <i class="ti ti-music" aria-hidden="true" style="font-size:22px;color:#534AB7"></i>
-      </div>
       <div>
-        <p style="margin:0;font-size:12px;color:var(--color-text-secondary)">Mündliche Prüfung · Musik · Klasse 10</p>
+        <p style="margin:0;font-size:12px;color:#666">Mündliche Prüfung · Musik · Klasse 10</p>
         <p style="margin:0;font-size:18px;font-weight:500">Prüfungstrainer</p>
       </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem">
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="st-total">0</div><div class="mpt-stat-label">beantwortet</div></div>
-        <div class="mpt-stat-num" id="st-total">0</div>
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="st-correct">0</div><div class="mpt-stat-label">richtig</div></div>
-        <div class="mpt-stat-label">beantwortet</div>
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="st-pct">–</div><div class="mpt-stat-label">Quote</div></div>
-      </div>
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
-        <div class="mpt-stat-num" id="st-correct">0</div>
-        <div class="mpt-stat-label">richtig</div>
-      </div>
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
-        <div class="mpt-stat-num" id="st-pct">–</div>
-        <div class="mpt-stat-label">Quote</div>
-      </div>
     </div>
+    <p style="font-size:13px;color:#666;margin:0 0 10px">Thema wählen:</p>
-    <p style="font-size:13px;color:var(--color-text-secondary);margin:0 0 10px">Thema wählen:</p>
     <div style="display:flex;flex-direction:column;gap:8px">
-      <button onclick="A.theme('markt')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#EEEDFE;border:0.5px solid #AFA9EC;border-radius:var(--border-radius-lg);cursor:pointer;text-align:left;width:100%">
+      <button onclick="A.theme('markt')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#EEEDFE;border:0.5px solid #AFA9EC;border-radius:12px;cursor:pointer;text-align:left;width:100%;font-family:inherit">
-        <i class="ti ti-vinyl" aria-hidden="true" style="font-size:22px;color:#534AB7;flex-shrink:0"></i>
+        <span style="font-size:22px">🎧</span>
         <div><p style="margin:0;font-weight:500;font-size:15px;color:#26215C">Musik &amp; Markt</p><p style="margin:0;font-size:13px;color:#534AB7">Tonträger · Digitalisierung · Streaming</p></div>
       </button>
-      <button onclick="A.theme('politik')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#FAEEDA;border:0.5px solid #EF9F27;border-radius:var(--border-radius-lg);cursor:pointer;text-align:left;width:100%">
+      <button onclick="A.theme('politik')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#FAEEDA;border:0.5px solid #EF9F27;border-radius:12px;cursor:pointer;text-align:left;width:100%;font-family:inherit">
-        <i class="ti ti-speakerphone" aria-hidden="true" style="font-size:22px;color:#854F0B;flex-shrink:0"></i>
+        <span style="font-size:22px">📢</span>
         <div><p style="margin:0;font-weight:500;font-size:15px;color:#412402">Politische Musik</p><p style="margin:0;font-size:13px;color:#854F0B">Agitation · NS-Zeit · Widerstandslieder</p></div>
       </button>
-      <button onclick="A.theme('romantik')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#FBEAF0;border:0.5px solid #ED93B1;border-radius:var(--border-radius-lg);cursor:pointer;text-align:left;width:100%">
+      <button onclick="A.theme('romantik')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#FBEAF0;border:0.5px solid #ED93B1;border-radius:12px;cursor:pointer;text-align:left;width:100%;font-family:inherit">
-        <i class="ti ti-feather" aria-hidden="true" style="font-size:22px;color:#993556;flex-shrink:0"></i>
+        <span style="font-size:22px">🎼</span>
         <div><p style="margin:0;font-weight:500;font-size:15px;color:#4B1528">Romantik</p><p style="margin:0;font-size:13px;color:#993556">Kunstlied · Virtuosentum · Nationalschulen</p></div>
       </button>
-      <button onclick="A.theme('film')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#E1F5EE;border:0.5px solid #5DCAA5;border-radius:var(--border-radius-lg);cursor:pointer;text-align:left;width:100%">
+      <button onclick="A.theme('film')" style="display:flex;align-items:center;gap:14px;padding:14px 16px;background:#E1F5EE;border:0.5px solid #5DCAA5;border-radius:12px;cursor:pointer;text-align:left;width:100%;font-family:inherit">
-        <i class="ti ti-movie" aria-hidden="true" style="font-size:22px;color:#0F6E56;flex-shrink:0"></i>
+        <span style="font-size:22px">🎬</span>
         <div><p style="margin:0;font-weight:500;font-size:15px;color:#04342C">Filmmusik</p><p style="margin:0;font-size:13px;color:#0F6E56">Funktionen · Foley · Filmgeschichte</p></div>
       </button>
@@ Zeile 109: / Zeile 92: @@
   <div id="s-mode" class="mpt-hidden">
-    <button class="mpt-btn" style="margin-bottom:1.25rem;font-size:13px" onclick="A.home()"><i class="ti ti-arrow-left" aria-hidden="true"></i> Zurück</button>
+    <button class="mpt-btn" style="margin-bottom:1.25rem;font-size:13px" onclick="A.home()">← Zurück</button>
     <div id="mode-pill" style="margin-bottom:1rem"></div>
-    <p style="font-size:14px;color:var(--color-text-secondary);margin:0 0 12px">Was möchtest du üben?</p>
+    <p style="font-size:14px;color:#666;margin:0 0 12px">Was möchtest du üben?</p>
     <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px">
-      <div class="mpt-mode-card" onclick="A.startMC()">
+      <div class="mpt-card" style="cursor:pointer" onclick="A.startMC()">
-        <div id="mode-mc-icon" style="width:40px;height:40px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:10px"></div>
+        <div id="mode-mc-icon" style="width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:20px"></div>
         <p style="font-weight:500;margin:0 0 4px;font-size:15px">Wissensfragen</p>
-        <p style="font-size:13px;color:var(--color-text-secondary);margin:0">5 Multiple-Choice-Fragen · sofortiges Feedback · Erklärungen</p>
+        <p style="font-size:13px;color:#666;margin:0">5 Multiple-Choice-Fragen · sofortiges Feedback · Erklärungen</p>
       </div>
-      <div class="mpt-mode-card" onclick="A.startTalk()">
+      <div class="mpt-card" style="cursor:pointer" onclick="A.startTalk()">
-        <div id="mode-talk-icon" style="width:40px;height:40px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:10px"></div>
+        <div id="mode-talk-icon" style="width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:20px"></div>
         <p style="font-weight:500;margin:0 0 4px;font-size:15px">Denkaufgabe</p>
-        <p style="font-size:13px;color:var(--color-text-secondary);margin:0">KI-Prüfungsgespräch · argumentieren · übertragen</p>
+        <p style="font-size:13px;color:#666;margin:0">Eigene Antwort schreiben · dann Musterlösung vergleichen</p>
       </div>
     </div>
@@ Zeile 128: / Zeile 111: @@
   <div id="s-mc" class="mpt-hidden">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
-      <button class="mpt-btn" style="font-size:13px" onclick="A.toMode()"><i class="ti ti-arrow-left" aria-hidden="true"></i> Zurück</button>
+      <button class="mpt-btn" style="font-size:13px" onclick="A.toMode()">← Zurück</button>
-      <span id="mc-counter" style="font-size:13px;color:var(--color-text-secondary)"></span>
+      <span id="mc-counter" style="font-size:13px;color:#666"></span>
     </div>
     <div class="mpt-progress"><div id="mc-bar" class="mpt-progress-fill" style="width:0%"></div></div>
     <div class="mpt-card" style="margin-bottom:1rem">
-      <div id="mc-loading" class="mpt-hidden" style="text-align:center;padding:1.5rem 0;color:var(--color-text-secondary);font-size:14px">
+      <div id="mc-pill" style="margin-bottom:10px"></div>
-        <span class="mpt-spinner"></span> Fragen werden generiert…
+      <p id="mc-q" style="font-size:15px;font-weight:500;margin:0 0 1rem;line-height:1.55"></p>
-      </div>
+      <div id="mc-opts"></div>
-      <div id="mc-content">
+      <div id="mc-fb" class="mpt-hidden" style="margin-top:12px;padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.6"></div>
-        <div id="mc-pill" style="margin-bottom:10px"></div>
-        <p id="mc-q" style="font-size:15px;font-weight:500;margin:0 0 1rem;line-height:1.55"></p>
-        <div id="mc-opts"></div>
-        <div id="mc-fb" class="mpt-hidden" style="margin-top:12px;padding:10px 14px;border-radius:var(--border-radius-md);font-size:14px;line-height:1.6"></div>
-      </div>
     </div>
     <div style="display:flex;justify-content:flex-end">
-      <button id="mc-next" class="mpt-hidden" onclick="A.next()" style="padding:9px 20px;border-radius:var(--border-radius-md);cursor:pointer;font-size:14px;font-weight:500;border:none;font-family:var(--font-sans)">Nächste Frage <i class="ti ti-arrow-right" aria-hidden="true"></i></button>
+      <button id="mc-next" class="mpt-hidden" onclick="A.next()" style="padding:9px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;border:none;font-family:inherit;color:#fff">Nächste Frage →</button>
     </div>
   </div>
@@ Zeile 150: / Zeile 128: @@
   <div id="s-talk" class="mpt-hidden">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
-      <button class="mpt-btn" style="font-size:13px" onclick="A.toMode()"><i class="ti ti-arrow-left" aria-hidden="true"></i> Zurück</button>
+      <button class="mpt-btn" style="font-size:13px" onclick="A.toMode()">← Zurück</button>
       <div id="talk-pill"></div>
     </div>
-    <div class="mpt-card" style="margin-bottom:1rem">
+    <div id="talk-steps"></div>
-      <p style="font-size:11px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 6px">Szenario</p>
-      <p id="talk-scenario" style="font-size:14px;margin:0;line-height:1.55"></p>
-    </div>
-    <div id="talk-chat" class="mpt-chat-area"></div>
-    <div id="talk-suggs" style="margin-bottom:10px"></div>
-    <div style="display:flex;gap:8px;align-items:center">
-      <input id="talk-inp" type="text" placeholder="Deine Antwort…" onkeydown="if(event.key==='Enter')A.send()" style="flex:1;padding:9px 12px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);background:var(--color-background-primary);color:var(--color-text-primary);font-size:14px;font-family:var(--font-sans)" />
-      <button id="talk-send-btn" onclick="A.send()" style="padding:9px 14px;border-radius:var(--border-radius-md);cursor:pointer;border:none;font-size:14px;font-family:var(--font-sans)"><i class="ti ti-send" aria-hidden="true"></i></button>
-    </div>
-    <p style="font-size:12px;color:var(--color-text-secondary);margin-top:6px">Antworte ausführlich – die KI reagiert wie ein Prüfer.</p>
   </div>
   <div id="s-result" class="mpt-hidden">
     <div style="text-align:center;padding:1.5rem 0 1.25rem">
-      <div id="res-icon" style="width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px"></div>
+      <div id="res-icon" style="width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:28px"></div>
       <p style="font-size:18px;font-weight:500;margin:0 0 4px">Runde abgeschlossen!</p>
-      <p id="res-msg" style="font-size:14px;color:var(--color-text-secondary);margin:0"></p>
+      <p id="res-msg" style="font-size:14px;color:#666;margin:0"></p>
     </div>
     <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem">
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="res-tot"></div><div class="mpt-stat-label">Fragen</div></div>
-        <div class="mpt-stat-num" id="res-tot"></div><div class="mpt-stat-label">Fragen</div>
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="res-cor"></div><div class="mpt-stat-label">Richtig</div></div>
-      </div>
+      <div style="padding:1rem;background:rgba(0,0,0,0.04);border-radius:8px;text-align:center"><div class="mpt-stat-num" id="res-pct"></div><div class="mpt-stat-label">Quote</div></div>
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
-        <div class="mpt-stat-num" id="res-cor"></div><div class="mpt-stat-label">Richtig</div>
-      </div>
-      <div style="padding:1rem;background:var(--color-background-secondary);border-radius:var(--border-radius-md);text-align:center">
-        <div class="mpt-stat-num" id="res-pct"></div><div class="mpt-stat-label">Quote</div>
-      </div>
     </div>
     <div style="display:flex;gap:10px;flex-wrap:wrap">
-      <button id="res-retry" onclick="A.retry()" style="padding:9px 20px;border-radius:var(--border-radius-md);cursor:pointer;border:none;font-size:14px;font-weight:500;font-family:var(--font-sans)"><i class="ti ti-refresh" aria-hidden="true"></i> Nochmal</button>
+      <button id="res-retry" onclick="A.startMC()" style="padding:9px 20px;border-radius:8px;cursor:pointer;border:none;font-size:14px;font-weight:500;font-family:inherit;color:#fff">↺ Nochmal</button>
-      <button class="mpt-btn" onclick="A.home()"><i class="ti ti-home" aria-hidden="true"></i> Startseite</button>
+      <button class="mpt-btn" onclick="A.home()">⌂ Startseite</button>
     </div>
   </div>
@@ Zeile 191: / Zeile 153: @@
 <script>
-const T = {
+const THEMES={
-  markt:{label:'Musik & Markt',bg:'#EEEDFE',border:'#AFA9EC',txt:'#26215C',mid:'#534AB7',light:'#EEEDFE',icon:'ti-vinyl',progClr:'#7F77DD',
+  markt:{label:'Musik & Markt',bg:'#EEEDFE',border:'#AFA9EC',txt:'#26215C',mid:'#534AB7',prog:'#7F77DD',icon:'🎧'},
-    scenario:'Dein Cousin hat gestern seinen ersten eigenen Song aufgenommen – nur mit dem Smartphone und einer kostenlosen App. Jetzt schreibt er dir und fragt: "Wie kriege ich das Ding auf Spotify?" Diskutiere mit mir (deinem Cousin), was als nächstes zu tun ist – und bring dabei dein Wissen über die Entwicklung der Musikindustrie ein.',
+  politik:{label:'Politische Musik',bg:'#FAEEDA',border:'#EF9F27',txt:'#412402',mid:'#854F0B',prog:'#BA7517',icon:'📢'},
-    talkPrompt:'Starte ein Prüfungsgespräch: Schüler hilft Cousin bei Musikveröffentlichung. Thema: Digitalisierung der Musikindustrie, Streaming-Dienste, Demokratisierung der Produktion, Urheberrecht. Stelle die erste, offene Frage kurz und direkt.',
+  romantik:{label:'Romantik',bg:'#FBEAF0',border:'#ED93B1',txt:'#4B1528',mid:'#993556',prog:'#D4537E',icon:'🎼'},
-    suggs:['Wie hat Streaming die Industrie verändert?','Was ist ein Musikdistributor?','Welche Risiken gibt es heute?']},
+  film:{label:'Filmmusik',bg:'#E1F5EE',border:'#5DCAA5',txt:'#04342C',mid:'#0F6E56',prog:'#1D9E75',icon:'🎬'}
-  politik:{label:'Politische Musik',bg:'#FAEEDA',border:'#EF9F27',txt:'#412402',mid:'#854F0B',light:'#FAEEDA',icon:'ti-speakerphone',progClr:'#BA7517',
-    scenario:'In einer Dokumentation siehst du, wie eine politische Partei bei Kundgebungen gezielt Musik einsetzt – immer dasselbe Lied, immer lauter, alle singen mit. Dein Freund sagt: „Das ist doch normal – das macht jede Band so." Du widersprichst. Erkläre mir, wie Musik als politisches Werkzeug funktioniert.',
-    talkPrompt:'Starte ein Prüfungsgespräch: Schüler diskutiert, wie Musik politisch instrumentalisiert wird. Thema: Musik als Propagandamittel, Gemeinschaftsgesang, emotionale Manipulation, historische und aktuelle Beispiele. Stelle die erste Frage.',
-    suggs:['Warum wirkt Gemeinschaftsgesang so stark?','Welche Rolle spielte Musik im NS?','Ist das heute noch relevant?']},
-  romantik:{label:'Romantik',bg:'#FBEAF0',border:'#ED93B1',txt:'#4B1528',mid:'#993556',light:'#FBEAF0',icon:'ti-feather',progClr:'#D4537E',
-    scenario:'Du scrollst durch TikTok und siehst eine Geigerin mit 15 Millionen Followern – sie spielt Paganini, macht spektakuläre Tricks mit dem Bogen und verkauft ihr eigenes Parfum. Dein Freund sagt: „Das ist doch nur Social-Media-Hype, früher war das alles echter." Erkläre mir, warum Starkult kein neues Phänomen ist.',
-    talkPrompt:'Starte ein Prüfungsgespräch: Schüler vergleicht heutigen Musikstarkult mit Virtuosentum der Romantik. Thema: Paganini, romantisches Lebensgefühl, Jahrhundert der Widersprüche, Kunstlied. Stelle die erste Frage.',
-    suggs:['Was macht einen Virtuosen aus?','Was bedeutet "Jahrhundert der Widersprüche"?','Was ist ein Kunstlied?']},
-  film:{label:'Filmmusik',bg:'#E1F5EE',border:'#5DCAA5',txt:'#04342C',mid:'#0F6E56',light:'#E1F5EE',icon:'ti-movie',progClr:'#1D9E75',
-    scenario:'Ihr schaut zuhause einen Actionfilm – plötzlich fällt der Ton aus. Deine Mutter sagt: „Na gut, sehen wir halt zu, die Musik ist doch eh nur Hintergrundgedudel." Du bist völlig anderer Meinung. Erkläre ihr, was Filmmusik wirklich macht – und warum Filme ohne sie nicht richtig funktionieren.',
-    talkPrompt:'Starte ein Prüfungsgespräch: Schüler erklärt die Funktionen von Filmmusik. Thema: Underscoring, Mood-Technik, Leitmotivtechnik, kontrapunktierende Bildinterpretation, Foley-Künstler. Stelle die erste Frage.',
-    suggs:['Was ist der Unterschied: Underscoring vs. Mood-Technik?','Was macht ein Foley-Künstler?','Was ist ein Leitmotiv?']}
 };
-const SYS_MC=`Du bist Musik-Prüfungstrainer für Klasse 10 (Realschulabschluss). Erstelle Multiple-Choice-Fragen.
+const MC={
-Gib NUR valides JSON zurück, kein Markdown, keine Erklärung.
-Format: {"questions":[{"q":"Frage","options":["A","B","C","D"],"correct":0,"explanation":"2-3 Sätze Erklärung"}]}
-Regeln: genau 5 Fragen, 4 Optionen, correct=Index 0-3, auf Deutsch, Niveau Klasse 10.
-KEINE Fragen zu: Vorwärts, Moorsoldaten, Erlkönig, Halling, Abschied vom Walde, Bohemian Rhapsody.
-Nutze stattdessen andere Beispiele aus der Musikgeschichte. Distraktoren sollen plausibel sein.`;
-const SYS_TALK=`Du bist ein geduldiger Musiklehrer, der Klasse-10-Schüler auf die mündliche Realschulabschlussprüfung Musik vorbereitet.
-Verhalte dich wie ein echter Prüfer: stelle offene Fragen, gib nach jeder Antwort kurzes Feedback (was gut war, was fehlt), hake nach.
-Antworte auf Deutsch. Maximal 4-5 Sätze pro Antwort. Nach 7 Gesprächszügen: kurzes Fazit geben.
-Keine direkten Aufgaben oder Lieder aus dem Unterrichtsmaterial – übertrage die Denkstruktur auf neue Kontexte.`;
-const FALLBACK={
   markt:[
-    {q:'Welcher der folgenden Begriffe beschreibt das Prinzip, dass heute jeder Künstler ohne Label und teures Studio Musik veröffentlichen kann?',options:['Monopolisierung','Demokratisierung der Musikproduktion','Digitale Zensur','Streamflation'],correct:1,explanation:'Die Digitalisierung hat die Hürden für Musikproduktion und -veröffentlichung drastisch gesenkt – Homerecording und Distributoren ermöglichen unabhängige Veröffentlichungen.'},
+    {q:'Welcher der folgenden Begriffe beschreibt, dass heute jeder Künstler ohne Label Musik veröffentlichen kann?',opts:['Monopolisierung','Demokratisierung der Musikproduktion','Digitale Zensur','Streamflation'],c:1,ex:'Die Digitalisierung hat die Hürden für Produktion und Veröffentlichung drastisch gesenkt – Homerecording und Distributoren ermöglichen unabhängige Veröffentlichungen.'},
-    {q:'Was unterscheidet das Magnetzeitalter der Tonaufzeichnung vom Nadelzeitalter?',options:['Musik wird erstmals übertragen','Klang wird als magnetisches Muster auf Bändern gespeichert, nicht als Rille','CDs ersetzen Schallplatten','Musik wird digital komprimiert'],correct:1,explanation:'Im Magnetzeitalter (Tonband, Kassette) werden Schallwellen in magnetische Signale auf eisenpartikelbeschichteten Bändern umgewandelt – ein grundlegend anderes Prinzip als die Nadelrille.'},
+    {q:'Was unterscheidet das Magnetzeitalter vom Nadelzeitalter der Tonaufzeichnung?',opts:['Musik wird erstmals übertragen','Klang wird als magnetisches Muster auf Bändern gespeichert, nicht als Rille','CDs ersetzen Schallplatten','Musik wird digital komprimiert'],c:1,ex:'Im Magnetzeitalter werden Schallwellen in magnetische Signale auf eisenpartikelbeschichteten Bändern umgewandelt – ein grundlegend anderes Prinzip als die Nadelrille.'},
-    {q:'Wofür ist die GEMA in Deutschland zuständig?',options:['Ausstellung von Konzertgenehmigungen','Schutz und Vergütung von Urheberrechten für Komponisten und Textdichter','Zertifizierung von Tonstudios','Regulierung von Streamingpreisen'],correct:1,explanation:'Die GEMA ist eine Verwertungsgesellschaft, die Urheberrechte von Musikschaffenden wahrnimmt und Einnahmen aus öffentlichen Aufführungen und Vervielfältigungen verteilt.'},
+    {q:'Wofür ist die GEMA in Deutschland zuständig?',opts:['Ausstellung von Konzertgenehmigungen','Schutz und Vergütung von Urheberrechten für Komponisten und Textdichter','Zertifizierung von Tonstudios','Regulierung von Streamingpreisen'],c:1,ex:'Die GEMA nimmt Urheberrechte von Musikschaffenden wahr und verteilt Einnahmen aus öffentlichen Aufführungen und Vervielfältigungen.'},
-    {q:'Was ist ein Musikdistributor im digitalen Zeitalter?',options:['Ein DJ, der Musik verbreitet','Ein Dienst, der Musik auf Streaming-Plattformen hochlädt','Ein Plattenlabel mit eigenem Studio','Eine staatliche Behörde für Musikrechte'],correct:1,explanation:'Digitale Distributoren wie DistroKid oder TuneCore ermöglichen es unabhängigen Künstlern, ihre Musik auf Plattformen wie Spotify oder Apple Music zu veröffentlichen.'},
+    {q:'Was ist ein digitaler Musikdistributor?',opts:['Ein DJ, der Musik verbreitet','Ein Dienst, der Musik auf Streaming-Plattformen hochlädt','Ein Plattenlabel mit eigenem Studio','Eine staatliche Behörde für Musikrechte'],c:1,ex:'Digitale Distributoren wie DistroKid oder TuneCore ermöglichen es unabhängigen Künstlern, ihre Musik auf Plattformen wie Spotify zu veröffentlichen.'},
-    {q:'Welcher Effekt entsteht dadurch, dass das Internet nahezu unbegrenzten Zugang zur Musik aller Künstler weltweit bietet?',options:['Qualitätssteigerung aller Musik','Starke Konkurrenz und schwierige Aufmerksamkeitsgewinnung','Rückgang des Streamings','Stärkung regionaler Musiktraditionen'],correct:1,explanation:'Das Überangebot im Internet macht es für einzelne Künstler schwerer, aus der Masse herauszustechen – trotz demokratischem Zugang ist langfristiger Erfolg schwieriger geworden.'}
+    {q:'Welche Schwierigkeit entsteht durch das Überangebot im Internet für Künstler?',opts:['Qualitätssteigerung aller Musik','Starke Konkurrenz und schwierige Aufmerksamkeitsgewinnung','Rückgang des Streamings','Stärkung regionaler Musiktraditionen'],c:1,ex:'Das Überangebot macht es für einzelne Künstler schwerer, aus der Masse herauszustechen – trotz demokratischem Zugang ist langfristiger Erfolg schwieriger geworden.'}
   ],
   politik:[
-    {q:'Was versteht man unter einem Agitationslied?',options:['Ein Lied mit komplizierten Harmonien','Ein Lied, das zur politischen Überzeugung und Handlung aufruft','Ein traditionelles Volkslied','Ein Lied für religiöse Zeremonien'],correct:1,explanation:'Agitationslieder sind politische Kampflieder, die durch eingängige Melodien und ideologische Texte Menschen mobilisieren und beeinflussen sollen.'},
+    {q:'Was versteht man unter einem Agitationslied?',opts:['Ein Lied mit komplizierten Harmonien','Ein Lied, das zur politischen Überzeugung und Handlung aufruft','Ein traditionelles Volkslied','Ein Lied für religiöse Zeremonien'],c:1,ex:'Agitationslieder sind politische Kampflieder, die durch eingängige Melodien und ideologische Texte Menschen mobilisieren und beeinflussen sollen.'},
-    {q:'Welchen psychologischen Effekt hat gemeinsames Singen in einer Gruppe vor allem?',options:['Es steigert die Einzelleistung','Es erzeugt Gemeinschaftsgefühl und Zusammengehörigkeit','Es fördert kritisches Denken','Es mindert Gruppenkonformität'],correct:1,explanation:'Gemeinsames Singen synchronisiert Bewegungen und Atmung, erzeugt ein starkes Wir-Gefühl und kann Gruppendruck sowie emotionale Bindung an eine Ideologie verstärken.'},
+    {q:'Welchen psychologischen Effekt hat gemeinsames Singen in Gruppen vor allem?',opts:['Es steigert die Einzelleistung','Es erzeugt Gemeinschaftsgefühl und Zusammengehörigkeit','Es fördert kritisches Denken','Es mindert Gruppenkonformität'],c:1,ex:'Gemeinsames Singen synchronisiert Bewegungen und Atmung, erzeugt ein starkes Wir-Gefühl und kann Gruppendruck sowie emotionale Bindung an eine Ideologie verstärken.'},
-    {q:'Was war der Bund Deutscher Mädel (BDM) im NS-Staat?',options:['Eine Sportorganisation für erwachsene Frauen','Die Mädchenorganisation der Hitlerjugend zur ideologischen Erziehung','Ein Frauen-Chor','Eine schulische Nachhilfeorganisation'],correct:1,explanation:'Der BDM war Teil der Hitlerjugend und diente der ideologischen Formung von Mädchen im Sinne des Nationalsozialismus – Musik und Gemeinschaftserlebnisse spielten dabei eine zentrale Rolle.'},
+    {q:'Was war der Bund Deutscher Mädel (BDM)?',opts:['Eine Sportorganisation für erwachsene Frauen','Die Mädchenorganisation der Hitlerjugend zur ideologischen Erziehung','Ein Frauen-Chor','Eine schulische Nachhilfeorganisation'],c:1,ex:'Der BDM war Teil der Hitlerjugend und diente der ideologischen Formung von Mädchen – Musik und Gemeinschaftserlebnisse spielten dabei eine zentrale Rolle.'},
-    {q:'Was charakterisiert musikalisch typische Marschlieder?',options:['Langsames Tempo und weiche Dynamik','Gleichmäßiger treibender Rhythmus, schreitende Viertel, oft Dur-Tonart','Viele Dissonanzen und freies Tempo','Ausschließlich A-cappella-Gesang'],correct:1,explanation:'Marschlieder sind auf körperliches Mitgehen ausgelegt – ihr gleichmäßiger Rhythmus synchronisiert Schritttempo und erzeugt gleichzeitig ein mitreißendes Gemeinschaftsgefühl.'},
+    {q:'Was charakterisiert musikalisch typische Marschlieder?',opts:['Langsames Tempo und weiche Dynamik','Gleichmäßiger treibender Rhythmus, schreitende Viertel, oft Dur-Tonart','Viele Dissonanzen und freies Tempo','Ausschließlich A-cappella-Gesang'],c:1,ex:'Marschlieder sind auf körperliches Mitgehen ausgelegt – ihr gleichmäßiger Rhythmus synchronisiert Schritttempo und erzeugt ein mitreißendes Gemeinschaftsgefühl.'},
-    {q:'Warum ist die kritische Analyse von NS-Propagandaliedern im Unterricht erlaubt, ihr propagandistisches Singen jedoch nicht?',options:['Weil die Melodien zu komplex sind','Weil historische Analyse und gezielte Propaganda grundlegend verschiedene Zwecke haben','Weil das Grundgesetz alle Lieder vor 1945 verbietet','Weil solche Lieder keine Melodie besitzen'],correct:1,explanation:'Kritische Auseinandersetzung dient dem historischen Verstehen und der Prävention – die propagandistische Verwendung hingegen verbreitet verfassungsfeindliche Inhalte und ist strafbar.'}
+    {q:'Warum ist die kritische Analyse von NS-Propagandaliedern im Unterricht erlaubt, ihr propagandistisches Singen jedoch nicht?',opts:['Weil die Melodien zu komplex sind','Weil historische Analyse und gezielte Propaganda grundlegend verschiedene Zwecke haben','Weil das Grundgesetz alle Lieder vor 1945 verbietet','Weil solche Lieder keine Melodie besitzen'],c:1,ex:'Kritische Auseinandersetzung dient dem historischen Verstehen und der Prävention – die propagandistische Verwendung hingegen verbreitet verfassungsfeindliche Inhalte.'}
   ],
   romantik:[
-    {q:'Was unterscheidet das Kunstlied vom Volkslied?',options:['Das Kunstlied hat keine Melodie','Das Kunstlied ist schriftlich überliefert, von einem bekannten Komponisten und mit Klavier begleitet','Das Volkslied ist harmonisch komplexer','Das Kunstlied wird immer mehrstimmig gesungen'],correct:1,explanation:'Kunstlieder sind komponierte, schriftlich festgehaltene Werke mit bekanntem Urheber und Klavierbegleitung – Volkslieder entstanden dagegen anonym und wurden mündlich weitergegeben.'},
+    {q:'Was unterscheidet das Kunstlied vom Volkslied?',opts:['Das Kunstlied hat keine Melodie','Das Kunstlied ist schriftlich überliefert, von einem bekannten Komponisten und mit Klavier begleitet','Das Volkslied ist harmonisch komplexer','Das Kunstlied wird immer mehrstimmig gesungen'],c:1,ex:'Kunstlieder sind komponierte, schriftlich festgehaltene Werke mit bekanntem Urheber und Klavierbegleitung – Volkslieder entstanden dagegen anonym und wurden mündlich weitergegeben.'},
-    {q:'Was beschreibt der Begriff "durchkomponiertes Lied"?',options:['Ein Lied ohne Begleitung','Jede Strophe erhält eine neue, dem Text angepasste Vertonung','Alle Strophen klingen musikalisch gleich','Ein Lied, das endlos wiederholt wird'],correct:1,explanation:'Im durchkomponierten Lied passt sich die Musik ständig an den Inhalt des Textes an – jede Strophe klingt anders, da Handlung und Emotion musikalisch nachgezeichnet werden.'},
+    {q:'Was beschreibt der Begriff "durchkomponiertes Lied"?',opts:['Ein Lied ohne Begleitung','Jede Strophe erhält eine neue, dem Text angepasste Vertonung','Alle Strophen klingen musikalisch gleich','Ein Lied, das endlos wiederholt wird'],c:1,ex:'Im durchkomponierten Lied passt sich die Musik ständig an den Inhalt des Textes an – jede Strophe klingt anders, da Handlung und Emotion musikalisch nachgezeichnet werden.'},
-    {q:'Was meint der Begriff "Jahrhundert der Widersprüche" in der Musik der Romantik?',options:['Das 18. Jahrhundert der Aufklärung','Das 19. Jahrhundert mit gleichzeitiger Privatheit und öffentlichem Konzertleben, Historismus und Klanginnovation','Das 20. Jahrhundert des Jazz','Das 17. Jahrhundert des Barock'],correct:1,explanation:'Das 19. Jahrhundert vereinte gegensätzliche Strömungen: privater Rückzug (Hausmusik) stand dem blühenden öffentlichen Konzertleben gegenüber, Historismus traf auf kühne Klangerneuerung.'},
+    {q:'Was meint der Begriff "Jahrhundert der Widersprüche" in der Romantik?',opts:['Das 18. Jahrhundert der Aufklärung','Das 19. Jahrhundert mit gleichzeitiger Privatheit und öffentlichem Konzertleben, Historismus und Klanginnovation','Das 20. Jahrhundert des Jazz','Das 17. Jahrhundert des Barock'],c:1,ex:'Das 19. Jahrhundert vereinte gegensätzliche Strömungen: privater Rückzug stand dem blühenden Konzertleben gegenüber, Historismus traf auf kühne Klangerneuerung.'},
-    {q:'Was versteht man unter einer Nationalschule in der Musik des 19. Jahrhunderts?',options:['Eine staatliche Musikhochschule','Eine Komponistenbewegung, die nationale Volksmusik und Folklore in die Kunstmusik integriert','Ein staatlich finanziertes Orchester','Eine Schule ausschließlich für klassische Musik'],correct:1,explanation:'Nationalschulen entstanden als Reaktion auf Industrialisierung und als Ausdruck nationaler Identität – Komponisten sammelten Volkslieder und integrierten nationale Elemente in ihre Kunstmusik.'},
+    {q:'Was kennzeichnet eine Nationalschule in der Musik des 19. Jahrhunderts?',opts:['Eine staatliche Musikhochschule','Eine Komponistenbewegung, die nationale Volksmusik und Folklore in die Kunstmusik integriert','Ein staatlich finanziertes Orchester','Eine Schule ausschließlich für klassische Musik'],c:1,ex:'Nationalschulen entstanden als Reaktion auf Industrialisierung und als Ausdruck nationaler Identität – Komponisten sammelten Volkslieder und integrierten nationale Elemente in ihre Werke.'},
-    {q:'Welches Merkmal kennzeichnet ein Virtuosenkonzert (im Gegensatz zum sinfonischen Konzert)?',options:['Das Orchester spielt ohne Solisten','Ein Solist steht virtuos im Mittelpunkt, das Orchester hat Begleitfunktion','Alle Instrumente sind gleichwertig','Es gibt keine Kadenz'],correct:1,explanation:'Im Virtuosenkonzert dient das Orchester als Hintergrund für die Zurschaustellung der technischen Brillanz des Solisten – im Gegensatz zum sinfonischen Konzert, wo Solist und Orchester gleichwertig dialogisieren.'}
+    {q:'Was unterscheidet das Virtuosenkonzert vom sinfonischen Konzert?',opts:['Das Orchester spielt ohne Solisten','Ein Solist steht virtuos im Mittelpunkt, das Orchester hat Begleitfunktion','Alle Instrumente sind gleichwertig','Es gibt keine Kadenz'],c:1,ex:'Im Virtuosenkonzert dient das Orchester als Hintergrund für die Brillanz des Solisten – im sinfonischen Konzert dialogisieren Solist und Orchester gleichwertig.'}
   ],
   film:[
-    {q:'Was versteht man unter "Underscoring" (Bildillustration) in der Filmmusik?',options:['Musik, die im Widerspruch zum Bild steht','Musik, die das Bildgeschehen direkt musikalisch nachzeichnet und verstärkt','Musik ausschließlich im Vorspann','Stille als dramaturgisches Mittel'],correct:1,explanation:'Underscoring bedeutet, dass die Musik das Sichtbare direkt kommentiert und verstärkt – im Extremfall (Mickey-Mousing) wird jede Bewegung exakt musikalisch nachgeahmt.'},
+    {q:'Was versteht man unter "Underscoring" in der Filmmusik?',opts:['Musik, die im Widerspruch zum Bild steht','Musik, die das Bildgeschehen direkt musikalisch nachzeichnet und verstärkt','Musik ausschließlich im Vorspann','Stille als dramaturgisches Mittel'],c:1,ex:'Underscoring bedeutet, dass die Musik das Sichtbare direkt kommentiert und verstärkt – im Extremfall wird jede Bewegung exakt musikalisch nachgeahmt (Mickey-Mousing).'},
-    {q:'Was macht ein Foley-Künstler?',options:['Er komponiert die Filmmusik','Er erzeugt Alltagsgeräusche künstlich im Tonstudio nach','Er synchronisiert Dialoge','Er mischt den Filmton ab'],correct:1,explanation:'Foley-Künstler stellen Geräusche wie Schritte, Kleidungsrascheln oder Türknarren im Studio mit ungewöhnlichen Requisiten nach, damit sie im Film präzise und authentisch wirken.'},
+    {q:'Was macht ein Foley-Künstler?',opts:['Er komponiert die Filmmusik','Er erzeugt Alltagsgeräusche künstlich im Tonstudio nach','Er synchronisiert Dialoge','Er mischt den Filmton ab'],c:1,ex:'Foley-Künstler stellen Geräusche wie Schritte oder Kleidungsrascheln im Studio mit ungewöhnlichen Requisiten nach, damit sie im Film präzise und authentisch wirken.'},
-    {q:'Was ist die Leitmotivtechnik in der Filmmusik?',options:['Ein immer gleiches Tempo im Film','Einer Figur oder einem Ort wird ein wiederkehrendes musikalisches Motiv zugeordnet','Ausschließlich stimmungsvolle Hintergrundmusik','Zufällig wechselnde Melodien ohne Bedeutung'],correct:1,explanation:'Leitmotive verknüpfen bestimmte Klänge mit Figuren, Orten oder Ideen – Veränderungen des Motivs zeigen den inneren Zustand oder die Entwicklung einer Figur im Verlauf des Films.'},
+    {q:'Was ist die Leitmotivtechnik in der Filmmusik?',opts:['Ein immer gleiches Tempo im Film','Einer Figur oder einem Ort wird ein wiederkehrendes musikalisches Motiv zugeordnet','Ausschließlich stimmungsvolle Hintergrundmusik','Zufällig wechselnde Melodien'],c:1,ex:'Leitmotive verknüpfen bestimmte Klänge mit Figuren, Orten oder Ideen – Veränderungen des Motivs zeigen die Entwicklung einer Figur im Verlauf des Films.'},
-    {q:'Was beschreibt die "kontrapunktierende Bildinterpretation"?',options:['Musik, die das Bild direkt unterstützt','Musik, die im Widerspruch zur Bildaussage steht und eine neue Bedeutungsebene schafft','Musik die lauter wird wenn die Szene spannender wird','Musik ohne jeden Bezug zum Film'],correct:1,explanation:'Wenn fröhliche Musik bei einer traurigen oder brutalen Szene erklingt, entsteht ein bewusster Kontrast, der die Bildaussage verfremdet und den Zuschauer zum Nachdenken bringt.'},
+    {q:'Was beschreibt die "kontrapunktierende Bildinterpretation"?',opts:['Musik, die das Bild direkt unterstützt','Musik, die im Widerspruch zur Bildaussage steht und eine neue Bedeutungsebene schafft','Musik wird lauter wenn die Szene spannender wird','Musik ohne Bezug zum Film'],c:1,ex:'Wenn fröhliche Musik bei einer traurigen Szene erklingt, entsteht ein bewusster Kontrast, der die Bildaussage verfremdet und den Zuschauer zum Nachdenken bringt.'},
-    {q:'Warum wurde in frühen Stummfilmen quasi immer Musik gespielt?',options:['Weil Stummfilme gesetzlich Musik vorschrieben','Um Projektorlärm zu übertönen, Stimmung zu erzeugen und das Publikum an Live-Musik zu gewöhnen','Weil die Filme sonst zu kurz waren','Weil Schauspieler nicht reden konnten'],correct:1,explanation:'Musik bei Stummfilmen erfüllte mehrere Zwecke: Sie übertönte laute Projektoren, erzeugte Stimmung, ersetzte fehlende Geräusche und war für das damalige Publikum aus der Theatertradition vertraut.'}
+    {q:'Warum wurde bei frühen Stummfilmen quasi immer Musik gespielt?',opts:['Weil Stummfilme gesetzlich Musik vorschrieben','Um Projektorlärm zu übertönen, Stimmung zu erzeugen und das Publikum an Live-Musik zu gewöhnen','Weil die Filme sonst zu kurz waren','Weil Schauspieler nicht reden konnten'],c:1,ex:'Musik bei Stummfilmen übertönte laute Projektoren, erzeugte Stimmung, ersetzte fehlende Geräusche und war für das Publikum aus der Theatertradition vertraut.'}
   ]
 };
-const st={theme:null,qs:[],qi:0,answered:false,tot:0,cor:0,sTot:0,sCor:0,history:[],turns:0};
+const TALK={
+  markt:{
+    scenario:'Dein Cousin hat gestern seinen ersten eigenen Song aufgenommen – nur mit dem Smartphone und einer kostenlosen App. Er fragt dich: "Wie kriege ich das Ding auf Spotify?" Diskutiere mit mir (deinem Cousin), was als nächstes zu tun ist.',
+    steps:[
+      {phase:'Schritt 1 von 3',prompt:'Dein Cousin fragt: "Brauche ich dafür ein Plattenlabel oder kann ich das alleine machen?"',hint:'Denke an: Musikdistributoren, Homerecording, Demokratisierung der Musikproduktion.',
+       solution:['Kein Label nötig: Heute kann jeder unabhängig veröffentlichen (Demokratisierung der Musikproduktion)','Musikdistributoren (z.B. DistroKid, TuneCore) laden die Musik auf Streamingplattformen hoch','Vorher: Song fertig produzieren, Cover gestalten, bei GEMA anmelden (Urheberrechtsschutz)','Vorteile: günstig, kreative Freiheit, weltweite Reichweite']},
+      {phase:'Schritt 2 von 3',prompt:'Cousin: "Und wie bekomme ich dann Leute dazu, den Song auch wirklich zu hören?"',hint:'Denke an: Social Media, TikTok, Reels, Algorithmen, Chancen und Risiken.',
+       solution:['Social Media: kurze Videos / Reels / TikToks erstellen','„Teilen"-Funktion erreicht potenzielle neue Fans','Freunde und Fans motivieren, den Song zu teilen','Risiken: starke Konkurrenz im Internet, Abhängigkeit von Algorithmen, geringe Streaming-Einnahmen']},
+      {phase:'Schritt 3 von 3',prompt:'Cousin: "Früher haben Bands doch jahrelang auf einen Plattenvertrag gewartet. Ist das Internet wirklich so ein Vorteil?"',hint:'Denke an: Vor- und Nachteile, Vergleich früher/heute, Demokratisierung vs. Überangebot.',
+       solution:['Vorteile: Unabhängigkeit von großen Labels, sofortige weltweite Veröffentlichung möglich','Heute: kein teures Presswerk, keine physische Distribution nötig','Nachteile: Überangebot erschwert Aufmerksamkeit, illegale Downloads, geringe Einnahmen pro Stream','Fazit: Das Internet demokratisiert die Musikproduktion – macht Erfolg aber nicht automatisch einfacher']}
+    ]
+  },
+  politik:{
+    scenario:'In einer Dokumentation siehst du, wie eine politische Bewegung bei Kundgebungen gezielt immer dasselbe Lied einsetzt – alle singen mit, alle recken die Fäuste. Dein Freund sagt: "Das ist doch normal – das macht jede Band so." Du widersprichst.',
+    steps:[
+      {phase:'Schritt 1 von 3',prompt:'Freund: "Was ist denn der Unterschied zwischen einem Konzert und einer politischen Kundgebung mit Musik?"',hint:'Denke an: Gemeinschaftsgesang, emotionale Beeinflussung, Propaganda, Wirkung auf Zuschauer.',
+       solution:['Konzert: Musik dient primär der Unterhaltung und dem künstlerischen Ausdruck','Politische Kundgebung: Musik wird gezielt zur emotionalen Mobilisierung eingesetzt','Gemeinschaftsgesang erzeugt ein starkes Wir-Gefühl und Gruppenzugehörigkeit','Musik kann politische Botschaften emotional verstärken – Propaganda über Gefühle statt Argumente']},
+      {phase:'Schritt 2 von 3',prompt:'Freund: "Hat das mit dem NS irgendwas zu tun? Ich dachte, das ist alles Geschichte."',hint:'Denke an: Hitlerjugend, BDM, Musik als Propagandamittel, Indoktrination, Gemeinschaftsgefühl.',
+       solution:['Im NS war Musik systematisches Propagandainstrument: Fackelmärsche, Kundgebungen, HJ-Lieder','Gemeinsames Singen stärkte Gruppenidentität und Führertreue','HJ und BDM: Musik als fester Bestandteil der ideologischen Erziehung von Kindern','Lieder vermittelten Ideale wie Opferbereitschaft, Gehorsam und Kameradschaft']},
+      {phase:'Schritt 3 von 3',prompt:'Freund: "Aber heute ist das doch nicht mehr so schlimm, oder? Musik ist doch harmlos."',hint:'Denke an: Musik als Waffe, heutige Beispiele, kritischer Umgang, Manipulation.',
+       solution:['Musik ist nicht automatisch harmlos – sie kann auch heute gezielt als Waffe eingesetzt werden','Einsatz in: Wahlkämpfen, Demonstrationen, Militär, extremistischen Bewegungen','Musik beeinflusst Gefühle und Denken – Gemeinschaftssingen erzeugt Gruppendruck','Fazit: Kritischer und historisch bewusster Umgang mit Musik als politischem Mittel ist notwendig']}
+    ]
+  },
+  romantik:{
+    scenario:'Du scrollst durch TikTok und siehst eine Geigerin mit 15 Millionen Followern – sie spielt virtuose Stücke, macht spektakuläre Tricks mit dem Bogen und verkauft ihr eigenes Parfum. Dein Freund sagt: "Das ist doch nur Social-Media-Hype, früher war das alles echter."',
+    steps:[
+      {phase:'Schritt 1 von 3',prompt:'Freund: "Wann gab es denn früher schon sowas wie Starkult bei Musikern?"',hint:'Denke an: Virtuosentum im 19. Jh., Paganini, Liszt, technischer Fortschritt, Merchandising.',
+       solution:['Starkult gibt es seit der Romantik – Niccolò Paganini war ein echter Superstar','Paganini spielte mit umgekehrtem Bogen, hinter dem Rücken – spektakuläre Inszenierung','"Ganz Wien schwärmte für Paganini" – Schnitzel, Zwieback und Parfum mit seinem Namen','Franz Liszt: Frauen fielen in Ohnmacht, Haare und Handschuhe wurden als Reliquien gesammelt']},
+      {phase:'Schritt 2 von 3',prompt:'Freund: "Okay, aber was hat das alles mit der Romantik als Epoche zu tun?"',hint:'Denke an: Romantisches Lebensgefühl, Jahrhundert der Widersprüche, Sehnsucht, Natur, Industrialisierung.',
+       solution:['Romantik (ca. 1800–1850): Reaktion auf Industrialisierung und Verlust der natürlichen Welt','Zentrale Motive: Sehnsucht, Natur, Nacht, Wandern, Flucht aus dem Alltag','"Jahrhundert der Widersprüche": privater Rückzug (Hausmusik) vs. öffentliches Konzertleben','Laienmusik vs. glühende Verehrung von Virtuosen – dieselbe Gesellschaft lebte beides']},
+      {phase:'Schritt 3 von 3',prompt:'Freund: "Also ist Ronaldo eigentlich auch nur ein Paganini mit Ball?"',hint:'Denke an: Vergleich Virtuosentum – Starkult heute, Selbstinszenierung, Merchandising, Medien.',
+       solution:['Gemeinsamkeiten: weltweite Bekanntheit, außergewöhnliche Fähigkeiten, gezielte Selbstinszenierung','Kapitalistisches Merchandising – damals Tabakdosen, heute Parfum und Trikots','Unterschiede: Soziale Medien machen heutigen Starkult globaler und schneller','Fazit: Starkult existiert seit Jahrhunderten – Technik und Reichweite ändern sich, das Prinzip bleibt']}
+    ]
+  },
+  film:{
+    scenario:'Ihr schaut zuhause einen Actionfilm – plötzlich fällt der Ton aus. Deine Mutter sagt: "Na gut, sehen wir halt zu, die Musik ist doch eh nur Hintergrundgedudel." Du bist völlig anderer Meinung.',
+    steps:[
+      {phase:'Schritt 1 von 3',prompt:'Mutter: "Aber die Geschichte ist doch dieselbe – was ändert sich ohne Musik wirklich?"',hint:'Denke an: Emotionale Verstärkung, Spannungsaufbau, Atmosphäre, Mood-Technik.',
+       solution:['Ohne Musik: Szenen wirken flach, Emotionen kommen nicht an','Mood-Technik: Musik drückt Dinge aus, die das Bild alleine nicht vermitteln kann (z.B. innere Gefühle)','Spannungsaufbau: tiefe Streicher, Dissonanzen, Rhythmus erzeugen Nervosität beim Zuschauer','Filmstudien zeigen: dieselbe Szene wirkt mit unterschiedlicher Musik komplett anders']},
+      {phase:'Schritt 2 von 3',prompt:'Mutter: "Die machen doch einfach irgendeine Musik drunter – wie viel Arbeit ist das wirklich?"',hint:'Denke an: Filmkomponist, Leitmotivtechnik, Foley-Künstler, Underscoring, Synchronisation.',
+       solution:['Filmkomponisten analysieren jede Szene auf Hitpoints (wichtige Momente)','Leitmotivtechnik: Figuren und Orte bekommen eigene Motive – Veränderungen zeigen innere Zustände','Underscoring: Musik und Bild sind millimetergenau synchronisiert','Foley-Künstler erzeugen alle Alltagsgeräusche (Schritte, Rascheln) separat im Studio nach']},
+      {phase:'Schritt 3 von 3',prompt:'Mutter: "Dann kann ich mir ja selbst Musik dazudenken – macht das wirklich einen Unterschied, was für Musik läuft?"',hint:'Denke an: kontrapunktierende Bildinterpretation, Wirkungsunterschiede, Beispiele.',
+       solution:['Ja – die Musikwahl verändert die Bedeutung einer Szene grundlegend','Kontrapunktierende Bildinterpretation: fröhliche Musik bei brutaler Szene = Verfremdung, Ironie','Beispiel "Nobody": Actionszene mit fröhlichem Popsong – bizarre, unheimliche Wirkung','Fazit: Musik ist kein Beiwerk, sondern ein eigenständiges erzählerisches Mittel im Film']}
+    ]
+  }
+};
-function show(id){['home','mode','mc','talk','result'].forEach(s=>document.getElementById('s-'+s).classList.add('mpt-hidden'));document.getElementById('s-'+id).classList.remove('mpt-hidden')}
+const st={theme:null,qs:[],qi:0,answered:false,tot:0,cor:0,sTot:0,sCor:0,talkStep:0,talkData:null};
-function pill(el,theme){const t=T[theme];el.innerHTML=`<span class="mpt-theme-pill" style="background:${t.bg};color:${t.txt};border:0.5px solid ${t.border}"><i class="ti ${t.icon}" aria-hidden="true" style="font-size:14px"></i>${t.label}</span>`}
+function show(id){['home','mode','mc','talk','result'].forEach(s=>document.getElementById('s-'+s).classList.add('mpt-hidden'));document.getElementById('s-'+id).classList.remove('mpt-hidden')}
+function pill(el,t){const th=THEMES[t];el.innerHTML=`<span style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:500;background:${th.bg};color:${th.txt};border:0.5px solid ${th.border}">${th.icon} ${th.label}</span>`}
-function colorBtn(el,theme){const t=T[theme];el.style.background=t.mid;el.style.color='#fff'}
 const A={
   home(){show('home');document.getElementById('st-total').textContent=st.tot;document.getElementById('st-correct').textContent=st.cor;document.getElementById('st-pct').textContent=st.tot>0?Math.round(st.cor/st.tot*100)+'%':'–'},
-  theme(t){st.theme=t;const th=T[t];document.getElementById('mode-mc-icon').style.background=th.bg;document.getElementById('mode-mc-icon').innerHTML=`<i class="ti ti-checkbox" aria-hidden="true" style="font-size:20px;color:${th.mid}"></i>`;document.getElementById('mode-talk-icon').style.background=th.bg;document.getElementById('mode-talk-icon').innerHTML=`<i class="ti ti-messages" aria-hidden="true" style="font-size:20px;color:${th.mid}"></i>`;pill(document.getElementById('mode-pill'),t);show('mode')},
+  theme(t){
+    st.theme=t;const th=THEMES[t];
+    document.getElementById('mode-mc-icon').style.background=th.bg;document.getElementById('mode-mc-icon').textContent='☑';document.getElementById('mode-mc-icon').style.color=th.mid;
+    document.getElementById('mode-talk-icon').style.background=th.bg;document.getElementById('mode-talk-icon').textContent='💬';document.getElementById('mode-talk-icon').style.color=th.mid;
+    pill(document.getElementById('mode-pill'),t);show('mode')
+  },
   toMode(){show('mode')},
-  async startMC(){st.qs=[];st.qi=0;st.sTot=0;st.sCor=0;show('mc');pill(document.getElementById('mc-pill'),st.theme);document.getElementById('mc-bar').style.background=T[st.theme].progClr;colorBtn(document.getElementById('mc-next'),st.theme);document.getElementById('mc-loading').classList.remove('mpt-hidden');document.getElementById('mc-content').classList.add('mpt-hidden');try{const r=await fetch('https://api.anthropic.com/v1/messages',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'claude-sonnet-4-20250514',max_tokens:1000,system:SYS_MC,messages:[{role:'user',content:`Erstelle 5 Multiple-Choice-Fragen zum Thema "${T[st.theme].label}" für Musik-Realschulabschluss.`}]})});const d=await r.json();const raw=d.content.filter(b=>b.type==='text').map(b=>b.text).join('');st.qs=JSON.parse(raw.replace(/```json|```/g,'').trim()).questions}catch(e){st.qs=FALLBACK[st.theme]}document.getElementById('mc-loading').classList.add('mpt-hidden');document.getElementById('mc-content').classList.remove('mpt-hidden');A.renderQ()},
+  startMC(){
-  renderQ(){const q=st.qs[st.qi];if(!q){A.showRes();return}st.answered=false;const tot=st.qs.length;document.getElementById('mc-counter').textContent=`${st.qi+1} / ${tot}`;document.getElementById('mc-bar').style.width=Math.round(st.qi/tot*100)+'%';document.getElementById('mc-q').textContent=q.q;const od=document.getElementById('mc-opts');od.innerHTML='';q.options.forEach((o,i)=>{const b=document.createElement('button');b.className='mpt-mc-opt';b.innerHTML=`<span style="font-weight:500;min-width:18px;color:var(--color-text-secondary)">${String.fromCharCode(65+i)}</span>${o}`;b.onclick=()=>A.pick(i);od.appendChild(b)});document.getElementById('mc-fb').classList.add('mpt-hidden');document.getElementById('mc-next').classList.add('mpt-hidden')},
+    const qs=[...MC[st.theme]].sort(()=>Math.random()-0.5);
-  pick(i){if(st.answered)return;st.answered=true;const q=st.qs[st.qi];const ok=i===q.correct;document.querySelectorAll('.mpt-mc-opt').forEach((b,j)=>{b.disabled=true;if(j===q.correct)b.classList.add('correct');else if(j===i&&!ok)b.classList.add('wrong')});st.tot++;st.sTot++;if(ok){st.cor++;st.sCor++}const fb=document.getElementById('mc-fb');fb.classList.remove('mpt-hidden');fb.style.background=ok?'var(--color-background-success)':'var(--color-background-danger)';fb.style.color=ok?'var(--color-text-success)':'var(--color-text-danger)';fb.innerHTML=`<strong>${ok?'Richtig!':'Leider falsch.'}</strong> ${q.explanation}`;document.getElementById('mc-next').classList.remove('mpt-hidden')},
+    st.qs=qs;st.qi=0;st.sTot=0;st.sCor=0;st.answered=false;
+    const th=THEMES[st.theme];
+    pill(document.getElementById('mc-pill'),st.theme);
+    document.getElementById('mc-bar').style.background=th.prog;
+    document.getElementById('mc-next').style.background=th.mid;
+    document.getElementById('res-retry').style.background=th.mid;
+    show('mc');A.renderQ()
+  },
+  renderQ(){
+    const q=st.qs[st.qi];if(!q){A.showRes();return}
+    st.answered=false;
+    const tot=st.qs.length;
+    document.getElementById('mc-counter').textContent=`${st.qi+1} / ${tot}`;
+    document.getElementById('mc-bar').style.width=Math.round(st.qi/tot*100)+'%';
+    document.getElementById('mc-q').textContent=q.q;
+    const od=document.getElementById('mc-opts');od.innerHTML='';
+    q.opts.forEach((o,i)=>{
+      const b=document.createElement('button');b.className='mpt-mc-opt';
+      b.innerHTML=`<span style="font-weight:500;min-width:18px;color:#888">${String.fromCharCode(65+i)}</span>${o}`;
+      b.onclick=()=>A.pick(i);od.appendChild(b)
+    });
+    document.getElementById('mc-fb').classList.add('mpt-hidden');
+    document.getElementById('mc-next').classList.add('mpt-hidden')
+  },
+  pick(i){
+    if(st.answered)return;st.answered=true;
+    const q=st.qs[st.qi];const ok=i===q.c;
+    document.querySelectorAll('.mpt-mc-opt').forEach((b,j)=>{b.disabled=true;if(j===q.c)b.classList.add('correct');else if(j===i&&!ok)b.classList.add('wrong')});
+    st.tot++;st.sTot++;if(ok){st.cor++;st.sCor++}
+    const fb=document.getElementById('mc-fb');fb.classList.remove('mpt-hidden');
+    fb.style.background=ok?'#eaf3de':'#fcebeb';fb.style.color=ok?'#27500a':'#791f1f';
+    fb.innerHTML=`<strong>${ok?'Richtig!':'Leider falsch.'}</strong> ${q.ex}`;
+    document.getElementById('mc-next').classList.remove('mpt-hidden')
+  },
   next(){st.qi++;if(st.qi>=st.qs.length){A.showRes();return}A.renderQ()},
-  showRes(){const pct=st.sTot>0?Math.round(st.sCor/st.sTot*100):0;document.getElementById('res-tot').textContent=st.sTot;document.getElementById('res-cor').textContent=st.sCor;document.getElementById('res-pct').textContent=pct+'%';document.getElementById('res-msg').textContent=pct>=80?'Hervorragend – du bist gut vorbereitet!':pct>=60?'Solide – noch etwas üben und es klappt!':'Nicht aufgeben – noch etwas wiederholen!';const ri=document.getElementById('res-icon');const t=T[st.theme];ri.style.background=t.bg;ri.innerHTML=`<i class="ti ti-trophy" aria-hidden="true" style="font-size:26px;color:${t.mid}"></i>`;colorBtn(document.getElementById('res-retry'),st.theme);show('result')},
+  showRes(){
-  async retry(){st.qi=0;st.sTot=0;st.sCor=0;await A.startMC()},
+    const pct=st.sTot>0?Math.round(st.sCor/st.sTot*100):0;
-  startTalk(){st.history=[];st.turns=0;const th=T[st.theme];pill(document.getElementById('talk-pill'),st.theme);document.getElementById('talk-scenario').textContent=th.scenario;document.getElementById('talk-chat').innerHTML='';document.getElementById('talk-inp').value='';document.getElementById('talk-suggs').innerHTML='';document.getElementById('talk-send-btn').style.background=th.mid;document.getElementById('talk-send-btn').style.color='#fff';show('talk');A.talkCall(th.talkPrompt,true)},
+    document.getElementById('res-tot').textContent=st.sTot;
-  async talkCall(msg,init){if(!init){const b=document.createElement('div');b.className='mpt-bubble-user';b.style.background=T[st.theme].bg;b.style.color=T[st.theme].txt;b.textContent=msg;document.getElementById('talk-chat').appendChild(b)}st.history.push({role:'user',content:msg});const inp=document.getElementById('talk-inp');inp.disabled=true;const ld=document.createElement('div');ld.className='mpt-bubble-ai';ld.innerHTML='<span class="mpt-spinner" style="color:'+T[st.theme].mid+'"></span>';document.getElementById('talk-chat').appendChild(ld);document.getElementById('talk-chat').scrollTop=9999;try{const r=await fetch('https://api.anthropic.com/v1/messages',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'claude-sonnet-4-20250514',max_tokens:1000,system:SYS_TALK,messages:st.history})});const d=await r.json();const reply=d.content.filter(b=>b.type==='text').map(b=>b.text).join('');st.history.push({role:'assistant',content:reply});ld.textContent=reply}catch(e){ld.textContent='Verbindungsfehler – bitte erneut versuchen.'}inp.disabled=false;document.getElementById('talk-chat').scrollTop=9999;if(!init)A.showSuggs();else A.showSuggs()},
+    document.getElementById('res-cor').textContent=st.sCor;
-  send(){const v=document.getElementById('talk-inp').value.trim();if(!v)return;document.getElementById('talk-inp').value='';document.getElementById('talk-suggs').innerHTML='';st.turns++;A.talkCall(v,false)},
+    document.getElementById('res-pct').textContent=pct+'%';
-  showSuggs(){const sd=document.getElementById('talk-suggs');sd.innerHTML='';const suggs=T[st.theme].suggs||[];suggs.forEach(s=>{const b=document.createElement('span');b.className='mpt-sugg';b.textContent=s;b.onclick=()=>{document.getElementById('talk-inp').value=s;A.send()};sd.appendChild(b)})},
+    document.getElementById('res-msg').textContent=pct>=80?'Hervorragend – du bist gut vorbereitet!':pct>=60?'Solide – noch etwas üben und es klappt!':'Nicht aufgeben – noch etwas wiederholen!';
+    const th=THEMES[st.theme];
+    document.getElementById('res-icon').style.background=th.bg;document.getElementById('res-icon').textContent='🏆';
+    show('result')
+  },
+  startTalk(){
+    st.talkStep=0;st.talkData=TALK[st.theme];
+    pill(document.getElementById('talk-pill'),st.theme);
+    show('talk');A.renderTalkStep()
+  },
+  renderTalkStep(){
+    const data=st.talkData;const step=data.steps[st.talkStep];
+    const th=THEMES[st.theme];
+    const container=document.getElementById('talk-steps');
+    container.innerHTML='';
+    const scenarioEl=document.createElement('div');
+    scenarioEl.className='mpt-card';scenarioEl.style.marginBottom='1rem';
+    scenarioEl.innerHTML=`<p class="mpt-phase-label">Szenario</p><p style="font-size:14px;margin:0;line-height:1.55">${data.scenario}</p>`;
+    container.appendChild(scenarioEl);
+    const stepEl=document.createElement('div');
+    stepEl.className='mpt-card';stepEl.style.marginBottom='1rem';
+    stepEl.innerHTML=`
+      <p class="mpt-phase-label">${step.phase}</p>
+      <p style="font-size:15px;font-weight:500;margin:0 0 0.75rem;line-height:1.5">${step.prompt}</p>
+      <p style="font-size:13px;color:#666;margin:0 0 0.5rem">💡 Tipp: ${step.hint}</p>
+      <textarea class="mpt-textarea" id="talk-input" placeholder="Schreibe hier deine Antwort…"></textarea>
+      <div style="display:flex;justify-content:flex-end;margin-top:10px">
+        <button onclick="A.showSolution()" style="padding:9px 20px;border-radius:8px;cursor:pointer;border:none;font-size:14px;font-weight:500;font-family:inherit;color:#fff;background:${th.mid}">Musterlösung anzeigen →</button>
+      </div>
+      <div id="talk-solution" class="mpt-hidden" style="margin-top:1rem">
+        <div style="border-top:0.5px solid rgba(0,0,0,0.1);padding-top:1rem;margin-bottom:0.75rem">
+          <p class="mpt-phase-label">Musterlösung – Hast du das erwähnt?</p>
+          ${step.solution.map((s,i)=>`
+            <div class="mpt-check-item">
+              <div class="mpt-check-box" id="cb-${i}" onclick="A.toggleCheck(${i})" title="Abhaken wenn erwähnt">✓</div>
+              <span>${s}</span>
+            </div>`).join('')}
+        </div>
+        <div style="display:flex;justify-content:flex-end">
+          ${st.talkStep<data.steps.length-1
+            ?`<button onclick="A.nextTalkStep()" style="padding:9px 20px;border-radius:8px;cursor:pointer;border:none;font-size:14px;font-weight:500;font-family:inherit;color:#fff;background:${th.mid}">Nächste Frage →</button>`
+            :`<button onclick="A.toMode()" style="padding:9px 20px;border-radius:8px;cursor:pointer;border:none;font-size:14px;font-weight:500;font-family:inherit;color:#fff;background:${th.mid}">Abgeschlossen ✓</button>`
+          }
+        </div>
+      </div>`;
+    container.appendChild(stepEl);
+    const prog=document.createElement('div');
+    prog.innerHTML=`<div style="display:flex;gap:6px;justify-content:center;margin-top:0.5rem">${data.steps.map((_,i)=>`<div style="width:8px;height:8px;border-radius:50%;background:${i<=st.talkStep?th.mid:'rgba(0,0,0,0.15)'}"></div>`).join('')}</div>`;
+    container.appendChild(prog);
+    const checkboxes=container.querySelectorAll('.mpt-check-box');
+    checkboxes.forEach(cb=>{cb.style.color='transparent'});
+  },
+  toggleCheck(i){
+    const cb=document.getElementById('cb-'+i);
+    if(cb.classList.contains('checked')){cb.classList.remove('checked');cb.style.color='transparent'}
+    else{cb.classList.add('checked');cb.style.color='#27500a'}
+  },
+  showSolution(){
+    document.getElementById('talk-solution').classList.remove('mpt-hidden');
+    document.getElementById('talk-solution').scrollIntoView({behavior:'smooth',block:'nearest'})
+  },
+  nextTalkStep(){st.talkStep++;A.renderTalkStep()}
 };
 A.home();
 </script>
+        <div style="text-align: right; margin-top: 16px; font-size: 0.75rem; color: #999;">
+  Made with <a href="https://claude.ai" target="_blank" style="color: #4CAF50; text-decoration: none;">claude.ai</a>
+  by <a href="https://www.ericweber.de" target="_blank" style="color: #4CAF50; text-decoration: none;">Eric Weber</a>
+</div>
 </div>
 </html>