add bilingual labels to recipe components and fix language switcher

- Translate hardcoded German terms in IngredientsPage and InstructionsPage
- Migrate both components to Svelte 5 runes (, , )
- Fix language switcher to use correct short names via shared store
- Add recipeTranslationStore for recipe-specific language switching

src/routes/[recipeLang]/[name]/+page.svelte

@@ -14,9 +14,25 @@
 	import {stripHtmlTags} from '$lib/js/stripHtmlTags';
 	import FavoriteButton from '$lib/components/FavoriteButton.svelte';
 	import RecipeLanguageSwitcher from '$lib/components/RecipeLanguageSwitcher.svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { recipeTranslationStore } from '$lib/stores/recipeTranslation';
 
     	let { data }: { data: PageData } = $props();
 
+	// Set store for recipe translation data so UserHeader can access it
+	onMount(() => {
+		recipeTranslationStore.set({
+			germanShortName: data.germanShortName || data.short_name,
+			englishShortName: data.englishShortName,
+			hasEnglishTranslation: data.hasEnglishTranslation || false
+		});
+	});
+
+	// Clear store when leaving recipe page
+	onDestroy(() => {
+		recipeTranslationStore.set(null);
+	});
+
 	const isEnglish = $derived(data.lang === 'en');
 
 	// Use German short_name for images (they're the same for both languages)