🎨 style: update styles and layout in base templates and CSS files

templates/base.html

@@ -638,36 +638,66 @@
       // Globaler Zugriff für externe Skripte
       window.MindMap = window.MindMap || {};
       
-      window.MindMap.toggleDarkMode = function() {
-        // Alpine.js-Instanz benutzen, wenn verfügbar
+      // Funktion zum Anwenden des Dark Mode, strikt getrennt
+      function applyDarkModeClasses(isDarkMode) {
+        if (isDarkMode) {
+          document.documentElement.classList.add('dark');
+          document.body.classList.add('dark');
+          localStorage.setItem('colorMode', 'dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+          document.body.classList.remove('dark');
+          localStorage.setItem('colorMode', 'light');
+        }
+        
+        // Alpine.js darkMode-Variable aktualisieren, falls zutreffend
         const appEl = document.querySelector('body');
         if (appEl && appEl.__x) {
-          appEl.__x.$data.toggleDarkMode();
-        } else {
-          // Fallback: Nur classList und localStorage
-          const isDark = document.documentElement.classList.contains('dark');
-          document.documentElement.classList.toggle('dark', !isDark);
-          document.body.classList.toggle('dark', !isDark);
-          localStorage.setItem('colorMode', !isDark ? 'dark' : 'light');
-          
-          // Server aktualisieren
-          fetch('/api/set_dark_mode', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ darkMode: !isDark })
-          }).catch(console.error);
+          appEl.__x.$data.darkMode = isDarkMode;
         }
+      }
+      
+      window.MindMap.toggleDarkMode = function() {
+        const isDark = document.body.classList.contains('dark');
+        applyDarkModeClasses(!isDark);
+        
+        // Server aktualisieren
+        fetch('/api/set_dark_mode', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ darkMode: !isDark })
+        }).catch(console.error);
       };
       
-      // Fallback für Browser-Präferenz, falls keine Einstellung geladen werden konnte
+      // Initialisierung beim Laden
       document.addEventListener('DOMContentLoaded', function() {
-        if (!document.body.classList.contains('dark') && !document.documentElement.classList.contains('dark')) {
+        // Reihenfolge der Prüfungen: Serverseitige Einstellung > Lokale Einstellung > Browser-Präferenz
+        
+        // 1. Zuerst lokale Einstellung prüfen
+        const storedMode = localStorage.getItem('colorMode');
+        if (storedMode) {
+          applyDarkModeClasses(storedMode === 'dark');
+        } else {
+          // 2. Fallback auf Browser-Präferenz
           const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-          if (prefersDark) {
-            document.documentElement.classList.add('dark');
-            document.body.classList.add('dark');
-          }
+          applyDarkModeClasses(prefersDark);
         }
+        
+        // 3. Serverseitige Einstellung abrufen und anwenden
+        fetch('/api/get_dark_mode')
+          .then(response => response.json())
+          .then(data => {
+            const serverDarkMode = data.darkMode === true || data.darkMode === 'true';
+            applyDarkModeClasses(serverDarkMode);
+          })
+          .catch(error => console.error('Fehler beim Abrufen des Dark Mode Status:', error));
+        
+        // Listener für Änderungen der Browser-Präferenz
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+          if (localStorage.getItem('colorMode') === null) {
+            applyDarkModeClasses(e.matches);
+          }
+        });
       });
     </script>
 </body>