feat(settings): Settings-Panel und Theme-Picker mit View-Transition-Fade

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()  {
+  withViewTransition(() => {
     document.getElementById('settingsPanel').classList.add('open');
     document.getElementById('settingsOverlay').classList.add('active');
+  });
 }
 function closeSettings() {
+  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');
+  });
 }
 
 /**