Expand branding controls and logo upload

resources/css/app.css

@@ -121,6 +121,7 @@
   --guest-radius: 14px;
   --guest-button-style: filled;
   --guest-link: #007aff;
+  --guest-font-scale: 1;
   --guest-font-family: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --guest-body-font: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --guest-heading-font: 'Playfair Display', 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -516,6 +517,7 @@ html.guest-theme {
     --card: var(--guest-surface);
     --popover: var(--guest-surface);
     background-color: var(--guest-background);
+    font-size: calc(16px * var(--guest-font-scale, 1));
 }
 
 html.guest-theme.dark {

resources/js/admin/i18n/locales/de/management.json

@@ -1918,10 +1918,18 @@
       "titleShort": "Branding",
       "previewTitle": "Guest-App-Vorschau",
       "previewSubtitle": "Aktuelle Farben & Schriften",
+      "previewCta": "Fotos hochladen",
       "primary": "Primärfarbe",
       "accent": "Akzentfarbe",
       "background": "Hintergrund",
       "surface": "Fläche",
+      "lockedBranding": "Branding ist in diesem Paket gesperrt.",
+      "source": "Branding-Quelle",
+      "sourceHint": "Nutze das Tenant-Branding oder überschreibe es für dieses Event.",
+      "useDefault": "Tenant",
+      "useCustom": "Event",
+      "usingDefault": "Tenant-Branding aktiv",
+      "usingCustom": "Event-Branding aktiv",
       "mode": "Theme",
       "modeLight": "Hell",
       "modeAuto": "Auto",
@@ -1936,13 +1944,37 @@
       "headingFontPlaceholder": "SF Pro Display",
       "bodyFont": "Fließtext-Schrift",
       "bodyFontPlaceholder": "SF Pro Text",
+      "fontSize": "Schriftgröße",
+      "fontSizeSmall": "S",
+      "fontSizeMedium": "M",
+      "fontSizeLarge": "L",
       "logo": "Logo",
       "logoAlt": "Logo",
+      "logoModeUpload": "Upload",
+      "logoModeEmoticon": "Emoticon",
+      "logoValue": "Emoticon",
+      "logoValuePlaceholder": "🎉",
+      "logoPosition": "Position",
+      "positionLeft": "Links",
+      "positionCenter": "Zentriert",
+      "positionRight": "Rechts",
+      "logoSize": "Größe",
+      "logoSizeSmall": "S",
+      "logoSizeMedium": "M",
+      "logoSizeLarge": "L",
       "replaceLogo": "Logo ersetzen",
       "removeLogo": "Entfernen",
-      "logoHint": "Lade ein Logo hoch, um Einladungen und QR-Poster zu branden.",
+      "logoHint": "Logo hochladen oder Emoji für den Guest-Header nutzen.",
       "uploadLogo": "Logo hochladen (max. 1 MB)",
       "logoTooLarge": "Logo muss unter 1 MB sein.",
+      "buttons": "Buttons & Links",
+      "buttonsHint": "Stil, Radius und Link-Farbe für CTAs.",
+      "buttonFilled": "Gefüllt",
+      "buttonOutline": "Outline",
+      "buttonRadius": "Radius",
+      "buttonPrimary": "Button Primär",
+      "buttonSecondary": "Button Sekundär",
+      "linkColor": "Link-Farbe",
       "save": "Branding speichern",
       "saving": "Speichere...",
       "saveSuccess": "Branding gespeichert.",

resources/js/admin/i18n/locales/en/management.json

@@ -1922,10 +1922,18 @@
       "titleShort": "Branding",
       "previewTitle": "Guest app preview",
       "previewSubtitle": "Current colors & fonts",
+      "previewCta": "Upload photos",
       "primary": "Primary",
       "accent": "Accent",
       "background": "Background",
       "surface": "Surface",
+      "lockedBranding": "Branding is locked for this package.",
+      "source": "Branding source",
+      "sourceHint": "Use tenant branding or override for this event.",
+      "useDefault": "Tenant",
+      "useCustom": "Event",
+      "usingDefault": "Tenant branding active",
+      "usingCustom": "Event branding active",
       "mode": "Theme",
       "modeLight": "Light",
       "modeAuto": "Auto",
@@ -1940,13 +1948,37 @@
       "headingFontPlaceholder": "SF Pro Display",
       "bodyFont": "Body font",
       "bodyFontPlaceholder": "SF Pro Text",
+      "fontSize": "Font size",
+      "fontSizeSmall": "S",
+      "fontSizeMedium": "M",
+      "fontSizeLarge": "L",
       "logo": "Logo",
       "logoAlt": "Logo",
+      "logoModeUpload": "Upload",
+      "logoModeEmoticon": "Emoticon",
+      "logoValue": "Emoticon",
+      "logoValuePlaceholder": "🎉",
+      "logoPosition": "Position",
+      "positionLeft": "Left",
+      "positionCenter": "Center",
+      "positionRight": "Right",
+      "logoSize": "Size",
+      "logoSizeSmall": "S",
+      "logoSizeMedium": "M",
+      "logoSizeLarge": "L",
       "replaceLogo": "Replace logo",
       "removeLogo": "Remove",
-      "logoHint": "Upload a logo to brand guest invites and QR posters.",
+      "logoHint": "Upload a logo or use an emoji for the guest header.",
       "uploadLogo": "Upload logo (max. 1 MB)",
       "logoTooLarge": "Logo must be under 1 MB.",
+      "buttons": "Buttons & links",
+      "buttonsHint": "Style, radius, and link color for CTA buttons.",
+      "buttonFilled": "Filled",
+      "buttonOutline": "Outline",
+      "buttonRadius": "Radius",
+      "buttonPrimary": "Button primary",
+      "buttonSecondary": "Button secondary",
+      "linkColor": "Link color",
       "save": "Save branding",
       "saving": "Saving...",
       "saveSuccess": "Branding saved.",

resources/js/admin/lib/__tests__/brandingForm.test.ts

@@ -7,6 +7,15 @@ const defaults = {
   background: '#ffffff',
   surface: '#f0f0f0',
   mode: 'auto' as const,
+  buttonStyle: 'filled' as const,
+  buttonRadius: 12,
+  buttonPrimary: '#111111',
+  buttonSecondary: '#222222',
+  linkColor: '#222222',
+  fontSize: 'm' as const,
+  logoMode: 'upload' as const,
+  logoPosition: 'left' as const,
+  logoSize: 'm' as const,
 };
 
 describe('extractBrandingForm', () => {
@@ -34,6 +43,7 @@ describe('extractBrandingForm', () => {
     expect(result.background).toBe('#000000');
     expect(result.surface).toBe('#111111');
     expect(result.mode).toBe('dark');
+    expect(result.fontSize).toBe('m');
   });
 
   it('falls back to legacy keys and defaults', () => {
@@ -52,5 +62,62 @@ describe('extractBrandingForm', () => {
     expect(result.background).toBe('#abcdef');
     expect(result.surface).toBe('#abcdef');
     expect(result.mode).toBe('light');
+    expect(result.buttonStyle).toBe(defaults.buttonStyle);
+    expect(result.buttonRadius).toBe(defaults.buttonRadius);
+  });
+
+  it('extracts buttons, logo, and typography settings', () => {
+    const settings = {
+      branding: {
+        typography: {
+          heading: 'Display Font',
+          body: 'Body Font',
+          size: 'l',
+        },
+        buttons: {
+          style: 'outline',
+          radius: 24,
+          primary: '#333333',
+          secondary: '#444444',
+          link_color: '#555555',
+        },
+        logo: {
+          mode: 'emoticon',
+          value: '🎉',
+          position: 'center',
+          size: 'l',
+        },
+        use_default_branding: true,
+      },
+    };
+
+    const result = extractBrandingForm(settings, defaults);
+
+    expect(result.headingFont).toBe('Display Font');
+    expect(result.bodyFont).toBe('Body Font');
+    expect(result.fontSize).toBe('l');
+    expect(result.buttonStyle).toBe('outline');
+    expect(result.buttonRadius).toBe(24);
+    expect(result.buttonPrimary).toBe('#333333');
+    expect(result.buttonSecondary).toBe('#444444');
+    expect(result.linkColor).toBe('#555555');
+    expect(result.logoMode).toBe('emoticon');
+    expect(result.logoValue).toBe('🎉');
+    expect(result.logoPosition).toBe('center');
+    expect(result.logoSize).toBe('l');
+    expect(result.useDefaultBranding).toBe(true);
+  });
+
+  it('normalizes stored logo paths for previews', () => {
+    const settings = {
+      branding: {
+        logo_url: 'branding/logos/event-123.png',
+        logo_mode: 'upload',
+      },
+    };
+
+    const result = extractBrandingForm(settings, defaults);
+
+    expect(result.logoDataUrl).toBe('/storage/branding/logos/event-123.png');
   });
 });

resources/js/admin/lib/brandingForm.ts

@@ -5,11 +5,38 @@ export type BrandingFormValues = {
   surface: string;
   headingFont: string;
   bodyFont: string;
+  fontSize: 's' | 'm' | 'l';
   logoDataUrl: string;
+  logoValue: string;
+  logoMode: 'upload' | 'emoticon';
+  logoPosition: 'left' | 'center' | 'right';
+  logoSize: 's' | 'm' | 'l';
   mode: 'light' | 'dark' | 'auto';
+  buttonStyle: 'filled' | 'outline';
+  buttonRadius: number;
+  buttonPrimary: string;
+  buttonSecondary: string;
+  linkColor: string;
+  useDefaultBranding: boolean;
 };
 
-export type BrandingFormDefaults = Pick<BrandingFormValues, 'primary' | 'accent' | 'background' | 'surface' | 'mode'>;
+export type BrandingFormDefaults = Pick<
+  BrandingFormValues,
+  | 'primary'
+  | 'accent'
+  | 'background'
+  | 'surface'
+  | 'mode'
+  | 'buttonStyle'
+  | 'buttonRadius'
+  | 'buttonPrimary'
+  | 'buttonSecondary'
+  | 'linkColor'
+  | 'fontSize'
+  | 'logoMode'
+  | 'logoPosition'
+  | 'logoSize'
+>;
 
 type BrandingRecord = Record<string, unknown>;
 
@@ -23,11 +50,48 @@ const readHexColor = (value: unknown, fallback: string): string => {
   return fallback;
 };
 
+const readEnum = <T extends string>(value: unknown, allowed: readonly T[], fallback: T): T => (
+  allowed.includes(value as T) ? (value as T) : fallback
+);
+
+const readNumber = (value: unknown, fallback: number): number => (
+  typeof value === 'number' && !Number.isNaN(value) ? value : fallback
+);
+
+const resolveAssetPreviewUrl = (value: string | null | undefined): string => {
+  if (typeof value !== 'string') {
+    return '';
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return '';
+  }
+
+  if (trimmed.startsWith('data:') || trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+    return trimmed;
+  }
+
+  const normalized = trimmed.startsWith('/') ? trimmed.slice(1) : trimmed;
+
+  if (normalized.startsWith('storage/')) {
+    return `/${normalized}`;
+  }
+
+  if (normalized.startsWith('branding/') || normalized.startsWith('tenant-branding/')) {
+    return `/storage/${normalized}`;
+  }
+
+  return trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+};
+
 export function extractBrandingForm(settings: unknown, defaults: BrandingFormDefaults): BrandingFormValues {
   const settingsRecord = isRecord(settings) ? settings : {};
   const branding = isRecord(settingsRecord.branding) ? (settingsRecord.branding as BrandingRecord) : settingsRecord;
   const palette = isRecord(branding.palette) ? (branding.palette as BrandingRecord) : {};
   const typography = isRecord(branding.typography) ? (branding.typography as BrandingRecord) : {};
+  const buttons = isRecord(branding.buttons) ? (branding.buttons as BrandingRecord) : {};
+  const logo = isRecord(branding.logo) ? (branding.logo as BrandingRecord) : {};
 
   const primary = readHexColor(palette.primary, readHexColor(branding.primary_color, defaults.primary));
   const accent = readHexColor(
@@ -39,9 +103,27 @@ export function extractBrandingForm(settings: unknown, defaults: BrandingFormDef
 
   const headingFont = typeof typography.heading === 'string' ? typography.heading : (branding.heading_font as string | undefined);
   const bodyFont = typeof typography.body === 'string' ? typography.body : (branding.body_font as string | undefined);
-  const mode = branding.mode === 'light' || branding.mode === 'dark' || branding.mode === 'auto'
-    ? branding.mode
-    : defaults.mode;
+  const mode = readEnum(branding.mode, ['light', 'dark', 'auto'], defaults.mode);
+  const fontSize = readEnum(typography.size ?? branding.font_size, ['s', 'm', 'l'], defaults.fontSize);
+
+  const logoMode = readEnum(logo.mode ?? branding.logo_mode, ['upload', 'emoticon'], defaults.logoMode);
+  const logoValue = logoMode === 'emoticon'
+    ? (typeof logo.value === 'string' ? logo.value : (branding.logo_value as string | undefined) ?? '')
+    : '';
+  const logoPosition = readEnum(logo.position ?? branding.logo_position, ['left', 'center', 'right'], defaults.logoPosition);
+  const logoSize = readEnum(logo.size ?? branding.logo_size, ['s', 'm', 'l'], defaults.logoSize);
+  const logoUploadValue =
+    typeof branding.logo_data_url === 'string'
+      ? branding.logo_data_url
+      : logoMode === 'upload'
+        ? (typeof logo.value === 'string' ? logo.value : (branding.logo_url as string | undefined))
+        : undefined;
+
+  const buttonStyle = readEnum(buttons.style ?? branding.button_style, ['filled', 'outline'], defaults.buttonStyle);
+  const buttonRadius = readNumber(buttons.radius ?? branding.button_radius, defaults.buttonRadius);
+  const buttonPrimary = readHexColor(buttons.primary, readHexColor(branding.button_primary_color, primary));
+  const buttonSecondary = readHexColor(buttons.secondary, readHexColor(branding.button_secondary_color, accent));
+  const linkColor = readHexColor(buttons.link_color ?? buttons.linkColor, readHexColor(branding.link_color, accent));
 
   return {
     primary,
@@ -50,7 +132,18 @@ export function extractBrandingForm(settings: unknown, defaults: BrandingFormDef
     surface,
     headingFont: headingFont ?? '',
     bodyFont: bodyFont ?? '',
-    logoDataUrl: typeof branding.logo_data_url === 'string' ? branding.logo_data_url : '',
+    fontSize,
+    logoDataUrl: resolveAssetPreviewUrl(logoUploadValue),
+    logoValue,
+    logoMode,
+    logoPosition,
+    logoSize,
     mode,
+    buttonStyle,
+    buttonRadius,
+    buttonPrimary,
+    buttonSecondary,
+    linkColor,
+    useDefaultBranding: branding.use_default_branding === true,
   };
 }

resources/js/admin/mobile/BrandingPage.tsx

@@ -7,7 +7,7 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
-import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
+import { TenantEvent, getEvent, updateEvent, getTenantFonts, getTenantSettings, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { ApiError, getApiErrorMessage } from '../lib/apiError';
 import { isBrandingAllowed } from '../lib/events';
@@ -25,6 +25,15 @@ const BRANDING_FORM_DEFAULTS = {
   background: '#ffffff',
   surface: '#ffffff',
   mode: 'auto' as const,
+  buttonStyle: 'filled' as const,
+  buttonRadius: 12,
+  buttonPrimary: ADMIN_COLORS.primary,
+  buttonSecondary: ADMIN_COLORS.accent,
+  linkColor: ADMIN_COLORS.accent,
+  fontSize: 'm' as const,
+  logoMode: 'upload' as const,
+  logoPosition: 'left' as const,
+  logoSize: 'm' as const,
 };
 
 const BRANDING_FORM_BASE: BrandingFormValues = {
@@ -32,6 +41,20 @@ const BRANDING_FORM_BASE: BrandingFormValues = {
   headingFont: '',
   bodyFont: '',
   logoDataUrl: '',
+  logoValue: '',
+  useDefaultBranding: false,
+};
+
+const FONT_SIZE_SCALE: Record<BrandingFormValues['fontSize'], number> = {
+  s: 0.94,
+  m: 1,
+  l: 1.08,
+};
+
+const LOGO_SIZE_PREVIEW: Record<BrandingFormValues['logoSize'], number> = {
+  s: 28,
+  m: 36,
+  l: 44,
 };
 
 type WatermarkPosition =
@@ -89,6 +112,8 @@ export default function MobileBrandingPage() {
   const [fonts, setFonts] = React.useState<TenantFont[]>([]);
   const [fontsLoading, setFontsLoading] = React.useState(false);
   const [fontsLoaded, setFontsLoaded] = React.useState(false);
+  const [tenantBranding, setTenantBranding] = React.useState<BrandingFormValues | null>(null);
+  const [tenantBrandingLoaded, setTenantBrandingLoaded] = React.useState(false);
 
   React.useEffect(() => {
     if (!slug) return;
@@ -122,13 +147,42 @@ export default function MobileBrandingPage() {
       });
   }, [showFontsSheet, fontsLoaded]);
 
+  React.useEffect(() => {
+    if (tenantBrandingLoaded) return;
+    let active = true;
+    getTenantSettings()
+      .then((payload) => {
+        if (!active) return;
+        setTenantBranding(extractBrandingForm(payload.settings ?? {}, BRANDING_FORM_DEFAULTS));
+      })
+      .catch(() => undefined)
+      .finally(() => {
+        if (active) {
+          setTenantBrandingLoaded(true);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [tenantBrandingLoaded]);
+
+  const previewForm = form.useDefaultBranding && tenantBranding ? tenantBranding : form;
   const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
-  const previewHeadingFont = form.headingFont || 'Fraunces';
-  const previewBodyFont = form.bodyFont || 'Manrope';
-  const previewSurfaceText = getContrastingTextColor(form.surface, '#ffffff', '#0f172a');
+  const previewHeadingFont = previewForm.headingFont || 'Fraunces';
+  const previewBodyFont = previewForm.bodyFont || 'Manrope';
+  const previewSurfaceText = getContrastingTextColor(previewForm.surface, '#ffffff', '#0f172a');
+  const previewScale = FONT_SIZE_SCALE[previewForm.fontSize] ?? 1;
+  const previewButtonColor = previewForm.buttonPrimary || previewForm.primary;
+  const previewButtonText = getContrastingTextColor(previewButtonColor, '#ffffff', '#0f172a');
+  const previewLogoSize = LOGO_SIZE_PREVIEW[previewForm.logoSize] ?? 36;
+  const previewLogoUrl = previewForm.logoMode === 'upload' ? previewForm.logoDataUrl : '';
+  const previewLogoValue = previewForm.logoMode === 'emoticon' ? previewForm.logoValue : '';
+  const previewInitials = getInitials(previewTitle);
   const watermarkAllowed = event?.package?.watermark_allowed !== false;
   const brandingAllowed = isBrandingAllowed(event ?? null);
   const watermarkLocked = watermarkAllowed && !brandingAllowed;
+  const brandingDisabled = !brandingAllowed || form.useDefaultBranding;
 
   async function handleSave() {
     if (!event?.slug) return;
@@ -159,22 +213,38 @@ export default function MobileBrandingPage() {
         is_active: event.is_active ?? undefined,
       };
       const settings = { ...(event.settings ?? {}) };
+      const logoUploadValue = form.logoMode === 'upload' ? form.logoDataUrl.trim() : '';
+      const logoIsDataUrl = logoUploadValue.startsWith('data:image/');
+      const normalizedLogoPath = logoIsDataUrl ? '' : normalizeBrandingPath(logoUploadValue);
+      const logoValue = form.logoMode === 'upload'
+        ? (logoIsDataUrl ? logoUploadValue : normalizedLogoPath || null)
+        : (form.logoValue.trim() || null);
+
       settings.branding = {
         ...(typeof settings.branding === 'object' ? (settings.branding as Record<string, unknown>) : {}),
+        use_default_branding: form.useDefaultBranding,
         primary_color: form.primary,
         secondary_color: form.accent,
         accent_color: form.accent,
         background_color: form.background,
         surface_color: form.surface,
+        font_family: form.bodyFont,
         heading_font: form.headingFont,
         body_font: form.bodyFont,
+        font_size: form.fontSize,
         mode: form.mode,
+        button_style: form.buttonStyle,
+        button_radius: form.buttonRadius,
+        button_primary_color: form.buttonPrimary,
+        button_secondary_color: form.buttonSecondary,
+        link_color: form.linkColor,
         typography: {
           ...(typeof (settings.branding as Record<string, unknown> | undefined)?.typography === 'object'
             ? ((settings.branding as Record<string, unknown>).typography as Record<string, unknown>)
             : {}),
           heading: form.headingFont,
           body: form.bodyFont,
+          size: form.fontSize,
         },
         palette: {
           ...(typeof (settings.branding as Record<string, unknown> | undefined)?.palette === 'object'
@@ -185,15 +255,28 @@ export default function MobileBrandingPage() {
           background: form.background,
           surface: form.surface,
         },
-        logo_data_url: form.logoDataUrl || null,
-        logo: form.logoDataUrl
-          ? {
-              mode: 'upload',
-              value: form.logoDataUrl,
-              position: 'center',
-              size: 'm',
-            }
-          : null,
+        buttons: {
+          ...(typeof (settings.branding as Record<string, unknown> | undefined)?.buttons === 'object'
+            ? ((settings.branding as Record<string, unknown>).buttons as Record<string, unknown>)
+            : {}),
+          style: form.buttonStyle,
+          radius: form.buttonRadius,
+          primary: form.buttonPrimary,
+          secondary: form.buttonSecondary,
+          link_color: form.linkColor,
+        },
+        logo_data_url: form.logoMode === 'upload' && logoIsDataUrl ? logoUploadValue : null,
+        logo_url: form.logoMode === 'upload' ? (normalizedLogoPath || null) : null,
+        logo_mode: form.logoMode,
+        logo_value: logoValue,
+        logo_position: form.logoPosition,
+        logo_size: form.logoSize,
+        logo: {
+          mode: form.logoMode,
+          value: logoValue,
+          position: form.logoPosition,
+          size: form.logoSize,
+        },
       };
       const watermarkPayload = buildWatermarkPayload(watermarkForm, watermarkAllowed, brandingAllowed);
       if (watermarkPayload) {
@@ -445,27 +528,117 @@ export default function MobileBrandingPage() {
             <Text fontSize="$sm" fontWeight="700" color={textStrong}>
               {t('events.branding.previewTitle', 'Guest App Preview')}
             </Text>
-            <YStack borderRadius={16} borderWidth={1} borderColor={border} backgroundColor={form.background} padding="$3" space="$2" alignItems="center">
-              <YStack width="100%" borderRadius={12} backgroundColor={form.surface} borderWidth={1} borderColor={border} overflow="hidden">
-                <YStack backgroundColor={form.primary} height={64} />
-                <YStack padding="$3" space="$1.5">
-                  <Text fontSize="$md" fontWeight="800" color={previewSurfaceText} style={{ fontFamily: previewHeadingFont }}>
-                    {previewTitle}
-                  </Text>
-                  <Text fontSize="$sm" color={previewSurfaceText} style={{ fontFamily: previewBodyFont, opacity: 0.7 }}>
-                    {t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
-                  </Text>
+            <YStack borderRadius={16} borderWidth={1} borderColor={border} backgroundColor={previewForm.background} padding="$3" space="$2" alignItems="center">
+              <YStack width="100%" borderRadius={12} backgroundColor={previewForm.surface} borderWidth={1} borderColor={border} overflow="hidden">
+                <YStack
+                  height={64}
+                  style={{ background: `linear-gradient(135deg, ${previewForm.primary}, ${previewForm.accent})` }}
+                />
+                <YStack padding="$3" space="$2">
+                  <XStack
+                    alignItems="center"
+                    space="$2"
+                    flexDirection={previewForm.logoPosition === 'center' ? 'column' : previewForm.logoPosition === 'right' ? 'row-reverse' : 'row'}
+                    justifyContent={previewForm.logoPosition === 'center' ? 'center' : 'flex-start'}
+                  >
+                    <YStack
+                      width={previewLogoSize}
+                      height={previewLogoSize}
+                      borderRadius={previewLogoSize}
+                      alignItems="center"
+                      justifyContent="center"
+                      backgroundColor={previewForm.accent}
+                    >
+                      {previewLogoUrl ? (
+                        <img
+                          src={previewLogoUrl}
+                          alt={t('events.branding.logoAlt', 'Logo')}
+                          style={{ width: previewLogoSize - 6, height: previewLogoSize - 6, borderRadius: previewLogoSize, objectFit: 'cover' }}
+                        />
+                      ) : (
+                        <Text fontSize="$sm" color={previewSurfaceText} fontWeight="700">
+                          {previewLogoValue || previewInitials}
+                        </Text>
+                      )}
+                    </YStack>
+                    <YStack>
+                      <Text
+                        fontWeight="800"
+                        color={previewSurfaceText}
+                        style={{ fontFamily: previewHeadingFont, fontSize: 18 * previewScale }}
+                      >
+                        {previewTitle}
+                      </Text>
+                      <Text
+                        color={previewSurfaceText}
+                        style={{ fontFamily: previewBodyFont, opacity: 0.7, fontSize: 13 * previewScale }}
+                      >
+                        {t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
+                      </Text>
+                    </YStack>
+                  </XStack>
                   <XStack space="$2" marginTop="$1">
-                    <ColorSwatch color={form.primary} label={t('events.branding.primary', 'Primary')} />
-                    <ColorSwatch color={form.accent} label={t('events.branding.accent', 'Accent')} />
-                    <ColorSwatch color={form.background} label={t('events.branding.background', 'Background')} />
-                    <ColorSwatch color={form.surface} label={t('events.branding.surface', 'Surface')} />
+                    <ColorSwatch color={previewForm.primary} label={t('events.branding.primary', 'Primary')} />
+                    <ColorSwatch color={previewForm.accent} label={t('events.branding.accent', 'Accent')} />
+                    <ColorSwatch color={previewForm.background} label={t('events.branding.background', 'Background')} />
+                    <ColorSwatch color={previewForm.surface} label={t('events.branding.surface', 'Surface')} />
+                  </XStack>
+                  <XStack marginTop="$2">
+                    <div
+                      style={{
+                        padding: '8px 14px',
+                        borderRadius: previewForm.buttonRadius,
+                        background: previewForm.buttonStyle === 'outline' ? 'transparent' : previewButtonColor,
+                        color: previewForm.buttonStyle === 'outline' ? previewForm.linkColor : previewButtonText,
+                        border: previewForm.buttonStyle === 'outline' ? `1px solid ${previewForm.linkColor}` : 'none',
+                        fontWeight: 700,
+                        fontSize: 13 * previewScale,
+                      }}
+                    >
+                      {t('events.branding.previewCta', 'Fotos hochladen')}
+                    </div>
                   </XStack>
                 </YStack>
               </YStack>
             </YStack>
           </MobileCard>
 
+          {!brandingAllowed ? (
+            <InfoBadge
+              icon={<Lock size={16} color={danger} />}
+              text={t('events.branding.lockedBranding', 'Branding ist in diesem Paket gesperrt.')}
+              tone="danger"
+            />
+          ) : null}
+
+          <MobileCard space="$3">
+            <Text fontSize="$md" fontWeight="800" color={textStrong}>
+              {t('events.branding.source', 'Branding Source')}
+            </Text>
+            <Text fontSize="$sm" color={muted}>
+              {t('events.branding.sourceHint', 'Nutze das Tenant-Branding oder überschreibe es für dieses Event.')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.useDefault', 'Tenant')}
+                active={form.useDefaultBranding}
+                onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: true }))}
+                disabled={!brandingAllowed}
+              />
+              <ModeButton
+                label={t('events.branding.useCustom', 'Event')}
+                active={!form.useDefaultBranding}
+                onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: false }))}
+                disabled={!brandingAllowed}
+              />
+            </XStack>
+            <Text fontSize="$xs" color={muted}>
+              {form.useDefaultBranding
+                ? t('events.branding.usingDefault', 'Tenant-Branding aktiv')
+                : t('events.branding.usingCustom', 'Event-Branding aktiv')}
+            </Text>
+          </MobileCard>
+
           <MobileCard space="$3">
             <Text fontSize="$md" fontWeight="800" color={textStrong}>
               {t('events.branding.mode', 'Theme')}
@@ -475,16 +648,19 @@ export default function MobileBrandingPage() {
                 label={t('events.branding.modeLight', 'Light')}
                 active={form.mode === 'light'}
                 onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
+                disabled={brandingDisabled}
               />
               <ModeButton
                 label={t('events.branding.modeAuto', 'Auto')}
                 active={form.mode === 'auto'}
                 onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
+                disabled={brandingDisabled}
               />
               <ModeButton
                 label={t('events.branding.modeDark', 'Dark')}
                 active={form.mode === 'dark'}
                 onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
+                disabled={brandingDisabled}
               />
             </XStack>
           </MobileCard>
@@ -497,21 +673,25 @@ export default function MobileBrandingPage() {
               label={t('events.branding.primary', 'Primary Color')}
               value={form.primary}
               onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
+              disabled={brandingDisabled}
             />
             <ColorField
               label={t('events.branding.accent', 'Accent Color')}
               value={form.accent}
               onChange={(value) => setForm((prev) => ({ ...prev, accent: value }))}
+              disabled={brandingDisabled}
             />
             <ColorField
               label={t('events.branding.backgroundColor', 'Background Color')}
               value={form.background}
               onChange={(value) => setForm((prev) => ({ ...prev, background: value }))}
+              disabled={brandingDisabled}
             />
             <ColorField
               label={t('events.branding.surfaceColor', 'Surface Color')}
               value={form.surface}
               onChange={(value) => setForm((prev) => ({ ...prev, surface: value }))}
+              disabled={brandingDisabled}
             />
           </MobileCard>
 
@@ -528,6 +708,7 @@ export default function MobileBrandingPage() {
                 setFontField('heading');
                 setShowFontsSheet(true);
               }}
+              disabled={brandingDisabled}
             />
             <InputField
               label={t('events.branding.bodyFont', 'Body Font')}
@@ -538,105 +719,259 @@ export default function MobileBrandingPage() {
                 setFontField('body');
                 setShowFontsSheet(true);
               }}
+              disabled={brandingDisabled}
             />
+            <Text fontSize="$sm" fontWeight="700" color={textStrong}>
+              {t('events.branding.fontSize', 'Font Size')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.fontSizeSmall', 'S')}
+                active={form.fontSize === 's'}
+                onPress={() => setForm((prev) => ({ ...prev, fontSize: 's' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.fontSizeMedium', 'M')}
+                active={form.fontSize === 'm'}
+                onPress={() => setForm((prev) => ({ ...prev, fontSize: 'm' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.fontSizeLarge', 'L')}
+                active={form.fontSize === 'l'}
+                onPress={() => setForm((prev) => ({ ...prev, fontSize: 'l' }))}
+                disabled={brandingDisabled}
+              />
+            </XStack>
           </MobileCard>
 
           <MobileCard space="$3">
             <Text fontSize="$md" fontWeight="800" color={textStrong}>
               {t('events.branding.logo', 'Logo')}
             </Text>
-            <YStack
-              borderRadius={14}
-              borderWidth={1}
-              borderColor={border}
-              backgroundColor={surfaceMuted}
-              padding="$3"
-              alignItems="center"
-              justifyContent="center"
-              space="$2"
-            >
-              {form.logoDataUrl ? (
-                <>
-                  <img
-                    src={form.logoDataUrl}
-                    alt={t('events.branding.logoAlt', 'Logo')}
-                    style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }}
-                  />
-                  <XStack space="$2">
-                    <CTAButton
-                      label={t('events.branding.replaceLogo', 'Replace logo')}
-                      onPress={() => document.getElementById('branding-logo-input')?.click()}
+            <Text fontSize="$sm" color={muted}>
+              {t('events.branding.logoHint', 'Upload a logo or use an emoji for the guest header.')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.logoModeUpload', 'Upload')}
+                active={form.logoMode === 'upload'}
+                onPress={() => setForm((prev) => ({ ...prev, logoMode: 'upload' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.logoModeEmoticon', 'Emoticon')}
+                active={form.logoMode === 'emoticon'}
+                onPress={() => setForm((prev) => ({ ...prev, logoMode: 'emoticon' }))}
+                disabled={brandingDisabled}
+              />
+            </XStack>
+
+            {form.logoMode === 'emoticon' ? (
+              <InputField
+                label={t('events.branding.logoValue', 'Emoticon')}
+                value={form.logoValue}
+                placeholder={t('events.branding.logoValuePlaceholder', '🎉')}
+                onChange={(value) => setForm((prev) => ({ ...prev, logoValue: value }))}
+                disabled={brandingDisabled}
+              />
+            ) : (
+              <YStack
+                borderRadius={14}
+                borderWidth={1}
+                borderColor={border}
+                backgroundColor={surfaceMuted}
+                padding="$3"
+                alignItems="center"
+                justifyContent="center"
+                space="$2"
+              >
+                {form.logoDataUrl ? (
+                  <>
+                    <img
+                      src={form.logoDataUrl}
+                      alt={t('events.branding.logoAlt', 'Logo')}
+                      style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }}
                     />
-                    <Pressable onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}>
+                    <XStack space="$2">
+                      <CTAButton
+                        label={t('events.branding.replaceLogo', 'Replace logo')}
+                        onPress={() => document.getElementById('branding-logo-input')?.click()}
+                        disabled={brandingDisabled}
+                      />
+                      <Pressable
+                        disabled={brandingDisabled}
+                        onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}
+                      >
+                        <XStack
+                          alignItems="center"
+                          space="$1.5"
+                          paddingHorizontal="$3"
+                          paddingVertical="$2"
+                          borderRadius={12}
+                          borderWidth={1}
+                          borderColor={border}
+                        >
+                          <Trash2 size={16} color={danger} />
+                          <Text fontSize="$sm" color={danger} fontWeight="700">
+                            {t('events.branding.removeLogo', 'Remove')}
+                          </Text>
+                        </XStack>
+                      </Pressable>
+                    </XStack>
+                  </>
+                ) : (
+                  <>
+                    <ImageIcon size={28} color={subtle} />
+                    <Pressable
+                      disabled={brandingDisabled}
+                      onPress={() => document.getElementById('branding-logo-input')?.click()}
+                    >
                       <XStack
                         alignItems="center"
-                        space="$1.5"
-                        paddingHorizontal="$3"
-                        paddingVertical="$2"
+                        space="$2"
+                        paddingHorizontal="$3.5"
+                        paddingVertical="$2.5"
                         borderRadius={12}
                         borderWidth={1}
                         borderColor={border}
+                        backgroundColor={surface}
                       >
-                        <Trash2 size={16} color={danger} />
-                        <Text fontSize="$sm" color={danger} fontWeight="700">
-                          {t('events.branding.removeLogo', 'Remove')}
+                        <UploadCloud size={18} color={primary} />
+                        <Text fontSize="$sm" color={primary} fontWeight="700">
+                          {t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
                         </Text>
                       </XStack>
                     </Pressable>
-                  </XStack>
-                </>
-              ) : (
-                <>
-                  <ImageIcon size={28} color={subtle} />
-                  <Text fontSize="$sm" color={muted} textAlign="center">
-                    {t('events.branding.logoHint', 'Upload a logo to brand guest invites and QR posters.')}
-                  </Text>
-                  <Pressable onPress={() => document.getElementById('branding-logo-input')?.click()}>
-                    <XStack
-                      alignItems="center"
-                      space="$2"
-                      paddingHorizontal="$3.5"
-                      paddingVertical="$2.5"
-                      borderRadius={12}
-                      borderWidth={1}
-                      borderColor={border}
-                      backgroundColor={surface}
-                    >
-                      <UploadCloud size={18} color={primary} />
-                      <Text fontSize="$sm" color={primary} fontWeight="700">
-                        {t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
-                      </Text>
-                    </XStack>
-                  </Pressable>
-                </>
-              )}
-              <input
-                id="branding-logo-input"
-                type="file"
-                accept="image/*"
-                style={{ display: 'none' }}
-                onChange={(event) => {
-                  const file = event.target.files?.[0];
-                  if (!file) return;
-                  if (file.size > 1024 * 1024) {
-                    setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
-                    return;
-                  }
-                  const reader = new FileReader();
-                  reader.onload = () => {
-                    const nextLogo =
-                      typeof reader.result === 'string'
-                        ? reader.result
-                        : typeof reader.result === 'object' && reader.result !== null
-                          ? String(reader.result)
-                          : '';
-                    setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
-                    setError(null);
-                  };
-                  reader.readAsDataURL(file);
-                }}
+                  </>
+                )}
+                <input
+                  id="branding-logo-input"
+                  type="file"
+                  accept="image/*"
+                  style={{ display: 'none' }}
+                  disabled={brandingDisabled}
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    if (!file) return;
+                    if (file.size > 1024 * 1024) {
+                      setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
+                      return;
+                    }
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                      const nextLogo =
+                        typeof reader.result === 'string'
+                          ? reader.result
+                          : typeof reader.result === 'object' && reader.result !== null
+                            ? String(reader.result)
+                            : '';
+                      setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
+                      setError(null);
+                    };
+                    reader.readAsDataURL(file);
+                  }}
+                />
+              </YStack>
+            )}
+
+            <Text fontSize="$sm" fontWeight="700" color={textStrong}>
+              {t('events.branding.logoPosition', 'Position')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.positionLeft', 'Left')}
+                active={form.logoPosition === 'left'}
+                onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'left' }))}
+                disabled={brandingDisabled}
               />
-            </YStack>
+              <ModeButton
+                label={t('events.branding.positionCenter', 'Center')}
+                active={form.logoPosition === 'center'}
+                onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'center' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.positionRight', 'Right')}
+                active={form.logoPosition === 'right'}
+                onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'right' }))}
+                disabled={brandingDisabled}
+              />
+            </XStack>
+            <Text fontSize="$sm" fontWeight="700" color={textStrong}>
+              {t('events.branding.logoSize', 'Size')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.logoSizeSmall', 'S')}
+                active={form.logoSize === 's'}
+                onPress={() => setForm((prev) => ({ ...prev, logoSize: 's' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.logoSizeMedium', 'M')}
+                active={form.logoSize === 'm'}
+                onPress={() => setForm((prev) => ({ ...prev, logoSize: 'm' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.logoSizeLarge', 'L')}
+                active={form.logoSize === 'l'}
+                onPress={() => setForm((prev) => ({ ...prev, logoSize: 'l' }))}
+                disabled={brandingDisabled}
+              />
+            </XStack>
+          </MobileCard>
+
+          <MobileCard space="$3">
+            <Text fontSize="$md" fontWeight="800" color={textStrong}>
+              {t('events.branding.buttons', 'Buttons & Links')}
+            </Text>
+            <Text fontSize="$sm" color={muted}>
+              {t('events.branding.buttonsHint', 'Style, radius, and link color for CTA buttons.')}
+            </Text>
+            <XStack space="$2">
+              <ModeButton
+                label={t('events.branding.buttonFilled', 'Filled')}
+                active={form.buttonStyle === 'filled'}
+                onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'filled' }))}
+                disabled={brandingDisabled}
+              />
+              <ModeButton
+                label={t('events.branding.buttonOutline', 'Outline')}
+                active={form.buttonStyle === 'outline'}
+                onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'outline' }))}
+                disabled={brandingDisabled}
+              />
+            </XStack>
+            <LabeledSlider
+              label={t('events.branding.buttonRadius', 'Radius')}
+              value={form.buttonRadius}
+              min={0}
+              max={32}
+              step={1}
+              onChange={(value) => setForm((prev) => ({ ...prev, buttonRadius: value }))}
+              disabled={brandingDisabled}
+            />
+            <ColorField
+              label={t('events.branding.buttonPrimary', 'Button Primary')}
+              value={form.buttonPrimary}
+              onChange={(value) => setForm((prev) => ({ ...prev, buttonPrimary: value }))}
+              disabled={brandingDisabled}
+            />
+            <ColorField
+              label={t('events.branding.buttonSecondary', 'Button Secondary')}
+              value={form.buttonSecondary}
+              onChange={(value) => setForm((prev) => ({ ...prev, buttonSecondary: value }))}
+              disabled={brandingDisabled}
+            />
+            <ColorField
+              label={t('events.branding.linkColor', 'Link Color')}
+              value={form.linkColor}
+              onChange={(value) => setForm((prev) => ({ ...prev, linkColor: value }))}
+              disabled={brandingDisabled}
+            />
           </MobileCard>
         </>
       ) : (
@@ -787,10 +1122,47 @@ function renderName(name: TenantEvent['name']): string {
   return '';
 }
 
-function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (next: string) => void }) {
+function normalizeBrandingPath(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return '';
+  }
+
+  if (trimmed.startsWith('http://') || trimmed.startsWith('https://') || trimmed.startsWith('data:')) {
+    return trimmed;
+  }
+
+  const normalized = trimmed.replace(/^\/+/, '');
+
+  if (normalized.startsWith('storage/')) {
+    return normalized.slice('storage/'.length);
+  }
+
+  return normalized;
+}
+
+function getInitials(name: string): string {
+  const words = name.split(' ').filter(Boolean);
+  if (words.length >= 2) {
+    return `${words[0][0]}${words[1][0]}`.toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}
+
+function ColorField({
+  label,
+  value,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  disabled?: boolean;
+}) {
   const { textStrong, muted, border, surface } = useAdminTheme();
   return (
-    <YStack space="$2">
+    <YStack space="$2" opacity={disabled ? 0.6 : 1}>
       <Text fontSize="$sm" fontWeight="700" color={textStrong}>
         {label}
       </Text>
@@ -799,6 +1171,7 @@ function ColorField({ label, value, onChange }: { label: string; value: string;
             type="color"
             value={value}
             onChange={(event) => onChange(event.target.value)}
+            disabled={disabled}
             style={{ width: 52, height: 52, borderRadius: 12, border: `1px solid ${border}`, background: surface }}
           />
           <Text fontSize="$sm" color={muted}>
@@ -828,6 +1201,7 @@ function InputField({
   onChange,
   onPicker,
   children,
+  disabled,
 }: {
   label: string;
   value: string;
@@ -835,10 +1209,11 @@ function InputField({
   onChange: (next: string) => void;
   onPicker?: () => void;
   children?: React.ReactNode;
+  disabled?: boolean;
 }) {
   const { textStrong, border, surface, primary } = useAdminTheme();
   return (
-    <YStack space="$2">
+    <YStack space="$2" opacity={disabled ? 0.6 : 1}>
       <Text fontSize="$sm" fontWeight="700" color={textStrong}>
         {label}
       </Text>
@@ -859,6 +1234,7 @@ function InputField({
             value={value}
             placeholder={placeholder}
             onChange={(event) => onChange(event.target.value)}
+            disabled={disabled}
             style={{
               flex: 1,
               height: '100%',
@@ -871,7 +1247,7 @@ function InputField({
           />
         )}
         {onPicker ? (
-          <Pressable onPress={onPicker}>
+          <Pressable onPress={onPicker} disabled={disabled}>
             <ChevronDown size={16} color={primary} />
           </Pressable>
         ) : null}
@@ -1104,10 +1480,20 @@ function TabButton({ label, active, onPress }: { label: string; active: boolean;
   );
 }
 
-function ModeButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
+function ModeButton({
+  label,
+  active,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  active: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+}) {
   const { backdrop, surfaceMuted, border, surface } = useAdminTheme();
   return (
-    <Pressable onPress={onPress} style={{ flex: 1 }}>
+    <Pressable onPress={onPress} disabled={disabled} style={{ flex: 1, opacity: disabled ? 0.6 : 1 }}>
       <XStack
         alignItems="center"
         justifyContent="center"

resources/js/guest/components/Header.tsx

@@ -38,6 +38,18 @@ const EVENT_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: st
   camera: Camera,
 };
 
+type LogoSize = 's' | 'm' | 'l';
+
+const LOGO_SIZE_CLASSES: Record<LogoSize, { container: string; image: string; emoji: string; icon: string }> = {
+  s: { container: 'h-8 w-8', image: 'h-7 w-7', emoji: 'text-lg', icon: 'h-4 w-4' },
+  m: { container: 'h-10 w-10', image: 'h-9 w-9', emoji: 'text-xl', icon: 'h-5 w-5' },
+  l: { container: 'h-12 w-12', image: 'h-11 w-11', emoji: 'text-2xl', icon: 'h-6 w-6' },
+};
+
+function getLogoClasses(size?: LogoSize) {
+  return LOGO_SIZE_CLASSES[size ?? 'm'];
+}
+
 const NOTIFICATION_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   broadcast: MessageSquare,
   feedback_request: MessageSquare,
@@ -69,18 +81,25 @@ function getInitials(name: string): string {
   return name.substring(0, 2).toUpperCase();
 }
 
-function renderEventAvatar(name: string, icon: unknown, accentColor: string, textColor: string, logo?: { mode: 'emoticon' | 'upload'; value: string | null }) {
+function renderEventAvatar(
+  name: string,
+  icon: unknown,
+  accentColor: string,
+  textColor: string,
+  logo?: { mode: 'emoticon' | 'upload'; value: string | null; size?: LogoSize }
+) {
+  const sizes = getLogoClasses(logo?.size);
   if (logo?.mode === 'upload' && logo.value) {
     return (
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-sm">
-        <img src={logo.value} alt={name} className="h-9 w-9 rounded-full object-contain" />
+      <div className={`flex items-center justify-center rounded-full bg-white shadow-sm ${sizes.container}`}>
+        <img src={logo.value} alt={name} className={`rounded-full object-contain ${sizes.image}`} />
       </div>
     );
   }
   if (logo?.mode === 'emoticon' && logo.value && isLikelyEmoji(logo.value)) {
     return (
       <div
-        className="flex h-10 w-10 items-center justify-center rounded-full text-xl shadow-sm"
+        className={`flex items-center justify-center rounded-full shadow-sm ${sizes.container} ${sizes.emoji}`}
         style={{ backgroundColor: accentColor, color: textColor }}
       >
         <span aria-hidden>{logo.value}</span>
@@ -94,21 +113,21 @@ function renderEventAvatar(name: string, icon: unknown, accentColor: string, tex
     if (trimmed) {
       const normalized = trimmed.toLowerCase();
       const IconComponent = EVENT_ICON_COMPONENTS[normalized];
-      if (IconComponent) {
-        return (
-          <div
-            className="flex h-10 w-10 items-center justify-center rounded-full shadow-sm"
-            style={{ backgroundColor: accentColor, color: textColor }}
-          >
-            <IconComponent className="h-5 w-5" aria-hidden />
-          </div>
-        );
-      }
+        if (IconComponent) {
+          return (
+            <div
+              className={`flex items-center justify-center rounded-full shadow-sm ${sizes.container}`}
+              style={{ backgroundColor: accentColor, color: textColor }}
+            >
+              <IconComponent className={sizes.icon} aria-hidden />
+            </div>
+          );
+        }
 
       if (isLikelyEmoji(trimmed)) {
         return (
           <div
-            className="flex h-10 w-10 items-center justify-center rounded-full text-xl shadow-sm"
+            className={`flex items-center justify-center rounded-full shadow-sm ${sizes.container} ${sizes.emoji}`}
             style={{ backgroundColor: accentColor, color: textColor }}
           >
             <span aria-hidden>{trimmed}</span>
@@ -188,6 +207,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
 
   const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
+  const logoPosition = branding.logo?.position ?? 'left';
   const headerStyle: React.CSSProperties = {
     background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
     color: headerTextColor,
@@ -219,9 +239,20 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
       className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
       style={headerStyle}
     >
-      <div className="flex items-center gap-3">
+      <div
+        className={
+          logoPosition === 'center'
+            ? 'flex flex-col items-center gap-2 text-center'
+            : logoPosition === 'right'
+              ? 'flex flex-row-reverse items-center gap-3'
+              : 'flex items-center gap-3'
+        }
+      >
         {renderEventAvatar(event.name, event.type?.icon, accentColor, headerTextColor, branding.logo)}
-        <div className="flex flex-col" style={headerFont ? { fontFamily: headerFont } : undefined}>
+        <div
+          className={`flex flex-col${logoPosition === 'center' ? ' items-center text-center' : ''}`}
+          style={headerFont ? { fontFamily: headerFont } : undefined}
+        >
           <div className="font-semibold text-lg">{event.name}</div>
           <div className="flex items-center gap-2 text-xs text-white/70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
             {stats && tasksEnabled && (

resources/js/guest/context/EventBrandingContext.tsx

@@ -38,6 +38,11 @@ export const DEFAULT_EVENT_BRANDING: EventBranding = {
 const DEFAULT_PRIMARY = DEFAULT_EVENT_BRANDING.primaryColor.toLowerCase();
 const DEFAULT_SECONDARY = DEFAULT_EVENT_BRANDING.secondaryColor.toLowerCase();
 const DEFAULT_BACKGROUND = DEFAULT_EVENT_BRANDING.backgroundColor.toLowerCase();
+const FONT_SCALE_MAP: Record<'s' | 'm' | 'l', number> = {
+  s: 0.94,
+  m: 1,
+  l: 1.08,
+};
 
 const EventBrandingContext = createContext<EventBrandingContextValue | undefined>(undefined);
 
@@ -62,7 +67,8 @@ function resolveBranding(input?: EventBranding | null): EventBranding {
 
   const headingFont = input.typography?.heading ?? input.fontFamily ?? null;
   const bodyFont = input.typography?.body ?? input.fontFamily ?? null;
-  const sizePreset = input.typography?.sizePreset ?? 'm';
+  const rawSize = input.typography?.sizePreset ?? 'm';
+  const sizePreset = rawSize === 's' || rawSize === 'm' || rawSize === 'l' ? rawSize : 'm';
 
   const logoMode = input.logo?.mode ?? (input.logoUrl ? 'upload' : 'emoticon');
   const logoValue = input.logo?.value ?? input.logoUrl ?? null;
@@ -116,6 +122,7 @@ function applyCssVariables(branding: EventBranding) {
   root.style.setProperty('--guest-radius', `${branding.buttons?.radius ?? 12}px`);
   root.style.setProperty('--guest-link', branding.buttons?.linkColor ?? branding.secondaryColor);
   root.style.setProperty('--guest-button-style', branding.buttons?.style ?? 'filled');
+  root.style.setProperty('--guest-font-scale', String(FONT_SCALE_MAP[branding.typography?.sizePreset ?? 'm'] ?? 1));
 
   const headingFont = branding.typography?.heading ?? branding.fontFamily;
   const bodyFont = branding.typography?.body ?? branding.fontFamily;
@@ -149,6 +156,7 @@ function resetCssVariables() {
   root.style.removeProperty('--guest-radius');
   root.style.removeProperty('--guest-link');
   root.style.removeProperty('--guest-button-style');
+  root.style.removeProperty('--guest-font-scale');
   root.style.removeProperty('--guest-font-family');
   root.style.removeProperty('--guest-body-font');
   root.style.removeProperty('--guest-heading-font');

resources/js/guest/context/__tests__/EventBrandingContext.test.tsx

@@ -9,6 +9,11 @@ const sampleBranding: EventBranding = {
   backgroundColor: '#fef2f2',
   fontFamily: 'Montserrat, sans-serif',
   logoUrl: null,
+  typography: {
+    heading: null,
+    body: null,
+    sizePreset: 'l',
+  },
   mode: 'dark',
 };
 
@@ -17,6 +22,7 @@ describe('EventBrandingProvider', () => {
     document.documentElement.classList.remove('guest-theme', 'dark');
     document.documentElement.style.removeProperty('color-scheme');
     document.documentElement.style.removeProperty('--guest-background');
+    document.documentElement.style.removeProperty('--guest-font-scale');
   });
 
   it('applies guest theme classes and variables', async () => {
@@ -31,6 +37,7 @@ describe('EventBrandingProvider', () => {
       expect(document.documentElement.classList.contains('dark')).toBe(true);
       expect(document.documentElement.style.colorScheme).toBe('dark');
       expect(document.documentElement.style.getPropertyValue('--guest-background')).toBe(sampleBranding.backgroundColor);
+      expect(document.documentElement.style.getPropertyValue('--guest-font-scale')).toBe('1.08');
     });
 
     unmount();