From 50ba908317668b957263563452a6dbb21c530064 Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Mon, 3 Aug 2026 03:21:31 +0200
Subject: [PATCH] Fix: Kategorie-Dropdown war NIE wirklich zentriert (echter
 Bug, nicht nur Wahrnehmung)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root Cause: die geteilte @keyframes sprach-dropdown-in setzt "transform"
als GANZES pro Frame (nur translateY+scale) — das überschrieb nach jedem
Öffnen komplett das zentrierende translateX(-50%) der Basis-Regel, die
Box sprang dadurch sichtbar ~halbe Boxbreite nach rechts. Fix: eigene
@keyframes nav-dropdown-in NUR für .nav-dropdown, die translateX(-50%)
in jedem Frame mitführt. Der rechtsbündige Sprachschalter (kein
translateX nötig) behält bewusst die alte, geteilte Animation. Im
mobilen Hamburger-Menü (<1480px, volle Breite) wird die Animation ganz
deaktiviert, damit translateX(-50%) dort nicht die Vollbreiten-Box
verschiebt.
---
 assets/css/main.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 7141b8f..520f8b7 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -262,7 +262,15 @@ header.site-header {
     0 0 32px var(--brand-2, rgba(190, 200, 215, .15));
   display: none;
   flex-direction: column;
-  animation: sprach-dropdown-in .18s ease both;
+  /* EIGENE Animation statt der geteilten sprach-dropdown-in: eine
+     @keyframes-Regel setzt "transform" als GANZES pro Frame, würde also
+     das zentrierende translateX(-50%) oben komplett überschreiben und
+     die Box nach dem Aufklappen sichtbar nach rechts verschieben (Bug
+     gefunden 03.08.2026 — Box wirkte "nicht mittig", war es auch nicht:
+     transform sprang nach der Animation auf reines translateY/scale).
+     Der Sprachschalter unten ist rechtsbündig (kein translateX nötig)
+     und behält deshalb bewusst die alte, geteilte Animation. */
+  animation: nav-dropdown-in .18s ease both;
 }
 /* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
    macht auch dann unmissverständlich klar, zu welcher Kategorie das
@@ -299,6 +307,12 @@ header.site-header {
   color: var(--text-muted);
   transition: color .2s ease;
 }
+/* translateX(-50%) MUSS in jedem Frame mit drinstehen, sonst hebt die
+   Animation die Zentrierung von .nav-dropdown auf (siehe Kommentar oben). */
+@keyframes nav-dropdown-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
+}
 .nav-dropdown a:hover, .nav-dropdown a.active {
   color: var(--brand-1, var(--accent));
 }
@@ -1116,7 +1130,7 @@ 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%; margin-top: 0; }
+  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
   .nav-dropdown::before { display: none; }
   .nav-group.open .nav-dropdown { display: flex; }
   .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }