From 5f8beaf75f7c1057acd096076bb04723072a830b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mara=20Z=C3=B6llner?= <marazoellner@web.de>
Date: Wed, 20 May 2026 21:22:33 +0200
Subject: [PATCH] =?UTF-8?q?integration=20drop=20down=20=C3=BCbungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css |  7 +++++++
 js/script.js  | 21 ++++++++++++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6723068..f0f965d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -147,3 +147,10 @@ body.dark #dark-mode-toggle { background: var(--accent); color: #0b1220; border-
 
 body.dark .page p, body.dark .bio { color: rgba(226,232,240,0.8); }
 body.dark .skill { border-color: rgba(226,232,240,0.2); color: rgba(226,232,240,0.7); }
+
+.dropdown { position: relative; }
+.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(0,20,60,0.97); border: 1px solid rgba(255,255,255,0.07); min-width: 160px; z-index: 200; }
+.dropdown-menu li { list-style: none; }
+.dropdown-menu a { display: block; padding: 0.7rem 1.2rem; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
+.dropdown-menu a:hover { color: #fff; }
+.dropdown.open .dropdown-menu { display: block; }
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index ef2421b..3b18d4c 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,4 +1,3 @@
-// Dark Mode
 document.addEventListener("DOMContentLoaded", () => {
   const toggle = document.getElementById("dark-mode-toggle");
   if (!toggle) return;
@@ -14,14 +13,22 @@ document.addEventListener("DOMContentLoaded", () => {
     localStorage.setItem("darkMode", isDark);
     updateToggle(toggle);
   });
+
+  document.querySelectorAll('.dropdown > a').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      btn.closest('.dropdown').classList.toggle('open');
+    });
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.dropdown')) {
+      document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('open'));
+    }
+  });
 });
 
 function updateToggle(toggle) {
   const isDark = document.body.classList.contains("dark");
   toggle.textContent = isDark ? "☀️ Light" : "🌙 Dark";
-}
-
-}
-
-
-
+}
\ No newline at end of file