From 24e9aa408b2cdf728c5888c7adb6bf24963b41d2 Mon Sep 17 00:00:00 2001
From: Jon Kazama <kontakt@hellion-media.de>
Date: Sat, 13 Jun 2026 20:31:10 +0200
Subject: [PATCH] feat(settings): Settings-Panel und Theme-Picker mit
 View-Transition-Fade

---
 src/js/settings.js | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index c829dff..5735039 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -3,24 +3,44 @@
    Settings Panel, Theme-Modal, Accordion, Toggles
    ============================================= */
 
+/**
+ * Fuehrt einen DOM-Mutationsschritt mit nativem View-Transition-Fade aus.
+ * Feature-Detection-Fallback fuer aeltere Browser (Firefox < 144): instant.
+ * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block.
+ * @param {Function} mutate - synchrone DOM-Mutation (Klassen-Toggle etc.)
+ */
+function withViewTransition(mutate) {
+  if (document.startViewTransition) {
+    document.startViewTransition(mutate);
+  } else {
+    mutate();
+  }
+}
+
 // ---- SETTINGS PANEL ----
 function openSettings()  {
-  document.getElementById('settingsPanel').classList.add('open');
-  document.getElementById('settingsOverlay').classList.add('active');
+  withViewTransition(() => {
+    document.getElementById('settingsPanel').classList.add('open');
+    document.getElementById('settingsOverlay').classList.add('active');
+  });
 }
 function closeSettings() {
-  document.getElementById('settingsPanel').classList.remove('open');
-  document.getElementById('settingsOverlay').classList.remove('active');
+  withViewTransition(() => {
+    document.getElementById('settingsPanel').classList.remove('open');
+    document.getElementById('settingsOverlay').classList.remove('active');
+  });
 }
 
 // ---- THEME MODAL ----
 function openThemeModal() {
-  const overlay = document.getElementById('themeOverlay');
-  overlay.classList.add('active');
+  withViewTransition(() => {
+    document.getElementById('themeOverlay').classList.add('active');
+  });
 }
 function closeThemeModal() {
-  const overlay = document.getElementById('themeOverlay');
-  overlay.classList.remove('active');
+  withViewTransition(() => {
+    document.getElementById('themeOverlay').classList.remove('active');
+  });
 }
 
 /**