From 9d3efeae700e33d109600de613294b280ccc74fd Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Sun, 2 Aug 2026 16:39:26 +0200
Subject: [PATCH] =?UTF-8?q?Kategorie-Dropdowns=20aufgeh=C3=BCbscht=20(ware?=
 =?UTF-8?q?n=20schlichte=20graue=20K=C3=A4sten)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gleicher gläserner Dropdown-Stil wie beim Sprachschalter, aber im
Farbton der jeweiligen Kategorie statt neutral: dunkle Karte mit
farbigem Schein (--brand-1/--brand-2, jetzt am .nav-group statt am
Button gesetzt, damit Button-Aurora UND Dropdown denselben Farbklang
teilen), Einträge mit farbigem linkem Rand + leichtem Rutsch-Effekt bei
Hover statt der vorherigen einfachen grauen Hervorhebung.
---
 assets/css/main.css | 34 +++++++++++++++++++++++++---------
 assets/js/main.js   |  8 ++++++--
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index c6d6a08..218153b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -231,28 +231,44 @@ header.site-header {
 .nav-item-medien    { --brand-1: rgba(143, 217, 234, .7); --brand-2: rgba(217, 74, 92, .6); }
 .nav-item-start     { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .5); }
 .nav-item-links     { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(212, 175, 55, .7); }
+/* Aufgeklapptes Kategorie-Menü: gleiche "gläserne, dunkle Karte mit
+   farbigem Schein"-Machart wie beim Sprachschalter-Dropdown, aber im
+   Farbton DIESER Kategorie (--brand-1/--brand-2, vom umschließenden
+   .nav-group geerbt) statt neutral silbern — sorgt für einen klaren,
+   ruhigen Look statt der vorherigen schlichten grauen Box. */
 .nav-dropdown {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  min-width: 220px;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: .5rem;
-  box-shadow: var(--shadow);
+  min-width: 230px;
+  background: rgba(4, 5, 8, .96);
+  border: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 14px;
+  padding: .45rem;
+  box-shadow:
+    0 14px 34px rgba(0, 0, 0, .6),
+    0 0 16px var(--brand-1, rgba(220, 226, 235, .3)),
+    0 0 32px var(--brand-2, rgba(190, 200, 215, .15));
   display: none;
   flex-direction: column;
+  animation: sprach-dropdown-in .18s ease both;
 }
 .nav-group.open .nav-dropdown { display: flex; }
 .nav-dropdown a {
-  padding: .55rem .7rem;
-  border-radius: 8px;
+  padding: .6rem .75rem;
+  border-radius: 10px;
+  border-left: 3px solid transparent;
   font-size: 1.06rem;
   color: var(--text-muted);
+  transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
+}
+.nav-dropdown a:hover, .nav-dropdown a.active {
+  background: rgba(255, 255, 255, .08);
+  border-left-color: var(--brand-1, var(--accent));
+  color: #fff;
+  transform: translateX(2px);
 }
-.nav-dropdown a:hover, .nav-dropdown a.active { background: var(--bg-alt); color: var(--accent); }
 
 /* ===================================================================
    Sprachumschalter — eigenes kleines "Schmuckstück" in der Nav-Bar statt
diff --git a/assets/js/main.js b/assets/js/main.js
index 86bfaac..a01891a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -258,9 +258,13 @@
       return `<a class="nav-flat${farbklasse}${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
     }
     const activeChild = item.children.some((c) => isActive(c.href));
+    // Farbklasse sitzt am äußeren .nav-group, nicht am Button — so
+    // erben Button-Aurora UND Dropdown (beides Kinder von .nav-group)
+    // dieselben --brand-1/--brand-2-Variablen für einen einheitlichen
+    // Farbklang zwischen Kategorie-Knopf und aufgeklapptem Menü.
     return `
-      <div class="nav-group${activeChild ? " open-hint" : ""}">
-        <button type="button" class="${farbklasse.trim()}" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
+      <div class="nav-group${farbklasse}${activeChild ? " open-hint" : ""}">
+        <button type="button" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
         <div class="nav-dropdown">
           ${item.children
             .map(