Fix: Dark Mode komplett überarbeitet - type=button hinzugefügt, IIFE für sofortige Restoration, vereinfachter Event Handler

css/style.css

@@ -83,68 +83,92 @@ body::before {
 }
 
 /* Dark Mode Styles */
+html.dark,
+html.dark ,
 body.dark {
   background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f1929 100%);
   color: #e2e8f0;
 }
 
 /* Dark Mode - Text & Headings */
+html.dark h1, 
+html.dark ,
 body.dark h1,
+html.dark h2, 
+html.dark ,
 body.dark h2, 
+html.dark h3, 
+html.dark ,
 body.dark h3, 
+html.dark h4, 
+html.dark ,
 body.dark h4, 
+html.dark ,
 body.dark h5, 
+html.dark ,
 body.dark h6 {
   color: #60a5fa;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
+html.dark ,
 body.dark p {
   color: #cbd5e1;
 }
 
+html.dark ,
 body.dark a {
   color: #93c5fd;
   transition: all 0.2s ease;
 }
 
+html.dark ,
 body.dark a:hover {
   color: #60a5fa;
 }
 
 /* Dark Mode - Header */
+html.dark ,
 body.dark header {
   background-color: rgba(15, 23, 42, 0.95);
   border-bottom-color: #334155;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
+html.dark ,
 body.dark header h1,
+html.dark ,
 body.dark header h2 {
   color: #60a5fa;
 }
 
 /* Dark Mode - Navigation */
+html.dark ,
 body.dark nav {
   background-color: rgba(15, 23, 42, 0.95);
   border-color: #334155;
 }
 
+html.dark ,
 body.dark nav a {
   color: #93c5fd;
   transition: color 0.2s ease;
 }
 
+html.dark ,
 body.dark nav a:hover,
+html.dark ,
 body.dark nav a.active {
   color: #60a5fa;
 }
 
 /* Dark Mode - Main Content */
+html.dark ,
 body.dark main {
   background-color: transparent;
 }
 
+html.dark ,
 body.dark section {
   background: rgba(30, 41, 59, 0.7);
   border-color: #334155;
@@ -152,12 +176,15 @@ body.dark section {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
+html.dark ,
 body.dark section h2,
+html.dark ,
 body.dark section h3 {
   color: #60a5fa;
 }
 
 /* Dark Mode - Cards & Components */
+html.dark ,
 body.dark .card {
   background: rgba(30, 41, 59, 0.8);
   border-color: #334155;
@@ -165,21 +192,25 @@ body.dark .card {
   transition: all 0.2s ease;
 }
 
+html.dark ,
 body.dark .card:hover {
   background: rgba(30, 41, 59, 0.95);
   box-shadow: 0 8px 12px rgba(59, 130, 246, 0.2);
   border-color: #60a5fa;
 }
 
+html.dark ,
 body.dark .card h3 {
   color: #60a5fa;
 }
 
+html.dark ,
 body.dark .card p {
   color: #cbd5e1;
 }
 
 /* Dark Mode - Buttons */
+html.dark ,
 body.dark button {
   background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
   color: #ffffff;
@@ -187,14 +218,18 @@ body.dark button {
   transition: all 0.2s ease;
 }
 
+html.dark ,
 body.dark button:hover {
   background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }
 
 /* Dark Mode - Form Elements */
+html.dark ,
 body.dark input,
+html.dark ,
 body.dark textarea,
+html.dark ,
 body.dark select {
   background-color: rgba(51, 65, 85, 0.6);
   border-color: #475569;
@@ -202,13 +237,18 @@ body.dark select {
   transition: all 0.2s ease;
 }
 
+html.dark ,
 body.dark input::placeholder,
+html.dark ,
 body.dark textarea::placeholder {
   color: #94a3b8;
 }
 
+html.dark ,
 body.dark input:focus,
+html.dark ,
 body.dark textarea:focus,
+html.dark ,
 body.dark select:focus {
   border-color: #60a5fa;
   background-color: rgba(51, 65, 85, 0.8);
@@ -217,54 +257,66 @@ body.dark select:focus {
 }
 
 /* Dark Mode - Progress Bars */
+html.dark ,
 body.dark .progress-bar {
   background: rgba(96, 165, 250, 0.2);
   border-color: #3b82f6;
 }
 
+html.dark ,
 body.dark .progress-fill {
   background: linear-gradient(90deg, #3b82f6, #60a5fa);
   box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
 }
 
 /* Dark Mode - Tables */
+html.dark ,
 body.dark table {
   background-color: rgba(30, 41, 59, 0.8);
   border-color: #334155;
 }
 
+html.dark ,
 body.dark table thead {
   background-color: rgba(15, 23, 42, 0.9);
   color: #60a5fa;
 }
 
+html.dark ,
 body.dark table tbody tr {
   border-color: #334155;
 }
 
+html.dark ,
 body.dark table tbody tr:hover {
   background-color: rgba(59, 130, 246, 0.15);
 }
 
+html.dark ,
 body.dark table td,
+html.dark ,
 body.dark table th {
   color: #cbd5e1;
   border-color: #334155;
 }
 
 /* Dark Mode - Badges & Lists */
+html.dark ,
 body.dark .badge,
+html.dark ,
 body.dark .tag {
   background-color: rgba(59, 130, 246, 0.2);
   color: #60a5fa;
   border-color: #3b82f6;
 }
 
+html.dark ,
 body.dark li {
   color: #cbd5e1;
 }
 
 /* Dark Mode - Footer */
+html.dark ,
 body.dark footer {
   background-color: rgba(15, 23, 42, 0.95);
   border-top-color: #334155;
@@ -272,33 +324,39 @@ body.dark footer {
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
 }
 
+html.dark ,
 body.dark footer a {
   color: #93c5fd;
   transition: color 0.2s ease;
 }
 
+html.dark ,
 body.dark footer a:hover {
   color: #60a5fa;
 }
 
 /* Dark Mode - Hero Section */
+html.dark ,
 body.dark .hero {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 41, 59, 0.5) 100%);
   color: #e2e8f0;
 }
 
+html.dark ,
 body.dark .hero h1 {
   color: #60a5fa;
   text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 
 /* Dark Mode Toggle Button in Dark Mode */
+html.dark ,
 body.dark .dark-mode-toggle {
   background: #3b82f6;
   border-color: #60a5fa;
   box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(96, 165, 250, 0.2);
 }
 
+html.dark ,
 body.dark .dark-mode-toggle:hover {
   background: #60a5fa;
   box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(96, 165, 250, 0.3);

eis_projekt.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

galerie.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

impressum.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

index.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

js/script.js

@@ -2,49 +2,51 @@
 // Dark Mode Toggle
 // ===========================
 
-function initDarkMode() {
+// Sofort beim Laden: Dark Mode Preference wiederherstellen
+(function() {
+  if (localStorage.getItem('darkMode') === 'true') {
+    document.documentElement.classList.add('dark');
+    document.body.classList.add('dark');
+  }
+})();
+
+// Nach DOM Load: Event Listener attachen
+document.addEventListener('DOMContentLoaded', function() {
   const darkModeToggle = document.getElementById('dark-mode-toggle');
   
-  if (!darkModeToggle) {
+  if (darkModeToggle) {
-    console.warn('⚠️ Dark Mode Toggle Button nicht gefunden');
+    const icon = darkModeToggle.querySelector('.dark-mode-icon');
-    return;
-  }
     
-  const icon = darkModeToggle.querySelector('.dark-mode-icon');
+    // Icon auf aktuellen Status setzen
-  if (!icon) {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true';
-    console.warn('⚠️ Dark Mode Icon nicht gefunden');
+    icon.textContent = isDarkMode ? '☀️' : '🌙';
-    return;
-  }
     
-  // Restore dark mode preference from localStorage
+    // Click-Handler
-  const isDarkMode = localStorage.getItem('darkMode') === 'true';
+    darkModeToggle.addEventListener('click', function(e) {
-  if (isDarkMode) {
+      e.preventDefault();
-    document.body.classList.add('dark');
+      e.stopPropagation();
-    icon.textContent = '☀️';
+      
+      console.log('🔘 Dark Mode Button geklickt');
+      
+      // Toggle Dark Mode
+      const isDark = document.body.classList.toggle('dark');
+      document.documentElement.classList.toggle('dark');
+      
+      // Speichern in localStorage
+      const darkModeState = document.body.classList.contains('dark');
+      localStorage.setItem('darkMode', darkModeState ? 'true' : 'false');
+      
+      // Icon aktualisieren
+      icon.textContent = darkModeState ? '☀️' : '🌙';
+      
+      console.log('✅ Dark Mode:', darkModeState ? 'EIN' : 'AUS', '| Gespeichert:', localStorage.getItem('darkMode'));
+    });
+    
+    console.log('✅ Dark Mode Toggle erfolgreich initialisiert');
   } else {
-    icon.textContent = '🌙';
+    console.error('❌ Dark Mode Toggle Button NICHT GEFUNDEN!');
   }
 
-  // Toggle dark mode on button click
-  darkModeToggle.addEventListener('click', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    console.log('🌙 Dark Mode Toggle geklickt');
-    
-    document.body.classList.toggle('dark');
-    const isDark = document.body.classList.contains('dark');
-    localStorage.setItem('darkMode', isDark ? 'true' : 'false');
-    icon.textContent = isDark ? '☀️' : '🌙';
-    
-    console.log('💾 Dark Mode', isDark ? 'aktiviert' : 'deaktiviert');
-  });
-  
-  console.log('✅ Dark Mode Toggle erfolgreich initialisiert');
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-  initDarkMode();
-
   // ===========================
   // Active Navigation Highlighting
   // ===========================

kontakt.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

notenrechner.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

team.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

textanalyse.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>

ueber_uns.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <!-- Dark Mode Toggle Button -->
-      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+      <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>
       <nav>