Enhance navigation components to conditionally display role switcher based on user login status

- Updated AppHeader.vue to show the role switcher only when the user is logged in, improving the relevance of displayed options.
- Modified CartButton.vue to adjust spacing based on item presence, enhancing visual consistency.

These changes aim to refine user navigation and ensure a more tailored experience within the application.

app/components/navigation/AppHeader.vue

@@ -17,8 +17,8 @@ const { loggedIn } = useAuth()
           <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="h-16 w-auto md:h-20 lg:h-22" />
         </NuxtLink>
 
-        <!-- Role Switcher (Desktop only) -->
-        <div class="hidden lg:block">
+        <!-- Role Switcher (Desktop only, only when logged in) -->
+        <div v-if="loggedIn" class="hidden lg:block">
           <RoleSwitcher />
         </div>
       </div>
@@ -40,8 +40,8 @@ const { loggedIn } = useAuth()
       </div>
     </div>
 
-    <!-- Mobile: Role switcher in collapsible section (optional) -->
-    <div class="lg:hidden mobile-role-section">
+    <!-- Mobile: Role switcher in collapsible section (only when logged in) -->
+    <div v-if="loggedIn" class="lg:hidden mobile-role-section">
       <div class="container px-4 py-2.5">
         <RoleSwitcher />
       </div>

app/components/navigation/CartButton.vue

@@ -26,7 +26,7 @@ function handleClick(e: Event) {
   <!-- Desktop cart button (visible only on lg and up) -->
   <button @click="handleClick" :class="[
     'relative hidden lg:flex items-center 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',
-    hasItems ? 'gap-2' : 'gap-1'
+    hasItems ? 'gap-2' : 'gap-0'
   ]" aria-label="Warenkorb öffnen">
     <!-- Cart icon with item count badge -->
     <div class="relative inline-flex items-center justify-center h-14 w-12">