photobooth funktionen im event admin verlinkt, gäste pwa zeigt photobooth nur noch an, wenn diese aktiviert ist. kontaktformular optimiert. teilen-link mit iMessage und whatsapp erweitert.

app/Http/Controllers/Api/EventPublicController.php

@@ -918,6 +918,21 @@ class EventPublicController extends BaseController
         ];
     }
 
+    private function resolveFontFamily(Event $event): ?string
+    {
+        $fontFamily = Arr::get($event->settings, 'branding.font_family')
+            ?? Arr::get($event->tenant?->settings, 'branding.font_family');
+
+        if (! is_string($fontFamily)) {
+            return null;
+        }
+
+        $normalized = strtolower(trim($fontFamily));
+        $defaultInter = strtolower('Inter, sans-serif');
+
+        return $normalized === $defaultInter ? null : $fontFamily;
+    }
+
     private function encodeGalleryCursor(Photo $photo): string
     {
         return base64_encode(json_encode([
@@ -1378,8 +1393,7 @@ class EventPublicController extends BaseController
         ];
 
         $branding = $this->buildGalleryBranding($event);
-        $fontFamily = Arr::get($event->settings, 'branding.font_family')
+        $fontFamily = $this->resolveFontFamily($event);
-            ?? Arr::get($event->tenant?->settings, 'branding.font_family');
         $brandingAllowed = $this->determineBrandingAllowed($event);
         $logoUrl = $brandingAllowed
             ? (Arr::get($event->settings, 'branding.logo_url')
@@ -1399,6 +1413,7 @@ class EventPublicController extends BaseController
             'updated_at' => $event->updated_at,
             'type' => $eventTypeData,
             'join_token' => $joinToken?->token,
+            'photobooth_enabled' => (bool) $event->photobooth_enabled,
             'branding' => [
                 'primary_color' => $branding['primary_color'],
                 'secondary_color' => $branding['secondary_color'],

app/Http/Controllers/MarketingController.php

@@ -59,6 +59,7 @@ class MarketingController extends Controller
             'name' => 'required|string|max:255',
             'email' => 'required|email|max:255',
             'message' => 'required|string|max:1000',
+            'nickname' => 'present|size:0',
         ]);
 
         $locale = app()->getLocale();

app/Providers/AppServiceProvider.php

@@ -176,6 +176,15 @@ class AppServiceProvider extends ServiceProvider
             return Limit::perMinute(10)->by('coupon-preview:'.$identifier);
         });
 
+        RateLimiter::for('contact-form', function (Request $request) {
+            $ip = $request->ip() ?? 'unknown';
+
+            return [
+                Limit::perMinute(5)->by('contact:ip:'.$ip),
+                Limit::perHour(30)->by('contact:hour:'.$ip),
+            ];
+        });
+
         Inertia::share('locale', fn () => app()->getLocale());
         Inertia::share('analytics', static function () {
             $config = config('services.matomo');

app/Support/WatermarkConfigResolver.php

@@ -4,6 +4,7 @@ namespace App\Support;
 
 use App\Models\Event;
 use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Schema;
 
 class WatermarkConfigResolver
 {
@@ -35,7 +36,15 @@ class WatermarkConfigResolver
             ];
         }
 
-        $baseSetting = WatermarkSetting::query()->first();
+        $baseSetting = null;
+
+        if (class_exists(\App\Models\WatermarkSetting::class) && \Illuminate\Support\Facades\Schema::hasTable('watermark_settings')) {
+            try {
+                $baseSetting = \App\Models\WatermarkSetting::query()->first();
+            } catch (\Throwable) {
+                $baseSetting = null;
+            }
+        }
         $base = [
             'asset' => $baseSetting?->asset ?? config('watermark.base.asset', 'branding/fotospiel-watermark.png'),
             'position' => $baseSetting?->position ?? config('watermark.base.position', 'bottom-right'),
@@ -87,4 +96,3 @@ class WatermarkConfigResolver
         ];
     }
 }
-use App\Models\WatermarkSetting;

resources/css/app.css

@@ -115,7 +115,9 @@
   --guest-primary: #f43f5e;
   --guest-secondary: #fb7185;
   --guest-background: #ffffff;
-  --guest-font-family: inherit;
+  --guest-font-family: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --guest-heading-font: 'Playfair Display', serif;
+  --guest-serif-font: 'Lora', serif;
 }
 
 @font-face {
@@ -138,6 +140,18 @@ body {
   font-family: var(--guest-font-family), 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
+h1,
+h2,
+h3,
+h4,
+.font-display {
+  font-family: var(--guest-heading-font), var(--guest-font-family), 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.font-serif {
+  font-family: var(--guest-serif-font), 'Lora', 'Georgia', serif;
+}
+
 @keyframes aurora {
   0%,
   100% {

resources/js/admin/components/EventNav.tsx

@@ -23,6 +23,7 @@ import {
   ADMIN_EVENT_TASKS_PATH,
   ADMIN_EVENT_TOOLKIT_PATH,
   ADMIN_EVENT_VIEW_PATH,
+  ADMIN_EVENT_PHOTOBOOTH_PATH,
 } from '../constants';
 import type { TenantEvent } from '../api';
 import { cn } from '@/lib/utils';
@@ -62,6 +63,7 @@ function buildEventLinks(slug: string, t: ReturnType<typeof useTranslation>['t']
   return [
     { key: 'summary', label: t('eventMenu.summary', 'Übersicht'), href: ADMIN_EVENT_VIEW_PATH(slug) },
     { key: 'photos', label: t('eventMenu.photos', 'Uploads'), href: ADMIN_EVENT_PHOTOS_PATH(slug) },
+    { key: 'photobooth', label: t('eventMenu.photobooth', 'Photobooth'), href: ADMIN_EVENT_PHOTOBOOTH_PATH(slug) },
     { key: 'guests', label: t('eventMenu.guests', 'Team & Gäste'), href: ADMIN_EVENT_MEMBERS_PATH(slug) },
     { key: 'tasks', label: t('eventMenu.tasks', 'Aufgaben'), href: ADMIN_EVENT_TASKS_PATH(slug) },
     { key: 'invites', label: t('eventMenu.invites', 'Einladungen'), href: ADMIN_EVENT_INVITES_PATH(slug) },

resources/js/admin/pages/EventDetailPage.tsx

@@ -13,6 +13,7 @@ import {
   MessageSquare,
   Printer,
   QrCode,
+  PlugZap,
   RefreshCw,
   Smile,
   Sparkles,
@@ -47,6 +48,7 @@ import {
   ADMIN_EVENT_EDIT_PATH,
   ADMIN_EVENT_INVITES_PATH,
   ADMIN_EVENT_MEMBERS_PATH,
+  ADMIN_EVENT_PHOTOBOOTH_PATH,
   ADMIN_EVENT_PHOTOS_PATH,
   ADMIN_EVENT_TASKS_PATH,
 } from '../constants';
@@ -590,6 +592,13 @@ function QuickActionsCard({ slug, busy, onToggle, navigate }: { slug: string; bu
       description: t('events.quickActions.rolesDesc', 'Verwalte Moderatoren und Co-Leads.'),
       onClick: () => navigate(ADMIN_EVENT_MEMBERS_PATH(slug)),
     },
+    {
+      key: 'photobooth',
+      icon: <PlugZap className="h-4 w-4" />,
+      label: t('events.quickActions.photobooth', 'Photobooth anbinden'),
+      description: t('events.quickActions.photoboothDesc', 'FTP-Link aktivieren und Zugangsdaten kopieren.'),
+      onClick: () => navigate(ADMIN_EVENT_PHOTOBOOTH_PATH(slug)),
+    },
     {
       key: 'print',
       icon: <Printer className="h-4 w-4" />,

resources/js/admin/pages/EventPhotosPage.tsx

@@ -4,6 +4,7 @@ import { Camera, Loader2, Sparkles, Trash2, AlertTriangle, ShoppingCart } from '
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import toast from 'react-hot-toast';
 import { AddonsPicker } from '../components/Addons/AddonsPicker';
@@ -16,7 +17,7 @@ import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
 import { buildLimitWarnings, type EventLimitSummary } from '../lib/limitWarnings';
 import { useTranslation } from 'react-i18next';
-import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH } from '../constants';
+import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH, ADMIN_EVENT_PHOTOBOOTH_PATH } from '../constants';
 
 export default function EventPhotosPage() {
   const params = useParams<{ slug?: string }>();
@@ -37,6 +38,10 @@ export default function EventPhotosPage() {
   const [limits, setLimits] = React.useState<EventLimitSummary | null>(null);
   const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]);
   const [eventAddons, setEventAddons] = React.useState<EventAddonSummary[]>([]);
+  const photoboothUploads = React.useMemo(
+    () => photos.filter((photo) => photo.ingest_source === 'photobooth').length,
+    [photos],
+  );
 
   const load = React.useCallback(async () => {
     if (!slug) {
@@ -165,13 +170,29 @@ export default function EventPhotosPage() {
       )}
 
       <Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
-        <CardHeader>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+          <div>
-            <Camera className="h-5 w-5 text-sky-500" /> {t('photos.gallery.title', 'Galerie')}
+            <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
-          </CardTitle>
+              <Camera className="h-5 w-5 text-sky-500" /> {t('photos.gallery.title', 'Galerie')}
-          <CardDescription className="text-sm text-slate-600">
+            </CardTitle>
-            {t('photos.gallery.description', 'Klick auf ein Foto, um es hervorzuheben oder zu löschen.')}
+            <CardDescription className="text-sm text-slate-600">
-          </CardDescription>
+              {t('photos.gallery.description', 'Klick auf ein Foto, um es hervorzuheben oder zu löschen.')}
+            </CardDescription>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="outline" className="border-sky-200 text-sky-700">
+              {t('photos.gallery.photoboothCount', '{{count}} Photobooth-Uploads', { count: photoboothUploads })}
+            </Badge>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => slug && navigate(ADMIN_EVENT_PHOTOBOOTH_PATH(slug))}
+              disabled={!slug}
+              className="text-rose-600 hover:bg-rose-50"
+            >
+              {t('photos.gallery.photoboothCta', 'Photobooth-Zugang öffnen')}
+            </Button>
+          </div>
         </CardHeader>
         <CardContent>
           {loading ? (

resources/js/admin/pages/EventsPage.tsx

@@ -32,6 +32,7 @@ import {
   ADMIN_EVENT_TASKS_PATH,
   ADMIN_EVENT_INVITES_PATH,
   ADMIN_EVENT_TOOLKIT_PATH,
+  ADMIN_EVENT_PHOTOBOOTH_PATH,
 } from '../constants';
 import { buildLimitWarnings } from '../lib/limitWarnings';
 import { useTranslation } from 'react-i18next';
@@ -368,6 +369,7 @@ function EventCard({
     { key: 'members', label: translate('events.list.actions.members', 'Mitglieder'), to: ADMIN_EVENT_MEMBERS_PATH(slug) },
     { key: 'tasks', label: translate('events.list.actions.tasks', 'Tasks'), to: ADMIN_EVENT_TASKS_PATH(slug) },
     { key: 'invites', label: translate('events.list.actions.invites', 'QR-Einladungen'), to: ADMIN_EVENT_INVITES_PATH(slug) },
+    { key: 'photobooth', label: translate('events.list.actions.photobooth', 'Photobooth'), to: ADMIN_EVENT_PHOTOBOOTH_PATH(slug) },
     { key: 'toolkit', label: translate('events.list.actions.toolkit', 'Toolkit'), to: ADMIN_EVENT_TOOLKIT_PATH(slug) },
   ];
 

resources/js/components/ui/Steps.tsx

@@ -25,8 +25,8 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
               className={cn(
                 "w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
                 index <= currentStep
-                  ? "bg-blue-500 text-white border-blue-500"
+                  ? "bg-primary text-primary-foreground border-primary shadow-sm"
-                  : "bg-gray-200 text-gray-500 border-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-700"
+                  : "bg-muted text-muted-foreground border-muted"
               )}
             >
               {index + 1}
@@ -34,23 +34,23 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
             <div className="mt-2 text-xs font-medium text-center">
               <p className={cn(
                 "font-semibold",
-                index === currentStep ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
+                index === currentStep ? "text-primary" : "text-muted-foreground"
               )}>
                 {step.title}
               </p>
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{step.description}</p>
+              <p className="text-xs text-muted-foreground mt-1">{step.description}</p>
               {step.details && index === currentStep && (
-                <p className="text-xs text-blue-500 dark:text-blue-300 mt-1 font-medium">
+                <p className="text-xs text-primary mt-1 font-medium">
                   {step.details}
                 </p>
               )}
             </div>
             {index < steps.length - 1 && (
-              <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">
+              <div className="flex-1 h-px bg-border mx-2">
                 <div
                   className={cn(
                     "h-full transition-all duration-300",
-                    index < currentStep ? "bg-blue-500" : "bg-transparent"
+                    index < currentStep ? "bg-primary" : "bg-transparent"
                   )}
                   style={{ width: index < currentStep ? '100%' : '0%' }}
                 />

resources/js/guest/components/FiltersBar.tsx

@@ -5,15 +5,27 @@ import { useTranslation } from '../i18n/useTranslation';
 
 export type GalleryFilter = 'latest' | 'popular' | 'mine' | 'photobooth';
 
-const filterConfig: Array<{ value: GalleryFilter; labelKey: string; icon: React.ReactNode }> = [
+type FilterConfig = Array<{ value: GalleryFilter; labelKey: string; icon: React.ReactNode }>;
+
+const baseFilters: FilterConfig = [
   { value: 'latest', labelKey: 'galleryPage.filters.latest', icon: <Sparkles className="h-4 w-4" aria-hidden /> },
   { value: 'popular', labelKey: 'galleryPage.filters.popular', icon: <Flame className="h-4 w-4" aria-hidden /> },
   { value: 'mine', labelKey: 'galleryPage.filters.mine', icon: <UserRound className="h-4 w-4" aria-hidden /> },
-  { value: 'photobooth', labelKey: 'galleryPage.filters.photobooth', icon: <Camera className="h-4 w-4" aria-hidden /> },
 ];
 
-export default function FiltersBar({ value, onChange, className }: { value: GalleryFilter; onChange: (v: GalleryFilter) => void; className?: string }) {
+export default function FiltersBar({
+  value,
+  onChange,
+  className,
+  showPhotobooth = true,
+}: { value: GalleryFilter; onChange: (v: GalleryFilter) => void; className?: string; showPhotobooth?: boolean }) {
   const { t } = useTranslation();
+  const filters: FilterConfig = React.useMemo(
+    () => (showPhotobooth
+      ? [...baseFilters, { value: 'photobooth', labelKey: 'galleryPage.filters.photobooth', icon: <Camera className="h-4 w-4" aria-hidden /> }]
+      : baseFilters),
+    [showPhotobooth],
+  );
 
   return (
     <div
@@ -22,7 +34,7 @@ export default function FiltersBar({ value, onChange, className }: { value: Gall
         className,
       )}
     >
-      {filterConfig.map((filter) => (
+      {filters.map((filter) => (
         <button
           key={filter.value}
           type="button"

resources/js/guest/components/GalleryPreview.tsx

@@ -28,10 +28,11 @@ export default function GalleryPreview({ token }: Props) {
   const { locale } = useTranslation();
   const { photos, loading } = usePollGalleryDelta(token, locale);
   const [mode, setMode] = React.useState<PreviewFilter>('latest');
+  const typedPhotos = React.useMemo(() => photos as PreviewPhoto[], [photos]);
+  const hasPhotobooth = React.useMemo(() => typedPhotos.some((p) => p.ingest_source === 'photobooth'), [typedPhotos]);
 
   const items = React.useMemo(() => {
-    const typed = photos as PreviewPhoto[];
+    let arr = typedPhotos.slice();
-    let arr = typed.slice();
     
     // MyPhotos filter (requires session_id matching)
     if (mode === 'mine') {
@@ -49,7 +50,13 @@ export default function GalleryPreview({ token }: Props) {
     }
     
     return arr.slice(0, 4); // 2x2 = 4 items
-  }, [photos, mode]);
+  }, [typedPhotos, mode]);
+
+  React.useEffect(() => {
+    if (mode === 'photobooth' && !hasPhotobooth) {
+      setMode('latest');
+    }
+  }, [mode, hasPhotobooth]);
 
   // Helper function to generate photo title (must be before return)
   function getPhotoTitle(photo: PreviewPhoto): string {
@@ -72,7 +79,7 @@ export default function GalleryPreview({ token }: Props) {
     { value: 'latest', label: 'Newest' },
     { value: 'popular', label: 'Popular' },
     { value: 'mine', label: 'My Photos' },
-    { value: 'photobooth', label: 'Fotobox' },
+    ...(hasPhotobooth ? [{ value: 'photobooth', label: 'Fotobox' } as const] : []),
   ];
 
   return (

resources/js/guest/context/EventBrandingContext.tsx

@@ -54,8 +54,10 @@ function applyCssVariables(branding: EventBranding) {
 
   if (branding.fontFamily) {
     root.style.setProperty('--guest-font-family', branding.fontFamily);
+    root.style.setProperty('--guest-heading-font', branding.fontFamily);
   } else {
     root.style.removeProperty('--guest-font-family');
+    root.style.removeProperty('--guest-heading-font');
   }
 }
 
@@ -69,6 +71,7 @@ function resetCssVariables() {
   root.style.removeProperty('--guest-secondary');
   root.style.removeProperty('--guest-background');
   root.style.removeProperty('--guest-font-family');
+  root.style.removeProperty('--guest-heading-font');
 }
 
 export function EventBrandingProvider({

resources/js/guest/i18n/messages.ts

@@ -349,6 +349,9 @@ export const messages: Record<LocaleCode, NestedMessages> = {
       expiredDescription: 'Dieser Link ist nicht mehr verfügbar.',
       shareText: 'Schau dir diesen Moment bei Fotospiel an.',
       error: 'Teilen fehlgeschlagen',
+      whatsapp: 'WhatsApp',
+      imessage: 'Nachrichten',
+      copyError: 'Link konnte nicht kopiert werden.',
     },
     uploadQueue: {
       title: 'Uploads',

resources/js/guest/pages/GalleryPage.tsx

@@ -3,7 +3,7 @@ import { Page } from './_util';
 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 { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
 import { fetchEvent, type EventData } from '../services/eventApi';
@@ -11,8 +11,10 @@ import { useTranslation } from '../i18n/useTranslation';
 import { sharePhotoLink } from '../lib/sharePhoto';
 import { useToast } from '../components/ToastHost';
 import { localizeTaskLabel } from '../lib/localizeTaskLabel';
+import { createPhotoShareLink } from '../services/photosApi';
+import { cn } from '@/lib/utils';
 
-const allowedGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
+const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
 type GalleryPhoto = {
   id: number;
   likes_count?: number | null;
@@ -29,9 +31,6 @@ type GalleryPhoto = {
   uploader_name?: string | null;
 };
 
-const parseGalleryFilter = (value: string | null): GalleryFilter =>
-  allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest';
-
 const normalizeImageUrl = (src?: string | null) => {
   if (!src) {
     return '';
@@ -56,7 +55,7 @@ export default function GalleryPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const photoIdParam = searchParams.get('photoId');
   const modeParam = searchParams.get('mode');
-  const [filter, setFilterState] = React.useState<GalleryFilter>(() => parseGalleryFilter(modeParam));
+  const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
   const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
 
@@ -65,10 +64,30 @@ export default function GalleryPage() {
   const toast = useToast();
   const [shareTargetId, setShareTargetId] = React.useState<number | null>(null);
   const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const [shareSheet, setShareSheet] = React.useState<{ photo: GalleryPhoto | null; url: string | null; loading: boolean }>({
+    photo: null,
+    url: null,
+    loading: false,
+  });
+
+  const typedPhotos = photos as GalleryPhoto[];
+  const showPhotoboothFilter = React.useMemo(
+    () => Boolean(event?.photobooth_enabled) || typedPhotos.some((p) => p.ingest_source === 'photobooth'),
+    [event?.photobooth_enabled, typedPhotos],
+  );
+  const allowedGalleryFilters = React.useMemo<GalleryFilter[]>(
+    () => (showPhotoboothFilter ? allGalleryFilters : ['latest', 'popular', 'mine']),
+    [showPhotoboothFilter],
+  );
+  const parseGalleryFilter = React.useCallback(
+    (value: string | null): GalleryFilter =>
+      allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest',
+    [allowedGalleryFilters],
+  );
 
   useEffect(() => {
     setFilterState(parseGalleryFilter(modeParam));
-  }, [modeParam]);
+  }, [modeParam, parseGalleryFilter]);
 
   const setFilter = React.useCallback((next: GalleryFilter) => {
     setFilterState(next);
@@ -76,7 +95,12 @@ export default function GalleryPage() {
     params.set('mode', next);
     setSearchParams(params, { replace: true });
   }, [searchParams, setSearchParams]);
-  const typedPhotos = photos as GalleryPhoto[];
+
+  useEffect(() => {
+    if (filter === 'photobooth' && !showPhotoboothFilter) {
+      setFilter('latest');
+    }
+  }, [filter, showPhotoboothFilter, setFilter]);
 
   // Auto-open lightbox if photoId in query params
   useEffect(() => {
@@ -152,31 +176,89 @@ export default function GalleryPage() {
     }
   }
 
+  const buildShareText = (fallback?: string) => t('share.shareText', { event: event?.name ?? fallback ?? 'Fotospiel' });
+
   async function onShare(photo: GalleryPhoto) {
     if (!token) return;
+    setShareSheet({ photo, url: null, loading: true });
     setShareTargetId(photo.id);
     try {
-      const localizedTask = localizeTaskLabel(photo.task_title ?? null, locale);
+      const url = await ensureShareUrl(photo);
-      const result = await sharePhotoLink({
+      setShareSheet({ photo, url, loading: false });
-        token,
-        photoId: photo.id,
-        title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
-        text: t('share.shareText', { event: event?.name ?? 'Fotospiel' }),
-      });
-
-      if (result.method === 'clipboard') {
-        toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
-      } else if (result.method === 'manual') {
-        window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
-      }
     } catch (error) {
       console.error('share failed', error);
       toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
+      setShareSheet({ photo: null, url: null, loading: false });
     } finally {
       setShareTargetId(null);
     }
   }
 
+  async function ensureShareUrl(photo: GalleryPhoto): Promise<string> {
+    if (!token) throw new Error('missing token');
+    const payload = await createPhotoShareLink(token, photo.id);
+    return payload.url;
+  }
+
+  function shareNative(url?: string | null) {
+    if (!shareSheet.photo || !url) return;
+    const localizedTask = localizeTaskLabel(shareSheet.photo.task_title ?? null, locale);
+    const data: ShareData = {
+      title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
+      text: buildShareText(),
+      url,
+    };
+    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+      navigator.share(data).catch(() => {
+        // user cancelled; no toast
+      });
+      setShareSheet({ photo: null, url: null, loading: false });
+      return;
+    }
+    void copyLink(url);
+  }
+
+  function shareWhatsApp(url?: string) {
+    if (!url) return;
+    const text = `${buildShareText()} ${url}`;
+    const waUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
+    window.open(waUrl, '_blank', 'noopener');
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  function shareMessages(url?: string) {
+    if (!url) return;
+    const text = `${buildShareText()} ${url}`;
+    const smsUrl = `sms:?&body=${encodeURIComponent(text)}`;
+    window.open(smsUrl, '_blank', 'noopener');
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  async function copyLink(url?: string | null) {
+    if (!url) return;
+    try {
+      await navigator.clipboard?.writeText(url);
+      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    } catch {
+      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
+    } finally {
+      setShareSheet({ photo: null, url: null, loading: false });
+    }
+  }
+
+  function closeShareSheet() {
+    setShareSheet({ photo: null, url: null, loading: false });
+  }
+
+  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
+      <path
+        fill="currentColor"
+        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
+      />
+    </svg>
+  );
+
   if (!token) {
     return (
       <Page title={t('galleryPage.title', 'Galerie')}>
@@ -230,7 +312,7 @@ export default function GalleryPage() {
         
       </div>
 
-      <FiltersBar value={filter} onChange={setFilter} className="mt-2" />
+      <FiltersBar value={filter} onChange={setFilter} className="mt-2" showPhotobooth={showPhotoboothFilter} />
       {loading && <p className="px-4">{t('galleryPage.loading', 'Lade…')}</p>}
       <div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
         {list.map((p: GalleryPhoto) => {
@@ -272,22 +354,32 @@ export default function GalleryPage() {
                 }}
                 loading="lazy"
               />
-              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
-              <div className="pointer-events-none absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
+              <div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
-                {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2">{localizedTaskTitle}</p>}
+                {localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white">{localizedTaskTitle}</p>}
-                <div className="flex items-center justify-between text-xs text-white/80">
+                <div className="flex items-center justify-between text-xs text-white/90">
-                  <span>{createdLabel}</span>
+                  <span className="truncate">{createdLabel}</span>
-                  <span>{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
+                  <span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
                 </div>
               </div>
-              <div className="absolute bottom-3 right-3 flex items-center gap-2">
+              <div className="absolute left-3 top-3 z-10 flex flex-col items-start gap-2">
+                {localizedTaskTitle && (
+                  <span className="rounded-full bg-white/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white shadow">
+                    {localizedTaskTitle}
+                  </span>
+                )}
+              </div>
+              <div className="absolute right-3 top-3 z-10 flex items-center gap-2">
                 <button
                   type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     onShare(p);
                   }}
-                  className={`flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-white/10 transition ${shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/20'}`}
+                  className={cn(
+                    'flex h-9 w-9 items-center justify-center rounded-full border border-white/40 bg-black/40 text-white transition backdrop-blur',
+                    shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
+                  )}
                   aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
                   disabled={shareTargetId === p.id}
                 >
@@ -299,7 +391,10 @@ export default function GalleryPage() {
                     e.stopPropagation();
                     onLike(p.id);
                   }}
-                  className={`flex items-center gap-1 rounded-full border border-white/30 bg-white/10 px-3 py-1 text-sm font-medium transition ${liked.has(p.id) ? 'text-pink-300' : 'text-white'}`}
+                  className={cn(
+                    'flex items-center gap-1 rounded-full border border-white/40 bg-black/40 px-3 py-1 text-sm font-medium text-white transition backdrop-blur',
+                    liked.has(p.id) ? 'text-pink-300' : 'text-white'
+                  )}
                   aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
                 >
                   <Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
@@ -319,6 +414,79 @@ export default function GalleryPage() {
           token={token}
         />
       )}
+
+      {shareSheet.photo && (
+        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
+            <div className="mb-3 flex items-center justify-between">
+              <div>
+                <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                  {t('share.title', 'Geteiltes Foto')}
+                </p>
+                <p className="text-sm font-semibold text-foreground">#{shareSheet.photo.id}</p>
+              </div>
+              <button
+                type="button"
+                className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
+                onClick={closeShareSheet}
+              >
+                {t('lightbox.close', 'Schließen')}
+              </button>
+            </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => shareNative(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Share2 className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.button', 'Teilen')}</div>
+                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
+                  onClick={() => shareWhatsApp(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <WhatsAppIcon className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
+                  onClick={() => shareMessages(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <MessageSquare className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.imessage', 'Nachrichten')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => copyLink(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Copy className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.copyLink', 'Link kopieren')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
+                  </div>
+                </button>
+              </div>
+          </div>
+        </div>
+      )}
     </Page>
   );
 }

resources/js/guest/pages/PhotoLightbox.tsx

@@ -2,10 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Heart, ChevronLeft, ChevronRight, X, Share2 } from 'lucide-react';
+import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
-import { likePhoto } from '../services/photosApi';
+import { likePhoto, createPhotoShareLink } from '../services/photosApi';
 import { useTranslation } from '../i18n/useTranslation';
-import { sharePhotoLink } from '../lib/sharePhoto';
 import { useToast } from '../components/ToastHost';
 
 type Photo = {
@@ -42,7 +41,10 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
   const [taskLoading, setTaskLoading] = useState(false);
   const [likes, setLikes] = useState<number>(0);
   const [liked, setLiked] = useState(false);
-  const [shareLoading, setShareLoading] = useState(false);
+  const [shareSheet, setShareSheet] = useState<{ url: string | null; loading: boolean }>({
+    url: null,
+    loading: false,
+  });
 
   // Determine mode and photo
   const isStandalone = !photos || photos.length === 0;
@@ -209,30 +211,61 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
     }
   }
 
-  async function onShare() {
+  const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
-    if (!photo || !eventToken) return;
+  const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });
-    setShareLoading(true);
-    try {
-      const result = await sharePhotoLink({
-        token: eventToken,
-        photoId: photo.id,
-        title: photo.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto'),
-        text: t('share.shareText', { event: '' }),
-      });
 
-      if (result.method === 'clipboard') {
+  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
-        toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
-      } else if (result.method === 'manual') {
+      <path
-        window.prompt(t('share.manualPrompt', 'Link kopieren'), result.url);
+        fill="currentColor"
-      }
+        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
+      />
+    </svg>
+  );
+
+  async function openShareSheet() {
+    if (!photo || !eventToken) return;
+    setShareSheet({ url: null, loading: true });
+    try {
+      const payload = await createPhotoShareLink(eventToken, photo.id);
+      setShareSheet({ url: payload.url, loading: false });
     } catch (error) {
       console.error('share failed', error);
       toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
-    } finally {
+      setShareSheet({ url: null, loading: false });
-      setShareLoading(false);
     }
   }
 
+  function shareWhatsApp(url?: string | null) {
+    if (!url) return;
+    const waUrl = `https://wa.me/?text=${encodeURIComponent(`${shareText} ${url}`)}`;
+    window.open(waUrl, '_blank', 'noopener');
+    setShareSheet({ url: null, loading: false });
+  }
+
+  function shareMessages(url?: string | null) {
+    if (!url) return;
+    const smsUrl = `sms:?&body=${encodeURIComponent(`${shareText} ${url}`)}`;
+    window.open(smsUrl, '_blank', 'noopener');
+    setShareSheet({ url: null, loading: false });
+  }
+
+  async function copyLink(url?: string | null) {
+    if (!url) return;
+    try {
+      await navigator.clipboard?.writeText(url);
+      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    } catch {
+      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
+    } finally {
+      setShareSheet({ url: null, loading: false });
+    }
+  }
+
+  function closeShareSheet() {
+    setShareSheet({ url: null, loading: false });
+  }
+
   function onOpenChange(open: boolean) {
     if (!open) handleClose();
   }
@@ -255,8 +288,8 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
             <Button
               variant="secondary"
               size="sm"
-              onClick={onShare}
+              onClick={openShareSheet}
-              disabled={shareLoading || !eventToken || !photo}
+              disabled={!eventToken || !photo}
             >
               <Share2 className="mr-1 h-4 w-4" />
               {t('share.button', 'Teilen')}
@@ -341,6 +374,92 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
             </div>
           </div>
         )}
+
+        {(shareSheet.url !== null || shareSheet.loading) && (
+          <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+            <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
+              <div className="mb-3 flex items-center justify-between">
+                <div>
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                    {t('share.title', 'Geteiltes Foto')}
+                  </p>
+                  <p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
+                </div>
+                <button
+                  type="button"
+                  className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
+                  onClick={closeShareSheet}
+                >
+                  {t('lightbox.close', 'Schließen')}
+                </button>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => {
+                    if (!shareSheet.url) return;
+                    const data: ShareData = {
+                      title: shareTitle,
+                      text: shareText,
+                      url: shareSheet.url,
+                    };
+                    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
+                      navigator.share(data).catch(() => {});
+                      setShareSheet({ url: null, loading: false });
+                    } else {
+                      void copyLink(shareSheet.url);
+                    }
+                  }}
+                  disabled={shareSheet.loading}
+                >
+                  <Share2 className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.button', 'Teilen')}</div>
+                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
+                  onClick={() => shareWhatsApp(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <WhatsAppIcon className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
+                  onClick={() => shareMessages(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <MessageSquare className="h-5 w-5" />
+                  <div>
+                    <div>{t('share.imessage', 'Nachrichten')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
+                  onClick={() => copyLink(shareSheet.url)}
+                  disabled={shareSheet.loading}
+                >
+                  <Copy className="h-4 w-4" />
+                  <div>
+                    <div>{t('share.copyLink', 'Link kopieren')}</div>
+                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </DialogContent>
     </Dialog>
   );

resources/js/guest/pages/UploadPage.tsx

@@ -279,7 +279,7 @@ const [canUpload, setCanUpload] = useState(true);
 
   // Check upload limits
   useEffect(() => {
-    if (!eventKey || !task) return;
+    if (!eventKey) return;
 
     const checkLimits = async () => {
       try {
@@ -326,7 +326,7 @@ const [canUpload, setCanUpload] = useState(true);
     };
 
     checkLimits();
-  }, [eventKey, task, t]);
+  }, [eventKey, t]);
 
   const stopStream = useCallback(() => {
     if (streamRef.current) {
@@ -542,19 +542,19 @@ const [canUpload, setCanUpload] = useState(true);
 
   const navigateAfterUpload = useCallback(
     (photoId: number | undefined) => {
-      if (!eventKey || !task) return;
+      if (!eventKey) return;
       const params = new URLSearchParams();
       params.set('uploaded', 'true');
-      if (task.id) params.set('task', String(task.id));
+      if (task?.id) params.set('task', String(task.id));
       if (photoId) params.set('photo', String(photoId));
       if (emotionSlug) params.set('emotion', emotionSlug);
       navigate(`/e/${encodeURIComponent(eventKey)}/gallery?${params.toString()}`);
     },
-    [emotionSlug, navigate, eventKey, task]
+    [emotionSlug, navigate, eventKey, task?.id]
   );
 
   const handleUsePhoto = useCallback(async () => {
-    if (!eventKey || !reviewPhoto || !task || !canUpload) return;
+    if (!eventKey || !reviewPhoto || !canUpload) return;
     setMode('uploading');
     setUploadProgress(2);
     setUploadError(null);

resources/js/guest/polling/usePollGalleryDelta.ts

@@ -64,17 +64,22 @@ export function usePollGalleryDelta(token: string, locale: LocaleCode) {
       
       if (newPhotos.length > 0) {
         const added = newPhotos.length;
+        const hasBaseline = latestAt.current !== null;
 
-        if (latestAt.current) {
+        setPhotos((prev) => {
-          // Delta mode: Add new photos to existing list
+          if (hasBaseline) {
-          const merged = [...newPhotos, ...photos];
+            // Delta mode: merge new photos with existing list by id
-          const byId = new Map<number, Photo>();
+            const merged = [...newPhotos, ...prev];
-          merged.forEach((photo) => byId.set(photo.id, photo));
+            const byId = new Map<number, Photo>();
-          setPhotos(Array.from(byId.values()));
+            merged.forEach((photo) => byId.set(photo.id, photo));
-          if (added > 0) setNewCount((c) => c + added);
+            return Array.from(byId.values());
-        } else {
+          }
-          // Initial load: Set all photos
+
-          setPhotos(newPhotos);
+          return newPhotos;
+        });
+
+        if (hasBaseline && added > 0) {
+          setNewCount((c) => c + added);
         }
         
         // Update latest timestamp
@@ -103,7 +108,7 @@ export function usePollGalleryDelta(token: string, locale: LocaleCode) {
       setLoading(false);
       // Don't update state on error - keep previous photos
     }
-  }, [locale, photos, token]);
+  }, [locale, token]);
 
   useEffect(() => {
     const onVis = () => setVisible(document.visibilityState === 'visible');

resources/js/guest/router.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { createBrowserRouter, Outlet, useParams, Link } from 'react-router-dom';
+import { createBrowserRouter, Outlet, useParams, Link, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import BottomNav from './components/BottomNav';
 import { useEventData } from './hooks/useEventData';
 import { AlertTriangle, Loader2 } from 'lucide-react';
 import { EventStatsProvider } from './context/EventStatsContext';
-import { GuestIdentityProvider } from './context/GuestIdentityContext';
+import { GuestIdentityProvider, useOptionalGuestIdentity } from './context/GuestIdentityContext';
 import { EventBrandingProvider } from './context/EventBrandingContext';
 import { LocaleProvider } from './i18n/LocaleContext';
 import { DEFAULT_LOCALE, isLocaleCode } from './i18n/messages';
@@ -92,6 +92,7 @@ export const router = createBrowserRouter([
 ]);
 
 function EventBoundary({ token }: { token: string }) {
+  const identity = useOptionalGuestIdentity();
   const { event, status, error, errorCode } = useEventData();
 
   if (status === 'loading') {
@@ -102,6 +103,10 @@ function EventBoundary({ token }: { token: string }) {
     return <EventErrorView code={errorCode} message={error} />;
   }
 
+  if (identity?.hydrated && !identity.name) {
+    return <Navigate to={`/setup/${encodeURIComponent(token)}`} replace />;
+  }
+
   const eventLocale = isLocaleCode(event.default_locale) ? event.default_locale : DEFAULT_LOCALE;
   const localeStorageKey = `guestLocale_event_${event.id ?? token}`;
   const branding = mapEventBranding(event.branding);

resources/js/guest/services/eventApi.ts

@@ -16,6 +16,7 @@ export interface EventData {
   created_at: string;
   updated_at: string;
   join_token?: string | null;
+  photobooth_enabled?: boolean | null;
   type?: {
     slug: string;
     name: string;

resources/js/layouts/app/Footer.tsx

@@ -20,7 +20,7 @@ const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="mt-auto border-t border-gray-200 bg-white">
+    <footer className="mt-auto border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
           <div>
@@ -30,7 +30,7 @@ const Footer: React.FC = () => {
                 <Link href={links.home} className="font-display text-2xl font-bold text-pink-500">
                   Die Fotospiel App
                 </Link>
-                <p className="mt-2 font-sans-marketing text-gray-600">
+                <p className="mt-2 font-sans-marketing text-gray-600 dark:text-gray-300">
                   {t('marketing:footer.company', 'S.E.B. Fotografie')}
                 </p>
               </div>
@@ -38,27 +38,27 @@ const Footer: React.FC = () => {
           </div>
 
           <div>
-            <h3 className="font-display mb-4 font-semibold text-gray-900">
+            <h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
               {t('legal:headline', 'Rechtliches')}
             </h3>
-            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600">
+            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
               <li>
-                <Link href={links.impressum} className="transition-colors hover:text-pink-500">
+                <Link href={links.impressum} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                   {t('legal:impressum')}
                 </Link>
               </li>
               <li>
-                <Link href={links.datenschutz} className="transition-colors hover:text-pink-500">
+                <Link href={links.datenschutz} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                   {t('legal:datenschutz')}
                 </Link>
               </li>
               <li>
-                <Link href={links.agb} className="transition-colors hover:text-pink-500">
+                <Link href={links.agb} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                   {t('legal:agb')}
                 </Link>
               </li>
               <li>
-                <Link href={links.kontakt} className="transition-colors hover:text-pink-500">
+                <Link href={links.kontakt} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
                   {t('marketing:nav.contact')}
                 </Link>
               </li>
@@ -66,7 +66,7 @@ const Footer: React.FC = () => {
                 <button
                   type="button"
                   onClick={openPreferences}
-                  className="transition-colors hover:text-pink-500"
+                  className="transition-colors hover:text-pink-500 dark:hover:text-pink-300"
                 >
                   {t('common:consent.footer.manage_link')}
                 </button>
@@ -75,18 +75,18 @@ const Footer: React.FC = () => {
           </div>
 
           <div>
-            <h3 className="font-display mb-4 font-semibold text-gray-900">
+            <h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
               {t('marketing:footer.social', 'Social')}
             </h3>
-            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600">
+            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
-              <li><a href="#" className="hover:text-pink-500">Instagram</a></li>
+              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Instagram</a></li>
-              <li><a href="#" className="hover:text-pink-500">Facebook</a></li>
+              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Facebook</a></li>
-              <li><a href="#" className="hover:text-pink-500">YouTube</a></li>
+              <li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">YouTube</a></li>
             </ul>
           </div>
         </div>
 
-        <div className="font-sans-marketing mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500">
+        <div className="font-sans-marketing mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500 dark:border-gray-800 dark:text-gray-400">
           &copy; {currentYear} Die Fotospiel App – {t('marketing:footer.rights_reserved', 'Alle Rechte vorbehalten')}.
         </div>
       </div>

resources/js/layouts/mainWebsite.tsx

@@ -167,12 +167,12 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
         ))}
       </Head>
       <MatomoTracker config={analytics?.matomo} />
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 transition-colors">
-        <header className="sticky top-0 z-40 border-b border-gray-200/60 bg-white/95 backdrop-blur">
+        <header className="sticky top-0 z-40 border-b border-gray-200/60 bg-white/95 backdrop-blur dark:border-gray-800/60 dark:bg-gray-900/80">
           <div className="container mx-auto flex items-center justify-between px-4 py-4">
             <Link
               href={localizedPath('/')}
-              className="flex items-center gap-3 text-gray-900"
+              className="flex items-center gap-3 text-gray-900 dark:text-gray-50"
               onClick={() => setMobileMenuOpen(false)}
             >
               <img src="/logo-transparent-md.png" alt="Fotospiel App Logo" className="h-10 w-auto" />
@@ -184,10 +184,10 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
               {navLinks.map((item) => (
                 item.children ? (
                   <div key={item.key} className="relative group">
-                    <span className="inline-flex cursor-default items-center gap-1 text-md font-md text-gray-700 transition-colors group-hover:text-pink-600 font-sans-marketing">
+                    <span className="inline-flex cursor-default items-center gap-1 text-md font-md text-gray-700 transition-colors group-hover:text-pink-600 dark:text-gray-200 dark:group-hover:text-pink-300 font-sans-marketing">
                       {item.label}
                       <svg
-                        className="h-4 w-4 text-gray-400 transition group-hover:text-pink-500"
+                        className="h-4 w-4 text-gray-400 transition group-hover:text-pink-500 dark:text-gray-500"
                         viewBox="0 0 20 20"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -196,12 +196,12 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                         <path d="M6 8L10 12L14 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                       </svg>
                     </span>
-                    <div className="absolute left-0 top-full hidden min-w-[220px] flex-col gap-1 rounded-xl border border-gray-100 bg-white p-3 text-sm shadow-xl shadow-rose-200/50 transition group-hover:flex group-focus-within:flex">
+                    <div className="absolute left-0 top-full hidden min-w-[220px] flex-col gap-1 rounded-xl border border-gray-100 bg-white p-3 text-sm shadow-xl shadow-rose-200/50 transition group-hover:flex group-focus-within:flex dark:border-gray-800 dark:bg-gray-900">
                       {item.children.map((child) => (
                         <Link
                           key={child.key}
                           href={child.href}
-                          className="rounded-lg px-3 py-2 font-medium text-gray-600 transition hover:bg-rose-50 hover:text-pink-600 font-sans-marketing"
+                          className="rounded-lg px-3 py-2 font-medium text-gray-600 transition hover:bg-rose-50 hover:text-pink-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:hover:text-pink-300 font-sans-marketing"
                           onClick={() => setMobileMenuOpen(false)}
                         >
                           {child.label}
@@ -213,7 +213,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                     <Link
                       key={item.key}
                       href={item.href}
-                      className="text-md font-md text-gray-700 transition hover:text-pink-600 font-sans-marketing"
+                      className="text-md font-md text-gray-700 transition hover:text-pink-600 dark:text-gray-100 dark:hover:text-pink-300 font-sans-marketing"
                       onClick={() => setMobileMenuOpen(false)}
                     >
                     {item.label}
@@ -235,14 +235,14 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                   <Button
                     variant="outline"
                     size="icon"
-                    className="rounded-full border-gray-200 text-gray-600 transition hover:border-pink-200 hover:text-pink-500"
+                    className="rounded-full border-gray-200 text-gray-600 transition hover:border-pink-200 hover:text-pink-500 dark:border-gray-700 dark:text-gray-200 dark:hover:border-pink-400 dark:hover:text-pink-300"
                   >
                     <MoreHorizontal className="h-4 w-4" />
                     <span className="sr-only">{t('nav.preferences', 'Einstellungen')}</span>
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-56 space-y-1 p-2">
+                <DropdownMenuContent align="end" className="w-56 space-y-1 p-2 dark:border-gray-800 dark:bg-gray-900">
-                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                     {t('nav.preferences', 'Einstellungen')}
                   </DropdownMenuLabel>
                   <DropdownMenuItem
@@ -250,13 +250,13 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                       event.preventDefault();
                       toggleTheme();
                     }}
-                    className="flex items-center gap-2 font-sans-marketing"
+                    className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                   >
                     {themeIsDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                     <span>{themeLabel}</span>
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                     {t('nav.language', 'Sprache')}
                   </DropdownMenuLabel>
                   <DropdownMenuRadioGroup value={activeLocale} onValueChange={handleLocaleChange}>
@@ -264,7 +264,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                       <DropdownMenuRadioItem
                         key={code}
                         value={code}
-                        className="flex items-center gap-2 font-sans-marketing"
+                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                       >
                         <Languages className="h-4 w-4" />
                         <span>{code.toUpperCase()}</span>
@@ -274,7 +274,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                   <DropdownMenuSeparator />
                   {user ? (
                     <>
-                      <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                      <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                         {user.name ?? user.email}
                       </DropdownMenuLabel>
                       <DropdownMenuItem
@@ -282,7 +282,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                           event.preventDefault();
                           router.visit('/event-admin');
                         }}
-                        className="flex items-center gap-2 font-sans-marketing"
+                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                       >
                         <LayoutDashboard className="h-4 w-4" />
                         <span>{t('nav.dashboard', 'Zum Admin-Bereich')}</span>
@@ -292,7 +292,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                           event.preventDefault();
                           handleLogout();
                         }}
-                        className="flex items-center gap-2 font-sans-marketing"
+                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                       >
                         <LogOut className="h-4 w-4" />
                         <span>{t('nav.logout', 'Abmelden')}</span>
@@ -305,7 +305,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                           event.preventDefault();
                           router.visit(localizedPath('/login'));
                         }}
-                        className="flex items-center gap-2 font-sans-marketing"
+                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                       >
                         <LogIn className="h-4 w-4" />
                         <span>{t('nav.login', 'Anmelden')}</span>
@@ -316,7 +316,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
               </DropdownMenu>
               <button
                 type="button"
-                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm md:hidden"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm transition md:hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
                 onClick={() => setMobileMenuOpen((open) => !open)}
                 aria-label={mobileMenuOpen ? t('nav.close_menu', 'Menü schließen') : t('nav.open_menu', 'Menü öffnen')}
               >
@@ -333,18 +333,18 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
             </div>
           </div>
           {mobileMenuOpen && (
-            <div className="border-t border-gray-200 bg-white md:hidden">
+            <div className="border-t border-gray-200 bg-white md:hidden dark:border-gray-800 dark:bg-gray-900">
               <div className="container mx-auto space-y-4 px-4 py-4">
                 {navLinks.map((item) => (
                   item.children ? (
                     <div key={item.key} className="space-y-2">
-                      <p className="text-sm font-semibold text-gray-500">{item.label}</p>
+                      <p className="text-sm font-semibold text-gray-500 dark:text-gray-300">{item.label}</p>
                       <div className="flex flex-col gap-2">
                         {item.children.map((child) => (
                           <Link
                             key={child.key}
                             href={child.href}
-                            className="rounded-lg border border-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600"
+                            className="rounded-lg border border-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-pink-400 dark:hover:bg-gray-800 dark:hover:text-pink-300"
                             onClick={() => setMobileMenuOpen(false)}
                           >
                             {child.label}
@@ -356,7 +356,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                     <Link
                       key={item.key}
                       href={item.href}
-                      className="block rounded-lg border border-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 font-sans-marketing"
+                      className="block rounded-lg border border-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-pink-400 dark:hover:bg-gray-800 dark:hover:text-pink-300 font-sans-marketing"
                       onClick={() => setMobileMenuOpen(false)}
                     >
                       {item.label}
@@ -381,7 +381,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
                     id="marketing-language-select-mobile"
                     value={activeLocale}
                     onChange={(event) => handleLocaleChange(event.target.value)}
-                    className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm focus:border-pink-400 focus:outline-none focus:ring focus:ring-pink-200"
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm focus:border-pink-400 focus:outline-none focus:ring focus:ring-pink-200 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-pink-400 dark:focus:ring-pink-300"
                   >
                     {supportedLocales.map((code) => (
                       <option key={code} value={code}>

resources/js/pages/marketing/Blog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Head, Link, usePage } from '@inertiajs/react';
 import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import { useTranslation } from 'react-i18next';

resources/js/pages/marketing/BlogShow.tsx

@@ -133,7 +133,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                 {t('breadcrumb_blog')}
               </Link>
               <span>/</span>
-              <span className="text-gray-700 dark:text-gray-200">{post.title}</span>
+              <span className="text-gray-700 dark:text-gray-100">{post.title}</span>
             </nav>
             <Link href={localizedPath('/blog')} className="text-pink-600 hover:text-pink-700">
               {t('back_to_blog')}
@@ -156,7 +156,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                   <MarkdownPreview
                     html={post.excerpt_html}
                     fallback={post.excerpt}
-                    className="text-base leading-relaxed text-gray-700 dark:text-gray-200"
+                    className="text-base leading-relaxed text-gray-700 dark:text-gray-100"
                   />
                 </div>
                 <div className="relative">
@@ -193,7 +193,11 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                         prose-pre:bg-slate-900 prose-pre:text-slate-100
                         prose-blockquote:border-l-4 prose-blockquote:border-pink-500 prose-blockquote:pl-6 prose-blockquote:italic
                         prose-ul:text-slate-700 prose-ol:text-slate-700
-                        prose-li:text-slate-700 dark:prose-invert"
+                        prose-li:text-slate-700
+                        dark:prose-invert dark:prose-headings:text-gray-50 dark:prose-p:text-gray-100
+                        dark:prose-strong:text-gray-50 dark:prose-a:text-pink-300 dark:hover:prose-a:text-pink-200
+                        dark:prose-code:bg-gray-800 dark:prose-code:text-gray-100 dark:prose-pre:bg-gray-900 dark:prose-pre:text-gray-100
+                        dark:prose-li:text-gray-100 dark:prose-blockquote:border-pink-400"
               dangerouslySetInnerHTML={{ __html: post.content_html }}
             />
           </article>
@@ -207,7 +211,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                 <MarkdownPreview
                   html={post.excerpt_html}
                   fallback={post.excerpt}
-                  className="text-base leading-relaxed text-gray-700 dark:text-gray-200"
+                  className="text-base leading-relaxed text-gray-700 dark:text-gray-100"
                 />
               </CardContent>
             </Card>
@@ -218,7 +222,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                   {t('toc_title')}
                 </p>
                 {post.headings && post.headings.length > 0 ? (
-                  <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-200">
+                  <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-100">
                     {post.headings.map((heading) => (
                       <li key={heading.slug} className="border-l-2 border-pink-100 pl-3 dark:border-pink-500/40">
                         <a href={`#${heading.slug}`} className="hover:text-pink-600">
@@ -269,7 +273,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
                 <Separator className="my-2" />
                 <div className="flex flex-col gap-2">
                   {shareLinks.map((link) => (
-                    <Button key={link.key} variant="outline" size="sm" asChild className="justify-start border-gray-200 text-gray-700 hover:border-pink-200 hover:text-pink-600 dark:border-gray-700 dark:text-gray-50">
+                    <Button key={link.key} variant="outline" size="sm" asChild className="justify-start border-gray-200 text-gray-700 hover:border-pink-200 hover:text-pink-600 dark:border-gray-700 dark:text-gray-100">
                       <a href={link.href} target="_blank" rel="noreferrer">
                         {link.label}
                       </a>

resources/js/pages/marketing/CheckoutWizardPage.tsx

@@ -66,7 +66,7 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
   return (
     <MarketingLayout title="Checkout Wizard">
       <Head title="Checkout Wizard" />
-      <div className="min-h-screen bg-muted/20 py-12">
+      <div className="min-h-screen bg-muted/20 py-12 dark:bg-gray-950 dark:text-gray-50">
         <div className="mx-auto w-full max-w-4xl px-4">
           {verificationFlash && (
             <Alert

resources/js/pages/marketing/Home.tsx

@@ -10,7 +10,8 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
-import { ArrowRight, Camera, QrCode, ShieldCheck, Sparkles, Smartphone } from 'lucide-react';
+import { ArrowRight, Camera, QrCode, ShieldCheck, Sparkles, Smartphone, Loader2, CheckCircle2 } from 'lucide-react';
+import { usePage } from '@inertiajs/react';
 
 interface Package {
   id: number;
@@ -34,10 +35,12 @@ const Home: React.FC<Props> = ({ packages }) => {
     variant: heroCtaVariant,
     trackClick: trackHeroCtaClick,
   } = useCtaExperiment('home_hero_cta');
+  const { flash } = usePage<{ flash?: { success?: string } }>().props;
   const { data, setData, post, processing, errors, reset } = useForm({
     name: '',
     email: '',
     message: '',
+    nickname: '',
   });
 
   const heroBulletsRaw = t('home.hero_bullets', { returnObjects: true });
@@ -447,14 +450,54 @@ const Home: React.FC<Props> = ({ packages }) => {
       <section id="contact" className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
         <div className="container mx-auto max-w-4xl">
           <Card className="border-gray-200/70 bg-white/95 shadow-lg shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80">
-            <CardHeader className="text-center">
+              <CardHeader className="text-center">
-              <Badge className="mx-auto mb-3 w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
+                <Badge className="mx-auto mb-3 w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
-                {t('home.contact_title')}
+                  {t('home.contact_title')}
-              </Badge>
+                </Badge>
-              <CardTitle className="text-2xl md:text-3xl">{t('home.contact_lead')}</CardTitle>
+                <CardTitle className="text-2xl md:text-3xl">{t('home.contact_lead')}</CardTitle>
-            </CardHeader>
+              </CardHeader>
-            <CardContent>
+              <CardContent>
-              <form onSubmit={handleSubmit} className="space-y-6">
+                {flash?.success ? (
+                  <div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200/70 bg-emerald-50 px-3 py-2 text-sm text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-100">
+                    <CheckCircle2 className="h-4 w-4" />
+                    <span>{flash.success}</span>
+                  </div>
+                ) : null}
+                <div className="grid gap-6 lg:grid-cols-[1fr,1.1fr]">
+                  <div className="space-y-3 rounded-2xl border border-rose-100/70 bg-rose-50/50 p-5 text-left text-sm text-slate-700 shadow-inner dark:border-rose-500/20 dark:bg-rose-500/5 dark:text-slate-200">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-rose-500 dark:text-rose-200">
+                      {t('home.contact_title')}
+                    </p>
+                    <p className="text-base font-semibold text-slate-900 dark:text-white">{t('home.contact_lead')}</p>
+                    <ul className="space-y-2">
+                      <li className="flex items-start gap-3">
+                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
+                        <span>{t('home.hero_bullets.0', 'Antwort in <24h')}</span>
+                      </li>
+                      <li className="flex items-start gap-3">
+                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
+                        <span>{t('home.hero_bullets.1', 'Keine Weitergabe, kein Tracking')}</span>
+                      </li>
+                      <li className="flex items-start gap-3">
+                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
+                        <span>{t('home.contact_privacy')}</span>
+                      </li>
+                    </ul>
+                    <div className="rounded-xl border border-white/60 bg-white/80 p-3 text-xs font-medium text-slate-700 shadow-sm dark:border-white/10 dark:bg-white/10 dark:text-slate-100">
+                      {t('home.contact_privacy')}
+                    </div>
+                  </div>
+                  <form onSubmit={handleSubmit} className="space-y-6">
+                  <input
+                    type="text"
+                    name="nickname"
+                    value={data.nickname}
+                  onChange={(event) => setData('nickname', event.target.value)}
+                  className="hidden"
+                  tabIndex={-1}
+                  autoComplete="off"
+                  aria-hidden
+                />
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="flex flex-col gap-2">
                     <label htmlFor="name" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
@@ -467,9 +510,11 @@ const Home: React.FC<Props> = ({ packages }) => {
                       className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
                       autoComplete="name"
                       required
+                      aria-invalid={Boolean(errors.name)}
+                      aria-describedby={errors.name ? 'contact-name-error' : undefined}
                     />
                     {errors.name && (
-                      <p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.name}</p>
+                      <p id="contact-name-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.name}</p>
                     )}
                   </div>
                   <div className="flex flex-col gap-2">
@@ -484,9 +529,11 @@ const Home: React.FC<Props> = ({ packages }) => {
                       className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
                       autoComplete="email"
                       required
+                      aria-invalid={Boolean(errors.email)}
+                      aria-describedby={errors.email ? 'contact-email-error' : undefined}
                     />
                     {errors.email && (
-                      <p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.email}</p>
+                      <p id="contact-email-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.email}</p>
                     )}
                   </div>
                 </div>
@@ -494,31 +541,41 @@ const Home: React.FC<Props> = ({ packages }) => {
                   <label htmlFor="message" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
                     {t('home.message_label')} *
                   </label>
-                  <Textarea
+                    <Textarea
-                    id="message"
+                      id="message"
-                    rows={5}
+                      rows={5}
-                    value={data.message}
+                      value={data.message}
-                    onChange={(event) => setData('message', event.target.value)}
+                      onChange={(event) => setData('message', event.target.value)}
-                    className="rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
+                      className="rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
-                    required
+                      required
-                  />
+                      aria-invalid={Boolean(errors.message)}
-                  {errors.message && (
+                      aria-describedby={errors.message ? 'contact-message-error' : undefined}
-                    <p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.message}</p>
+                    />
-                  )}
+                    {errors.message && (
+                      <p id="contact-message-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.message}</p>
+                    )}
+                  </div>
+                  <div className="space-y-3 text-sm text-muted-foreground">
+                    <p>{t('home.contact_privacy')}</p>
+                    <Button
+                      type="submit"
+                      disabled={processing}
+                      className="h-12 w-full rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5] disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                      {processing ? (
+                        <span className="flex items-center justify-center gap-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          {t('home.sending')}
+                        </span>
+                      ) : (
+                        t('home.send')
+                      )}
+                    </Button>
+                  </div>
+                </form>
                 </div>
-                <div className="space-y-3 text-sm text-muted-foreground">
+              </CardContent>
-                  <p>{t('home.contact_privacy')}</p>
+            </Card>
-                  <Button
-                    type="submit"
-                    disabled={processing}
-                    className="h-12 w-full rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5] disabled:cursor-not-allowed disabled:opacity-60"
-                  >
-                    {processing ? t('home.sending') : t('home.send')}
-                  </Button>
-                </div>
-              </form>
-            </CardContent>
-          </Card>
         </div>
       </section>
 

resources/js/pages/marketing/Kontakt.tsx

@@ -3,12 +3,14 @@ import { Head, Link, useForm, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import MarketingLayout from '@/layouts/mainWebsite';
+import { Loader2, CheckCircle2 } from 'lucide-react';
 
 const Kontakt: React.FC = () => {
   const { data, setData, post, processing, errors, reset } = useForm({
     name: '',
     email: '',
     message: '',
+    nickname: '',
   });
 
   const { flash } = usePage<{ flash?: { success?: string } }>().props;
@@ -35,7 +37,23 @@ const Kontakt: React.FC = () => {
         <div className="max-w-2xl mx-auto">
           <h1 className="text-3xl font-bold text-center mb-8 font-display text-gray-900 dark:text-gray-100">{t('kontakt.title')}</h1>
           <p className="text-center text-gray-600 dark:text-gray-300 mb-8 font-sans-marketing">{t('kontakt.description')}</p>
+          {flash?.success && (
+            <div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200/70 bg-emerald-50 px-3 py-2 text-sm text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-100">
+              <CheckCircle2 className="h-4 w-4" />
+              <span>{flash.success}</span>
+            </div>
+          )}
           <form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
+            <input
+              type="text"
+              name="nickname"
+              value={data.nickname}
+              onChange={(e) => setData('nickname', e.target.value)}
+              className="hidden"
+              tabIndex={-1}
+              autoComplete="off"
+              aria-hidden
+            />
             <div>
               <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.name')}</label>
               <input
@@ -45,8 +63,10 @@ const Kontakt: React.FC = () => {
                 onChange={(e) => setData('name', e.target.value)}
                 required
                 className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                aria-invalid={Boolean(errors.name)}
+                aria-describedby={errors.name ? 'kontakt-name-error' : undefined}
               />
-              {errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
+              {errors.name && <p id="kontakt-name-error" key="error-name" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
             </div>
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.email')}</label>
@@ -57,8 +77,10 @@ const Kontakt: React.FC = () => {
                 onChange={(e) => setData('email', e.target.value)}
                 required
                 className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                aria-invalid={Boolean(errors.email)}
+                aria-describedby={errors.email ? 'kontakt-email-error' : undefined}
               />
-              {errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
+              {errors.email && <p id="kontakt-email-error" key="error-email" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
             </div>
             <div>
               <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.message')}</label>
@@ -69,11 +91,20 @@ const Kontakt: React.FC = () => {
                 rows={4}
                 required
                 className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                aria-invalid={Boolean(errors.message)}
+                aria-describedby={errors.message ? 'kontakt-message-error' : undefined}
               ></textarea>
-              {errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
+              {errors.message && <p id="kontakt-message-error" key="error-message" className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
             </div>
             <button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
-              {processing ? t('kontakt.sending') : t('kontakt.send')}
+              {processing ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {t('kontakt.sending')}
+                </span>
+              ) : (
+                t('kontakt.send')
+              )}
             </button>
           </form>
           {flash?.success && <p className="mt-4 text-green-600 dark:text-green-400 text-center font-serif-custom">{flash.success}</p>}

resources/js/pages/marketing/Packages.tsx

@@ -456,20 +456,20 @@ function selectHighlightPackageId(packages: Package[]): number | null {
 const getAccentTheme = (variant: 'endcustomer' | 'reseller') =>
   variant === 'reseller'
     ? {
-        badge: 'bg-amber-50 text-amber-700',
+        badge: 'bg-amber-50 text-amber-700 dark:bg-amber-500/20 dark:text-amber-100',
-        price: 'text-amber-600',
+        price: 'text-amber-600 dark:text-amber-100',
-        buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800',
+        buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-amber-600 dark:hover:bg-amber-500',
-        buttonDefault: 'border border-amber-200 text-amber-700 hover:bg-amber-50',
+        buttonDefault: 'border border-amber-200 text-amber-700 hover:bg-amber-50 dark:border-amber-500/50 dark:text-amber-100 dark:hover:bg-amber-500/10',
-        cardBorder: 'border border-amber-100',
+        cardBorder: 'border border-amber-100 dark:border-amber-500/40',
-        highlightShadow: 'shadow-lg shadow-amber-100/60 bg-gradient-to-br from-amber-50/70 via-white to-amber-100/60',
+        highlightShadow: 'shadow-lg shadow-amber-100/60 bg-gradient-to-br from-amber-50/70 via-white to-amber-100/60 dark:shadow-amber-900/40 dark:from-amber-900/40 dark:via-gray-900 dark:to-amber-900/20',
       }
     : {
-        badge: 'bg-rose-50 text-rose-700',
+        badge: 'bg-rose-50 text-rose-700 dark:bg-pink-500/20 dark:text-pink-100',
-        price: 'text-rose-600',
+        price: 'text-rose-600 dark:text-pink-100',
-        buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800',
+        buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-pink-600 dark:hover:bg-pink-500',
-        buttonDefault: 'border border-rose-100 text-rose-700 hover:bg-rose-50',
+        buttonDefault: 'border border-rose-100 text-rose-700 hover:bg-rose-50 dark:border-pink-500/50 dark:text-pink-100 dark:hover:bg-pink-500/10',
-        cardBorder: 'border border-rose-100',
+        cardBorder: 'border border-rose-100 dark:border-pink-500/40',
-        highlightShadow: 'shadow-lg shadow-rose-100/60 bg-gradient-to-br from-rose-50/70 via-white to-rose-100/60',
+        highlightShadow: 'shadow-lg shadow-rose-100/60 bg-gradient-to-br from-rose-50/70 via-white to-rose-100/60 dark:shadow-pink-900/40 dark:from-pink-900/40 dark:via-gray-900 dark:to-pink-900/10',
       };
 
 type PackageMetric = {
@@ -588,37 +588,37 @@ function PackageCard({
   const metricList = compact ? (
     <div className="flex flex-wrap gap-2">
       {metrics.map((metric) => (
-        <div key={metric.key} className="rounded-full border border-gray-200 px-3 py-1 text-xs font-semibold text-gray-700">
+        <div key={metric.key} className="rounded-full border border-gray-200 px-3 py-1 text-xs font-semibold text-gray-700 dark:border-gray-700 dark:text-gray-100">
-          <span className="text-[11px] font-medium uppercase text-gray-400">{metric.label}</span>
+          <span className="text-[11px] font-medium uppercase text-gray-400 dark:text-gray-400">{metric.label}</span>
-          <span className="ml-1 text-gray-900">{metric.value}</span>
+          <span className="ml-1 text-gray-900 dark:text-gray-100">{metric.value}</span>
         </div>
       ))}
     </div>
   ) : (
     <div className="grid grid-cols-2 gap-3 text-sm">
       {metrics.map((metric) => (
-        <div key={metric.key} className="rounded-xl bg-gray-50 px-4 py-3">
+        <div key={metric.key} className="rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-800">
-          <p className="text-lg font-semibold text-gray-900">{metric.value}</p>
+          <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{metric.value}</p>
-          <p className="text-xs uppercase tracking-wide text-gray-500">{metric.label}</p>
+          <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{metric.label}</p>
         </div>
       ))}
     </div>
   );
 
   const featureList = compact ? (
-    <ul className="space-y-1 text-sm text-gray-700">
+    <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
       {visibleFeatures.map((feature) => (
         <li key={feature} className="flex items-start gap-2 text-xs">
-          <Check className="mt-0.5 h-3.5 w-3.5 text-gray-900" />
+          <Check className="mt-0.5 h-3.5 w-3.5 text-gray-900 dark:text-gray-100" />
           <span>{t(`packages.feature_${feature}`)}</span>
         </li>
       ))}
     </ul>
   ) : (
-    <ul className="space-y-2 text-sm text-gray-700">
+    <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
       {visibleFeatures.map((feature) => (
         <li key={feature} className="flex items-center gap-2">
-          <Check className="h-4 w-4 text-gray-900" />
+          <Check className="h-4 w-4 text-gray-900 dark:text-gray-100" />
           <span>{t(`packages.feature_${feature}`)}</span>
         </li>
       ))}
@@ -628,14 +628,14 @@ function PackageCard({
   return (
     <Card
       className={cn(
-        'flex h-full flex-col rounded-2xl border border-gray-100 bg-white shadow-sm transition hover:shadow-lg',
+        'flex h-full flex-col rounded-2xl border border-gray-100 bg-white shadow-sm transition hover:shadow-lg dark:border-gray-800 dark:bg-gray-900 dark:text-gray-50',
         compact && 'p-3',
         highlight && `${accent.cardBorder} ${accent.highlightShadow}`,
         className,
       )}
     >
       <CardHeader className={cn('gap-4', compact && 'gap-3 p-0')}>
-        <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
+        <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-300">
           <span>{typeLabel}</span>
           {badgeLabel && (
             <span
@@ -649,8 +649,8 @@ function PackageCard({
           )}
         </div>
         <div className="space-y-2">
-          <CardTitle className="text-2xl text-gray-900">{pkg.name}</CardTitle>
+          <CardTitle className="text-2xl text-gray-900 dark:text-gray-50">{pkg.name}</CardTitle>
-          <CardDescription className="text-sm text-gray-600">{pkg.description}</CardDescription>
+          <CardDescription className="text-sm text-gray-600 dark:text-gray-200">{pkg.description}</CardDescription>
         </div>
       </CardHeader>
       <CardContent className={cn('flex flex-col gap-6', compact && 'gap-4 p-0 pt-2')}>
@@ -658,11 +658,11 @@ function PackageCard({
           <div className={cn('flex items-baseline gap-2', compact && 'flex-wrap text-balance')}>
             <span className={cn('text-4xl font-semibold', accent.price, compact && 'text-3xl')}>{priceLabel}</span>
             {pkg.price !== 0 && (
-              <span className="text-sm text-gray-500">/ {cadenceLabel}</span>
+              <span className="text-sm text-gray-500 dark:text-gray-300">/ {cadenceLabel}</span>
             )}
           </div>
           {variant === 'endcustomer' && (
-            <p className="text-xs text-gray-400">
+            <p className="text-xs text-gray-400 dark:text-gray-300">
               {pkg.events} × {t('packages.one_time')}
             </p>
           )}
@@ -722,11 +722,11 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
   return (
     <div className="grid gap-8 lg:grid-cols-[320px,1fr]">
       <div className="space-y-6">
-        <div className="rounded-2xl border border-gray-100 bg-gray-50 p-6">
+        <div className="rounded-2xl border border-gray-100 bg-gray-50 p-6 dark:border-gray-800 dark:bg-gray-900">
           <div className="flex items-start justify-between gap-3">
             <div>
-              <p className="text-sm font-medium text-gray-500">{t('packages.price')}</p>
+              <p className="text-sm font-medium text-gray-500 dark:text-gray-300">{t('packages.price')}</p>
-              <p className="text-4xl font-semibold text-gray-900">
+              <p className="text-4xl font-semibold text-gray-900 dark:text-gray-100">
                 {Number(packageData.price).toLocaleString(undefined, {
                   minimumFractionDigits: 2,
                   maximumFractionDigits: 2,
@@ -734,22 +734,22 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                 {t('packages.currency.euro')}
               </p>
               {packageData.price > 0 && (
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-gray-500 dark:text-gray-300">
                   / {variant === 'reseller' ? t('packages.billing_per_year') : t('packages.billing_per_event')}
                 </p>
               )}
             </div>
             {isHighlight && (
-              <span className="rounded-full bg-gray-900 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-white">
+              <span className="rounded-full bg-gray-900 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-white dark:bg-pink-600">
                 {variant === 'reseller' ? t('packages.badge_best_value') : t('packages.badge_most_popular')}
               </span>
             )}
           </div>
           <div className="mt-6 grid grid-cols-2 gap-3 text-sm">
             {metrics.map((metric) => (
-              <div key={metric.key} className="rounded-xl bg-white px-4 py-3 text-center shadow-sm">
+              <div key={metric.key} className="rounded-xl bg-white px-4 py-3 text-center shadow-sm dark:bg-gray-800">
-                <p className="text-lg font-semibold text-gray-900">{metric.value}</p>
+                <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{metric.value}</p>
-                <p className="text-xs uppercase tracking-wide text-gray-500">{metric.label}</p>
+                <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{metric.label}</p>
               </div>
             ))}
           </div>
@@ -767,23 +767,23 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
               <ArrowRight className="ml-2 h-4 w-4" />
             </Link>
           </Button>
-          <p className="mt-3 text-xs text-gray-500">{t('packages.order_hint')}</p>
+          <p className="mt-3 text-xs text-gray-500 dark:text-gray-400">{t('packages.order_hint')}</p>
         </div>
-        <div className="rounded-2xl border border-gray-100 bg-white p-6">
+        <div className="rounded-2xl border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
-          <h3 className="text-lg font-semibold text-gray-900">{t('packages.feature_highlights')}</h3>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('packages.feature_highlights')}</h3>
-          <ul className="mt-4 space-y-3 text-sm text-gray-700">
+          <ul className="mt-4 space-y-3 text-sm text-gray-700 dark:text-gray-200">
             {highlightFeatures.map((feature) => (
               <li key={feature} className="flex items-start gap-2">
-                <Check className="mt-1 h-4 w-4 text-gray-900" />
+                <Check className="mt-1 h-4 w-4 text-gray-900 dark:text-gray-100" />
                 <span>{t(`packages.feature_${feature}`)}</span>
               </li>
             ))}
           </ul>
         </div>
-        <div className="rounded-2xl border border-gray-100 bg-white p-6">
+        <div className="rounded-2xl border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
-          <h3 className="text-lg font-semibold text-gray-900">{t('packages.more_details_tab')}</h3>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('packages.more_details_tab')}</h3>
           <Tabs defaultValue="breakdown">
-            <TabsList className="grid grid-cols-2 rounded-full bg-gray-100 p-1 text-sm">
+            <TabsList className="grid grid-cols-2 rounded-full bg-gray-100 p-1 text-sm dark:bg-gray-800">
               <TabsTrigger value="breakdown" className="rounded-full">
                 {t('packages.breakdown_label')}
               </TabsTrigger>
@@ -795,28 +795,28 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
               {packageData.description_breakdown?.length ? (
                 <Accordion type="multiple" className="space-y-4">
                   {packageData.description_breakdown.map((entry, index) => (
-                    <AccordionItem key={index} value={`detail-${index}`} className="rounded-2xl border border-gray-100 bg-white px-4">
+                    <AccordionItem key={index} value={`detail-${index}`} className="rounded-2xl border border-gray-100 bg-white px-4 dark:border-gray-800 dark:bg-gray-900">
-                      <AccordionTrigger className="text-left text-base font-medium text-gray-900 hover:no-underline">
+                      <AccordionTrigger className="text-left text-base font-medium text-gray-900 hover:no-underline dark:text-gray-100">
                         {entry.title ?? t('packages.limits_label')}
                       </AccordionTrigger>
-                      <AccordionContent className="pb-4 text-sm text-gray-600 whitespace-pre-line">
+                      <AccordionContent className="pb-4 text-sm text-gray-600 whitespace-pre-line dark:text-gray-300">
                         {entry.value}
                       </AccordionContent>
                     </AccordionItem>
                   ))}
                 </Accordion>
               ) : (
-                <p className="text-sm text-gray-500">{t('packages.breakdown_label_hint')}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">{t('packages.breakdown_label_hint')}</p>
               )}
             </TabsContent>
             <TabsContent value="testimonials" className="mt-6">
               <div className="space-y-4">
                 {testimonials.map((testimonial, index) => (
-                  <div key={index} className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+                  <div key={index} className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                     <div className="flex items-center justify-between">
                       <div>
-                        <p className="text-sm font-semibold text-gray-900">{testimonial.name}</p>
+                        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{testimonial.name}</p>
-                        <p className="text-xs text-gray-500">{packageData.name}</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">{packageData.name}</p>
                       </div>
                       <div className="flex gap-1 text-amber-400">
                         {[...Array(testimonial.rating)].map((_, i) => (
@@ -824,10 +824,10 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                         ))}
                       </div>
                     </div>
-                    <p className="mt-3 text-sm text-gray-600">“{testimonial.text}”</p>
+                    <p className="mt-3 text-sm text-gray-600 dark:text-gray-300">“{testimonial.text}”</p>
                   </div>
                 ))}
-                <Button variant="outline" className="w-full rounded-full border-gray-200 text-sm font-medium text-gray-700" onClick={close}>
+                <Button variant="outline" className="w-full rounded-full border-gray-200 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-100" onClick={close}>
                   {t('packages.close')}
                 </Button>
               </div>
@@ -1022,7 +1022,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetContent
               side="bottom"
-              className="h-[90vh] overflow-hidden rounded-t-[32px] border border-gray-200 bg-white p-0"
+              className="h-[90vh] overflow-hidden rounded-t-[32px] border border-gray-200 bg-white p-0 dark:border-gray-800 dark:bg-gray-900"
               onOpenAutoFocus={handleDetailAutoFocus}
             >
               {renderDetailBody('h-full overflow-y-auto space-y-8 p-6')}
@@ -1031,7 +1031,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
         ) : (
           <Dialog open={open} onOpenChange={setOpen}>
             <DialogContent
-              className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px]"
+              className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px] dark:border-gray-800 dark:bg-gray-900"
               onOpenAutoFocus={handleDetailAutoFocus}
             >
               {renderDetailBody('max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10')}

resources/js/pages/marketing/checkout/steps/PackageStep.tsx

@@ -53,23 +53,23 @@ function translateDetailLabel(label: string | undefined, t: TFunction<'marketing
 function PackageSummary({ pkg, t }: { pkg: CheckoutPackage; t: TFunction<'marketing'> }) {
   const isFree = pkg.price === 0;
   const accentGradient = pkg.type === 'reseller'
-    ? 'border-amber-100 bg-gradient-to-br from-amber-50/80 via-white to-amber-100/70 shadow-lg shadow-amber-100/60'
+    ? 'border-amber-100 bg-gradient-to-br from-amber-50/80 via-white to-amber-100/70 shadow-lg shadow-amber-100/60 dark:border-amber-500/40 dark:from-amber-900/40 dark:via-gray-900 dark:to-amber-900/20 dark:shadow-amber-900/40'
-    : 'border-rose-100 bg-gradient-to-br from-rose-50/80 via-white to-rose-100/70 shadow-lg shadow-rose-100/60';
+    : 'border-rose-100 bg-gradient-to-br from-rose-50/80 via-white to-rose-100/70 shadow-lg shadow-rose-100/60 dark:border-pink-500/40 dark:from-pink-900/40 dark:via-gray-900 dark:to-pink-900/10 dark:shadow-pink-900/40';
 
   return (
-    <Card className={cn('shadow-sm transition', isFree ? 'opacity-75' : accentGradient)}>
+    <Card className={cn('shadow-sm transition dark:bg-gray-900 dark:border-gray-800', isFree ? 'opacity-80 dark:opacity-90' : accentGradient)}>
       <CardHeader className="space-y-1">
-        <CardTitle className={`flex items-center gap-3 text-2xl ${isFree ? 'text-muted-foreground' : ''}`}>
+        <CardTitle className={cn('flex items-center gap-3 text-2xl', isFree ? 'text-muted-foreground' : 'text-gray-900 dark:text-gray-50')}>
-          <PackageIcon className={`h-6 w-6 ${isFree ? 'text-muted-foreground' : 'text-primary'}`} />
+          <PackageIcon className={cn('h-6 w-6', isFree ? 'text-muted-foreground' : 'text-primary')} />
           {pkg.name}
         </CardTitle>
-        <CardDescription className="text-base text-muted-foreground">
+        <CardDescription className="text-base text-muted-foreground dark:text-gray-200">
           {pkg.description}
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
         <div className="flex items-baseline gap-2">
-          <span className={`text-3xl font-semibold ${isFree ? 'text-muted-foreground' : ''}`}>
+          <span className={cn('text-3xl font-semibold', isFree ? 'text-muted-foreground' : 'text-gray-900 dark:text-gray-50')}>
             {pkg.price === 0 ? t('packages.free') : currencyFormatter.format(pkg.price)}
           </span>
           <Badge variant={isFree ? 'outline' : 'secondary'} className="uppercase tracking-wider text-xs">
@@ -77,7 +77,7 @@ function PackageSummary({ pkg, t }: { pkg: CheckoutPackage; t: TFunction<'market
           </Badge>
         </div>
         {pkg.gallery_duration_label && (
-          <div className="rounded-md border border-dashed border-muted px-3 py-2 text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed border-muted px-3 py-2 text-sm text-muted-foreground dark:border-gray-700 dark:text-gray-200">
             {t('packages.gallery_days_label')}: {pkg.gallery_duration_label}
           </div>
         )}
@@ -88,7 +88,7 @@ function PackageSummary({ pkg, t }: { pkg: CheckoutPackage; t: TFunction<'market
             </h4>
             <div className="grid gap-3 md:grid-cols-2">
               {pkg.description_breakdown.map((row, index) => (
-                <div key={index} className="rounded-lg border border-muted/40 bg-muted/20 px-3 py-2">
+                <div key={index} className="rounded-lg border border-muted/40 bg-muted/20 px-3 py-2 dark:border-gray-700 dark:bg-gray-800/80">
                   {row.title && (
                     <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                       {translateDetailLabel(row.title, t)}
@@ -118,29 +118,29 @@ function PackageSummary({ pkg, t }: { pkg: CheckoutPackage; t: TFunction<'market
 function PackageOption({ pkg, isActive, onSelect, t }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void; t: TFunction<'marketing'> }) {
   const isFree = pkg.price === 0;
   const accentGradient = pkg.type === 'reseller'
-    ? 'border-amber-100 bg-gradient-to-r from-amber-50/70 via-white to-amber-100/60 shadow-md shadow-amber-100/60'
+    ? 'border-amber-100 bg-gradient-to-r from-amber-50/70 via-white to-amber-100/60 shadow-md shadow-amber-100/60 dark:border-amber-500/40 dark:from-amber-900/40 dark:via-gray-900 dark:to-amber-900/20 dark:shadow-amber-900/40'
-    : 'border-rose-100 bg-gradient-to-r from-rose-50/70 via-white to-rose-100/60 shadow-md shadow-rose-100/60';
+    : 'border-rose-100 bg-gradient-to-r from-rose-50/70 via-white to-rose-100/60 shadow-md shadow-rose-100/60 dark:border-pink-500/40 dark:from-pink-900/40 dark:via-gray-900 dark:to-pink-900/10 dark:shadow-pink-900/40';
 
   return (
     <button
       type="button"
       onClick={onSelect}
       className={cn(
-        'w-full rounded-md border bg-background p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
+        'w-full rounded-md border bg-background p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100',
         isActive
           ? accentGradient
           : isFree
-            ? 'border-border hover:border-primary/40 opacity-75 hover:opacity-100'
+            ? 'border-border hover:border-primary/40 opacity-75 hover:opacity-100 dark:border-gray-700 dark:hover:border-primary/50'
-            : 'border-border hover:border-primary/40',
+            : 'border-border hover:border-primary/40 dark:border-gray-700 dark:hover:border-primary/50',
       )}
     >
       <div className="flex items-center justify-between text-sm font-medium">
-        <span className={isFree ? "text-muted-foreground" : ""}>{pkg.name}</span>
+        <span className={isFree ? "text-muted-foreground" : "text-gray-900 dark:text-gray-100"}>{pkg.name}</span>
-        <span className={isFree ? "text-muted-foreground font-normal" : "text-muted-foreground"}>
+        <span className={isFree ? "text-muted-foreground font-normal" : "text-muted-foreground dark:text-gray-200"}>
           {pkg.price === 0 ? t('packages.free') : currencyFormatter.format(pkg.price)}
         </span>
       </div>
-      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{pkg.description}</p>
+      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground dark:text-gray-300">{pkg.description}</p>
     </button>
   );
 }

resources/views/legal/kontakt.blade.php

@@ -7,22 +7,43 @@
     <div class="max-w-2xl mx-auto">
         <h1 class="text-3xl font-bold text-center mb-8">Kontakt</h1>
         <p class="text-center text-gray-600 mb-8">Haben Sie Fragen? Schreiben Sie uns!</p>
-        <form method="POST" action="{{ route('kontakt.submit') }}" class="space-y-4">
+        <div class="grid gap-6 lg:grid-cols-[1fr,1.1fr]">
-            @csrf
+            <div class="space-y-3 rounded-2xl border border-rose-100 bg-rose-50/60 p-5 text-sm text-gray-700 shadow-inner">
-            <div>
+                <p class="text-xs font-semibold uppercase tracking-wide text-rose-600">Schnelle Hilfe</p>
-                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
+                <p class="text-base font-semibold text-gray-900">Wir melden uns innerhalb von 24h.</p>
-                <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                <ul class="space-y-2">
+                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Keine Weitergabe, kein Tracking.</span></li>
+                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Antwort per E-Mail mit konkreter Hilfe.</span></li>
+                    <li class="flex items-start gap-2"><span class="mt-1 h-2.5 w-2.5 rounded-full bg-rose-500"></span><span>Fotobox-/PWA-Fragen willkommen.</span></li>
+                </ul>
             </div>
-            <div>
+            <form method="POST" action="{{ route('kontakt.submit') }}" class="space-y-4">
-                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
+                @csrf
-                <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                <input type="text" name="nickname" class="hidden" tabindex="-1" autocomplete="off" aria-hidden>
-            </div>
+                <div>
-            <div>
+                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
-                <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Nachricht</label>
+                    <input type="text" id="name" name="name" required aria-invalid="@error('name') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
-                <textarea id="message" name="message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
+                    @error('name')
-            </div>
+                        <p class="text-red-500 text-sm mt-1" id="contact-name-error">{{ $message }}</p>
-            <button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
+                    @enderror
-        </form>
+                </div>
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
+                    <input type="email" id="email" name="email" required aria-invalid="@error('email') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                    @error('email')
+                        <p class="text-red-500 text-sm mt-1" id="contact-email-error">{{ $message }}</p>
+                    @enderror
+                </div>
+                <div>
+                    <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Nachricht</label>
+                    <textarea id="message" name="message" rows="4" required aria-invalid="@error('message') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
+                    @error('message')
+                        <p class="text-red-500 text-sm mt-1" id="contact-message-error">{{ $message }}</p>
+                    @enderror
+                </div>
+                <button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
+            </form>
+        </div>
         @if (session('success'))
             <p class="mt-4 text-green-600 text-center">{{ session('success') }}</p>
         @endif

resources/views/marketing.blade.php

@@ -95,17 +95,27 @@
             <h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
             <form method="POST" action="{{ route('kontakt.submit') }}" class="space-y-4">
                 @csrf
+                <input type="text" name="nickname" class="hidden" tabindex="-1" autocomplete="off" aria-hidden>
                 <div>
                     <label for="name" class="block text-sm font-medium mb-2">Name</label>
-                    <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                    <input type="text" id="name" name="name" required aria-invalid="@error('name') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                    @error('name')
+                        <p class="text-red-500 text-sm mt-1" id="contact-name-error">{{ $message }}</p>
+                    @enderror
                 </div>
                 <div>
                     <label for="email" class="block text-sm font-medium mb-2">E-Mail</label>
-                    <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                    <input type="email" id="email" name="email" required aria-invalid="@error('email') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
+                    @error('email')
+                        <p class="text-red-500 text-sm mt-1" id="contact-email-error">{{ $message }}</p>
+                    @enderror
                 </div>
                 <div>
                     <label for="message" class="block text-sm font-medium mb-2">Nachricht</label>
-                    <textarea id="message" name="message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
+                    <textarea id="message" name="message" rows="4" required aria-invalid="@error('message') true @enderror" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
+                    @error('message')
+                        <p class="text-red-500 text-sm mt-1" id="contact-message-error">{{ $message }}</p>
+                    @enderror
                 </div>
                 <button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
             </form>

routes/web.php

@@ -98,11 +98,13 @@ Route::prefix('{locale}')
         Route::get('/contact', [MarketingController::class, 'contactView'])
             ->name('marketing.contact');
         Route::post('/contact', [MarketingController::class, 'contact'])
+            ->middleware('throttle:contact-form')
             ->name('marketing.contact.submit');
 
         Route::get('/kontakt', [MarketingController::class, 'contactView'])
             ->name('kontakt');
         Route::post('/kontakt', [MarketingController::class, 'contact'])
+            ->middleware('throttle:contact-form')
             ->name('kontakt.submit');
 
         Route::get('/blog', [MarketingController::class, 'blogIndex'])->name('blog');