From f3cb948878859f63bed68feb10db3c10ac6e38d6 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 18:16:34 +0200
Subject: [PATCH] feat(04-02): global error handler + child-friendly error
 overlay

- Add error overlay HTML element in index.html before script tag
- Add window error + unhandledrejection listeners in main.ts
- Add error overlay CSS styles (fixed, z-index 9999, tree icon, reload button)
- Error message: "Oh, der Wald braucht kurz eine Pause..."
---
 index.html          |  8 ++++++++
 src/main.ts         | 12 ++++++++++++
 src/styles/main.css | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/index.html b/index.html
index 19d0006..f276680 100644
--- a/index.html
+++ b/index.html
@@ -183,6 +183,14 @@
 			</div>
 		</section>
 
+		<div id="error-overlay" class="error-overlay" style="display:none">
+			<div class="error-overlay__content">
+				<p class="error-overlay__icon">&#x1F333;</p>
+				<p class="error-overlay__message">Oh, der Wald braucht kurz eine Pause...</p>
+				<button class="error-overlay__btn" onclick="location.reload()">Nochmal versuchen</button>
+			</div>
+		</div>
+
 		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index cba4f8f..97fe777 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,16 @@
 import "./styles/main.css";
 import { initApp } from "./app";
 
+window.addEventListener("error", (event) => {
+	console.error("Global error:", event.error);
+	const overlay = document.getElementById("error-overlay");
+	if (overlay) overlay.style.display = "flex";
+});
+
+window.addEventListener("unhandledrejection", (event) => {
+	console.error("Unhandled rejection:", event.reason);
+	const overlay = document.getElementById("error-overlay");
+	if (overlay) overlay.style.display = "flex";
+});
+
 document.addEventListener("DOMContentLoaded", initApp);
diff --git a/src/styles/main.css b/src/styles/main.css
index bd7967b..ac564d0 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -964,6 +964,45 @@ h3 {
 	}
 }
 
+/* Error overlay — kindgerechte Fehlermeldung */
+.error-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(255, 248, 240, 0.95);
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.error-overlay__content {
+	text-align: center;
+	padding: 2rem;
+}
+
+.error-overlay__icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+}
+
+.error-overlay__message {
+	font-family: "Quicksand", sans-serif;
+	font-size: 1.25rem;
+	color: var(--text-dark);
+	margin-bottom: 1.5rem;
+}
+
+.error-overlay__btn {
+	font-family: "Quicksand", sans-serif;
+	font-size: 1rem;
+	padding: 0.75rem 2rem;
+	background: var(--accent-green);
+	color: white;
+	border: none;
+	border-radius: 12px;
+	cursor: pointer;
+}
+
 /* Accessibility: respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
 	.falling-letter,