Enhance Role-Based Visibility and Navigation Logic

- Introduced role visibility checks in AreaTabs.vue to filter displayed areas based on the user's active role, improving user experience and accessibility.
- Updated RoleSwitcher.vue to enhance accessibility with a high-contrast checkmark for better visibility.
- Modified useActiveRole.ts to streamline role initialization and refresh logic for role-based product visibility.
- Added explicit keys for role-based data fetching in product-related pages to ensure accurate data refresh.
- Enhanced API endpoint for product retrieval to return 404 if a product is not accessible based on the user's role, ensuring security and clarity.

app/components/navigation/RoleSwitcher.vue

@@ -83,7 +83,7 @@ async function handleRoleSwitch(roleCode: string, hasRole: boolean) {
       </Alert>
 
       <DropdownMenuLabel class="text-sm font-normal text-muted-foreground py-3">
-        Ich kaufe als...
+        Du kaufst als...
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
 
@@ -103,8 +103,13 @@ async function handleRoleSwitch(roleCode: string, hasRole: boolean) {
           </span>
         </div>
 
-        <!-- Checkmark if active -->
-        <Check v-if="activeRole === role.code && role.hasRole" class="h-5 w-5 text-success flex-shrink-0" />
+        <!-- High-contrast checkmark for colorblind accessibility -->
+        <div v-if="activeRole === role.code && role.hasRole" class="relative flex-shrink-0">
+          <!-- Background circle for contrast -->
+          <div class="absolute inset-0 bg-white dark:bg-gray-900 rounded-full opacity-90"></div>
+          <!-- Checkmark icon with high contrast -->
+          <Check class="h-5 w-5 text-gray-900 dark:text-white relative z-10" />
+        </div>
 
         <!-- Badge if not approved -->
         <Badge v-if="!role.hasRole" variant="secondary" class="text-xs px-2 py-0.5 flex-shrink-0">