From 07ddd9c91ad4ccae71a7ff236715aed9ed8ae53b Mon Sep 17 00:00:00 2001
From: schmop <lars.richard@rocketmail.com>
Date: Sun, 31 May 2026 18:03:21 +0200
Subject: [PATCH] =?UTF-8?q?Vollbild-Knopf=20im=20Startbildschirm=20hinzuf?=
 =?UTF-8?q?=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/FullscreenToggle.svelte | 72 +++++++++++++++++++
 src/lib/screens/HomeScreen.svelte             | 27 ++++---
 2 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/shared/FullscreenToggle.svelte

diff --git a/src/lib/components/shared/FullscreenToggle.svelte b/src/lib/components/shared/FullscreenToggle.svelte
new file mode 100644
index 0000000..2737e2b
--- /dev/null
+++ b/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>
diff --git a/src/lib/screens/HomeScreen.svelte b/src/lib/screens/HomeScreen.svelte
index c18ec49..a7a5ebf 100644
--- a/src/lib/screens/HomeScreen.svelte
+++ b/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}>
-      <svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
-        <path
-          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"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </IconButton>
+    <div class="actions">
+      <FullscreenToggle />
+      <IconButton label="Einstellungen" onClick={goSettings}>
+        <svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
+          <path
+            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"
+            fill-rule="evenodd"
+          />
+        </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;