Tutorial: Pfeil zeigt dynamisch auf Ziel-Element

CSS: --arrow-top Variable fuer left/right Pfeile
JS: Berechnet Pfeil-Position relativ zum bubbleTarget nach Clamping
Pfeil bleibt immer zwischen 18px vom Rand der Bubble

src/static/css/style.css

@@ -5050,13 +5050,13 @@ a.map-popup-article:hover {
 }
 .tutorial-pos-right::before {
     left: -7px;
-    top: 30px;
+    top: var(--arrow-top, 30px);
     border-top: none;
     border-right: none;
 }
 .tutorial-pos-left::before {
     right: -7px;
-    top: 30px;
+    top: var(--arrow-top, 30px);
     border-bottom: none;
     border-left: none;
 }

src/static/js/tutorial.js

@@ -1518,6 +1518,18 @@ const Tutorial = {
                 bubble.style.top = (currentTop + (8 - bRect.top)) + 'px';
                 bubble.style.transform = bubble.style.transform.replace('translateY(-100%)', '');
             }
+            // Pfeil dynamisch auf Ziel-Element ausrichten
+            var arrowTarget = step.bubbleTarget || step.target;
+            if (arrowTarget && (step.position === 'left' || step.position === 'right' || bubble.className.indexOf('pos-left') !== -1 || bubble.className.indexOf('pos-right') !== -1)) {
+                var targetEl = document.querySelector(arrowTarget);
+                if (targetEl) {
+                    bRect = bubble.getBoundingClientRect();
+                    var tRect = targetEl.getBoundingClientRect();
+                    var arrowY = (tRect.top + tRect.height / 2) - bRect.top;
+                    arrowY = Math.max(18, Math.min(arrowY, bRect.height - 18));
+                    bubble.style.setProperty('--arrow-top', arrowY + 'px');
+                }
+            }
         });
     },