Interaktives Tutorial-System mit 20 Schritten, Spotlight, Sprechblasen und virtuellen Maus-Demos

Neues Tutorial-System fuer gefuehrten Rundgang durch den Monitor:
- tutorial.js: Tutorial-Engine mit Spotlight-Abdunkelung, Bubble-Navigation,
  virtuellem Cursor fuer Drag/Resize-Demos, Keyboard-Support (Escape/Pfeiltasten)
- 20 Steps: Welcome, Sidebar, Lagen, Kacheln, Layout, Theme, Export, Chat, etc.
- Automatisches Ueberspringen von Steps wenn keine Lage geoeffnet
- Modal-Handling fuer Neue-Lage und Quellenverwaltung Steps
- Chat-Integration: Tutorial-Hinweis beim ersten Oeffnen, Keywords (rundgang/tutorial/tour/fuehrung)
- localStorage-Persistenz (osint_tutorial_seen)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/static/js/chat.js

@@ -30,7 +30,7 @@ const Chat = {
             this.send();
         });
 
-        // Enter sendet, Shift+Enter fuer Zeilenumbruch
+        // Enter sendet, Shift+Enter für Zeilenumbruch
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -63,7 +63,11 @@ const Chat = {
 
         if (!this._hasGreeted) {
             this._hasGreeted = true;
-            this.addMessage('assistant', 'Hallo! Ich bin der AegisSight Assistent und helfe dir bei der Bedienung des Monitors.\n\nFrag mich zum Beispiel:\n\n"Wie erstelle ich eine neue Lage?"\n"Was bedeuten die Faktencheck-Status?"\n"Wie funktioniert der automatische Refresh?"\n"Wie nutze ich die Kartenansicht?"\n"Wie exportiere ich einen Lagebericht?"\n\nFuer alle weiteren Anliegen erreichst du den Support unter support@aegis-sight.de.');
+            this.addMessage('assistant', 'Hallo! Ich bin der AegisSight Assistent und helfe dir bei der Bedienung des Monitors.\n\nFrag mich zum Beispiel:\n\n"Wie erstelle ich eine neue Lage?"\n"Was bedeuten die Faktencheck-Status?"\n"Wie funktioniert der automatische Refresh?"\n"Wie nutze ich die Kartenansicht?"\n"Wie exportiere ich einen Lagebericht?"\n\nFür alle weiteren Anliegen erreichst du den Support unter support@aegis-sight.de.');
+            // Tutorial-Hinweis beim ersten Oeffnen
+            if (typeof Tutorial !== "undefined" && !Tutorial._hasSeen()) {
+                this._showTutorialHint();
+            }
         }
 
         // Focus auf Input
@@ -129,6 +133,16 @@ const Chat = {
         this._showTyping();
         this._isLoading = true;
 
+        // Tutorial-Keywords abfangen
+        var lowerText = text.toLowerCase();
+        if (lowerText === 'rundgang' || lowerText === 'tutorial' || lowerText === 'tour' || lowerText === 'f\u00fchrung') {
+            this._hideTyping();
+            this._isLoading = false;
+            this.close();
+            if (typeof Tutorial !== 'undefined') Tutorial.start();
+            return;
+        }
+
         try {
             const body = {
                 message: text,
@@ -274,4 +288,17 @@ const Chat = {
         }
     },
 
+    _showTutorialHint() {
+        var container = document.getElementById('chat-messages');
+        if (!container) return;
+        var hint = document.createElement('div');
+        hint.className = 'chat-tutorial-hint';
+        hint.innerHTML = '<strong>Tipp:</strong> Kennen Sie schon den interaktiven Rundgang? Er zeigt Ihnen Schritt für Schritt alle Funktionen des Monitors. Klicken Sie hier, um den Rundgang zu starten.';
+        hint.addEventListener('click', function() {
+            Chat.close();
+            if (typeof Tutorial !== 'undefined') Tutorial.start();
+        });
+        container.appendChild(hint);
+    },
+
 };