From 1159fe04a041f87e7b5973968ff14801edf43020 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 23 Mar 2026 22:26:56 +0100
Subject: [PATCH] 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  |  4 ++--
 src/static/js/tutorial.js | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index c0b8469..e76fc7f 100644
--- a/src/static/css/style.css
+++ b/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;
 }
diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index 9673c8b..bc64f90 100644
--- a/src/static/js/tutorial.js
+++ b/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');
+                }
+            }
         });
     },