feat: complete CMS v2 with Docker, Fischerei, Meetings, Verband modules + UX audit fixes

Major changes:
- Docker Compose: full Supabase stack (11 services) equivalent to supabase CLI
- Fischerei module: 16 DB tables, waters/species/stocking/catch books/competitions
- Sitzungsprotokolle module: meeting protocols, agenda items, task tracking
- Verbandsverwaltung module: federation management, member clubs, contacts, fees
- Per-account module activation via Modules page toggle
- Site Builder: live CMS data in Puck blocks (courses, events, membership registration)
- Public registration APIs: course signup, event registration, membership application
- Document generation: PDF member cards, Excel reports, HTML labels
- Landing page: real Com.BISS content (no filler text)
- UX audit fixes: AccountNotFound component, shared status badges, confirm dialog,
  pagination, duplicate heading removal, emoji→badge replacement, a11y fixes
- QA: healthcheck fix, API auth fix, enum mismatch fix, password required attribute

apps/web/app/[locale]/home/[account]/events/holiday-passes/page.tsx

@@ -1,5 +1,6 @@
 import { Ticket, Plus } from 'lucide-react';
 
+import { getTranslations } from 'next-intl/server';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
@@ -8,6 +9,7 @@ import { createEventManagementApi } from '@kit/event-management/api';
 
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
+import { AccountNotFound } from '~/components/account-not-found';
 
 interface PageProps {
   params: Promise<{ account: string }>;
@@ -16,6 +18,7 @@ interface PageProps {
 export default async function HolidayPassesPage({ params }: PageProps) {
   const { account } = await params;
   const client = getSupabaseServerClient();
+  const t = await getTranslations('cms.events');
 
   const { data: acct } = await client
     .from('accounts')
@@ -23,47 +26,47 @@ export default async function HolidayPassesPage({ params }: PageProps) {
     .eq('slug', account)
     .single();
 
-  if (!acct) return <div>Konto nicht gefunden</div>;
+  if (!acct) return <AccountNotFound />;
 
   const api = createEventManagementApi(client);
   const passes = await api.listHolidayPasses(acct.id);
 
   return (
-    <CmsPageShell account={account} title="Ferienpässe">
+    <CmsPageShell account={account} title={t('holidayPasses')}>
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold">Ferienpässe</h1>
-            <p className="text-muted-foreground">Ferienpässe und Ferienprogramme verwalten</p>
+            <h1 className="text-2xl font-bold">{t('holidayPasses')}</h1>
+            <p className="text-muted-foreground">{t('holidayPassesDescription')}</p>
           </div>
           <Button>
             <Plus className="mr-2 h-4 w-4" />
-            Neuer Ferienpass
+            {t('newHolidayPass')}
           </Button>
         </div>
 
         {passes.length === 0 ? (
           <EmptyState
             icon={<Ticket className="h-8 w-8" />}
-            title="Keine Ferienpässe vorhanden"
-            description="Erstellen Sie Ihren ersten Ferienpass."
-            actionLabel="Neuer Ferienpass"
+            title={t('noHolidayPasses')}
+            description={t('noHolidayPassesDescription')}
+            actionLabel={t('newHolidayPass')}
           />
         ) : (
           <Card>
             <CardHeader>
-              <CardTitle>Alle Ferienpässe ({passes.length})</CardTitle>
+              <CardTitle>{t('allHolidayPasses')} ({passes.length})</CardTitle>
             </CardHeader>
             <CardContent>
               <div className="rounded-md border">
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b bg-muted/50">
-                      <th className="p-3 text-left font-medium">Name</th>
-                      <th className="p-3 text-left font-medium">Jahr</th>
-                      <th className="p-3 text-right font-medium">Preis</th>
-                      <th className="p-3 text-left font-medium">Gültig von</th>
-                      <th className="p-3 text-left font-medium">Gültig bis</th>
+                      <th className="p-3 text-left font-medium">{t('name')}</th>
+                      <th className="p-3 text-left font-medium">{t('year')}</th>
+                      <th className="p-3 text-right font-medium">{t('price')}</th>
+                      <th className="p-3 text-left font-medium">{t('validFrom')}</th>
+                      <th className="p-3 text-left font-medium">{t('validUntil')}</th>
                     </tr>
                   </thead>
                   <tbody>

apps/web/app/[locale]/home/[account]/events/new/page.tsx

@@ -1,17 +1,20 @@
+import { getTranslations } from 'next-intl/server';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { CreateEventForm } from '@kit/event-management/components';
 import { CmsPageShell } from '~/components/cms-page-shell';
+import { AccountNotFound } from '~/components/account-not-found';
 
 interface Props { params: Promise<{ account: string }> }
 
 export default async function NewEventPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
+  const t = await getTranslations('cms.events');
   const { data: acct } = await client.from('accounts').select('id').eq('slug', account).single();
-  if (!acct) return <div>Konto nicht gefunden</div>;
+  if (!acct) return <AccountNotFound />;
 
   return (
-    <CmsPageShell account={account} title="Neue Veranstaltung" description="Veranstaltung oder Ferienprogramm anlegen">
+    <CmsPageShell account={account} title={t('newEvent')} description={t('newEventDescription')}>
       <CreateEventForm accountId={acct.id} account={account} />
     </CmsPageShell>
   );

apps/web/app/[locale]/home/[account]/events/page.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 
-import { CalendarDays, MapPin, Plus, Users } from 'lucide-react';
+import { CalendarDays, ChevronLeft, ChevronRight, MapPin, Plus, Users } from 'lucide-react';
 
+import { getTranslations } from 'next-intl/server';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
@@ -12,35 +13,19 @@ import { createEventManagementApi } from '@kit/event-management/api';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 import { StatsCard } from '~/components/stats-card';
+import { AccountNotFound } from '~/components/account-not-found';
+import { EVENT_STATUS_VARIANT, EVENT_STATUS_LABEL } from '~/lib/status-badges';
 
 interface PageProps {
   params: Promise<{ account: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 
-const STATUS_BADGE_VARIANT: Record<
-  string,
-  'secondary' | 'default' | 'info' | 'outline' | 'destructive'
-> = {
-  draft: 'secondary',
-  published: 'default',
-  registration_open: 'info',
-  registration_closed: 'outline',
-  cancelled: 'destructive',
-  completed: 'outline',
-};
-
-const STATUS_LABEL: Record<string, string> = {
-  draft: 'Entwurf',
-  published: 'Veröffentlicht',
-  registration_open: 'Anmeldung offen',
-  registration_closed: 'Anmeldung geschlossen',
-  cancelled: 'Abgesagt',
-  completed: 'Abgeschlossen',
-};
-
-export default async function EventsPage({ params }: PageProps) {
+export default async function EventsPage({ params, searchParams }: PageProps) {
   const { account } = await params;
+  const search = await searchParams;
   const client = getSupabaseServerClient();
+  const t = await getTranslations('cms.events');
 
   const { data: acct } = await client
     .from('accounts')
@@ -48,27 +33,45 @@ export default async function EventsPage({ params }: PageProps) {
     .eq('slug', account)
     .single();
 
-  if (!acct) return <div>Konto nicht gefunden</div>;
+  if (!acct) return <AccountNotFound />;
 
+  const page = Number(search.page) || 1;
   const api = createEventManagementApi(client);
-  const events = await api.listEvents(acct.id, { page: 1 });
+  const events = await api.listEvents(acct.id, { page });
+
+  // Fetch registration counts for all events on this page
+  const eventIds = events.data.map((e: Record<string, unknown>) => String(e.id));
+  const registrationCounts = await api.getRegistrationCounts(eventIds);
+
+  // Pre-compute stats before rendering
+  const uniqueLocationCount = new Set(
+    events.data
+      .map((e: Record<string, unknown>) => e.location)
+      .filter(Boolean),
+  ).size;
+
+  const totalCapacity = events.data.reduce(
+    (sum: number, e: Record<string, unknown>) =>
+      sum + (Number(e.capacity) || 0),
+    0,
+  );
 
   return (
-    <CmsPageShell account={account} title="Veranstaltungen">
+    <CmsPageShell account={account} title={t('title')}>
       <div className="flex w-full flex-col gap-6">
         {/* Header */}
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold">Veranstaltungen</h1>
+            <h1 className="text-2xl font-bold">{t('title')}</h1>
             <p className="text-muted-foreground">
-              Veranstaltungen und Ferienprogramme
+              {t('description')}
             </p>
           </div>
 
           <Link href={`/home/${account}/events/new`}>
             <Button>
               <Plus className="mr-2 h-4 w-4" />
-              Neue Veranstaltung
+              {t('newEvent')}
             </Button>
           </Link>
         </div>
@@ -76,28 +79,18 @@ export default async function EventsPage({ params }: PageProps) {
         {/* Stats */}
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <StatsCard
-            title="Veranstaltungen"
+            title={t('title')}
             value={events.total}
             icon={<CalendarDays className="h-5 w-5" />}
           />
           <StatsCard
-            title="Orte"
-            value={
-              new Set(
-                events.data
-                  .map((e: Record<string, unknown>) => e.location)
-                  .filter(Boolean),
-              ).size
-            }
+            title={t('locations')}
+            value={uniqueLocationCount}
             icon={<MapPin className="h-5 w-5" />}
           />
           <StatsCard
-            title="Kapazität gesamt"
-            value={events.data.reduce(
-              (sum: number, e: Record<string, unknown>) =>
-                sum + (Number(e.capacity) || 0),
-              0,
-            )}
+            title={t('totalCapacity')}
+            value={totalCapacity}
             icon={<Users className="h-5 w-5" />}
           />
         </div>
@@ -106,71 +99,105 @@ export default async function EventsPage({ params }: PageProps) {
         {events.data.length === 0 ? (
           <EmptyState
             icon={<CalendarDays className="h-8 w-8" />}
-            title="Keine Veranstaltungen vorhanden"
-            description="Erstellen Sie Ihre erste Veranstaltung, um loszulegen."
-            actionLabel="Neue Veranstaltung"
+            title={t('noEvents')}
+            description={t('noEventsDescription')}
+            actionLabel={t('newEvent')}
             actionHref={`/home/${account}/events/new`}
           />
         ) : (
           <Card>
             <CardHeader>
-              <CardTitle>Alle Veranstaltungen ({events.total})</CardTitle>
+              <CardTitle>{t('allEvents')} ({events.total})</CardTitle>
             </CardHeader>
             <CardContent>
               <div className="rounded-md border">
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b bg-muted/50">
-                      <th className="p-3 text-left font-medium">Name</th>
-                      <th className="p-3 text-left font-medium">Datum</th>
-                      <th className="p-3 text-left font-medium">Ort</th>
-                      <th className="p-3 text-right font-medium">Kapazität</th>
-                      <th className="p-3 text-left font-medium">Status</th>
-                      <th className="p-3 text-right font-medium">Anmeldungen</th>
+                      <th className="p-3 text-left font-medium">{t('name')}</th>
+                      <th className="p-3 text-left font-medium">{t('eventDate')}</th>
+                      <th className="p-3 text-left font-medium">{t('eventLocation')}</th>
+                      <th className="p-3 text-right font-medium">{t('capacity')}</th>
+                      <th className="p-3 text-left font-medium">{t('status')}</th>
+                      <th className="p-3 text-right font-medium">{t('registrations')}</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {events.data.map((event: Record<string, unknown>) => (
-                      <tr
-                        key={String(event.id)}
-                        className="border-b hover:bg-muted/30"
-                      >
-                        <td className="p-3 font-medium">
-                          <Link
-                            href={`/home/${account}/events/${String(event.id)}`}
-                            className="hover:underline"
-                          >
-                            {String(event.name)}
-                          </Link>
-                        </td>
-                        <td className="p-3">
-                          {event.event_date
-                            ? new Date(String(event.event_date)).toLocaleDateString('de-DE')
-                            : '—'}
-                        </td>
-                        <td className="p-3">
-                          {String(event.location ?? '—')}
-                        </td>
-                        <td className="p-3 text-right">
-                          {event.capacity != null
-                            ? String(event.capacity)
-                            : '—'}
-                        </td>
-                        <td className="p-3">
-                          <Badge
-                            variant={
-                              STATUS_BADGE_VARIANT[String(event.status)] ?? 'secondary'
-                            }
-                          >
-                            {STATUS_LABEL[String(event.status)] ?? String(event.status)}
-                          </Badge>
-                        </td>
-                        <td className="p-3 text-right">—</td>
-                      </tr>
-                    ))}
+                    {events.data.map((event: Record<string, unknown>) => {
+                      const eventId = String(event.id);
+                      const regCount = registrationCounts[eventId] ?? 0;
+
+                      return (
+                        <tr
+                          key={eventId}
+                          className="border-b hover:bg-muted/30"
+                        >
+                          <td className="p-3 font-medium">
+                            <Link
+                              href={`/home/${account}/events/${eventId}`}
+                              className="hover:underline"
+                            >
+                              {String(event.name)}
+                            </Link>
+                          </td>
+                          <td className="p-3">
+                            {event.event_date
+                              ? new Date(String(event.event_date)).toLocaleDateString('de-DE')
+                              : '—'}
+                          </td>
+                          <td className="p-3">
+                            {String(event.location ?? '—')}
+                          </td>
+                          <td className="p-3 text-right">
+                            {event.capacity != null
+                              ? String(event.capacity)
+                              : '—'}
+                          </td>
+                          <td className="p-3">
+                            <Badge
+                              variant={
+                                EVENT_STATUS_VARIANT[String(event.status)] ?? 'secondary'
+                              }
+                            >
+                              {EVENT_STATUS_LABEL[String(event.status)] ?? String(event.status)}
+                            </Badge>
+                          </td>
+                          <td className="p-3 text-right font-medium">
+                            {regCount}
+                          </td>
+                        </tr>
+                      );
+                    })}
                   </tbody>
                 </table>
               </div>
+
+              {/* Pagination */}
+              {events.totalPages > 1 && (
+                <div className="flex items-center justify-between pt-4">
+                  <span className="text-sm text-muted-foreground">
+                    {t('paginationPage', { page: events.page, totalPages: events.totalPages })}
+                  </span>
+                  <div className="flex gap-2">
+                    {events.page > 1 && (
+                      <Link href={`/home/${account}/events?page=${events.page - 1}`}>
+                        <Button variant="outline" size="sm">
+                          <ChevronLeft className="mr-1 h-4 w-4" />
+                          {t('paginationPrevious')}
+                        </Button>
+                      </Link>
+                    )}
+                    {events.page < events.totalPages && (
+                      <Link href={`/home/${account}/events?page=${events.page + 1}`}>
+                        <Button variant="outline" size="sm">
+                          {t('paginationNext')}
+                          <ChevronRight className="ml-1 h-4 w-4" />
+                        </Button>
+                      </Link>
+                    )}
+                  </div>
+                </div>
+              )}
             </CardContent>
           </Card>
         )}

apps/web/app/[locale]/home/[account]/events/registrations/page.tsx

@@ -2,9 +2,9 @@ import Link from 'next/link';
 
 import { CalendarDays, ClipboardList, Users } from 'lucide-react';
 
+import { getTranslations } from 'next-intl/server';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
-import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 import { createEventManagementApi } from '@kit/event-management/api';
@@ -12,6 +12,8 @@ import { createEventManagementApi } from '@kit/event-management/api';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 import { StatsCard } from '~/components/stats-card';
+import { AccountNotFound } from '~/components/account-not-found';
+import { EVENT_STATUS_VARIANT, EVENT_STATUS_LABEL } from '~/lib/status-badges';
 
 interface PageProps {
   params: Promise<{ account: string }>;
@@ -20,6 +22,7 @@ interface PageProps {
 export default async function EventRegistrationsPage({ params }: PageProps) {
   const { account } = await params;
   const client = getSupabaseServerClient();
+  const t = await getTranslations('cms.events');
 
   const { data: acct } = await client
     .from('accounts')
@@ -27,7 +30,7 @@ export default async function EventRegistrationsPage({ params }: PageProps) {
     .eq('slug', account)
     .single();
 
-  if (!acct) return <div>Konto nicht gefunden</div>;
+  if (!acct) return <AccountNotFound />;
 
   const api = createEventManagementApi(client);
   const events = await api.listEvents(acct.id, { page: 1 });
@@ -56,30 +59,30 @@ export default async function EventRegistrationsPage({ params }: PageProps) {
   );
 
   return (
-    <CmsPageShell account={account} title="Anmeldungen">
+    <CmsPageShell account={account} title={t('registrations')}>
       <div className="flex w-full flex-col gap-6">
         {/* Header */}
         <div>
-          <h1 className="text-2xl font-bold">Anmeldungen</h1>
+          <h1 className="text-2xl font-bold">{t('registrations')}</h1>
           <p className="text-muted-foreground">
-            Anmeldungen aller Veranstaltungen im Überblick
+            {t('registrationsOverview')}
           </p>
         </div>
 
         {/* Stats */}
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           <StatsCard
-            title="Veranstaltungen"
+            title={t('title')}
             value={events.total}
             icon={<CalendarDays className="h-5 w-5" />}
           />
           <StatsCard
-            title="Anmeldungen gesamt"
+            title={t('totalRegistrations')}
             value={totalRegistrations}
             icon={<ClipboardList className="h-5 w-5" />}
           />
           <StatsCard
-            title="Mit Anmeldungen"
+            title={t('withRegistrations')}
             value={eventsWithRegs.length}
             icon={<Users className="h-5 w-5" />}
           />
@@ -89,16 +92,16 @@ export default async function EventRegistrationsPage({ params }: PageProps) {
         {eventsWithRegistrations.length === 0 ? (
           <EmptyState
             icon={<ClipboardList className="h-8 w-8" />}
-            title="Keine Veranstaltungen vorhanden"
-            description="Erstellen Sie eine Veranstaltung, um Anmeldungen zu erhalten."
-            actionLabel="Neue Veranstaltung"
+            title={t('noEvents')}
+            description={t('noEventsForRegistrations')}
+            actionLabel={t('newEvent')}
             actionHref={`/home/${account}/events/new`}
           />
         ) : (
           <Card>
             <CardHeader>
               <CardTitle>
-                Übersicht nach Veranstaltung ({eventsWithRegistrations.length})
+                {t('overviewByEvent')} ({eventsWithRegistrations.length})
               </CardTitle>
             </CardHeader>
             <CardContent>
@@ -107,15 +110,15 @@ export default async function EventRegistrationsPage({ params }: PageProps) {
                   <thead>
                     <tr className="border-b bg-muted/50">
                       <th className="p-3 text-left font-medium">
-                        Veranstaltung
+                        {t('event')}
                       </th>
-                      <th className="p-3 text-left font-medium">Datum</th>
-                      <th className="p-3 text-left font-medium">Status</th>
-                      <th className="p-3 text-right font-medium">Kapazität</th>
+                      <th className="p-3 text-left font-medium">{t('eventDate')}</th>
+                      <th className="p-3 text-left font-medium">{t('status')}</th>
+                      <th className="p-3 text-right font-medium">{t('capacity')}</th>
                       <th className="p-3 text-right font-medium">
-                        Anmeldungen
+                        {t('registrations')}
                       </th>
-                      <th className="p-3 text-right font-medium">Auslastung</th>
+                      <th className="p-3 text-right font-medium">{t('utilization')}</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -148,7 +151,13 @@ export default async function EventRegistrationsPage({ params }: PageProps) {
                               : '—'}
                           </td>
                           <td className="p-3">
-                            <Badge variant="outline">{event.status}</Badge>
+                            <Badge
+                              variant={
+                                EVENT_STATUS_VARIANT[event.status] ?? 'secondary'
+                              }
+                            >
+                              {EVENT_STATUS_LABEL[event.status] ?? event.status}
+                            </Badge>
                           </td>
                           <td className="p-3 text-right">
                             {event.capacity ?? '—'}