Vollbild-Knopf im Startbildschirm hinzufügen

src/lib/components/shared/FullscreenToggle.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  // Vollbild umschalten via Fullscreen-API. Wird ausgeblendet, wo die API fehlt (z. B. iPhone-Safari).
+  const supported =
+    typeof document !== 'undefined' && typeof document.documentElement.requestFullscreen === 'function';
+
+  let isFullscreen = $state(false);
+
+  function sync() {
+    isFullscreen = !!document.fullscreenElement;
+  }
+
+  $effect(() => {
+    sync();
+    document.addEventListener('fullscreenchange', sync);
+    return () => document.removeEventListener('fullscreenchange', sync);
+  });
+
+  function toggle() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    } else {
+      document.documentElement.requestFullscreen?.().catch(() => {});
+    }
+  }
+</script>
+
+{#if supported}
+  <button
+    class="fs-toggle"
+    type="button"
+    aria-label={isFullscreen ? 'Vollbild beenden' : 'Vollbild'}
+    onclick={toggle}
+  >
+    {#if isFullscreen}
+      <svg width="30" height="30" viewBox="0 0 32 32" aria-hidden="true">
+        <path
+          d="M13 4 L13 13 L4 13 M19 4 L19 13 L28 13 M13 28 L13 19 L4 19 M19 28 L19 19 L28 19"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {:else}
+      <svg width="30" height="30" viewBox="0 0 32 32" aria-hidden="true">
+        <path
+          d="M4 11 L4 4 L11 4 M28 11 L28 4 L21 4 M4 21 L4 28 L11 28 M28 21 L28 28 L21 28"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .fs-toggle {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.18);
+    color: var(--c-text-on-dark);
+    display: grid;
+    place-items: center;
+    transition: transform 0.12s ease;
+  }
+  .fs-toggle:active { transform: scale(0.92); }
+</style>

src/lib/screens/HomeScreen.svelte

@@ -6,6 +6,7 @@
   import { play, unlockAudio } from '../audio/soundManager';
   import NumberCard from '../components/home/NumberCard.svelte';
   import SoundToggle from '../components/shared/SoundToggle.svelte';
+  import FullscreenToggle from '../components/shared/FullscreenToggle.svelte';
   import IconButton from '../components/shared/IconButton.svelte';
 
   function handlePick(t: Target) {
@@ -20,15 +21,18 @@
   <header class="topbar">
     <SoundToggle />
     <h1 class="visually-hidden">Zahlzerlegung</h1>
-    <IconButton label="Einstellungen" onClick={goSettings}>
+    <div class="actions">
-      <svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
+      <FullscreenToggle />
-        <path
+      <IconButton label="Einstellungen" onClick={goSettings}>
-          d="M14 3 L18 3 L18.6 6.4 L21.5 7.6 L23.9 5.3 L26.7 8.1 L24.4 10.5 L25.6 13.4 L29 14 L29 18 L25.6 18.6 L24.4 21.5 L26.7 23.9 L23.9 26.7 L21.5 24.4 L18.6 25.6 L18 29 L14 29 L13.4 25.6 L10.5 24.4 L8.1 26.7 L5.3 23.9 L7.6 21.5 L6.4 18.6 L3 18 L3 14 L6.4 13.4 L7.6 10.5 L5.3 8.1 L8.1 5.3 L10.5 7.6 L13.4 6.4 Z M16 12 A4 4 0 1 0 16.001 12 Z"
+        <svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
-          fill="currentColor"
+          <path
-          fill-rule="evenodd"
+            d="M14 3 L18 3 L18.6 6.4 L21.5 7.6 L23.9 5.3 L26.7 8.1 L24.4 10.5 L25.6 13.4 L29 14 L29 18 L25.6 18.6 L24.4 21.5 L26.7 23.9 L23.9 26.7 L21.5 24.4 L18.6 25.6 L18 29 L14 29 L13.4 25.6 L10.5 24.4 L8.1 26.7 L5.3 23.9 L7.6 21.5 L6.4 18.6 L3 18 L3 14 L6.4 13.4 L7.6 10.5 L5.3 8.1 L8.1 5.3 L10.5 7.6 L13.4 6.4 Z M16 12 A4 4 0 1 0 16.001 12 Z"
-        />
+            fill="currentColor"
-      </svg>
+            fill-rule="evenodd"
-    </IconButton>
+          />
+        </svg>
+      </IconButton>
+    </div>
   </header>
 
   <div class="cards-grid">
@@ -51,6 +55,11 @@
     justify-content: space-between;
     align-items: center;
   }
+  .actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
   .visually-hidden {
     position: absolute;
     width: 1px;