diff --git a/css/style.css b/css/style.css
index 4ead280..ef6a173 100644
--- a/css/style.css
+++ b/css/style.css
@@ -52,3 +52,110 @@
     footer { text-align: center; padding: 2rem; font-size: 0.78rem; color: rgba(255,255,255,0.22); border-top: 1px solid rgba(255,255,255,0.07); }
     footer a { color: rgba(255,255,255,0.22); text-decoration: none; margin: 0 0.5rem; }
     footer a:hover { color: #fff; }
+
+    /* =========================
+   Dark Mode
+========================= */
+
+body.dark {
+  background: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark nav {
+  background: rgba(15, 23, 42, 0.95);
+  border-bottom: 1px solid #334155;
+}
+
+body.dark nav .logo {
+  color: #ffffff;
+}
+
+body.dark nav ul a {
+  color: rgba(226, 232, 240, 0.7);
+}
+
+body.dark nav ul a:hover,
+body.dark nav ul a.active {
+  color: #ffffff;
+}
+
+body.dark .hero {
+  background:
+    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
+    url('../img/Hintergrund.jpg') center/cover no-repeat;
+}
+
+body.dark .hero-tag {
+  color: rgba(226, 232, 240, 0.5);
+}
+
+body.dark .hero h1 {
+  color: #ffffff;
+}
+
+body.dark .hero h1 span {
+  color: #60a5fa;
+}
+
+body.dark .hero p {
+  color: rgba(226, 232, 240, 0.8);
+}
+
+body.dark .btn {
+  background: #60a5fa;
+  color: #ffffff;
+}
+
+body.dark .btn:hover {
+  background: #3b82f6;
+}
+
+body.dark .card {
+  background: #334155;
+}
+
+body.dark .card:hover {
+  background: #475569;
+}
+
+body.dark .card p {
+  color: rgba(226, 232, 240, 0.75);
+}
+
+body.dark footer {
+  color: rgba(226, 232, 240, 0.6);
+  border-top: 1px solid #334155;
+}
+
+body.dark footer a {
+  color: rgba(226, 232, 240, 0.6);
+}
+
+body.dark footer a:hover {
+  color: #ffffff;
+}
+
+/* Button-Styling */
+#dark-mode-toggle {
+  padding: 0.6rem 1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background: #ffffff;
+  color: #001f44;
+  font-family: 'Barlow', sans-serif;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+#dark-mode-toggle:hover {
+  opacity: 0.9;
+}
+
+body.dark #dark-mode-toggle {
+  background: #60a5fa;
+  color: #ffffff;
+}
diff --git a/index.html b/index.html
index 842ce31..ba92f04 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,8 @@
       <li><a href="kontakt.html">Kontakt</a></li>
       <li><a href="impressum.html">Impressum</a></li>
     </ul>
+
+     <button id="dark-mode-toggle">Dark Mode</button>
   </nav>
 
   <section class="hero">