Fix order-filter dropdowns, restructure Konto identity line, drop blog reset link

- CustomSelect.tsx: mousedown on an option blurred the trigger button
  before the click landed, unmounting the list before anything could be
  selected — add preventDefault on the list's mousedown to stop that.
- KontoShell no longer renders "Eingeloggt als ..." above each page's
  content; each page renders its own title then AccountIdentity right
  below it, and ProfileForm's now-duplicate email/Kundennummer line is
  removed.
- Blog category filter: drop the separate "Zurücksetzen" link — clicking
  an active category badge again already deactivates it.
- Werkzeuge cards: more vertical gap between stacked cards below sm:.
- Legal pages' "Stand: ..." line is now derived from the LegalPages doc's
  own updatedAt instead of a hand-typed string.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018unaXmuzVA8ct1b6WoyP1U

app/konto/bestellungen/page.tsx

@@ -14,6 +14,7 @@ import { getOrderFilterEnabled } from "../../lib/payload";
 import { OrderStatusBadge } from "../components/OrderStatusBadge";
 import { PaymentStatusBadge } from "../components/PaymentStatusBadge";
 import { KontoShell } from "../components/KontoShell";
+import { AccountIdentity } from "../components/AccountIdentity";
 import { OrderFilters } from "./components/OrderFilters";
 
 // robots: noindex — account area, same reasoning as /checkout.
@@ -59,11 +60,14 @@ export default async function KontoBestellungenPage({
   ]);
 
   return (
-    <KontoShell customer={session.customer}>
+    <KontoShell>
       <Reveal className="flex flex-col gap-6 items-start w-full">
-          <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
-            Meine Bestellungen
-          </p>
+          <div className="flex flex-col gap-1 items-start">
+            <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+              Meine Bestellungen
+            </p>
+            <AccountIdentity email={session.customer.email} customerNumber={session.customer.customerNumber} />
+          </div>
 
           {orderFilterEnabled && availableYears.length > 0 && (
             <Suspense fallback={null}>

app/konto/components/AccountIdentity.tsx

@@ -0,0 +1,7 @@
+export function AccountIdentity({ email, customerNumber }: { email: string; customerNumber: string }) {
+  return (
+    <p className="text-body-sm text-text-muted">
+      Eingeloggt als {email} (Kundennummer {customerNumber})
+    </p>
+  );
+}

app/konto/components/KontoShell.tsx

@@ -12,28 +12,18 @@ import { AccountNav } from "./AccountNav";
 // page-specific logic each page still needs (e.g. merkliste's return-URL
 // login redirect, profil's second profile-fetch redirect).
 //
-// `customer` is rendered here, once, so "Eingeloggt als …" looks and
-// appears identically on every /konto/* page — it used to be hand-copied
-// onto individual pages (bestellungen had it, merkliste/profil didn't),
-// which read as inconsistent rather than a deliberate per-page choice.
-export async function KontoShell({
-  children,
-  customer,
-}: {
-  children: ReactNode;
-  customer: { email: string; customerNumber: string };
-}) {
+// "Eingeloggt als …" is NOT rendered here (even though `customer` used to
+// be the only prop this shell needed) — it belongs directly under each
+// page's own title so it reads as "page title, then who's logged in", not
+// above the title before the page has even introduced itself. See
+// AccountIdentity.tsx, rendered by each page right after its own heading.
+export async function KontoShell({ children }: { children: ReactNode }) {
   return (
     <>
       <main className="flex flex-col flex-1 bg-bg-base">
         <div className="flex flex-col sm:flex-row gap-6 sm:gap-10 w-full max-w-[75rem] mx-auto px-[var(--layout-padding-x)] pt-8 sm:pt-10 pb-16">
           <AccountNav />
-          <div className="flex-1 min-w-0 flex flex-col gap-6">
-            <p className="text-body-sm text-text-muted">
-              Eingeloggt als {customer.email} (Kundennummer {customer.customerNumber})
-            </p>
-            {children}
-          </div>
+          <div className="flex-1 min-w-0 flex flex-col gap-6">{children}</div>
         </div>
       </main>
       <Footer />

app/konto/merkliste/page.tsx

@@ -4,6 +4,7 @@ import { Reveal } from "../../components/Reveal";
 import { getSessionCustomer, getWishlist } from "../../lib/customerAuth";
 import { getProductsByIds, getWishlistEnabled, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { KontoShell } from "../components/KontoShell";
+import { AccountIdentity } from "../components/AccountIdentity";
 import { MerklisteGrid } from "./components/MerklisteGrid";
 
 // robots: noindex — account area, same reasoning as /konto/bestellungen.
@@ -40,11 +41,14 @@ export default async function KontoMerklistePage() {
   const initialProducts = await getProductsByIds(wishlistItems.map((i) => i.productId));
 
   return (
-    <KontoShell customer={session.customer}>
+    <KontoShell>
       <Reveal className="flex flex-col gap-6 items-start w-full">
-        <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
-          Meine Merkliste
-        </p>
+        <div className="flex flex-col gap-1 items-start">
+          <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Meine Merkliste
+          </p>
+          <AccountIdentity email={session.customer.email} customerNumber={session.customer.customerNumber} />
+        </div>
 
         <MerklisteGrid initialProducts={initialProducts} defaultTaxRate={defaultTaxRate} kleinunternehmer={kleinunternehmer} />
       </Reveal>

app/konto/profil/components/ProfileForm.tsx

@@ -103,13 +103,6 @@ export function ProfileForm({
 
   return (
     <Reveal className="flex flex-col gap-6 items-start w-full">
-      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
-        Mein Profil
-      </p>
-      <p className="text-body-sm text-text-muted">
-        {profile.email} · Kundennummer {profile.customerNumber}
-      </p>
-
       <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
         {/* Explicit heading, matching /checkout's own "1. Rechnungsadresse"
             card title — without it, this section and the "Lieferadresse"

app/konto/profil/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { getSessionCustomer, getCustomerProfile } from "../../lib/customerAuth";
 import { getShippingCountries } from "../../lib/payload";
 import { KontoShell } from "../components/KontoShell";
+import { AccountIdentity } from "../components/AccountIdentity";
 import { ProfileForm } from "./components/ProfileForm";
 import { PasswordForm } from "./components/PasswordForm";
 import { VerificationBanner } from "./components/VerificationBanner";
@@ -28,8 +29,14 @@ export default async function KontoProfilPage({
   const { verified } = await searchParams;
 
   return (
-    <KontoShell customer={{ email: profile.email, customerNumber: session.customer.customerNumber }}>
+    <KontoShell>
       <div className="flex flex-col gap-10 items-start w-full max-w-[40rem]">
+        <div className="flex flex-col gap-1 items-start w-full">
+          <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Mein Profil
+          </p>
+          <AccountIdentity email={profile.email} customerNumber={session.customer.customerNumber} />
+        </div>
         <VerificationBanner emailVerified={profile.emailVerified} justVerified={verified === "1" || verified === "0" ? verified : undefined} />
         <ProfileForm profile={profile} shippingCountries={shippingCountries} />
         <PasswordForm email={profile.email} />