Tutorial: Schritt 21 Spotlight verzögert + Schritt 23 Demo entfernt

- Schritt 21: deferSpotlight verhindert falschen initialen Rahmen
- Schritt 23: Kein disableNav/Demo mehr, normaler Step mit Weiter-Button

src/static/js/tutorial.js

@@ -908,6 +908,7 @@ const Tutorial = {
             {
                 id: 'timeline',
                 target: '[gs-id="timeline"]',
+                deferSpotlight: true,
                 title: 'Ereignis-Timeline',
                 text: 'Die Timeline zeigt den chronologischen Verlauf aller Ereignisse. '
                     + 'Klicken Sie auf einen Zeitpunkt, um die zugeh\u00f6rige Meldung anzuzeigen.<br><br>'
@@ -986,9 +987,9 @@ const Tutorial = {
                     + '<strong style="color:#EF4444;">&#9679; Hauptereignisort</strong> - Wo das Ereignis stattfindet<br>'
                     + '<strong style="color:#F59E0B;">&#9679; Erw\u00e4hnt</strong> - In Meldungen genannte Orte<br>'
                     + '<strong style="color:#3B82F6;">&#9679; Kontext</strong> - Orte im weiteren Zusammenhang<br><br>'
+                    + 'Die <strong>Legende</strong> unten rechts erkl\u00e4rt die Farbkategorien. '
                     + 'Klicken Sie auf einen Marker f\u00fcr Details und verkn\u00fcpfte Artikel.',
                 position: 'left',
-                disableNav: true,
                 onEnter: function() {
                     var chatBtn = document.getElementById('chat-toggle-btn');
                     if (chatBtn) chatBtn.style.display = 'none';
@@ -1397,7 +1398,10 @@ const Tutorial = {
             });
         }
 
-        if (step.target && step.position !== 'center' && !isModalStep) {
+        if (step.deferSpotlight) {
+            // Spotlight wird vom onEnter gesetzt (nach Layout-Aenderung)
+            this._els.spotlight.style.opacity = '0';
+        } else if (step.target && step.position !== 'center' && !isModalStep) {
             await this._scrollToTarget(step.target);
             this._spotlightElement(step.target);
         } else {