Implemented guest-only PWA using vite-plugin-pwa (the actual published package; @vite-pwa/plugin isn’t on npm) with

injectManifest, a new typed SW source, runtime caching, and a non‑blocking update toast with an action button. The
  guest shell now links a dedicated manifest and theme color, and background upload sync is managed in a single
  PwaManager component.

  Key changes (where/why)

  - vite.config.ts: added VitePWA injectManifest config, guest manifest, and output to /public so the SW can control /
    scope.
  - resources/js/guest/guest-sw.ts: new Workbox SW (precache + runtime caching for guest navigation, GET /api/v1/*,
    images, fonts) and preserves push/sync/notification logic.
  - resources/js/guest/components/PwaManager.tsx: registers SW, shows update/offline toasts, and processes the upload
    queue on sync/online.
  - resources/js/guest/components/ToastHost.tsx: action-capable toasts so update prompts can include a CTA.
  - resources/js/guest/i18n/messages.ts: added common.updateAvailable, common.updateAction, common.offlineReady.
  - resources/views/guest.blade.php: manifest + theme color + apple touch icon.
  - .gitignore: ignore generated public/guest-sw.js and public/guest.webmanifest; public/guest-sw.js removed since it’s
    now build output.

.gitignore

@@ -5,6 +5,8 @@ fotospiel-tenant-app
 /public/build
 /public/hot
 /public/storage
+/public/guest-sw.js
+/public/guest.webmanifest
 /resources/js/actions
 /resources/js/routes
 /resources/js/wayfinder

package.json

@@ -39,6 +39,7 @@
     "prettier": "^3.7.4",
     "shadcn": "^3.5.2",
     "typescript-eslint": "^8.49.0",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^2.1.9"
   },
   "dependencies": {

public/guest-sw.js

@@ -1,66 +0,0 @@
-self.addEventListener('install', () => {
-  self.skipWaiting();
-});
-
-self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim());
-});
-
-self.addEventListener('sync', (event) => {
-  if (event.tag === 'upload-queue') {
-    event.waitUntil(
-      (async () => {
-        const clients = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' });
-        clients.forEach((client) => client.postMessage({ type: 'sync-queue' }));
-      })()
-    );
-  }
-});
-
-self.addEventListener('push', (event) => {
-  const payload = event.data?.json?.() ?? {};
-
-  event.waitUntil(
-    (async () => {
-      const title = payload.title ?? 'Neue Nachricht';
-      const options = {
-        body: payload.body ?? '',
-        icon: '/icons/icon-192.png',
-        badge: '/icons/badge.png',
-        data: payload.data ?? {},
-      };
-
-      await self.registration.showNotification(title, options);
-
-      const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
-      clients.forEach((client) => client.postMessage({ type: 'guest-notification-refresh' }));
-    })()
-  );
-});
-
-self.addEventListener('notificationclick', (event) => {
-  event.notification.close();
-  const targetUrl = event.notification.data?.url || '/';
-
-  event.waitUntil(
-    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
-      for (const client of clientList) {
-        if ('focus' in client) {
-          client.navigate(targetUrl);
-          return client.focus();
-        }
-      }
-      if (self.clients.openWindow) {
-        return self.clients.openWindow(targetUrl);
-      }
-    })
-  );
-});
-
-self.addEventListener('pushsubscriptionchange', (event) => {
-  event.waitUntil(
-    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
-      clientList.forEach((client) => client.postMessage({ type: 'push-subscription-change' }));
-    })
-  );
-});

resources/js/guest/components/PullToRefresh.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { ArrowDown, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const MAX_PULL = 96;
+const TRIGGER_PULL = 72;
+const DAMPING = 0.55;
+
+type PullToRefreshProps = {
+  onRefresh: () => Promise<void> | void;
+  disabled?: boolean;
+  className?: string;
+  pullLabel?: string;
+  releaseLabel?: string;
+  refreshingLabel?: string;
+  children: React.ReactNode;
+};
+
+export default function PullToRefresh({
+  onRefresh,
+  disabled = false,
+  className,
+  pullLabel = 'Pull to refresh',
+  releaseLabel = 'Release to refresh',
+  refreshingLabel = 'Refreshing…',
+  children,
+}: PullToRefreshProps) {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const startYRef = React.useRef<number | null>(null);
+  const pullDistanceRef = React.useRef(0);
+  const [pullDistance, setPullDistance] = React.useState(0);
+  const [dragging, setDragging] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  const updatePull = React.useCallback((value: number) => {
+    pullDistanceRef.current = value;
+    setPullDistance(value);
+  }, []);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || disabled) {
+      return;
+    }
+
+    const handleStart = (event: TouchEvent) => {
+      if (refreshing || window.scrollY > 0) {
+        return;
+      }
+      startYRef.current = event.touches[0]?.clientY ?? null;
+      setDragging(true);
+    };
+
+    const handleMove = (event: TouchEvent) => {
+      if (refreshing || startYRef.current === null) {
+        return;
+      }
+      if (window.scrollY > 0) {
+        startYRef.current = null;
+        updatePull(0);
+        setDragging(false);
+        return;
+      }
+      const currentY = event.touches[0]?.clientY ?? 0;
+      const delta = currentY - startYRef.current;
+      if (delta <= 0) {
+        updatePull(0);
+        return;
+      }
+      event.preventDefault();
+      const next = Math.min(MAX_PULL, delta * DAMPING);
+      updatePull(next);
+    };
+
+    const handleEnd = async () => {
+      if (startYRef.current === null) {
+        return;
+      }
+      startYRef.current = null;
+      setDragging(false);
+
+      if (pullDistanceRef.current >= TRIGGER_PULL) {
+        setRefreshing(true);
+        updatePull(TRIGGER_PULL);
+        try {
+          await onRefresh();
+        } finally {
+          setRefreshing(false);
+          updatePull(0);
+        }
+        return;
+      }
+
+      updatePull(0);
+    };
+
+    container.addEventListener('touchstart', handleStart, { passive: true });
+    container.addEventListener('touchmove', handleMove, { passive: false });
+    container.addEventListener('touchend', handleEnd);
+    container.addEventListener('touchcancel', handleEnd);
+
+    return () => {
+      container.removeEventListener('touchstart', handleStart);
+      container.removeEventListener('touchmove', handleMove);
+      container.removeEventListener('touchend', handleEnd);
+      container.removeEventListener('touchcancel', handleEnd);
+    };
+  }, [disabled, onRefresh, refreshing, updatePull]);
+
+  const progress = Math.min(pullDistance / TRIGGER_PULL, 1);
+  const ready = pullDistance >= TRIGGER_PULL;
+  const indicatorLabel = refreshing
+    ? refreshingLabel
+    : ready
+      ? releaseLabel
+      : pullLabel;
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <div
+        className="pointer-events-none absolute left-0 right-0 top-2 flex h-10 items-center justify-center"
+        style={{
+          opacity: progress,
+          transform: `translateY(${Math.min(pullDistance, TRIGGER_PULL) - 48}px)`,
+          transition: dragging ? 'none' : 'transform 200ms ease-out, opacity 200ms ease-out',
+        }}
+      >
+        <div className="flex items-center gap-2 rounded-full border border-white/30 bg-white/90 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100">
+          {refreshing ? (
+            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          ) : (
+            <ArrowDown
+              className={cn('h-4 w-4 transition-transform duration-200', ready && 'rotate-180')}
+              aria-hidden
+            />
+          )}
+          <span>{indicatorLabel}</span>
+        </div>
+      </div>
+
+      <div
+        className={cn('will-change-transform', !dragging && 'transition-transform duration-200 ease-out')}
+        style={{ transform: `translateY(${pullDistance}px)` }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

resources/js/guest/components/PwaManager.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { registerSW } from 'virtual:pwa-register';
+import { useTranslation } from '../i18n/useTranslation';
+import { useToast } from './ToastHost';
+
+export default function PwaManager() {
+  const toast = useToast();
+  const { t } = useTranslation();
+  const toastRef = React.useRef(toast);
+  const tRef = React.useRef(t);
+  const updatePromptedRef = React.useRef(false);
+
+  React.useEffect(() => {
+    toastRef.current = toast;
+  }, [toast]);
+
+  React.useEffect(() => {
+    tRef.current = t;
+  }, [t]);
+
+  React.useEffect(() => {
+    if (!('serviceWorker' in navigator)) {
+      return;
+    }
+
+    const updateSW = registerSW({
+      immediate: true,
+      onNeedRefresh() {
+        if (updatePromptedRef.current) {
+          return;
+        }
+        updatePromptedRef.current = true;
+        toastRef.current.push({
+          text: tRef.current('common.updateAvailable'),
+          type: 'info',
+          durationMs: 0,
+          action: {
+            label: tRef.current('common.updateAction'),
+            onClick: () => updateSW(true),
+          },
+        });
+      },
+      onOfflineReady() {
+        toastRef.current.push({
+          text: tRef.current('common.offlineReady'),
+          type: 'success',
+        });
+      },
+      onRegisterError(error) {
+        console.warn('Guest PWA registration failed', error);
+      },
+    });
+
+    const runQueue = () => {
+      void import('../queue/queue')
+        .then((m) => m.processQueue().catch(() => {}))
+        .catch(() => {});
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'sync-queue') {
+        runQueue();
+      }
+    };
+
+    navigator.serviceWorker.addEventListener('message', handleMessage);
+    window.addEventListener('online', runQueue);
+    runQueue();
+
+    return () => {
+      navigator.serviceWorker.removeEventListener('message', handleMessage);
+      window.removeEventListener('online', runQueue);
+    };
+  }, []);
+
+  return null;
+}

resources/js/guest/components/RouteTransition.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { Outlet, useLocation, useNavigationType } from 'react-router-dom';
+
+const TAB_SECTIONS = new Set(['home', 'tasks', 'achievements', 'gallery']);
+
+export function getTabKey(pathname: string): string | null {
+  const match = pathname.match(/^\/e\/[^/]+(?:\/([^/]+))?$/);
+  if (!match) {
+    return null;
+  }
+
+  const section = match[1];
+  if (!section) {
+    return 'home';
+  }
+
+  return TAB_SECTIONS.has(section) ? section : null;
+}
+
+export function getTransitionKind(prevPath: string, nextPath: string): 'tab' | 'stack' {
+  const prevTab = getTabKey(prevPath);
+  const nextTab = getTabKey(nextPath);
+
+  if (prevTab && nextTab && prevTab !== nextTab) {
+    return 'tab';
+  }
+
+  return 'stack';
+}
+
+export function isTransitionDisabled(pathname: string): boolean {
+  if (pathname.startsWith('/share/')) {
+    return true;
+  }
+
+  return /^\/e\/[^/]+\/upload(?:\/|$)/.test(pathname);
+}
+
+export default function RouteTransition({ children }: { children?: React.ReactNode }) {
+  const location = useLocation();
+  const navigationType = useNavigationType();
+  const prefersReducedMotion = useReducedMotion();
+  const prevPathRef = React.useRef(location.pathname);
+  const prevPath = prevPathRef.current;
+  const direction = navigationType === 'POP' ? 'back' : 'forward';
+  const kind = getTransitionKind(prevPath, location.pathname);
+  const disableTransitions = prefersReducedMotion
+    || isTransitionDisabled(prevPath)
+    || isTransitionDisabled(location.pathname);
+
+  React.useEffect(() => {
+    prevPathRef.current = location.pathname;
+  }, [location.pathname]);
+
+  const content = children ?? <Outlet />;
+
+  if (disableTransitions) {
+    return <>{content}</>;
+  }
+
+  const stackVariants = {
+    enter: ({ direction }: { direction: 'forward' | 'back' }) => ({
+      x: direction === 'back' ? -28 : 28,
+      opacity: 0,
+    }),
+    center: { x: 0, opacity: 1 },
+    exit: ({ direction }: { direction: 'forward' | 'back' }) => ({
+      x: direction === 'back' ? 28 : -28,
+      opacity: 0,
+    }),
+  };
+
+  const tabVariants = {
+    enter: { opacity: 0, scale: 0.985 },
+    center: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.985 },
+  };
+
+  const transition = kind === 'tab'
+    ? { duration: 0.18, ease: [0.22, 0.61, 0.36, 1] }
+    : { duration: 0.24, ease: [0.25, 0.8, 0.25, 1] };
+
+  return (
+    <AnimatePresence initial={false}>
+      <motion.div
+        key={location.pathname}
+        custom={{ direction }}
+        variants={kind === 'tab' ? tabVariants : stackVariants}
+        initial="enter"
+        animate="center"
+        exit="exit"
+        transition={transition}
+        style={{ willChange: 'transform, opacity' }}
+      >
+        {content}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

resources/js/guest/components/ToastHost.tsx

@@ -1,29 +1,69 @@
 // @ts-nocheck
 import React from 'react';
 
-type Toast = { id: number; text: string; type?: 'success'|'error' };
+type ToastAction = { label: string; onClick: () => void };
+type Toast = {
+  id: number;
+  text: string;
+  type?: 'success' | 'error' | 'info';
+  action?: ToastAction;
+  durationMs?: number;
+};
 const Ctx = React.createContext<{ push: (t: Omit<Toast,'id'>) => void } | null>(null);
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const [list, setList] = React.useState<Toast[]>([]);
   const push = React.useCallback((t: Omit<Toast,'id'>) => {
     const id = Date.now() + Math.random();
-    setList((arr) => [...arr, { id, ...t }]);
+    const durationMs = t.durationMs ?? 3000;
-    setTimeout(() => setList((arr) => arr.filter((x) => x.id !== id)), 3000);
+    setList((arr) => [...arr, { id, ...t, durationMs }]);
+    if (durationMs > 0) {
+      setTimeout(() => setList((arr) => arr.filter((x) => x.id !== id)), durationMs);
+    }
   }, []);
+  const dismiss = React.useCallback((id: number) => {
+    setList((arr) => arr.filter((x) => x.id !== id));
+  }, []);
+  const contextValue = React.useMemo(() => ({ push }), [push]);
   React.useEffect(() => {
     const onEvt = (e: CustomEvent<Omit<Toast, 'id'>>) => push(e.detail);
     window.addEventListener('guest-toast', onEvt);
     return () => window.removeEventListener('guest-toast', onEvt);
   }, [push]);
   return (
-    <Ctx.Provider value={{ push }}>
+    <Ctx.Provider value={contextValue}>
       {children}
       <div className="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
         <div className="flex w-full max-w-sm flex-col gap-2">
           {list.map((t) => (
-            <div key={t.id} className={`pointer-events-auto rounded-md border p-3 shadow-sm ${t.type==='error'?'border-red-300 bg-red-50 text-red-700':'border-green-300 bg-green-50 text-green-700'}`}>
+            <div
-              {t.text}
+              key={t.id}
+              className={`pointer-events-auto rounded-md border p-3 shadow-sm ${
+                t.type === 'error'
+                  ? 'border-red-300 bg-red-50 text-red-700'
+                  : t.type === 'info'
+                  ? 'border-blue-300 bg-blue-50 text-blue-700'
+                  : 'border-green-300 bg-green-50 text-green-700'
+              }`}
+            >
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <span className="text-sm">{t.text}</span>
+                {t.action ? (
+                  <button
+                    type="button"
+                    className="pointer-events-auto rounded-full border border-current/30 px-3 py-1 text-xs font-semibold uppercase tracking-wide transition hover:border-current"
+                    onClick={() => {
+                      try {
+                        t.action?.onClick();
+                      } finally {
+                        dismiss(t.id);
+                      }
+                    }}
+                  >
+                    {t.action.label}
+                  </button>
+                ) : null}
+              </div>
             </div>
           ))}
         </div>

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import PullToRefresh from '../PullToRefresh';
+
+describe('PullToRefresh', () => {
+  it('renders children and labels', () => {
+    render(
+      <PullToRefresh
+        onRefresh={vi.fn()}
+        pullLabel="Pull"
+        releaseLabel="Release"
+        refreshingLabel="Refreshing"
+      >
+        <div>Content</div>
+      </PullToRefresh>
+    );
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Pull')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { getTabKey, getTransitionKind, isTransitionDisabled } from '../RouteTransition';
+
+describe('RouteTransition helpers', () => {
+  it('detects top-level tabs', () => {
+    expect(getTabKey('/e/demo')).toBe('home');
+    expect(getTabKey('/e/demo/tasks')).toBe('tasks');
+    expect(getTabKey('/e/demo/achievements')).toBe('achievements');
+    expect(getTabKey('/e/demo/gallery')).toBe('gallery');
+    expect(getTabKey('/e/demo/tasks/123')).toBeNull();
+  });
+
+  it('detects tab vs stack transitions', () => {
+    expect(getTransitionKind('/e/demo', '/e/demo/gallery')).toBe('tab');
+    expect(getTransitionKind('/e/demo/tasks', '/e/demo/tasks/1')).toBe('stack');
+  });
+
+  it('disables transitions for excluded routes', () => {
+    expect(isTransitionDisabled('/e/demo/upload')).toBe(true);
+    expect(isTransitionDisabled('/share/demo-photo')).toBe(true);
+    expect(isTransitionDisabled('/e/demo/gallery')).toBe(false);
+  });
+});

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ToastProvider, useToast } from '../ToastHost';
+
+function ToastTestHarness({ onAction }: { onAction: () => void }) {
+  const toast = useToast();
+
+  React.useEffect(() => {
+    toast.push({
+      text: 'Update ready',
+      type: 'info',
+      durationMs: 0,
+      action: {
+        label: 'Reload',
+        onClick: onAction,
+      },
+    });
+  }, [toast, onAction]);
+
+  return null;
+}
+
+describe('ToastHost', () => {
+  it('renders action toasts and dismisses after action click', async () => {
+    const onAction = vi.fn();
+
+    render(
+      <ToastProvider>
+        <ToastTestHarness onAction={onAction} />
+      </ToastProvider>
+    );
+
+    expect(screen.getByText('Update ready')).toBeInTheDocument();
+    const button = screen.getByRole('button', { name: 'Reload' });
+
+    fireEvent.click(button);
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Update ready')).not.toBeInTheDocument();
+  });
+});

resources/js/guest/guest-sw.ts

@@ -0,0 +1,157 @@
+/* eslint-disable no-restricted-globals */
+/// <reference lib="webworker" />
+
+import { clientsClaim } from 'workbox-core';
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope & {
+  __WB_MANIFEST: Array<import('workbox-precaching').ManifestEntry>;
+};
+
+clientsClaim();
+precacheAndRoute(self.__WB_MANIFEST);
+cleanupOutdatedCaches();
+
+const isGuestNavigation = (pathname: string) => {
+  if (pathname === '/event') {
+    return true;
+  }
+  if (pathname.startsWith('/e/')) {
+    return true;
+  }
+  if (pathname.startsWith('/g/')) {
+    return true;
+  }
+  if (pathname.startsWith('/share/')) {
+    return true;
+  }
+  if (pathname.startsWith('/help')) {
+    return true;
+  }
+  if (pathname.startsWith('/legal')) {
+    return true;
+  }
+  if (pathname.startsWith('/settings')) {
+    return true;
+  }
+  return false;
+};
+
+registerRoute(
+  ({ request, url }) =>
+    request.mode === 'navigate' && url.origin === self.location.origin && isGuestNavigation(url.pathname),
+  new NetworkFirst({
+    cacheName: 'guest-pages',
+    networkTimeoutSeconds: 5,
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 40, maxAgeSeconds: 60 * 60 * 24 * 7 }),
+    ],
+  })
+);
+
+registerRoute(
+  ({ request, url }) =>
+    request.method === 'GET' &&
+    url.origin === self.location.origin &&
+    url.pathname.startsWith('/api/v1/'),
+  new NetworkFirst({
+    cacheName: 'guest-api',
+    networkTimeoutSeconds: 6,
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 80, maxAgeSeconds: 60 * 60 * 24 }),
+    ],
+  })
+);
+
+registerRoute(
+  ({ request, url }) => request.destination === 'image' && url.origin === self.location.origin,
+  new CacheFirst({
+    cacheName: 'guest-images',
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 200, maxAgeSeconds: 60 * 60 * 24 * 30 }),
+    ],
+  })
+);
+
+registerRoute(
+  ({ request, url }) => request.destination === 'font' && url.origin === self.location.origin,
+  new StaleWhileRevalidate({
+    cacheName: 'guest-fonts',
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 30, maxAgeSeconds: 60 * 60 * 24 * 365 }),
+    ],
+  })
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('sync', (event) => {
+  if (event.tag === 'upload-queue') {
+    event.waitUntil(
+      (async () => {
+        const clients = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' });
+        clients.forEach((client) => client.postMessage({ type: 'sync-queue' }));
+      })()
+    );
+  }
+});
+
+self.addEventListener('push', (event) => {
+  const payload = event.data?.json?.() ?? {};
+
+  event.waitUntil(
+    (async () => {
+      const title = payload.title ?? 'Neue Nachricht';
+      const options = {
+        body: payload.body ?? '',
+        icon: '/apple-touch-icon.png',
+        badge: '/apple-touch-icon.png',
+        data: payload.data ?? {},
+      };
+
+      await self.registration.showNotification(title, options);
+
+      const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+      clients.forEach((client) => client.postMessage({ type: 'guest-notification-refresh' }));
+    })()
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const targetUrl = event.notification.data?.url || '/';
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      for (const client of clientList) {
+        if ('focus' in client) {
+          client.navigate(targetUrl);
+          return client.focus();
+        }
+      }
+      if (self.clients.openWindow) {
+        return self.clients.openWindow(targetUrl);
+      }
+    })
+  );
+});
+
+self.addEventListener('pushsubscriptionchange', (event) => {
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      clientList.forEach((client) => client.postMessage({ type: 'push-subscription-change' }));
+    })
+  );
+});

resources/js/guest/i18n/messages.ts

@@ -16,6 +16,13 @@ export const messages: Record<LocaleCode, NestedMessages> = {
   de: {
     common: {
       hi: 'Hi',
+      refresh: 'Aktualisieren',
+      pullToRefresh: 'Zum Aktualisieren ziehen',
+      releaseToRefresh: 'Zum Aktualisieren loslassen',
+      refreshing: 'Aktualisiere...',
+      updateAvailable: 'Neue Version verfügbar.',
+      updateAction: 'Aktualisieren',
+      offlineReady: 'Offline bereit.',
       actions: {
         close: 'Schließen',
         loading: 'Lädt...',
@@ -137,6 +144,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
     home: {
       fallbackGuestName: 'Gast',
       welcomeLine: 'Willkommen {name}!',
+      swipeHint: 'Wische für mehr Aufgaben',
       introRotating: {
         0: 'Hilf uns, diesen besonderen Tag mit deinen schönsten Momenten festzuhalten.',
         1: 'Fang die Stimmung des Events ein und teile sie mit allen Gästen.',
@@ -703,6 +711,13 @@ export const messages: Record<LocaleCode, NestedMessages> = {
   en: {
     common: {
       hi: 'Hi',
+      refresh: 'Refresh',
+      pullToRefresh: 'Pull to refresh',
+      releaseToRefresh: 'Release to refresh',
+      refreshing: 'Refreshing...',
+      updateAvailable: 'A new version is available.',
+      updateAction: 'Update',
+      offlineReady: 'Offline ready.',
       actions: {
         close: 'Close',
         loading: 'Loading...',
@@ -824,6 +839,7 @@ export const messages: Record<LocaleCode, NestedMessages> = {
     home: {
       fallbackGuestName: 'Guest',
       welcomeLine: 'Welcome {name}!',
+      swipeHint: 'Swipe for more missions',
       introRotating: {
         0: 'Help us capture this special day with your favourite moments.',
         1: 'Capture the mood of the event and share it with everyone.',

resources/js/guest/lib/__tests__/motion.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from 'vitest';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../motion';
+
+describe('motion helpers', () => {
+  it('returns disabled props when motion is off', () => {
+    const props = getMotionContainerProps(false, STAGGER_FAST);
+    expect(props.initial).toBe(false);
+  });
+
+  it('returns variants when motion is on', () => {
+    const containerProps = getMotionContainerProps(true, STAGGER_FAST);
+    const itemProps = getMotionItemProps(true, FADE_UP);
+    expect(containerProps.initial).toBe('hidden');
+    expect(containerProps.animate).toBe('show');
+    expect(itemProps.variants).toBe(FADE_UP);
+  });
+
+  it('detects reduced motion preference safely', () => {
+    const original = window.matchMedia;
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: undefined,
+    });
+    expect(prefersReducedMotion()).toBe(false);
+
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: vi.fn().mockReturnValue({ matches: true }),
+    });
+    expect(prefersReducedMotion()).toBe(true);
+
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  it('exposes distinct base variants', () => {
+    expect(FADE_UP).not.toBe(FADE_SCALE);
+  });
+});

resources/js/guest/lib/motion.ts

@@ -0,0 +1,58 @@
+import type { Variants } from 'framer-motion';
+
+export const IOS_EASE = [0.22, 0.61, 0.36, 1] as const;
+export const IOS_EASE_SOFT = [0.25, 0.8, 0.25, 1] as const;
+
+export const STAGGER_FAST: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.04,
+    },
+  },
+};
+
+export const FADE_UP: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.24,
+      ease: IOS_EASE,
+    },
+  },
+};
+
+export const FADE_SCALE: Variants = {
+  hidden: { opacity: 0, scale: 0.98 },
+  show: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.22,
+      ease: IOS_EASE,
+    },
+  },
+};
+
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches);
+}
+
+export function getMotionContainerProps(enabled: boolean, variants: Variants) {
+  if (!enabled) {
+    return { initial: false } as const;
+  }
+
+  return { variants, initial: 'hidden', animate: 'show' } as const;
+}
+
+export function getMotionItemProps(enabled: boolean, variants: Variants) {
+  return enabled ? { variants } : {};
+}

resources/js/guest/main.tsx

@@ -36,6 +36,7 @@ const appRoot = async () => {
   const { RouterProvider } = await import('react-router-dom');
   const { router } = await import('./router');
   const { ToastProvider } = await import('./components/ToastHost');
+  const { default: PwaManager } = await import('./components/PwaManager');
   const { LocaleProvider } = await import('./i18n/LocaleContext');
   const { default: MatomoTracker } = await import('@/components/analytics/MatomoTracker');
   const rawMatomo = (window as any).__MATOMO_GUEST__ as { enabled?: boolean; url?: string; siteId?: string } | undefined;
@@ -47,21 +48,6 @@ const appRoot = async () => {
       }
     : undefined;
 
-  // Register a minimal service worker for background sync (best-effort)
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/guest-sw.js').catch(() => {});
-    navigator.serviceWorker.addEventListener('message', (evt) => {
-      if (evt.data?.type === 'sync-queue') {
-        import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
-      }
-    });
-    // Also attempt to process queue on load and when going online
-    import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
-    window.addEventListener('online', () => {
-      import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
-    });
-  }
-
   createRoot(rootEl).render(
     <Sentry.ErrorBoundary fallback={<GuestFallback message="Erlebnisse können nicht geladen werden." />}>
       <React.StrictMode>
@@ -69,6 +55,7 @@ const appRoot = async () => {
           <LocaleProvider>
             <ToastProvider>
               <MatomoTracker config={matomoConfig} />
+              <PwaManager />
               <Suspense fallback={<GuestFallback message="Erlebnisse werden geladen …" />}>
                 <RouterProvider router={router} />
               </Suspense>

resources/js/guest/pages/AchievementsPage.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Separator } from '@/components/ui/separator';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   AchievementBadge,
   AchievementsPayload,
@@ -23,6 +24,8 @@ import type { LocaleCode } from '../i18n/messages';
 import { localizeTaskLabel } from '../lib/localizeTaskLabel';
 import { useEventData } from '../hooks/useEventData';
 import { isTaskModeEnabled } from '../lib/engagement';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import PullToRefresh from '../components/PullToRefresh';
 
 const GENERIC_ERROR = 'GENERIC_ERROR';
 
@@ -356,104 +359,57 @@ export default function AchievementsPage() {
 
   const personalName = identity.hydrated && identity.name ? identity.name : undefined;
 
-  useEffect(() => {
+  const loadAchievements = React.useCallback(async (signal?: AbortSignal) => {
     if (!token) return;
-    const controller = new AbortController();
     setLoading(true);
     setError(null);
 
-    fetchAchievements(token, {
+    try {
+      const payload = await fetchAchievements(token, {
         guestName: personalName,
         locale,
-      signal: controller.signal,
+        signal,
-    })
+      });
-      .then((payload) => {
       setData(payload);
       if (!payload.personal) {
         setActiveTab('event');
       }
-      })
+    } catch (err) {
-      .catch((err) => {
+      if (err instanceof DOMException && err.name === 'AbortError') return;
-        if (err.name === 'AbortError') return;
       console.error('Failed to load achievements', err);
-        setError(err.message || GENERIC_ERROR);
+      setError(err instanceof Error ? err.message : GENERIC_ERROR);
-      })
+    } finally {
-      .finally(() => setLoading(false));
+      if (!signal?.aborted) {
+        setLoading(false);
+      }
+    }
+  }, [locale, personalName, token]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void loadAchievements(controller.signal);
     return () => controller.abort();
-  }, [token, personalName, locale]);
+  }, [loadAchievements]);
 
   const hasPersonal = Boolean(data?.personal);
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
+  const tabMotion = motionEnabled
+    ? { variants: FADE_UP, initial: 'hidden', animate: 'show', exit: 'hidden' as const }
+    : {};
+  const handleRefresh = React.useCallback(async () => {
+    await loadAchievements();
+  }, [loadAchievements]);
 
   if (!token) {
     return null;
   }
 
-  return (
+  const tabContent = (
-    <div className="space-y-6 pb-24">
-      <div className="space-y-2">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500">
-            <Award className="h-5 w-5" aria-hidden />
-          </div>
-          <div>
-            <h1 className="text-2xl font-semibold text-foreground">{t('achievements.page.title')}</h1>
-            <p className="text-sm text-muted-foreground">{t('achievements.page.subtitle')}</p>
-          </div>
-        </div>
-      </div>
-
-      {loading && (
-        <div className="space-y-4">
-          <Skeleton className="h-24 w-full" />
-          <Skeleton className="h-32 w-full" />
-          <Skeleton className="h-48 w-full" />
-        </div>
-      )}
-
-      {!loading && error && (
-        <Alert variant="destructive">
-          <AlertDescription className="flex items-center justify-between gap-3">
-            <span>{error === GENERIC_ERROR ? t('achievements.page.loadError') : error}</span>
-            <Button variant="outline" size="sm" onClick={() => setActiveTab(hasPersonal ? 'personal' : 'event')}>
-              {t('achievements.page.retry')}
-            </Button>
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {!loading && !error && data && (
     <>
-          <div className="flex flex-wrap items-center gap-2">
+      {activeTab === 'personal' && hasPersonal && data?.personal && (
-            <Button
-              variant={activeTab === 'personal' ? 'default' : 'outline'}
-              onClick={() => setActiveTab('personal')}
-              disabled={!hasPersonal}
-              className="flex items-center gap-2"
-            >
-              <Sparkles className="h-4 w-4" aria-hidden />
-              {t('achievements.page.buttons.personal')}
-            </Button>
-            <Button
-              variant={activeTab === 'event' ? 'default' : 'outline'}
-              onClick={() => setActiveTab('event')}
-              className="flex items-center gap-2"
-            >
-              <Users className="h-4 w-4" aria-hidden />
-              {t('achievements.page.buttons.event')}
-            </Button>
-            <Button
-              variant={activeTab === 'feed' ? 'default' : 'outline'}
-              onClick={() => setActiveTab('feed')}
-              className="flex items-center gap-2"
-            >
-              <BarChart2 className="h-4 w-4" aria-hidden />
-              {t('achievements.page.buttons.feed')}
-            </Button>
-          </div>
-
-          <Separator />
-
-          {activeTab === 'personal' && hasPersonal && data.personal && (
         <div className="space-y-5">
           <Card>
             <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
@@ -477,7 +433,7 @@ export default function AchievementsPage() {
         </div>
       )}
 
-          {activeTab === 'event' && (
+      {activeTab === 'event' && data && (
         <div className="space-y-5">
           <Highlights
             topPhoto={data.highlights.topPhoto}
@@ -511,7 +467,7 @@ export default function AchievementsPage() {
         </div>
       )}
 
-          {activeTab === 'feed' && (
+      {activeTab === 'feed' && data && (
         <Feed
           feed={data.feed}
           t={t}
@@ -521,7 +477,95 @@ export default function AchievementsPage() {
         />
       )}
     </>
-      )}
+  );
+
+  return (
+    <PullToRefresh
+      onRefresh={handleRefresh}
+      pullLabel={t('common.pullToRefresh')}
+      releaseLabel={t('common.releaseToRefresh')}
+      refreshingLabel={t('common.refreshing')}
+    >
+      <motion.div className="space-y-6 pb-24" {...containerMotion}>
+        <motion.div className="space-y-2" {...fadeUpMotion}>
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500">
+              <Award className="h-5 w-5" aria-hidden />
             </div>
+            <div>
+              <h1 className="text-2xl font-semibold text-foreground">{t('achievements.page.title')}</h1>
+              <p className="text-sm text-muted-foreground">{t('achievements.page.subtitle')}</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {loading && (
+          <motion.div className="space-y-4" {...fadeUpMotion}>
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-48 w-full" />
+          </motion.div>
+        )}
+
+        {!loading && error && (
+          <motion.div {...fadeUpMotion}>
+            <Alert variant="destructive">
+              <AlertDescription className="flex items-center justify-between gap-3">
+                <span>{error === GENERIC_ERROR ? t('achievements.page.loadError') : error}</span>
+                <Button variant="outline" size="sm" onClick={() => setActiveTab(hasPersonal ? 'personal' : 'event')}>
+                  {t('achievements.page.retry')}
+                </Button>
+              </AlertDescription>
+            </Alert>
+          </motion.div>
+        )}
+
+        {!loading && !error && data && (
+          <>
+            <motion.div className="flex flex-wrap items-center gap-2" {...fadeUpMotion}>
+              <Button
+                variant={activeTab === 'personal' ? 'default' : 'outline'}
+                onClick={() => setActiveTab('personal')}
+                disabled={!hasPersonal}
+                className="flex items-center gap-2"
+              >
+                <Sparkles className="h-4 w-4" aria-hidden />
+                {t('achievements.page.buttons.personal')}
+              </Button>
+              <Button
+                variant={activeTab === 'event' ? 'default' : 'outline'}
+                onClick={() => setActiveTab('event')}
+                className="flex items-center gap-2"
+              >
+                <Users className="h-4 w-4" aria-hidden />
+                {t('achievements.page.buttons.event')}
+              </Button>
+              <Button
+                variant={activeTab === 'feed' ? 'default' : 'outline'}
+                onClick={() => setActiveTab('feed')}
+                className="flex items-center gap-2"
+              >
+                <BarChart2 className="h-4 w-4" aria-hidden />
+                {t('achievements.page.buttons.feed')}
+              </Button>
+            </motion.div>
+
+            <motion.div {...fadeUpMotion}>
+              <Separator />
+            </motion.div>
+
+            {motionEnabled ? (
+              <AnimatePresence mode="wait" initial={false}>
+                <motion.div key={activeTab} {...tabMotion}>
+                  {tabContent}
+                </motion.div>
+              </AnimatePresence>
+            ) : (
+              <motion.div {...fadeScaleMotion}>{tabContent}</motion.div>
+            )}
+          </>
+        )}
+      </motion.div>
+    </PullToRefresh>
   );
 }

resources/js/guest/pages/GalleryPage.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
 import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
+import { motion } from 'framer-motion';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
 import { fetchEvent, type EventData } from '../services/eventApi';
@@ -15,6 +16,8 @@ import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import PullToRefresh from '../components/PullToRefresh';
 
 const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
@@ -54,7 +57,7 @@ export default function GalleryPage() {
   const { token } = useParams<{ token?: string }>();
   const { t, locale } = useTranslation();
   const { branding } = useEventBranding();
-  const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '', locale);
+  const { photos, loading, newCount, acknowledgeNew, refreshNow } = usePollGalleryDelta(token ?? '', locale);
   const [searchParams, setSearchParams] = useSearchParams();
   const photoIdParam = searchParams.get('photoId');
   const modeParam = searchParams.get('mode');
@@ -63,6 +66,11 @@ export default function GalleryPage() {
   const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
   const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
+  const gridMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
   const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
   const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
@@ -122,10 +130,8 @@ export default function GalleryPage() {
   }, [typedPhotos, photos.length, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);
 
   // Load event and package info
-  useEffect(() => {
+  const loadEventData = React.useCallback(async () => {
     if (!token) return;
-
-    const loadEventData = async () => {
     try {
       setEventLoading(true);
       const eventData = await fetchEvent(token);
@@ -135,11 +141,17 @@ export default function GalleryPage() {
     } finally {
       setEventLoading(false);
     }
-    };
-
-    loadEventData();
   }, [token]);
 
+  useEffect(() => {
+    void loadEventData();
+  }, [loadEventData]);
+
+  const handleRefresh = React.useCallback(async () => {
+    await Promise.all([refreshNow(), loadEventData()]);
+    acknowledgeNew();
+  }, [acknowledgeNew, loadEventData, refreshNow]);
+
   const myPhotoIds = React.useMemo(() => {
     try {
       const raw = localStorage.getItem('my-photo-ids');
@@ -287,8 +299,14 @@ export default function GalleryPage() {
 
   return (
     <Page title="">
-      <div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+      <PullToRefresh
-        <div className="flex items-center gap-3">
+        onRefresh={handleRefresh}
+        pullLabel={t('common.pullToRefresh')}
+        releaseLabel={t('common.releaseToRefresh')}
+        refreshingLabel={t('common.refreshing')}
+      >
+        <motion.div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
+          <motion.div className="flex items-center gap-3" {...fadeUpMotion}>
             <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
               <ImageIcon className="h-5 w-5" aria-hidden />
             </div>
@@ -311,9 +329,10 @@ export default function GalleryPage() {
                 {newPhotosBadgeText}
               </span>
             )}
-        </div>
+          </motion.div>
-      </div>
+        </motion.div>
 
+        <motion.div {...fadeUpMotion}>
           <FiltersBar
             value={filter}
             onChange={setFilter}
@@ -321,8 +340,13 @@ export default function GalleryPage() {
             showPhotobooth={showPhotoboothFilter}
             styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
           />
-      {loading && <p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>{t('galleryPage.loading', 'Lade…')}</p>}
+        </motion.div>
-      <div className="grid grid-cols-2 gap-2 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4">
+        {loading && (
+          <motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
+            {t('galleryPage.loading', 'Lade…')}
+          </motion.p>
+        )}
+        <motion.div className="grid grid-cols-2 gap-2 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
           {list.map((p: GalleryPhoto) => {
             const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
             const createdLabel = p.created_at
@@ -341,7 +365,7 @@ export default function GalleryPage() {
             };
 
             return (
-            <div
+              <motion.div
                 key={p.id}
                 role="button"
                 tabIndex={0}
@@ -353,6 +377,7 @@ export default function GalleryPage() {
                 }}
                 className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
                 style={{ borderRadius: radius }}
+                {...fadeScaleMotion}
               >
                 <img
                   src={imageUrl}
@@ -415,14 +440,15 @@ export default function GalleryPage() {
                     {likeCount}
                   </button>
                 </div>
-            </div>
+              </motion.div>
             );
           })}
           {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
-          <div
+            <motion.div
               key={`placeholder-${idx}`}
               className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
               style={{ borderRadius: radius }}
+              {...fadeScaleMotion}
             >
               <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
               <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
@@ -430,9 +456,10 @@ export default function GalleryPage() {
                 <div className="h-2 w-10 rounded-full bg-muted/40" />
               </div>
               <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
-          </div>
+            </motion.div>
           ))}
-      </div>
+        </motion.div>
+      </PullToRefresh>
       {currentPhotoIndex !== null && list.length > 0 && (
         <PhotoLightbox
           photos={list}

resources/js/guest/pages/HelpArticlePage.tsx

@@ -6,6 +6,7 @@ import { Page } from './_util';
 import { useLocale } from '../i18n/LocaleContext';
 import { useTranslation } from '../i18n/useTranslation';
 import { getHelpArticle, type HelpArticleDetail } from '../services/helpApi';
+import PullToRefresh from '../components/PullToRefresh';
 
 export default function HelpArticlePage() {
   const params = useParams<{ token?: string; slug: string }>();
@@ -40,6 +41,12 @@ export default function HelpArticlePage() {
 
   return (
     <Page title={title}>
+      <PullToRefresh
+        onRefresh={loadArticle}
+        pullLabel={t('common.pullToRefresh')}
+        releaseLabel={t('common.releaseToRefresh')}
+        refreshingLabel={t('common.refreshing')}
+      >
         <div className="mb-4">
           <Button variant="ghost" size="sm" asChild>
             <Link to={basePath}>
@@ -103,6 +110,7 @@ export default function HelpArticlePage() {
             )}
           </article>
         )}
+      </PullToRefresh>
     </Page>
   );
 }

resources/js/guest/pages/HelpCenterPage.tsx

@@ -8,6 +8,7 @@ import { Page } from './_util';
 import { useLocale } from '../i18n/LocaleContext';
 import { useTranslation } from '../i18n/useTranslation';
 import { getHelpArticles, type HelpArticleSummary } from '../services/helpApi';
+import PullToRefresh from '../components/PullToRefresh';
 
 export default function HelpCenterPage() {
   const params = useParams<{ token?: string }>();
@@ -48,6 +49,12 @@ export default function HelpCenterPage() {
 
   return (
     <Page title={t('help.center.title')}>
+      <PullToRefresh
+        onRefresh={() => loadArticles(true)}
+        pullLabel={t('common.pullToRefresh')}
+        releaseLabel={t('common.releaseToRefresh')}
+        refreshingLabel={t('common.refreshing')}
+      >
         <p className="mb-4 text-sm text-muted-foreground">{t('help.center.subtitle')}</p>
 
         <div className="flex flex-col gap-2 rounded-xl border border-border/60 bg-background/50 p-3">
@@ -136,6 +143,7 @@ export default function HelpCenterPage() {
             </div>
           )}
         </section>
+      </PullToRefresh>
     </Page>
   );
 }

resources/js/guest/pages/HomePage.tsx

@@ -7,12 +7,13 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Progress } from '@/components/ui/progress';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Separator } from '@/components/ui/separator';
+import { AnimatePresence, motion } from 'framer-motion';
 import EmotionPicker from '../components/EmotionPicker';
 import GalleryPreview from '../components/GalleryPreview';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
+import { ArrowLeft, ArrowRight, 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';
@@ -25,6 +26,7 @@ import { getDeviceId } from '../lib/device';
 import { useDirectUpload } from '../hooks/useDirectUpload';
 import { useNavigate } from 'react-router-dom';
 import { isTaskModeEnabled } from '../lib/engagement';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 
 export default function HomePage() {
   const { token } = useParams<{ token: string }>();
@@ -74,6 +76,10 @@ export default function HomePage() {
   const uploadsRequireApproval =
     (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
   const tasksEnabled = isTaskModeEnabled(event);
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
 
   const [missionDeck, setMissionDeck] = React.useState<MissionPreview[]>([]);
   const [missionPool, setMissionPool] = React.useState<MissionPreview[]>([]);
@@ -288,15 +294,19 @@ export default function HomePage() {
 
   if (!tasksEnabled) {
     return (
-      <div className="space-y-3 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+      <motion.div className="space-y-3 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
-        <section className="space-y-1 px-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
+        <motion.section
+          className="space-y-1 px-4"
+          style={headingFont ? { fontFamily: headingFont } : undefined}
+          {...fadeUpMotion}
+        >
           <p className="text-sm font-semibold text-foreground">
             {t('home.welcomeLine').replace('{name}', displayName)}
           </p>
           {introMessage && <p className="text-xs text-muted-foreground">{introMessage}</p>}
-        </section>
+        </motion.section>
 
-        <section className="space-y-2 px-4">
+        <motion.section className="space-y-2 px-4" {...fadeUpMotion}>
           <UploadActionCard
             token={token}
             accentColor={accentColor}
@@ -305,18 +315,26 @@ export default function HomePage() {
             bodyFont={bodyFont}
             requiresApproval={uploadsRequireApproval}
           />
-        </section>
+        </motion.section>
 
+        <motion.div {...fadeUpMotion}>
           <Separator />
+        </motion.div>
 
+        <motion.div {...fadeUpMotion}>
           <GalleryPreview token={token} />
-      </div>
+        </motion.div>
+      </motion.div>
     );
   }
 
   return (
-    <div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+    <motion.div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
-      <section className="space-y-1 px-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
+      <motion.section
+        className="space-y-1 px-4"
+        style={headingFont ? { fontFamily: headingFont } : undefined}
+        {...fadeUpMotion}
+      >
         <p className="text-sm font-semibold text-foreground">
           {t('home.welcomeLine').replace('{name}', displayName)}
         </p>
@@ -325,9 +343,10 @@ export default function HomePage() {
             {introMessage}
           </p>
         )}
-      </section>
+      </motion.section>
 
       {heroVisible && (
+        <motion.div {...fadeScaleMotion}>
           <HeroCard
             name={displayName}
             eventName={eventNameDisplay}
@@ -338,9 +357,10 @@ export default function HomePage() {
             ctaLabel={t('home.actions.items.tasks.label')}
             ctaHref={`/e/${encodeURIComponent(token)}/tasks`}
           />
+        </motion.div>
       )}
 
-      <section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined}>
+      <motion.section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined} {...fadeUpMotion}>
         <div className="space-y-0.5">
           <MissionActionCard
             token={token}
@@ -349,6 +369,7 @@ export default function HomePage() {
             onAdvance={advanceDeck}
             stack={missionDeck.slice(1)}
             initialIndex={poolIndexRef.current}
+            swipeHintLabel={t('home.swipeHint')}
             onIndexChange={(idx, total) => {
               poolIndexRef.current = idx % Math.max(1, total);
               if (sliderStateKey && typeof window !== 'undefined') {
@@ -371,12 +392,16 @@ export default function HomePage() {
           />
           <EmotionActionCard />
         </div>
-      </section>
+      </motion.section>
 
+      <motion.div {...fadeUpMotion}>
         <Separator />
+      </motion.div>
 
+      <motion.div {...fadeUpMotion}>
         <GalleryPreview token={token} />
-    </div>
+      </motion.div>
+    </motion.div>
   );
 }
 
@@ -462,6 +487,7 @@ export function MissionActionCard({
   initialIndex,
   onIndexChange,
   swiperRef,
+  swipeHintLabel,
 }: {
   token: string;
   mission: MissionPreview | null;
@@ -471,6 +497,7 @@ export function MissionActionCard({
   initialIndex: number;
   onIndexChange: (index: number, total: number) => void;
   swiperRef: React.MutableRefObject<any>;
+  swipeHintLabel?: string;
 }) {
   const { branding } = useEventBranding();
   const radius = branding.buttons?.radius ?? 12;
@@ -486,6 +513,64 @@ export function MissionActionCard({
   const lastSlideIndexRef = React.useRef<number>(initialIndex);
   const titleRefs = React.useRef(new Map<number, HTMLParagraphElement | null>());
   const [expandableTitles, setExpandableTitles] = React.useState<Record<number, boolean>>({});
+  const [showSwipeHint, setShowSwipeHint] = React.useState(false);
+  const hintTimeoutRef = React.useRef<number | null>(null);
+  const hintStorageKey = token ? `guestMissionSwipeHintSeen_${token}` : 'guestMissionSwipeHintSeen';
+  const motionEnabled = !prefersReducedMotion();
+  const shouldShowHint = motionEnabled && cards.length > 1 && Boolean(swipeHintLabel);
+
+  const dismissSwipeHint = React.useCallback((persist = true) => {
+    if (!showSwipeHint) {
+      return;
+    }
+    setShowSwipeHint(false);
+    if (hintTimeoutRef.current) {
+      window.clearTimeout(hintTimeoutRef.current);
+      hintTimeoutRef.current = null;
+    }
+    if (persist && typeof window !== 'undefined') {
+      try {
+        window.sessionStorage.setItem(hintStorageKey, '1');
+      } catch {
+        // ignore storage exceptions
+      }
+    }
+  }, [hintStorageKey, showSwipeHint]);
+
+  React.useEffect(() => {
+    if (!shouldShowHint) {
+      setShowSwipeHint(false);
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      if (window.sessionStorage.getItem(hintStorageKey)) {
+        setShowSwipeHint(false);
+        return;
+      }
+    } catch {
+      // ignore storage exceptions
+    }
+
+    setShowSwipeHint(true);
+    hintTimeoutRef.current = window.setTimeout(() => {
+      setShowSwipeHint(false);
+      try {
+        window.sessionStorage.setItem(hintStorageKey, '1');
+      } catch {
+        // ignore storage exceptions
+      }
+    }, 3200);
+
+    return () => {
+      if (hintTimeoutRef.current) {
+        window.clearTimeout(hintTimeoutRef.current);
+        hintTimeoutRef.current = null;
+      }
+    };
+  }, [hintStorageKey, shouldShowHint]);
 
   const measureTitleOverflow = React.useCallback(() => {
     setExpandableTitles((prev) => {
@@ -686,7 +771,10 @@ export function MissionActionCard({
               type="button"
               variant="secondary"
               className="w-full border border-slate-200 bg-white/80 text-slate-800 shadow-sm backdrop-blur"
-              onClick={onAdvance}
+              onClick={() => {
+                dismissSwipeHint();
+                onAdvance();
+              }}
               disabled={loading}
               style={{
                 borderRadius: `${radius}px`,
@@ -708,6 +796,33 @@ export function MissionActionCard({
     <Card className="border-0 bg-transparent py-2 shadow-none" style={{ fontFamily: bodyFont }}>
       <CardContent className="px-0 py-0">
         <div className="relative min-h-[240px] px-2 sm:min-h-[260px]" data-testid="mission-card-stack">
+          <AnimatePresence initial={false}>
+            {showSwipeHint ? (
+              <motion.div
+                className="pointer-events-none absolute inset-x-0 bottom-2 z-10 flex justify-center"
+                initial={{ opacity: 0, y: 6 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 6 }}
+                transition={{ duration: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
+              >
+                <div className="flex items-center gap-2 rounded-full border border-white/40 bg-white/85 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-700 shadow-sm backdrop-blur">
+                  <motion.span
+                    animate={{ x: [-6, 0, -6] }}
+                    transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                  >
+                    <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
+                  </motion.span>
+                  <span>{swipeHintLabel}</span>
+                  <motion.span
+                    animate={{ x: [6, 0, 6] }}
+                    transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                  >
+                    <ArrowRight className="h-3.5 w-3.5" aria-hidden />
+                  </motion.span>
+                </div>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
           <Swiper
             effect="cards"
             modules={[EffectCards]}
@@ -731,6 +846,7 @@ export function MissionActionCard({
               const realIndex = typeof instance.realIndex === 'number' ? instance.realIndex : instance.activeIndex ?? 0;
               if (realIndex !== lastSlideIndexRef.current) {
                 setExpandedTaskId(null);
+                dismissSwipeHint();
               }
               lastSlideIndexRef.current = realIndex;
               onIndexChange(realIndex, slides.length);

resources/js/guest/pages/ProfileSetupPage.tsx

@@ -7,6 +7,8 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { useTranslation } from '../i18n/useTranslation';
+import { motion } from 'framer-motion';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 
 export default function ProfileSetupPage() {
   const { token } = useParams<{ token: string }>();
@@ -16,6 +18,10 @@ export default function ProfileSetupPage() {
   const [name, setName] = useState(storedName);
   const [submitting, setSubmitting] = useState(false);
   const { t } = useTranslation();
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
 
   useEffect(() => {
     if (!token) {
@@ -67,9 +73,10 @@ export default function ProfileSetupPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-purple-50 flex flex-col">
+    <motion.div className="min-h-screen bg-gradient-to-b from-pink-50 to-purple-50 flex flex-col" {...containerMotion}>
-      <div className="flex-1 flex flex-col justify-center items-center px-4 py-8">
+      <motion.div className="flex-1 flex flex-col justify-center items-center px-4 py-8" {...fadeUpMotion}>
-        <Card className="w-full max-w-md">
+        <motion.div {...fadeScaleMotion} className="w-full max-w-md">
+          <Card>
           <CardHeader className="text-center space-y-2">
             <CardTitle className="text-2xl font-bold text-gray-900">{event.name}</CardTitle>
             <CardDescription className="text-lg text-gray-600">
@@ -98,7 +105,8 @@ export default function ProfileSetupPage() {
             </Button>
           </CardContent>
           </Card>
-      </div>
+        </motion.div>
-    </div>
+      </motion.div>
+    </motion.div>
   );
 }

resources/js/guest/pages/TaskPickerPage.tsx

@@ -10,6 +10,7 @@ import { cn } from '@/lib/utils';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useEventBranding } from '../context/EventBrandingContext';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
+import { motion } from 'framer-motion';
 import {
   getEmotionIcon,
   getEmotionTheme,
@@ -17,6 +18,8 @@ import {
   type EmotionTheme,
 } from '../lib/emotionTheme';
 import { getDeviceId } from '../lib/device';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import PullToRefresh from '../components/PullToRefresh';
 
 interface Task {
   id: number;
@@ -243,6 +246,13 @@ export default function TaskPickerPage() {
     fetchTasks();
   };
 
+  const handleRefresh = React.useCallback(async () => {
+    tasksCacheRef.current.clear();
+    await fetchTasks();
+    setPhotoPool([]);
+    setPhotoPoolError(null);
+  }, [fetchTasks]);
+
   const handlePhotoPreview = React.useCallback(
     (photoId: number) => {
       if (!eventKey) return;
@@ -354,6 +364,10 @@ export default function TaskPickerPage() {
     [emotionOptions, recentEmotionSlug]
   );
   const toggleValue = selectedEmotion === 'all' ? 'none' : 'recent';
+  const motionEnabled = !prefersReducedMotion();
+  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
+  const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);
 
   const handleToggleChange = React.useCallback(
     (value: string) => {
@@ -379,15 +393,21 @@ export default function TaskPickerPage() {
 
   return (
     <>
-      <div className="space-y-6">
+      <PullToRefresh
-      <header className="space-y-4">
+        onRefresh={handleRefresh}
+        pullLabel={t('common.pullToRefresh')}
+        releaseLabel={t('common.releaseToRefresh')}
+        refreshingLabel={t('common.refreshing')}
+      >
+        <motion.div className="space-y-6" {...containerMotion}>
+        <motion.header className="space-y-4" {...fadeUpMotion}>
           <div className="space-y-1">
             <p className="text-[11px] uppercase tracking-[0.4em] text-muted-foreground">{t('tasks.page.eyebrow')}</p>
             <h1 className="text-2xl font-semibold text-foreground">{t('tasks.page.title')}</h1>
             <p className="text-sm text-muted-foreground">{t('tasks.page.subtitle')}</p>
           </div>
           {emotionOptions.length > 0 && (
-          <div className="overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]">
+            <motion.div className="overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]" {...fadeUpMotion}>
               <ToggleGroup
                 type="single"
                 aria-label="Stimmung filtern"
@@ -420,18 +440,19 @@ export default function TaskPickerPage() {
                   {t('tasks.page.filters.showAll')}
                 </ToggleGroupItem>
               </ToggleGroup>
-          </div>
+            </motion.div>
           )}
-      </header>
+        </motion.header>
 
         {loading && (
-        <div className="space-y-4">
+          <motion.div className="space-y-4" {...fadeUpMotion}>
             <SkeletonBlock />
             <SkeletonBlock />
-        </div>
+          </motion.div>
         )}
 
         {error && !loading && (
+          <motion.div {...fadeUpMotion}>
             <Alert variant="destructive">
               <AlertDescription className="flex items-center justify-between gap-3">
                 <span>{error}</span>
@@ -440,9 +461,11 @@ export default function TaskPickerPage() {
                 </Button>
               </AlertDescription>
             </Alert>
+          </motion.div>
         )}
 
         {emptyState && (
+          <motion.div {...fadeUpMotion}>
             <EmptyState
               hasTasks={Boolean(tasks.length)}
               onRetry={handleRetryFetch}
@@ -450,11 +473,12 @@ export default function TaskPickerPage() {
               onEmotionSelect={handleSelectEmotion}
               t={t}
             />
+          </motion.div>
         )}
 
         {!emptyState && currentTask && (
-        <div className="space-y-8">
+          <motion.div className="space-y-8" {...fadeUpMotion}>
-          <section
+            <motion.section
               ref={heroCardRef}
               className={cn(
                 'relative overflow-hidden rounded-3xl p-5 text-white shadow-lg transition-[background] duration-700',
@@ -462,6 +486,7 @@ export default function TaskPickerPage() {
                 heroTheme.gradientClass
               )}
               style={{ background: heroTheme.gradientBackground }}
+              {...fadeScaleMotion}
             >
               <div className="relative space-y-5">
                 <div className="flex flex-wrap items-center justify-between gap-3 text-xs font-semibold uppercase tracking-[0.25em] text-white/70">
@@ -555,10 +580,10 @@ export default function TaskPickerPage() {
                   </div>
                 )}
               </div>
-          </section>
+            </motion.section>
 
             {alternativeTasks.length > 0 && (
-            <section className="space-y-3">
+              <motion.section className="space-y-3" {...fadeUpMotion}>
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-sm uppercase tracking-[0.2em] text-muted-foreground">{t('tasks.page.suggestionsEyebrow')}</p>
@@ -573,17 +598,20 @@ export default function TaskPickerPage() {
                     <TaskSuggestionCard key={task.id} task={task} onSelect={handleSelectTask} />
                   ))}
                 </div>
-            </section>
+              </motion.section>
             )}
-        </div>
+          </motion.div>
         )}
 
         {!loading && !tasks.length && !error && (
+          <motion.div {...fadeUpMotion}>
             <Alert>
               <AlertDescription>{t('tasks.page.noTasksAlert')}</AlertDescription>
             </Alert>
+          </motion.div>
         )}
-      </div>
+        </motion.div>
+      </PullToRefresh>
       <Dialog open={emotionPickerOpen} onOpenChange={setEmotionPickerOpen}>
         <DialogContent className="max-h-[90vh] overflow-y-auto" hideClose>
           <DialogHeader>

resources/js/guest/pages/UploadPage.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { motion } from 'framer-motion';
 import {
   Dialog,
   DialogContent,
@@ -38,6 +39,7 @@ import { resolveUploadErrorDialog, type UploadErrorDialog } from '../lib/uploadE
 import { useEventStats } from '../context/EventStatsContext';
 import { useEventBranding } from '../context/EventBrandingContext';
 import { compressPhoto, formatBytes } from '../lib/image';
+import { FADE_SCALE, FADE_UP, prefersReducedMotion } from '../lib/motion';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { isTaskModeEnabled } from '../lib/engagement';
@@ -147,6 +149,9 @@ export default function UploadPage() {
   const uploadsRequireApproval =
     (event?.guest_upload_visibility as 'immediate' | 'review' | undefined) !== 'immediate';
   const demoReadOnly = Boolean(event?.demo_read_only);
+  const motionEnabled = !prefersReducedMotion();
+  const overlayMotion = motionEnabled ? { initial: 'hidden', animate: 'show', variants: FADE_SCALE } : {};
+  const fadeUpMotion = motionEnabled ? { initial: 'hidden', animate: 'show', variants: FADE_UP } : {};
 
   const taskIdParam = searchParams.get('task');
   const emotionSlug = searchParams.get('emotion') || '';
@@ -958,10 +963,11 @@ const [canUpload, setCanUpload] = useState(true);
   }, [beginCapture, isCameraActive, startCamera]);
 
   const taskFloatingCard = showTaskOverlay && task ? (
-    <button
+    <motion.button
       type="button"
       onClick={() => setTaskDetailsExpanded((prev) => !prev)}
       className="absolute left-4 right-4 top-6 z-30 rounded-3xl border border-white/40 bg-black/60 p-4 text-left text-white shadow-2xl backdrop-blur transition hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white/60 sm:left-6 sm:right-6 sm:top-8"
+      {...overlayMotion}
     >
       <div className="flex items-center gap-3">
         <Badge variant="secondary" className="flex items-center gap-2 rounded-full text-[11px]">
@@ -1001,11 +1007,11 @@ const [canUpload, setCanUpload] = useState(true);
           </div>
         </div>
       ) : null}
-    </button>
+    </motion.button>
   ) : null;
 
   const heroOverlay = !task && showHeroOverlay && mode !== 'uploading' ? (
-    <div className="absolute left-4 right-4 top-4 z-30 rounded-2xl border border-white/25 bg-black/60 px-4 py-3 text-white shadow-2xl backdrop-blur sm:left-6 sm:right-6 sm:top-5">
+    <motion.div className="absolute left-4 right-4 top-4 z-30 rounded-2xl border border-white/25 bg-black/60 px-4 py-3 text-white shadow-2xl backdrop-blur sm:left-6 sm:right-6 sm:top-5" {...fadeUpMotion}>
       <div className="flex items-center justify-between gap-2">
         <div className="space-y-1">
           <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Bereit für dein Foto?</p>
@@ -1015,7 +1021,7 @@ const [canUpload, setCanUpload] = useState(true);
           Live
         </Badge>
       </div>
-    </div>
+    </motion.div>
   ) : null;
 
   const dialogToneIconClass: Record<Exclude<UploadErrorDialog['tone'], undefined>, string> = {
@@ -1079,7 +1085,10 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
 
   const renderPrimer = () => (
     showPrimer && (
-      <div className="rounded-[28px] border border-pink-200/60 bg-white/90 p-4 text-sm text-pink-900 shadow-lg dark:border-pink-500/40 dark:bg-pink-500/10 dark:text-pink-50">
+      <motion.div
+        className="rounded-[28px] border border-pink-200/60 bg-white/90 p-4 text-sm text-pink-900 shadow-lg dark:border-pink-500/40 dark:bg-pink-500/10 dark:text-pink-50"
+        {...fadeUpMotion}
+      >
         <div className="flex items-start gap-3">
           <Info className="mt-0.5 h-5 w-5 flex-shrink-0" />
           <div className="text-left">
@@ -1093,7 +1102,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
             {t('upload.primer.dismiss')}
           </Button>
         </div>
-      </div>
+      </motion.div>
     )
   );
 
@@ -1133,9 +1142,10 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
           : null;
 
     return (
-      <div
+      <motion.div
         className="rounded-[32px] border border-white/15 bg-white/85 p-5 text-slate-900 shadow-lg dark:border-white/10 dark:bg-white/5 dark:text-white"
         style={{ borderRadius: radius, fontFamily: bodyFont }}
+        {...fadeUpMotion}
       >
         <div className="flex items-center gap-3">
           <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-900/10 dark:bg-white/10">
@@ -1179,7 +1189,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
             {t('upload.galleryButton')}
           </Button>
         </div>
-      </div>
+      </motion.div>
     );
   };
 

resources/js/guest/pages/_util.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
+import { motion } from 'framer-motion';
+import { FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 
 export function Page({ title, children }: { title: string; children?: React.ReactNode }) {
+  const motionEnabled = !prefersReducedMotion();
+  const containerProps = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const itemProps = getMotionItemProps(motionEnabled, FADE_UP);
+
   return (
-    <div style={{ maxWidth: 720, margin: '0 auto', padding: 16 }}>
+    <motion.div {...containerProps} style={{ maxWidth: 720, margin: '0 auto', padding: 16 }}>
-      <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 12 }}>{title}</h1>
+      <motion.h1 {...itemProps} style={{ fontSize: 20, fontWeight: 600, marginBottom: 12 }}>
-      <div>{children}</div>
+        {title}
-    </div>
+      </motion.h1>
+      <motion.div {...itemProps}>{children}</motion.div>
+    </motion.div>
   );
 }
-

resources/js/guest/polling/usePollGalleryDelta.ts

@@ -150,6 +150,18 @@ export function usePollGalleryDelta(token: string, locale: LocaleCode) {
     };
   }, [token, visible, locale, fetchDelta]);
 
-  function acknowledgeNew() { setNewCount(0); }
+  const refreshNow = useCallback(async () => {
-  return { loading, photos, newCount, acknowledgeNew };
+    if (!token) {
+      return;
+    }
+    setLoading(true);
+    latestAt.current = null;
+    etagRef.current = null;
+    setNewCount(0);
+    setPhotos([]);
+    await fetchDelta();
+  }, [fetchDelta, token]);
+
+  function acknowledgeNew() { setNewCount(0); }
+  return { loading, photos, newCount, acknowledgeNew, refreshNow };
 }

resources/js/guest/router.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { createBrowserRouter, Outlet, useParams, Link, Navigate } from 'react-router-dom';
+import { createBrowserRouter, useParams, Link, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import BottomNav from './components/BottomNav';
+import RouteTransition from './components/RouteTransition';
 import { useEventData } from './hooks/useEventData';
 import { AlertTriangle, Loader2 } from 'lucide-react';
 import { EventStatsProvider } from './context/EventStatsContext';
@@ -44,7 +45,7 @@ function HomeLayout() {
       <div className="pb-16">
         <Header title="Event" />
         <div className="px-4 py-3">
-          <Outlet />
+          <RouteTransition />
         </div>
         <BottomNav />
       </div>
@@ -123,7 +124,7 @@ function EventBoundary({ token }: { token: string }) {
             <div className="pb-16">
               <Header eventToken={token} />
               <div className="px-4 py-3">
-                <Outlet />
+                <RouteTransition />
               </div>
               <BottomNav />
             </div>
@@ -164,7 +165,7 @@ function SetupLayout() {
             <NotificationCenterProvider eventToken={token}>
               <div className="pb-0">
                 <Header eventToken={token} />
-                <Outlet />
+                <RouteTransition />
               </div>
             </NotificationCenterProvider>
           </EventStatsProvider>
@@ -325,7 +326,7 @@ function SimpleLayout({ title, children }: { title: string; children: React.Reac
       <div className="pb-16">
         <Header title={title} />
         <div className="px-4 py-3">
-          {children}
+          <RouteTransition>{children}</RouteTransition>
         </div>
         <BottomNav />
       </div>

resources/js/types/vite-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
 
 interface ImportMetaEnv {
   readonly VITE_ENABLE_TENANT_SWITCHER?: string;

resources/views/guest.blade.php

@@ -6,6 +6,9 @@
     <title>{{ config('app.name', 'Fotospiel') }}</title>
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
+    <link rel="manifest" href="{{ asset('guest.webmanifest') }}">
+    <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
+    <meta name="theme-color" content="#0f172a">
     @viteReactRefresh
     @vite(['resources/css/app.css', 'resources/js/guest/main.tsx'])
     @php

vite.config.ts

@@ -6,6 +6,7 @@ import { defineConfig, type PluginOption } from 'vite';
 import path from 'path';
 import { tamaguiPlugin } from '@tamagui/vite-plugin';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const devServerHost = process.env.VITE_DEV_SERVER_HOST ?? 'fotospiel-app.test';
 const devServerPort = Number.parseInt(process.env.VITE_DEV_SERVER_PORT ?? '5173', 10);
@@ -36,6 +37,63 @@ const plugins: PluginOption[] = [
     wayfinder({
         formVariants: true,
     }),
+    VitePWA({
+        strategies: 'injectManifest',
+        srcDir: 'resources/js/guest',
+        filename: 'guest-sw.ts',
+        manifestFilename: 'guest.webmanifest',
+        outDir: 'public',
+        injectRegister: null,
+        registerType: 'prompt',
+        includeAssets: [
+            'favicon.ico',
+            'favicon.svg',
+            'apple-touch-icon.png',
+            'logo-transparent-md.png',
+            'logo-transparent-lg.png',
+        ],
+        injectManifest: {
+            globDirectory: 'public/build',
+            globPatterns: ['**/*.{js,css,woff,woff2,svg,png,webp,ico,txt}'],
+        },
+        manifest: {
+            name: 'Fotospiel',
+            short_name: 'Fotospiel',
+            id: '/event',
+            start_url: '/event',
+            scope: '/',
+            display: 'standalone',
+            lang: 'de-DE',
+            description: 'Offline-fähige Event-Galerie für Gäste – Fotos aufnehmen, Aufgaben lösen und teilen.',
+            background_color: '#0f172a',
+            theme_color: '#ec4899',
+            orientation: 'portrait',
+            categories: ['photo-video', 'social'],
+            icons: [
+                {
+                    src: '/favicon.svg',
+                    sizes: 'any',
+                    type: 'image/svg+xml',
+                    purpose: 'any',
+                },
+                {
+                    src: '/apple-touch-icon.png',
+                    sizes: '166x169',
+                    type: 'image/png',
+                    purpose: 'any',
+                },
+                {
+                    src: '/logo-transparent-lg.png',
+                    sizes: '698x684',
+                    type: 'image/png',
+                    purpose: 'any',
+                },
+            ],
+        },
+        devOptions: {
+            enabled: false,
+        },
+    }),
     tamaguiPlugin({
         config: './tamagui.config.ts',
         components: ['@tamagui/core', '@tamagui/stacks', '@tamagui/text', '@tamagui/button'],