feat(recipes): implement B2 recipe detail page with mobile/desktop layout

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

frontend/src/routes/(app)/recipes/[id]/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import RecipeHero from '$lib/recipes/RecipeHero.svelte';
+	import IngredientList from '$lib/recipes/IngredientList.svelte';
+	import StepList from '$lib/recipes/StepList.svelte';
+
+	type RecipeData = {
+		recipe: {
+			id: string;
+			name: string;
+			serves?: number;
+			cookTimeMin?: number;
+			effort?: string;
+			heroImageUrl?: string;
+			ingredients: { ingredientId?: string; name?: string; quantity?: number; unit?: string; sortOrder?: number }[];
+			steps: { stepNumber?: number; instruction?: string }[];
+			tags: { id: string; name: string; tagType?: string }[];
+		};
+	};
+
+	let { data }: { data: RecipeData } = $props();
+</script>
+
+<svelte:head>
+	<title>{data.recipe.name} — Mealplan</title>
+</svelte:head>
+
+<div>
+	<RecipeHero recipe={data.recipe} />
+
+	<div class="md:flex">
+		<div class="md:flex-1 md:border-r md:border-[var(--color-border)] p-[24px]">
+			<IngredientList ingredients={data.recipe.ingredients} />
+		</div>
+		<div class="md:flex-1 p-[24px]">
+			<StepList steps={data.recipe.steps} />
+		</div>
+	</div>
+</div>