From 360f6bb872bf686c8bc2fbe1bdb60f55aa1d1e04 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 23 Mar 2026 23:08:01 +0100
Subject: [PATCH] Tutorial: Timeline Spotlight-Fix + Karten-Marker pulsieren

Schritt 21: Spotlight+Bubble werden 300ms nach GridStack-Update neu
positioniert. Kein falscher Rahmen mehr auf der Karte.

Schritt 23: Alle Marker pulsieren kurz (scale 1.8x) bevor der Cursor
sie besucht, damit Nutzer sieht was anklickbar ist.
---
 src/static/js/tutorial.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index 566b2a7..3239f90 100644
--- a/src/static/js/tutorial.js
+++ b/src/static/js/tutorial.js
@@ -927,8 +927,16 @@ const Tutorial = {
                             LayoutManager._grid.compact();
                         }
                     }
-                    // Kachel in den sichtbaren Bereich scrollen
-                    if (tile) tile.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    // Nach GridStack-Update: Spotlight + Bubble neu positionieren
+                    Tutorial._stepTimeout(function() {
+                        if (tile) tile.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        var step = Tutorial._steps[Tutorial._currentStep];
+                        if (step && step.id === 'timeline') {
+                            Tutorial._spotlightElement(step.target);
+                            Tutorial._positionBubble(step);
+                            Tutorial._els.bubble.classList.add('visible');
+                        }
+                    }, 300);
                     Tutorial._runDemo(Tutorial._simulateTimeline);
                 },
                 onExit: function() {
@@ -1838,6 +1846,23 @@ const Tutorial = {
         if (!mapEl) { this._demoRunning = false; this._enableNavAfterDemo(); return; }
         var mapRect = mapEl.getBoundingClientRect();
 
+        // Marker kurz pulsieren lassen damit Nutzer sie sieht
+        this._demoMapMarkers.forEach(function(m) {
+            var icon = m._icon;
+            if (icon) {
+                icon.style.transition = 'transform 0.3s ease';
+                icon.style.transform = 'scale(1.8)';
+            }
+        });
+        await this._wait(600);
+        this._demoMapMarkers.forEach(function(m) {
+            var icon = m._icon;
+            if (icon) {
+                icon.style.transform = 'scale(1)';
+            }
+        });
+        await this._wait(400);
+
         // Alle 3 Marker nacheinander besuchen
         var names = ['Burchardkai Terminal (Hauptereignisort)', 'Hamburg Innenstadt (Erwähnt)', 'Elbe / Hafengebiet (Kontext)'];
         var prevX, prevY;