From 181cbe4895c9f0557a03adb0c1ce85f74af9bd8e Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Fri, 29 May 2026 18:03:43 +0200
Subject: [PATCH] fix: Kontrast der Onboarding-Tour im Dark Mode verbessern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backdrop mit Aussparung für den Spotlight-Bereich, damit hervorgehobene UI-Elemente
in voller Helligkeit sichtbar bleiben; Tooltip und Rahmen kontrastreicher gestaltet.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                       | 33 +++++++++++++++++-------
 client/src/components/AppTourOverlay.tsx | 33 +++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 9e34192..c622f07 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -2572,28 +2572,41 @@ html.theme-cupertino .events-scroll-container {
 .app-tour-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(2, 6, 23, 0.72);
+  background: rgba(2, 6, 23, 0.62);
   pointer-events: auto;
 }
 
+.app-tour-backdrop--cutout {
+  background: rgba(2, 6, 23, 0.5);
+}
+
 .app-tour-spotlight {
   position: fixed;
   border-radius: 12px;
-  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.72);
-  border: 2px solid rgba(56, 189, 248, 0.85);
+  border: 2px solid #38bdf8;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.22),
+    0 0 32px rgba(56, 189, 248, 0.5),
+    0 12px 40px rgba(0, 0, 0, 0.35);
   pointer-events: none;
   z-index: 10001;
 }
 
+body.app-tour-active .app-tour-target-active {
+  position: relative;
+  z-index: 10001 !important;
+  isolation: isolate;
+}
+
 .app-tour-tooltip {
   position: fixed;
   z-index: 10002;
   width: min(420px, calc(100vw - 32px));
   padding: 20px 20px 16px;
   border-radius: 16px;
-  background: rgba(15, 23, 42, 0.96);
-  border: 1px solid rgba(148, 163, 184, 0.25);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  background: #1e293b;
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
   pointer-events: auto;
 }
 
@@ -2627,7 +2640,7 @@ html.theme-cupertino .events-scroll-container {
 .app-tour-progress {
   margin: 0 0 8px;
   font-size: 12px;
-  color: #64748b;
+  color: #94a3b8;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -2635,14 +2648,14 @@ html.theme-cupertino .events-scroll-container {
 .app-tour-title {
   margin: 0 0 8px;
   font-size: 20px;
-  color: #f8fafc;
+  color: #ffffff;
 }
 
 .app-tour-body {
   margin: 0 0 16px;
   font-size: 14px;
   line-height: 1.55;
-  color: #cbd5e1;
+  color: #e2e8f0;
 }
 
 .app-tour-actions {
@@ -2655,7 +2668,7 @@ html.theme-cupertino .events-scroll-container {
 .app-tour-link {
   border: none;
   background: transparent;
-  color: #94a3b8;
+  color: #cbd5e1;
   font-size: 13px;
   cursor: pointer;
   padding: 0;
diff --git a/client/src/components/AppTourOverlay.tsx b/client/src/components/AppTourOverlay.tsx
index 380e1d7..2d3b32a 100644
--- a/client/src/components/AppTourOverlay.tsx
+++ b/client/src/components/AppTourOverlay.tsx
@@ -15,6 +15,12 @@ interface SpotlightRect {
   height: number
 }
 
+function buildCutoutClipPath(rect: SpotlightRect): string {
+  const right = rect.left + rect.width
+  const bottom = rect.top + rect.height
+  return `polygon(evenodd, 0 0, 100vw 0, 100vw 100vh, 0 100vh, 0 0, ${rect.left}px ${rect.top}px, ${right}px ${rect.top}px, ${right}px ${bottom}px, ${rect.left}px ${bottom}px, ${rect.left}px ${rect.top}px)`
+}
+
 export default function AppTourOverlay() {
   const { t } = useTranslation()
   const {
@@ -68,6 +74,23 @@ export default function AppTourOverlay() {
     }
   }, [currentStepId, isActive])
 
+  useEffect(() => {
+    if (!isActive) return
+    document.body.classList.add('app-tour-active')
+    return () => document.body.classList.remove('app-tour-active')
+  }, [isActive])
+
+  useEffect(() => {
+    if (!isActive || !currentStepId || isCenteredTourStep(currentStepId)) return
+
+    const selector = getTourTargetSelector(currentStepId)
+    if (!selector) return
+
+    const el = document.querySelector(selector)
+    el?.classList.add('app-tour-target-active')
+    return () => el?.classList.remove('app-tour-target-active')
+  }, [currentStepId, isActive])
+
   useEffect(() => {
     if (!isActive) return
     const onKeyDown = (event: KeyboardEvent) => {
@@ -92,9 +115,17 @@ export default function AppTourOverlay() {
         }
       : { top: '20%', left: '50%', transform: 'translateX(-50%)', maxWidth: '420px' }
 
+  const backdropStyle = spotlight && !centered
+    ? { clipPath: buildCutoutClipPath(spotlight) }
+    : undefined
+
   return (
     <div className="app-tour-root" role="dialog" aria-modal="true" aria-label={title}>
-      <div className="app-tour-backdrop" onClick={skipTour} />
+      <div
+        className={`app-tour-backdrop${spotlight && !centered ? ' app-tour-backdrop--cutout' : ''}`}
+        style={backdropStyle}
+        onClick={skipTour}
+      />
 
       {!centered && spotlight && (
         <div