Implement experimenta product listing page and enhance navigation components

- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation.
- Updated API to filter products by category, allowing for specific product queries.
- Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility.
- Refactored existing components for better styling consistency and responsiveness.
- Improved dropdown menu components with updated styles and hover effects for better usability.

app/components/UserMenu.vue

@@ -43,12 +43,9 @@ async function handleLogout() {
 
 <template>
   <!-- Not logged in: Show login prompt -->
-  <NuxtLink
-    v-if="!loggedIn"
-    to="/auth"
+  <NuxtLink v-if="!loggedIn" to="/auth"
     class="flex items-center gap-2 px-4 py-2 rounded-2xl border-2 border-dashed border-muted-foreground/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
-    aria-label="Anmelden oder Registrieren"
-  >
+    aria-label="Anmelden oder Registrieren">
     <Avatar class="h-10 w-10 border-2 border-muted-foreground/30 rounded-2xl">
       <AvatarFallback class="bg-muted text-muted-foreground rounded-2xl">
         <User class="h-5 w-5" />
@@ -62,17 +59,18 @@ async function handleLogout() {
     <DropdownMenuTrigger as-child>
       <button
         class="flex items-center gap-3 rounded-2xl px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
-        aria-label="Benutzermenü öffnen"
-      >
+        aria-label="Benutzermenü öffnen">
         <!-- Greeting text (Desktop only) -->
-        <span class="hidden md:inline text-sm font-medium text-white">
+        <span class="hidden md:inline font-medium text-white">
           Hallo, {{ user?.firstName }}
         </span>
 
         <!-- Avatar with status ring (logged in indicator) -->
-        <Avatar class="h-10 w-10 md:h-12 md:w-12 border-3 border-experimenta-purple shadow-lg bg-experimenta-accent ring-2 ring-experimenta-accent ring-offset-2 ring-offset-white dark:ring-offset-zinc-950">
+        <Avatar
+          class="h-10 w-10 md:h-12 md:w-12 border-3 border-experimenta-purple shadow-lg bg-experimenta-accent ring-2 ring-experimenta-accent ring-offset-2 ring-offset-white dark:ring-offset-zinc-950">
           <AvatarImage :src="undefined" :alt="user?.firstName" />
-          <AvatarFallback class="bg-experimenta-accent text-white font-bold text-sm md:text-base flex items-center justify-center w-full h-full">
+          <AvatarFallback
+            class="bg-experimenta-accent text-white font-bold text-sm md:text-base flex items-center justify-center w-full h-full">
             {{ userInitials }}
           </AvatarFallback>
         </Avatar>