add English translation support for recipes with DeepL integration

- Add embedded translations schema to Recipe model with English support
- Create DeepL translation service with batch translation and change detection
- Build translation approval UI with side-by-side editing for all recipe fields
- Integrate translation workflow into add/edit pages with field comparison
- Create complete English recipe routes at /recipes/* mirroring German structure
- Add language switcher component with hreflang SEO tags
- Support image loading from German short_name for English recipes
- Add English API endpoints for all recipe filters (category, tag, icon, season)
- Include layout with English navigation header for all recipe subroutes

src/lib/components/EditableInstructions.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export let instructions: any[] = [];
+
+	const dispatch = createEventDispatcher();
+
+	function handleChange() {
+		dispatch('change', { instructions });
+	}
+
+	function updateInstructionGroupName(groupIndex: number, event: Event) {
+		const target = event.target as HTMLInputElement;
+		instructions[groupIndex].name = target.value;
+		handleChange();
+	}
+
+	function updateStep(groupIndex: number, stepIndex: number, event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		instructions[groupIndex].steps[stepIndex] = target.value;
+		handleChange();
+	}
+</script>
+
+<style>
+.instructions-editor {
+	background: var(--nord0);
+	border: 1px solid var(--nord3);
+	border-radius: 4px;
+	padding: 0.75rem;
+}
+
+@media(prefers-color-scheme: light) {
+	.instructions-editor {
+		background: var(--nord5);
+		border-color: var(--nord3);
+	}
+}
+
+.instruction-group {
+	margin-bottom: 1.5rem;
+}
+
+.instruction-group:last-child {
+	margin-bottom: 0;
+}
+
+.group-name {
+	width: 100%;
+	padding: 0.5rem;
+	margin-bottom: 0.5rem;
+	background: var(--nord1);
+	border: 1px solid var(--nord3);
+	border-radius: 4px;
+	color: var(--nord6);
+	font-weight: 600;
+	font-size: 0.95rem;
+}
+
+@media(prefers-color-scheme: light) {
+	.group-name {
+		background: var(--nord6);
+		color: var(--nord0);
+	}
+}
+
+.step-item {
+	margin-bottom: 0.75rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: flex-start;
+}
+
+.step-number {
+	min-width: 2rem;
+	padding: 0.4rem 0.5rem;
+	background: var(--nord3);
+	border-radius: 4px;
+	text-align: center;
+	color: var(--nord6);
+	font-weight: 600;
+	font-size: 0.9rem;
+}
+
+@media(prefers-color-scheme: light) {
+	.step-number {
+		background: var(--nord4);
+		color: var(--nord0);
+	}
+}
+
+.step-item textarea {
+	flex: 1;
+	padding: 0.5rem;
+	background: var(--nord1);
+	border: 1px solid var(--nord3);
+	border-radius: 4px;
+	color: var(--nord6);
+	font-size: 0.9rem;
+	font-family: inherit;
+	resize: vertical;
+	min-height: 3rem;
+}
+
+@media(prefers-color-scheme: light) {
+	.step-item textarea {
+		background: var(--nord6);
+		color: var(--nord0);
+	}
+}
+
+.step-item textarea:focus {
+	outline: 2px solid var(--nord14);
+	border-color: var(--nord14);
+}
+</style>
+
+<div class="instructions-editor">
+	{#each instructions as group, groupIndex}
+		<div class="instruction-group">
+			<input
+				type="text"
+				class="group-name"
+				value={group.name || ''}
+				on:input={(e) => updateInstructionGroupName(groupIndex, e)}
+				placeholder="Instruction section name"
+			/>
+			{#each group.steps as step, stepIndex}
+				<div class="step-item">
+					<div class="step-number">{stepIndex + 1}</div>
+					<textarea
+						value={step || ''}
+						on:input={(e) => updateStep(groupIndex, stepIndex, e)}
+						placeholder="Step description"
+					/>
+				</div>
+			{/each}
+		</div>
+	{/each}
+</div>