From 7b2ae94474e8f988792a1a45b6f7954e84bce9c0 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:48:01 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix(onboarding):=20use=20correct?=
 =?UTF-8?q?=20elevation=20layer=20colors=20for=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/lib/components/onboarding/OnboardingWizard.svelte | 6 +++---
 .../lib/components/onboarding/steps/WelcomeStep.svelte    | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
index 4e6bf4b81..0c2dfe7fb 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
@@ -54,10 +54,10 @@
 </script>
 
 <!-- Backdrop -->
-<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
-	<!-- Modal Container -->
+<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+	<!-- Modal Container - uses surface-elevated-2 for proper elevation hierarchy -->
 	<div
-		class="bg-background rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+		class="bg-surface-elevated-2 rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200 border border-border"
 	>
 		<!-- Header with progress -->
 		<header class="border-b px-5 py-4 flex-shrink-0">
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
index fd3f71120..d44f26615 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
@@ -18,9 +18,9 @@
 		- alles an einem Ort.
 	</p>
 
-	<!-- Feature highlights -->
+	<!-- Feature highlights - using surface-elevated-1 (one level below the modal) -->
 	<div class="space-y-2 text-left">
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
 			>
@@ -44,7 +44,7 @@
 			</div>
 		</div>
 
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
 			>
@@ -68,7 +68,7 @@
 			</div>
 		</div>
 
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
 			>