feat(staples): add staples page with onboarding and settings layouts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/household/staples/+page.svelte

@@ -2,6 +2,44 @@
 	<title>Vorräte einrichten — Mealplan</title>
 </svelte:head>
 
-<div class="flex min-h-screen items-center justify-center bg-[var(--color-page)]">
-	<p class="text-[var(--color-text-muted)]">A3 — Vorräte einrichten (coming soon)</p>
-</div>
+<script lang="ts">
+	import ProgressSidebar from '$lib/components/ProgressSidebar.svelte';
+	import StaplesManager from '$lib/onboarding/StaplesManager.svelte';
+
+	type Category = { id: string; name: string; ingredients: { id: string; name: string; isStaple: boolean }[] };
+
+	let { data, ctx }: { data: { categories: Category[] }; ctx?: string } = $props();
+
+	const isOnboarding = $derived(ctx === 'onboarding');
+</script>
+
+{#if isOnboarding}
+	<div class="flex min-h-screen bg-[var(--color-page)]">
+		<!-- Desktop sidebar -->
+		<aside class="hidden md:flex w-[300px] flex-shrink-0 flex-col bg-[var(--color-surface)] border-r border-[var(--color-border)] p-[40px_28px]">
+			<ProgressSidebar currentStep={2} />
+		</aside>
+
+		<!-- Main area -->
+		<main class="flex flex-1 flex-col">
+			<!-- Mobile step indicator -->
+			<p class="md:hidden px-6 pt-6 text-sm text-[var(--color-text-muted)]">Schritt 2 von 3</p>
+
+			<!-- Content -->
+			<div class="flex-1 p-6">
+				<StaplesManager categories={data.categories} context="onboarding" />
+			</div>
+
+			<!-- Footer navigation -->
+			<div class="flex justify-between p-6">
+				<a href="/planner">Überspringen</a>
+				<a href="/household/invite">Weiter</a>
+			</div>
+		</main>
+	</div>
+{:else}
+	<div class="flex min-h-screen flex-col bg-[var(--color-page)]">
+		<h1>Vorräte</h1>
+		<StaplesManager categories={data.categories} context="settings" />
+	</div>
+{/if}