From 25055d9345a640d8ceccc221db57ec7eae51b94b Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 17:52:32 +0200
Subject: [PATCH] =?UTF-8?q?Konto-Dropdown:=20Men=C3=BCpunkte=20sauber=20au?=
 =?UTF-8?q?sgerichtet=20statt=20schiefem=20Emoji-Versatz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Mein Konto" und "Abmelden" starteten je nach Breite des Emojis (👤 vs 🚪)
an leicht unterschiedlichen Stellen. Jetzt echtes Flex-Layout mit fester
Icon-Spalte (1.2em, zentriert) — beide Labels stehen exakt untereinander.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/layouts/Layout.astro | 4 ++--
 src/styles/global.css    | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 34b6c67..1b90654 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -102,8 +102,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
               <span class="chevron" aria-hidden="true">▼</span>
             </button>
             <div class="account-dropdown" id="account-dropdown" role="menu">
-              <a href={p("/konto/angemeldet/")} role="menuitem">👤 {t.accountMenu.myAccount}</a>
-              <button type="button" id="account-logout-btn" role="menuitem">🚪 {t.accountMenu.logout}</button>
+              <a href={p("/konto/angemeldet/")} role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">👤</span>{t.accountMenu.myAccount}</a>
+              <button type="button" id="account-logout-btn" role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">🚪</span>{t.accountMenu.logout}</button>
             </div>
           </div>
         </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index f404169..dc07bba 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -674,7 +674,9 @@ a:focus-visible, button:focus-visible {
 .account-menu.open .account-dropdown { display: flex; }
 .account-dropdown a,
 .account-dropdown button {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
   width: 100%;
   text-align: left;
   background: none;
@@ -686,6 +688,10 @@ a:focus-visible, button:focus-visible {
   cursor: pointer;
   transition: background 0.15s var(--ease);
 }
+/* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein
+   Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken
+   unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */
+.account-dropdown-icon { flex-shrink: 0; width: 1.2em; text-align: center; }
 .account-dropdown a:hover,
 .account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
 @media (max-width: 860px) {