diff --git a/api.html b/api.html
index 3a1e2be..247756a 100644
--- a/api.html
+++ b/api.html
@@ -29,18 +29,22 @@
diff --git a/css/style.css b/css/style.css
index 83b251f..141b77c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -534,6 +534,80 @@ nav {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
+ align-items: center;
+}
+
+/* ── Dropdown "Start" ── */
+.nav-dropdown {
+ position: relative;
+}
+
+.nav-dropdown-trigger {
+ display: flex;
+ align-items: center;
+ gap: 0.2rem;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.nav-dropdown-menu {
+ display: none;
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ min-width: 170px;
+ background: rgba(255,255,255,0.98);
+ border: 2px solid rgba(255,105,180,0.35);
+ border-radius: 14px;
+ padding: 0.4rem;
+ flex-direction: column;
+ gap: 0.1rem;
+ box-shadow: 0 8px 28px rgba(255,20,147,0.15);
+ z-index: 200;
+ backdrop-filter: blur(14px);
+}
+
+.nav-dropdown:hover .nav-dropdown-menu,
+.nav-dropdown.open .nav-dropdown-menu {
+ display: flex;
+}
+
+.nav-dropdown-menu a {
+ padding: 0.55rem 0.9rem;
+ border-radius: 9px;
+ font-size: 0.92rem;
+ color: #ff1493;
+ white-space: nowrap;
+}
+
+.nav-dropdown-menu a:hover {
+ background: rgba(255,20,147,0.1);
+}
+
+.nav-dropdown-menu a.active {
+ background: linear-gradient(135deg, #ff1493, #ff69b4);
+ color: #fff;
+ box-shadow: none;
+}
+
+/* Dark Mode dropdown */
+body.dark .nav-dropdown-menu {
+ background: rgba(15,23,42,0.97);
+ border-color: #334155;
+ box-shadow: 0 8px 28px rgba(0,0,0,0.4);
+}
+
+body.dark .nav-dropdown-menu a {
+ color: #93c5fd;
+}
+
+body.dark .nav-dropdown-menu a:hover {
+ background: rgba(96,165,250,0.15);
+}
+
+body.dark .nav-dropdown-menu a.active {
+ background: linear-gradient(135deg, #3b82f6, #1e40af);
+ color: #fff;
}
nav a {
@@ -2702,6 +2776,40 @@ body.dark .nav-toggle span {
text-decoration: none;
}
+ /* Mobile Dropdown: immer ausgeklappt im Hamburger-Menü */
+ nav#main-nav .nav-dropdown {
+ position: static;
+ }
+
+ nav#main-nav .nav-dropdown-trigger {
+ font-weight: 700;
+ color: #ff1493;
+ padding: 0.75rem 1rem;
+ border-radius: 10px;
+ pointer-events: none; /* Im Hamburger nicht klickbar – immer offen */
+ }
+
+ nav#main-nav .nav-dropdown-trigger::after {
+ display: none;
+ }
+
+ nav#main-nav .nav-dropdown-menu {
+ display: flex;
+ position: static;
+ background: rgba(255,20,147,0.04);
+ border: 1px solid rgba(255,105,180,0.2);
+ border-radius: 10px;
+ padding: 0.3rem 0.3rem 0.3rem 0.8rem;
+ box-shadow: none;
+ min-width: unset;
+ margin-bottom: 0.25rem;
+ }
+
+ nav#main-nav .nav-dropdown-menu a {
+ font-size: 0.95rem;
+ padding: 0.55rem 0.75rem;
+ }
+
body.dark nav#main-nav {
background: rgba(15, 23, 42, 0.98);
border-color: #334155;
@@ -2713,6 +2821,11 @@ body.dark .nav-toggle span {
background: rgba(96, 165, 250, 0.15);
}
+ body.dark nav#main-nav .nav-dropdown-menu {
+ background: rgba(96,165,250,0.05);
+ border-color: #334155;
+ }
+
/* Typography */
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
diff --git a/eis_projekt.html b/eis_projekt.html
index f85d1b4..595bcac 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -29,18 +29,22 @@
diff --git a/galerie.html b/galerie.html
index a5a07dd..d8811e3 100644
--- a/galerie.html
+++ b/galerie.html
@@ -29,18 +29,22 @@
diff --git a/impressum.html b/impressum.html
index c1ebfb1..956e38c 100644
--- a/impressum.html
+++ b/impressum.html
@@ -29,18 +29,22 @@
diff --git a/index.html b/index.html
index 5948b17..7b492b3 100644
--- a/index.html
+++ b/index.html
@@ -29,18 +29,22 @@
diff --git a/js/script.js b/js/script.js
index 308db4a..88d73f0 100644
--- a/js/script.js
+++ b/js/script.js
@@ -78,6 +78,33 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
+ // ===========================
+ // Dropdown "Start" – Touch/Click Toggle
+ // ===========================
+ const dropdowns = document.querySelectorAll('.nav-dropdown');
+ dropdowns.forEach(function(dd) {
+ const trigger = dd.querySelector('.nav-dropdown-trigger');
+ if (!trigger) return;
+ // Auf Touch-Geräten: Klick toggelt das Dropdown
+ trigger.addEventListener('click', function(e) {
+ // Nur wenn hover nicht greift (touch) oder Desktop-Klick direkt auf Trigger
+ const isMobile = window.matchMedia('(max-width: 768px)').matches;
+ if (!isMobile) {
+ // Desktop: navigate to index.html if it's a link click
+ return; // hover handles it
+ }
+ e.preventDefault();
+ // Im Hamburger-Menü: nichts tun (always open via CSS)
+ });
+
+ // Desktop: Dropdown per Klick schließen wenn man außerhalb klickt
+ document.addEventListener('click', function(e) {
+ if (!dd.contains(e.target)) {
+ dd.classList.remove('open');
+ }
+ });
+ });
+
// ===========================
// Active Navigation Highlighting
// ===========================
diff --git a/kanban.html b/kanban.html
index 67d6f6d..47236bb 100644
--- a/kanban.html
+++ b/kanban.html
@@ -27,18 +27,22 @@
diff --git a/kontakt.html b/kontakt.html
index f061761..fab3cf3 100644
--- a/kontakt.html
+++ b/kontakt.html
@@ -29,15 +29,22 @@
diff --git a/notenrechner.html b/notenrechner.html
index 15c913c..1d76ed0 100644
--- a/notenrechner.html
+++ b/notenrechner.html
@@ -29,18 +29,22 @@
diff --git a/quiz.html b/quiz.html
index 68ae0aa..2060d43 100644
--- a/quiz.html
+++ b/quiz.html
@@ -29,18 +29,22 @@
diff --git a/team.html b/team.html
index 5cc2e04..1dbe965 100644
--- a/team.html
+++ b/team.html
@@ -29,18 +29,22 @@
diff --git a/textanalyse.html b/textanalyse.html
index eb6f5f2..8f6ceb4 100644
--- a/textanalyse.html
+++ b/textanalyse.html
@@ -29,18 +29,22 @@
diff --git a/ueber_uns.html b/ueber_uns.html
index 5bf1728..3463f11 100644
--- a/ueber_uns.html
+++ b/ueber_uns.html
@@ -29,18 +29,22 @@