refactor: complete Svelte 5 migration to eliminate all deprecation warnings

Migrated all components and routes to Svelte 5 syntax standards:

Event Handlers:
- Updated all deprecated on:* directives to new on* attribute syntax
- Changed on:click → onclick, on:keydown → onkeydown, on:input → oninput
- Updated on:blur, on:focus, on:load, on:submit, on:cancel handlers

Reactive State:
- Added $state() declarations for all reactive variables
- Fixed non-reactive update warnings in layout and component files

Component API:
- Replaced <slot /> with {@render children()} pattern
- Added children prop to components using slots

Accessibility:
- Added id attributes to inputs and for attributes to labels
- Fixed label-control associations across forms
- Removed event listeners from non-interactive elements

HTML Fixes:
- Fixed self-closing textarea tags
- Corrected implicitly closed elements
- Proper element nesting

CSS Cleanup:
- Removed 20+ unused CSS selectors across components
- Cleaned up orphaned styles from refactoring

All vite-plugin-svelte warnings resolved. Codebase now fully compliant with Svelte 5.

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

@@ -499,8 +499,9 @@ button.action_button{
 					<p style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--nord3);"><strong>Bild {i + 1}:</strong> {image.mediapath}</p>
 
 					<div style="margin-bottom: 0.75rem;">
-						<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Alt-Text (DE):</label>
+						<label for="image-alt-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Alt-Text (DE):</label>
 						<input
+							id="image-alt-{i}"
 							type="text"
 							bind:value={image.alt}
 							placeholder="Beschreibung des Bildes für Screenreader (Deutsch)"
@@ -509,8 +510,9 @@ button.action_button{
 					</div>
 
 					<div style="margin-bottom: 0.75rem;">
-						<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Caption (DE):</label>
+						<label for="image-caption-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Caption (DE):</label>
 						<input
+							id="image-caption-{i}"
 							type="text"
 							bind:value={image.caption}
 							placeholder="Bildunterschrift (optional)"