refactor: migrate all Svelte components from Svelte 4 to Svelte 5 runes

- Replace `export let` with `$props()` and `$bindable()` across all components
- Replace `$:` reactive statements with `$derived()` and `$effect()`
- Replace `createEventDispatcher` with callback props (e.g. `onchange`)
- Replace `on:event` directives with inline event handlers (`onclick`, `oninput`, etc.)
- Replace `<slot />` with `{@render children()}` in layout
- Use `untrack()` for SSR-safe $state initialization from reactive props
- Replace `blur` + `setTimeout` anti-pattern in TagInput with `clickOutside` action
- Fix `page` store usage in layout to use `$app/state` directly
- 0 errors, 0 warnings after svelte-check

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/PersonMultiSelect.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
-    type Person = { id?: string; firstName?: string; lastName?: string; alias?: string };
+    import type { components } from '$lib/generated/api';
+    type Person = components['schemas']['Person'];
 
-    export let selectedPersons: Person[] = [];
+    interface Props {
+        selectedPersons?: Person[];
+    }
 
-    let searchTerm = '';
-    let results: Person[] = [];
-    let showDropdown = false;
-    let loading = false;
+    let { selectedPersons = $bindable([]) }: Props = $props();
+
+    let searchTerm = $state('');
+    let results: Person[] = $state([]);
+    let showDropdown = $state(false);
+    let loading = $state(false);
     let debounceTimer: ReturnType<typeof setTimeout>;
     let inputEl: HTMLInputElement;
-    let dropdownStyle = '';
+    let dropdownStyle = $state('');
 
     function updateDropdownPosition() {
         if (!inputEl) return;
@@ -47,7 +52,7 @@
 
     function clickOutside(node: HTMLElement) {
         const handleClick = (e: MouseEvent) => {
-            if (node && !node.contains(e.target as Node) && !(e as Event).defaultPrevented) {
+            if (node && !node.contains(e.target as Node) && !e.defaultPrevented) {
                 showDropdown = false;
             }
         };
@@ -56,7 +61,7 @@
     }
 </script>
 
-<svelte:window on:scroll={updateDropdownPosition} on:resize={updateDropdownPosition} />
+<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
 
 {#each selectedPersons as person}
     <input type="hidden" name="receiverIds" value={person.id} />
@@ -69,7 +74,7 @@
                 {person.firstName} {person.lastName}
                 <button
                     type="button"
-                    on:click={() => removePerson(person.id)}
+                    onclick={() => removePerson(person.id)}
                     class="text-brand-navy/50 hover:text-red-500 focus:outline-none ml-0.5"
                     aria-label="Entfernen"
                 >
@@ -85,8 +90,8 @@
             type="text"
             autocomplete="off"
             bind:value={searchTerm}
-            on:input={handleInput}
-            on:focus={() => { updateDropdownPosition(); showDropdown = true; }}
+            oninput={handleInput}
+            onfocus={() => { updateDropdownPosition(); showDropdown = true; }}
             placeholder={selectedPersons.length === 0 ? 'Namen tippen...' : ''}
             class="flex-1 min-w-[120px] border-none p-1 focus:ring-0 text-sm bg-transparent outline-none"
         />
@@ -101,10 +106,10 @@
                 <div class="p-2 text-gray-500 text-sm">Suche...</div>
             {:else}
                 {#each results as person}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <div
                         class="cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-brand-sand/30 text-gray-900"
-                        on:click={() => selectPerson(person)}
+                        onclick={() => selectPerson(person)}
+                        onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
                         role="button"
                         tabindex="0"
                     >