feat: unify tenant admin ui and add photo moderation

resources/js/admin/api.ts

@@ -137,6 +137,11 @@ export type DashboardSummary = {
         expires_at?: string | null;
         remaining_events?: number | null;
     } | null;
+    engagement_totals?: {
+        tasks?: number;
+        collections?: number;
+        emotions?: number;
+    };
 };
 
 export type TenantOnboardingStatus = {
@@ -620,8 +625,31 @@ function normalizeDashboard(payload: JsonValue | null): DashboardSummary | null
           name: String(payload.active_package.name ?? 'Aktives Package'),
           expires_at: payload.active_package.expires_at ?? null,
           remaining_events: payload.active_package.remaining_events ?? payload.active_package.remainingEvents ?? null,
-        }
+      }
       : null,
+    engagement_totals: {
+      tasks:
+        Number(
+          payload.tasks?.summary?.total ??
+            payload.tasks_total ??
+            payload.engagement?.tasks ??
+            0,
+        ),
+      collections:
+        Number(
+          payload.task_collections?.summary?.total ??
+            payload.collections_total ??
+            payload.engagement?.collections ??
+            0,
+        ),
+      emotions:
+        Number(
+          payload.emotions?.summary?.total ??
+            payload.emotions_total ??
+            payload.engagement?.emotions ??
+            0,
+        ),
+    },
   };
 }
 
@@ -923,6 +951,18 @@ export async function deletePhoto(slug: string, id: number): Promise<void> {
   }
 }
 
+export async function updatePhotoVisibility(slug: string, id: number, visible: boolean): Promise<TenantPhoto> {
+  const response = await authorizedFetch(`${eventEndpoint(slug)}/photos/${id}/visibility`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ visible }),
+  });
+  const data = await jsonOrThrow<PhotoResponse>(response, 'Failed to update photo visibility');
+  return normalizePhoto(data.data);
+}
+
 export async function toggleEvent(slug: string): Promise<TenantEvent> {
   const response = await authorizedFetch(`${eventEndpoint(slug)}/toggle`, { method: 'POST' });
   const data = await jsonOrThrow<{ message: string; data: JsonValue }>(response, 'Failed to toggle event');
@@ -1026,22 +1066,22 @@ export async function getEventToolkit(slug: string): Promise<EventToolkit> {
       active_invites: Number((metrics as JsonValue).active_invites ?? 0),
       engagement_mode: ((metrics as JsonValue).engagement_mode as 'tasks' | 'photo_only') ?? 'tasks',
     },
-    tasks: {
+  tasks: {
-      summary: {
+    summary: {
-        total: Number((tasks as JsonValue)?.summary?.total ?? 0),
+      total: Number((tasks as JsonValue)?.summary?.total ?? 0),
-        completed: Number((tasks as JsonValue)?.summary?.completed ?? 0),
+      completed: Number((tasks as JsonValue)?.summary?.completed ?? 0),
-        pending: Number((tasks as JsonValue)?.summary?.pending ?? 0),
+      pending: Number((tasks as JsonValue)?.summary?.pending ?? 0),
-      },
-      items: Array.isArray((tasks as JsonValue)?.items)
-        ? ((tasks as JsonValue).items as JsonValue[]).map((item) => ({
-            id: Number(item?.id ?? 0),
-            title: String(item?.title ?? ''),
-            description: item?.description !== undefined && item?.description !== null ? String(item.description) : null,
-            is_completed: Boolean(item?.is_completed ?? false),
-            priority: item?.priority !== undefined ? String(item.priority) : null,
-          }))
-        : [],
     },
+    items: Array.isArray((tasks as JsonValue)?.items)
+      ? ((tasks as JsonValue).items as JsonValue[]).map((item) => ({
+          id: Number(item?.id ?? 0),
+          title: String(item?.title ?? ''),
+          description: item?.description !== undefined && item?.description !== null ? String(item.description) : null,
+          is_completed: Boolean(item?.is_completed ?? false),
+          priority: item?.priority !== undefined ? String(item.priority) : null,
+        }))
+      : [],
+  },
     photos: {
       pending: pendingPhotosRaw.map((photo: JsonValue) => normalizePhoto(photo as TenantPhoto)),
       recent: recentPhotosRaw.map((photo: JsonValue) => normalizePhoto(photo as TenantPhoto)),

resources/js/admin/components/AdminLayout.tsx

@@ -1,15 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { cn } from '@/lib/utils';
-import toast from 'react-hot-toast';
-import {
-  ADMIN_HOME_PATH,
-  ADMIN_EVENTS_PATH,
-  ADMIN_SETTINGS_PATH,
-  ADMIN_BILLING_PATH,
-  ADMIN_ENGAGEMENT_PATH,
-} from '../constants';
 import {
   LayoutDashboard,
   CalendarDays,
@@ -17,6 +8,15 @@ import {
   CreditCard,
   Settings as SettingsIcon,
 } from 'lucide-react';
+import toast from 'react-hot-toast';
+import { cn } from '@/lib/utils';
+import {
+  ADMIN_HOME_PATH,
+  ADMIN_EVENTS_PATH,
+  ADMIN_SETTINGS_PATH,
+  ADMIN_BILLING_PATH,
+  ADMIN_ENGAGEMENT_PATH,
+} from '../constants';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { registerApiErrorListener } from '../lib/apiError';
 import { getDashboardSummary, getEvents, getTenantPackagesOverview } from '../api';
@@ -92,27 +92,29 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
   }, [t]);
 
   return (
-    <div className="relative min-h-svh overflow-hidden bg-slate-950 text-white">
+    <div className="relative min-h-svh overflow-hidden bg-gradient-to-br from-rose-50 via-white to-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white">
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.28),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.25),_transparent_65%)]"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_10%_10%,rgba(255,137,170,0.25),transparent_55%),radial-gradient(circle_at_80%_0%,rgba(96,165,250,0.22),transparent_60%)] opacity-60 dark:opacity-30"
       />
-      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900/60 to-[#1d1130]" />
+      <div aria-hidden className="absolute inset-0 bg-gradient-to-b from-white/80 via-white/60 to-transparent dark:from-slate-950 dark:via-slate-950/90 dark:to-slate-950/80" />
       <div className="relative z-10 flex min-h-svh flex-col">
-        <header className="sticky top-0 z-30 px-4 pt-6 sm:px-6">
+        <header className="sticky top-0 z-40 border-b border-slate-200/70 bg-white/90 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80">
-          <div className="mx-auto w-full max-w-6xl rounded-3xl border border-white/15 bg-white/85 text-slate-900 shadow-2xl shadow-rose-400/10 backdrop-blur-xl">
+          <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
-            <div className="flex flex-col gap-6 px-6 py-6 md:flex-row md:items-center md:justify-between">
+            <div className="space-y-1">
+              <p className="text-[10px] font-semibold uppercase tracking-[0.4em] text-rose-500 dark:text-rose-200">{t('app.brand')}</p>
               <div>
-                <p className="text-xs uppercase tracking-[0.35em] text-rose-400">{t('app.brand')}</p>
+                <h1 className="text-xl font-semibold text-slate-900 dark:text-white sm:text-2xl">{title}</h1>
-                <h1 className="font-display text-3xl font-semibold text-slate-900">{title}</h1>
+                {subtitle ? <p className="text-xs text-slate-600 dark:text-slate-300 sm:text-sm">{subtitle}</p> : null}
-                {subtitle ? <p className="mt-1 text-sm text-slate-600">{subtitle}</p> : null}
-              </div>
-              <div className="flex flex-wrap items-center gap-2">
-                <LanguageSwitcher />
-                {actions}
               </div>
             </div>
-            <nav className="hidden items-center gap-2 border-t border-slate-200/70 px-6 py-4 md:flex">
+            <div className="flex flex-wrap items-center gap-2">
+              {actions}
+              <LanguageSwitcher />
+            </div>
+          </div>
+          <nav className="hidden border-t border-slate-200/60 dark:border-white/5 sm:block">
+            <div className="mx-auto flex w-full max-w-6xl items-center gap-1 px-4 py-2 sm:px-6">
               {navItems.map(({ to, labelKey, icon: Icon, end }) => (
                 <NavLink
                   key={to}
@@ -123,10 +125,10 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
                   onTouchStart={() => triggerPrefetch(to)}
                   className={({ isActive }) =>
                     cn(
-                      'flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950',
+                      'flex items-center gap-2 rounded-2xl px-3 py-2 text-xs font-semibold uppercase tracking-wide transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/60',
                       isActive
-                        ? 'bg-rose-600 text-white shadow-md shadow-rose-400/30'
+                        ? 'bg-rose-600 text-white shadow shadow-rose-300/40'
-                        : 'border border-slate-200/80 bg-white text-slate-700 hover:bg-rose-50/80 hover:text-rose-700'
+                        : 'text-slate-500 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'
                     )
                   }
                 >
@@ -134,28 +136,34 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
                   {t(labelKey)}
                 </NavLink>
               ))}
-            </nav>
+            </div>
-          </div>
+          </nav>
         </header>
 
-        <main className="relative z-10 mx-auto w-full max-w-6xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+6.5rem)] pt-6 sm:px-6 md:pb-16">
+        <main className="relative z-10 mx-auto w-full max-w-5xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+5.5rem)] pt-5 sm:px-6 md:pb-16">
-          <div className="grid gap-6">{children}</div>
+          <div className="space-y-5">{children}</div>
         </main>
 
-        <TenantMobileNav items={navItems} />
+        <TenantMobileNav items={navItems} onPrefetch={triggerPrefetch} />
       </div>
     </div>
   );
 }
 
-function TenantMobileNav({ items }: { items: typeof navItems }) {
+function TenantMobileNav({
+  items,
+  onPrefetch,
+}: {
+  items: typeof navItems;
+  onPrefetch: (path: string) => void;
+}) {
   const { t } = useTranslation('common');
 
   return (
     <nav className="md:hidden" aria-label={t('navigation.mobile', { defaultValue: 'Tenant Navigation' })}>
       <div
         aria-hidden
-        className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-16 bg-gradient-to-t from-slate-950/35 via-transparent to-transparent dark:from-black/60"
+        className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-12 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-slate-950 dark:via-slate-950/60 dark:to-transparent"
       />
       <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/80 bg-white/95 px-4 pb-[calc(env(safe-area-inset-bottom,0)+0.75rem)] pt-3 shadow-2xl shadow-rose-300/15 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800/70 dark:bg-slate-950/90">
         <div className="mx-auto flex max-w-xl items-center justify-around gap-1">
@@ -164,9 +172,9 @@ function TenantMobileNav({ items }: { items: typeof navItems }) {
               key={to}
               to={to}
               end={end}
-              onPointerEnter={() => triggerPrefetch(to)}
+              onPointerEnter={() => onPrefetch(to)}
-              onFocus={() => triggerPrefetch(to)}
+              onFocus={() => onPrefetch(to)}
-              onTouchStart={() => triggerPrefetch(to)}
+              onTouchStart={() => onPrefetch(to)}
               className={({ isActive }) =>
                 cn(
                   'flex flex-col items-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-slate-300 dark:focus-visible:ring-offset-slate-950',

resources/js/admin/components/tenant/action-grid.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ActionItem {
+  key: string;
+  label: string;
+  description: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+interface ActionGridProps {
+  items: ActionItem[];
+  columns?: 1 | 2;
+}
+
+export function ActionGrid({ items, columns = 2 }: ActionGridProps) {
+  return (
+    <div className={cn('grid gap-3', columns === 2 ? 'sm:grid-cols-2' : '')}>
+      {items.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          onClick={item.onClick}
+          disabled={item.disabled}
+          className="group flex flex-col gap-1.5 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-rose-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-rose-300 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-white/5"
+        >
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
+            {item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
+            {item.label}
+          </div>
+          <p className="text-xs text-slate-600 dark:text-slate-400">{item.description}</p>
+        </button>
+      ))}
+    </div>
+  );
+}

resources/js/admin/components/tenant/frosted-surface.tsx

@@ -4,7 +4,7 @@ import { Card } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 
 export const frostedCardClass = cn(
-  'border border-white/15 bg-white/92 text-slate-900 shadow-lg shadow-rose-400/10 backdrop-blur-lg',
+  'border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
   'dark:border-slate-800/70 dark:bg-slate-950/85 dark:text-slate-100'
 );
 
@@ -22,7 +22,7 @@ export function FrostedSurface({ className, ...props }: FrostedSurfaceProps) {
   return (
     <div
       className={cn(
-        'rounded-2xl border border-white/15 bg-white/88 text-slate-900 shadow-lg shadow-rose-300/10 backdrop-blur-lg',
+        'rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
         'dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100',
         className
       )}

resources/js/admin/components/tenant/hero-card.tsx

@@ -29,31 +29,27 @@ export function TenantHeroCard({
   return (
     <Card
       className={cn(
-        'relative overflow-hidden border border-slate-200/80 bg-white text-slate-900 shadow-xl shadow-rose-200/30 backdrop-blur',
+        'relative overflow-hidden border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/50 backdrop-blur dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100',
-        'dark:border-white/10 dark:bg-slate-950/90 dark:text-slate-100',
         className
       )}
     >
-      <div
+      <CardContent className="relative z-10 flex flex-col gap-6 px-5 py-6 sm:px-6 lg:flex-row lg:items-start lg:justify-between">
-        aria-hidden
+        <div className="space-y-4">
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.18),_transparent_55%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.16),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite] dark:hidden"
-      />
-      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-rose-50/70 via-white to-sky-50/70 dark:hidden" />
-      <div aria-hidden className="absolute inset-0 hidden bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay dark:block" />
-
-      <CardContent className="relative z-10 flex flex-col gap-8 px-6 py-8 lg:flex-row lg:items-start lg:justify-between lg:px-10 lg:py-12">
-        <div className="max-w-2xl space-y-6">
           {badge ? (
-            <span className="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-rose-600 dark:border-white/30 dark:bg-white/15 dark:text-white">
+            <span className="inline-flex items-center gap-2 rounded-full bg-rose-100/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-rose-600 dark:bg-white/15 dark:text-white">
               {badge}
             </span>
           ) : null}
 
-          <div className="space-y-3 text-slate-700 dark:text-slate-100">
+          <div className="space-y-2 text-slate-700 dark:text-slate-100">
-            <h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-4xl">{title}</h1>
+            <h1 className="font-display text-2xl font-semibold leading-tight text-slate-900 dark:text-white sm:text-3xl">
-            {description ? <p className="text-sm text-slate-600 dark:text-white/75 sm:text-base">{description}</p> : null}
+              {title}
+            </h1>
+            {description ? (
+              <p className="text-sm text-slate-600 dark:text-white/80">{description}</p>
+            ) : null}
             {supporting?.map((paragraph) => (
-              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/75 sm:text-base">
+              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/70">
                 {paragraph}
               </p>
             ))}
@@ -61,14 +57,18 @@ export function TenantHeroCard({
           </div>
 
           {(primaryAction || secondaryAction) && (
-            <div className="flex flex-wrap gap-3">
+            <div className="flex flex-wrap gap-2">
               {primaryAction}
               {secondaryAction}
             </div>
           )}
         </div>
 
-        {aside ? <div className="w-full max-w-sm">{aside}</div> : null}
+        {aside ? (
+          <div className="rounded-2xl border border-slate-200/70 bg-white/90 p-4 text-sm dark:border-white/10 dark:bg-white/5">
+            {aside}
+          </div>
+        ) : null}
       </CardContent>
     </Card>
   );

resources/js/admin/components/tenant/index.ts

@@ -3,3 +3,6 @@ export { FrostedCard, FrostedSurface, frostedCardClass } from './frosted-surface
 export { ChecklistRow } from './checklist-row';
 export type { ChecklistStep } from './onboarding-checklist-card';
 export { TenantOnboardingChecklistCard } from './onboarding-checklist-card';
+export { SectionCard, SectionHeader } from './section-card';
+export { StatCarousel } from './stat-carousel';
+export { ActionGrid } from './action-grid';

resources/js/admin/components/tenant/section-card.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
+  as?: 'section' | 'div';
+}
+
+export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
+  return (
+    <Tag
+      className={cn(
+        'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface SectionHeaderProps {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  endSlot?: React.ReactNode;
+  className?: string;
+}
+
+export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
+  return (
+    <div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
+      <div>
+        {eyebrow ? (
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
+        ) : null}
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
+        {description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
+      </div>
+      {endSlot}
+    </div>
+  );
+}

resources/js/admin/components/tenant/stat-carousel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface StatItem {
+  key: string;
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+  hint?: string;
+}
+
+interface StatCarouselProps {
+  items: StatItem[];
+}
+
+export function StatCarousel({ items }: StatCarouselProps) {
+  return (
+    <div className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 sm:mx-0 sm:grid sm:snap-none sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-4">
+      {items.map((item) => (
+        <div key={item.key} className="min-w-[70%] snap-center sm:min-w-0">
+          <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
+            <div className="flex items-center justify-between">
+              <span className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{item.label}</span>
+              {item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
+            </div>
+            <div className="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{item.value}</div>
+            {item.hint ? (
+              <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">{item.hint}</p>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

resources/js/admin/pages/BillingPage.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 
 import { AdminLayout } from '../components/AdminLayout';
@@ -13,10 +12,11 @@ import { getTenantPackagesOverview, getTenantPaddleTransactions, PaddleTransacti
 import { isAuthError } from '../auth/tokens';
 import {
   TenantHeroCard,
-  FrostedCard,
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
 } from '../components/tenant';
 
 type PackageWarning = { id: string; tone: 'warning' | 'danger'; message: string };
@@ -196,25 +196,20 @@ export default function BillingPage() {
         <BillingSkeleton />
       ) : (
         <>
-          <FrostedCard className="mt-6 border border-white/20">
+          <SectionCard className="mt-6 space-y-5">
-            <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <SectionHeader
-              <div>
+              eyebrow={t('billing.sections.overview.badge', 'Aktuelles Paket')}
-                <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+              title={t('billing.sections.overview.title')}
-                  <Sparkles className="h-5 w-5 text-pink-500" />
+              description={t('billing.sections.overview.description')}
-                  {t('billing.sections.overview.title')}
+              endSlot={(
-                </CardTitle>
+                <Badge className={activePackage ? 'bg-pink-500/10 text-pink-700 dark:bg-pink-500/20 dark:text-pink-200' : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
-                <CardDescription className="text-sm text-slate-600">
+                  {activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
-                  {t('billing.sections.overview.description')}
+                </Badge>
-                </CardDescription>
+              )}
-              </div>
+            />
-              <Badge className={activePackage ? 'bg-pink-500/10 text-pink-700 dark:bg-pink-500/20 dark:text-pink-200' : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
+            {activePackage ? (
-                {activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
+              <div className="space-y-4">
-              </Badge>
+                {activeWarnings.length > 0 && (
-            </CardHeader>
-            <CardContent>
-              {activePackage ? (
-                <div className="space-y-4">
-                  {activeWarnings.length > 0 && (
                     <div className="space-y-2">
                       {activeWarnings.map((warning) => (
                         <Alert
@@ -263,20 +258,15 @@ export default function BillingPage() {
               ) : (
                 <EmptyState message={t('billing.sections.overview.empty')} />
               )}
-            </CardContent>
+            </SectionCard>
-          </FrostedCard>
 
-          <FrostedCard className="border border-white/20">
+          <SectionCard className="space-y-4">
-            <CardHeader>
+            <SectionHeader
-              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+              eyebrow={t('billing.sections.packages.badge', 'Pakete')}
-                <Sparkles className="h-5 w-5 text-amber-500" />
+              title={t('billing.sections.packages.title')}
-                {t('billing.sections.packages.title')}
+              description={t('billing.sections.packages.description')}
-              </CardTitle>
+            />
-              <CardDescription className="text-sm text-slate-600">
+            <div className="space-y-3">
-                {t('billing.sections.packages.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
               {packages.length === 0 ? (
                 <EmptyState message={t('billing.sections.packages.empty')} />
               ) : (
@@ -295,20 +285,16 @@ export default function BillingPage() {
                   );
                 })
               )}
-            </CardContent>
+            </div>
-          </FrostedCard>
+          </SectionCard>
 
-          <FrostedCard className="border border-white/20">
+          <SectionCard className="space-y-4">
-            <CardHeader>
+            <SectionHeader
-              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+              eyebrow={t('billing.sections.transactions.badge', 'Transaktionen')}
-                <Sparkles className="h-5 w-5 text-sky-500" />
+              title={t('billing.sections.transactions.title')}
-                {t('billing.sections.transactions.title')}
+              description={t('billing.sections.transactions.description')}
-              </CardTitle>
+            />
-              <CardDescription className="text-sm text-slate-600">
+            <div className="space-y-3">
-                {t('billing.sections.transactions.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
               {transactions.length === 0 ? (
                 <EmptyState message={t('billing.sections.transactions.empty')} />
               ) : (
@@ -341,8 +327,8 @@ export default function BillingPage() {
                   )}
                 </Button>
               )}
-            </CardContent>
+            </div>
-          </FrostedCard>
+          </SectionCard>
 
         </>
       )}

resources/js/admin/pages/DashboardPage.tsx

@@ -27,6 +27,10 @@ import {
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
+  StatCarousel,
+  ActionGrid,
 } from '../components/tenant';
 import type { ChecklistStep } from '../components/tenant';
 
@@ -267,6 +271,44 @@ export default function DashboardPage() {
   }, [summary, events]);
 
   const primaryEventSlug = readiness.primaryEventSlug;
+  const statItems = React.useMemo(
+    () => ([
+      {
+        key: 'activeEvents',
+        label: translate('overview.stats.activeEvents'),
+        value: summary?.active_events ?? publishedEvents.length,
+        hint: translate('overview.stats.publishedHint', { count: publishedEvents.length }),
+        icon: <CalendarDays className="h-4 w-4" />,
+      },
+      {
+        key: 'newPhotos',
+        label: translate('overview.stats.newPhotos'),
+        value: summary?.new_photos ?? 0,
+        icon: <Camera className="h-4 w-4" />,
+      },
+      {
+        key: 'taskProgress',
+        label: translate('overview.stats.taskProgress'),
+        value: `${Math.round(summary?.task_progress ?? 0)}%`,
+        icon: <Users className="h-4 w-4" />,
+      },
+      activePackage
+        ? {
+            key: 'package',
+            label: translate('overview.stats.activePackage', 'Aktives Paket'),
+            value: activePackage.package_name,
+            icon: <PackageIcon className="h-4 w-4" />,
+          }
+        : null,
+    ].filter(Boolean) as {
+      key: string;
+      label: string;
+      value: string | number;
+      hint?: string;
+      icon?: React.ReactNode;
+    }[]),
+    [summary, publishedEvents.length, translate, activePackage],
+  );
 
   const onboardingChecklist = React.useMemo<ChecklistStep[]>(() => {
     const steps: ChecklistStep[] = [
@@ -428,7 +470,7 @@ export default function DashboardPage() {
     </Button>
   );
   const heroAside = (
-    <FrostedSurface className="w-full rounded-2xl border-white/30 bg-white/90 p-5 text-slate-900 shadow-lg shadow-rose-300/20 backdrop-blur">
+    <FrostedSurface className="w-full rounded-2xl border-slate-200 bg-white p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
       <div className="flex items-center justify-between text-sm font-medium text-slate-700">
         <span>{onboardingCardTitle}</span>
         <span>
@@ -441,32 +483,58 @@ export default function DashboardPage() {
   );
   const readinessCompleteLabel = translate('readiness.complete', 'Erledigt');
   const readinessPendingLabel = translate('readiness.pending', 'Noch offen');
+  const quickActionItems = React.useMemo(
+    () => [
+      {
+        key: 'create',
+        label: translate('quickActions.createEvent.label'),
+        description: translate('quickActions.createEvent.description'),
+        icon: <Plus className="h-5 w-5" />,
+        onClick: () => navigate(ADMIN_EVENT_CREATE_PATH),
+      },
+      {
+        key: 'photos',
+        label: translate('quickActions.moderatePhotos.label'),
+        description: translate('quickActions.moderatePhotos.description'),
+        icon: <Camera className="h-5 w-5" />,
+        onClick: () => navigate(ADMIN_EVENTS_PATH),
+      },
+      {
+        key: 'tasks',
+        label: translate('quickActions.organiseTasks.label'),
+        description: translate('quickActions.organiseTasks.description'),
+        icon: <ClipboardList className="h-5 w-5" />,
+        onClick: () => navigate(buildEngagementTabPath('tasks')),
+      },
+      {
+        key: 'packages',
+        label: translate('quickActions.managePackages.label'),
+        description: translate('quickActions.managePackages.description'),
+        icon: <Sparkles className="h-5 w-5" />,
+        onClick: () => navigate(ADMIN_BILLING_PATH),
+      },
+      {
+        key: 'marketing',
+        label: marketingDashboardLabel,
+        description: marketingDashboardDescription,
+        icon: <ArrowUpRight className="h-5 w-5" />,
+        onClick: () => window.location.assign('/dashboard'),
+      },
+    ],
+    [translate, navigate, marketingDashboardLabel, marketingDashboardDescription],
+  );
 
-  const actions = (
+  const layoutActions = (
-    <>
+    <Button
-      <Button
+      className="rounded-full bg-brand-rose px-4 text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
-        className="bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
+      onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
-        onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
+    >
-      >
+      <Plus className="h-4 w-4" /> {translate('actions.newEvent')}
-        <Plus className="h-4 w-4" /> {translate('actions.newEvent')}
+    </Button>
-      </Button>
-      <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-brand-rose-soft text-brand-rose">
-        <CalendarDays className="h-4 w-4" /> {translate('actions.allEvents')}
-      </Button>
-      {events.length === 0 && (
-        <Button
-          variant="outline"
-          onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
-          className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
-        >
-          <Sparkles className="h-4 w-4" /> {translate('actions.guidedSetup')}
-        </Button>
-      )}
-    </>
   );
 
   return (
-    <AdminLayout title={greetingTitle} subtitle={subtitle} actions={actions}>
+    <AdminLayout title={greetingTitle} subtitle={subtitle} actions={layoutActions}>
       {errorMessage && (
         <Alert variant="destructive">
           <AlertTitle>{t('dashboard.alerts.errorTitle')}</AlertTitle>
@@ -481,17 +549,17 @@ export default function DashboardPage() {
           <TenantHeroCard
             badge={heroBadge}
             title={greetingTitle}
-            description={subtitle}
+            description={heroDescription}
-            supporting={[heroDescription, heroSupportingCopy]}
+            supporting={[heroSupportingCopy]}
             primaryAction={heroPrimaryAction}
             secondaryAction={heroSecondaryAction}
             aside={heroAside}
           />
 
           {events.length === 0 && (
-            <Card className="border-0 bg-brand-card shadow-brand-primary">
+            <Card className="border-none bg-white/90 shadow-lg shadow-rose-100/50">
-              <CardHeader className="space-y-3">
+              <CardHeader className="space-y-2">
-                <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+                <CardTitle className="flex items-center gap-2 text-base font-semibold text-slate-900">
                   <Sparkles className="h-5 w-5 text-brand-rose" />
                   {translate('welcomeCard.title')}
                 </CardTitle>
@@ -499,14 +567,12 @@ export default function DashboardPage() {
                   {translate('welcomeCard.summary')}
                 </CardDescription>
               </CardHeader>
-              <CardContent className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+              <CardContent className="flex flex-col gap-3 text-sm text-slate-600">
-                <div className="space-y-2 text-sm text-slate-600">
+                <p>{translate('welcomeCard.body1')}</p>
-                  <p>{translate('welcomeCard.body1')}</p>
+                <p>{translate('welcomeCard.body2')}</p>
-                  <p>{translate('welcomeCard.body2')}</p>
-                </div>
                 <Button
-                  size="lg"
+                  size="sm"
-                  className="rounded-full bg-rose-500 text-white shadow-lg shadow-rose-400/40 hover:bg-rose-500/90"
+                  className="self-start rounded-full bg-brand-rose px-5 text-white shadow-md shadow-rose-300/40"
                   onClick={() => navigate(ADMIN_WELCOME_BASE_PATH)}
                 >
                   {translate('welcomeCard.cta')}
@@ -515,47 +581,19 @@ export default function DashboardPage() {
             </Card>
           )}
 
-          <Card className="border-0 bg-brand-card shadow-brand-primary">
+          <SectionCard className="space-y-3">
-            <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <SectionHeader
-              <div>
+              eyebrow={translate('overview.title')}
-                <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+              title={translate('overview.title')}
-                  <Sparkles className="h-5 w-5 text-brand-rose" />
+              description={translate('overview.description')}
-                  {translate('overview.title')}
+              endSlot={(
-                </CardTitle>
+                <Badge className="bg-brand-rose-soft text-brand-rose">
-                <CardDescription className="text-sm text-slate-600">
+                  {activePackage?.package_name ?? translate('overview.noPackage')}
-                  {translate('overview.description')}
+                </Badge>
-                </CardDescription>
+              )}
-              </div>
+            />
-              <Badge className="bg-brand-rose-soft text-brand-rose">
+            <StatCarousel items={statItems} />
-                {activePackage?.package_name ?? translate('overview.noPackage')}
+          </SectionCard>
-              </Badge>
-            </CardHeader>
-            <CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              <StatCard
-                label={translate('overview.stats.activeEvents')}
-                value={summary?.active_events ?? publishedEvents.length}
-                hint={translate('overview.stats.publishedHint', { count: publishedEvents.length })}
-                icon={<CalendarDays className="h-5 w-5 text-brand-rose" />}
-              />
-              <StatCard
-                label={translate('overview.stats.newPhotos')}
-                value={summary?.new_photos ?? 0}
-                icon={<Camera className="h-5 w-5 text-fuchsia-500" />}
-              />
-              <StatCard
-                label={translate('overview.stats.taskProgress')}
-                value={`${Math.round(summary?.task_progress ?? 0)}%`}
-                icon={<Users className="h-5 w-5 text-amber-500" />}
-              />
-              {activePackage ? (
-                <StatCard
-                  label={translate('overview.stats.activePackage')}
-                  value={activePackage.package_name}
-                  icon={<Sparkles className="h-5 w-5 text-sky-500" />}
-                />
-              ) : null}
-            </CardContent>
-          </Card>
 
           {primaryEventLimits ? (
             <Card className="border-0 bg-brand-card shadow-brand-primary">
@@ -627,48 +665,14 @@ export default function DashboardPage() {
             </Card>
           ) : null}
 
-          <Card className="border-0 bg-brand-card shadow-brand-primary">
+          <SectionCard className="space-y-3">
-            <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <SectionHeader
-              <div>
+              eyebrow={translate('quickActions.title')}
-                <CardTitle className="text-xl text-slate-900">{translate('quickActions.title')}</CardTitle>
+              title={translate('quickActions.title')}
-                <CardDescription className="text-sm text-slate-600">
+              description={translate('quickActions.description')}
-                  {translate('quickActions.description')}
+            />
-                </CardDescription>
+            <ActionGrid items={quickActionItems} />
-              </div>
+          </SectionCard>
-            </CardHeader>
-            <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-              <QuickAction
-                icon={<Plus className="h-5 w-5" />}
-                label={translate('quickActions.createEvent.label')}
-                description={translate('quickActions.createEvent.description')}
-                onClick={() => navigate(ADMIN_EVENT_CREATE_PATH)}
-              />
-              <QuickAction
-                icon={<Camera className="h-5 w-5" />}
-                label={translate('quickActions.moderatePhotos.label')}
-                description={translate('quickActions.moderatePhotos.description')}
-                onClick={() => navigate(ADMIN_EVENTS_PATH)}
-              />
-              <QuickAction
-                icon={<Users className="h-5 w-5" />}
-                label={translate('quickActions.organiseTasks.label')}
-                description={translate('quickActions.organiseTasks.description')}
-                onClick={() => navigate(buildEngagementTabPath('tasks'))}
-              />
-              <QuickAction
-                icon={<Sparkles className="h-5 w-5" />}
-                label={translate('quickActions.managePackages.label')}
-                description={translate('quickActions.managePackages.description')}
-                onClick={() => navigate(ADMIN_BILLING_PATH)}
-              />
-              <QuickAction
-                icon={<ArrowUpRight className="h-5 w-5" />}
-                label={marketingDashboardLabel}
-                description={marketingDashboardDescription}
-                onClick={() => window.location.assign('/dashboard')}
-              />
-            </CardContent>
-          </Card>
 
           <TenantOnboardingChecklistCard
             title={onboardingCardTitle}
@@ -683,20 +687,20 @@ export default function DashboardPage() {
             fallbackActionLabel={onboardingFallbackCta}
           />
 
-          <Card className="border-0 bg-brand-card shadow-brand-primary">
+          <section className="space-y-4 rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner">
-            <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
               <div>
-                <CardTitle className="text-xl text-slate-900">{translate('upcoming.title')}</CardTitle>
+                <p className="text-xs uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">
-                <CardDescription className="text-sm text-slate-600">
+                  {translate('upcoming.title')}
-                  {translate('upcoming.description')}
+                </p>
-                </CardDescription>
+                <p className="text-sm text-slate-600 dark:text-slate-300">{translate('upcoming.description')}</p>
               </div>
-              <Button variant="outline" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
+              <Button variant="outline" size="sm" onClick={() => navigate(ADMIN_SETTINGS_PATH)}>
                 <Settings className="h-4 w-4" />
                 {translate('upcoming.settings')}
               </Button>
-            </CardHeader>
+            </div>
-            <CardContent className="space-y-3">
+            <div className="space-y-3">
               {upcomingEvents.length === 0 ? (
                 <EmptyState
                   message={translate('upcoming.empty.message')}
@@ -719,8 +723,8 @@ export default function DashboardPage() {
                   />
                 ))
               )}
-            </CardContent>
+            </div>
-          </Card>
+          </section>
         </>
       )}
     </AdminLayout>
@@ -933,30 +937,6 @@ function StatCard({
   );
 }
 
-function QuickAction({
-  icon,
-  label,
-  description,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  description: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="group flex flex-col items-start gap-2 rounded-2xl border border-slate-100 bg-white/85 p-4 text-left shadow-sm transition duration-200 ease-out hover:-translate-y-0.5 hover:border-brand-rose-soft hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-rose/40 dark:border-slate-800/70 dark:bg-slate-950/80"
-    >
-      <span className="rounded-full bg-brand-rose-soft p-2 text-brand-rose shadow-sm shadow-rose-200/60 transition-transform duration-200 group-hover:scale-105">{icon}</span>
-      <span className="text-sm font-semibold text-slate-900 dark:text-slate-100">{label}</span>
-      <span className="text-xs text-slate-600 dark:text-slate-400">{description}</span>
-    </button>
-  );
-}
-
 function UpcomingEventRow({
   event,
   onView,
@@ -979,7 +959,7 @@ function UpcomingEventRow({
     : labels.noDate;
 
   return (
-    <div className="flex flex-col gap-2 rounded-2xl border border-sky-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-white/30 dark:border-white/10 dark:bg-white/5 sm:flex-row sm:items-center sm:justify-between">
       <div className="flex flex-col gap-1">
         <span className="text-xs font-medium uppercase tracking-wide text-slate-500">{formattedDate}</span>
         <div className="flex items-center gap-2">
@@ -990,7 +970,7 @@ function UpcomingEventRow({
             size="sm"
             variant="outline"
             onClick={onView}
-            className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
+            className="rounded-full border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
           >
             {labels.open}
           </Button>

resources/js/admin/pages/EngagementPage.tsx

@@ -9,11 +9,16 @@ import { AdminLayout } from '../components/AdminLayout';
 import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   TenantHeroCard,
-  FrostedCard,
+  TenantOnboardingChecklistCard,
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
+  StatCarousel,
+  ActionGrid,
 } from '../components/tenant';
+import { getDashboardSummary } from '../api';
 import { TasksSection } from './TasksPage';
 import { TaskCollectionsSection } from './TaskCollectionsPage';
 import { EmotionsSection } from './EmotionsPage';
@@ -32,6 +37,7 @@ export default function EngagementPage() {
   const { t } = useTranslation('management');
   const { t: tc } = useTranslation('common');
   const [searchParams, setSearchParams] = useSearchParams();
+  const [engagementStats, setEngagementStats] = React.useState<{ tasks?: number; collections?: number; emotions?: number } | null>(null);
 
   const initialTab = React.useMemo(() => ensureValidTab(searchParams.get('tab')), [searchParams]);
   const [activeTab, setActiveTab] = React.useState<EngagementTab>(initialTab);
@@ -48,6 +54,22 @@ export default function EngagementPage() {
     },
     [setSearchParams]
   );
+  React.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const summary = await getDashboardSummary();
+        if (!cancelled && summary?.engagement_totals) {
+          setEngagementStats(summary.engagement_totals);
+        }
+      } catch {
+        /* ignore */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   const heading = tc('navigation.engagement');
   const heroDescription = t('engagement.hero.description', {
@@ -76,7 +98,7 @@ export default function EngagementPage() {
     </Button>
   );
   const heroAside = (
-    <FrostedSurface className="space-y-4 border-white/20 p-5 text-slate-900 shadow-md shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/80">
+    <FrostedSurface className="space-y-4 border-slate-200 p-5 text-slate-900 shadow-md shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
       <div>
         <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">{t('engagement.hero.activeTab', { defaultValue: 'Aktiver Bereich' })}</p>
         <p className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{t(`engagement.tabs.${activeTab}.title`, { defaultValue: tc(`navigation.${activeTab}`) })}</p>
@@ -102,13 +124,55 @@ export default function EngagementPage() {
         aside={heroAside}
       />
 
-      <FrostedCard className="mt-6 border border-white/20">
+      <SectionCard className="mt-6 space-y-6">
-        <CardHeader className="px-0 pt-0">
+        <SectionHeader
-          <CardTitle className="sr-only">{heading}</CardTitle>
+          eyebrow={t('engagement.sections.active.badge', 'Active Toolkit')}
-        </CardHeader>
+          title={t('engagement.sections.active.title', 'Aufgaben & Co.')}
-        <CardContent className="space-y-6">
+          description={t('engagement.sections.active.description', 'Verwalte Aufgaben, Kollektionen und Emotionen an einem Ort.')}
-          <Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
+        />
-            <TabsList className="grid w-full grid-cols-3 rounded-2xl border border-white/25 bg-white/80 p-1 shadow-inner shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-900/70">
+        <StatCarousel
+          items={[
+            {
+              key: 'tasks',
+              label: t('engagement.stats.tasks', 'Aufgaben'),
+              value: engagementStats?.tasks ?? '—',
+            },
+            {
+              key: 'collections',
+              label: t('engagement.stats.collections', 'Kollektionen'),
+              value: engagementStats?.collections ?? '—',
+            },
+            {
+              key: 'emotions',
+              label: t('engagement.stats.emotions', 'Emotionen'),
+              value: engagementStats?.emotions ?? '—',
+            },
+          ]}
+        />
+        <ActionGrid
+          items={[
+            {
+              key: 'newTask',
+              label: t('engagement.actions.newTask', 'Neue Aufgabe'),
+              description: t('engagement.actions.newTask.description', 'Starte mit einer neuen Idee oder Vorlage.'),
+              onClick: () => handleTabChange('tasks'),
+            },
+            {
+              key: 'collection',
+              label: t('engagement.actions.collection', 'Kollektion bauen'),
+              description: t('engagement.actions.collection.description', 'Fasse Aufgaben zu Events zusammen.'),
+              onClick: () => handleTabChange('collections'),
+            },
+            {
+              key: 'emotion',
+              label: t('engagement.actions.emotion', 'Emotion hinzufügen'),
+              description: t('engagement.actions.emotion.description', 'Markiere Momente zur Moderation.'),
+              onClick: () => handleTabChange('emotions'),
+            },
+          ]}
+        />
+        <Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
+          <TabsList className="grid w-full grid-cols-3 rounded-2xl border border-white/25 bg-white/80 p-1 shadow-inner shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-900/70">
               {(['tasks', 'collections', 'emotions'] as const).map((tab) => (
                 <TabsTrigger
                   key={tab}
@@ -132,8 +196,7 @@ export default function EngagementPage() {
               <EmotionsSection embedded />
             </TabsContent>
           </Tabs>
-        </CardContent>
+      </SectionCard>
-      </FrostedCard>
     </AdminLayout>
   );
 }

resources/js/admin/pages/EventDetailPage.tsx

@@ -37,6 +37,7 @@ import {
   getEventToolkit,
   toggleEvent,
   submitTenantFeedback,
+  updatePhotoVisibility,
 } from '../api';
 import { buildLimitWarnings } from '../lib/limitWarnings';
 import { getApiErrorMessage } from '../lib/apiError';
@@ -49,6 +50,11 @@ import {
   ADMIN_EVENT_PHOTOS_PATH,
   ADMIN_EVENT_TASKS_PATH,
 } from '../constants';
+import {
+  SectionCard,
+  SectionHeader,
+  ActionGrid,
+} from '../components/tenant';
 
 type EventDetailPageProps = {
   mode?: 'detail' | 'toolkit';
@@ -202,15 +208,15 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
 
   if (!slug) {
     return (
-      <AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
+    <AdminLayout title={t('events.errors.notFoundTitle', 'Event nicht gefunden')} subtitle={t('events.errors.notFoundCopy', 'Bitte wähle ein Event aus der Übersicht.')} actions={actions}>
-        <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
+      <SectionCard>
-          <CardContent className="p-6 text-sm text-slate-600">
+        <p className="text-sm text-slate-600 dark:text-slate-300">
-            {t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
+          {t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
-          </CardContent>
+        </p>
-        </Card>
+      </SectionCard>
-      </AdminLayout>
+    </AdminLayout>
-    );
+  );
-  }
+}
 
   const limitWarnings = React.useMemo(
     () => (event?.limits ? buildLimitWarnings(event.limits, (key, options) => tCommon(`limits.${key}`, options)) : []),
@@ -294,20 +300,21 @@ export default function EventDetailPage({ mode = 'detail' }: EventDetailPageProp
 
           <div className="grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,0.8fr)]">
             <PendingPhotosCard
+              slug={event.slug}
               photos={toolkitData?.photos.pending ?? []}
               navigateToModeration={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
             />
-            <RecentUploadsCard photos={toolkitData?.photos.recent ?? []} />
+            <RecentUploadsCard slug={event.slug} photos={toolkitData?.photos.recent ?? []} />
           </div>
 
           <FeedbackCard slug={event.slug} />
         </div>
       ) : (
-        <Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
+        <SectionCard>
-          <CardContent className="p-6 text-sm text-slate-600">
+          <p className="text-sm text-slate-600 dark:text-slate-300">
             {t('events.errors.notFoundBody', 'Ohne gültige Kennung können wir keine Daten laden. Kehre zur Eventliste zurück und wähle dort ein Event aus.')}
-          </CardContent>
+          </p>
-        </Card>
+        </SectionCard>
       )}
     </AdminLayout>
   );
@@ -335,17 +342,13 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
       : t('events.status.archived', 'Archiviert');
 
   return (
-    <Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
+    <SectionCard className="space-y-4">
-      <CardHeader className="space-y-2">
+      <SectionHeader
-        <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+        eyebrow={t('events.workspace.sections.statusBadge', 'Status')}
-          <Sparkles className="h-5 w-5 text-pink-500" />
+        title={t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
-          {t('events.workspace.sections.statusTitle', 'Eventstatus & Sichtbarkeit')}
+        description={t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
-        </CardTitle>
+      />
-        <CardDescription className="text-sm text-slate-600">
+      <div className="space-y-4 text-sm text-slate-700 dark:text-slate-300">
-          {t('events.workspace.sections.statusSubtitle', 'Aktiviere dein Event für Gäste oder verstecke es vorübergehend.')}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4 text-sm text-slate-700">
         <InfoRow icon={<Sparkles className="h-4 w-4 text-pink-500" />} label={t('events.workspace.fields.status', 'Status')} value={statusLabel} />
         <InfoRow icon={<Circle className="h-4 w-4 text-amber-500" />} label={t('events.workspace.fields.active', 'Aktiv für Gäste')} value={event.is_active ? t('events.workspace.activeYes', 'Ja') : t('events.workspace.activeNo', 'Nein')} />
         <InfoRow icon={<CalendarIcon />} label={t('events.workspace.fields.date', 'Eventdatum')} value={formatDate(event.event_date)} />
@@ -380,88 +383,67 @@ function StatusCard({ event, stats, busy, onToggle }: { event: TenantEvent; stat
             {event.is_active ? t('events.workspace.actions.pause', 'Event pausieren') : t('events.workspace.actions.activate', 'Event aktivieren')}
           </Button>
         </div>
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 
 function QuickActionsCard({ slug, busy, onToggle, navigate }: { slug: string; busy: boolean; onToggle: () => void | Promise<void>; navigate: ReturnType<typeof useNavigate> }) {
   const { t } = useTranslation('management');
 
-  const actions = [
+  const gridItems = [
     {
+      key: 'photos',
       icon: <Camera className="h-4 w-4" />,
       label: t('events.quickActions.moderate', 'Fotos moderieren'),
+      description: t('events.quickActions.moderateDesc', 'Prüfe Uploads und veröffentliche Highlights.'),
       onClick: () => navigate(ADMIN_EVENT_PHOTOS_PATH(slug)),
     },
     {
+      key: 'tasks',
       icon: <Sparkles className="h-4 w-4" />,
       label: t('events.quickActions.tasks', 'Aufgaben bearbeiten'),
+      description: t('events.quickActions.tasksDesc', 'Passe Story-Prompts und Moderation an.'),
       onClick: () => navigate(ADMIN_EVENT_TASKS_PATH(slug)),
     },
     {
+      key: 'invites',
       icon: <QrCode className="h-4 w-4" />,
       label: t('events.quickActions.invites', 'Layouts & QR verwalten'),
+      description: t('events.quickActions.invitesDesc', 'Aktualisiere QR-Kits und Einladungslayouts.'),
       onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=layout`),
     },
     {
+      key: 'roles',
       icon: <Users className="h-4 w-4" />,
       label: t('events.quickActions.roles', 'Team & Rollen anpassen'),
+      description: t('events.quickActions.rolesDesc', 'Verwalte Moderatoren und Co-Leads.'),
       onClick: () => navigate(ADMIN_EVENT_MEMBERS_PATH(slug)),
     },
     {
+      key: 'print',
       icon: <Printer className="h-4 w-4" />,
       label: t('events.quickActions.print', 'Layouts als PDF drucken'),
+      description: t('events.quickActions.printDesc', 'Exportiere QR-Sets für den Druck.'),
       onClick: () => navigate(`${ADMIN_EVENT_INVITES_PATH(slug)}?tab=export`),
     },
-    {
-      icon: <CheckCircle2 className="h-4 w-4" />,
-      label: t('events.quickActions.toggle', 'Status ändern'),
-      onClick: () => { void onToggle(); },
-      disabled: busy,
-    },
   ];
 
   return (
-    <Card className="border-0 bg-white/90 shadow-xl shadow-violet-100/60">
+    <SectionCard className="space-y-4">
-      <CardHeader className="space-y-1">
+      <SectionHeader
-        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
+        eyebrow={t('events.quickActions.badge', 'Schnellaktionen')}
-          <Sparkles className="h-5 w-5 text-violet-500" />
+        title={t('events.quickActions.title', 'Schnellaktionen')}
-          {t('events.quickActions.title', 'Schnellaktionen')}
+        description={t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
-        </CardTitle>
+      />
-        <CardDescription className="text-sm text-slate-600">
+      <ActionGrid items={gridItems} columns={1} />
-          {t('events.quickActions.subtitle', 'Nutze die wichtigsten Schritte vor und während deines Events.')}
+      <div className="flex flex-wrap gap-2">
-        </CardDescription>
+        <Button onClick={() => { void onToggle(); }} disabled={busy} variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
-      </CardHeader>
+          {busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle2 className="mr-2 h-4 w-4" />}
-      <CardContent className="space-y-2">
+          {t('events.quickActions.toggle', 'Status ändern')}
-        {actions.map((action, index) => (
+        </Button>
-          <button
+      </div>
-            key={index}
+    </SectionCard>
-            type="button"
-            onClick={() => {
-              if (action.disabled) {
-                return;
-              }
-
-              const result = action.onClick();
-              if (result instanceof Promise) {
-                void result;
-              }
-            }}
-            disabled={action.disabled}
-            className="flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3 text-left text-sm text-slate-700 transition hover:border-violet-200 hover:bg-violet-50 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <span className="flex items-center gap-2">
-              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-600">
-                {action.icon}
-              </span>
-              {action.label}
-            </span>
-            <ChevronRight className="h-4 w-4 text-slate-400" />
-          </button>
-        ))}
-      </CardContent>
-    </Card>
   );
 }
 
@@ -493,16 +475,18 @@ function MetricsGrid({ metrics, stats }: { metrics: EventToolkit['metrics'] | nu
 
   return (
     <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-      {cards.map((card, index) => (
+      {cards.map((card) => (
-        <Card key={index} className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
+        <SectionCard key={card.label} className="p-4">
-          <CardContent className="flex items-center gap-4 p-5">
+          <div className="flex items-center gap-4">
-            <span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">{card.icon}</span>
+            <span className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 dark:bg-white/10">
+              {card.icon}
+            </span>
             <div>
-              <p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
+              <p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{card.label}</p>
-              <p className="text-2xl font-semibold text-slate-900">{card.value}</p>
+              <p className="text-2xl font-semibold text-slate-900 dark:text-white">{card.value}</p>
             </div>
-          </CardContent>
+          </div>
-        </Card>
+        </SectionCard>
       ))}
     </div>
   );
@@ -512,22 +496,18 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
   const { t } = useTranslation('management');
 
   return (
-    <Card className="border-0 bg-white/90 shadow-md shadow-amber-100/60">
+    <SectionCard className="space-y-3">
-      <CardHeader>
+      <SectionHeader
-        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
+        eyebrow={t('events.invites.badge', 'Einladungen')}
-          <QrCode className="h-5 w-5 text-amber-500" />
+        title={t('events.invites.title', 'QR-Einladungen')}
-          {t('events.invites.title', 'QR-Einladungen')}
+        description={t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
-        </CardTitle>
+      />
-        <CardDescription className="text-sm text-slate-600">
+      <div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
-          {t('events.invites.subtitle', 'Behält aktive Einladungen und Layouts im Blick.')}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3 text-sm text-slate-700">
         <div className="flex gap-2 text-sm text-slate-900">
-          <Badge variant="outline" className="border-amber-200 text-amber-700">
+          <Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
             {t('events.invites.activeCount', { defaultValue: '{{count}} aktiv', count: invites?.summary.active ?? 0 })}
           </Badge>
-          <Badge variant="outline" className="border-amber-200 text-amber-700">
+          <Badge variant="outline" className="border-amber-200 text-amber-700 dark:border-amber-500/30 dark:text-amber-200">
             {t('events.invites.totalCount', { defaultValue: '{{count}} gesamt', count: invites?.summary.total ?? 0 })}
           </Badge>
         </div>
@@ -548,8 +528,8 @@ function InviteSummary({ invites, navigateToInvites }: { invites: EventToolkit['
         <Button variant="outline" onClick={navigateToInvites} className="border-amber-200 text-amber-700 hover:bg-amber-50">
           <QrCode className="mr-2 h-4 w-4" /> {t('events.invites.manage', 'Layouts & Einladungen verwalten')}
         </Button>
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 
@@ -557,26 +537,22 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
   const { t } = useTranslation('management');
 
   return (
-    <Card className="border-0 bg-white/90 shadow-md shadow-pink-100/60">
+    <SectionCard className="space-y-3">
-      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <SectionHeader
-        <div>
+        eyebrow={t('events.tasks.badge', 'Aufgaben')}
-          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+        title={t('events.tasks.title', 'Aktive Aufgaben')}
-            <Sparkles className="h-5 w-5 text-pink-500" />
+        description={t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
-            {t('events.tasks.title', 'Aktive Aufgaben')}
+        endSlot={(
-          </CardTitle>
+          <Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/30 dark:text-pink-200">
-          <CardDescription className="text-sm text-slate-600">
+            {t('events.tasks.summary', {
-            {t('events.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
+              defaultValue: '{{completed}} von {{total}} erledigt',
-          </CardDescription>
+              completed: tasks?.summary.completed ?? 0,
-        </div>
+              total: tasks?.summary.total ?? 0,
-        <Badge variant="outline" className="border-pink-200 text-pink-600">
+            })}
-          {t('events.tasks.summary', {
+          </Badge>
-            defaultValue: '{{completed}} von {{total}} erledigt',
+        )}
-            completed: tasks?.summary.completed ?? 0,
+      />
-            total: tasks?.summary.total ?? 0,
+      <div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
-          })}
-        </Badge>
-      </CardHeader>
-      <CardContent className="space-y-3 text-sm text-slate-700">
         {tasks?.items?.length ? (
           <div className="space-y-2">
             {tasks.items.slice(0, 4).map((task) => (
@@ -590,8 +566,8 @@ function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tas
         <Button variant="outline" onClick={navigateToTasks} className="border-pink-200 text-pink-600 hover:bg-pink-50">
           <Sparkles className="mr-2 h-4 w-4" /> {t('events.tasks.manage', 'Aufgabenbereich öffnen')}
         </Button>
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 
@@ -609,31 +585,81 @@ function TaskRow({ task }: { task: EventToolkitTask }) {
   );
 }
 
-function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPhoto[]; navigateToModeration: () => void }) {
+function PendingPhotosCard({
+  slug,
+  photos,
+  navigateToModeration,
+}: {
+  slug: string;
+  photos: TenantPhoto[];
+  navigateToModeration: () => void;
+}) {
   const { t } = useTranslation('management');
+  const [entries, setEntries] = React.useState(photos);
+  const [updatingId, setUpdatingId] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    setEntries(photos);
+  }, [photos]);
+
+  const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
+    setUpdatingId(photo.id);
+    try {
+      const updated = await updatePhotoVisibility(slug, photo.id, visible);
+      setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
+      toast.success(
+        visible
+          ? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
+          : t('events.photos.toastHidden', 'Foto ausgeblendet.'),
+      );
+    } catch (err) {
+      toast.error(
+        isAuthError(err)
+          ? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
+          : t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
+      );
+    } finally {
+      setUpdatingId(null);
+    }
+  };
 
   return (
-    <Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
+    <SectionCard className="space-y-3">
-      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <SectionHeader
-        <div>
+        eyebrow={t('events.photos.pendingBadge', 'Moderation')}
-          <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
+        title={t('events.photos.pendingTitle', 'Fotos in Moderation')}
-            <Camera className="h-5 w-5 text-emerald-500" />
+        description={t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
-            {t('events.photos.pendingTitle', 'Fotos in Moderation')}
+        endSlot={(
-          </CardTitle>
+          <Badge variant="outline" className="border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-200">
-          <CardDescription className="text-sm text-slate-600">
+            {t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: entries.length })}
-            {t('events.photos.pendingSubtitle', 'Schnell prüfen, bevor Gäste live gehen.')}
+          </Badge>
-          </CardDescription>
+        )}
-        </div>
+      />
-        <Badge variant="outline" className="border-emerald-200 text-emerald-600">
+      <div className="space-y-3 text-sm text-slate-700 dark:text-slate-300">
-          {t('events.photos.pendingCount', { defaultValue: '{{count}} Fotos offen', count: photos.length })}
+        {entries.length ? (
-        </Badge>
-      </CardHeader>
-      <CardContent className="space-y-3 text-sm text-slate-700">
-        {photos.length ? (
           <div className="grid grid-cols-3 gap-2">
-            {photos.slice(0, 6).map((photo) => (
+            {entries.slice(0, 6).map((photo) => {
-              <img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
+              const hidden = photo.status === 'hidden';
-            ))}
+              return (
+                <div key={photo.id} className="relative">
+                  <img
+                    src={photo.thumbnail_url ?? photo.url}
+                    alt={photo.caption ?? 'Foto'}
+                    className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleVisibility(photo, hidden)}
+                    disabled={updatingId === photo.id}
+                    className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
+                  >
+                    {hidden
+                      ? t('events.photos.show', 'Einblenden')
+                      : t('events.photos.hide', 'Ausblenden')}
+                  </button>
+                </div>
+              );
+            })}
           </div>
         ) : (
           <p className="text-xs text-slate-500">{t('events.photos.pendingEmpty', 'Aktuell warten keine Fotos auf Freigabe.')}</p>
@@ -642,37 +668,79 @@ function PendingPhotosCard({ photos, navigateToModeration }: { photos: TenantPho
         <Button variant="outline" onClick={navigateToModeration} className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
           <Camera className="mr-2 h-4 w-4" /> {t('events.photos.openModeration', 'Moderation öffnen')}
         </Button>
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 
-function RecentUploadsCard({ photos }: { photos: TenantPhoto[] }) {
+function RecentUploadsCard({ slug, photos }: { slug: string; photos: TenantPhoto[] }) {
   const { t } = useTranslation('management');
+  const [entries, setEntries] = React.useState(photos);
+  const [updatingId, setUpdatingId] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    setEntries(photos);
+  }, [photos]);
+
+  const handleVisibility = async (photo: TenantPhoto, visible: boolean) => {
+    setUpdatingId(photo.id);
+    try {
+      const updated = await updatePhotoVisibility(slug, photo.id, visible);
+      setEntries((prev) => prev.map((item) => (item.id === photo.id ? updated : item)));
+      toast.success(
+        visible
+          ? t('events.photos.toastVisible', 'Foto wieder sichtbar gemacht.')
+          : t('events.photos.toastHidden', 'Foto ausgeblendet.'),
+      );
+    } catch (err) {
+      toast.error(
+        isAuthError(err)
+          ? t('events.photos.errorAuth', 'Session abgelaufen. Bitte erneut anmelden.')
+          : t('events.photos.errorVisibility', 'Sichtbarkeit konnte nicht geändert werden.'),
+      );
+    } finally {
+      setUpdatingId(null);
+    }
+  };
 
   return (
-    <Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
+    <SectionCard className="space-y-3">
-      <CardHeader>
+      <SectionHeader
-        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
+        eyebrow={t('events.photos.recentBadge', 'Uploads')}
-          <Camera className="h-5 w-5 text-sky-500" />
+        title={t('events.photos.recentTitle', 'Neueste Uploads')}
-          {t('events.photos.recentTitle', 'Neueste Uploads')}
+        description={t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
-        </CardTitle>
+      />
-        <CardDescription className="text-sm text-slate-600">
+      <div className="space-y-2 text-sm text-slate-700 dark:text-slate-300">
-          {t('events.photos.recentSubtitle', 'Halte Ausschau nach Highlight-Momenten der Gäste.')}
+        {entries.length ? (
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-2 text-sm text-slate-700">
-        {photos.length ? (
           <div className="grid grid-cols-3 gap-2">
-            {photos.slice(0, 6).map((photo) => (
+            {entries.slice(0, 6).map((photo) => {
-              <img key={photo.id} src={photo.thumbnail_url ?? photo.url} alt={photo.caption ?? 'Foto'} className="h-24 w-full rounded-lg object-cover" />
+              const hidden = photo.status === 'hidden';
-            ))}
+              return (
+                <div key={photo.id} className="relative">
+                  <img
+                    src={photo.thumbnail_url ?? photo.url}
+                    alt={photo.caption ?? 'Foto'}
+                    className={`h-24 w-full rounded-lg object-cover ${hidden ? 'opacity-60' : ''}`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleVisibility(photo, hidden)}
+                    disabled={updatingId === photo.id}
+                    className="absolute inset-x-2 bottom-2 rounded-full bg-white/90 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow disabled:opacity-60"
+                  >
+                    {hidden
+                      ? t('events.photos.show', 'Einblenden')
+                      : t('events.photos.hide', 'Ausblenden')}
+                  </button>
+                </div>
+              );
+            })}
           </div>
         ) : (
           <p className="text-xs text-slate-500">{t('events.photos.recentEmpty', 'Noch keine neuen Uploads.')}</p>
         )}
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 
@@ -691,17 +759,13 @@ function FeedbackCard({ slug }: { slug: string }) {
   };
 
   return (
-    <Card className="border-0 bg-white/90 shadow-md shadow-slate-100/60">
+    <SectionCard className="space-y-4">
-      <CardHeader>
+      <SectionHeader
-        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
+        eyebrow={t('events.feedback.badge', 'Feedback')}
-          <MessageSquare className="h-5 w-5 text-slate-500" />
+        title={t('events.feedback.title', 'Wie läuft dein Event?')}
-          {t('events.feedback.title', 'Wie läuft dein Event?')}
+        description={t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
-        </CardTitle>
+      />
-        <CardDescription className="text-sm text-slate-600">
+      <div className="space-y-4">
-          {t('events.feedback.subtitle', 'Feedback hilft uns, neue Features zu priorisieren.')}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
         {error && (
           <Alert variant="destructive">
             <AlertTitle>{t('events.feedback.errorTitle', 'Feedback konnte nicht gesendet werden.')}</AlertTitle>
@@ -758,8 +822,8 @@ function FeedbackCard({ slug }: { slug: string }) {
         >
           {busy ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <MessageSquare className="mr-2 h-4 w-4" />} {submitted ? t('events.feedback.submitted', 'Danke!') : t('events.feedback.submit', 'Feedback senden')}
         </Button>
-      </CardContent>
+      </div>
-    </Card>
+    </SectionCard>
   );
 }
 

resources/js/admin/pages/EventsPage.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { AlertTriangle, ArrowRight, CalendarDays, Plus, Share2 } from 'lucide-react';
+import { AlertTriangle, ArrowRight, CalendarDays, Camera, Heart, Plus } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   TenantHeroCard,
-  FrostedCard,
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
+  StatCarousel,
+  ActionGrid,
 } from '../components/tenant';
+import { cn } from '@/lib/utils';
 
 import { AdminLayout } from '../components/AdminLayout';
 import { getEvents, TenantEvent } from '../api';
@@ -66,6 +69,56 @@ export default function EventsPage() {
       tCommon(key, { defaultValue: fallback, ...(options ?? {}) }),
     [tCommon],
   );
+  const statItems = React.useMemo(
+    () => [
+      {
+        key: 'total',
+        label: t('events.list.stats.total', 'Events gesamt'),
+        value: totalEvents,
+      },
+      {
+        key: 'published',
+        label: t('events.list.stats.published', 'Veröffentlicht'),
+        value: publishedEvents,
+      },
+      {
+        key: 'drafts',
+        label: t('events.list.stats.drafts', 'Entwürfe'),
+        value: Math.max(0, totalEvents - publishedEvents),
+      },
+      nextEvent
+        ? {
+            key: 'next',
+            label: t('events.list.stats.nextEvent', 'Nächstes Event'),
+            value: formatDate(nextEvent.event_date),
+          }
+        : null,
+    ].filter(Boolean) as { key: string; label: string; value: string | number }[],
+    [t, totalEvents, publishedEvents, nextEvent],
+  );
+  const actionItems = React.useMemo(
+    () => [
+      {
+        key: 'new',
+        label: t('events.list.actions.create', 'Neues Event'),
+        description: t('events.list.actions.createDescription', 'Starte mit einem frischen Setup.'),
+        onClick: () => navigate(adminPath('/events/new')),
+      },
+      {
+        key: 'welcome',
+        label: t('events.list.actions.guidedSetup', 'Geführte Einrichtung'),
+        description: t('events.list.actions.guidedSetupDescription', 'Springe zurück in den Onboarding-Flow.'),
+        onClick: () => navigate(ADMIN_WELCOME_BASE_PATH),
+      },
+      {
+        key: 'settings',
+        label: t('events.list.actions.settings', 'Einstellungen öffnen'),
+        description: t('events.list.actions.settingsDescription', 'Passe Farben, Branding und Aufgabenpakete an.'),
+        onClick: () => navigate(ADMIN_SETTINGS_PATH),
+      },
+    ],
+    [t, navigate],
+  );
 
   const pageTitle = translateManagement('events.list.title', 'Deine Events');
   const pageSubtitle = translateManagement(
@@ -114,7 +167,7 @@ export default function EventsPage() {
     </Button>
   );
   const heroAside = (
-    <FrostedSurface className="w-full rounded-2xl border-white/30 bg-white/95 p-5 text-slate-900 shadow-lg shadow-pink-200/20 backdrop-blur">
+    <FrostedSurface className="w-full rounded-2xl border-slate-200 bg-white p-5 text-slate-900 shadow-lg shadow-pink-200/20 dark:border-white/20 dark:bg-white/10">
       <div className="space-y-4">
         <div>
           <p className="text-xs uppercase tracking-wide text-slate-500">
@@ -152,7 +205,37 @@ export default function EventsPage() {
       </div>
     </FrostedSurface>
   );
-
+  const draftEvents = totalEvents - publishedEvents;
+  const [statusFilter, setStatusFilter] = React.useState<'all' | 'published' | 'draft'>('all');
+  const filteredRows = React.useMemo(() => {
+    if (statusFilter === 'published') {
+      return rows.filter((event) => event.status === 'published');
+    }
+    if (statusFilter === 'draft') {
+      return rows.filter((event) => event.status !== 'published');
+    }
+    return rows;
+  }, [rows, statusFilter]);
+  const overviewDescription = React.useMemo(() => {
+    if (loading) {
+      return t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …');
+    }
+    if (filteredRows.length === 0) {
+      if (statusFilter === 'published') {
+        return t('events.list.overview.empty_published', 'Noch keine veröffentlichten Events.');
+      }
+      if (statusFilter === 'draft') {
+        return t('events.list.overview.empty_drafts', 'Keine Entwürfe – nutze die Zeit für dein nächstes Event.');
+      }
+      return t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.');
+    }
+    return t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: filteredRows.length });
+  }, [filteredRows.length, loading, statusFilter, t]);
+  const filterOptions: Array<{ key: 'all' | 'published' | 'draft'; label: string; count: number }> = [
+    { key: 'all', label: t('events.list.filters.all', 'Alle'), count: totalEvents },
+    { key: 'published', label: t('events.list.filters.published', 'Live'), count: publishedEvents },
+    { key: 'draft', label: t('events.list.filters.drafts', 'Entwürfe'), count: Math.max(0, draftEvents) },
+  ];
 
   return (
     <AdminLayout title={pageTitle} subtitle={pageSubtitle}>
@@ -173,34 +256,64 @@ export default function EventsPage() {
         aside={heroAside}
       />
 
-      <FrostedCard className="mt-6">
+      <SectionCard className="space-y-4">
-        <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <SectionHeader
-          <div>
+          eyebrow={t('events.list.badge', 'Events')}
-            <CardTitle>{t('events.list.overview.title', 'Übersicht')}</CardTitle>
+          title={t('events.list.overview.title', 'Übersicht')}
-            <CardDescription>
+          description={overviewDescription}
-              {loading
+          endSlot={(
-                ? t('events.list.overview.loading', 'Wir sammeln gerade deine Event-Details …')
+            <button
-                : totalEvents === 0
+              type="button"
-                  ? t('events.list.overview.empty', 'Noch keine Events - starte jetzt und lege dein erstes Event an.')
+              className="rounded-full border border-slate-200 bg-white px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-800 shadow-inner shadow-white/20 dark:border-white/15 dark:bg-white/10 dark:text-white"
-                  : t('events.list.overview.count', '{{count}} Events aktiv verwaltet.', { count: totalEvents })}
+            >
-            </CardDescription>
+              {t('events.list.badge.dashboard', 'Tenant Dashboard')}
-          </div>
+            </button>
-          <Badge className="bg-pink-100 text-pink-700">{t('events.list.badge.dashboard', 'Tenant Dashboard')}</Badge>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {loading ? (
-            <LoadingState />
-          ) : totalEvents === 0 ? (
-            <EmptyState onCreate={() => navigate(adminPath('/events/new'))} />
-          ) : (
-            <div className="space-y-4">
-              {rows.map((event) => (
-          <EventCard key={event.id} event={event} translate={translateManagement} translateCommon={translateCommon} />
-              ))}
-            </div>
           )}
-        </CardContent>
+        />
-      </FrostedCard>
+        <StatCarousel items={statItems} />
+        <ActionGrid items={actionItems} columns={1} />
+        <div className="flex gap-2 overflow-x-auto pb-1">
+          {filterOptions.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              onClick={() => setStatusFilter(option.key)}
+              className={cn(
+                'flex items-center gap-2 rounded-full border px-4 py-1.5 text-xs font-semibold transition',
+                statusFilter === option.key
+                  ? 'border-rose-200 bg-rose-50 text-rose-700 shadow shadow-rose-100/40 dark:border-white/60 dark:bg-white/10 dark:text-white'
+                  : 'border-slate-200 text-slate-600 hover:text-slate-900 dark:border-white/15 dark:text-slate-300 dark:hover:text-white'
+              )}
+            >
+              {option.label}
+              <span className="text-[11px] text-slate-400 dark:text-slate-500">{option.count}</span>
+            </button>
+          ))}
+        </div>
+        {loading ? (
+          <LoadingState />
+        ) : filteredRows.length === 0 ? (
+          <EmptyState
+            title={t('events.list.empty.title', 'Noch kein Event angelegt')}
+            description={t(
+              'events.list.empty.description',
+              'Starte jetzt mit deinem ersten Event und lade Gäste in dein farbenfrohes Erlebnisportal ein.'
+            )}
+            onCreate={() => navigate(adminPath('/events/new'))}
+          />
+        ) : (
+          <div className="space-y-3">
+            {filteredRows.map((event) => (
+              <EventCard
+                key={event.id}
+                event={event}
+                translate={translateManagement}
+                translateCommon={translateCommon}
+              />
+            ))}
+          </div>
+        )}
+      </SectionCard>
     </AdminLayout>
   );
 }
@@ -222,41 +335,40 @@ function EventCard({
     () => buildLimitWarnings(event.limits ?? null, (key, opts) => translateCommon(`limits.${key}`, undefined, opts)),
     [event.limits, translateCommon],
   );
+  const metaItems = [
+    {
+      key: 'date',
+      label: translate('events.list.meta.date', 'Eventdatum'),
+      value: formatDate(event.event_date),
+      icon: <CalendarDays className="h-4 w-4 text-rose-500" />,
+    },
+    {
+      key: 'photos',
+      label: translate('events.list.meta.photos', 'Uploads'),
+      value: photoCount,
+      icon: <Camera className="h-4 w-4 text-fuchsia-500" />,
+    },
+    {
+      key: 'likes',
+      label: translate('events.list.meta.likes', 'Likes'),
+      value: likeCount,
+      icon: <Heart className="h-4 w-4 text-amber-500" />,
+    },
+  ];
+  const secondaryLinks = [
+    { key: 'edit', label: translateCommon('actions.edit', 'Bearbeiten'), to: ADMIN_EVENT_EDIT_PATH(slug) },
+    { 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: 'toolkit', label: translate('events.list.actions.toolkit', 'Toolkit'), to: ADMIN_EVENT_TOOLKIT_PATH(slug) },
+  ];
 
   return (
-    <FrostedSurface className="p-5 transition hover:-translate-y-0.5 hover:shadow-lg">
+    <FrostedSurface className="space-y-4 rounded-3xl p-5 shadow-lg shadow-rose-100/30 transition hover:-translate-y-0.5 hover:shadow-rose-200/60">
-      {limitWarnings.length > 0 && (
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="mb-4 space-y-2">
+        <div>
-          {limitWarnings.map((warning) => (
+          <p className="text-xs uppercase tracking-[0.3em] text-rose-300/80">{translate('events.list.item.label', 'Event')}</p>
-            <Alert
+          <h3 className="text-xl font-semibold text-slate-900">{renderName(event.name)}</h3>
-              key={warning.id}
-              variant={warning.tone === 'danger' ? 'destructive' : 'default'}
-              className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900' : undefined}
-            >
-              <AlertDescription className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="h-4 w-4" />
-                {warning.message}
-              </AlertDescription>
-            </Alert>
-          ))}
-        </div>
-      )}
-
-      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold text-slate-900">{renderName(event.name)}</h3>
-          <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
-            <span className="inline-flex items-center gap-1 rounded-full bg-pink-100/90 px-3 py-1 font-medium text-pink-700">
-              <CalendarDays className="h-3.5 w-3.5" />
-              {formatDate(event.event_date)}
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full bg-sky-100/90 px-3 py-1 font-medium text-sky-700">
-              {translate('events.list.badges.photos', 'Fotos')}: {photoCount}
-            </span>
-            <span className="inline-flex items-center gap-1 rounded-full bg-amber-100/90 px-3 py-1 font-medium text-amber-700">
-              {translate('events.list.badges.likes', 'Likes')}: {likeCount}
-            </span>
-          </div>
         </div>
         <Badge className={isPublished ? 'bg-emerald-500/90 text-white shadow shadow-emerald-500/30' : 'bg-slate-200 text-slate-700'}>
           {isPublished
@@ -265,67 +377,119 @@ function EventCard({
         </Badge>
       </div>
 
-      <div className="mt-4 flex flex-wrap gap-2">
+      <div className="-mx-1 flex snap-x snap-mandatory gap-3 overflow-x-auto px-1">
-        <Button asChild variant="outline" className="border-pink-200 text-pink-700 hover:bg-pink-50">
+        {metaItems.map((item) => (
+          <MetaChip key={item.key} icon={item.icon} label={item.label} value={item.value} />
+        ))}
+      </div>
+
+      {limitWarnings.length > 0 && (
+        <div className="space-y-2">
+          {limitWarnings.map((warning) => (
+            <div
+              key={warning.id}
+              className={cn(
+                'flex items-start gap-2 rounded-2xl border p-3 text-xs',
+                warning.tone === 'danger'
+                  ? 'border-rose-200/60 bg-rose-50 text-rose-900'
+                  : 'border-amber-200/60 bg-amber-50 text-amber-900',
+              )}
+            >
+              <AlertTriangle className="h-4 w-4" />
+              <span>{warning.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Button
+          asChild
+          className="rounded-full bg-brand-rose text-white shadow shadow-rose-400/40 hover:bg-brand-rose/90"
+        >
           <Link to={ADMIN_EVENT_VIEW_PATH(slug)}>
-            {translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-1 h-3.5 w-3.5" />
+            {translateCommon('actions.open', 'Öffnen')} <ArrowRight className="ml-2 h-4 w-4" />
           </Link>
         </Button>
-        <Button asChild variant="outline" className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50">
+        <Button asChild variant="outline" className="rounded-full border-rose-200 text-rose-600 hover:bg-rose-50">
-          <Link to={ADMIN_EVENT_EDIT_PATH(slug)}>{translateCommon('actions.edit', 'Bearbeiten')}</Link>
-        </Button>
-        <Button asChild variant="outline" className="border-sky-200 text-sky-700 hover:bg-sky-50">
           <Link to={ADMIN_EVENT_PHOTOS_PATH(slug)}>
             {translate('events.list.actions.photos', 'Fotos moderieren')}
           </Link>
         </Button>
-        <Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
+      </div>
-          <Link to={ADMIN_EVENT_MEMBERS_PATH(slug)}>
+
-            {translate('events.list.actions.members', 'Mitglieder')}
+      <div className="flex flex-wrap gap-2">
-          </Link>
+        {secondaryLinks.map((action) => (
-        </Button>
+          <ActionChip key={action.key} to={action.to}>
-        <Button asChild variant="outline" className="border-amber-200 text-amber-600 hover:bg-amber-50">
+            {action.label}
-          <Link to={ADMIN_EVENT_TASKS_PATH(slug)}>
+          </ActionChip>
-            {translate('events.list.actions.tasks', 'Tasks')}
+        ))}
-          </Link>
-        </Button>
-        <Button asChild variant="outline" className="border-slate-200 text-slate-700 hover:bg-slate-50">
-          <Link to={ADMIN_EVENT_INVITES_PATH(slug)}>
-            <Share2 className="h-3.5 w-3.5" /> {translate('events.list.actions.invites', 'QR-Einladungen')}
-          </Link>
-        </Button>
-        <Button asChild variant="outline" className="border-emerald-200 text-emerald-600 hover:bg-emerald-50">
-          <Link to={ADMIN_EVENT_TOOLKIT_PATH(slug)}>{translate('events.list.actions.toolkit', 'Toolkit')}</Link>
-        </Button>
       </div>
     </FrostedSurface>
   );
 }
 
+function MetaChip({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="min-w-[55%] snap-center rounded-2xl border border-slate-200 bg-white p-3 text-left text-xs shadow-sm sm:min-w-0 dark:border-white/15 dark:bg-white/10 dark:text-white">
+      <div className="flex items-center gap-2 text-slate-500 dark:text-slate-300">
+        {icon}
+        <span>{label}</span>
+      </div>
+      <p className="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{value}</p>
+    </div>
+  );
+}
+
+function ActionChip({ to, children }: { to: string; children: React.ReactNode }) {
+  return (
+    <Link
+      to={to}
+      className="inline-flex items-center rounded-full border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-white/15 dark:text-slate-300 dark:hover:border-white/40 dark:hover:bg-white/10 dark:hover:text-white"
+    >
+      {children}
+    </Link>
+  );
+}
+
 function LoadingState() {
   return (
     <div className="space-y-3">
       {Array.from({ length: 3 }).map((_, index) => (
         <FrostedSurface
           key={index}
-          className="h-24 animate-pulse bg-gradient-to-r from-white/40 via-white/70 to-white/40"
+          className="h-24 animate-pulse rounded-3xl bg-gradient-to-r from-white/20 via-white/60 to-white/20"
         />
       ))}
     </div>
   );
 }
 
-function EmptyState({ onCreate }: { onCreate: () => void }) {
+function EmptyState({
+  title,
+  description,
+  onCreate,
+}: {
+  title: string;
+  description: string;
+  onCreate: () => void;
+}) {
   return (
     <FrostedSurface className="flex flex-col items-center justify-center gap-4 border-dashed border-pink-200/70 p-10 text-center">
       <div className="rounded-full bg-pink-100 p-3 text-pink-600 shadow-inner shadow-pink-200/80">
         <Plus className="h-5 w-5" />
       </div>
       <div className="space-y-2">
-        <h3 className="text-lg font-semibold text-slate-900">Noch kein Event angelegt</h3>
+        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
-        <p className="text-sm text-slate-600">
+        <p className="text-sm text-slate-600">{description}</p>
-          Starte jetzt mit deinem ersten Event und lade Gäste in dein farbenfrohes Erlebnisportal ein.
-        </p>
       </div>
       <Button
         onClick={onCreate}

resources/js/admin/pages/SettingsPage.tsx

@@ -11,10 +11,11 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AdminLayout } from '../components/AdminLayout';
 import {
   TenantHeroCard,
-  FrostedCard,
   FrostedSurface,
   tenantHeroPrimaryButtonClass,
   tenantHeroSecondaryButtonClass,
+  SectionCard,
+  SectionHeader,
 } from '../components/tenant';
 import { useAuth } from '../auth/context';
 import { ADMIN_EVENTS_PATH, ADMIN_LOGIN_PATH, ADMIN_PROFILE_PATH } from '../constants';
@@ -65,7 +66,7 @@ export default function SettingsPage() {
     </Button>
   );
   const heroAside = (
-    <FrostedSurface className="space-y-3 border-white/25 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/80">
+    <FrostedSurface className="space-y-3 border-slate-200 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-white/20 dark:bg-white/10">
       <div>
         <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">{t('settings.hero.accountLabel', { defaultValue: 'Angemeldeter Account' })}</p>
         <p className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{accountName}</p>
@@ -120,16 +121,12 @@ export default function SettingsPage() {
         aside={heroAside}
       />
 
-      <FrostedCard className="mt-6 max-w-2xl border border-white/20">
+      <SectionCard className="mt-6 max-w-2xl space-y-6">
-        <CardHeader>
+        <SectionHeader
-          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+          eyebrow={t('settings.appearance.badge', 'Darstellung & Account')}
-            <Palette className="h-5 w-5 text-amber-500" /> Darstellung & Account
+          title={t('settings.appearance.title', 'Darstellung & Account')}
-          </CardTitle>
+          description={t('settings.appearance.description', 'Gestalte den Admin-Bereich so farbenfroh wie dein Gästeportal.')}
-          <CardDescription className="text-sm text-slate-600">
+        />
-            Gestalte den Admin-Bereich so farbenfroh wie dein Gästeportal.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
           <section className="space-y-2">
             <h2 className="text-sm font-semibold text-slate-800">Darstellung</h2>
             <p className="text-sm text-slate-600">
@@ -162,20 +159,14 @@ export default function SettingsPage() {
               </Button>
             </div>
           </section>
-        </CardContent>
+      </SectionCard>
-      </FrostedCard>
 
-      <FrostedCard className="max-w-3xl border border-white/20">
+      <SectionCard className="max-w-3xl space-y-6">
-        <CardHeader>
+        <SectionHeader
-          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+          eyebrow={t('settings.notifications.badge', 'Benachrichtigungen')}
-            <AlertTriangle className="h-5 w-5 text-pink-500" />
+          title={t('settings.notifications.title', 'Benachrichtigungen')}
-            {t('settings.notifications.title', 'Benachrichtigungen')}
+          description={t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
-          </CardTitle>
+        />
-          <CardDescription className="text-sm text-slate-600">
-            {t('settings.notifications.description', 'Lege fest, für welche Ereignisse wir dich per E-Mail informieren.')}
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
           {notificationError && (
             <Alert variant="destructive">
               <AlertDescription>{notificationError}</AlertDescription>
@@ -225,8 +216,7 @@ export default function SettingsPage() {
               translate={translateNotification}
             />
           ) : null}
-        </CardContent>
+      </SectionCard>
-      </FrostedCard>
     </AdminLayout>
   );
 }
@@ -275,7 +265,7 @@ function NotificationPreferencesForm({
           const checked = preferences[item.key] ?? defaults[item.key] ?? true;
 
           return (
-            <FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-pink-100/60 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-slate-950/80">
+            <FrostedSurface key={item.key} className="flex items-start justify-between gap-4 border border-slate-200 p-4 text-slate-900 shadow-sm shadow-rose-200/20 dark:border-pink-500/20 dark:bg-white/10">
               <div className="space-y-1">
                 <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">{item.label}</h3>
                 <p className="text-sm text-slate-600 dark:text-slate-400">{item.description}</p>