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