Implement Role Management Features and UI Enhancements

- Introduced a new composable `useActiveRole` for managing user roles, including fetching role status and switching roles with server validation.
- Updated `RoleSwitcher.vue` to utilize the new composable, enhancing role selection with improved error handling and UI feedback.
- Added new API endpoints for role management, including fetching user role status and switching active roles.
- Enhanced product visibility logic to filter based on the user's active role, ensuring a tailored experience.
- Updated database schema to support last active role tracking for users, improving session management.
- Refined UI components across the application to reflect role-based changes and improve user experience.

app/pages/checkout.vue

@@ -100,9 +100,9 @@ async function handleCheckout(checkoutData: CheckoutData) {
 
     <div class="container mx-auto px-4 py-8 max-w-7xl">
       <!-- Page Header -->
-      <div class="mb-8">
-        <h1 class="text-4xl font-bold text-white mb-2">Zur Kasse</h1>
-        <p class="text-white/70">
+      <div class="mb-12 text-center">
+        <h1 class="text-4xl font-bold text-white mb-4 md:text-5xl">Zur Kasse</h1>
+        <p class="mx-auto max-w-2xl text-lg text-white/80">
           Bitte gib deine Rechnungsadresse ein, um die Bestellung abzuschließen.
         </p>
       </div>