fix(recipes): address review feedback — shared type, design system tokens, test coverage

- Extract RecipeSummary type to $lib/recipes/types.ts (was duplicated in 3 files)
- Fix +page.svelte header link: replace Skeleton UI classes with design system tokens
- Fix h1: use font-[var(--font-display)] and correct size
- Fix FilterChipRow: text-[11px] → text-[13px] + tracking-[0.04em] per design system
- Fix RecipeCard metadata: text-[11px] → text-[12px] for readability
- Remove unused imports (vi, beforeEach, afterEach) from page.test.ts
- Add combined search + effort filter test
- Add reset-to-Alle filter test

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

frontend/src/lib/recipes/FilterChipRow.svelte

@@ -10,7 +10,7 @@
       type="button"
       aria-pressed={activeFilter === label}
       onclick={() => onFilter(label)}
-      class="font-sans text-[11px] font-medium px-[14px] py-[5px] rounded-[12px] border cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)] {activeFilter === label
+      class="font-sans text-[13px] font-medium tracking-[0.04em] px-[14px] py-[5px] rounded-[12px] border cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)] {activeFilter === label
         ? 'bg-[var(--green-tint)] text-[var(--green-dark)] border-[var(--green-light)]'
         : 'bg-[var(--color-surface)] text-[var(--color-text-muted)] border-[var(--color-border)]'}"
     >

frontend/src/lib/recipes/RecipeCard.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	type RecipeSummary = {
-		id: string;
-		name: string;
-		cookTimeMin?: number;
-		effort?: string;
-		heroImageUrl?: string;
-	};
+	import type { RecipeSummary } from './types';
 
 	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
 
@@ -60,7 +54,7 @@
 	<div class="px-2 py-1.5">
 		<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
 		{#if metadata}
-			<p class="text-[11px] text-[var(--color-text-muted)]">{metadata}</p>
+			<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
 		{/if}
 	</div>
 </a>

frontend/src/lib/recipes/RecipeGrid.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import RecipeCard from './RecipeCard.svelte';
-
-	type RecipeSummary = { id: string; name: string; cookTimeMin?: number; effort?: string; heroImageUrl?: string };
+	import type { RecipeSummary } from './types';
 
 	let { recipes }: { recipes: RecipeSummary[] } = $props();
 </script>

frontend/src/lib/recipes/types.ts

@@ -0,0 +1,7 @@
+export type RecipeSummary = {
+	id: string;
+	name: string;
+	cookTimeMin?: number;
+	effort?: string;
+	heroImageUrl?: string;
+};