Refactor UserMenu and navigation components for improved user experience

- Enhanced UserMenu.vue by implementing an extended user type for better user data handling and updated user initials logic.
- Adjusted AppHeader.vue and AreaTabs.vue for improved layout and spacing, ensuring a more cohesive design.
- Updated CartButton.vue and Tabs components for consistent styling and better responsiveness.

These changes aim to enhance the overall usability and visual appeal of the application, providing a smoother user experience.

app/components/navigation/AreaTabs.vue

@@ -24,7 +24,7 @@ const areas: ProductArea[] = [
   },
   {
     id: 'makerspace',
-    label: 'Makerspace Jahreskarte',
+    label: 'Makerspace',
     icon: Wrench,
     enabled: true,
     visible: true,
@@ -32,7 +32,7 @@ const areas: ProductArea[] = [
   },
   {
     id: 'educator',
-    label: 'Pädagogen Jahreskarte',
+    label: 'Bildung',
     icon: GraduationCap,
     enabled: false,
     visible: true,
@@ -41,7 +41,7 @@ const areas: ProductArea[] = [
   },
   {
     id: 'experimenta',
-    label: 'experimenta Jahreskarte',
+    label: 'experimenta',
     icon: Sparkles,
     enabled: true,
     visible: true,
@@ -89,15 +89,21 @@ function navigateToArea(area: ProductArea) {
   <div class="w-full">
     <!-- Desktop: Tabs -->
     <Tabs :model-value="currentArea" class="hidden md:block">
-      <TabsList class="h-auto p-1.5 bg-white/5">
+      <TabsList class="h-auto p-2 bg-white/5">
         <TabsTrigger v-for="area in areas.filter(area => area.visible)" :key="area.id" :value="area.id"
           :disabled="!area.enabled" :class="[
-            'gap-2 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
+            'gap-2 py-3 md:py-4 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
             !area.enabled && 'opacity-50 cursor-not-allowed',
           ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
-          <Badge v-if="area.badge" variant="secondary" class="ml-1 text-[10px] px-1.5 py-0">
+          <Badge v-if="area.badge"
+            :class="[
+              'ml-1 text-[10px] px-1.5 py-0.5 transition-colors',
+              currentArea === area.id
+                ? 'bg-white/90 text-purple-950 border-white/50'
+                : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30 hover:bg-experimenta-accent/30'
+            ]">
             {{ area.badge }}
           </Badge>
         </TabsTrigger>
@@ -106,9 +112,9 @@ function navigateToArea(area: ProductArea) {
 
     <!-- Mobile: Horizontal scroll with cards (matching desktop styling) -->
     <div class="md:hidden overflow-x-auto scrollbar-hide">
-      <div class="inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-1.5 min-w-max">
+      <div class="inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-2 min-w-max">
         <button v-for="area in areas.filter(area => area.visible)" :key="area.id" :disabled="!area.enabled" :class="[
-          'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0',
+          'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-3 text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0',
           currentArea === area.id
             ? 'bg-accent text-white shadow-md'
             : 'text-white/70 hover:text-white',
@@ -116,7 +122,13 @@ function navigateToArea(area: ProductArea) {
         ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
-          <Badge v-if="area.badge" variant="secondary" class="ml-1 text-[10px] px-1.5 py-0">
+          <Badge v-if="area.badge"
+            :class="[
+              'ml-1 text-[10px] px-1.5 py-0.5 transition-colors',
+              currentArea === area.id
+                ? 'bg-white/90 text-purple-950 border-white/50'
+                : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30 hover:bg-experimenta-accent/30'
+            ]">
             {{ area.badge }}
           </Badge>
         </button>