From ea8fe6c6ab7a0febfb471b1178c69c79c87c2a1e Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Mon, 3 Aug 2026 03:10:53 +0200
Subject: [PATCH] =?UTF-8?q?Kategorie-Dropdown:=20Verbindungs-Pfeil=20(Care?=
 =?UTF-8?q?t)=20erg=C3=A4nzt,=20damit=20die=20Box=20unmissverst=C3=A4ndlic?=
 =?UTF-8?q?h=20der=20Kategorie=20oben=20zugeordnet=20wirkt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Zentrierung war rechnerisch schon exakt (Dropdown-Mitte = Button-
Mitte), aber weil die Box (5 Menüpunkte) breiter ist als ein einzelner
Kategorie-Knopf, ragt sie optisch in Nachbar-Kategorien hinein und wirkt
dadurch "nicht zugeordnet". Jetzt zeigt ein kleiner Pfeil mittig unter
dem Knopf eindeutig auf die zugehörige Kategorie (Standard-Dropdown-UX-
Pattern). Im mobilen Hamburger-Menü (<1480px, dort volle Breite/statisch
positioniert) wird der Pfeil ausgeblendet, da dort nicht sinnvoll.
---
 assets/css/main.css | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 75b0903..728a87d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -248,6 +248,7 @@ header.site-header {
 .nav-dropdown {
   position: absolute;
   top: 100%;
+  margin-top: 12px;
   left: 50%;
   transform: translateX(-50%);
   min-width: 230px;
@@ -263,6 +264,24 @@ header.site-header {
   flex-direction: column;
   animation: sprach-dropdown-in .18s ease both;
 }
+/* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
+   macht auch dann unmissverständlich klar, zu welcher Kategorie das
+   Menü gehört, wenn die Box (wegen mehr Einträgen) breiter ist als der
+   Knopf selbst und dadurch optisch in Nachbar-Kategorien hineinragt. */
+.nav-dropdown::before {
+  content: "";
+  position: absolute;
+  top: -7px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  width: 14px;
+  height: 14px;
+  background: rgba(4, 5, 8, .96);
+  border-left: 1px solid rgba(255, 255, 255, .14);
+  border-top: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 3px 0 0 0;
+  pointer-events: none;
+}
 .nav-group.open .nav-dropdown { display: flex; }
 /* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
    Drüberfahren, ohne extra Klick — auf Touch/Tablet bleibt es bewusst
@@ -1097,7 +1116,8 @@ header.site-header {
   .nav-links.open { transform: translateY(0); }
   .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
   .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
-  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; }
+  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; }
+  .nav-dropdown::before { display: none; }
   .nav-group.open .nav-dropdown { display: flex; }
   .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
 }