Fix guest demo UX and enforce guest limits

resources/js/guest/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import '../../css/app.css';
 import { enableGuestDemoMode, shouldEnableGuestDemoMode } from './demo/demoMode';
 import { Sentry, initSentry } from '@/lib/sentry';
+import { AppearanceProvider, initializeTheme } from '@/hooks/use-appearance';
 
 const GuestFallback: React.FC<{ message: string }> = ({ message }) => (
   <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
@@ -11,6 +12,7 @@ const GuestFallback: React.FC<{ message: string }> = ({ message }) => (
 );
 
 initSentry('guest');
+initializeTheme();
 if (shouldEnableGuestDemoMode()) {
   enableGuestDemoMode();
 }
@@ -47,15 +49,17 @@ const appRoot = async () => {
   createRoot(rootEl).render(
     <Sentry.ErrorBoundary fallback={<GuestFallback message="Erlebnisse können nicht geladen werden." />}>
       <React.StrictMode>
-        <LocaleProvider>
-          <ToastProvider>
-            <MatomoTracker config={matomoConfig} />
-            <PwaManager />
-            <Suspense fallback={<GuestFallback message="Erlebnisse werden geladen …" />}>
-              <RouterProvider router={router} />
-            </Suspense>
-          </ToastProvider>
-        </LocaleProvider>
+        <AppearanceProvider>
+          <LocaleProvider>
+            <ToastProvider>
+              <MatomoTracker config={matomoConfig} />
+              <PwaManager />
+              <Suspense fallback={<GuestFallback message="Erlebnisse werden geladen …" />}>
+                <RouterProvider router={router} />
+              </Suspense>
+            </ToastProvider>
+          </LocaleProvider>
+        </AppearanceProvider>
       </React.StrictMode>
     </Sentry.ErrorBoundary>
   );