From c8279bc69beb35940883aad150a0da8864767cd6 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 23 Mar 2026 23:34:25 +0100
Subject: [PATCH] =?UTF-8?q?Tutorial:=20Schritt=2021=20Spotlight=20verz?=
 =?UTF-8?q?=C3=B6gert=20+=20Schritt=2023=20Demo=20entfernt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Schritt 21: deferSpotlight verhindert falschen initialen Rahmen
- Schritt 23: Kein disableNav/Demo mehr, normaler Step mit Weiter-Button
---
 src/static/js/tutorial.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index 1ca8837..b16f2ab 100644
--- a/src/static/js/tutorial.js
+++ b/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 {