diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 5ccf35c..55a8edb 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -225,6 +225,7 @@ export const ui = {
       logout: "Abmelden",
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen",
+      noOpenOrders: "Aktuell keine offenen Sendungen — alle Bestellungen sind schon angekommen. 🎉",
       ordersTitle: "📦 Meine Bestellungen",
       orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
       trackingLabel: "Sendungsverfolgung", trackingBtn: "Sendung verfolgen →", invoiceBtn: "Rechnung (PDF)", reorderBtn: "Nochmal bestellen",
@@ -457,6 +458,7 @@ export const ui = {
       logout: "Sign out",
       navLabel: "Account section navigation",
       statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments",
+      noOpenOrders: "No open shipments right now — every order has already arrived. 🎉",
       ordersTitle: "📦 My orders",
       orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
       trackingLabel: "Tracking", trackingBtn: "Track shipment →", invoiceBtn: "Invoice (PDF)", reorderBtn: "Order again",
@@ -689,6 +691,7 @@ export const ui = {
       logout: "Abmälde",
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige",
+      noOpenOrders: "Momentan kei offni Sändige — alli Bstellige sind scho aacho. 🎉",
       ordersTitle: "📦 Mini Bstellige",
       orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
       trackingLabel: "Sändigsverfolgig", trackingBtn: "Sändig verfolge →", invoiceBtn: "Rächnig (PDF)", reorderBtn: "Nomal bstelle",
@@ -921,6 +924,7 @@ export const ui = {
       logout: "Se déconnecter",
       navLabel: "Navigation de l'espace client",
       statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours",
+      noOpenOrders: "Aucun envoi en cours pour le moment — toutes les commandes sont déjà arrivées. 🎉",
       ordersTitle: "📦 Mes commandes",
       orderNo: "Commande", orderDate: "Commandé le", orderTotal: "Total", orderItems: "Articles",
       trackingLabel: "Suivi", trackingBtn: "Suivre l'envoi →", invoiceBtn: "Facture (PDF)", reorderBtn: "Commander à nouveau",
diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro
index ba5eb34..9ccdb9d 100644
--- a/src/pages/ch/konto/angemeldet.astro
+++ b/src/pages/ch/konto/angemeldet.astro
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           "Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
           Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
       <nav class="account-nav" aria-label={t.accountDash.navLabel}>
-        <a class="account-nav-item account-nav-orders" href="#bestellungen">
+        <button type="button" class="account-nav-item account-nav-orders" data-tab="bestellungen">
           <span class="account-nav-icon" aria-hidden="true">📦</span>
           <span class="account-nav-value">{beispielBestellungen.length}</span>
           <span class="account-nav-label">{t.accountDash.statOrders}</span>
-        </a>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        </button>
+        <button type="button" class="account-nav-item account-nav-wishlist" data-tab="wunschliste">
           <span class="account-nav-icon" aria-hidden="true">🩵</span>
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
-        </a>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        </button>
+        <button type="button" class="account-nav-item account-nav-open" data-tab="offene">
           <span class="account-nav-icon" aria-hidden="true">🚚</span>
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
-        </a>
+        </button>
       </nav>
     </div>
   </section>
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <div class="order-list">
+      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
             <div class="order-card-head">
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 <script define:vars={{ loginPath: "/ch/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
   window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
 </script>
+<script>
+  // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
+  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
+  const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
+  const bestellungenSection = document.getElementById("bestellungen");
+  const wunschlisteSection = document.getElementById("wunschliste");
+  const orderCards = Array.from(document.querySelectorAll(".order-card"));
+  const emptyNote = document.getElementById("orders-empty-note");
+
+  function setActiveTab(tab: string) {
+    navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
+
+    if (tab === "wunschliste") {
+      if (bestellungenSection) bestellungenSection.style.display = "none";
+      if (wunschlisteSection) wunschlisteSection.style.display = "";
+      return;
+    }
+
+    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+
+    let visibleCount = 0;
+    orderCards.forEach((card) => {
+      const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
+      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      (card as HTMLElement).style.display = show ? "" : "none";
+      if (show) visibleCount++;
+    });
+    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+  }
+
+  navItems.forEach((item) => {
+    item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
+  });
+
+  setActiveTab("bestellungen");
+</script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
   const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro
index c373140..b413ac5 100644
--- a/src/pages/en/konto/angemeldet.astro
+++ b/src/pages/en/konto/angemeldet.astro
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           "Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
           Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
       <nav class="account-nav" aria-label={t.accountDash.navLabel}>
-        <a class="account-nav-item account-nav-orders" href="#bestellungen">
+        <button type="button" class="account-nav-item account-nav-orders" data-tab="bestellungen">
           <span class="account-nav-icon" aria-hidden="true">📦</span>
           <span class="account-nav-value">{beispielBestellungen.length}</span>
           <span class="account-nav-label">{t.accountDash.statOrders}</span>
-        </a>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        </button>
+        <button type="button" class="account-nav-item account-nav-wishlist" data-tab="wunschliste">
           <span class="account-nav-icon" aria-hidden="true">🩵</span>
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
-        </a>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        </button>
+        <button type="button" class="account-nav-item account-nav-open" data-tab="offene">
           <span class="account-nav-icon" aria-hidden="true">🚚</span>
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
-        </a>
+        </button>
       </nav>
     </div>
   </section>
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <div class="order-list">
+      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
             <div class="order-card-head">
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 <script define:vars={{ loginPath: "/en/konto/", fallbackName: "Customer", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
   window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
 </script>
+<script>
+  // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
+  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
+  const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
+  const bestellungenSection = document.getElementById("bestellungen");
+  const wunschlisteSection = document.getElementById("wunschliste");
+  const orderCards = Array.from(document.querySelectorAll(".order-card"));
+  const emptyNote = document.getElementById("orders-empty-note");
+
+  function setActiveTab(tab: string) {
+    navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
+
+    if (tab === "wunschliste") {
+      if (bestellungenSection) bestellungenSection.style.display = "none";
+      if (wunschlisteSection) wunschlisteSection.style.display = "";
+      return;
+    }
+
+    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+
+    let visibleCount = 0;
+    orderCards.forEach((card) => {
+      const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
+      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      (card as HTMLElement).style.display = show ? "" : "none";
+      if (show) visibleCount++;
+    });
+    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+  }
+
+  navItems.forEach((item) => {
+    item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
+  });
+
+  setActiveTab("bestellungen");
+</script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
   const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro
index 3fd5a49..6129b96 100644
--- a/src/pages/fr/konto/angemeldet.astro
+++ b/src/pages/fr/konto/angemeldet.astro
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           "Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
           Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
       <nav class="account-nav" aria-label={t.accountDash.navLabel}>
-        <a class="account-nav-item account-nav-orders" href="#bestellungen">
+        <button type="button" class="account-nav-item account-nav-orders" data-tab="bestellungen">
           <span class="account-nav-icon" aria-hidden="true">📦</span>
           <span class="account-nav-value">{beispielBestellungen.length}</span>
           <span class="account-nav-label">{t.accountDash.statOrders}</span>
-        </a>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        </button>
+        <button type="button" class="account-nav-item account-nav-wishlist" data-tab="wunschliste">
           <span class="account-nav-icon" aria-hidden="true">🩵</span>
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
-        </a>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        </button>
+        <button type="button" class="account-nav-item account-nav-open" data-tab="offene">
           <span class="account-nav-icon" aria-hidden="true">🚚</span>
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
-        </a>
+        </button>
       </nav>
     </div>
   </section>
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <div class="order-list">
+      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
             <div class="order-card-head">
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 <script define:vars={{ loginPath: "/fr/konto/", fallbackName: "Cliente", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
   window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
 </script>
+<script>
+  // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
+  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
+  const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
+  const bestellungenSection = document.getElementById("bestellungen");
+  const wunschlisteSection = document.getElementById("wunschliste");
+  const orderCards = Array.from(document.querySelectorAll(".order-card"));
+  const emptyNote = document.getElementById("orders-empty-note");
+
+  function setActiveTab(tab: string) {
+    navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
+
+    if (tab === "wunschliste") {
+      if (bestellungenSection) bestellungenSection.style.display = "none";
+      if (wunschlisteSection) wunschlisteSection.style.display = "";
+      return;
+    }
+
+    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+
+    let visibleCount = 0;
+    orderCards.forEach((card) => {
+      const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
+      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      (card as HTMLElement).style.display = show ? "" : "none";
+      if (show) visibleCount++;
+    });
+    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+  }
+
+  navItems.forEach((item) => {
+    item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
+  });
+
+  setActiveTab("bestellungen");
+</script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
   const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro
index 64a9ebb..dfa2bd1 100644
--- a/src/pages/konto/angemeldet.astro
+++ b/src/pages/konto/angemeldet.astro
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           "Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
           Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
       <nav class="account-nav" aria-label={t.accountDash.navLabel}>
-        <a class="account-nav-item account-nav-orders" href="#bestellungen">
+        <button type="button" class="account-nav-item account-nav-orders" data-tab="bestellungen">
           <span class="account-nav-icon" aria-hidden="true">📦</span>
           <span class="account-nav-value">{beispielBestellungen.length}</span>
           <span class="account-nav-label">{t.accountDash.statOrders}</span>
-        </a>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        </button>
+        <button type="button" class="account-nav-item account-nav-wishlist" data-tab="wunschliste">
           <span class="account-nav-icon" aria-hidden="true">🩵</span>
           <span class="account-nav-value">0</span>
           <span class="account-nav-label">{t.accountDash.statWishlist}</span>
-        </a>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        </button>
+        <button type="button" class="account-nav-item account-nav-open" data-tab="offene">
           <span class="account-nav-icon" aria-hidden="true">🚚</span>
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
-        </a>
+        </button>
       </nav>
     </div>
   </section>
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <div class="order-list">
+      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
             <div class="order-card-head">
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 <script define:vars={{ loginPath: "/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
   window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
 </script>
+<script>
+  // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
+  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
+  const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
+  const bestellungenSection = document.getElementById("bestellungen");
+  const wunschlisteSection = document.getElementById("wunschliste");
+  const orderCards = Array.from(document.querySelectorAll(".order-card"));
+  const emptyNote = document.getElementById("orders-empty-note");
+
+  function setActiveTab(tab: string) {
+    navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
+
+    if (tab === "wunschliste") {
+      if (bestellungenSection) bestellungenSection.style.display = "none";
+      if (wunschlisteSection) wunschlisteSection.style.display = "";
+      return;
+    }
+
+    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+
+    let visibleCount = 0;
+    orderCards.forEach((card) => {
+      const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
+      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      (card as HTMLElement).style.display = show ? "" : "none";
+      if (show) visibleCount++;
+    });
+    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+  }
+
+  navItems.forEach((item) => {
+    item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
+  });
+
+  setActiveTab("bestellungen");
+</script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";
   const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
diff --git a/src/styles/global.css b/src/styles/global.css
index 7742a4f..23148c3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1332,10 +1332,11 @@ a:focus-visible, button:focus-visible {
 }
 @media (max-width: 500px) { .account-head-identity { flex-wrap: wrap; } }
 /* Kontobereich-Schnellnavigation: statt drei einzelner, loser Kästchen EINE zusammenhängende
-   Leiste direkt über den zugehörigen Abschnitten — jedes Segment ist ein echter Sprunglink zum
-   passenden Bereich weiter unten (Bestellungen/Wunschliste), mit eigener Akzentfarbe und Icon,
-   die zur jeweiligen Abschnittsüberschrift passen (📦/🩵/🚚 wie schon bei den Bestellstatus-
-   Icons). Auf Hover/Fokus füllt sich ein farbiger Unterstrich, damit klar ist: das ist klickbar. */
+   Leiste direkt über den zugehörigen Abschnitten — jedes Segment ist ein echter Filter-Knopf:
+   Klick zeigt NUR den passenden Bereich (Bestellungen/Wunschliste/nur offene Sendungen) und
+   blendet den Rest aus, mit eigener Akzentfarbe und Icon passend zur jeweiligen Abschnitts-
+   überschrift (📦/🩵/🚚 wie schon bei den Bestellstatus-Icons). Der aktive Knopf bleibt farbig
+   unterstrichen und hinterlegt, damit immer klar ist, welcher Filter gerade aktiv ist. */
 .account-nav {
   display: flex;
   margin-top: 1.2rem;
@@ -1357,6 +1358,13 @@ a:focus-visible, button:focus-visible {
   position: relative;
   scroll-margin-top: 1.5rem;
   transition: background 0.2s var(--ease);
+  /* Reset, da jetzt <button> statt <a> — soll optisch identisch bleiben. */
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  background-color: transparent;
+  font: inherit;
+  cursor: pointer;
 }
 .account-nav-item + .account-nav-item { border-left: 1px solid rgba(244, 241, 247, 0.12); }
 .account-nav-item::after {
@@ -1372,6 +1380,8 @@ a:focus-visible, button:focus-visible {
 }
 .account-nav-item:hover { background: color-mix(in srgb, var(--nav-color, var(--c-accent)) 14%, transparent); }
 .account-nav-item:hover::after, .account-nav-item:focus-visible::after { transform: scaleX(1); }
+.account-nav-item.is-active { background: color-mix(in srgb, var(--nav-color, var(--c-accent)) 20%, transparent); }
+.account-nav-item.is-active::after { transform: scaleX(1); }
 .account-nav-icon { font-size: 1.35rem; }
 .account-nav-value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--nav-color, var(--c-accent)); line-height: 1; }
 .account-nav-label { font-size: 0.82rem; color: var(--c-text-muted); text-align: center; }