Nav: Start-Dropdown mit Untermenü (Hover), Hauptseiten bleiben oben

api.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html" class="active">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

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; }

eis_projekt.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html" class="active">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html" class="active">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

galerie.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html" class="active">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html" class="active">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

impressum.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html" class="active">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html" class="active">Impressum</a>
       </nav>
     </div>
   </header>

index.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html" class="active">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

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
   // ===========================

kanban.html

@@ -27,18 +27,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html" class="active">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

kontakt.html

@@ -29,15 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html" class="active">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
-        <a href="kontakt.html" class="active">Kontakt</a>
+        <a href="api.html">API Demo</a>
-        <a href="impressum.html">Impressum</a>
+        <a href="kanban.html">Kanban</a>
+        <a href="quiz.html">Quiz</a>
       </nav>
     </div>
   </header>

notenrechner.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html" class="active">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

quiz.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html" class="active">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

team.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html" class="active">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html" class="active">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

textanalyse.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html">Über uns</a>
+          <a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html" class="active">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>

ueber_uns.html

@@ -29,18 +29,22 @@
         <span></span><span></span><span></span>
       </button>
       <nav id="main-nav">
-        <a href="index.html">Start</a>
+        <div class="nav-dropdown">
-        <a href="ueber_uns.html" class="active">Über uns</a>
+          <a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
-        <a href="eis_projekt.html">Projekt</a>
+          <div class="nav-dropdown-menu">
-        <a href="team.html">Team</a>
+            <a href="ueber_uns.html" class="active">Über uns</a>
-        <a href="galerie.html">Galerie</a>
+            <a href="eis_projekt.html">Projekt</a>
+            <a href="team.html">Team</a>
+            <a href="galerie.html">Galerie</a>
+            <a href="kontakt.html">Kontakt</a>
+            <a href="impressum.html">Impressum</a>
+          </div>
+        </div>
         <a href="notenrechner.html">Notenrechner</a>
         <a href="textanalyse.html">Textanalyse</a>
         <a href="api.html">API Demo</a>
         <a href="kanban.html">Kanban</a>
         <a href="quiz.html">Quiz</a>
-        <a href="kontakt.html">Kontakt</a>
-        <a href="impressum.html">Impressum</a>
       </nav>
     </div>
   </header>