diff --git a/eis_projekt.html b/eis_projekt.html
index 6c34c7b..93e72ca 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -9,7 +9,23 @@
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 </head>
+<script>
+function toggleDarkMode() {
+  document.body.classList.toggle("dark");
 
+  if (document.body.classList.contains("dark")) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+window.onload = function () {
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+};
+</script>
 <body>
 
 <nav>
@@ -22,6 +38,18 @@
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
   </ul>
+  <button onclick="toggleDarkMode()"
+style="
+  background: transparent;
+  border: 1px solid rgba(232,103,154,0.4);
+  color: var(--rose);
+  padding: 6px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8rem;
+">
+🌙 Mode
+</button>
 </nav>
 
 <section class="hero">
diff --git a/impressum.html b/impressum.html
index 482c32c..f1dd572 100644
--- a/impressum.html
+++ b/impressum.html
@@ -10,6 +10,23 @@
 <link rel="stylesheet" href="style.css">
 </head>
 
+<script>
+function toggleDarkMode() {
+  document.body.classList.toggle("dark");
+
+  if (document.body.classList.contains("dark")) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+window.onload = function () {
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+};
+</script>
 <body>
 
 <nav>
@@ -22,6 +39,18 @@
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
   </ul>
+  <button onclick="toggleDarkMode()"
+style="
+  background: transparent;
+  border: 1px solid rgba(232,103,154,0.4);
+  color: var(--rose);
+  padding: 6px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8rem;
+">
+🌙 Mode
+</button>
 </nav>
 
 <section class="hero">
diff --git a/index.html b/index.html
index 239e331..170af90 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,24 @@
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 </head>
+<script>
+function toggleDarkMode() {
+  document.body.classList.toggle("dark");
+
+  if (document.body.classList.contains("dark")) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+window.onload = function () {
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+};
+</script>
+
 <body>
 
  <nav>
@@ -18,6 +36,18 @@
      <a href="kontakt.html">Kontakt</a>
      <a href="impressum.html">Impressum</a>
      </ul>
+     <button onclick="toggleDarkMode()"
+style="
+  background: transparent;
+  border: 1px solid rgba(232,103,154,0.4);
+  color: var(--rose);
+  padding: 6px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8rem;
+">
+🌙 Mode
+</button>
    </nav>
 
 <div class="hero">
diff --git a/kontakt.html b/kontakt.html
index 6327358..1fa2184 100644
--- a/kontakt.html
+++ b/kontakt.html
@@ -9,7 +9,23 @@
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 </head>
+<script>
+function toggleDarkMode() {
+  document.body.classList.toggle("dark");
 
+  if (document.body.classList.contains("dark")) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+window.onload = function () {
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+};
+</script>
 <body>
 
 <nav>
@@ -22,6 +38,18 @@
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
   </ul>
+  <button onclick="toggleDarkMode()"
+style="
+  background: transparent;
+  border: 1px solid rgba(232,103,154,0.4);
+  color: var(--rose);
+  padding: 6px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8rem;
+">
+🌙 Mode
+</button>
 </nav>
 
 <section class="hero">
diff --git a/style.css b/style.css
index d70fcdf..33193c6 100644
--- a/style.css
+++ b/style.css
@@ -453,4 +453,33 @@ footer span {
   section {
     padding: 3rem 1.5rem;
   }
+
+  body.dark {
+  --cream: #120d14;
+  --text: #f5e9f2;
+  --muted: #c7b2c9;
+
+  background: var(--cream);
+  color: var(--text);
+}
+
+body.dark nav {
+  background: rgba(18, 13, 20, 0.85);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+body.dark .stat-card,
+body.dark .gallery-card {
+  background: #1b141d;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+body.dark .img-badge {
+  background: #1b141d;
+  color: var(--text);
+}
+
+body.dark footer {
+  background: #0d0a10;
+}
 }
\ No newline at end of file
diff --git a/ueber_uns.html b/ueber_uns.html
index 62364b0..30a9efc 100644
--- a/ueber_uns.html
+++ b/ueber_uns.html
@@ -10,6 +10,24 @@
 <link rel="stylesheet" href="style.css">
 </head>
 
+<script>
+function toggleDarkMode() {
+  document.body.classList.toggle("dark");
+
+  if (document.body.classList.contains("dark")) {
+    localStorage.setItem("theme", "dark");
+  } else {
+    localStorage.setItem("theme", "light");
+  }
+}
+
+window.onload = function () {
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.classList.add("dark");
+  }
+};
+</script>
+
 <body>
 
 <nav>
@@ -22,6 +40,18 @@
     <li><a href="kontakt.html">Kontakt</a></li>
     <li><a href="impressum.html">Impressum</a></li>
   </ul>
+  <button onclick="toggleDarkMode()"
+style="
+  background: transparent;
+  border: 1px solid rgba(232,103,154,0.4);
+  color: var(--rose);
+  padding: 6px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.8rem;
+">
+🌙 Mode
+</button>
 </nav>
 
 <section class="hero">
