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

@@ -45,6 +45,9 @@
 	</div>
 {:else}
 	<div class="flex min-h-screen flex-col bg-[var(--color-page)]">
+		{#if data.ctx === 'settings'}
+			<a href="/settings" class="font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-text)] mb-2 inline-block">← Einstellungen</a>
+		{/if}
 		<h1 class="mb-[8px] font-[var(--font-display)] text-[18px] font-medium md:text-[28px] text-[var(--color-text)]">Vorräte</h1>
 		<StaplesManager categories={data.categories} context="settings" />
 	</div>

frontend/src/routes/household/staples/page.test.ts

@@ -79,4 +79,31 @@ describe('staples page — settings context (no ctx)', () => {
 		render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
 		expect(screen.getByRole('heading', { name: /vorräte/i })).toBeInTheDocument();
 	});
+
+	it('does not render back-link when ctx is null', () => {
+		render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
+		expect(screen.queryByRole('link', { name: /einstellungen/i })).not.toBeInTheDocument();
+	});
+});
+
+describe('staples page — ctx=settings (D3)', () => {
+	beforeEach(() => {
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true }));
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	it('renders back-link "← Einstellungen" when ctx=settings', () => {
+		render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
+		const backLink = screen.getByRole('link', { name: /← einstellungen/i });
+		expect(backLink).toBeInTheDocument();
+	});
+
+	it('back-link points to /settings', () => {
+		render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
+		const backLink = screen.getByRole('link', { name: /← einstellungen/i });
+		expect(backLink).toHaveAttribute('href', '/settings');
+	});
 });