photo visibility for demo events, hardened the demo mode. fixed dark/light mode toggle and notification bell toggle. fixed photo upload page sizes & header visibility.

app/Console/Commands/SeedDemoSwitcherTenants.php

@@ -3,6 +3,7 @@
 namespace App\Console\Commands;
 
 use App\Models\Event;
+use App\Models\EventMediaAsset;
 use App\Models\EventPackage;
 use App\Models\EventType;
 use App\Models\Package;
@@ -11,6 +12,7 @@ use App\Models\TaskCollection;
 use App\Models\Tenant;
 use App\Models\TenantPackage;
 use App\Models\User;
+use App\Services\Storage\EventStorageManager;
 use Carbon\Carbon;
 use Illuminate\Console\Command;
 use Illuminate\Support\Arr;
@@ -26,6 +28,11 @@ class SeedDemoSwitcherTenants extends Command
 
     protected $description = 'Seeds demo tenants used by the DevTenantSwitcher (endcustomer + reseller profiles)';
 
+    public function __construct(private EventStorageManager $eventStorageManager)
+    {
+        parent::__construct();
+    }
+
     public function handle(): int
     {
         if (! app()->environment(['local', 'development', 'demo'])) {
@@ -88,20 +95,14 @@ class SeedDemoSwitcherTenants extends Command
                     $photo->likes()->delete();
                     $photoLikesDeleted += $deletedLikes;
 
-                    if ($photo->thumbnail_path) {
+                    $this->deleteDemoPhotoAssets($photo, $event);
-                        Storage::disk('public')->delete($photo->thumbnail_path);
-                    }
-
-                    if ($photo->file_path) {
-                        Storage::disk('public')->delete($photo->file_path);
-                    }
-
                     $photo->delete();
                     $photosDeleted++;
                 }
 
-                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery");
+                $cleanupDisk = $this->eventStorageManager->getHotDiskForEvent($event);
-                Storage::disk('public')->deleteDirectory("events/{$event->id}/gallery/thumbs");
+                Storage::disk($cleanupDisk)->deleteDirectory("events/{$event->id}/gallery");
+                Storage::disk($cleanupDisk)->deleteDirectory("events/{$event->id}/gallery/thumbs");
 
                 $event->taskCollections()->detach();
                 $event->tasks()->detach();
@@ -489,7 +490,7 @@ class SeedDemoSwitcherTenants extends Command
                 continue;
             }
 
-            $this->storePhotos($event, $photos);
+            $this->storePhotos($event, $photos, $targetPerEvent);
         }
     }
 
@@ -528,10 +529,11 @@ class SeedDemoSwitcherTenants extends Command
         return Arr::get($data, 'photos', []);
     }
 
-    private function storePhotos(Event $event, array $photos): void
+    private function storePhotos(Event $event, array $photos, int $targetPerEvent): void
     {
         $tenantId = $event->tenant_id;
-        $storage = Storage::disk('public');
+        $disk = $this->eventStorageManager->getHotDiskForEvent($event);
+        $storage = Storage::disk($disk);
         $storage->makeDirectory("events/{$event->id}/gallery");
         $storage->makeDirectory("events/{$event->id}/gallery/thumbs");
 
@@ -540,11 +542,11 @@ class SeedDemoSwitcherTenants extends Command
             ->get();
 
         foreach ($demoPhotos as $photo) {
-            $storage->delete([$photo->file_path, $photo->thumbnail_path]);
+            $this->deleteDemoPhotoAssets($photo, $event);
             $photo->delete();
         }
 
-        $limit = min(count($photos), (int) $this->option('photos-per-event'));
+        $limit = min(count($photos), $targetPerEvent);
         for ($i = 0; $i < $limit; $i++) {
             $photo = $photos[$i];
             $src = $photo['src'] ?? [];
@@ -561,16 +563,20 @@ class SeedDemoSwitcherTenants extends Command
             $filePath = "events/{$event->id}/gallery/{$filename}";
             $thumbPath = "events/{$event->id}/gallery/thumbs/{$thumbFilename}";
 
+            $originalBody = null;
+            $thumbBody = null;
             try {
                 $imageResponse = Http::get($originalUrl);
                 if ($imageResponse->ok()) {
-                    $storage->put($filePath, $imageResponse->body());
+                    $originalBody = $imageResponse->body();
+                    $storage->put($filePath, $originalBody);
                 }
 
                 if ($thumbUrl) {
                     $thumbResponse = Http::get($thumbUrl);
                     if ($thumbResponse->ok()) {
-                        $storage->put($thumbPath, $thumbResponse->body());
+                        $thumbBody = $thumbResponse->body();
+                        $storage->put($thumbPath, $thumbBody);
                     }
                 }
             } catch (\Throwable $exception) {
@@ -581,7 +587,7 @@ class SeedDemoSwitcherTenants extends Command
 
             $timestamp = Carbon::parse($event->date ?? Carbon::now())->addHours($i);
 
-            Photo::updateOrCreate(
+            $photoRecord = Photo::updateOrCreate(
                 [
                     'tenant_id' => $tenantId,
                     'event_id' => $event->id,
@@ -592,11 +598,36 @@ class SeedDemoSwitcherTenants extends Command
                     'guest_name' => 'Demo Guest '.($i + 1),
                     'likes_count' => rand(1, 25),
                     'is_featured' => $i === 0,
+                    'status' => 'approved',
+                    'mime_type' => 'image/jpeg',
+                    'size' => $originalBody ? strlen($originalBody) : null,
                     'metadata' => ['demo' => true, 'source' => 'pexels'],
                     'created_at' => $timestamp,
                     'updated_at' => $timestamp,
                 ]
             );
+
+            $originalAsset = $this->eventStorageManager->recordAsset($event, $disk, $filePath, [
+                'variant' => 'original',
+                'mime_type' => 'image/jpeg',
+                'size_bytes' => $originalBody ? strlen($originalBody) : null,
+                'checksum' => $originalBody ? hash('sha256', $originalBody) : null,
+                'photo_id' => $photoRecord->id,
+            ]);
+
+            if ($thumbBody) {
+                $this->eventStorageManager->recordAsset($event, $disk, $thumbPath, [
+                    'variant' => 'thumbnail',
+                    'mime_type' => 'image/jpeg',
+                    'size_bytes' => strlen($thumbBody),
+                    'photo_id' => $photoRecord->id,
+                    'meta' => [
+                        'source_variant_id' => $originalAsset->id,
+                    ],
+                ]);
+            }
+
+            $photoRecord->update(['media_asset_id' => $originalAsset->id]);
         }
 
         EventPackage::where('event_id', $event->id)->update([
@@ -606,4 +637,31 @@ class SeedDemoSwitcherTenants extends Command
 
         $this->info("Seeded {$limit} photos for {$event->slug}");
     }
+
+    private function deleteDemoPhotoAssets(Photo $photo, Event $event): void
+    {
+        $fallbackDisk = $this->eventStorageManager->getHotDiskForEvent($event);
+        $assets = EventMediaAsset::where('photo_id', $photo->id)->get();
+
+        foreach ($assets as $asset) {
+            $assetDisk = $asset->disk ?: $fallbackDisk;
+            if (! config("filesystems.disks.{$assetDisk}")) {
+                $assetDisk = $fallbackDisk;
+            }
+
+            if ($asset->path) {
+                Storage::disk($assetDisk)->delete($asset->path);
+            }
+
+            $asset->delete();
+        }
+
+        if ($photo->file_path) {
+            Storage::disk($fallbackDisk)->delete($photo->file_path);
+        }
+
+        if ($photo->thumbnail_path) {
+            Storage::disk($fallbackDisk)->delete($photo->thumbnail_path);
+        }
+    }
 }

app/Http/Controllers/Api/EventPublicController.php

@@ -1785,6 +1785,8 @@ class EventPublicController extends BaseController
             $this->joinTokenService->incrementUsage($joinToken);
         }
 
+        $demoReadOnly = (bool) Arr::get($joinToken?->metadata ?? [], 'demo_read_only', false);
+
         return response()->json([
             'id' => $event->id,
             'slug' => $event->slug,
@@ -1794,6 +1796,7 @@ class EventPublicController extends BaseController
             'updated_at' => $event->updated_at,
             'type' => $eventTypeData,
             'join_token' => $joinToken?->token,
+            'demo_read_only' => $demoReadOnly,
             'photobooth_enabled' => (bool) ($event->photoboothSetting?->enabled),
             'branding' => $branding,
             'guest_upload_visibility' => Arr::get($event->settings ?? [], 'guest_upload_visibility', 'review'),
@@ -2751,6 +2754,28 @@ class EventPublicController extends BaseController
 
         [$event, $joinToken] = $result;
         $eventId = $event->id;
+        $demoReadOnly = (bool) Arr::get($joinToken?->metadata ?? [], 'demo_read_only', false);
+
+        if ($demoReadOnly) {
+            $this->recordTokenEvent(
+                $joinToken,
+                $request,
+                'demo_read_only',
+                ['event_id' => $eventId],
+                $token,
+                Response::HTTP_FORBIDDEN
+            );
+
+            return ApiError::response(
+                'demo_read_only',
+                'Demo mode',
+                'Uploads are disabled in demo mode.',
+                Response::HTTP_FORBIDDEN,
+                [
+                    'event_id' => $eventId,
+                ]
+            );
+        }
 
         $eventModel = Event::with([
             'tenant',

app/Services/EventJoinTokenService.php

@@ -42,6 +42,7 @@ class EventJoinTokenService
 
     public function revoke(EventJoinToken $joinToken, ?string $reason = null): EventJoinToken
     {
+        unset($joinToken->plain_token);
         $joinToken->revoked_at = now();
 
         if ($reason) {

database/seeders/DemoEventSeeder.php

@@ -11,9 +11,9 @@ use App\Models\Task;
 use App\Models\TaskCollection;
 use App\Models\Tenant;
 use App\Services\EventJoinTokenService;
-use Illuminate\Support\Facades\Crypt;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Crypt;
 use Illuminate\Support\Facades\Schema;
 
 class DemoEventSeeder extends Seeder
@@ -111,15 +111,30 @@ class DemoEventSeeder extends Seeder
     private function ensureJoinToken(Event $event, string $label, ?string $token = null): void
     {
         if ($event->joinTokens()->exists()) {
+            $existingToken = $event->joinTokens()->latest('id')->first();
+            if ($existingToken) {
+                $metadata = $existingToken->metadata ?? [];
+                if (! array_key_exists('demo_read_only', $metadata)) {
+                    $metadata['demo_read_only'] = true;
+                    $existingToken->metadata = $metadata;
+                    $existingToken->save();
+                }
+            }
+
             return;
         }
 
-        $attributes = ['label' => $label];
+        $metadata = ['demo_read_only' => true];
 
         if ($token) {
-            $attributes['metadata'] = ['seeded' => true, 'plain_token' => $token];
+            $metadata = array_merge($metadata, ['seeded' => true, 'plain_token' => $token]);
         }
 
+        $attributes = [
+            'label' => $label,
+            'metadata' => $metadata,
+        ];
+
         $tokenModel = app(EventJoinTokenService::class)->createToken($event, $attributes);
 
         if ($token) {

resources/css/app.css

@@ -538,11 +538,17 @@ h4,
     animation: aurora 20s ease infinite;
 }
 
-.guest-immersive .guest-header,
+.guest-immersive .guest-header {
-.guest-immersive .guest-bottom-nav {
     display: none !important;
 }
 
+.guest-immersive .guest-bottom-nav {
+    display: flex !important;
+    opacity: 1 !important;
+    transform: none !important;
+    pointer-events: auto !important;
+}
+
 .guest-immersive {
     overscroll-behavior: contain;
     background-color: #000;

resources/js/components/__tests__/AppearanceToggleDropdown.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import AppearanceToggleDropdown from '../appearance-dropdown';
+import { AppearanceProvider } from '@/hooks/use-appearance';
+
+const matchMediaStub = (matches = false) => ({
+  matches,
+  media: '(prefers-color-scheme: dark)',
+  onchange: null,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+});
+
+describe('AppearanceToggleDropdown', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => matchMediaStub(false)),
+    });
+    localStorage.setItem('theme', 'light');
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('toggles the document class to dark mode', () => {
+    render(
+      <AppearanceProvider>
+        <AppearanceToggleDropdown />
+      </AppearanceProvider>,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+});

resources/js/guest/components/BottomNav.tsx

@@ -82,12 +82,14 @@ export default function BottomNav() {
   const isUploadActive = currentPath.startsWith(`${base}/upload`);
 
   const compact = isUploadActive;
+  const navPaddingBottom = `calc(env(safe-area-inset-bottom, 0px) + ${compact ? 12 : 18}px)`;
 
   return (
     <div
-      className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-gradient-to-t from-black/40 via-black/20 to-transparent px-4 shadow-xl backdrop-blur-2xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/90 dark:via-gray-900/70 dark:to-gray-900/35 ${
+      className={`guest-bottom-nav fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-gradient-to-t from-black/70 via-black/45 to-black/10 px-4 shadow-xl backdrop-blur-2xl transition-all duration-200 dark:border-white/10 dark:from-gray-950/90 dark:via-gray-900/70 dark:to-gray-900/35 ${
-        compact ? 'pb-1 pt-1 translate-y-3' : 'pb-3 pt-2'
+        compact ? 'pt-1' : 'pt-2 pb-1'
       }`}
+      style={{ paddingBottom: navPaddingBottom }}
     >
       <div className="mx-auto flex max-w-lg items-center gap-3">
         <div className="flex flex-1 justify-evenly gap-2">

resources/js/guest/components/GalleryPreview.tsx

@@ -7,6 +7,7 @@ import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import { Heart } from 'lucide-react';
 import { useTranslation } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
+import { cn } from '@/lib/utils';
 
 type Props = { token: string };
 
@@ -90,7 +91,11 @@ export default function GalleryPreview({ token }: Props) {
   ];
 
   return (
-    <Card className="border border-muted/30 shadow-sm" style={{ borderRadius: radius, background: 'var(--guest-surface)', fontFamily: bodyFont }}>
+    <Card
+      className="border border-muted/30 bg-[var(--guest-surface)] shadow-sm dark:border-slate-800/70 dark:bg-slate-950/70"
+      data-testid="gallery-preview"
+      style={{ borderRadius: radius, fontFamily: bodyFont }}
+    >
       <CardContent className="space-y-3 p-3">
         <div className="flex items-center justify-between">
           <div>
@@ -107,28 +112,36 @@ export default function GalleryPreview({ token }: Props) {
         </div>
 
         <div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]">
-        {filters.map((filter) => (
+          {filters.map((filter) => {
+            const isActive = mode === filter.value;
+
+            return (
               <button
                 key={filter.value}
                 type="button"
                 onClick={() => setMode(filter.value)}
                 style={{
                   borderRadius: radius,
-              border: mode === filter.value ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
+                  border: isActive ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
-              background: mode === filter.value ? branding.primaryColor : 'var(--guest-surface)',
+                  background: isActive ? branding.primaryColor : undefined,
-              color: mode === filter.value ? '#ffffff' : 'var(--foreground)',
+                  boxShadow: isActive ? `0 8px 18px ${branding.primaryColor}33` : 'none',
-              boxShadow: mode === filter.value ? `0 8px 18px ${branding.primaryColor}33` : 'none',
                 }}
-            className="px-4 py-1 transition"
+                className={cn(
+                  'px-4 py-1 transition',
+                  isActive
+                    ? 'text-white'
+                    : 'bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70 dark:text-slate-100',
+                )}
               >
                 {filter.label}
               </button>
-        ))}
+            );
+          })}
         </div>
 
         {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
         {!loading && items.length === 0 && (
-          <div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground">
+          <div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground dark:border-slate-800/60 dark:bg-slate-950/60">
             <Heart className="h-4 w-4" style={{ color: branding.secondaryColor }} aria-hidden />
             Noch keine Fotos. Starte mit deinem ersten Upload!
           </div>
@@ -139,11 +152,10 @@ export default function GalleryPreview({ token }: Props) {
           <Link
             key={p.id}
             to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
-            className="group relative block overflow-hidden text-foreground"
+            className="group relative block overflow-hidden bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70"
             style={{
               borderRadius: radius,
               border: `1px solid ${branding.primaryColor}22`,
-              background: 'var(--guest-surface)',
               boxShadow: `0 12px 26px ${branding.primaryColor}22`,
             }}
           >

resources/js/guest/components/Header.tsx

@@ -152,11 +152,15 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
   const taskProgress = useGuestTaskProgress(eventToken);
   const tasksEnabled = isTaskModeEnabled(event);
   const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const notificationButtonRef = React.useRef<HTMLButtonElement | null>(null);
   React.useEffect(() => {
     if (!notificationsOpen) {
       return;
     }
     const handler = (event: MouseEvent) => {
+      if (notificationButtonRef.current?.contains(event.target as Node)) {
+        return;
+      }
       if (!panelRef.current) return;
       if (panelRef.current.contains(event.target as Node)) return;
       setNotificationsOpen(false);
@@ -245,6 +249,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
             open={notificationsOpen}
             onToggle={() => setNotificationsOpen((prev) => !prev)}
             panelRef={panelRef}
+            buttonRef={notificationButtonRef}
             taskProgress={tasksEnabled && taskProgress?.hydrated ? taskProgress : undefined}
             t={t}
           />
@@ -262,13 +267,14 @@ type NotificationButtonProps = {
   open: boolean;
   onToggle: () => void;
   panelRef: React.RefObject<HTMLDivElement | null>;
+  buttonRef: React.RefObject<HTMLButtonElement | null>;
   taskProgress?: ReturnType<typeof useGuestTaskProgress>;
   t: TranslateFn;
 };
 
 type PushState = ReturnType<typeof usePushSubscription>;
 
-function NotificationButton({ center, eventToken, open, onToggle, panelRef, taskProgress, t }: NotificationButtonProps) {
+function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, taskProgress, t }: NotificationButtonProps) {
   const badgeCount = center.unreadCount;
   const progressRatio = taskProgress
     ? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
@@ -322,6 +328,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, task
   return (
     <div className="relative z-50">
       <button
+        ref={buttonRef}
         type="button"
         onClick={onToggle}
         className="relative rounded-full bg-white/15 p-2 text-white transition hover:bg-white/30"

resources/js/guest/components/__tests__/GalleryPreview.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import GalleryPreview from '../GalleryPreview';
+
+vi.mock('../../polling/usePollGalleryDelta', () => ({
+  usePollGalleryDelta: () => ({
+    photos: [],
+    loading: false,
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12, linkColor: '#fb7185' },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+describe('GalleryPreview', () => {
+  it('renders dark mode-ready surfaces', () => {
+    render(
+      <MemoryRouter>
+        <GalleryPreview token="demo" />
+      </MemoryRouter>,
+    );
+
+    const card = screen.getByTestId('gallery-preview');
+    expect(card.className).toContain('bg-[var(--guest-surface)]');
+    expect(card.className).toContain('dark:bg-slate-950/70');
+
+    const emptyState = screen.getByText(/Noch keine Fotos/i).closest('div');
+    expect(emptyState).not.toBeNull();
+    expect(emptyState?.className).toContain('dark:bg-slate-950/60');
+  });
+});

resources/js/guest/components/__tests__/HeaderNotificationToggle.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Header from '../Header';
+
+vi.mock('../settings-sheet', () => ({
+  SettingsSheet: () => <div data-testid="settings-sheet" />,
+}));
+
+vi.mock('@/components/appearance-dropdown', () => ({
+  default: () => <div data-testid="appearance-toggle" />,
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    status: 'ready',
+    event: {
+      name: 'Demo Event',
+      type: { icon: 'heart' },
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useOptionalEventStats: () => null,
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useOptionalGuestIdentity: () => null,
+}));
+
+vi.mock('../../context/NotificationCenterContext', () => ({
+  useOptionalNotificationCenter: () => ({
+    notifications: [],
+    unreadCount: 0,
+    queueItems: [],
+    queueCount: 0,
+    totalCount: 0,
+    loading: false,
+    refresh: vi.fn(),
+    setFilters: vi.fn(),
+    markAsRead: vi.fn(),
+    dismiss: vi.fn(),
+    eventToken: 'demo',
+    lastFetchedAt: null,
+    isOffline: false,
+  }),
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    hydrated: false,
+    completedCount: 0,
+  }),
+  TASK_BADGE_TARGET: 10,
+}));
+
+vi.mock('../../hooks/usePushSubscription', () => ({
+  usePushSubscription: () => ({
+    supported: false,
+    permission: 'default',
+    subscribed: false,
+    loading: false,
+    error: null,
+    enable: vi.fn(),
+    disable: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string | { defaultValue?: string }) => {
+      if (typeof fallback === 'string') {
+        return fallback;
+      }
+      if (fallback && typeof fallback.defaultValue === 'string') {
+        return fallback.defaultValue;
+      }
+      return _key;
+    },
+  }),
+}));
+
+describe('Header notifications toggle', () => {
+  it('closes the panel when clicking the bell again', () => {
+    render(<Header eventToken="demo" title="Demo" />);
+
+    const bellButton = screen.getByLabelText('Benachrichtigungen anzeigen');
+    fireEvent.click(bellButton);
+
+    expect(screen.getByText('Benachrichtigungen')).toBeInTheDocument();
+
+    fireEvent.click(bellButton);
+
+    expect(screen.queryByText('Benachrichtigungen')).not.toBeInTheDocument();
+  });
+});

resources/js/guest/hooks/useDirectUpload.ts

@@ -4,6 +4,10 @@ import { uploadPhoto, type UploadError } from '../services/photosApi';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
 import { resolveUploadErrorDialog, type UploadErrorDialog } from '../lib/uploadErrorDialog';
+import { notify } from '../queue/notify';
+import { useTranslation } from '../i18n/useTranslation';
+import { isGuestDemoModeEnabled } from '../demo/demoMode';
+import { useEventData } from './useEventData';
 
 type DirectUploadResult = {
   success: boolean;
@@ -23,6 +27,8 @@ type UseDirectUploadOptions = {
 export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }: UseDirectUploadOptions) {
   const { name } = useGuestIdentity();
   const { markCompleted } = useGuestTaskProgress(eventToken);
+  const { event } = useEventData();
+  const { t } = useTranslation();
   const [uploading, setUploading] = useState(false);
   const [progress, setProgress] = useState(0);
   const [warning, setWarning] = useState<string | null>(null);
@@ -66,6 +72,13 @@ export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }
   const upload = useCallback(
     async (file: File): Promise<DirectUploadResult> => {
       if (!canUpload || uploading) return { success: false, warning, error };
+      if (isGuestDemoModeEnabled() || event?.demo_read_only) {
+        const demoMessage = t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.');
+        setError(demoMessage);
+        setWarning(null);
+        notify(demoMessage, 'error');
+        return { success: false, warning, error: demoMessage };
+      }
       const preparedResult = await preparePhoto(file);
       if (!preparedResult.ok) {
         return { success: false, warning, error };
@@ -115,6 +128,10 @@ export function useDirectUpload({ eventToken, taskId, emotionSlug, onCompleted }
         setError(dialog?.description ?? uploadErr.message ?? 'Upload fehlgeschlagen.');
         setWarning(null);
 
+        if (uploadErr.code === 'demo_read_only') {
+          notify(t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.'), 'error');
+        }
+
         if (
           uploadErr.code === 'photo_limit_exceeded'
           || uploadErr.code === 'upload_device_limit'

resources/js/guest/i18n/messages.ts

@@ -495,6 +495,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
         completed: 'Upload abgeschlossen.',
         failed: 'Upload fehlgeschlagen. Bitte versuche es erneut.',
       },
+      demoReadOnly: 'Uploads sind in der Demo deaktiviert.',
       optimizedNotice: 'Wir haben dein Foto verkleinert, damit der Upload schneller klappt. Eingespart: {saved}',
       optimizedFallback: 'Optimierung nicht möglich – wir laden das Original hoch.',
       retrying: 'Verbindung holperig – neuer Versuch ({attempt}).',
@@ -1149,6 +1150,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
         completed: 'Upload complete.',
         failed: 'Upload failed. Please try again.',
       },
+      demoReadOnly: 'Uploads are disabled in demo mode.',
       optimizedNotice: 'We optimized your photo to speed up the upload. Saved: {saved}',
       optimizedFallback: 'Could not optimize – uploading the original.',
       retrying: 'Connection unstable – retrying ({attempt}).',

resources/js/guest/main.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import '../../css/app.css';
-import { initializeTheme } from '@/hooks/use-appearance';
+import { AppearanceProvider, initializeTheme } from '@/hooks/use-appearance';
 import { enableGuestDemoMode, shouldEnableGuestDemoMode } from './demo/demoMode';
 
 initializeTheme();
@@ -15,7 +15,9 @@ const shareRoot = async () => {
   const { SharedPhotoStandalone } = await import('./pages/SharedPhotoPage');
   createRoot(rootEl).render(
     <React.StrictMode>
+      <AppearanceProvider>
         <SharedPhotoStandalone />
+      </AppearanceProvider>
     </React.StrictMode>
   );
 };
@@ -52,6 +54,7 @@ const appRoot = async () => {
 
   createRoot(rootEl).render(
     <React.StrictMode>
+      <AppearanceProvider>
         <LocaleProvider>
           <ToastProvider>
             <MatomoTracker config={matomoConfig} />
@@ -66,6 +69,7 @@ const appRoot = async () => {
             </Suspense>
           </ToastProvider>
         </LocaleProvider>
+      </AppearanceProvider>
     </React.StrictMode>
   );
 };

resources/js/guest/pages/AchievementsPage.tsx

@@ -91,7 +91,7 @@ type BadgesGridProps = {
   t: TranslateFn;
 };
 
-function BadgesGrid({ badges, t }: BadgesGridProps) {
+export function BadgesGrid({ badges, t }: BadgesGridProps) {
   if (badges.length === 0) {
     return (
       <Card>
@@ -121,11 +121,12 @@ function BadgesGrid({ badges, t }: BadgesGridProps) {
           return (
             <div
               key={badge.id}
+              data-testid={`badge-card-${badge.id}`}
               className={cn(
                 'relative overflow-hidden rounded-2xl border px-4 py-3 shadow-sm transition',
                 badge.earned
-                  ? 'border-emerald-400/40 bg-gradient-to-br from-emerald-500/20 via-emerald-500/5 to-white text-emerald-900'
+                  ? 'border-emerald-400/40 bg-gradient-to-br from-emerald-500/20 via-emerald-500/5 to-white text-emerald-900 dark:border-emerald-400/30 dark:from-emerald-400/20 dark:via-emerald-400/10 dark:to-slate-950/70 dark:text-emerald-50'
-                  : 'border-border/60 bg-white/80',
+                  : 'border-border/60 bg-white/80 dark:border-slate-800/70 dark:bg-slate-950/60',
               )}
             >
               <div className="flex items-start justify-between gap-2">

resources/js/guest/pages/HomePage.tsx

@@ -12,7 +12,7 @@ import GalleryPreview from '../components/GalleryPreview';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
+import { Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
@@ -453,7 +453,7 @@ type MissionPreview = {
   emotion?: EmotionIdentity | null;
 };
 
-function MissionActionCard({
+export function MissionActionCard({
   token,
   mission,
   loading,
@@ -676,8 +676,10 @@ function MissionActionCard({
                     ? `/e/${encodeURIComponent(token)}/upload?task=${card.id}`
                     : `/e/${encodeURIComponent(token)}/tasks`
                 }
+                className="inline-flex items-center justify-center gap-2"
               >
-                Aufgabe starten
+                <Camera className="h-4 w-4" aria-hidden />
+                <span>Aufgabe starten</span>
               </Link>
             </Button>
             <Button
@@ -703,9 +705,9 @@ function MissionActionCard({
   const initialSlide = Math.min(initialIndex, Math.max(0, slides.length - 1));
 
   return (
-    <Card className="border-0 bg-transparent shadow-none" style={{ fontFamily: bodyFont }}>
+    <Card className="border-0 bg-transparent py-2 shadow-none" style={{ fontFamily: bodyFont }}>
       <CardContent className="px-0 py-0">
-        <div className="relative min-h-[280px] px-2">
+        <div className="relative min-h-[240px] px-2 sm:min-h-[260px]" data-testid="mission-card-stack">
           <Swiper
             effect="cards"
             modules={[EffectCards]}
@@ -733,7 +735,7 @@ function MissionActionCard({
               lastSlideIndexRef.current = realIndex;
               onIndexChange(realIndex, slides.length);
             }}
-            className="!pb-2"
+            className="!pb-1"
             style={{ paddingLeft: '0.25rem', paddingRight: '0.25rem' }}
           >
             {slides.map((card, index) => {
@@ -769,7 +771,7 @@ function EmotionActionCard() {
   );
 }
 
-function UploadActionCard({
+export function UploadActionCard({
   token,
   accentColor,
   secondaryAccent,
@@ -829,14 +831,14 @@ function UploadActionCard({
 
   return (
     <Card
-      className="overflow-hidden border border-muted/30 shadow-sm"
+      className="gap-2 overflow-hidden border border-muted/30 bg-[var(--guest-surface)] py-2 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/70"
+      data-testid="upload-action-card"
       style={{
-        background: 'var(--guest-surface)',
         borderRadius: `${radius}px`,
         fontFamily: bodyFont,
       }}
     >
-      <CardContent className="flex flex-col gap-2 py-[4px]">
+      <CardContent className="flex flex-col gap-1.5 px-4 py-2">
         <Button
           type="button"
           className="text-white justify-center"

resources/js/guest/pages/UploadPage.tsx

@@ -41,6 +41,7 @@ import { compressPhoto, formatBytes } from '../lib/image';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { isTaskModeEnabled } from '../lib/engagement';
+import { getDeviceId } from '../lib/device';
 
 interface Task {
   id: number;
@@ -130,6 +131,7 @@ export default function UploadPage() {
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
   const uploadsRequireApproval =
     (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
+  const demoReadOnly = Boolean(event?.demo_read_only);
 
   const taskIdParam = searchParams.get('task');
   const emotionSlug = searchParams.get('emotion') || '';
@@ -154,9 +156,11 @@ export default function UploadPage() {
 const [uploadProgress, setUploadProgress] = useState(0);
 const [uploadError, setUploadError] = useState<string | null>(null);
 const [uploadWarning, setUploadWarning] = useState<string | null>(null);
-const [immersiveMode, setImmersiveMode] = useState(false);
+const [immersiveMode, setImmersiveMode] = useState(true);
 const [showCelebration, setShowCelebration] = useState(false);
 const [showHeroOverlay, setShowHeroOverlay] = useState(true);
+const kpiChipsRef = useRef<HTMLDivElement | null>(null);
+const navSentinelRef = useRef<HTMLDivElement | null>(null);
 
   const [errorDialog, setErrorDialog] = useState<UploadErrorDialog | null>(null);
   const [taskDetailsExpanded, setTaskDetailsExpanded] = useState(false);
@@ -172,15 +176,35 @@ const [canUpload, setCanUpload] = useState(true);
   useEffect(() => {
     if (typeof document === 'undefined') return undefined;
     const className = 'guest-immersive';
-    if (immersiveMode) {
     document.body.classList.add(className);
-    } else {
+    document.body.classList.add('guest-nav-visible'); // show nav by default on upload page
-      document.body.classList.remove(className);
+
-    }
     return () => {
       document.body.classList.remove(className);
+      document.body.classList.remove('guest-nav-visible');
     };
-  }, [immersiveMode]);
+  }, []);
+
+  const updateNavVisibility = useCallback(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    // nav is always visible on upload page unless user explicitly toggles immersive off via button
+    document.body.classList.add('guest-nav-visible');
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    // ensure nav remains visible; hide only when immersive toggled off via the menu button
+    updateNavVisibility();
+
+    return () => {
+      document.body.classList.remove('guest-nav-visible');
+    };
+  }, [updateNavVisibility]);
 
   const [showPrimer, setShowPrimer] = useState<boolean>(() => {
     if (typeof window === 'undefined') return false;
@@ -330,6 +354,13 @@ const [canUpload, setCanUpload] = useState(true);
     if (!eventKey) return;
 
     const checkLimits = async () => {
+      if (demoReadOnly) {
+        setCanUpload(false);
+        setUploadError(t('upload.demoReadOnly', 'Uploads sind in der Demo deaktiviert.'));
+        setUploadWarning(null);
+        return;
+      }
+
       try {
         const pkg = await getEventPackage(eventKey);
         setEventPackage(pkg);
@@ -374,7 +405,7 @@ const [canUpload, setCanUpload] = useState(true);
     };
 
     checkLimits();
-  }, [eventKey, t]);
+  }, [demoReadOnly, eventKey, t]);
 
   const stopStream = useCallback(() => {
     if (streamRef.current) {
@@ -1111,7 +1142,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
     <>
       <div
         ref={cameraShellRef as unknown as React.RefObject<HTMLDivElement>}
-        className="relative flex min-h-screen flex-col gap-4 pb-[calc(env(safe-area-inset-bottom,0px)+12px)] pt-3"
+        className="relative flex min-h-screen flex-col gap-4 pb-[calc(env(safe-area-inset-bottom,0px)+72px)] pt-3"
         style={bodyFont ? { fontFamily: bodyFont } : undefined}
       >
         {taskFloatingCard}
@@ -1130,9 +1161,9 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
           ref={cameraViewportRef}
           className="relative w-full"
           style={{
-            height: 'calc(100vh - 160px)',
+            height: 'clamp(60vh, calc(100vh - 220px), 82vh)',
-            minHeight: '70vh',
+            minHeight: '60vh',
-            maxHeight: '90vh',
+            maxHeight: '88vh',
           }}
         >
             <video
@@ -1402,7 +1433,9 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
       </div>
 
       {socialChips.length > 0 && (
-        <div className="mt-4 flex gap-3 overflow-x-auto pb-2">
+        <>
+          <div ref={navSentinelRef} data-testid="nav-visibility-sentinel" className="h-px w-full" />
+          <div ref={kpiChipsRef} data-testid="upload-kpi-chips" className="mt-4 flex gap-3 overflow-x-auto pb-2">
             {socialChips.map((chip) => (
               <div
                 key={chip.id}
@@ -1413,6 +1446,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
               </div>
             ))}
           </div>
+        </>
       )}
 
       {permissionState !== 'granted' && renderPermissionNotice()}

resources/js/guest/pages/__tests__/BadgesGrid.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BadgesGrid } from '../AchievementsPage';
+
+const t = (key: string) => key;
+
+describe('BadgesGrid', () => {
+  it('adds dark mode classes for earned and pending badges', () => {
+    render(
+      <BadgesGrid
+        badges={[
+          {
+            id: 1,
+            title: 'First Badge',
+            description: 'Earned badge',
+            earned: true,
+            progress: 1,
+            target: 1,
+          },
+          {
+            id: 2,
+            title: 'Second Badge',
+            description: 'Pending badge',
+            earned: false,
+            progress: 0,
+            target: 5,
+          },
+        ]}
+        t={t}
+      />,
+    );
+
+    const earnedCard = screen.getByTestId('badge-card-1');
+    expect(earnedCard.className).toContain('dark:from-emerald-400/20');
+    expect(earnedCard.className).toContain('dark:text-emerald-50');
+
+    const pendingCard = screen.getByTestId('badge-card-2');
+    expect(pendingCard.className).toContain('dark:bg-slate-950/60');
+    expect(pendingCard.className).toContain('dark:border-slate-800/70');
+  });
+});

resources/js/guest/pages/__tests__/MissionActionCardSpacing.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { MissionActionCard } from '../HomePage';
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../lib/emotionTheme', () => ({
+  getEmotionTheme: () => ({
+    gradientBackground: 'linear-gradient(135deg, #f43f5e, #fb7185)',
+  }),
+  getEmotionIcon: () => '🙂',
+}));
+
+vi.mock('swiper/react', () => ({
+  Swiper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  SwiperSlide: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('swiper/modules', () => ({
+  EffectCards: {},
+}));
+
+describe('MissionActionCard layout spacing', () => {
+  it('uses a tighter min height for the stack container', () => {
+    render(
+      <MemoryRouter>
+        <MissionActionCard
+          token="demo"
+          mission={{
+            id: 1,
+            title: 'Demo Mission',
+            description: 'Do a demo task.',
+            duration: 3,
+            emotion: null,
+          }}
+          loading={false}
+          onAdvance={() => {}}
+          stack={[]}
+          initialIndex={0}
+          onIndexChange={() => {}}
+          swiperRef={{ current: null }}
+        />
+      </MemoryRouter>,
+    );
+
+    const stack = screen.getByTestId('mission-card-stack');
+    expect(stack.className).toContain('min-h-[240px]');
+    expect(stack.className).toContain('sm:min-h-[260px]');
+  });
+});

resources/js/guest/pages/__tests__/UploadActionCard.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { UploadActionCard } from '../HomePage';
+
+vi.mock('../../hooks/useDirectUpload', () => ({
+  useDirectUpload: () => ({
+    upload: vi.fn(),
+    uploading: false,
+    error: null,
+    warning: null,
+    progress: 0,
+    reset: vi.fn(),
+  }),
+}));
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+  };
+});
+
+describe('UploadActionCard', () => {
+  it('renders with dark mode surface classes', () => {
+    render(
+      <MemoryRouter>
+        <UploadActionCard
+          token="demo"
+          accentColor="#f43f5e"
+          secondaryAccent="#fb7185"
+          radius={12}
+          requiresApproval={false}
+        />
+      </MemoryRouter>,
+    );
+
+    const card = screen.getByTestId('upload-action-card');
+    expect(card.className).toContain('bg-[var(--guest-surface)]');
+    expect(card.className).toContain('dark:bg-slate-950/70');
+  });
+});

resources/js/guest/pages/__tests__/UploadPageImmersive.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import UploadPage from '../UploadPage';
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useParams: () => ({ token: 'demo' }),
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    markCompleted: vi.fn(),
+  }),
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useGuestIdentity: () => ({
+    name: 'Guest',
+  }),
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    event: {
+      guest_upload_visibility: 'immediate',
+      demo_read_only: false,
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useEventStats: () => ({
+    latestPhotoAt: null,
+    onlineGuests: 0,
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../services/eventApi', () => ({
+  getEventPackage: vi.fn().mockResolvedValue(null),
+}));
+
+vi.mock('../../services/photosApi', () => ({
+  uploadPhoto: vi.fn(),
+}));
+
+describe('UploadPage immersive mode', () => {
+  it('adds the guest-immersive class on mount', async () => {
+    render(<UploadPage />);
+
+    await waitFor(() => {
+      expect(document.body.classList.contains('guest-immersive')).toBe(true);
+    });
+  });
+});

resources/js/guest/pages/__tests__/UploadPageNavVisibility.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import UploadPage from '../UploadPage';
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useParams: () => ({ token: 'demo' }),
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
+}));
+
+vi.mock('../../hooks/useGuestTaskProgress', () => ({
+  useGuestTaskProgress: () => ({
+    markCompleted: vi.fn(),
+  }),
+}));
+
+vi.mock('../../context/GuestIdentityContext', () => ({
+  useGuestIdentity: () => ({
+    name: 'Guest',
+  }),
+}));
+
+vi.mock('../../hooks/useEventData', () => ({
+  useEventData: () => ({
+    event: {
+      guest_upload_visibility: 'immediate',
+      demo_read_only: false,
+      engagement_mode: 'photo_only',
+    },
+  }),
+}));
+
+vi.mock('../../context/EventStatsContext', () => ({
+  useEventStats: () => ({
+    latestPhotoAt: null,
+    onlineGuests: 2,
+  }),
+}));
+
+vi.mock('../../context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: {
+      primaryColor: '#f43f5e',
+      secondaryColor: '#fb7185',
+      buttons: { radius: 12 },
+      typography: {},
+      fontFamily: 'Montserrat',
+    },
+  }),
+}));
+
+vi.mock('../../i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+    locale: 'de',
+  }),
+}));
+
+vi.mock('../../services/eventApi', () => ({
+  getEventPackage: vi.fn().mockResolvedValue(null),
+}));
+
+vi.mock('../../services/photosApi', () => ({
+  uploadPhoto: vi.fn(),
+}));
+
+describe('UploadPage bottom nav visibility', () => {
+  beforeEach(() => {
+    document.body.classList.remove('guest-nav-visible');
+    document.body.classList.remove('guest-immersive');
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+  });
+
+  it('shows the nav after the KPI chips are scrolled past', async () => {
+    render(<UploadPage />);
+
+    const chips = screen.getByTestId('upload-kpi-chips');
+    const sentinel = screen.getByTestId('nav-visibility-sentinel');
+    let bottom = 20;
+    let top = 20;
+    vi.spyOn(chips, 'getBoundingClientRect').mockImplementation(() => ({
+      bottom,
+      top: bottom - 40,
+      left: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }) as DOMRect);
+    vi.spyOn(sentinel, 'getBoundingClientRect').mockImplementation(() => ({
+      bottom: top,
+      top,
+      left: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }) as DOMRect);
+
+    // nav is on by default now
+    expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
+
+    bottom = -1;
+    top = -10;
+    window.dispatchEvent(new Event('scroll'));
+    await waitFor(() => {
+      expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
+    });
+
+    // Nav stays visible by design now
+  });
+});

resources/js/guest/services/eventApi.ts

@@ -58,6 +58,7 @@ export interface EventData {
   created_at: string;
   updated_at: string;
   join_token?: string | null;
+  demo_read_only?: boolean;
   photobooth_enabled?: boolean | null;
   type?: {
     slug: string;
@@ -270,6 +271,7 @@ export async function fetchEvent(eventKey: string): Promise<EventData> {
       engagement_mode: (json?.engagement_mode as 'tasks' | 'photo_only' | undefined) ?? 'tasks',
       guest_upload_visibility:
         json?.guest_upload_visibility === 'immediate' ? 'immediate' : 'review',
+      demo_read_only: Boolean(json?.demo_read_only),
     };
 
     if (json?.type) {

tests/Feature/GuestJoinTokenFlowTest.php

@@ -3,6 +3,9 @@
 namespace Tests\Feature;
 
 use App\Models\Event;
+use App\Models\EventPackage;
+use App\Models\MediaStorageTarget;
+use App\Models\Package;
 use App\Models\Photo;
 use App\Services\EventJoinTokenService;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -62,11 +65,32 @@ class GuestJoinTokenFlowTest extends TestCase
         Storage::fake('public');
 
         $event = $this->createPublishedEvent();
+        $package = Package::factory()->endcustomer()->create([
+            'max_photos' => 100,
+        ]);
+        EventPackage::create([
+            'event_id' => $event->id,
+            'package_id' => $package->id,
+            'purchased_price' => $package->price,
+            'purchased_at' => now(),
+            'used_photos' => 0,
+            'used_guests' => 0,
+        ]);
+        MediaStorageTarget::create([
+            'key' => 'public',
+            'name' => 'Public',
+            'driver' => 'local',
+            'is_hot' => true,
+            'is_default' => true,
+            'is_active' => true,
+        ]);
         $token = $this->tokenService->createToken($event);
 
         Mockery::mock('alias:App\Support\ImageHelper')
             ->shouldReceive('makeThumbnailOnDisk')
-            ->andReturn("events/{$event->id}/photos/thumbs/generated_thumb.jpg");
+            ->andReturn("events/{$event->id}/photos/thumbs/generated_thumb.jpg")
+            ->shouldReceive('copyWithWatermark')
+            ->andReturnNull();
 
         $file = UploadedFile::fake()->image('example.jpg', 1200, 800);
 
@@ -76,7 +100,7 @@ class GuestJoinTokenFlowTest extends TestCase
             ]);
 
         $response->assertCreated()
-            ->assertJsonStructure(['id', 'file_path', 'thumbnail_path']);
+            ->assertJsonStructure(['id', 'status', 'message']);
 
         $this->assertDatabaseCount('photos', 1);
 
@@ -96,6 +120,41 @@ class GuestJoinTokenFlowTest extends TestCase
         }
     }
 
+    public function test_guest_event_response_includes_demo_read_only_flag(): void
+    {
+        $event = $this->createPublishedEvent();
+        $token = $this->tokenService->createToken($event, [
+            'metadata' => ['demo_read_only' => true],
+        ]);
+
+        $response = $this->getJson("/api/v1/events/{$token->token}");
+
+        $response->assertOk()
+            ->assertJsonPath('demo_read_only', true);
+    }
+
+    public function test_guest_cannot_upload_photo_with_demo_token(): void
+    {
+        Storage::fake('public');
+
+        $event = $this->createPublishedEvent();
+        $token = $this->tokenService->createToken($event, [
+            'metadata' => ['demo_read_only' => true],
+        ]);
+
+        $file = UploadedFile::fake()->image('example.jpg', 1200, 800);
+
+        $response = $this->withHeader('X-Device-Id', 'token-device')
+            ->postJson("/api/v1/events/{$token->token}/upload", [
+                'photo' => $file,
+            ]);
+
+        $response->assertStatus(403)
+            ->assertJsonPath('error.code', 'demo_read_only');
+
+        $this->assertDatabaseCount('photos', 0);
+    }
+
     public function test_guest_can_like_photo_after_joining_with_token(): void
     {
         $event = $this->createPublishedEvent();

tests/Feature/SeedDemoSwitcherTenantsTest.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Console\Commands\SeedDemoSwitcherTenants;
+use App\Models\Event;
+use App\Models\MediaStorageTarget;
+use App\Models\Photo;
+use Illuminate\Console\OutputStyle;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\Console\Input\ArrayInput;
+use Symfony\Component\Console\Output\NullOutput;
+use Tests\TestCase;
+
+class SeedDemoSwitcherTenantsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_demo_seeder_records_media_assets_on_event_disk(): void
+    {
+        Storage::fake('local-ssd');
+
+        MediaStorageTarget::create([
+            'key' => 'local-ssd',
+            'name' => 'Local SSD',
+            'driver' => 'local',
+            'config' => [],
+            'is_hot' => true,
+            'is_default' => true,
+            'is_active' => true,
+            'priority' => 10,
+        ]);
+
+        $event = Event::factory()->create();
+
+        $originalUrl = 'https://images.test/demo-original.jpg';
+        $thumbUrl = 'https://images.test/demo-thumb.jpg';
+
+        Http::fake([
+            $originalUrl => Http::response('demo-original', 200, ['Content-Type' => 'image/jpeg']),
+            $thumbUrl => Http::response('demo-thumb', 200, ['Content-Type' => 'image/jpeg']),
+        ]);
+
+        $command = app(SeedDemoSwitcherTenants::class);
+        $command->setOutput(new OutputStyle(new ArrayInput([]), new NullOutput));
+        $method = new \ReflectionMethod($command, 'storePhotos');
+        $method->setAccessible(true);
+
+        $method->invoke($command, $event, [
+            [
+                'src' => [
+                    'large2x' => $originalUrl,
+                    'medium' => $thumbUrl,
+                ],
+            ],
+        ], 1);
+
+        $photo = Photo::where('event_id', $event->id)->first();
+
+        $this->assertNotNull($photo);
+        $this->assertNotNull($photo->media_asset_id);
+        $this->assertSame('approved', $photo->status);
+
+        Storage::disk('local-ssd')->assertExists($photo->file_path);
+        Storage::disk('local-ssd')->assertExists($photo->thumbnail_path);
+
+        $this->assertDatabaseHas('event_media_assets', [
+            'photo_id' => $photo->id,
+            'variant' => 'original',
+            'disk' => 'local-ssd',
+            'path' => $photo->file_path,
+        ]);
+
+        $this->assertDatabaseHas('event_media_assets', [
+            'photo_id' => $photo->id,
+            'variant' => 'thumbnail',
+            'disk' => 'local-ssd',
+            'path' => $photo->thumbnail_path,
+        ]);
+    }
+}