fix(tour): Anker repariert + robuste Hervorhebung (v1.5.8)

Nach dem Topbar-Umbau zeigte die Tour auf nicht (mehr) vorhandene bzw.
grössenlose Elemente:
- data-tour="toolbar" lag auf einem display:contents-Div (0×0) → jetzt auf der
  echten Werkzeug-<aside>
- data-tour="sidebar" wurde als Prop an RightSidebar gegeben, aber nie ins DOM
  durchgereicht → jetzt direkt auf der Sidebar-<aside>
- updateHighlight ignoriert fehlende/unsichtbare/off-canvas Ziele (z.B. Sidebar
  auf dem Handy) und zeigt den Tooltip zentriert statt einer kaputten Box
- Tooltip responsiv (max-w statt fix 340px) → kein Überlauf auf schmalen Handys

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {

src/app/app/page.tsx

@@ -1015,7 +1015,7 @@ export default function AppPage() {
 
         <div className="flex-1 flex overflow-hidden">
           {/* Map view — always mounted, hidden via CSS to preserve state */}
-          <div data-tour="toolbar" className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
+          <div className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
             <LeftToolbar
               drawMode={drawMode || 'select'}
               onDrawModeChange={handleDrawModeChange}
@@ -1085,7 +1085,6 @@ export default function AppPage() {
 
           {/* Right sidebar — always visible, contains Karte/Journal tabs */}
           <RightSidebar
-            data-tour="sidebar"
             onSymbolDrop={handleSymbolDrop}
             onSymbolSelect={handleSymbolSelect}
             canEdit={canEdit}

src/components/layout/left-toolbar.tsx

@@ -75,7 +75,7 @@ export function LeftToolbar({
 }: LeftToolbarProps) {
   return (
     <TooltipProvider delayDuration={300}>
-      <aside className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1.5 lg:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
+      <aside data-tour="toolbar" className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1.5 lg:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
         {/* Draw Tools — Touch-Ziele mind. 44px auf Mobil/Tablet */}
         <div className="flex flex-col gap-0.5">
           {drawTools.map((tool) => (

src/components/layout/right-sidebar.tsx

@@ -261,7 +261,7 @@ export function RightSidebar({ onSymbolDrop, onSymbolSelect, canEdit, isOpen, on
         </aside>
       )}
 
-      <aside className={`
+      <aside data-tour="sidebar" className={`
         w-72 md:w-48 lg:w-56 xl:w-72 border-l border-border bg-card flex flex-col shrink-0
         md:relative md:translate-x-0 md:z-auto
         fixed right-0 top-0 bottom-0 z-50 transition-transform duration-200

src/components/onboarding/onboarding-tour.tsx

@@ -137,10 +137,20 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
     if (step.targetSelector) {
       const el = document.querySelector(step.targetSelector)
       if (el) {
-        setHighlightRect(el.getBoundingClientRect())
+        const rect = el.getBoundingClientRect()
+        // Nur hervorheben, wenn das Element echte Grösse hat UND im Viewport sichtbar
+        // ist. Fängt display:contents (0×0), ausgeblendete oder off-canvas-Elemente
+        // (z.B. Sidebar auf dem Handy) ab → Tooltip zentriert statt kaputte Box.
+        const visible =
+          rect.width > 4 && rect.height > 4 &&
+          rect.bottom > 0 && rect.right > 0 &&
+          rect.top < window.innerHeight && rect.left < window.innerWidth
+        if (visible) {
+          setHighlightRect(rect)
           return
         }
       }
+    }
     setHighlightRect(null)
   }, [currentStep])
 
@@ -244,7 +254,7 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
 
       {/* Tooltip card */}
       <div
-        className="z-[100000] w-[340px] bg-card border border-border rounded-xl shadow-2xl p-5"
+        className="z-[100000] w-[340px] max-w-[calc(100vw-32px)] bg-card border border-border rounded-xl shadow-2xl p-5"
         style={getTooltipStyle()}
       >
         <div className="flex items-start justify-between mb-2">