fix(recipes): address B2 review — tags, sort, edit link, types, a11y, tests

- RecipeHero: render tag pills, min-h-[200px/240px], fix back link styling, remove font-[400]
- IngredientList: sort by sortOrder ascending
- StepList: aria-hidden on step circles
- types.ts: add Tag, Ingredient, Step, RecipeDetail shared types
- +page.svelte: add Edit link → /recipes/[id]/edit (desktop topbar)
- Tests: tag pills, sortOrder sort, edit link, image variant, 403-as-404 documented

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

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

@@ -2,22 +2,9 @@
 	import RecipeHero from '$lib/recipes/RecipeHero.svelte';
 	import IngredientList from '$lib/recipes/IngredientList.svelte';
 	import StepList from '$lib/recipes/StepList.svelte';
+	import type { RecipeDetail } from '$lib/recipes/types';
 
-	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();
+	let { data }: { data: { recipe: RecipeDetail } } = $props();
 </script>
 
 <svelte:head>
@@ -25,6 +12,15 @@
 </svelte:head>
 
 <div>
+	<div class="hidden md:flex items-center justify-end px-[24px] py-[12px] border-b border-[var(--color-border)]">
+		<a
+			href="/recipes/{data.recipe.id}/edit"
+			class="border border-[var(--color-border)] text-[var(--color-text)] text-[13px] font-medium font-sans tracking-[0.04em] rounded-[var(--radius-md)] px-[16px] py-[8px]"
+		>
+			Bearbeiten
+		</a>
+	</div>
+
 	<RecipeHero recipe={data.recipe} />
 
 	<div class="md:flex">