From 47b0ec306fde932fcc1832650a3396ec9b6a107b Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 16 Mar 2026 16:53:46 +0100
Subject: [PATCH] Tutorial Karte: Z-Index-Fix, Chat-Button verstecken,
 Tile-Rendering

- Fullscreen-Overlay z-index auf 9998 (ueber Chat-Button 9999 -> Chat
  wird mit display:none versteckt waehrend Karten-Step)
- Map-Container bekommt explizite flex:1 + min-height:400px damit
  Leaflet die Container-Groesse korrekt erkennt
- Mehrere invalidateSize-Aufrufe (100/300/600ms) vor dem Zoom
- flyTo erst nach 1200ms (Tiles muessen erst laden bei Zoom 5)
- Bubble target auf .map-fullscreen-header statt ganzen Overlay
- fsContainer Styles werden beim Schliessen zurueckgesetzt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/static/dashboard.html |  2 +-
 src/static/js/tutorial.js | 43 +++++++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index e0b1c85..93bf427 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -764,7 +764,7 @@
     <script src="/static/js/api_network.js?v=20260316a"></script>
     <script src="/static/js/network-graph.js?v=20260316a"></script>
     <script src="/static/js/app_network.js?v=20260316a"></script>
-    <script src="/static/js/tutorial.js?v=20260316o"></script>
+    <script src="/static/js/tutorial.js?v=20260316p"></script>
     <script src="/static/js/chat.js?v=20260316f"></script>
     <script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
 
diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index 7ee612a..f0f0da5 100644
--- a/src/static/js/tutorial.js
+++ b/src/static/js/tutorial.js
@@ -933,7 +933,7 @@ const Tutorial = {
             // 17 - Karte (Vollbild)
             {
                 id: 'karte',
-                target: '#map-fullscreen-overlay',
+                target: '.map-fullscreen-header',
                 title: 'Geografische Verteilung',
                 text: 'Die Karte zeigt per Geoparsing automatisch erkannte Orte aus den Quellen.<br><br>'
                     + '<strong style="color:#EF4444;">&#9679;</strong> <strong>Hauptereignisort</strong> - Zentraler Ort des Geschehens<br>'
@@ -946,10 +946,16 @@ const Tutorial = {
                 position: 'left',
                 disableNav: true,
                 onEnter: function() {
+                    // Chat-Button verstecken im Vollbild
+                    var chatBtn = document.getElementById('chat-toggle-btn');
+                    if (chatBtn) chatBtn.style.display = 'none';
                     Tutorial._openDemoMapFullscreen();
                 },
                 onExit: function() {
                     Tutorial._closeDemoMapFullscreen();
+                    // Chat-Button wieder anzeigen
+                    var chatBtn = document.getElementById('chat-toggle-btn');
+                    if (chatBtn) chatBtn.style.display = '';
                     Tutorial._clearSubHighlights();
                 },
             },
@@ -1487,7 +1493,7 @@ const Tutorial = {
 
         // Overlay anzeigen
         overlay.classList.add('active');
-        overlay.style.zIndex = '9002';
+        overlay.style.zIndex = '9998';
         if (fsStats) fsStats.textContent = '3 Orte / 9 Artikel';
 
         // Alte Demo-Map entfernen
@@ -1495,9 +1501,12 @@ const Tutorial = {
 
         // Map im Fullscreen-Container
         fsContainer.innerHTML = '';
+        // Explizite Hoehe setzen damit Leaflet korrekt rendert
+        fsContainer.style.flex = '1';
+        fsContainer.style.minHeight = '0';
         var mapDiv = document.createElement('div');
         mapDiv.id = 'tutorial-fs-map';
-        mapDiv.style.cssText = 'width:100%;height:100%;';
+        mapDiv.style.cssText = 'width:100%;height:100%;min-height:400px;';
         fsContainer.appendChild(mapDiv);
 
         var isDark = !document.documentElement.getAttribute('data-theme') || document.documentElement.getAttribute('data-theme') !== 'light';
@@ -1565,17 +1574,21 @@ const Tutorial = {
 
         // Resize + animierter Zoom auf Hamburg
         var map = this._demoMap;
+        // Mehrere invalidateSize-Aufrufe damit Leaflet die Container-Groesse erkennt
+        [100, 300, 600].forEach(function(delay) {
+            setTimeout(function() { if (map) map.invalidateSize(); }, delay);
+        });
+        // Warten bis Tiles geladen, dann sanft auf Hamburg zoomen
         setTimeout(function() {
-            if (map) map.invalidateSize();
-            // Sanft auf Hamburg zoomen
+            if (map) {
+                map.invalidateSize();
+                map.flyTo([53.54, 9.97], 13, { duration: 2.5 });
+            }
+            // Nach Zoom: Demo starten
             setTimeout(function() {
-                if (map) map.flyTo([53.54, 9.97], 13, { duration: 2.5 });
-                // Nach Zoom: Demo starten
-                setTimeout(function() {
-                    self._simulateMapDemo();
-                }, 3000);
-            }, 500);
-        }, 200);
+                self._simulateMapDemo();
+            }, 3200);
+        }, 1200);
     },
 
     _closeDemoMapFullscreen() {
@@ -1585,7 +1598,11 @@ const Tutorial = {
             overlay.style.zIndex = '';
         }
         var fsContainer = document.getElementById('map-fullscreen-container');
-        if (fsContainer) fsContainer.innerHTML = '';
+        if (fsContainer) {
+            fsContainer.innerHTML = '';
+            fsContainer.style.flex = '';
+            fsContainer.style.minHeight = '';
+        }
         this._destroyDemoMap();
     },