feat(planner): overhaul desktop layout — flip tiles, no right panel

Replaces 3-panel layout with 2-panel (sidebar + full-width grid): - Remove persistent right panel and toolbar + Gericht hinzufügen button - grid-cols-7 tiles use DesktopDayTile (CSS 3D card flip) - RecipePickerDrawer slides in on tile CTA / Gericht tauschen - Page-owned activeSlotId + drawerOpen/drawerSlotId state - Single Escape handler: drawer > flip priority - Extend server load to forward recipe tags from /v1/recipes API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(planner): add RecipePickerDrawer slide-in drawer
2026-04-10 11:04:26 +02:00 · 2026-04-10 10:52:56 +02:00 · 2026-04-10 10:51:21 +02:00 · 2026-04-10 10:47:19 +02:00 · 2026-04-10 10:45:42 +02:00 · 2026-04-10 10:44:46 +02:00
13 changed files with 1032 additions and 214 deletions
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -86,4 +86,27 @@
 	--btn-font-size: 13px;
 	--btn-font-weight: 500;
 	--btn-letter-spacing: 0.04em;
+
+	/* ── Planner flip-tile semantic tokens ──────────────────────────── */
+	--color-ring-today: var(--yellow-text);
+	--color-ring-selected: var(--green-dark);
+	--opacity-dimmed: 0.38;
+
+	/* ── Protein gradient tokens ────────────────────────────────────── */
+	--gradient-protein-haehnchen: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+	--gradient-protein-rind: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+	--gradient-protein-fisch: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+	--gradient-protein-tofu: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
+	--gradient-protein-veg: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
+	--gradient-protein-schwein: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
+	--gradient-protein-lamm: linear-gradient(135deg, #92400e 0%, #78350f 100%);
+	--gradient-protein-ei: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+	--gradient-protein-huelsenfruechte: linear-gradient(135deg, #a16207 0%, #854d0e 100%);
+
+	/* ── Cuisine gradient tokens ────────────────────────────────────── */
+	--gradient-cuisine-italienisch: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+	--gradient-cuisine-asiatisch: linear-gradient(135deg, #166534 0%, #14532d 100%);
+	--gradient-cuisine-indisch: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);
+	--gradient-cuisine-mexikanisch: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
+	--gradient-cuisine-mediterran: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
 }
--- a/frontend/src/lib/design-system/tokens.test.ts
+++ b/frontend/src/lib/design-system/tokens.test.ts
@@ -47,7 +47,27 @@ const requiredTokens = [
 	// Shadows
 	'--shadow-card',
 	'--shadow-raised',
-	'--shadow-overlay'
+	'--shadow-overlay',
+	// Planner flip-tile semantic tokens
+	'--color-ring-today',
+	'--color-ring-selected',
+	'--opacity-dimmed',
+	// Protein gradient tokens
+	'--gradient-protein-haehnchen',
+	'--gradient-protein-rind',
+	'--gradient-protein-fisch',
+	'--gradient-protein-tofu',
+	'--gradient-protein-veg',
+	'--gradient-protein-schwein',
+	'--gradient-protein-lamm',
+	'--gradient-protein-ei',
+	'--gradient-protein-huelsenfruechte',
+	// Cuisine gradient tokens
+	'--gradient-cuisine-italienisch',
+	'--gradient-cuisine-asiatisch',
+	'--gradient-cuisine-indisch',
+	'--gradient-cuisine-mexikanisch',
+	'--gradient-cuisine-mediterran'
 ];

 describe('design token completeness', () => {
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/frontend/src/lib/planner/DesktopDayTile.svelte
@@ -0,0 +1,203 @@
+<script lang="ts">
+	import EmptyDayTile from './EmptyDayTile.svelte';
+
+	interface TagItem {
+		id?: string;
+		name?: string;
+		tagType?: string;
+	}
+
+	interface SlotRecipe {
+		id?: string;
+		name?: string;
+		effort?: string;
+		cookTimeMin?: number;
+		heroImageUrl?: string | null;
+		tags?: TagItem[];
+	}
+
+	interface Slot {
+		id?: string | null;
+		slotDate?: string;
+		recipe?: SlotRecipe | null;
+	}
+
+	interface Suggestion {
+		recipe: any;
+		scoreDelta: number;
+		hasConflict: boolean;
+	}
+
+	let {
+		slot,
+		isToday,
+		activeSlotId,
+		isPlanner,
+		slotMap,
+		suggestions,
+		topSuggestion,
+		onflip,
+		onclose,
+		onswap,
+		onremove,
+		onaddrecipe
+	}: {
+		slot: Slot;
+		isToday: boolean;
+		activeSlotId: string | null;
+		isPlanner: boolean;
+		slotMap: Record<string, any>;
+		suggestions: Suggestion[];
+		topSuggestion?: Suggestion;
+		onflip?: (slotId: string) => void;
+		onclose?: () => void;
+		onswap?: () => void;
+		onremove?: () => void;
+		onaddrecipe?: () => void;
+	} = $props();
+
+	const slotId = $derived(slot.id ?? '');
+
+	const isFlipped = $derived(activeSlotId === slot.id && !!slot.recipe);
+	const isDimmed = $derived(activeSlotId !== null && activeSlotId !== slot.id && !!slot.recipe);
+
+	function handleFlip() {
+		onflip?.(slotId);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onflip?.(slotId);
+		}
+	}
+
+	const gradientBackground = $derived((() => {
+		if (!slot.recipe) return 'var(--color-surface)';
+		if (slot.recipe.heroImageUrl) return `url(${slot.recipe.heroImageUrl})`;
+		const proteinTag = slot.recipe.tags?.find((t) => t.tagType === 'protein');
+		if (proteinTag?.name) {
+			return `var(--gradient-protein-${proteinTag.name.toLowerCase()})`;
+		}
+		return 'var(--color-surface)';
+	})());
+</script>
+
+{#if slot.recipe}
+	<div
+		data-testid="day-meal-card-{slot.slotDate ?? ''}"
+		role="button"
+		tabindex="0"
+		aria-label={slot.recipe?.name ?? 'Gericht'}
+		aria-expanded={isFlipped}
+		data-today={isToday}
+		data-flipped={isFlipped}
+		data-dimmed={isDimmed}
+		class="scene"
+		onclick={handleFlip}
+		onkeydown={handleKeydown}
+	>
+		<div class="card" class:flipped={isFlipped}>
+			<div
+				class="card-front"
+				style="background: {gradientBackground}; background-size: cover; background-position: center;"
+			>
+				<p style="font-family: var(--font-display); font-size: 13px; padding: 8px; margin: 0; color: var(--color-text);">
+					{slot.recipe.name}
+				</p>
+			</div>
+
+			<div class="card-back" aria-hidden={!isFlipped}>
+				<button
+					type="button"
+					aria-label="Schließen"
+					onclick={(e) => { e.stopPropagation(); onclose?.(); }}
+				>
+					×
+				</button>
+
+				{#if slot.recipe.cookTimeMin}
+					<span style="font-size: 12px;">{slot.recipe.cookTimeMin} min</span>
+				{/if}
+
+				{#if slot.recipe.effort}
+					<span style="font-size: 12px; margin-left: 4px;">{slot.recipe.effort}</span>
+				{/if}
+
+				<div style="margin-top: 8px; display: flex; flex-direction: column; gap: 4px;">
+					<a href="/recipes/{slot.recipe.id}/cook" onclick={(e) => e.stopPropagation()}>Koch-Modus</a>
+					<a href="/recipes/{slot.recipe.id}" onclick={(e) => e.stopPropagation()}>Rezept ansehen</a>
+				</div>
+
+				{#if isPlanner}
+					<button
+						type="button"
+						onclick={(e) => { e.stopPropagation(); onswap?.(); }}
+						style="margin-top: 8px; display: block;"
+					>
+						Gericht tauschen
+					</button>
+				{/if}
+
+				{#if isPlanner && slot.id}
+					<button
+						type="button"
+						onclick={(e) => { e.stopPropagation(); onremove?.(); }}
+						style="margin-top: 4px; display: block;"
+					>
+						Entfernen
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{:else}
+	<EmptyDayTile
+		slotDate={slot.slotDate ?? ''}
+		slotId={slot.id ?? ''}
+		{isPlanner}
+		{slotMap}
+		{topSuggestion}
+		{onaddrecipe}
+	/>
+{/if}
+
+<style>
+	.scene {
+		perspective: 900px;
+		height: 100%;
+		width: 100%;
+		cursor: pointer;
+	}
+	.card {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		transform-style: preserve-3d;
+		transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+		border-radius: 10px;
+	}
+	.card.flipped {
+		transform: rotateY(180deg);
+	}
+	.card-front,
+	.card-back {
+		position: absolute;
+		inset: 0;
+		backface-visibility: hidden;
+		border-radius: 10px;
+		overflow: hidden;
+	}
+	.card-back {
+		transform: rotateY(180deg);
+		background: var(--color-page);
+		border: 1px solid var(--color-border);
+		padding: 10px;
+		overflow-y: auto;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.card {
+			transition: none;
+		}
+	}
+</style>
--- a/frontend/src/lib/planner/DesktopDayTile.test.ts
+++ b/frontend/src/lib/planner/DesktopDayTile.test.ts
@@ -0,0 +1,172 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import DesktopDayTile from './DesktopDayTile.svelte';
+
+const filledSlot = {
+	id: 's1',
+	slotDate: '2026-04-14',
+	recipe: {
+		id: 'r1',
+		name: 'Pasta Bolognese',
+		cookTimeMin: 45,
+		effort: 'mittel',
+		heroImageUrl: null,
+		tags: [{ id: 't1', name: 'Rind', tagType: 'protein' }]
+	}
+};
+
+const emptySlot = { id: null, slotDate: '2026-04-14', recipe: null };
+
+describe('DesktopDayTile — filled slot', () => {
+	describe('front face', () => {
+		it('renders recipe name on front face', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByText('Pasta Bolognese')).toBeTruthy();
+		});
+
+		it('has data-testid="day-meal-card" on the scene element', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByTestId("day-meal-card-2026-04-14")).toBeTruthy();
+		});
+
+		it('applies today ring when isToday', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: true, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('data-today')).toBe('true');
+		});
+
+		it('applies selected ring when activeSlotId matches slot id', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('data-flipped')).toBe('true');
+		});
+
+		it('dims tile when another slot is active', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 'other-slot', isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('data-dimmed')).toBe('true');
+		});
+
+		it('is not dimmed when no slot is active', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('data-dimmed')).toBe('false');
+		});
+	});
+
+	describe('flip interaction', () => {
+		it('calls onflip with slot id when scene is clicked', async () => {
+			const onflip = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } });
+			await user.click(screen.getByTestId("day-meal-card-2026-04-14"));
+			expect(onflip).toHaveBeenCalledWith('s1');
+		});
+
+		it('calls onflip when Enter key is pressed on scene', async () => {
+			const onflip = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } });
+			screen.getByTestId("day-meal-card-2026-04-14").focus();
+			await user.keyboard('{Enter}');
+			expect(onflip).toHaveBeenCalledWith('s1');
+		});
+
+		it('calls onflip when Space key is pressed on scene', async () => {
+			const onflip = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } });
+			screen.getByTestId("day-meal-card-2026-04-14").focus();
+			await user.keyboard(' ');
+			expect(onflip).toHaveBeenCalledWith('s1');
+		});
+	});
+
+	describe('back face (flipped state)', () => {
+		it('shows recipe name on back face when flipped', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			// Back face should also show recipe name
+			const names = screen.getAllByText('Pasta Bolognese');
+			expect(names.length).toBeGreaterThanOrEqual(1);
+		});
+
+		it('shows Koch-Modus link on back face when flipped', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByRole('link', { name: /Koch-Modus/i })).toBeTruthy();
+		});
+
+		it('shows Rezept ansehen link on back face when flipped', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByRole('link', { name: /Rezept ansehen/i })).toBeTruthy();
+		});
+
+		it('shows close button on back face', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByRole('button', { name: /Schließen/i })).toBeTruthy();
+		});
+
+		it('calls onclose when close button clicked', async () => {
+			const onclose = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onclose } });
+			await user.click(screen.getByRole('button', { name: /Schließen/i }));
+			expect(onclose).toHaveBeenCalledOnce();
+		});
+
+		it('shows Gericht tauschen button for planner on back face', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByRole('button', { name: /Gericht tauschen/i })).toBeTruthy();
+		});
+
+		it('hides Gericht tauschen for non-planner', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: false, slotMap: {}, suggestions: [] } });
+			expect(screen.queryByRole('button', { name: /Gericht tauschen/i })).toBeNull();
+		});
+
+		it('calls onswap when Gericht tauschen clicked', async () => {
+			const onswap = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onswap } });
+			await user.click(screen.getByRole('button', { name: /Gericht tauschen/i }));
+			expect(onswap).toHaveBeenCalledOnce();
+		});
+
+		it('shows Entfernen button for planner when slot has id', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			expect(screen.getByRole('button', { name: /Entfernen/i })).toBeTruthy();
+		});
+
+		it('calls onremove when Entfernen clicked', async () => {
+			const onremove = vi.fn();
+			const user = userEvent.setup();
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onremove } });
+			await user.click(screen.getByRole('button', { name: /Entfernen/i }));
+			expect(onremove).toHaveBeenCalledOnce();
+		});
+
+		it('aria-expanded is true when flipped', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('aria-expanded')).toBe('true');
+		});
+
+		it('aria-expanded is false when not flipped', () => {
+			render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+			const scene = screen.getByTestId("day-meal-card-2026-04-14");
+			expect(scene.getAttribute('aria-expanded')).toBe('false');
+		});
+	});
+});
+
+describe('DesktopDayTile — empty slot', () => {
+	it('renders EmptyDayTile (shows Gericht wählen) for empty slot', () => {
+		render(DesktopDayTile, { props: { slot: emptySlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+		expect(screen.getByRole('button', { name: /Gericht wählen/i })).toBeTruthy();
+	});
+
+	it('does not render Koch-Modus for empty slot', () => {
+		render(DesktopDayTile, { props: { slot: emptySlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } });
+		expect(screen.queryByRole('link', { name: /Koch-Modus/i })).toBeNull();
+	});
+});
--- a/frontend/src/lib/planner/EmptyDayTile.svelte
+++ b/frontend/src/lib/planner/EmptyDayTile.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { computeReasoningTags } from './reasoningTags';
+
+	interface TagItem {
+		id?: string;
+		name?: string;
+		tagType?: string;
+	}
+
+	interface SuggestionRecipe {
+		id: string;
+		name: string;
+		cookTimeMin?: number;
+		effort?: string;
+		tags?: TagItem[];
+	}
+
+	interface TopSuggestion {
+		recipe: SuggestionRecipe;
+		scoreDelta: number;
+		hasConflict: boolean;
+	}
+
+	interface Slot {
+		id?: string;
+		slotDate?: string;
+		recipe?: any | null;
+	}
+
+	let {
+		slotDate,
+		slotId,
+		isPlanner,
+		slotMap,
+		topSuggestion,
+		onaddrecipe
+	}: {
+		slotDate: string;
+		slotId: string;
+		isPlanner: boolean;
+		slotMap: Record<string, Slot>;
+		topSuggestion?: TopSuggestion;
+		onaddrecipe?: () => void;
+	} = $props();
+
+	let reasoningTags = $derived(
+		topSuggestion ? computeReasoningTags(slotMap, topSuggestion.recipe) : []
+	);
+</script>
+
+<div
+	data-testid="empty-day-tile"
+	role="group"
+	class="h-full flex flex-col gap-2 p-3"
+	style="border: 1px dashed var(--color-border);"
+>
+	{#if isPlanner}
+		<button
+			type="button"
+			aria-label="Gericht wählen"
+			onclick={() => onaddrecipe?.()}
+			class="self-start font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors"
+		>
+			+ Gericht wählen
+		</button>
+	{/if}
+
+	{#if topSuggestion}
+		<p class="font-[var(--font-display)] text-[12px] text-[var(--color-text-muted)] leading-snug">
+			{topSuggestion.recipe.name}
+		</p>
+
+		{#if reasoningTags.length > 0}
+			<div class="flex flex-wrap gap-1">
+				{#each reasoningTags as tag (tag.id)}
+					<span
+						data-testid="reasoning-tag"
+						class="inline-block rounded px-1.5 py-0.5 font-[var(--font-sans)] text-[11px] font-medium"
+						style={tag.color === 'green'
+							? 'background: var(--green-tint); color: var(--green-dark);'
+							: 'background: var(--yellow-tint); color: var(--yellow-text);'}
+					>
+						{tag.label}
+					</span>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>
--- a/frontend/src/lib/planner/EmptyDayTile.test.ts
+++ b/frontend/src/lib/planner/EmptyDayTile.test.ts
@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import EmptyDayTile from './EmptyDayTile.svelte';
+
+const slotDate = '2026-04-14';
+const slotId = 'slot-1';
+
+const topSuggestionNewProtein = {
+	recipe: {
+		id: 'r1',
+		name: 'Lachs mit Gemüse',
+		cookTimeMin: 20,
+		effort: 'einfach',
+		tags: [{ id: 't1', name: 'Fisch', tagType: 'protein' }]
+	},
+	scoreDelta: 3.2,
+	hasConflict: false
+};
+
+const slotMapEmpty = {};
+
+describe('EmptyDayTile', () => {
+	describe('base render', () => {
+		it('shows + CTA for planner', () => {
+			render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } });
+			expect(screen.getByRole('button', { name: /Gericht wählen/i })).toBeTruthy();
+		});
+
+		it('hides + CTA for non-planner', () => {
+			render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: false, slotMap: slotMapEmpty } });
+			expect(screen.queryByRole('button', { name: /Gericht wählen/i })).toBeNull();
+		});
+
+		it('calls onaddrecipe when + CTA clicked', async () => {
+			const onaddrecipe = vi.fn();
+			const user = userEvent.setup();
+			render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, onaddrecipe } });
+			await user.click(screen.getByRole('button', { name: /Gericht wählen/i }));
+			expect(onaddrecipe).toHaveBeenCalledOnce();
+		});
+
+		it('has data-testid="empty-day-tile"', () => {
+			render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } });
+			expect(screen.getByTestId('empty-day-tile')).toBeTruthy();
+		});
+	});
+
+	describe('reasoning tags', () => {
+		it('shows no tags when no topSuggestion', () => {
+			render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } });
+			expect(screen.queryByTestId('reasoning-tag')).toBeNull();
+		});
+
+		it('shows Neues Protein tag when topSuggestion has new protein', () => {
+			render(EmptyDayTile, {
+				props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein }
+			});
+			expect(screen.getByText('Neues Protein')).toBeTruthy();
+		});
+
+		it('shows Aufwand tag for easy suggestion', () => {
+			render(EmptyDayTile, {
+				props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein }
+			});
+			expect(screen.getByText('Aufwand: leicht')).toBeTruthy();
+		});
+
+		it('shows suggestion recipe name when topSuggestion provided', () => {
+			render(EmptyDayTile, {
+				props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein }
+			});
+			expect(screen.getByText('Lachs mit Gemüse')).toBeTruthy();
+		});
+
+		it('does not show tags when suggestion has no matching conditions', () => {
+			const heavySuggestion = {
+				recipe: { id: 'r2', name: 'Roulade', cookTimeMin: 120, effort: 'aufwändig', tags: [] },
+				scoreDelta: 1.0,
+				hasConflict: false
+			};
+			render(EmptyDayTile, {
+				props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: heavySuggestion }
+			});
+			expect(screen.queryByTestId('reasoning-tag')).toBeNull();
+		});
+	});
+});
--- a/frontend/src/lib/planner/RecipePickerDrawer.svelte
+++ b/frontend/src/lib/planner/RecipePickerDrawer.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Recipe, Suggestion } from '$lib/planner/types';
+	import RecipePicker from './RecipePicker.svelte';
+
+	let {
+		open,
+		slotDate,
+		planId,
+		suggestions,
+		allRecipes,
+		isLoading,
+		onpick,
+		onclose,
+		excludeRecipeId,
+		replacingRecipe
+	}: {
+		open: boolean;
+		slotDate: string;
+		planId: string;
+		suggestions: Suggestion[];
+		allRecipes: Recipe[];
+		isLoading: boolean;
+		onpick: (recipeId: string, recipeName: string) => void;
+		onclose: () => void;
+		excludeRecipeId?: string;
+		replacingRecipe?: { name: string; meta?: string };
+	} = $props();
+
+	let drawerTransform = $derived(open ? 'translateX(0)' : 'translateX(100%)');
+	let backdropVisibility = $derived(open ? 'visible' : 'hidden');
+	let backdropOpacity = $derived(open ? '1' : '0');
+</script>
+
+<!-- Backdrop -->
+<div
+	data-testid="drawer-backdrop"
+	aria-hidden="true"
+	onclick={onclose}
+	style="position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 40; visibility: {backdropVisibility}; opacity: {backdropOpacity}; transition: opacity 0.2s, visibility 0.2s;"
+></div>
+
+<!-- Drawer panel -->
+<div
+	data-testid="recipe-picker-drawer"
+	aria-hidden={!open}
+	style="position: fixed; right: 0; top: 0; height: 100%; width: min(480px, 90vw); background: var(--color-page); border-left: 1px solid var(--color-border); z-index: 50; transform: {drawerTransform}; transition: transform 0.25s ease; display: flex; flex-direction: column;"
+>
+	<!-- Header -->
+	<div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); flex-shrink: 0;">
+		<p style="margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--color-text);">
+			Rezept wählen
+		</p>
+		<button
+			type="button"
+			aria-label="Schließen"
+			onclick={onclose}
+			style="background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--color-text-muted); padding: 4px 8px;"
+		>
+			&times;
+		</button>
+	</div>
+
+	<!-- RecipePicker content — only mount when open to avoid duplicate text in DOM -->
+	<div style="overflow-y: auto; flex: 1;">
+		{#if open}
+			<RecipePicker
+				{planId}
+				date={slotDate}
+				dateLabel={slotDate}
+				{suggestions}
+				{allRecipes}
+				{isLoading}
+				{onpick}
+				{excludeRecipeId}
+				{replacingRecipe}
+			/>
+		{/if}
+	</div>
+</div>
--- a/frontend/src/lib/planner/RecipePickerDrawer.test.ts
+++ b/frontend/src/lib/planner/RecipePickerDrawer.test.ts
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import RecipePickerDrawer from './RecipePickerDrawer.svelte';
+
+const baseProps = {
+	open: true,
+	slotDate: '2026-04-14',
+	planId: 'plan-1',
+	suggestions: [],
+	allRecipes: [
+		{ id: 'r1', name: 'Pasta Bolognese', cookTimeMin: 45, effort: 'mittel' },
+		{ id: 'r2', name: 'Lachs', cookTimeMin: 20, effort: 'einfach' }
+	],
+	isLoading: false,
+	onpick: vi.fn(),
+	onclose: vi.fn()
+};
+
+describe('RecipePickerDrawer', () => {
+	describe('visibility', () => {
+		it('renders drawer content when open=true', () => {
+			render(RecipePickerDrawer, { props: baseProps });
+			expect(screen.getByTestId('recipe-picker-drawer')).toBeTruthy();
+		});
+
+		it('drawer is not visible when open=false', () => {
+			render(RecipePickerDrawer, { props: { ...baseProps, open: false } });
+			const drawer = screen.getByTestId('recipe-picker-drawer');
+			// Drawer exists in DOM but should be off-screen / aria-hidden
+			expect(drawer.getAttribute('aria-hidden')).toBe('true');
+		});
+
+		it('renders recipe list inside drawer', () => {
+			render(RecipePickerDrawer, { props: baseProps });
+			expect(screen.getByText('Pasta Bolognese')).toBeTruthy();
+		});
+	});
+
+	describe('backdrop', () => {
+		it('renders backdrop when open', () => {
+			render(RecipePickerDrawer, { props: baseProps });
+			expect(screen.getByTestId('drawer-backdrop')).toBeTruthy();
+		});
+
+		it('calls onclose when backdrop is clicked', async () => {
+			const onclose = vi.fn();
+			const user = userEvent.setup();
+			render(RecipePickerDrawer, { props: { ...baseProps, onclose } });
+			await user.click(screen.getByTestId('drawer-backdrop'));
+			expect(onclose).toHaveBeenCalledOnce();
+		});
+	});
+
+	describe('close button', () => {
+		it('renders a close button inside the drawer', () => {
+			render(RecipePickerDrawer, { props: baseProps });
+			expect(screen.getByRole('button', { name: /schließen|close/i })).toBeTruthy();
+		});
+
+		it('calls onclose when close button clicked', async () => {
+			const onclose = vi.fn();
+			const user = userEvent.setup();
+			render(RecipePickerDrawer, { props: { ...baseProps, onclose } });
+			await user.click(screen.getByRole('button', { name: /schließen|close/i }));
+			expect(onclose).toHaveBeenCalledOnce();
+		});
+	});
+
+	describe('recipe picking', () => {
+		it('calls onpick when a recipe is selected', async () => {
+			const onpick = vi.fn();
+			const user = userEvent.setup();
+			render(RecipePickerDrawer, { props: { ...baseProps, onpick } });
+			const pickButtons = screen.getAllByRole('button', { name: /Wählen/i });
+			await user.click(pickButtons[0]);
+			expect(onpick).toHaveBeenCalledOnce();
+		});
+	});
+});
--- a/frontend/src/lib/planner/reasoningTags.test.ts
+++ b/frontend/src/lib/planner/reasoningTags.test.ts
@@ -0,0 +1,106 @@
+import { describe, it, expect } from 'vitest';
+import { computeReasoningTags, type ReasoningTag } from './reasoningTags';
+
+// SlotMap fixture helpers
+const emptySlotMap = {};
+
+const slotMapWithChicken = {
+	'2026-04-07': { id: 's1', slotDate: '2026-04-07', recipe: { id: 'r1', name: 'Chicken curry', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] } },
+};
+
+const slotMapWithBeefAndChicken = {
+	'2026-04-07': { id: 's1', slotDate: '2026-04-07', recipe: { id: 'r1', name: 'Steak', tags: [{ id: 't2', name: 'Rind', tagType: 'protein' }] } },
+	'2026-04-08': { id: 's2', slotDate: '2026-04-08', recipe: { id: 'r2', name: 'Chicken', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] } },
+};
+
+const fishRecipe = { id: 'r3', name: 'Lachs', cookTimeMin: 20, effort: 'einfach', tags: [{ id: 't3', name: 'Fisch', tagType: 'protein' }] };
+const chickenRecipe = { id: 'r1', name: 'Chicken curry', cookTimeMin: 45, effort: 'mittel', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] };
+const easyRecipe = { id: 'r4', name: 'Salat', cookTimeMin: 15, effort: 'einfach', tags: [] };
+const heavyRecipe = { id: 'r5', name: 'Roulade', cookTimeMin: 90, effort: 'aufwändig', tags: [] };
+
+describe('computeReasoningTags', () => {
+	describe('Neues Protein tag', () => {
+		it('returns Neues Protein tag when recipe protein is not in week', () => {
+			const tags = computeReasoningTags(slotMapWithChicken, fishRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).toContain('neues-protein');
+		});
+
+		it('does not return Neues Protein when recipe protein is already in week', () => {
+			const tags = computeReasoningTags(slotMapWithChicken, chickenRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).not.toContain('neues-protein');
+		});
+
+		it('returns Neues Protein when recipe has protein tag and slotMap is empty', () => {
+			const tags = computeReasoningTags(emptySlotMap, fishRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).toContain('neues-protein');
+		});
+
+		it('does not return Neues Protein when recipe has no protein tag', () => {
+			const tags = computeReasoningTags(emptySlotMap, easyRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).not.toContain('neues-protein');
+		});
+	});
+
+	describe('Aufwand: leicht tag', () => {
+		it('returns Aufwand tag when cookTimeMin is less than 30', () => {
+			const tags = computeReasoningTags(emptySlotMap, easyRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).toContain('aufwand-leicht');
+		});
+
+		it('returns Aufwand tag when effort is einfach regardless of cookTime', () => {
+			const recipe = { ...fishRecipe, cookTimeMin: 45 };
+			const tags = computeReasoningTags(emptySlotMap, recipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).toContain('aufwand-leicht');
+		});
+
+		it('does not return Aufwand tag for heavy recipe', () => {
+			const tags = computeReasoningTags(emptySlotMap, heavyRecipe);
+			const tagTypes = tags.map((t: ReasoningTag) => t.id);
+			expect(tagTypes).not.toContain('aufwand-leicht');
+		});
+
+		it('returns Aufwand tag exactly at cookTimeMin 29', () => {
+			const recipe = { ...heavyRecipe, cookTimeMin: 29, effort: undefined };
+			const tags = computeReasoningTags(emptySlotMap, recipe);
+			expect(tags.map((t: ReasoningTag) => t.id)).toContain('aufwand-leicht');
+		});
+
+		it('does not return Aufwand tag at cookTimeMin 30 with non-easy effort', () => {
+			const recipe = { ...heavyRecipe, cookTimeMin: 30, effort: 'mittel' };
+			const tags = computeReasoningTags(emptySlotMap, recipe);
+			expect(tags.map((t: ReasoningTag) => t.id)).not.toContain('aufwand-leicht');
+		});
+	});
+
+	describe('ReasoningTag shape', () => {
+		it('each tag has id, label, and color', () => {
+			const tags = computeReasoningTags(emptySlotMap, fishRecipe);
+			for (const tag of tags) {
+				expect(tag).toHaveProperty('id');
+				expect(tag).toHaveProperty('label');
+				expect(tag).toHaveProperty('color');
+			}
+		});
+	});
+
+	describe('multiple tags', () => {
+		it('returns multiple tags when multiple conditions are true', () => {
+			const recipe = { id: 'r6', name: 'Easy fish', cookTimeMin: 20, effort: 'einfach', tags: [{ id: 't3', name: 'Fisch', tagType: 'protein' }] };
+			const tags = computeReasoningTags(slotMapWithBeefAndChicken, recipe);
+			const tagIds = tags.map((t: ReasoningTag) => t.id);
+			expect(tagIds).toContain('neues-protein');
+			expect(tagIds).toContain('aufwand-leicht');
+		});
+
+		it('returns empty array when no conditions are true', () => {
+			const tags = computeReasoningTags(slotMapWithChicken, { ...chickenRecipe, cookTimeMin: 60, effort: 'aufwändig' });
+			expect(tags).toHaveLength(0);
+		});
+	});
+});
--- a/frontend/src/lib/planner/reasoningTags.ts
+++ b/frontend/src/lib/planner/reasoningTags.ts
@@ -0,0 +1,63 @@
+export interface ReasoningTag {
+	id: 'neues-protein' | 'aufwand-leicht';
+	label: string;
+	color: 'green' | 'yellow';
+}
+
+interface TagItem {
+	id?: string;
+	name?: string;
+	tagType?: string;
+}
+
+interface Recipe {
+	id: string;
+	name: string;
+	cookTimeMin?: number;
+	effort?: string;
+	tags?: TagItem[];
+}
+
+interface SlotRecipe {
+	id?: string;
+	tags?: TagItem[];
+}
+
+interface Slot {
+	id?: string;
+	slotDate?: string;
+	recipe?: SlotRecipe | null;
+}
+
+type SlotMap = Record<string, Slot>;
+
+export function computeReasoningTags(slotMap: SlotMap, recipe: Recipe): ReasoningTag[] {
+	const tags: ReasoningTag[] = [];
+
+	// Neues Protein: recipe has a protein tag not already present in any filled slot
+	const recipeProtein = recipe.tags?.find((t) => t.tagType === 'protein')?.name;
+	if (recipeProtein) {
+		const weekProteins = new Set<string>();
+		for (const slot of Object.values(slotMap)) {
+			if (slot.recipe) {
+				for (const tag of slot.recipe.tags ?? []) {
+					if (tag.tagType === 'protein' && tag.name) {
+						weekProteins.add(tag.name);
+					}
+				}
+			}
+		}
+		if (!weekProteins.has(recipeProtein)) {
+			tags.push({ id: 'neues-protein', label: 'Neues Protein', color: 'green' });
+		}
+	}
+
+	// Aufwand: leicht — cookTimeMin < 30 OR effort is 'einfach'/'leicht'
+	const isEasyEffort = recipe.effort === 'einfach' || recipe.effort === 'leicht';
+	const isQuick = recipe.cookTimeMin != null && recipe.cookTimeMin < 30;
+	if (isEasyEffort || isQuick) {
+		tags.push({ id: 'aufwand-leicht', label: 'Aufwand: leicht', color: 'yellow' });
+	}
+
+	return tags;
+}
--- a/frontend/src/lib/planner/types.ts
+++ b/frontend/src/lib/planner/types.ts
@@ -1,8 +1,16 @@
+export interface TagItem {
+	id?: string;
+	name?: string;
+	tagType?: string;
+}
+
 export interface Recipe {
 	id: string;
 	name: string;
 	effort?: string;
 	cookTimeMin?: number;
+	heroImageUrl?: string | null;
+	tags?: TagItem[];
 }

 export interface Suggestion {
--- a/frontend/src/routes/(app)/planner/+page.server.ts
+++ b/frontend/src/routes/(app)/planner/+page.server.ts
@@ -21,7 +21,8 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 					name: r.name!,
 					cookTimeMin: r.cookTimeMin,
 					effort: r.effort,
-					heroImageUrl: r.heroImageUrl
+					heroImageUrl: r.heroImageUrl,
+					tags: (r.tags ?? []).map((t: any) => ({ id: t.id, name: t.name, tagType: t.tagType }))
 				}));

 	if (weekPlanResult.error || !weekPlanResult.data?.id) {
--- a/frontend/src/routes/(app)/planner/+page.svelte
+++ b/frontend/src/routes/(app)/planner/+page.svelte
@@ -5,7 +5,9 @@
 	import VarietyScoreCard from '$lib/planner/VarietyScoreCard.svelte';
 	import WeekStrip from '$lib/planner/WeekStrip.svelte';
 	import DayMealCard from '$lib/planner/DayMealCard.svelte';
+	import DesktopDayTile from '$lib/planner/DesktopDayTile.svelte';
 	import RecipePicker from '$lib/planner/RecipePicker.svelte';
+	import RecipePickerDrawer from '$lib/planner/RecipePickerDrawer.svelte';
 	import MealActionSheet from '$lib/planner/MealActionSheet.svelte';
 	import BottomSheet from '$lib/components/BottomSheet.svelte';
 	import UndoBar from '$lib/planner/UndoBar.svelte';
@@ -49,35 +51,27 @@

 	let weekRange = $derived(formatWeekRange(weekStart));

-	// Desktop right panel state machine
-	type PanelState =
-		| { kind: 'idle' }
-		| { kind: 'day-detail'; date: string }
-		| { kind: 'recipe-picker'; date: string };
-
-	let panelState = $state<PanelState>({ kind: 'idle' });
-
 	// Mobile bottom sheet for RecipePicker (empty slot) and swap flow
 	let pickerOpen = $state(false);
 	let actionSheetOpen = $state(false);
 	let swapSheetOpen = $state(false);
 	let swapLoading = $state(false);

+	// Desktop flip tile + drawer state (page-owned per Kai's architecture decision)
+	let activeSlotId = $state<string | null>(null);
+	let drawerOpen = $state(false);
+	let drawerSlotId = $state<string | null>(null);
+
 	const activePickerDate = $derived(
 		pickerOpen ? selectedDay
 		: swapSheetOpen ? selectedDay
-		: panelState.kind === 'recipe-picker' ? panelState.date
+		: drawerOpen && drawerSlotId ? drawerSlotId
 		: null
 	);

 	let suggestions: Suggestion[] = $state([]);
 	let isLoadingSuggestions = $state(false);

-	// Recipes already in any slot this week — used for ⚠ overlap warnings
-	let currentWeekRecipeIds = $derived(
-		new Set<string>(slots.filter((s: any) => s.recipe?.id).map((s: any) => s.recipe.id))
-	);
-
 	// Hidden form field bindings
 	let addPlanId = $state('');
 	let addSlotDate = $state('');
@@ -115,9 +109,23 @@
 		return () => controller.abort();
 	});

+	// Single Escape key handler — priority: drawer > flip (Kai architecture decision)
+	$effect(() => {
+		function handleKeydown(e: KeyboardEvent) {
+			if (e.key !== 'Escape') return;
+			if (drawerOpen) {
+				drawerOpen = false;
+				drawerSlotId = null;
+			} else if (activeSlotId) {
+				activeSlotId = null;
+			}
+		}
+		window.addEventListener('keydown', handleKeydown);
+		return () => window.removeEventListener('keydown', handleKeydown);
+	});
+
 	function handleSelectDay(day: string) {
 		selectedDay = day;
-		panelState = { kind: 'day-detail', date: day };
 	}

 	async function navigateWeek(direction: 'prev' | 'next' | 'today') {
@@ -130,14 +138,13 @@
 	}

 	async function handleRecipePick(recipeId: string, recipeName: string) {
-		// Capture date before modifying panel state
-		const date = panelState.kind === 'recipe-picker' ? panelState.date : selectedDay;
+		// Drawer date takes priority (desktop), then mobile picker date
+		const date = drawerOpen && drawerSlotId ? drawerSlotId : selectedDay;

-		// Close pickers
+		// Close all pickers
 		pickerOpen = false;
-		if (panelState.kind === 'recipe-picker') {
-			panelState = { kind: 'idle' };
-		}
+		drawerOpen = false;
+		drawerSlotId = null;

 		const existingSlot = slotMap[date];

@@ -196,17 +203,39 @@
 		swapLoading = false;
 	}

-	function closePanelToIdle() {
-		panelState = { kind: 'idle' };
+	// Desktop tile handlers
+	function handleTileFlip(slotId: string) {
+		activeSlotId = slotId;
 	}

-	function closePanelToDayDetail() {
-		if (panelState.kind === 'recipe-picker') {
-			panelState = { kind: 'day-detail', date: panelState.date };
-		} else {
-			panelState = { kind: 'idle' };
-		}
+	function handleTileClose() {
+		activeSlotId = null;
 	}
+
+	function handleTileSwap(slotDate: string) {
+		activeSlotId = null;
+		drawerSlotId = slotDate;
+		drawerOpen = true;
+	}
+
+	async function handleTileRemove(slot: any) {
+		activeSlotId = null;
+		await handleRemoveMeal(slot);
+	}
+
+	function handleEmptyTileAdd(slotDate: string) {
+		drawerSlotId = slotDate;
+		drawerOpen = true;
+	}
+
+	const drawerSlot = $derived(drawerSlotId ? (slotMap[drawerSlotId] ?? null) : null);
+	const drawerReplacingMeta = $derived(
+		drawerSlot?.recipe
+			? [drawerSlot.recipe.cookTimeMin ? `${drawerSlot.recipe.cookTimeMin} Min` : null, drawerSlot.recipe.effort ?? null]
+					.filter(Boolean)
+					.join(' · ')
+			: null
+	);
 </script>

 <!-- Mobile & Tablet: vertical stack -->
@@ -369,7 +398,7 @@
 	</BottomSheet>
 </div>

-<!-- Desktop: 3-panel layout -->
+<!-- Desktop: 2-panel layout (sidebar + full-width flip-tile grid) -->
 <div class="hidden h-screen lg:flex lg:flex-col">
 	<!-- Topbar -->
 	<header class="flex items-center gap-4 border-b border-[var(--color-border)] bg-[var(--color-page)] px-6 py-4">
@@ -400,21 +429,11 @@
 				Heute
 			</button>
 		</div>
-		{#if isPlanner}
-			<button
-				type="button"
-				onclick={() => (panelState = { kind: 'recipe-picker', date: selectedDay })}
-				class="ml-auto rounded-[var(--radius-md)] bg-[var(--green-dark)] px-4 py-2 text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-white"
-			>
-				+ Gericht hinzufügen
-			</button>
-		{/if}
 	</header>

 	<div class="flex flex-1 overflow-hidden">
-		<!-- Left sidebar -->
+		<!-- Left sidebar (unchanged) -->
 		<aside class="flex w-[224px] flex-shrink-0 flex-col border-r border-[var(--color-border)] bg-[var(--color-surface)] p-4">
-			<!-- Variety widget at bottom -->
 			{#if varietyScore}
 				<div class="mt-auto">
 					<VarietyScoreCard
@@ -426,8 +445,8 @@
 			{/if}
 		</aside>

-		<!-- Main calendar (only scrollable panel) -->
-		<main class="flex-1 overflow-y-auto p-5">
+		<!-- Main grid — full width, full height -->
+		<main class="flex-1 overflow-hidden p-5">
 			{#if !weekPlan}
 				<div class="flex h-full flex-col items-center justify-center">
 					<p class="font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">Noch kein Wochenplan für diese Woche.</p>
@@ -441,198 +460,65 @@
 					{/if}
 				</div>
 			{:else}
-				<div class="grid grid-cols-7 gap-[8px]">
+				<div class="grid h-full grid-cols-7 gap-2">
 					{#each days as day (day)}
 						{@const slot = slotMap[day] ?? { id: null, slotDate: day, recipe: null }}
 						{@const isTodayDay = day === today}
-						{@const isSelectedDay = day === selectedDay}
 						{@const dateNum = day.slice(-2).replace(/^0/, '')}
 						{@const dayAbbr = formatDayAbbr(day, 'narrow')}
+						{@const isThisTileActive = drawerSlotId === day}

-						<div class="flex flex-col">
-							<!-- Column header: day name + date badge -->
+						<div class="flex h-full flex-col">
+							<!-- Column header -->
 							<div class="mb-2 flex flex-col items-center gap-1">
 								<p class="font-[var(--font-sans)] text-[9px] uppercase tracking-wide text-[var(--color-text-muted)]">
 									{dayAbbr}
 								</p>
 								<div
 									class="flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium
-										{isTodayDay ? 'bg-[var(--yellow)] text-white' : ''}
-										{isSelectedDay && !isTodayDay ? 'bg-[var(--green-tint)] text-[var(--green-dark)]' : ''}
-										{!isTodayDay && !isSelectedDay ? 'bg-transparent text-[var(--color-text)]' : ''}"
+										{isTodayDay ? 'bg-[var(--yellow)] text-white' : 'bg-transparent text-[var(--color-text)]'}"
 								>
 									{dateNum}
 								</div>
 							</div>

-							<!-- Meal tile -->
-							<button
-								type="button"
-								onclick={() => {
-									handleSelectDay(day);
-									if (!slot.recipe && isPlanner) {
-										panelState = { kind: 'recipe-picker', date: day };
-									}
-								}}
-								aria-label={slot.recipe ? slot.recipe.name : `Gericht wählen für ${formatDayLabel(day)}`}
-								class="flex flex-1 flex-col rounded-[var(--radius-lg)] border p-2 text-left shadow-[var(--shadow-card)] transition-all hover:border-[var(--green-light)] hover:shadow-[var(--shadow-raised)]
-									{slot.recipe && !isTodayDay && !isSelectedDay ? 'border-[var(--color-border)] bg-[var(--color-surface)]' : ''}
-									{isTodayDay && slot.recipe ? 'border-2 border-[var(--yellow)] bg-[var(--yellow-tint)]' : ''}
-									{isSelectedDay && !isTodayDay && slot.recipe ? 'border-2 border-[var(--green)] bg-[var(--green-tint)]' : ''}
-									{!slot.recipe ? 'border-dashed border-[var(--color-border)] bg-transparent' : ''}"
-							>
-								{#if slot.recipe}
-									<p class="font-[var(--font-display)] text-[13px] font-[300] leading-tight text-[var(--color-text)]">
-										{slot.recipe.name}
-									</p>
-								{:else}
-									<div class="flex flex-1 flex-col items-center justify-center py-4 text-[var(--color-text-muted)]">
-										<span class="text-[18px]" aria-hidden="true">+</span>
-										<span class="font-[var(--font-sans)] text-[11px]">Gericht wählen</span>
-									</div>
-								{/if}
-							</button>
+							<!-- Flip tile -->
+							<div class="min-h-0 flex-1">
+								<DesktopDayTile
+									{slot}
+									isToday={isTodayDay}
+									{activeSlotId}
+									{isPlanner}
+									{slotMap}
+									{suggestions}
+									topSuggestion={isThisTileActive && suggestions.length > 0 ? suggestions[0] : undefined}
+									onflip={handleTileFlip}
+									onclose={handleTileClose}
+									onswap={() => handleTileSwap(day)}
+									onremove={() => handleTileRemove(slot)}
+									onaddrecipe={() => handleEmptyTileAdd(day)}
+								/>
+							</div>
 						</div>
 					{/each}
 				</div>
 			{/if}
 		</main>
-
-		<!-- Right detail panel -->
-		<aside class="flex w-[280px] flex-shrink-0 flex-col border-l border-[var(--color-border)] bg-[var(--color-page)] p-4">
-			{#if panelState.kind === 'idle'}
-				<div class="flex flex-1 flex-col items-center justify-center">
-					<p class="font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">Kein Tag ausgewählt</p>
-				</div>
-
-			{:else if panelState.kind === 'day-detail'}
-				{@const detailDate = panelState.date}
-				{@const detailSlot = slotMap[detailDate] ?? { id: null, slotDate: detailDate, recipe: null }}
-
-				<!-- Panel header with close button -->
-				<div class="mb-3 flex items-start justify-between">
-					<p class="font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
-						{formatDayLabel(detailDate)} · Abendessen
-					</p>
-					<button
-						type="button"
-						onclick={closePanelToIdle}
-						aria-label="Panel schließen"
-						class="ml-2 flex-shrink-0 text-[18px] leading-none text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
-					>
-						×
-					</button>
-				</div>
-
-				{#if detailSlot.recipe}
-					<h2 class="font-[var(--font-display)] text-[17px] font-[300] text-[var(--color-text)]">
-						{detailSlot.recipe.name}
-					</h2>
-					{#if detailSlot.recipe.effort || detailSlot.recipe.cookTimeMin}
-						<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
-							{[detailSlot.recipe.cookTimeMin ? `${detailSlot.recipe.cookTimeMin} Min` : null, detailSlot.recipe.effort].filter(Boolean).join(' · ')}
-						</p>
-					{/if}
-
-					<div class="mt-4 space-y-2">
-						<a
-							href="/recipes/{detailSlot.recipe.id}"
-							class="block rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-2 text-center text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-text)] hover:bg-[var(--color-surface)]"
-						>
-							Rezept ansehen
-						</a>
-						<a
-							href="/recipes/{detailSlot.recipe.id}/cook"
-							class="block rounded-[var(--radius-md)] bg-[var(--green-dark)] px-3 py-2 text-center text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-white"
-						>
-							Koch-Modus
-						</a>
-						{#if isPlanner}
-							<button
-								type="button"
-								onclick={() => (panelState = { kind: 'recipe-picker', date: detailDate })}
-								class="block w-full rounded-[var(--radius-md)] border border-[var(--color-border)] px-3 py-2 text-center text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-text)] hover:bg-[var(--color-surface)]"
-							>
-								Gericht tauschen
-							</button>
-							{#if detailSlot.id}
-								<button
-									type="button"
-									onclick={() => { handleRemoveMeal(detailSlot as any); panelState = { kind: 'idle' }; }}
-									class="block w-full rounded-[var(--radius-md)] border border-[var(--color-error,#d9534f)] px-3 py-2 text-center text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-error,#d9534f)] hover:bg-[var(--color-surface)]"
-								>
-									Entfernen
-								</button>
-							{/if}
-						{/if}
-					</div>
-				{:else}
-					<p class="font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">Kein Gericht geplant</p>
-					{#if isPlanner}
-						<button
-							type="button"
-							onclick={() => (panelState = { kind: 'recipe-picker', date: detailDate })}
-							class="mt-3 block w-full rounded-[var(--radius-md)] border border-dashed border-[var(--color-border)] px-3 py-2 text-center text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] text-[var(--color-text-muted)]"
-						>
-							+ Gericht wählen
-						</button>
-					{/if}
-				{/if}
-
-			{:else if panelState.kind === 'recipe-picker'}
-				{@const pickerDate = panelState.date}
-				{@const pickerSlot = slotMap[pickerDate] ?? null}
-				{@const isSwapContext = !!pickerSlot?.recipe}
-
-				<!-- Panel header with back/close button -->
-				<div class="mb-3 flex items-center justify-between">
-					<p class="font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
-						{isSwapContext ? 'Gericht tauschen' : 'Rezept wählen'}
-					</p>
-					<button
-						type="button"
-						onclick={closePanelToDayDetail}
-						aria-label="Zurück"
-						class="ml-2 flex-shrink-0 text-[18px] leading-none text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
-					>
-						×
-					</button>
-				</div>
-
-				{#if isSwapContext}
-					{@const replacingMeta = [
-						pickerSlot.recipe.cookTimeMin ? `${pickerSlot.recipe.cookTimeMin} Min` : null,
-						pickerSlot.recipe.effort ?? null
-					].filter(Boolean).join(' · ')}
-					<div class="flex-1 overflow-y-auto -mx-4 -mb-4">
-						<RecipePicker
-							planId={weekPlan?.id ?? ''}
-							date={pickerDate}
-							dateLabel={formatDayLabel(pickerDate)}
-							suggestions={suggestions}
-							allRecipes={data.recipes}
-							isLoading={isLoadingSuggestions}
-							excludeRecipeId={pickerSlot.recipe.id}
-							replacingRecipe={{ name: pickerSlot.recipe.name, meta: replacingMeta || undefined }}
-							onpick={handleRecipePick}
-						/>
-					</div>
-				{:else}
-					<div class="flex-1 overflow-y-auto -mx-4 -mb-4">
-						<RecipePicker
-							planId={weekPlan?.id ?? ''}
-							date={pickerDate}
-							dateLabel={formatDayLabel(pickerDate)}
-							suggestions={suggestions}
-							allRecipes={data.recipes}
-							isLoading={isLoadingSuggestions}
-							onpick={handleRecipePick}
-						/>
-					</div>
-				{/if}
-			{/if}
-		</aside>
 	</div>
+
+	<!-- Recipe picker drawer (slide-in from right) -->
+	<RecipePickerDrawer
+		open={drawerOpen}
+		slotDate={drawerSlotId ?? ''}
+		planId={weekPlan?.id ?? ''}
+		{suggestions}
+		allRecipes={data.recipes}
+		isLoading={isLoadingSuggestions}
+		onpick={handleRecipePick}
+		onclose={() => { drawerOpen = false; drawerSlotId = null; }}
+		excludeRecipeId={drawerSlot?.recipe?.id}
+		replacingRecipe={drawerSlot?.recipe ? { name: drawerSlot.recipe.name, meta: drawerReplacingMeta || undefined } : undefined}
+	/>
 </div>

 <!-- Hidden forms for slot mutations -->
Author	SHA1	Message	Date
Marcel Raddatz	f97cf49bd0	feat(planner): overhaul desktop layout — flip tiles, no right panel Replaces 3-panel layout with 2-panel (sidebar + full-width grid): - Remove persistent right panel and toolbar + Gericht hinzufügen button - grid-cols-7 tiles use DesktopDayTile (CSS 3D card flip) - RecipePickerDrawer slides in on tile CTA / Gericht tauschen - Page-owned activeSlotId + drawerOpen/drawerSlotId state - Single Escape handler: drawer > flip priority - Extend server load to forward recipe tags from /v1/recipes API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 11:04:26 +02:00
Marcel Raddatz	2cebf504f2	feat(planner): add RecipePickerDrawer slide-in drawer Wraps RecipePicker in a fixed right-side drawer with backdrop. Slide-in/out transition, backdrop click closes, purely presentational (open + onclose props from parent). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 10:52:56 +02:00
Marcel Raddatz	d20cd53be2	feat(planner): add DesktopDayTile flip-tile component CSS 3D card flip with scene/card/front/back structure. Filled slots show gradient/image front face and action back face (Koch-Modus, tauschen, entfernen). Empty slots delegate to EmptyDayTile. Sibling dimming and aria-expanded via activeSlotId prop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 10:51:21 +02:00
Marcel Raddatz	2b7a7cceec	feat(planner): add EmptyDayTile component Dashed-border empty slot tile with + Gericht wählen CTA and lazy reasoning tags (Neues Protein, Aufwand: leicht) derived from topSuggestion prop via computeReasoningTags. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 10:47:19 +02:00
Marcel Raddatz	f37f20d34e	feat(planner): add computeReasoningTags pure helper Derives ReasoningTag[] from slotMap + recipe. Covers Neues Protein (protein not yet in week) and Aufwand: leicht (cookTimeMin < 30 or effort einfach/leicht). No component dependency — Vitest-testable. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 10:45:42 +02:00
Marcel Raddatz	f2071ca5d8	feat(planner): add flip-tile design tokens to app.css Adds --color-ring-today, --color-ring-selected, --opacity-dimmed, 9 protein gradient tokens and 5 cuisine gradient tokens as @theme custom properties, integrating into the existing token layer. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-10 10:44:46 +02:00