diff --git a/frontend/src/app.css b/frontend/src/app.css
index da8a085..d90dd25 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -11,6 +11,7 @@
 	--color-surface: #f5f4ee;
 	--color-subtle: #edecea;
 	--color-border: #d8d7d0;
+	--color-border-hover: #c0bfb8;
 	--color-text: #1c1c18;
 	--color-text-muted: #6b6a63;
 
diff --git a/frontend/src/lib/components/SettingsCard.svelte b/frontend/src/lib/components/SettingsCard.svelte
index f16a95b..78dc31d 100644
--- a/frontend/src/lib/components/SettingsCard.svelte
+++ b/frontend/src/lib/components/SettingsCard.svelte
@@ -11,7 +11,7 @@
 
 <a
 	{href}
-	class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
+	class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[var(--color-border-hover)] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
 >
 	<span class="font-[var(--font-sans)] text-[16px] font-medium text-[var(--color-text)]">
 		{title}
diff --git a/frontend/src/routes/(app)/settings/+page.svelte b/frontend/src/routes/(app)/settings/+page.svelte
index e795674..ed4c2e3 100644
--- a/frontend/src/routes/(app)/settings/+page.svelte
+++ b/frontend/src/routes/(app)/settings/+page.svelte
@@ -19,7 +19,7 @@
 	<!-- Card 1: Vorräte (inline, conditional content) -->
 	<a
 		href="/household/staples"
-		class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
+		class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[var(--color-border-hover)] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
 	>
 		<span class="font-[var(--font-sans)] text-[16px] font-medium">Vorräte</span>
 
@@ -48,7 +48,7 @@
 	<!-- Card 2: Haushalt (inline, needs data-testid on member count) -->
 	<a
 		href="/members"
-		class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
+		class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[var(--color-border-hover)] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
 	>
 		<span class="font-[var(--font-sans)] text-[16px] font-medium">Haushalt</span>