From b5be6e0e61306732b838b401853023dd1716b1db Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 13:33:31 +0200
Subject: [PATCH] Konto-Navigation: Klick zeigt jetzt wirklich NUR den
 passenden Bereich
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Schnellnav-Leiste sprang bisher nur zum Abschnitt (der Rest blieb
sichtbar). Jetzt sind es echte Filter-Tabs: Klick auf "Bestellungen" /
"Wunschliste" / "Offene Sendungen" blendet alle anderen Bereiche komplett
aus und zeigt nur den ausgewählten. "Offene Sendungen" filtert zusätzlich
innerhalb der Bestellungen auf noch nicht abgeschlossene. Der aktive Tab
bleibt farbig hinterlegt und unterstrichen erkennbar. Start-Ansicht:
Bestellungen-Tab aktiv.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/i18n/ui.ts                      |  4 +++
 src/pages/ch/konto/angemeldet.astro | 54 +++++++++++++++++++++++++----
 src/pages/en/konto/angemeldet.astro | 54 +++++++++++++++++++++++++----
 src/pages/fr/konto/angemeldet.astro | 54 +++++++++++++++++++++++++----
 src/pages/konto/angemeldet.astro    | 54 +++++++++++++++++++++++++----
 src/styles/global.css               | 18 +++++++---
 6 files changed, 206 insertions(+), 32 deletions(-)

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; }