feat: complete Svelte 5 migration across entire application

Migrated all components and routes from Svelte 4 to Svelte 5 syntax:

- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax

- Updated deprecated event directives to Svelte 5 syntax:
  - on:click → onclick
  - on:submit → onsubmit
  - on:change → onchange

- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks

- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity

- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes

- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings

All functionality tested and working. No breaking changes to user experience.

src/lib/components/RecipeEditor.svelte

@@ -1,24 +1,28 @@
 <script lang="ts">
-	export let card_data ={
-	}
-	let short_name
-	let password
-	let datecreated = new Date()
-	let datemodified = datecreated
-
 	import CardAdd from '$lib/components/CardAdd.svelte';
     	import MediaScroller from '$lib/components/MediaScroller.svelte';
     	import Card from '$lib/components/Card.svelte';
     	import Search from '$lib/components/Search.svelte';
-
-	export let season = []
 	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
-
 	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
-	export let ingredients = []
-
 	import CreateStepList from '$lib/components/CreateStepList.svelte';
-	export let instructions = []
+
+	let {
+		card_data = $bindable({}),
+		season = $bindable([]),
+		ingredients = $bindable([]),
+		instructions = $bindable([])
+	}: {
+		card_data?: any,
+		season?: any[],
+		ingredients?: any[],
+		instructions?: any[]
+	} = $props();
+
+	let short_name = $state();
+	let password = $state();
+	let datecreated = $state(new Date());
+	let datemodified = $state(datecreated);
 
 	async function doPost () {
 		const res = await fetch('/api/add', {
@@ -61,15 +65,15 @@ input.temp{
 }
 </style>
 
-<CardAdd {card_data}></CardAdd>
+<CardAdd bind:card_data={card_data}></CardAdd>
 
 <input class=temp bind:value={short_name} placeholder="Kurzname"/>
 
-<SeasonSelect {season}></SeasonSelect>
-<button on:click={() => console.log(season)}>PRINTOUT season</button>
+<SeasonSelect bind:season={season}></SeasonSelect>
+<button onclick={() => console.log(season)}>PRINTOUT season</button>
 
 <h2>Zutaten</h2>
-<CreateIngredientList {ingredients}></CreateIngredientList>
+<CreateIngredientList bind:ingredients={ingredients}></CreateIngredientList>
 <h2>Zubereitung</h2>
-<CreateStepList {instructions} ></CreateStepList>
+<CreateStepList bind:instructions={instructions} ></CreateStepList>
 <input class=temp type="password" placeholder=Passwort bind:value={password}>