Update RoleSwitcher.vue to enhance role descriptions and accessibility features

- Changed role descriptions for 'individual' and 'educator' to provide clearer context.
- Added a new 'company' role with appropriate details.
- Improved accessibility for the role switcher by implementing a high-contrast checkmark for better visibility.
- Updated instructional text to clarify the role's impact on product visibility.

These changes aim to improve user understanding and accessibility within the role selection interface.

app/components/navigation/RoleSwitcher.vue

@@ -28,7 +28,7 @@ const roles: RoleOption[] = [
   {
     value: 'individual',
     label: 'Privatperson',
-    description: 'Privatperson',
+    description: 'Private Nutzung',
     icon: User,
     color: 'text-purple-600',
     enabled: true,
@@ -36,21 +36,21 @@ const roles: RoleOption[] = [
   {
     value: 'educator',
     label: 'Pädagoge',
-    description: 'Pädagoge',
+    description: 'Lehrkräfte und Schulen',
     icon: GraduationCap,
     color: 'text-orange-500',
-    enabled: false,
-    badge: 'Demnächst',
+    enabled: true,
+    // badge: 'Demnächst',
   },
-  // {
-  //   value: 'company',
-  //   label: 'Firma',
-  //   description: 'Firma',
-  //   icon: Building2,
-  //   color: 'text-blue-600',
-  //   enabled: false,
+  {
+    value: 'company',
+    label: 'Firma',
+    description: 'Geschäftskunden',
+    icon: Building2,
+    color: 'text-blue-600',
+    enabled: true,
     // badge: 'Demnächst',
-  // },
+  },
 ]
 
 // Current role - will come from user session later
@@ -100,11 +100,17 @@ function switchRole(role: UserRole) {
 
         <div class="flex-1 flex flex-col gap-1">
           <span class="text-sm font-semibold">{{ role.label }}</span>
-          <span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{
+          <span class="text-sm text-muted-foreground group-hover:text-foreground group-data-[highlighted]:text-accent-foreground transition-colors">{{
             role.description }}</span>
         </div>
 
-        <Check v-if="currentRole === role.value" class="h-5 w-5 text-green-600 flex-shrink-0" />
+        <!-- High-contrast checkmark for colorblind accessibility -->
+        <div v-if="currentRole === role.value" 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 v-if="role.badge" variant="secondary" class="text-xs px-2 py-0.5 flex-shrink-0">
           {{ role.badge }}
@@ -115,7 +121,7 @@ function switchRole(role: UserRole) {
 
       <div class="px-3 py-2.5 text-sm text-muted-foreground">
         <p class="leading-relaxed">
-          💡 Weitere Rollen werden in Kürze verfügbar sein.
+          💡 Die Rolle bestimmt, welche Produkte und Konditionen dir angezeigt werden.
         </p>
       </div>
     </DropdownMenuContent>