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/CartButton.vue

@@ -26,11 +26,11 @@ function handleClick(e: Event) {
   <!-- Desktop cart button (visible only on lg and up) -->
   <button
     @click="handleClick"
-    class="relative hidden lg:flex items-center gap-5 rounded-[25px] px-[30px] py-[10px] transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
+    class="relative hidden lg:flex items-center gap-4 rounded-[35px] px-6 py-1.5 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
     aria-label="Warenkorb öffnen"
   >
     <!-- Cart icon with item count badge -->
-    <div class="relative inline-flex items-center justify-center">
+    <div class="relative inline-flex items-center justify-center h-12 w-12">
       <ShoppingCart class="h-6 w-6 text-white" strokeWidth="2" />
 
       <!-- Item count badge -->
@@ -44,7 +44,7 @@ function handleClick(e: Event) {
       >
         <Badge
           v-if="hasItems"
-          class="absolute -top-2.5 -right-3.5 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg"
+          class="absolute -top-1 -right-1 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg"
         >
           {{ itemCount > 99 ? '99+' : itemCount }}
         </Badge>
@@ -58,7 +58,7 @@ function handleClick(e: Event) {
 
     <!-- Static background -->
     <span
-      class="absolute inset-0 rounded-[25px] bg-white/10"
+      class="absolute inset-0 rounded-[35px] bg-white/10"
       aria-hidden="true"
     />
   </button>