Add Role Switcher component to styleguide with detailed usage instructions

- Introduced RoleSwitcher component to the styleguide, allowing users to switch between different roles (individual, educator, company).
- Enhanced the styleguide with a live example, design features, and component usage instructions for better clarity and usability.
- Updated layout to include a new section for the Role Switcher, improving overall navigation and user experience.

app/pages/internal/styleguide.vue

@@ -6,6 +6,7 @@
  */
 
 import { AlertCircle, CheckCircle } from 'lucide-vue-next'
+import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
 
 definePageMeta({
   layout: 'styleguide',
@@ -727,7 +728,7 @@ const copyCode = async (code: string) => {
         </div>
 
         <!-- Product Detail Demo Link -->
-        <div class="card-glass">
+        <div class="card-glass mb-8">
           <h3 class="text-2xl font-semibold mb-4 text-white">Product Detail Page</h3>
           <p class="text-white/90 mb-6">
             Vollständige Produktdetailseite für Jahreskarten mit Hero-Image, Preis- und Verfügbarkeitsanzeige,
@@ -739,6 +740,76 @@ const copyCode = async (code: string) => {
             </NuxtLink>
           </div>
         </div>
+
+        <!-- Role Switcher Dropdown -->
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Role Switcher Dropdown</h3>
+          <p class="text-white/90 mb-6">
+            Rollen-Auswahl-Dropdown für Benutzer. Ermöglicht das Wechseln zwischen verschiedenen Benutzerrollen
+            (Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen verfügbaren Optionen.
+          </p>
+
+          <!-- Live Example -->
+          <div class="mb-6 p-6 bg-purple-darker/50 rounded-xl border border-white/10">
+            <p class="text-sm text-white/70 mb-4">Live-Beispiel (interaktiv):</p>
+            <div class="flex justify-center">
+              <RoleSwitcher />
+            </div>
+          </div>
+
+          <!-- Design Features -->
+          <div class="bg-white/5 p-6 rounded-lg mb-6">
+            <h4 class="text-lg font-semibold text-white mb-4">Design Features</h4>
+            <ul class="space-y-2 text-white/90 text-sm">
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border, Glassmorphism-Effekt</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Kontext-Label:</strong> "Du kaufst als:" (nur Desktop, versteckt auf Mobile)</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap, Building2)</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Dropdown-Breite:</strong> Fixe Breite von 312px für konsistentes Layout</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Menü-Items:</strong> Große, klickbare Items (py-3) mit Icon, Titel und Beschreibung</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Aktive Rolle:</strong> Markiert mit grünem Check-Icon und lila Hintergrund</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Deaktivierte Rollen:</strong> Opacity 60%, "Demnächst" Badge, cursor-not-allowed</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="mt-1 text-experimenta-accent">✓</span>
+                <span><strong>Footer-Hinweis:</strong> Informationstext mit Emoji am Ende des Dropdowns</span>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Component Usage -->
+          <details class="bg-white/5 p-4 rounded-lg">
+            <summary class="cursor-pointer text-white/90 font-semibold">Show Component Code</summary>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Import component --&gt;
+&lt;script setup&gt;
+import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
+&lt;/script&gt;
+
+&lt;!-- Use in template --&gt;
+&lt;template&gt;
+  &lt;RoleSwitcher /&gt;
+&lt;/template&gt;</code></pre>
+          </details>
+        </div>
       </section>
 
       <!-- Footer -->