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/BibleModal.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
   import type { VerseData } from '$lib/data/mysteryDescriptions';
 
-  export let reference: string = '';
-  export let title: string = '';
-  export let verseData: VerseData | null = null;
-  export let onClose: () => void;
+  let {
+    reference = '',
+    title = '',
+    verseData = null,
+    onClose
+  }: {
+    reference?: string,
+    title?: string,
+    verseData?: VerseData | null,
+    onClose: () => void
+  } = $props();
 
-  let book: string = verseData?.book || '';
-  let chapter: number = verseData?.chapter || 0;
-  let verses: Array<{ verse: number; text: string }> = verseData?.verses || [];
-  let loading = false;
-  let error = verseData ? '' : 'Keine Versdaten verfügbar';
+  let book: string = $state(verseData?.book || '');
+  let chapter: number = $state(verseData?.chapter || 0);
+  let verses: Array<{ verse: number; text: string }> = $state(verseData?.verses || []);
+  let loading = $state(false);
+  let error = $state(verseData ? '' : 'Keine Versdaten verfügbar');
 
   function handleBackdropClick(event: MouseEvent) {
     if (event.target === event.currentTarget) {
@@ -25,9 +32,9 @@
   }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
-<div class="modal-backdrop" on:click={handleBackdropClick} role="presentation">
+<div class="modal-backdrop" onclick={handleBackdropClick} role="presentation">
   <div class="modal-content">
     <div class="modal-header">
       <div class="header-content">
@@ -42,7 +49,7 @@
         {/if}
         <p class="modal-reference">{reference}</p>
       </div>
-      <button class="close-button" on:click={onClose} aria-label="Schließen">
+      <button class="close-button" onclick={onClose} aria-label="Schließen">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <line x1="18" y1="6" x2="6" y2="18"></line>
           <line x1="6" y1="6" x2="18" y2="18"></line>