Konto-Navigation: Klick zeigt jetzt wirklich NUR den passenden Bereich

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 <[email protected]>

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",

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>
+        </button>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        <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>
+        </button>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        <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;

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>
+        </button>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        <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>
+        </button>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        <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;

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>
+        </button>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        <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>
+        </button>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        <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;

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>
+        </button>
-        <a class="account-nav-item account-nav-wishlist" href="#wunschliste">
+        <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>
+        </button>
-        <a class="account-nav-item account-nav-open" href="#bestellungen">
+        <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;

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
+   Leiste direkt über den zugehörigen Abschnitten — jedes Segment ist ein echter Filter-Knopf:
-   passenden Bereich weiter unten (Bestellungen/Wunschliste), mit eigener Akzentfarbe und Icon,
+   Klick zeigt NUR den passenden Bereich (Bestellungen/Wunschliste/nur offene Sendungen) und
-   die zur jeweiligen Abschnittsüberschrift passen (📦/🩵/🚚 wie schon bei den Bestellstatus-
+   blendet den Rest aus, mit eigener Akzentfarbe und Icon passend zur jeweiligen Abschnitts-
-   Icons). Auf Hover/Fokus füllt sich ein farbiger Unterstrich, damit klar ist: das ist klickbar. */
+   ü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; }