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/lib/recipes/RecipeHero.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	type RecipeHeroProps = {
-		recipe: {
-			id: string;
-			name: string;
-			serves?: number;
-			cookTimeMin?: number;
-			effort?: string;
-			heroImageUrl?: string;
-			tags: { id: string; name: string; tagType?: string }[];
-		};
+	import type { Tag } from './types';
+
+	type RecipeHeroData = {
+		id: string;
+		name: string;
+		serves?: number;
+		cookTimeMin?: number;
+		effort?: string;
+		heroImageUrl?: string;
+		tags: Tag[];
 	};
 
-	let { recipe }: RecipeHeroProps = $props();
+	let { recipe }: { recipe: RecipeHeroData } = $props();
 
 	let hasImage = $derived(!!recipe.heroImageUrl);
 
@@ -30,7 +30,7 @@
 
 <div
 	data-testid="recipe-hero"
-	class="{hasImage
+	class="min-h-[200px] md:min-h-[240px] {hasImage
 		? 'relative text-white'
 		: 'bg-[var(--green-tint)] text-[var(--color-text)]'} p-[24px] md:p-[32px]"
 >
@@ -44,9 +44,9 @@
 	{/if}
 
 	<div class="relative">
-		<a href="/recipes" class="text-sm">← Zurück</a>
+		<a href="/recipes" class="text-[13px] font-sans font-medium text-[var(--color-text-muted)]">← Zurück</a>
 
-		<h1 class="font-[var(--font-display)] text-[24px] md:text-[28px] font-[400] mt-[8px]">
+		<h1 class="font-[var(--font-display)] text-[24px] md:text-[28px] mt-[8px]">
 			{recipe.name}
 		</h1>
 
@@ -60,6 +60,9 @@
 			{#if recipe.serves != null}
 				<span class={pillBase}>{recipe.serves} Port.</span>
 			{/if}
+			{#each recipe.tags as tag (tag.id)}
+				<span class={pillBase}>{tag.name}</span>
+			{/each}
 		</div>
 
 		<a href="/cook/{recipe.id}" class={cookBtnClass}>Jetzt kochen</a>