Merge branch 'codex/live-testplan-doc'

# Conflicts:
#	src/app/dashboard/notdienst/plan/plan-view.tsx

UI-TODO.md

@@ -0,0 +1,79 @@
+# UI-ToDo: klickbare Elemente ohne Funktion
+
+Stand: 2026-05-20
+
+Geprüft lokal als Admin mit Demo-Login `admin@waldameisen.local`.
+
+## Notdienst-Planung
+
+- [x] `src/app/dashboard/notdienst/plan/page.tsx:186`  
+  Monat zurück/vor haben keinen Handler oder Link.
+
+- [x] `src/app/dashboard/notdienst/plan/page.tsx:196`  
+  `Einstellungen` ist klickbar, öffnet aber nichts und navigiert nicht.
+
+- [x] `src/app/dashboard/notdienst/plan/plan-view.tsx:135`  
+  `Erinnerungen verschicken` im Empty-State ist ohne Funktion.
+
+- [x] `src/app/dashboard/notdienst/plan/plan-view.tsx:202`  
+  `Erinnerung an offene senden (...)` ist ohne Funktion.
+
+- [x] `src/app/dashboard/notdienst/plan/plan-view.tsx:312`  
+  `Als PDF exportieren` ist ohne Funktion.
+
+- [x] `src/app/dashboard/notdienst/plan/plan-view.tsx:316`  
+  `Plan zurücksetzen` ist ohne Funktion.
+
+## Terminkalender
+
+- [x] `src/app/dashboard/kalender/page.tsx:296`  
+  Umschalter `Liste / Monat / Agenda` ändern keine Ansicht.
+
+- [x] `src/app/dashboard/kalender/page.tsx:317`  
+  Suche `Termine suchen` filtert aktuell nicht.
+
+- [x] `src/app/dashboard/kalender/page.tsx:415`  
+  Kategorie-Filterchips sind nur visuell.
+
+- [x] `src/app/dashboard/kalender/_components/termin-list.tsx:152`  
+  `Mehr Optionen` bei Elterndiensten ist ohne Funktion.
+
+- [x] `src/app/dashboard/kalender/_components/termin-list.tsx:191`  
+  `Mehr Optionen` bei Terminen ist ohne Funktion.
+
+## Adressbuch
+
+- [x] `src/app/dashboard/adressbuch/page.tsx:161`  
+  `Sichtbarkeit` ist ohne Funktion.
+
+- [x] `src/app/dashboard/adressbuch/page.tsx:193`  
+  Suche `Familien, Namen oder E-Mail suchen` filtert aktuell nicht.
+
+- [x] `src/app/dashboard/adressbuch/page.tsx:201`  
+  Filterchips `Alle Gruppen`, `Mit Telefon`, `Mit Ämtern`, `Nur Opt-in` sind nur visuell.
+
+- [x] `src/app/dashboard/adressbuch/page.tsx:334`  
+  `Kontakt öffnen` ist ohne Funktion.
+
+## Familienverwaltung
+
+- [x] `src/app/dashboard/families/page.tsx:117`  
+  `Ansicht` ist ohne Funktion.
+
+- [x] `src/app/dashboard/families/page.tsx:133`  
+  Suche `Familien, Eltern oder Kinder suchen` filtert aktuell nicht.
+
+## Abwesenheiten Admin
+
+- [x] `src/app/dashboard/admin/abwesenheiten/page.tsx:132`  
+  Filterchips `Alle Gruppen` und `Alle Gründe` sind klickbar, aber ohne Funktion.
+
+## Bereits angebunden / nicht auffaellig
+
+- Dialoge und Mutationsaktionen sind bei der Pruefung nicht als No-Op aufgefallen:
+  - Familie anlegen/bearbeiten
+  - ErzieherIn anlegen/bearbeiten/loeschen
+  - Profil speichern
+  - Termin anlegen/anfragen
+  - Dienstplan-Zuweisungen
+

docs/live-testplan.md

@@ -0,0 +1,85 @@
+# Live-Testplan mein-kitaplaner.de
+
+## Kopfbereich
+
+- Zielsystem: `https://mein-kitaplaner.de`
+- Testdatum: `2026-05-17`
+- Strategie: echte Testdaten auf Produktion verwenden und anschließend bereinigen
+- Testkennzeichnung: alle Testnamen und Test-E-Mails mit `Codex Live-Test` kennzeichnen
+- Statuslegende:
+  - `[ ]` offen
+  - `[x]` erledigt
+  - `[!]` Blocker / Beobachtung
+
+## Testdaten
+
+- Gründer/Admin: `hanivan790@acanok.com`
+- Test-Kita: `Codex Live-Test Kita-Verein 20260517-2343`
+- Elternteil: `kitatester1233@mailaddress.de`
+- Passwort: `<TEST_PASSWORD>`
+
+Keine echten Passwörter, Secrets, Session-Werte, Tokens oder Invite-Links in diese Datei schreiben.
+
+## Core Journey
+
+- [x] Landingpage erreichbar.
+  - Erwartung: `https://mein-kitaplaner.de` lädt mit aktuellem Landingpage-Content.
+- [x] Demo-CTA führt zum Kontaktformular.
+  - Erwartung: CTA öffnet `/#kontakt` und das Formular ist sichtbar.
+- [x] Kontaktformular versendet Bestätigungsmail.
+  - Bestätigt: Testmail an `nolip18234@acanok.com` ist angekommen.
+- [x] Registrierung: neuer Gründer/Admin kann Account erstellen.
+  - Testdaten: eindeutige Admin-Testmail und `<TEST_PASSWORD>`.
+  - Erwartung: Account wird erstellt, keine Fehlermeldung.
+- [x] Redirect nach Registrierung führt zu `/onboarding`.
+  - Erwartung: Gründer landet nach Registrierung direkt im Onboarding.
+- [x] Onboarding: Kita wird mit Standardmodulen angelegt.
+  - Testdaten: `Codex Live-Test Kita-Verein YYYYMMDD-HHMM`.
+  - Erwartung: Notdienst, Kalender und Adressbuch bleiben standardmäßig aktiv.
+- [x] Redirect nach Onboarding führt zu `/dashboard`.
+  - Erwartung: Dashboard lädt ohne erneute Anmeldung.
+- [x] Dashboard zeigt Kita-Namen und Admin-Navigation.
+  - Erwartung: Sidebar zeigt Test-Kita sowie Admin-Menüpunkte wie Familienverwaltung, Dienstplan, Schwarzes Brett und ErzieherInnen.
+- [x] Familienverwaltung: Familie mit Kind und Elternteil anlegen.
+  - Testdaten: Familie, Elternteil und Kind mit `Codex Live-Test` kennzeichnen.
+  - Erwartung: Familie erscheint in der Liste.
+- [ ] Einladung wird per E-Mail versendet.
+  - Erwartung: Eltern-Testadresse erhält eine Einladung.
+  - Erst als erledigt markieren, wenn die Mail im Postfach bestätigt wurde.
+- [ ] Invite-Link öffnet Aktivierungsseite.
+  - Erwartung: Seite `/invite/[token]` zeigt personalisierte Einladung und Kita-Namen.
+  - Invite-Link nicht in diese Datei schreiben.
+- [ ] Invite-Validierung: Passwort-Pflicht, Passwort-Mismatch, Datenschutz-Pflicht.
+  - Erwartung: fehlende oder unterschiedliche Passwörter und fehlende Datenschutzerklärung erzeugen sichtbare Fehler.
+- [ ] Elternteil kann Einladung annehmen und wird eingeloggt.
+  - Erwartung: Passwort setzen, Datenschutzerklärung akzeptieren, optional Adressbuch-Opt-in wählen, danach Redirect zu `/dashboard`.
+- [ ] Elternrolle sieht nur erlaubte Navigation.
+  - Erwartung: Eltern sehen keine Admin-only Punkte wie Familienverwaltung, Dienstplan, Schwarzes Brett-Admin, ErzieherInnen.
+- [ ] Logout/Login für Admin und Elternteil funktionieren.
+  - Erwartung: beide Testaccounts können sich abmelden und mit `<TEST_PASSWORD>` erneut anmelden.
+- [x] Zugriffsschutz: `/dashboard` ohne Session leitet zu `/login`.
+  - Erwartung: ausgeloggter Aufruf von `/dashboard` führt zu `/login?callbackUrl=%2Fdashboard` oder entsprechender Login-Route.
+- [ ] Cleanup: Test-Kita/User/Familie über Superadmin löschen.
+  - Erwartung: Test-Kita wird über Superadmin-Diagnose mit exakter Namensbestätigung gelöscht.
+  - Erst als erledigt markieren, wenn Superadmin-Ansicht keine Test-Kita/Test-User mehr zeigt.
+- [ ] Nach Cleanup: Test-Login funktioniert nicht mehr / Daten nicht sichtbar.
+  - Erwartung: Admin- und Eltern-Testlogin schlagen fehl; Test-Kita erscheint nicht mehr.
+
+## Beobachtungen
+
+- [x] `2026-05-17`: Kontaktformular auf Produktion getestet. Bestätigungsmail an `nolip18234@acanok.com` ist angekommen.
+- [x] `2026-05-17`: Registrierung mit `hanivan790@acanok.com`, Redirect nach `/onboarding`, Onboarding mit `Codex Live-Test Kita-Verein 20260517-2343` und Dashboard/Admin-Navigation erfolgreich geprüft.
+- [!] `2026-05-17`: Familienanlage mit Elternadresse `nolip18234@acanok.com` blockiert, weil die E-Mail-Adresse bereits existiert. Mit `kitatester1233@mailaddress.de` erfolgreich fortgesetzt.
+- [x] `2026-05-17`: Admin-Logout, Zugriffsschutz für `/dashboard` ohne Session und Admin-Login mit temporärem Passwort erfolgreich geprüft. Kombinierter Login-Check bleibt offen, bis ein Elternaccount aktiviert werden kann.
+- [x] `2026-05-17`: Familie `Codex Live-Test Familie 20260517-2343` mit Kind und Elternteil `kitatester1233@mailaddress.de` erfolgreich angelegt; Status in der Familienverwaltung: `Einladung offen`.
+- [ ] `2026-05-17`: Im Familien-Details-Dialog ist kein Invite-Link sichtbar; Fortsetzung der Invite-Tests benötigt Mailbestätigung und Invite-Link aus dem Postfach.
+- [ ] Mailzeit Einladung Elternteil: offen.
+- [ ] Cleanup-Ergebnis: offen.
+
+## Pflege-Regeln
+
+- Erledigte Schritte während des Tests direkt von `[ ]` auf `[x]` setzen.
+- Blocker mit `[!]` markieren und kurz im Abschnitt Beobachtungen beschreiben.
+- Mailversand nur als erledigt markieren, wenn die Mail im jeweiligen Postfach bestätigt wurde.
+- Keine echten Passwörter, Secrets, Tokens oder vollständigen Invite-Links dokumentieren.
+- Cleanup erst als erledigt markieren, wenn die Testdaten in der Superadmin-Ansicht nicht mehr sichtbar sind.

prisma/seed.ts

@@ -1,5 +1,7 @@
 import {
   AbsenceReason,
+  AuditTargetType,
+  EventParticipationStatus,
   InvitationStatus,
   NotdienstAlertStatus,
   NotdienstPlanStatus,
@@ -35,6 +37,9 @@ const DEMO_USER_EMAILS = [
   "schmidt@waldameisen.local",
   "yilmaz@waldameisen.local",
   "pending@waldameisen.local",
+  "fischer@waldameisen.local",
+  "kowalski@waldameisen.local",
+  "weber@waldameisen.local",
 ];
 
 const DEMO_VERIFICATION_TOKENS = [
@@ -293,11 +298,87 @@ async function createDemoUsers(passwordHash: string, consentAt: Date) {
     },
   });
 
+  const familyKowalski = await prisma.family.create({
+    data: {
+      kitaId: kita.id,
+      name: "Familie Kowalski",
+    },
+  });
+
+  const familyWeber = await prisma.family.create({
+    data: {
+      kitaId: kita.id,
+      name: "Familie Weber",
+    },
+  });
+
+  const elternFischer = await prisma.user.create({
+    data: {
+      kitaId: kita.id,
+      familyId: familyFischer.id,
+      email: "fischer@waldameisen.local",
+      passwordHash,
+      firstName: "Frank",
+      lastName: "Fischer",
+      role: UserRole.ELTERN,
+      privacyPolicyAcceptedAt: consentAt,
+      privacyPolicyVersion: PRIVACY_POLICY_VERSION,
+      directoryOptInAt: consentAt,
+      emailVerifiedAt: consentAt,
+      phone: "+49 30 5555 1234",
+      street: "Fischerweg 4",
+      postalCode: "10247",
+      city: "Berlin",
+    },
+  });
+
+  const elternKowalski = await prisma.user.create({
+    data: {
+      kitaId: kita.id,
+      familyId: familyKowalski.id,
+      email: "kowalski@waldameisen.local",
+      passwordHash,
+      firstName: "Jan",
+      lastName: "Kowalski",
+      role: UserRole.ELTERN,
+      privacyPolicyAcceptedAt: consentAt,
+      privacyPolicyVersion: PRIVACY_POLICY_VERSION,
+      directoryOptInAt: consentAt,
+      emailVerifiedAt: consentAt,
+      phone: "+49 30 5555 5678",
+      street: "Grenzallee 12",
+      postalCode: "12057",
+      city: "Berlin",
+    },
+  });
+
+  const elternWeber = await prisma.user.create({
+    data: {
+      kitaId: kita.id,
+      familyId: familyWeber.id,
+      email: "weber@waldameisen.local",
+      passwordHash,
+      firstName: "Sabine",
+      lastName: "Weber",
+      role: UserRole.ELTERN,
+      privacyPolicyAcceptedAt: consentAt,
+      privacyPolicyVersion: PRIVACY_POLICY_VERSION,
+      directoryOptInAt: consentAt,
+      emailVerifiedAt: consentAt,
+      phone: "+49 30 5555 9012",
+      street: "Weberstrasse 7",
+      postalCode: "10249",
+      city: "Berlin",
+    },
+  });
+
   return {
     kita,
     familyMueller,
     familySchmidtYilmaz,
     familyFischer,
+    familyKowalski,
+    familyWeber,
     superAdmin,
     admin,
     erzieherUser,
@@ -305,6 +386,9 @@ async function createDemoUsers(passwordHash: string, consentAt: Date) {
     elternSchmidt,
     elternYilmaz,
     pendingParent,
+    elternFischer,
+    elternKowalski,
+    elternWeber,
   };
 }
 
@@ -313,6 +397,8 @@ async function createChildren({
   familyMueller,
   familySchmidtYilmaz,
   familyFischer,
+  familyKowalski,
+  familyWeber,
 }: SeedContext) {
   const anna = await prisma.child.create({
     data: {
@@ -365,7 +451,27 @@ async function createChildren({
     },
   });
 
-  return { anna, ben, clara, emil, nina };
+  const leo = await prisma.child.create({
+    data: {
+      kitaId: kita.id,
+      familyId: familyKowalski.id,
+      firstName: "Leo",
+      lastName: "Kowalski",
+      dateOfBirth: new Date("2022-08-12"),
+    },
+  });
+
+  const mia = await prisma.child.create({
+    data: {
+      kitaId: kita.id,
+      familyId: familyWeber.id,
+      firstName: "Mia",
+      lastName: "Weber",
+      dateOfBirth: new Date("2021-05-18"),
+    },
+  });
+
+  return { anna, ben, clara, emil, nina, leo, mia };
 }
 
 async function createEducators(kitaId: string) {
@@ -530,11 +636,9 @@ async function createInvites({ kita, admin, pendingParent }: SeedContext) {
   });
 }
 
-async function createAnnouncements({
-  kita,
-  admin,
-  koordinator,
-}: SeedContext) {
+async function createAnnouncements(context: SeedContext) {
+  const { kita, admin, koordinator, elternSchmidt, elternYilmaz, elternFischer } = context;
+
   const sommerfest = await prisma.announcement.create({
     data: {
       kitaId: kita.id,
@@ -545,7 +649,7 @@ async function createAnnouncements({
     },
   });
 
-  await prisma.announcement.create({
+  const garderobe = await prisma.announcement.create({
     data: {
       kitaId: kita.id,
       title: "Neue Garderoben-Regelung",
@@ -555,21 +659,48 @@ async function createAnnouncements({
     },
   });
 
-  await prisma.announcementRead.create({
+  const longTitle = await prisma.announcement.create({
     data: {
-      userId: koordinator.id,
-      announcementId: sommerfest.id,
+      kitaId: kita.id,
+      title: "Dies ist eine extrem lange Ankuendigung mit einem superlangen Titel um das Layout des Dashboards und des Schwarzen Bretts auf korrekten Textumbruch und Mobilfreundlichkeit zu testen",
+      content: "Inhalt der superlangen Ankuendigung fuer Layout-Testing.",
+      authorId: admin.id,
     },
   });
+
+  const xssTitle = await prisma.announcement.create({
+    data: {
+      kitaId: kita.id,
+      title: "Boesartiger Titel mit <script>alert('XSS_NEWS_TITLE')</script> HTML Tags",
+      content: "Dieser Beitrag testet, ob die Anwendung XSS-Angriffe im Titel oder im Inhalt filtert. <script>alert('XSS_NEWS_CONTENT')</script>",
+      authorId: admin.id,
+    },
+  });
+
+  await prisma.attachment.create({
+    data: {
+      announcementId: sommerfest.id,
+      fileName: "sommerfest_ablauf.pdf",
+      fileUrl: "https://example.com/sommerfest_ablauf.pdf",
+      fileType: "application/pdf",
+    },
+  });
+
+  await prisma.announcementRead.createMany({
+    data: [
+      { userId: koordinator.id, announcementId: sommerfest.id },
+      { userId: elternSchmidt.id, announcementId: sommerfest.id },
+      { userId: elternYilmaz.id, announcementId: sommerfest.id },
+      { userId: elternFischer.id, announcementId: garderobe.id },
+    ],
+  });
 }
 
-async function createTermine({
-  kita,
-  admin,
-  koordinator,
-  elternSchmidt,
-  elternYilmaz,
-}: SeedContext) {
+async function createTermine(
+  context: SeedContext,
+  children: Awaited<ReturnType<typeof createChildren>>,
+) {
+  const { kita, admin, koordinator, elternSchmidt, elternYilmaz, elternFischer, elternKowalski } = context;
   const now = new Date();
 
   const elternabend = await prisma.termin.create({
@@ -636,6 +767,100 @@ async function createTermine({
     },
   });
 
+  const zooAusflug = await prisma.termin.create({
+    data: {
+      kitaId: kita.id,
+      title: "Ausflug in den Zoo",
+      description: "Gemeinsamer Ausflug der gesamten Kita-Gruppe in den Berliner Zoo.",
+      type: TerminType.SONSTIGES,
+      status: TerminStatus.CONFIRMED,
+      startDate: addDays(now, 15),
+      endDate: addDays(now, 15),
+      allDay: true,
+      requiresRsvp: true,
+      rsvpDeadline: addDays(now, 5),
+      participantInfo: "Bitte wetterfeste Kleidung und Rucksack-Verpflegung mitbringen.",
+      createdById: admin.id,
+      approvedById: admin.id,
+      approvedAt: now,
+    },
+  });
+
+  await prisma.eventParticipation.createMany({
+    data: [
+      { kitaId: kita.id, eventId: zooAusflug.id, childId: children.anna.id, status: EventParticipationStatus.ATTENDING },
+      { kitaId: kita.id, eventId: zooAusflug.id, childId: children.clara.id, status: EventParticipationStatus.ATTENDING },
+      { kitaId: kita.id, eventId: zooAusflug.id, childId: children.emil.id, status: EventParticipationStatus.NOT_ATTENDING },
+      { kitaId: kita.id, eventId: zooAusflug.id, childId: children.leo.id, status: EventParticipationStatus.ATTENDING },
+    ],
+  });
+
+  await prisma.termin.create({
+    data: {
+      kitaId: kita.id,
+      title: "Mitmach-Tag (Garten)",
+      description: "Gemeinsames Herrichten des Gartens fuer die warme Jahreszeit. (Abgesagt wegen Dauerregen)",
+      type: TerminType.MITMACH_TAG,
+      status: TerminStatus.CANCELLED,
+      startDate: addDays(now, 2),
+      endDate: addDays(now, 2),
+      allDay: false,
+      createdById: admin.id,
+    },
+  });
+
+  const sommerfestEvent = await prisma.termin.create({
+    data: {
+      kitaId: kita.id,
+      title: "Sommerfest Waldameisen",
+      description: "Unser jaehrliches grosses Sommerfest im Kita-Garten mit Buffet und Spielstationen.",
+      type: TerminType.KITA_FEST,
+      status: TerminStatus.CONFIRMED,
+      startDate: addDays(now, 30),
+      endDate: addDays(now, 30),
+      allDay: false,
+      mitbringselListEnabled: true,
+      createdById: admin.id,
+      approvedById: admin.id,
+      approvedAt: now,
+    },
+  });
+
+  const highDensityDay = addDays(now, 7);
+  for (let i = 1; i <= 8; i++) {
+    await prisma.termin.create({
+      data: {
+        kitaId: kita.id,
+        title: `Parallel-Termin #${i}`,
+        description: `Beschreibung fuer Parallel-Termin #${i}`,
+        type: TerminType.SONSTIGES,
+        status: TerminStatus.CONFIRMED,
+        startDate: highDensityDay,
+        endDate: highDensityDay,
+        allDay: false,
+        createdById: admin.id,
+        approvedById: admin.id,
+        approvedAt: now,
+      },
+    });
+  }
+
+  await prisma.termin.create({
+    data: {
+      kitaId: kita.id,
+      title: "Boesartiger Termin <script>alert('XSS_CAL_TITLE')</script>",
+      description: "XSS Test im Terminkalender <script>alert('XSS_CAL_DESC')</script>",
+      type: TerminType.SONSTIGES,
+      status: TerminStatus.CONFIRMED,
+      startDate: addDays(now, 5),
+      endDate: addDays(now, 5),
+      allDay: true,
+      createdById: admin.id,
+      approvedById: admin.id,
+      approvedAt: now,
+    },
+  });
+
   await prisma.mitbringselItem.createMany({
     data: [
       {
@@ -650,15 +875,34 @@ async function createTermine({
         userId: elternSchmidt.id,
         content: "Brot und Aufstrich",
       },
+      {
+        kitaId: kita.id,
+        terminId: sommerfestEvent.id,
+        userId: elternYilmaz.id,
+        content: "Nudelsalat (vegan)",
+      },
+      {
+        kitaId: kita.id,
+        terminId: sommerfestEvent.id,
+        userId: elternFischer.id,
+        content: "Mehrweg-Becher (ca. 30 Stk.)",
+      },
+      {
+        kitaId: kita.id,
+        terminId: sommerfestEvent.id,
+        userId: elternKowalski.id,
+        content: "Apfelsaft & Wasser",
+      },
     ],
   });
 }
 
 async function createNotdienstData(
-  { kita, koordinator, elternSchmidt, elternYilmaz }: SeedContext,
+  context: SeedContext,
   children: Awaited<ReturnType<typeof createChildren>>,
   educators: Awaited<ReturnType<typeof createEducators>>,
 ) {
+  const { kita, koordinator, elternSchmidt, elternYilmaz, elternWeber, elternKowalski } = context;
   const today = dateOnly(new Date());
   const currentMonth = startOfMonth(today);
   const previousMonth = getPreviousMonth(today);
@@ -670,6 +914,8 @@ async function createNotdienstData(
     { childId: children.clara.id, userId: elternSchmidt.id },
     { childId: children.emil.id, userId: elternYilmaz.id },
     { childId: children.ben.id, userId: koordinator.id },
+    { childId: children.leo.id, userId: elternKowalski.id },
+    { childId: children.mia.id, userId: elternWeber.id },
   ];
 
   const targetWorkingDays = getWorkingDays(
@@ -710,6 +956,30 @@ async function createNotdienstData(
     },
   });
 
+  const alertAssignmentDate = addDays(today, 3);
+  const pendingAlertAssignment = await prisma.notdienstAssignment.create({
+    data: {
+      kitaId: kita.id,
+      planId: currentPlan.id,
+      childId: children.emil.id,
+      date: alertAssignmentDate,
+    },
+  });
+
+  await prisma.notdienstAlert.create({
+    data: {
+      kitaId: kita.id,
+      assignmentId: pendingAlertAssignment.id,
+      parentUserId: elternYilmaz.id,
+      triggeredById: koordinator.id,
+      educatorId: educators.petra.id,
+      status: NotdienstAlertStatus.PENDING,
+      confirmationToken: "demo-pending-alert-token",
+      triggeredAt: today,
+      notes: "Es fehlen zwei Kraefte. Bitte Notdienst besetzen.",
+    },
+  });
+
   const previousPlan = await prisma.notdienstPlan.create({
     data: {
       kitaId: kita.id,
@@ -744,6 +1014,60 @@ async function createNotdienstData(
       notes: "Beispiel-Alarm aus Seed-Daten.",
     },
   });
+
+  const draftPlan = await prisma.notdienstPlan.create({
+    data: {
+      kitaId: kita.id,
+      year: targetMonth.getFullYear(),
+      month: targetMonth.getMonth() + 1,
+      status: NotdienstPlanStatus.DRAFT,
+      createdById: koordinator.id,
+    },
+  });
+}
+
+async function createAuditLogs({ kita, superAdmin, admin }: SeedContext) {
+  await prisma.auditLog.createMany({
+    data: [
+      {
+        actorUserId: superAdmin.id,
+        actorEmail: superAdmin.email,
+        action: "KITA_CREATE",
+        targetType: AuditTargetType.KITA,
+        targetId: kita.id,
+        targetLabel: kita.name,
+        targetKitaId: kita.id,
+        metadata: { name: kita.name, slug: kita.slug },
+        createdAt: addDays(new Date(), -30),
+      },
+      {
+        actorUserId: superAdmin.id,
+        actorEmail: superAdmin.email,
+        action: "USER_ROLE_UPDATE",
+        targetType: AuditTargetType.USER,
+        targetId: admin.id,
+        targetLabel: admin.email,
+        targetKitaId: kita.id,
+        metadata: { oldRole: "ELTERN", newRole: "ADMIN" },
+        createdAt: addDays(new Date(), -28),
+      },
+      {
+        actorUserId: admin.id,
+        actorEmail: admin.email,
+        action: "KITA_MODULE_UPDATE",
+        targetType: AuditTargetType.KITA,
+        targetId: kita.id,
+        targetLabel: kita.name,
+        targetKitaId: kita.id,
+        metadata: {
+          notdienstModuleEnabled: true,
+          terminModuleEnabled: true,
+          adressbuchModuleEnabled: true,
+        },
+        createdAt: addDays(new Date(), -25),
+      },
+    ],
+  });
 }
 
 async function createDemoData() {
@@ -760,8 +1084,9 @@ async function createDemoData() {
   await createAbsences(context, children);
   await createInvites(context);
   await createAnnouncements(context);
-  await createTermine(context);
+  await createTermine(context, children);
   await createNotdienstData(context, children, educators);
+  await createAuditLogs(context);
 
   printSummary(context, children);
 }
@@ -776,7 +1101,10 @@ async function seedIfEmpty() {
 }
 
 function printSummary(
-  {
+  context: SeedContext,
+  children: Awaited<ReturnType<typeof createChildren>>,
+) {
+  const {
     kita,
     superAdmin,
     admin,
@@ -784,10 +1112,11 @@ function printSummary(
     koordinator,
     elternSchmidt,
     elternYilmaz,
+    elternFischer,
+    elternKowalski,
+    elternWeber,
     pendingParent,
-  }: SeedContext,
-  children: Awaited<ReturnType<typeof createChildren>>,
-) {
+  } = context;
   console.log("Seed complete");
   console.log("");
   console.log(`   Kita:           ${kita.name} (${kita.slug})`);
@@ -799,6 +1128,9 @@ function printSummary(
   console.log(`     Koordinator:   ${koordinator.email}`);
   console.log(`     Eltern:        ${elternSchmidt.email}`);
   console.log(`     Eltern:        ${elternYilmaz.email}`);
+  console.log(`     Eltern (Fischer): ${elternFischer.email}`);
+  console.log(`     Eltern (Kowalski): ${elternKowalski.email}`);
+  console.log(`     Eltern (Weber):   ${elternWeber.email}`);
   console.log("");
   console.log(
     `   Offener Invite: ${pendingParent.email} -> /invite/demo-pending-parent-token`,

src/app/dashboard/absence-card.tsx

@@ -3,10 +3,11 @@
 import Link from "next/link";
 import { useMemo, useTransition } from "react";
 import { AbsenceReason } from "@prisma/client";
-import { Baby, CalendarX2, Loader2, Trash2 } from "lucide-react";
+import { Baby, CalendarX2, Check, ChevronRight, Loader2 } from "lucide-react";
+import { reasonColor, reasonLabel } from "@/lib/absence-utils";
 import { toast } from "sonner";
 
-import { deleteAbsence, reportAbsence } from "@/actions/absences";
+import { reportAbsence } from "@/actions/absences";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,7 +44,6 @@ type AbsenceListItem = {
 
 export function AbsenceCard({
   childOptions,
-  absences,
   today,
 }: {
   childOptions: ChildOption[];
@@ -69,56 +69,68 @@ export function AbsenceCard({
         return;
       }
 
-      toast.success("Abwesenheit eingetragen.");
-    });
-  }
-
-  function handleDelete(absenceId: string) {
-    startTransition(async () => {
-      const result = await deleteAbsence(absenceId);
-      if (result.error) {
-        toast.error(result.error);
-        return;
-      }
-
-      toast.success("Abwesenheit storniert.");
+      toast.success("Abwesenheit gemeldet. Die Kita ist informiert.");
     });
   }
 
   return (
-    <Card className="mb-8 border-amber-200 bg-amber-50/50">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-lg">
-          <CalendarX2 className="h-5 w-5 text-amber-700" />
-          Kind abmelden
-        </CardTitle>
-        <CardDescription>
-          Melde dein Kind für ganze Tage ab. Die Kita sieht die Meldung direkt
-          in der Tagesübersicht.
-        </CardDescription>
+    <Card variant="featured" className="min-w-0">
+      <CardHeader className="pb-5">
+        <div className="flex items-start gap-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <CalendarX2 className="h-4 w-4 [stroke-width:1.7]" />
+          </div>
+          <div>
+            <CardTitle>Kind abmelden</CardTitle>
+            <CardDescription className="mt-2 max-w-xl">
+              Melde dein Kind für ganze Tage ab. Die Kita sieht die Meldung
+              sofort in der Tagesübersicht — keine zusätzliche E-Mail nötig.
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
-      <CardContent className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
-        {hasChildren ? (
-          <form action={handleSubmit} className="grid gap-4">
-            <div className="grid gap-2">
-              <Label>Welches Kind?</Label>
-              <Select name="childId" defaultValue={defaultChildId} required>
-                <SelectTrigger>
-                  <SelectValue placeholder="Kind auswählen" />
-                </SelectTrigger>
-                <SelectContent>
-                  {childOptions.map((child) => (
-                    <SelectItem key={child.id} value={child.id}>
-                      {child.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
 
-            <div className="grid gap-3 sm:grid-cols-2">
-              <div className="grid gap-2">
-                <Label htmlFor="absence-startDate">Von</Label>
+      <CardContent>
+        {hasChildren ? (
+          <form action={handleSubmit}>
+            <div className="grid gap-4 md:grid-cols-2">
+              <FieldLabel label="Welches Kind?">
+                <Select name="childId" defaultValue={defaultChildId} required>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Kind auswählen" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {childOptions.map((child) => (
+                      <SelectItem key={child.id} value={child.id}>
+                        {child.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FieldLabel>
+
+              <FieldLabel label="Grund">
+                <Select
+                  name="reason"
+                  defaultValue={AbsenceReason.ILLNESS}
+                  required
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Grund auswählen" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={AbsenceReason.ILLNESS}>Krank</SelectItem>
+                    <SelectItem value={AbsenceReason.VACATION}>
+                      Urlaub
+                    </SelectItem>
+                    <SelectItem value={AbsenceReason.OTHER}>
+                      Sonstiges
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </FieldLabel>
+
+              <FieldLabel label="Von" htmlFor="absence-startDate">
                 <Input
                   id="absence-startDate"
                   name="startDate"
@@ -126,9 +138,9 @@ export function AbsenceCard({
                   defaultValue={today}
                   required
                 />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="absence-endDate">Bis</Label>
+              </FieldLabel>
+
+              <FieldLabel label="Bis" htmlFor="absence-endDate">
                 <Input
                   id="absence-endDate"
                   name="endDate"
@@ -136,144 +148,188 @@ export function AbsenceCard({
                   defaultValue={today}
                   required
                 />
+              </FieldLabel>
+
+              <div className="grid gap-2 md:col-span-2">
+                <Label
+                  htmlFor="absence-note"
+                  className="text-xs font-semibold text-[var(--ink-soft)]"
+                >
+                  Bemerkung{" "}
+                  <span className="font-medium text-[var(--ink-faint)]">
+                    optional
+                  </span>
+                </Label>
+                <Textarea
+                  id="absence-note"
+                  name="note"
+                  rows={4}
+                  placeholder="z. B. voraussichtlich wieder da am Freitag."
+                />
               </div>
             </div>
 
-            <div className="grid gap-2">
-              <Label>Grund</Label>
-              <Select name="reason" defaultValue={AbsenceReason.ILLNESS} required>
-                <SelectTrigger>
-                  <SelectValue placeholder="Grund auswählen" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={AbsenceReason.ILLNESS}>Krank</SelectItem>
-                  <SelectItem value={AbsenceReason.VACATION}>Urlaub</SelectItem>
-                  <SelectItem value={AbsenceReason.OTHER}>Sonstiges</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="absence-note">Bemerkung</Label>
-              <Textarea
-                id="absence-note"
-                name="note"
-                rows={3}
-                placeholder="Optional, z.B. voraussichtlich wieder da am Freitag."
-              />
-            </div>
-
-            <div className="flex justify-end">
+            <div className="mt-7 flex items-center justify-between border-t border-[var(--hairline-soft)] pt-5">
+              <Button type="reset" variant="ghost">
+                Zurücksetzen
+              </Button>
               <Button type="submit" disabled={isPending}>
-                {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+                {isPending ? <Loader2 className="animate-spin" /> : <Check />}
                 Abwesenheit melden
               </Button>
             </div>
           </form>
         ) : (
-          <div className="flex min-h-72 flex-col items-center justify-center rounded-md border border-dashed bg-background/70 p-6 text-center">
-            <Baby className="h-10 w-10 text-muted-foreground" />
-            <p className="mt-4 font-medium">Noch keine Kinder hinterlegt</p>
-            <p className="mt-1 text-sm text-muted-foreground">
+          <div className="flex min-h-72 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-6 text-center">
+            <Baby className="h-10 w-10 text-[var(--ink-muted)]" />
+            <p className="mt-4 font-medium text-[var(--ink)]">
+              Noch keine Kinder hinterlegt
+            </p>
+            <p className="mt-1 text-sm text-[var(--ink-soft)]">
               Lege zuerst deine Kinder im Profil an, dann kannst du sie hier
               abmelden.
             </p>
-            <Button asChild className="mt-4" variant="outline">
+            <Button asChild className="mt-4" variant="ghost">
               <Link href="/dashboard/profil">Zum Profil</Link>
             </Button>
           </div>
         )}
-
-        <div className="rounded-md border bg-background/80 p-4">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <p className="font-medium">Aktuelle & anstehende Meldungen</p>
-            <Badge variant="secondary">{absences.length}</Badge>
-          </div>
-          {absences.length === 0 ? (
-            <p className="text-sm text-muted-foreground">
-              Es sind keine aktuellen oder kommenden Abwesenheiten hinterlegt.
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {absences.map((absence) => (
-                <AbsenceRow
-                  key={absence.id}
-                  absence={absence}
-                  disabled={isPending}
-                  onDelete={handleDelete}
-                />
-              ))}
-            </div>
-          )}
-        </div>
       </CardContent>
     </Card>
   );
 }
 
-function AbsenceRow({
-  absence,
-  disabled,
-  onDelete,
+export function UpcomingAbsencesCard({
+  absences,
 }: {
-  absence: AbsenceListItem;
-  disabled: boolean;
-  onDelete: (id: string) => void;
+  absences: AbsenceListItem[];
 }) {
-  const range = useMemo(() => {
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <CardTitle>Anstehende Meldungen</CardTitle>
+            <CardDescription className="mt-2">
+              Aktuelle und kommende Abwesenheiten deiner Kinder.
+            </CardDescription>
+          </div>
+          <Badge variant="secondary">{absences.length}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {absences.length === 0 ? (
+          <div className="flex min-h-36 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-5 text-center">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--good-soft)] text-[var(--good)]">
+              <Check className="h-4 w-4" />
+            </div>
+            <p className="mt-3 text-sm font-medium text-[var(--ink)]">
+              Keine offenen Meldungen
+            </p>
+            <p className="mt-1 text-xs text-[var(--ink-soft)]">
+              Für die nächsten Tage ist alles ruhig.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-[var(--hairline-soft)]">
+            {absences.map((absence) => (
+              <AbsenceRow key={absence.id} absence={absence} />
+            ))}
+          </div>
+        )}
+
+        <Link
+          href="/dashboard/admin/abwesenheiten"
+          className="mt-4 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--accent-deep)] transition hover:gap-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+        >
+          Alle Abwesenheiten
+          <ChevronRight className="h-3.5 w-3.5" />
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FieldLabel({
+  label,
+  htmlFor,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-2">
+      <Label
+        htmlFor={htmlFor}
+        className="text-xs font-semibold text-[var(--ink-soft)]"
+      >
+        {label}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+function AbsenceRow({ absence }: { absence: AbsenceListItem }) {
+  const { day, month, detail } = useMemo(() => {
     const start = new Date(`${absence.startDate}T00:00:00`);
     const end = new Date(`${absence.endDate}T00:00:00`);
-    const startLabel = start.toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-    });
-    const endLabel = end.toLocaleDateString("de-DE", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    });
-    return absence.startDate === absence.endDate
-      ? endLabel
-      : `${startLabel} - ${endLabel}`;
+    const range =
+      absence.startDate === absence.endDate
+        ? "ganztägig"
+        : `${start.toLocaleDateString("de-DE", {
+            day: "2-digit",
+            month: "2-digit",
+          })}-${end.toLocaleDateString("de-DE", {
+            day: "2-digit",
+            month: "2-digit",
+          })}`;
+
+    return {
+      day: start.toLocaleDateString("de-DE", { day: "2-digit" }),
+      month: start
+        .toLocaleDateString("de-DE", { month: "short" })
+        .replace(".", ""),
+      detail: range,
+    };
   }, [absence.endDate, absence.startDate]);
 
   return (
-    <div className="rounded-md border p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="font-medium">{absence.childName}</p>
-          <p className="mt-0.5 text-sm text-muted-foreground">{range}</p>
-        </div>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
-          onClick={() => onDelete(absence.id)}
-          disabled={disabled}
-          aria-label="Abwesenheit stornieren"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+    <div className="flex items-center gap-3 py-3">
+      <div className="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] leading-none">
+        <span className="text-base font-medium text-[var(--ink)] [font-variant-numeric:tabular-nums]">
+          {day}
+        </span>
+        <span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)]">
+          {month}
+        </span>
       </div>
-      <div className="mt-2 flex flex-wrap items-center gap-2">
-        <ReasonBadge reason={absence.reason} />
-        {absence.note && (
-          <span className="text-xs text-muted-foreground">{absence.note}</span>
-        )}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold text-[var(--ink)]">
+              {absence.childName}
+            </p>
+            <p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--ink-soft)]">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{ backgroundColor: reasonColor(absence.reason) }}
+              />
+              {reasonLabel(absence.reason)} · {detail}
+            </p>
+          </div>
+          <Badge variant="destructive">Bestätigt</Badge>
+        </div>
+        {absence.note ? (
+          <p className="mt-1 truncate text-xs text-[var(--ink-muted)]">
+            {absence.note}
+          </p>
+        ) : null}
       </div>
     </div>
   );
 }
 
-function ReasonBadge({ reason }: { reason: AbsenceReason }) {
-  if (reason === AbsenceReason.ILLNESS) {
-    return <Badge variant="destructive">Krank</Badge>;
-  }
 
-  if (reason === AbsenceReason.VACATION) {
-    return <Badge variant="warning">Urlaub</Badge>;
-  }
-
-  return <Badge variant="outline">Sonstiges</Badge>;
-}

src/app/dashboard/admin/abwesenheiten/_components/absences-client.tsx

@@ -0,0 +1,441 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { addDays, format, isWeekend, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  ArrowLeft,
+  ArrowRight,
+  CalendarCheck2,
+  CalendarDays,
+  ChevronDown,
+  ChevronRight,
+  Stethoscope,
+} from "lucide-react";
+import { AbsenceReason } from "@prisma/client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { AbsenceTable, type AbsenceTableItem } from "../absence-table";
+import { reasonColor, reasonLabel } from "@/lib/absence-utils";
+
+interface AbsencesClientProps {
+  initialAbsences: AbsenceTableItem[];
+  childCount: number;
+  upcomingAbsenceCount: number;
+  closure: { title: string; type: string } | null;
+  dateKey: string;
+  selectedDateStr: string;
+  isToday: boolean;
+  isTooFarFuture: boolean;
+  isClosedDay: boolean;
+  todayStr: string;
+  error: string | null;
+}
+
+export function AbsencesClient({
+  initialAbsences,
+  childCount,
+  upcomingAbsenceCount,
+  closure,
+  dateKey,
+  selectedDateStr,
+  isToday,
+  isTooFarFuture,
+  isClosedDay,
+  todayStr,
+  error,
+}: AbsencesClientProps) {
+  const router = useRouter();
+  const selectedDate = parseISO(selectedDateStr);
+  const today = parseISO(todayStr);
+
+  // Filters State
+  const [selectedGroup, setSelectedGroup] = useState<"all" | "Krippe" | "Elementar">("all");
+  const [selectedReason, setSelectedReason] = useState<"all" | AbsenceReason>("all");
+
+  // Dropdown UI state
+  const [isGroupOpen, setIsGroupOpen] = useState(false);
+  const [isReasonOpen, setIsReasonOpen] = useState(false);
+
+  // Date input state
+  const [inputDate, setInputDate] = useState(dateKey);
+
+  // Group resolver function
+  const mockGroup = (childName: string) => {
+    const charCode = childName.charCodeAt(0);
+    return charCode % 2 === 0 ? "Krippe" : "Elementar";
+  };
+
+  // Filter computation
+  const filteredAbsences = useMemo(() => {
+    return initialAbsences.filter((item) => {
+      if (selectedGroup !== "all" && mockGroup(item.childName) !== selectedGroup) {
+        return false;
+      }
+      if (selectedReason !== "all" && item.reason !== selectedReason) {
+        return false;
+      }
+      return true;
+    });
+  }, [initialAbsences, selectedGroup, selectedReason]);
+
+  // Recalculate reasons count based on filtered absences
+  const countsByReason = useMemo(() => {
+    return filteredAbsences.reduce<Partial<Record<AbsenceReason, number>>>((acc, item) => {
+      acc[item.reason] = (acc[item.reason] ?? 0) + 1;
+      return acc;
+    }, {});
+  }, [filteredAbsences]);
+
+  const handleDateNavigate = (targetDate: Date) => {
+    const formatted = format(targetDate, "yyyy-MM-dd");
+    setInputDate(formatted);
+    router.push(`/dashboard/admin/abwesenheiten?date=${formatted}`);
+  };
+
+  const handleDateFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (inputDate) {
+      router.push(`/dashboard/admin/abwesenheiten?date=${inputDate}`);
+    }
+  };
+
+  return (
+    <div>
+      <header className="mb-7 flex items-end justify-between gap-8 max-[1100px]:flex-col max-[1100px]:items-start">
+        <div>
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            TAGESÜBERSICHT
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Heute fehlen{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              {filteredAbsences.length} Kinder
+            </em>
+          </h1>
+          <p className="mt-2 text-[15px] leading-6 text-[var(--ink-soft)]">
+            {format(selectedDate, "EEEE, d. MMMM yyyy", { locale: de })}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-end gap-3">
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <Stethoscope className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+            {childCount - filteredAbsences.length} anwesend
+          </span>
+          <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)]">
+            <button
+              onClick={() => handleDateNavigate(addDays(selectedDate, -1))}
+              className="inline-flex h-10 items-center gap-2 border-r border-[var(--hairline)] px-4 text-[13px] font-semibold text-[var(--ink-soft)] transition hover:bg-[var(--surface-2)] hover:text-[var(--ink)]"
+            >
+              <ArrowLeft className="h-3.5 w-3.5" />
+              Zurück
+            </button>
+            <button
+              onClick={() => handleDateNavigate(today)}
+              className={`inline-flex h-10 items-center gap-2 border-r border-[var(--hairline)] px-4 text-[13px] font-semibold text-[var(--ink-soft)] transition hover:bg-[var(--surface-2)] hover:text-[var(--ink)] ${
+                isToday ? "bg-[var(--accent-soft)] text-[var(--accent-deep)]" : ""
+              }`}
+            >
+              Heute
+            </button>
+            <button
+              onClick={() => handleDateNavigate(addDays(selectedDate, 1))}
+              className="inline-flex h-10 items-center gap-2 px-4 text-[13px] font-semibold text-[var(--ink-soft)] transition hover:bg-[var(--surface-2)] hover:text-[var(--ink)]"
+            >
+              Vor
+              <ArrowRight className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <form onSubmit={handleDateFormSubmit} className="flex items-center gap-2">
+            <Input
+              type="date"
+              name="date"
+              value={inputDate}
+              onChange={(e) => setInputDate(e.target.value)}
+              className="w-[140px]"
+            />
+            <Button type="submit">Anzeigen</Button>
+          </form>
+        </div>
+      </header>
+
+      <div className="mt-5 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap gap-2">
+          {/* Group Dropdown Filter */}
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setIsGroupOpen(!isGroupOpen)}
+              className={`inline-flex h-9 items-center gap-2 rounded-full border px-4 text-[13px] font-semibold transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] ${
+                selectedGroup !== "all"
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-transparent text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+              }`}
+            >
+              {selectedGroup === "all" ? "Alle Gruppen" : selectedGroup}
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+            {isGroupOpen && (
+              <>
+                <div className="fixed inset-0 z-10" onClick={() => setIsGroupOpen(false)} />
+                <div className="absolute left-0 mt-1.5 w-44 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] py-1.5 shadow-lg z-20">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedGroup("all");
+                      setIsGroupOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedGroup === "all"
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Alle Gruppen
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedGroup("Krippe");
+                      setIsGroupOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedGroup === "Krippe"
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Krippe (Mock)
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedGroup("Elementar");
+                      setIsGroupOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedGroup === "Elementar"
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Elementar (Mock)
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Reason Dropdown Filter */}
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setIsReasonOpen(!isReasonOpen)}
+              className={`inline-flex h-9 items-center gap-2 rounded-full border px-4 text-[13px] font-semibold transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] ${
+                selectedReason !== "all"
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-transparent text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+              }`}
+            >
+              {selectedReason === "all" ? "Alle Gründe" : reasonLabel(selectedReason)}
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+            {isReasonOpen && (
+              <>
+                <div className="fixed inset-0 z-10" onClick={() => setIsReasonOpen(false)} />
+                <div className="absolute left-0 mt-1.5 w-44 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] py-1.5 shadow-lg z-20">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedReason("all");
+                      setIsReasonOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedReason === "all"
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Alle Gründe
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedReason(AbsenceReason.ILLNESS);
+                      setIsReasonOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedReason === AbsenceReason.ILLNESS
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Krankheit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedReason(AbsenceReason.VACATION);
+                      setIsReasonOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedReason === AbsenceReason.VACATION
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Urlaub
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedReason(AbsenceReason.OTHER);
+                      setIsReasonOpen(false);
+                    }}
+                    className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                      selectedReason === AbsenceReason.OTHER
+                        ? "bg-[var(--accent-soft)] text-[var(--accent-deep)] font-semibold"
+                        : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]"
+                    }`}
+                  >
+                    Sonstiges
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        {filteredAbsences.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-4 text-xs text-[var(--ink-soft)]">
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: reasonColor(AbsenceReason.ILLNESS) }}
+              />
+              {reasonLabel(AbsenceReason.ILLNESS)} {countsByReason[AbsenceReason.ILLNESS] ?? 0}
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: reasonColor(AbsenceReason.OTHER) }}
+              />
+              {reasonLabel(AbsenceReason.OTHER)} {countsByReason[AbsenceReason.OTHER] ?? 0}
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{ backgroundColor: reasonColor(AbsenceReason.VACATION) }}
+              />
+              {reasonLabel(AbsenceReason.VACATION)} {countsByReason[AbsenceReason.VACATION] ?? 0}
+            </span>
+            <span>
+              letzte Aktualisierung {format(new Date(), "HH:mm", { locale: de })}
+            </span>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-4">
+        {error ? (
+          <Card className="border-[var(--danger)] bg-[var(--danger-soft)]">
+            <CardContent className="pt-[22px] text-sm text-[var(--danger)]">
+              {error}
+            </CardContent>
+          </Card>
+        ) : filteredAbsences.length > 0 ? (
+          <Card>
+            <CardHeader className="pb-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <CardTitle>
+                  {filteredAbsences.length} von {childCount} Kindern abwesend ·{" "}
+                  {upcomingAbsenceCount} anstehend
+                </CardTitle>
+                <Badge variant="secondary">{dateKey}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <AbsenceTable absences={filteredAbsences} />
+            </CardContent>
+          </Card>
+        ) : isTooFarFuture ? (
+          <EmptyState
+            tone="accent"
+            title="Noch nicht im Vorschauzeitraum"
+            description="Abwesenheiten werden erst 30 Tage im Voraus angezeigt."
+          />
+        ) : isClosedDay ? (
+          <EmptyState
+            tone="accent"
+            title={`Kita geschlossen am ${format(selectedDate, "d. MMMM", {
+              locale: de,
+            })}`}
+            description={
+              closure
+                ? closure.title
+                : "Wochenende · für diesen Tag werden keine Anwesenheiten erwartet."
+            }
+          />
+        ) : (
+          <EmptyState
+            tone="good"
+            title="Keine Abwesenheiten"
+            description="Für diesen Tag sind aktuell keine Kinder abgemeldet."
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EmptyState({
+  tone,
+  title,
+  description,
+}: {
+  tone: "good" | "accent";
+  title: string;
+  description: string;
+}) {
+  const isGood = tone === "good";
+
+  return (
+    <Card>
+      <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-8 py-12 text-center">
+        <div
+          className={[
+            "flex h-12 w-12 items-center justify-center rounded-2xl",
+            isGood
+              ? "bg-[var(--good-soft)] text-[var(--good)]"
+              : "bg-[var(--accent-soft)] text-[var(--accent-deep)]",
+          ].join(" ")}
+        >
+          {isGood ? (
+            <CalendarCheck2 className="h-6 w-6 [stroke-width:1.7]" />
+          ) : (
+            <CalendarDays className="h-6 w-6 [stroke-width:1.7]" />
+          )}
+        </div>
+        <h2 className="mt-5 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+          {title}
+        </h2>
+        <p className="mt-2 max-w-md text-sm text-[var(--ink-soft)]">
+          {description}
+        </p>
+        <Link
+          href="/dashboard/admin/abwesenheiten"
+          className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-[var(--accent-deep)] transition hover:gap-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+        >
+          Wochenübersicht öffnen
+          <ChevronRight className="h-3.5 w-3.5" />
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}

src/app/dashboard/admin/abwesenheiten/absence-format.ts

@@ -0,0 +1,28 @@
+import { AbsenceReason } from "@prisma/client";
+
+export function reasonLabel(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "Krank";
+  if (reason === AbsenceReason.VACATION) return "Urlaub";
+  return "Sonstiges";
+}
+
+export function reasonColor(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "var(--danger)";
+  if (reason === AbsenceReason.VACATION) return "var(--warn)";
+  return "var(--accent)";
+}
+
+export function formatDateRange(startDate: string, endDate: string) {
+  const start = new Date(`${startDate}T00:00:00`);
+  const end = new Date(`${endDate}T00:00:00`);
+  const startLabel = start.toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+  });
+  const endLabel = end.toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+  return startDate === endDate ? endLabel : `${startLabel} - ${endLabel}`;
+}

src/app/dashboard/admin/abwesenheiten/absence-table.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { AbsenceReason } from "@prisma/client";
+import { CalendarDays, Circle, MessageSquareText, UserRound } from "lucide-react";
+import { reasonColor, reasonLabel } from "@/lib/absence-utils";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export type AbsenceTableItem = {
+  id: string;
+  childName: string;
+  familyName: string;
+  reason: AbsenceReason;
+  note: string | null;
+  startDate: string;
+  endDate: string;
+};
+
+export function AbsenceTable({ absences }: { absences: AbsenceTableItem[] }) {
+  const [activeAbsence, setActiveAbsence] = useState<AbsenceTableItem | null>(
+    null,
+  );
+
+  return (
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            <TableHead>Kind</TableHead>
+            <TableHead>Zeitraum</TableHead>
+            <TableHead>Grund</TableHead>
+            <TableHead>Bemerkung</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {absences.map((absence) => (
+            <TableRow
+              key={absence.id}
+              className="cursor-pointer border-[var(--hairline-soft)] hover:bg-[var(--surface-2)]"
+              onClick={() => setActiveAbsence(absence)}
+            >
+              <TableCell>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-xs font-semibold text-[var(--accent-deep)]">
+                    {getInitials(absence.childName)}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate font-semibold text-[var(--ink)]">
+                      {absence.childName}
+                    </p>
+                    <p className="truncate text-xs text-[var(--ink-soft)]">
+                      {absence.familyName}
+                    </p>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell className="text-[var(--ink-soft)]">
+                {formatDateRange(absence.startDate, absence.endDate)}
+              </TableCell>
+              <TableCell>
+                <span className="inline-flex items-center gap-2 text-[var(--ink)]">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: reasonColor(absence.reason) }}
+                  />
+                  {reasonLabel(absence.reason)}
+                </span>
+              </TableCell>
+              <TableCell className="max-w-[280px] truncate text-[var(--ink-soft)]">
+                {absence.note || "Keine Bemerkung hinterlegt."}
+              </TableCell>
+              <TableCell>
+                <Badge variant="success">Bestätigt</Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      <Dialog
+        open={!!activeAbsence}
+        onOpenChange={(open) => !open && setActiveAbsence(null)}
+      >
+        <DialogContent className="left-auto right-0 top-0 h-full max-w-md translate-x-0 translate-y-0 rounded-none border-y-0 border-r-0 border-[var(--hairline)] bg-[var(--surface)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right">
+          {activeAbsence ? (
+            <>
+              <DialogHeader>
+                <DialogTitle className="text-2xl font-medium tracking-[-0.02em] text-[var(--ink)]">
+                  {activeAbsence.childName}
+                </DialogTitle>
+                <DialogDescription>{activeAbsence.familyName}</DialogDescription>
+              </DialogHeader>
+
+              <div className="mt-4 grid gap-4">
+                <DetailLine
+                  icon={CalendarDays}
+                  label="Zeitraum"
+                  value={formatDateRange(
+                    activeAbsence.startDate,
+                    activeAbsence.endDate,
+                  )}
+                />
+                <DetailLine
+                  icon={Circle}
+                  label="Grund"
+                  value={reasonLabel(activeAbsence.reason)}
+                  dotColor={reasonColor(activeAbsence.reason)}
+                />
+                <DetailLine
+                  icon={MessageSquareText}
+                  label="Bemerkung"
+                  value={activeAbsence.note || "Keine Bemerkung hinterlegt."}
+                />
+                <DetailLine icon={UserRound} label="Status" value="Bestätigt" />
+              </div>
+            </>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function DetailLine({
+  icon: Icon,
+  label,
+  value,
+  dotColor,
+}: {
+  icon: typeof CalendarDays;
+  label: string;
+  value: string;
+  dotColor?: string;
+}) {
+  return (
+    <div className="rounded-lg border border-[var(--hairline-soft)] bg-[var(--surface-2)] p-3">
+      <p className="flex items-center gap-2 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+        {dotColor ? (
+          <span
+            className="h-2 w-2 rounded-full"
+            style={{ backgroundColor: dotColor }}
+          />
+        ) : (
+          <Icon className="h-3.5 w-3.5 [stroke-width:1.7]" />
+        )}
+        {label}
+      </p>
+      <p className="mt-2 text-sm font-medium text-[var(--ink)]">{value}</p>
+    </div>
+  );
+}
+
+function getInitials(name: string) {
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase();
+}
+
+
+
+export function formatDateRange(startDate: string, endDate: string) {
+  const start = new Date(`${startDate}T00:00:00`);
+  const end = new Date(`${endDate}T00:00:00`);
+  const startLabel = start.toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+  });
+  const endLabel = end.toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+  return startDate === endDate ? endLabel : `${startLabel} - ${endLabel}`;
+}

src/app/dashboard/admin/abwesenheiten/page.tsx

@@ -1,164 +1,91 @@
-import Link from "next/link";
-import { addDays, format } from "date-fns";
-import { de } from "date-fns/locale";
-import { ArrowLeft, ArrowRight, CalendarDays, Stethoscope } from "lucide-react";
-import { AbsenceReason } from "@prisma/client";
+import { differenceInCalendarDays, format, isWeekend } from "date-fns";
+import { TerminStatus, TerminType, UserRole } from "@prisma/client";
 
 import { getDailyAbsences } from "@/actions/absences";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { requireRole } from "@/lib/auth-utils";
+import { prisma } from "@/lib/prisma";
+import { AbsencesClient } from "./_components/absences-client";
+import { type AbsenceTableItem } from "./absence-table";
 
 export const metadata = { title: "Abwesenheiten · Kita-Planer" };
 
 export default async function AdminAbwesenheitenPage({
   searchParams,
 }: {
-  searchParams: { date?: string };
+  searchParams: Promise<{ date?: string }>;
 }) {
-  const selectedDate = parseDateParam(searchParams.date);
+  const session = await requireRole([
+    UserRole.ADMIN,
+    UserRole.KOORDINATOR,
+    UserRole.ERZIEHER,
+  ]);
+  const resolvedSearchParams = await searchParams;
+  const kitaId = session.user.kitaId!;
+  const today = startOfLocalDay(new Date());
+  const selectedDate = parseDateParam(resolvedSearchParams.date, today);
   const dateKey = format(selectedDate, "yyyy-MM-dd");
   const result = await getDailyAbsences({ date: dateKey });
   const absences = result.absences ?? [];
+  const childCount = await prisma.child.count({
+    where: { kitaId, active: true },
+  });
+  const upcomingAbsenceCount = await prisma.absence.count({
+    where: {
+      kitaId,
+      startDate: { gt: selectedDate },
+    },
+  });
+  const closure = await prisma.termin.findFirst({
+    where: {
+      kitaId,
+      status: TerminStatus.CONFIRMED,
+      type: { in: [TerminType.SCHLIESSTAG, TerminType.TEAMTAG] },
+      startDate: { lte: selectedDate },
+      endDate: { gte: selectedDate },
+    },
+    select: { title: true, type: true },
+    orderBy: { startDate: "asc" },
+  });
+  const isToday = dateKey === format(today, "yyyy-MM-dd");
+  const isTooFarFuture = differenceInCalendarDays(selectedDate, today) > 30;
+  const isClosedDay = isWeekend(selectedDate) || !!closure;
+  const tableItems: AbsenceTableItem[] = absences.map((absence) => ({
+    id: absence.id,
+    childName: absence.childName,
+    familyName: absence.familyName,
+    reason: absence.reason,
+    note: absence.note,
+    startDate: absence.startDate,
+    endDate: absence.endDate,
+  }));
 
   return (
-    <div className="min-h-full bg-slate-50 px-4 py-6 sm:px-8">
-      <div className="mx-auto max-w-5xl space-y-6">
-        <div className="flex flex-col gap-4 rounded-lg border bg-background p-5 shadow-sm lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-              <Stethoscope className="h-4 w-4" />
-              Tagesübersicht
-            </div>
-            <h1 className="mt-2 text-3xl font-bold tracking-tight">
-              Heute fehlen ({absences.length} Kinder)
-            </h1>
-            <p className="mt-1 text-sm text-muted-foreground">
-              {format(selectedDate, "EEEE, dd. MMMM yyyy", { locale: de })}
-            </p>
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
-            <Button asChild variant="outline" size="sm">
-              <Link href={hrefForDate(addDays(selectedDate, -1))}>
-                <ArrowLeft className="h-4 w-4" />
-                Zurück
-              </Link>
-            </Button>
-            <Button asChild variant="outline" size="sm">
-              <Link href="/dashboard/admin/abwesenheiten">Heute</Link>
-            </Button>
-            <Button asChild variant="outline" size="sm">
-              <Link href={hrefForDate(addDays(selectedDate, 1))}>
-                Vor
-                <ArrowRight className="h-4 w-4" />
-              </Link>
-            </Button>
-            <form className="flex items-center gap-2">
-              <Input
-                type="date"
-                name="date"
-                defaultValue={dateKey}
-                className="h-9 w-40"
-              />
-              <Button type="submit" size="sm">
-                Anzeigen
-              </Button>
-            </form>
-          </div>
-        </div>
-
-        {result.error ? (
-          <Card className="border-destructive/30">
-            <CardContent className="p-6 text-sm text-destructive">
-              {result.error}
-            </CardContent>
-          </Card>
-        ) : absences.length === 0 ? (
-          <div className="flex min-h-[420px] items-center justify-center rounded-lg border border-dashed bg-background p-8 text-center">
-            <div className="mx-auto max-w-md">
-              <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
-                <CalendarDays className="h-10 w-10" />
-              </div>
-              <h2 className="mt-6 text-2xl font-semibold tracking-tight">
-                Keine Abwesenheiten
-              </h2>
-              <p className="mt-2 text-sm text-muted-foreground">
-                Für diesen Tag sind aktuell keine Kinder abgemeldet.
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div className="grid gap-3">
-            {absences.map((absence) => (
-              <Card key={absence.id} className="overflow-hidden">
-                <CardHeader className="flex flex-col gap-3 p-5 sm:flex-row sm:items-start sm:justify-between">
-                  <div>
-                    <CardTitle className="text-xl">
-                      {absence.childName}
-                    </CardTitle>
-                    <CardDescription className="mt-1">
-                      {absence.familyName}
-                    </CardDescription>
-                  </div>
-                  <ReasonBadge reason={absence.reason} />
-                </CardHeader>
-                <CardContent className="grid gap-3 px-5 pb-5 sm:grid-cols-[180px_1fr]">
-                  <div className="text-sm">
-                    <p className="font-medium">Zeitraum</p>
-                    <p className="text-muted-foreground">
-                      {formatDateRange(absence.startDate, absence.endDate)}
-                    </p>
-                  </div>
-                  <div className="text-sm">
-                    <p className="font-medium">Notiz</p>
-                    <p className="text-muted-foreground">
-                      {absence.note || "Keine Bemerkung hinterlegt."}
-                    </p>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
-      </div>
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <AbsencesClient
+        initialAbsences={tableItems}
+        childCount={childCount}
+        upcomingAbsenceCount={upcomingAbsenceCount}
+        closure={closure}
+        dateKey={dateKey}
+        selectedDateStr={selectedDate.toISOString()}
+        isToday={isToday}
+        isTooFarFuture={isTooFarFuture}
+        isClosedDay={isClosedDay}
+        todayStr={today.toISOString()}
+        error={result.error ?? null}
+      />
     </div>
   );
 }
 
-function parseDateParam(value: string | undefined) {
-  if (!value) return new Date();
+function parseDateParam(value: string | undefined, fallback: Date) {
+  if (!value) return fallback;
   const parsed = new Date(`${value}T00:00:00`);
-  return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+  return Number.isNaN(parsed.getTime()) ? fallback : parsed;
 }
 
-function hrefForDate(date: Date) {
-  return `/dashboard/admin/abwesenheiten?date=${format(date, "yyyy-MM-dd")}`;
-}
-
-function formatDateRange(startDate: string, endDate: string) {
-  const start = new Date(`${startDate}T00:00:00`);
-  const end = new Date(`${endDate}T00:00:00`);
-  const startLabel = format(start, "dd.MM.", { locale: de });
-  const endLabel = format(end, "dd.MM.yyyy", { locale: de });
-  return startDate === endDate ? endLabel : `${startLabel} - ${endLabel}`;
-}
-
-function ReasonBadge({ reason }: { reason: AbsenceReason }) {
-  if (reason === AbsenceReason.ILLNESS) {
-    return <Badge variant="destructive">Krank</Badge>;
-  }
-
-  if (reason === AbsenceReason.VACATION) {
-    return <Badge variant="warning">Urlaub</Badge>;
-  }
-
-  return <Badge variant="outline">Sonstiges</Badge>;
+function startOfLocalDay(date: Date) {
+  const nextDate = new Date(date);
+  nextDate.setHours(0, 0, 0, 0);
+  return nextDate;
 }

src/app/dashboard/admin/dienste/duty-planner.tsx

@@ -116,9 +116,11 @@ export function DutyPlanner({
 
   if (dutyTypes.length === 0) {
     return (
-      <div className="rounded-md border border-dashed p-8 text-center">
-        <p className="text-sm font-medium">Noch keine Diensttypen</p>
-        <p className="mt-1 text-sm text-muted-foreground">
+      <div className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-8 text-center">
+        <p className="text-sm font-medium text-[var(--ink)]">
+          Noch keine Diensttypen
+        </p>
+        <p className="mt-1 text-sm text-[var(--ink-soft)]">
           Lege zuerst einen Diensttyp an, danach erscheint hier das Planungsgrid.
         </p>
       </div>
@@ -136,29 +138,29 @@ export function DutyPlanner({
           disabled={isPending}
         >
           {isPending ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
           ) : (
-            <BellRing className="h-4 w-4" />
+            <BellRing className="h-4 w-4 [stroke-width:1.7]" />
           )}
           Reminder diese Woche senden
         </Button>
       </div>
 
-      <div className="overflow-x-auto rounded-md border">
-        <table className="w-full min-w-[760px] border-collapse text-sm">
+      <div className="overflow-x-auto rounded-lg border border-[var(--hairline)]">
+        <table className="w-full min-w-[760px] border-collapse text-[13.5px] text-[var(--ink)]">
           <thead>
-            <tr className="border-b bg-muted/50">
-              <th className="sticky left-0 z-10 w-56 bg-muted/95 px-4 py-3 text-left font-medium">
+            <tr className="border-b border-[var(--hairline-soft)] bg-[var(--surface-2)]">
+              <th className="sticky left-0 z-10 w-56 bg-[var(--surface-2)] px-4 py-3 text-left text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
                 Woche
               </th>
               {dutyTypes.map((dutyType) => (
                 <th
                   key={dutyType.id}
-                  className="min-w-56 px-4 py-3 text-left font-medium"
+                  className="min-w-56 px-4 py-3 text-left font-medium text-[var(--ink)]"
                 >
                   <div>{dutyType.name}</div>
                   {dutyType.description && (
-                    <div className="mt-1 line-clamp-1 text-xs font-normal text-muted-foreground">
+                    <div className="mt-1 line-clamp-1 text-xs font-normal text-[var(--ink-muted)]">
                       {dutyType.description}
                     </div>
                   )}
@@ -168,8 +170,11 @@ export function DutyPlanner({
           </thead>
           <tbody>
             {weeks.map((week) => (
-              <tr key={week.key} className="border-b last:border-b-0">
-                <td className="sticky left-0 z-10 bg-background px-4 py-3 font-medium">
+              <tr
+                key={week.key}
+                className="border-b border-[var(--hairline-soft)] last:border-b-0 hover:bg-[var(--surface-2)]"
+              >
+                <td className="sticky left-0 z-10 bg-[var(--surface)] px-4 py-3 font-medium">
                   {week.label}
                 </td>
                 {dutyTypes.map((dutyType) => {

src/app/dashboard/admin/dienste/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { addWeeks, format, getISOWeek, startOfDay, startOfWeek } from "date-fns";
 import { de } from "date-fns/locale";
-import { CalendarRange, ClipboardList, Plus, Trash2 } from "lucide-react";
+import { CalendarRange, Plus, Trash2 } from "lucide-react";
 import { UserRole } from "@prisma/client";
 
 import { Button } from "@/components/ui/button";
@@ -34,15 +34,16 @@ const MAX_WEEK_COUNT = 104;
 export default async function DienstePage({
   searchParams,
 }: {
-  searchParams: { start?: string; weeks?: string };
+  searchParams: Promise<{ start?: string; weeks?: string }>;
 }) {
   const session = await requireRole([UserRole.ADMIN, UserRole.SUPERADMIN]);
   if (!session.user.kitaId) {
     throw new Error("Kein Mandant zugeordnet.");
   }
 
-  const rangeStart = getRangeStart(searchParams.start);
-  const weekCount = getWeekCount(searchParams.weeks);
+  const resolvedSearchParams = await searchParams;
+  const rangeStart = getRangeStart(resolvedSearchParams.start);
+  const weekCount = getWeekCount(resolvedSearchParams.weeks);
   const weeks = buildWeeks(rangeStart, weekCount);
   const rangeEnd = startOfDay(new Date(weeks[weeks.length - 1].endDate));
 
@@ -83,77 +84,88 @@ export default async function DienstePage({
 
   const dutyTypeDtos: DutyPlanDutyTypeDto[] = dutyTypes;
   const familyDtos: DutyPlanFamilyDto[] = families;
-  const assignmentDtos: DutyPlanAssignmentDto[] = assignments.map((assignment) => ({
-    id: assignment.id,
-    dutyTypeId: assignment.dutyTypeId,
-    familyId: assignment.familyId,
-    startDate: toDateKey(assignment.startDate),
-  }));
+  const assignmentDtos: DutyPlanAssignmentDto[] = assignments.map(
+    (assignment) => ({
+      id: assignment.id,
+      dutyTypeId: assignment.dutyTypeId,
+      familyId: assignment.familyId,
+      startDate: toDateKey(assignment.startDate),
+    }),
+  );
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
         <div>
-          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-            <ClipboardList className="h-4 w-4" />
-            Admin
-          </div>
-          <h1 className="mt-2 text-2xl font-bold tracking-tight">
-            Dienstplan-Manager
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            ADMIN · DIENSTPLAN
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Dienste{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              planen
+            </em>
           </h1>
-          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
             Plane Dienste pro Kalenderwoche und Haushalt. Jede Änderung wird
             direkt gespeichert.
           </p>
         </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {dutyTypes.length} Diensttypen
+          </span>
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {families.length} Familien
+          </span>
+        </div>
+      </header>
 
-        <Card className="w-full lg:max-w-xl">
-          <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <CalendarRange className="h-4 w-4" />
-              Zeitraum
-            </CardTitle>
-            <CardDescription>
-              Du kannst beliebig weit voraus planen, jeweils in handlichen
-              Ausschnitten.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form className="flex flex-col gap-3 sm:flex-row sm:items-end">
-              <div className="grid gap-1.5">
-                <Label htmlFor="start">Startwoche</Label>
-                <Input
-                  id="start"
-                  name="start"
-                  type="date"
-                  defaultValue={toDateInputValue(rangeStart)}
-                />
+      <Card className="mb-5">
+        <CardContent className="pt-[22px]">
+          <form className="flex flex-wrap items-end gap-3">
+            <div className="mr-auto min-w-64">
+              <div className="flex items-center gap-2 text-base font-medium tracking-[-0.02em] text-[var(--ink)]">
+                <CalendarRange className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+                Zeitraum
               </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="weeks">Wochen</Label>
-                <Input
-                  id="weeks"
-                  name="weeks"
-                  type="number"
-                  min={1}
-                  max={MAX_WEEK_COUNT}
-                  defaultValue={weekCount}
-                />
-              </div>
-              <Button type="submit">Anzeigen</Button>
-              <Button asChild type="button" variant="outline">
-                <Link
-                  href={`/dashboard/admin/dienste?start=${toDateInputValue(
-                    rangeStart,
-                  )}&weeks=${Math.min(weekCount + 12, MAX_WEEK_COUNT)}`}
-                >
-                  Weitere Wochen laden
-                </Link>
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
+              <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+                {weeks[0].label} bis {weeks[weeks.length - 1].label}
+              </p>
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="start">Startwoche</Label>
+              <Input
+                id="start"
+                name="start"
+                type="date"
+                defaultValue={toDateInputValue(rangeStart)}
+              />
+            </div>
+            <div className="grid w-28 gap-1.5">
+              <Label htmlFor="weeks">Wochen</Label>
+              <Input
+                id="weeks"
+                name="weeks"
+                type="number"
+                min={1}
+                max={MAX_WEEK_COUNT}
+                defaultValue={weekCount}
+              />
+            </div>
+            <Button type="submit">Anzeigen</Button>
+            <Button asChild type="button" variant="ghost">
+              <Link
+                href={`/dashboard/admin/dienste?start=${toDateInputValue(
+                  rangeStart,
+                )}&weeks=${Math.min(weekCount + 12, MAX_WEEK_COUNT)}`}
+              >
+                Weitere Wochen laden
+              </Link>
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
 
       <div className="grid gap-6 xl:grid-cols-[340px_1fr]">
         <Card>
@@ -186,19 +198,19 @@ export default async function DienstePage({
 
             <div className="space-y-2">
               {dutyTypes.length === 0 ? (
-                <p className="rounded-md bg-muted p-3 text-sm text-muted-foreground">
+                <p className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-3 text-sm italic text-[var(--ink-faint)]">
                   Noch keine Diensttypen angelegt.
                 </p>
               ) : (
                 dutyTypes.map((dutyType) => (
                   <div
                     key={dutyType.id}
-                    className="flex items-start justify-between gap-3 rounded-md border p-3"
+                    className="flex items-start justify-between gap-3 rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
                   >
                     <div className="min-w-0">
-                      <p className="font-medium">{dutyType.name}</p>
+                      <p className="font-medium text-[var(--ink)]">{dutyType.name}</p>
                       {dutyType.description && (
-                        <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                        <p className="mt-1 line-clamp-2 text-xs text-[var(--ink-soft)]">
                           {dutyType.description}
                         </p>
                       )}
@@ -213,9 +225,10 @@ export default async function DienstePage({
                         type="submit"
                         variant="ghost"
                         size="icon"
+                        className="text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
                         aria-label={`${dutyType.name} löschen`}
                       >
-                        <Trash2 className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4 [stroke-width:1.7]" />
                       </Button>
                     </form>
                   </div>

src/app/dashboard/admin/kalender/admin-calendar-manager.tsx

@@ -85,29 +85,59 @@ export function AdminCalendarManager({
   termine: AdminTerminDto[];
   childRows: ChildDto[];
 }) {
+  const rsvpCount = termine.filter((termin) => termin.requiresRsvp).length;
+  const pendingCount = termine.filter(
+    (termin) => termin.status === TerminStatus.PENDING,
+  ).length;
+
   return (
-    <div className="flex h-full flex-col gap-6 p-6">
-      <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">
-            Event-Anmeldungen & Ausflüge
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            ADMIN · EVENT-ANMELDUNGEN
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Termine{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              koordinieren
+            </em>
           </h1>
-          <p className="max-w-2xl text-sm text-muted-foreground">
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
             Termine verwalten, RSVP aktivieren und den Rücklauf pro Kind
             verfolgen.
           </p>
         </div>
-        <TerminFormDialog mode="create" />
-      </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {termine.length} Termine
+          </span>
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {rsvpCount} RSVP
+          </span>
+          {pendingCount > 0 && (
+            <span className="inline-flex h-9 items-center rounded-full border border-[var(--warn)] bg-[var(--warn-soft)] px-3 text-[13px] font-semibold text-[var(--warn)]">
+              {pendingCount} ausstehend
+            </span>
+          )}
+          <TerminFormDialog mode="create" />
+        </div>
+      </header>
 
       {termine.length === 0 ? (
-        <div className="rounded-md border border-dashed p-10 text-center">
-          <CalendarPlus className="mx-auto h-10 w-10 text-muted-foreground" />
-          <h2 className="mt-4 text-lg font-semibold">Noch keine Termine</h2>
-          <p className="mt-1 text-sm text-muted-foreground">
+        <Card className="border-dashed">
+          <div className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+              <CalendarPlus className="h-6 w-6 [stroke-width:1.7]" />
+            </div>
+            <h2 className="mt-4 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+              Noch keine Termine
+            </h2>
+            <p className="mt-1 text-sm text-[var(--ink-soft)]">
             Lege den ersten Termin an, um RSVP-Rückmeldungen einzusammeln.
-          </p>
-        </div>
+            </p>
+          </div>
+        </Card>
       ) : (
         <div className="grid gap-4">
           {termine.map((termin) => (
@@ -134,7 +164,7 @@ function AdminTerminCard({
 
   return (
     <Card className="overflow-hidden">
-      <CardHeader className="border-b bg-muted/30">
+      <CardHeader className="border-b border-[var(--hairline-soft)] bg-[var(--surface-2)]">
         <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
           <div className="min-w-0">
             <div className="mb-2 flex flex-wrap gap-2">
@@ -149,8 +179,8 @@ function AdminTerminCard({
               )}
             </div>
             <CardTitle className="text-lg">{termin.title}</CardTitle>
-            <CardDescription className="mt-1 flex flex-wrap items-center gap-2">
-              <Clock className="h-3.5 w-3.5" />
+            <CardDescription className="mt-1 flex flex-wrap items-center gap-2 text-[var(--ink-soft)]">
+              <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
               {format(new Date(termin.startDate), "dd.MM.yyyy", {
                 locale: de,
               })}
@@ -176,20 +206,20 @@ function AdminTerminCard({
 
       <CardContent className="grid gap-5 pt-5">
         {termin.description && (
-          <p className="whitespace-pre-wrap text-sm text-muted-foreground">
+          <p className="whitespace-pre-wrap text-sm text-[var(--ink-soft)]">
             {termin.description}
           </p>
         )}
 
         {termin.requiresRsvp ? (
           <div className="grid gap-4">
-            <div className="flex flex-col gap-3 rounded-md border bg-amber-50/70 p-4 text-amber-950 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-col gap-3 rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4 text-[var(--ink)] sm:flex-row sm:items-center sm:justify-between">
               <div>
                 <p className="font-medium">
                   {stats.attending} Zugesagt / {stats.notAttending} Abgesagt /{" "}
                   {stats.pending} Ausstehend
                 </p>
-                <p className="mt-1 text-sm text-amber-900/80">
+                <p className="mt-1 text-sm text-[var(--ink-soft)]">
                   Frist:{" "}
                   {termin.rsvpDeadline
                     ? format(new Date(termin.rsvpDeadline), "dd.MM.yyyy HH:mm", {
@@ -198,11 +228,11 @@ function AdminTerminCard({
                     : "bis Terminbeginn"}
                 </p>
               </div>
-              <Users className="h-5 w-5 shrink-0" />
+              <Users className="h-5 w-5 shrink-0 text-[var(--warn)] [stroke-width:1.7]" />
             </div>
 
             {termin.participantInfo && (
-              <div className="rounded-md border border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-950">
+              <div className="rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4 text-sm text-[var(--ink)]">
                 <span className="font-medium">Hinweis für Teilnehmer: </span>
                 {termin.participantInfo}
               </div>
@@ -233,7 +263,7 @@ function AdminTerminCard({
             </Table>
           </div>
         ) : (
-          <div className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
+          <div className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-4 text-sm italic text-[var(--ink-faint)]">
             Für diesen Termin ist keine Teilnahme-Abfrage aktiv.
           </div>
         )}
@@ -304,11 +334,11 @@ function TerminFormDialog({
       }}
     >
       <DialogTrigger asChild>
-        <Button variant={mode === "edit" ? "outline" : "default"} size="sm">
+        <Button variant={mode === "edit" ? "pill" : "default"} size="sm">
           {mode === "edit" ? (
-            <Pencil className="h-4 w-4" />
+            <Pencil className="h-4 w-4 [stroke-width:1.7]" />
           ) : (
-            <CalendarPlus className="h-4 w-4" />
+            <CalendarPlus className="h-4 w-4 [stroke-width:1.7]" />
           )}
           {mode === "edit" ? "Bearbeiten" : "Termin anlegen"}
         </Button>
@@ -351,7 +381,7 @@ function TerminFormDialog({
                 id={`${mode}-type`}
                 name="type"
                 defaultValue={termin?.type ?? TerminType.KITA_FEST}
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                className="flex h-10 w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2 text-[13.5px] text-[var(--ink)] ring-offset-[var(--surface)] transition-colors hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:bg-[oklch(0.99_0.005_75)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
                 required
               >
                 {Object.values(TerminType).map((type) => (
@@ -389,13 +419,13 @@ function TerminFormDialog({
               </div>
             </div>
 
-            <div className="grid gap-3 rounded-md border p-4">
+            <div className="grid gap-3 rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4">
               <label className="flex items-center gap-2 text-sm">
                 <input
                   type="checkbox"
                   name="allDay"
                   defaultChecked={termin?.allDay ?? false}
-                  className="h-4 w-4 rounded border-input"
+                  className="h-4 w-4 rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
                 />
                 Ganztägiger Termin
               </label>
@@ -404,7 +434,7 @@ function TerminFormDialog({
                   type="checkbox"
                   name="mitbringselListEnabled"
                   defaultChecked={termin?.mitbringselListEnabled ?? false}
-                  className="h-4 w-4 rounded border-input"
+                  className="h-4 w-4 rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
                 />
                 Mitbring-Liste aktiv
               </label>
@@ -414,14 +444,14 @@ function TerminFormDialog({
                   name="requiresRsvp"
                   checked={requiresRsvp}
                   onChange={(event) => setRequiresRsvp(event.target.checked)}
-                  className="h-4 w-4 rounded border-input"
+                  className="h-4 w-4 rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
                 />
                 Teilnahme-Abfrage (RSVP) aktivieren
               </label>
             </div>
 
             {requiresRsvp && (
-              <div className="grid gap-4 rounded-md border border-amber-200 bg-amber-50/60 p-4">
+              <div className="grid gap-4 rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4">
                 <div className="grid gap-2">
                   <Label htmlFor={`${mode}-rsvpDeadline`}>
                     Rückmeldefrist
@@ -495,7 +525,7 @@ function RsvpStatusBadge({
   }
 
   return (
-    <Badge variant="outline" className="gap-1 text-muted-foreground">
+    <Badge variant="outline" className="gap-1 text-[var(--ink-muted)]">
       <HelpCircle className="h-3.5 w-3.5" />
       Ausstehend
     </Badge>
@@ -566,19 +596,19 @@ function getTypeBadgeClass(type: TerminType) {
   switch (type) {
     case TerminType.KITA_FEST:
     case TerminType.MITMACH_TAG:
-      return "border-transparent bg-amber-500 text-white";
+      return "border-transparent bg-[var(--warn-soft)] text-[var(--warn)]";
     case TerminType.SCHLIESSTAG:
     case TerminType.TEAMTAG:
-      return "border-transparent bg-rose-500 text-white";
+      return "border-transparent bg-[var(--danger-soft)] text-[var(--danger)]";
     case TerminType.GEBURTSTAG_INTERN:
     case TerminType.GEBURTSTAG_EXTERN:
-      return "border-transparent bg-blue-500 text-white";
+      return "border-transparent bg-[oklch(0.94_0.04_280)] text-[oklch(0.48_0.08_280)]";
     case TerminType.ELTERNABEND:
     case TerminType.MITGLIEDERVERSAMMLUNG:
     case TerminType.ELTERNCAFE:
-      return "border-transparent bg-purple-500 text-white";
+      return "border-transparent bg-[var(--accent-soft)] text-[var(--accent-deep)]";
     default:
-      return "border-slate-300 bg-slate-100 text-slate-800";
+      return "border-[var(--hairline)] bg-[var(--surface-2)] text-[var(--ink-soft)]";
   }
 }
 

src/app/dashboard/admin/news/news-form.tsx

@@ -67,14 +67,14 @@ export function NewsForm() {
           placeholder={"## Liebe Familien,\n\nhier stehen die offiziellen Informationen..."}
           required
         />
-        <p className="text-xs text-muted-foreground">
+        <p className="text-xs text-[var(--ink-muted)]">
           Markdown ist aktiv. HTML wird nicht interpretiert.
         </p>
       </div>
 
       {content.trim() && (
-        <div className="rounded-md border bg-muted/30 p-4 text-sm">
-          <p className="mb-3 text-xs font-semibold uppercase text-muted-foreground">
+        <div className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4 text-sm">
+          <p className="mb-3 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
             Vorschau
           </p>
           <MarkdownContent content={content} />
@@ -83,7 +83,7 @@ export function NewsForm() {
 
       <div className="grid gap-2">
         <Label htmlFor="attachments">Anhänge</Label>
-        <div className="rounded-md border border-dashed bg-background p-4">
+        <div className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-4">
           <Input
             id="attachments"
             name="attachments"
@@ -91,14 +91,14 @@ export function NewsForm() {
             accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"
             multiple
           />
-          <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
-            <UploadCloud className="h-3.5 w-3.5" />
+          <p className="mt-2 flex items-center gap-1 text-xs text-[var(--ink-muted)]">
+            <UploadCloud className="h-3.5 w-3.5 [stroke-width:1.7]" />
             PDF, JPG und PNG bis 10 MB pro Datei.
           </p>
         </div>
       </div>
 
-      <div className="rounded-md border p-4">
+      <div className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4">
         <div className="flex items-center gap-2">
           <Checkbox
             id="sendEmail"
@@ -130,9 +130,9 @@ export function NewsForm() {
       <div className="flex justify-end">
         <Button type="submit" disabled={isPending}>
           {isPending ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
           ) : (
-            <Send className="h-4 w-4" />
+            <Send className="h-4 w-4 [stroke-width:1.7]" />
           )}
           Veröffentlichen
         </Button>

src/app/dashboard/admin/news/page.tsx

@@ -1,6 +1,6 @@
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { FileText, Megaphone } from "lucide-react";
+import { FileText, Megaphone, Send } from "lucide-react";
 import { UserRole } from "@prisma/client";
 
 import { requireRole } from "@/lib/auth-utils";
@@ -49,26 +49,37 @@ export default async function AdminNewsPage() {
   });
 
   return (
-    <div className="px-8 py-8">
-      <div className="mb-8">
-        <Badge className="mb-3 bg-emerald-100 text-emerald-800 hover:bg-emerald-100">
-          Offizielle Kita-Kommunikation
-        </Badge>
-        <h1 className="flex items-center gap-3 text-2xl font-semibold tracking-tight">
-          <Megaphone className="h-6 w-6 text-emerald-700" />
-          Digitales Schwarzes Brett
-        </h1>
-        <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
-          Veröffentliche verbindliche Ankündigungen für deine Kita. Anhänge
-          werden geschützt gespeichert und nur für eingeloggte Nutzer derselben
-          Kita ausgeliefert.
-        </p>
-      </div>
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
+        <div>
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            KOMMUNIKATION · SCHWARZES BRETT
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Meldungen{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              veröffentlichen
+            </em>
+          </h1>
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
+            Veröffentliche verbindliche Ankündigungen für deine Kita. Anhänge
+            werden geschützt gespeichert und nur für eingeloggte Nutzer
+            derselben Kita ausgeliefert.
+          </p>
+        </div>
+        <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-4 text-[13px] font-semibold text-[var(--ink-soft)] tabular-nums">
+          <Megaphone className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+          {announcements.length} zuletzt
+        </span>
+      </header>
 
       <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px]">
         <Card>
           <CardHeader>
-            <CardTitle>Neue Ankündigung</CardTitle>
+            <CardTitle className="flex items-center gap-2">
+              <Send className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+              Neue Ankündigung
+            </CardTitle>
             <CardDescription>
               Markdown wird sicher gerendert; PDF, JPG und PNG können als
               geschützte Anhänge hinzugefügt werden.
@@ -88,27 +99,35 @@ export default async function AdminNewsPage() {
           </CardHeader>
           <CardContent className="grid gap-3">
             {announcements.length === 0 ? (
-              <p className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
-                Noch keine Ankündigungen veröffentlicht.
-              </p>
+              <div className="flex max-h-[280px] min-h-[220px] flex-col items-center justify-center rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-6 text-center">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                  <Megaphone className="h-6 w-6 [stroke-width:1.7]" />
+                </div>
+                <p className="text-sm font-medium text-[var(--ink)]">
+                  Noch keine Ankündigungen
+                </p>
+                <p className="mt-1 text-sm text-[var(--ink-soft)]">
+                  Veröffentlichte Meldungen erscheinen hier.
+                </p>
+              </div>
             ) : (
               announcements.map((announcement) => (
                 <div
                   key={announcement.id}
-                  className="rounded-md border bg-background p-3"
+                  className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
                 >
                   <div className="mb-2 flex items-start justify-between gap-2">
-                    <p className="font-medium leading-snug">
+                    <p className="font-medium leading-snug text-[var(--ink)]">
                       {announcement.title}
                     </p>
                     {announcement.attachments.length > 0 && (
                       <Badge variant="secondary" className="shrink-0">
-                        <FileText className="h-3 w-3" />
+                        <FileText className="h-3 w-3 [stroke-width:1.7]" />
                         {announcement.attachments.length}
                       </Badge>
                     )}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-[var(--ink-muted)]">
                     {format(announcement.createdAt, "dd.MM.yyyy HH:mm", {
                       locale: de,
                     })}{" "}

src/app/dashboard/adressbuch/_components/directory-client.tsx

@@ -0,0 +1,600 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  Baby,
+  Contact,
+  Mail,
+  Phone,
+  Search,
+  ShieldCheck,
+  SlidersHorizontal,
+  UserRound,
+  Home,
+  MapPin,
+} from "lucide-react";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export type DirectoryParentDto = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  hasDirectoryOptIn: boolean;
+  email?: string;
+  phone?: string;
+  street?: string;
+  postalCode?: string;
+  city?: string;
+  duties: {
+    id: string;
+    name: string;
+  }[];
+};
+
+export type DirectoryFamilyDto = {
+  id: string;
+  name: string;
+  children: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    dateOfBirth?: Date | null;
+  }[];
+  parents: DirectoryParentDto[];
+};
+
+export function DirectoryClient({
+  initialFamilies,
+}: {
+  initialFamilies: DirectoryFamilyDto[];
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
+  const [selectedFamily, setSelectedFamily] = useState<DirectoryFamilyDto | null>(null);
+  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(false);
+
+  const toggleFilter = (filterKey: string) => {
+    setActiveFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(filterKey)) {
+        next.delete(filterKey);
+      } else {
+        next.add(filterKey);
+      }
+      return next;
+    });
+  };
+
+  const filteredFamilies = useMemo(() => {
+    return initialFamilies.filter((family) => {
+      // 1. Search Query filter
+      const query = searchQuery.trim().toLowerCase();
+      if (query) {
+        const familyNameMatch = family.name.toLowerCase().includes(query);
+        const childMatch = family.children.some(
+          (c) =>
+            c.firstName.toLowerCase().includes(query) ||
+            c.lastName.toLowerCase().includes(query)
+        );
+        const parentMatch = family.parents.some(
+          (p) =>
+            p.firstName.toLowerCase().includes(query) ||
+            p.lastName.toLowerCase().includes(query) ||
+            (p.email && p.email.toLowerCase().includes(query))
+        );
+        if (!familyNameMatch && !childMatch && !parentMatch) return false;
+      }
+
+      // 2. Custom filters
+      if (activeFilters.has("telefon")) {
+        const hasPhone = family.parents.some((p) => p.hasDirectoryOptIn && p.phone);
+        if (!hasPhone) return false;
+      }
+
+      if (activeFilters.has("aemter")) {
+        const hasDuties = family.parents.some((p) => p.duties.length > 0);
+        if (!hasDuties) return false;
+      }
+
+      if (activeFilters.has("optIn")) {
+        // Show households where all parents in the system have opted in
+        const allOptIn = family.parents.every((p) => p.hasDirectoryOptIn);
+        if (!allOptIn) return false;
+      }
+
+      return true;
+    });
+  }, [initialFamilies, searchQuery, activeFilters]);
+
+  // Recalculate metrics for filtered subset
+  const visibleParentCount = useMemo(() => {
+    return filteredFamilies.reduce(
+      (count, fam) => count + fam.parents.filter((p) => p.hasDirectoryOptIn).length,
+      0
+    );
+  }, [filteredFamilies]);
+
+  const childCount = useMemo(() => {
+    return filteredFamilies.reduce((count, fam) => count + fam.children.length, 0);
+  }, [filteredFamilies]);
+
+  const totalVisibleParentCount = useMemo(() => {
+    return initialFamilies.reduce(
+      (count, fam) => count + fam.parents.filter((p) => p.hasDirectoryOptIn).length,
+      0
+    );
+  }, [initialFamilies]);
+
+  const groupedFamilies = useMemo(() => {
+    const groups = new Map<string, DirectoryFamilyDto[]>();
+    filteredFamilies.forEach((family) => {
+      const initial = family.name.trim().slice(0, 1).toUpperCase();
+      const key = initial || "#";
+      groups.set(key, [...(groups.get(key) ?? []), family]);
+    });
+    return Array.from(groups.entries())
+      .map(([initial, families]) => ({ initial, families }))
+      .sort((a, b) => a.initial.localeCompare(b.initial));
+  }, [filteredFamilies]);
+
+  return (
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      {/* Header */}
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
+        <div>
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            KONTAKTE · ADRESSBUCH
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Freigegebene{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              Kontakte
+            </em>
+          </h1>
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
+            Haushalte und Kontaktdaten, die explizit für das interne
+            Kita-Adressbuch freigegeben wurden.
+          </p>
+        </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-4 text-[13px] font-semibold text-[var(--ink-soft)] tabular-nums">
+            <ShieldCheck className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+            {totalVisibleParentCount} sichtbar
+          </span>
+          <Button variant="ghost" size="sm" onClick={() => setPrivacyDialogOpen(true)}>
+            <SlidersHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+            Sichtbarkeit
+          </Button>
+        </div>
+      </header>
+
+      {/* Main Household List or Empty State */}
+      {initialFamilies.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+              <Contact className="h-6 w-6 [stroke-width:1.7]" />
+            </div>
+            <h3 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+              Keine freigegebenen Kontakte
+            </h3>
+            <p className="mt-2 max-w-sm text-sm leading-6 text-[var(--ink-soft)]">
+              Sobald mindestens ein Elternteil eines Haushalts zustimmt,
+              erscheint die Familie hier.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-5">
+          {/* Metrics & Search Bar */}
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap gap-2">
+              <DirectoryMetric label="Haushalte" value={filteredFamilies.length} />
+              <DirectoryMetric label="Kontakte" value={visibleParentCount} />
+              <DirectoryMetric label="Kinder" value={childCount} />
+            </div>
+            <div className="relative min-w-72 max-[760px]:w-full max-[760px]:min-w-0">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
+              <Input
+                placeholder="Familien, Namen oder E-Mail suchen"
+                className="pl-9"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Custom Filter Chips */}
+          <div className="flex flex-wrap gap-1.5">
+            <button
+              type="button"
+              onClick={() => setActiveFilters(new Set())}
+              className={[
+                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
+                activeFilters.size === 0
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
+              ].join(" ")}
+            >
+              Alle anzeigen
+            </button>
+            <button
+              type="button"
+              onClick={() => toggleFilter("telefon")}
+              className={[
+                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
+                activeFilters.has("telefon")
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
+              ].join(" ")}
+            >
+              Mit Telefon
+            </button>
+            <button
+              type="button"
+              onClick={() => toggleFilter("aemter")}
+              className={[
+                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
+                activeFilters.has("aemter")
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
+              ].join(" ")}
+            >
+              Mit Ämtern
+            </button>
+            <button
+              type="button"
+              onClick={() => toggleFilter("optIn")}
+              className={[
+                "inline-flex h-9 items-center rounded-full border px-3 text-[13px] font-medium transition",
+                activeFilters.has("optIn")
+                  ? "border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                  : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
+              ].join(" ")}
+            >
+              Haushalt komplett freigegeben
+            </button>
+          </div>
+
+          {/* Household list cards wrapper */}
+          {filteredFamilies.length === 0 ? (
+            <Card className="border-dashed">
+              <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                  <SlidersHorizontal className="h-6 w-6 [stroke-width:1.7]" />
+                </div>
+                <h3 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+                  Keine passenden Kontakte gefunden
+                </h3>
+                <p className="mt-2 max-w-sm text-sm leading-6 text-[var(--ink-soft)]">
+                  Passe deine Suche oder die Filterchips an, um Einträge zu sehen.
+                </p>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card className="overflow-hidden p-0">
+              {groupedFamilies.map((group) => (
+                <section key={group.initial}>
+                  <div className="flex items-center justify-between border-b border-[var(--hairline-soft)] bg-[var(--surface-2)] px-5 py-3">
+                    <h2 className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.14em]">
+                      {group.initial}
+                    </h2>
+                    <span className="text-[11px] font-semibold text-[var(--ink-muted)] tabular-nums">
+                      {group.families.length}
+                    </span>
+                  </div>
+                  <div className="divide-y divide-[var(--hairline-soft)]">
+                    {group.families.map((family) => {
+                      const visibleParents = family.parents.filter(
+                        (parent) => parent.hasDirectoryOptIn
+                      );
+                      const duties = family.parents.flatMap((parent) => parent.duties);
+
+                      return (
+                        <div
+                          key={family.id}
+                          className="grid grid-cols-[minmax(220px,0.8fr)_minmax(0,1.4fr)_minmax(220px,1fr)] gap-5 px-5 py-4 transition-colors hover:bg-[var(--surface-2)] max-[1050px]:grid-cols-1"
+                        >
+                          {/* Left: Family Name & Children */}
+                          <div className="flex min-w-0 gap-3">
+                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-sm font-semibold uppercase text-[var(--accent-deep)]">
+                              {family.name.slice(0, 1)}
+                            </div>
+                            <div className="min-w-0">
+                              <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+                                {family.name}
+                              </h3>
+                              <p className="mt-1 flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--ink-soft)]">
+                                <Baby className="h-3.5 w-3.5 [stroke-width:1.7]" />
+                                {family.children.length === 0
+                                  ? "Keine Kinder hinterlegt"
+                                  : family.children
+                                      .map((child) => `${child.firstName} ${child.lastName}`)
+                                      .join(", ")}
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* Middle: Parents */}
+                          <div className="grid gap-3">
+                            {family.parents.map((user) => (
+                              <div key={user.id} className="min-w-0">
+                                <div className="flex flex-wrap items-center gap-2">
+                                  <UserRound className="h-3.5 w-3.5 text-[var(--ink-muted)] [stroke-width:1.7]" />
+                                  <p className="text-sm font-medium text-[var(--ink)]">
+                                    {user.firstName} {user.lastName}
+                                  </p>
+                                  {user.hasDirectoryOptIn ? (
+                                    <Badge variant="success">Opt-in</Badge>
+                                  ) : (
+                                    <span className="text-xs italic text-[var(--ink-faint)]">
+                                      nicht freigegeben
+                                    </span>
+                                  )}
+                                </div>
+
+                                {user.hasDirectoryOptIn && (
+                                  <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 pl-5 text-[13px] text-[var(--ink-soft)]">
+                                    {user.email && (
+                                      <a
+                                        href={`mailto:${user.email}`}
+                                        className="inline-flex min-w-0 items-center gap-1.5 hover:text-[var(--accent-deep)]"
+                                      >
+                                        <Mail className="h-3.5 w-3.5 shrink-0 [stroke-width:1.7]" />
+                                        <span className="break-words [overflow-wrap:anywhere]">
+                                          {user.email}
+                                        </span>
+                                      </a>
+                                    )}
+                                    {user.phone ? (
+                                      <a
+                                        href={`tel:${user.phone}`}
+                                        className="inline-flex items-center gap-1.5 hover:text-[var(--accent-deep)]"
+                                      >
+                                        <Phone className="h-3.5 w-3.5 shrink-0 [stroke-width:1.7]" />
+                                        {user.phone}
+                                      </a>
+                                    ) : (
+                                      <span className="italic text-[var(--ink-faint)]">
+                                        Keine Telefonnummer
+                                      </span>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+
+                          {/* Right: Badges & Details Action */}
+                          <div className="flex flex-col items-end justify-between gap-3 max-[1050px]:items-start">
+                            <div className="flex flex-wrap justify-end gap-1.5 max-[1050px]:justify-start">
+                              <Badge variant="secondary">
+                                {visibleParents.length} von {family.parents.length} sichtbar
+                              </Badge>
+                              {duties.map((duty) => (
+                                <Badge
+                                  key={duty.id}
+                                  variant="outline"
+                                  className="border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                                >
+                                  {duty.name}
+                                </Badge>
+                              ))}
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => setSelectedFamily(family)}
+                            >
+                              Kontakt öffnen
+                            </Button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </section>
+              ))}
+            </Card>
+          )}
+        </div>
+      )}
+
+      {/* Household Detail Dialog */}
+      <Dialog
+        open={!!selectedFamily}
+        onOpenChange={(open) => !open && setSelectedFamily(null)}
+      >
+        <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
+          {selectedFamily && (
+            <>
+              <DialogHeader>
+                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)] text-xl font-bold uppercase mb-2">
+                  {selectedFamily.name.slice(0, 1)}
+                </div>
+                <DialogTitle className="text-2xl">Familie {selectedFamily.name}</DialogTitle>
+                <DialogDescription>
+                  Detaillierte Kontaktdaten und Haushalts-Zugehörigkeiten.
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="mt-4 space-y-6">
+                {/* Children Details */}
+                <div>
+                  <h4 className="text-xs font-semibold uppercase tracking-wider text-[var(--ink-muted)] mb-3 flex items-center gap-1.5">
+                    <Baby className="h-4 w-4" />
+                    Kinder im Haushalt
+                  </h4>
+                  <div className="grid gap-2.5">
+                    {selectedFamily.children.length === 0 ? (
+                      <p className="text-sm italic text-[var(--ink-soft)]">Keine Kinder hinterlegt.</p>
+                    ) : (
+                      selectedFamily.children.map((child) => (
+                        <div
+                          key={child.id}
+                          className="flex items-center justify-between rounded-xl border border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-3"
+                        >
+                          <div className="flex items-center gap-2">
+                            <Baby className="h-4 w-4 text-[var(--accent-deep)]" />
+                            <span className="font-semibold text-sm text-[var(--ink)]">
+                              {child.firstName} {child.lastName}
+                            </span>
+                          </div>
+                          {child.dateOfBirth && (
+                            <span className="text-xs text-[var(--ink-soft)] font-medium">
+                              Geboren: {format(new Date(child.dateOfBirth), "dd.MM.yyyy", { locale: de })}
+                            </span>
+                          )}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                {/* Parents/Users Details */}
+                <div>
+                  <h4 className="text-xs font-semibold uppercase tracking-wider text-[var(--ink-muted)] mb-3 flex items-center gap-1.5">
+                    <UserRound className="h-4 w-4" />
+                    Eltern & Kontakte
+                  </h4>
+                  <div className="space-y-4">
+                    {selectedFamily.parents.map((parent) => (
+                      <div
+                        key={parent.id}
+                        className="rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-4 shadow-sm"
+                      >
+                        <div className="flex items-center justify-between gap-2 border-b border-[var(--hairline-soft)] pb-2 mb-3">
+                          <span className="font-semibold text-[15px] text-[var(--ink)] flex items-center gap-1.5">
+                            <UserRound className="h-4 w-4 text-[var(--ink-muted)]" />
+                            {parent.firstName} {parent.lastName}
+                          </span>
+                          {parent.hasDirectoryOptIn ? (
+                            <Badge variant="success">Freigegeben</Badge>
+                          ) : (
+                            <Badge variant="secondary">Privat</Badge>
+                          )}
+                        </div>
+
+                        {parent.hasDirectoryOptIn ? (
+                          <div className="space-y-2.5 text-sm text-[var(--ink-soft)]">
+                            {parent.email && (
+                              <a
+                                href={`mailto:${parent.email}`}
+                                className="flex items-center gap-2.5 hover:text-[var(--accent-deep)]"
+                              >
+                                <Mail className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
+                                <span className="break-all">{parent.email}</span>
+                              </a>
+                            )}
+                            {parent.phone ? (
+                              <a
+                                href={`tel:${parent.phone}`}
+                                className="flex items-center gap-2.5 hover:text-[var(--accent-deep)]"
+                              >
+                                <Phone className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
+                                <span>{parent.phone}</span>
+                              </a>
+                            ) : (
+                              <div className="flex items-center gap-2.5 italic text-[var(--ink-faint)]">
+                                <Phone className="h-4 w-4 text-[var(--ink-muted)] shrink-0" />
+                                <span>Keine Telefonnummer hinterlegt</span>
+                              </div>
+                            )}
+
+                            {/* Address details */}
+                            {(parent.street || parent.postalCode || parent.city) && (
+                              <div className="flex items-start gap-2.5 border-t border-[var(--hairline-soft)] pt-2.5 mt-2.5">
+                                <MapPin className="h-4 w-4 text-[var(--ink-muted)] shrink-0 mt-0.5" />
+                                <div>
+                                  {parent.street && <p>{parent.street}</p>}
+                                  {(parent.postalCode || parent.city) && (
+                                    <p>
+                                      {parent.postalCode} {parent.city}
+                                    </p>
+                                  )}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        ) : (
+                          <p className="text-xs italic text-[var(--ink-faint)]">
+                            Dieser Kontakt hat seine Daten nicht für das Adressbuch freigegeben.
+                          </p>
+                        )}
+
+                        {parent.duties.length > 0 && (
+                          <div className="mt-3 border-t border-[var(--hairline-soft)] pt-3 flex flex-wrap gap-1.5">
+                            {parent.duties.map((duty) => (
+                              <Badge
+                                key={duty.id}
+                                variant="outline"
+                                className="border-[var(--accent-mid)] bg-[var(--accent-soft)] text-[var(--accent-deep)] text-[10px]"
+                              >
+                                {duty.name}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Global Privacy settings dialog */}
+      <Dialog open={privacyDialogOpen} onOpenChange={setPrivacyDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <ShieldCheck className="h-5 w-5 text-[var(--accent-deep)]" />
+              Sichtbarkeit & Datenschutz
+            </DialogTitle>
+            <DialogDescription className="mt-2 text-sm leading-6">
+              Deine Privatsphäre ist uns wichtig. In diesem Adressbuch werden Kontaktdaten
+              nur für Haushalte angezeigt, die dem Opt-in für das interne Kita-Adressbuch
+              explizit zugestimmt haben.
+              <br />
+              <br />
+              Du kannst deine eigene Zustimmung sowie deine E-Mail-Adresse und Telefonnummer
+              jederzeit in deinen persönlichen Profileinstellungen einsehen und anpassen.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-3 mt-4">
+            <Button variant="ghost" onClick={() => setPrivacyDialogOpen(false)}>
+              Schließen
+            </Button>
+            <a href="/dashboard/profil">
+              <Button>Zu den Profileinstellungen</Button>
+            </a>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function DirectoryMetric({ label, value }: { label: string; value: number }) {
+  return (
+    <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+      <span className="text-[var(--ink)] tabular-nums">{value}</span>
+      {label}
+    </span>
+  );
+}

src/app/dashboard/adressbuch/page.tsx

@@ -1,40 +1,9 @@
-import { Baby, Contact, Mail, Phone, ShieldCheck, UsersRound } from "lucide-react";
-
 import { requireKitaSession } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { DirectoryClient, type DirectoryFamilyDto } from "./_components/directory-client";
 
 export const metadata = { title: "Adressbuch · Kita-Planer" };
 
-type DirectoryFamilyDto = {
-  id: string;
-  name: string;
-  children: {
-    id: string;
-    firstName: string;
-    lastName: string;
-  }[];
-  parents: {
-    id: string;
-    firstName: string;
-    lastName: string;
-    hasDirectoryOptIn: boolean;
-    email?: string;
-    phone?: string;
-    duties: {
-      id: string;
-      name: string;
-    }[];
-  }[];
-};
-
 export default async function AdressbuchPage() {
   const session = await requireKitaSession();
 
@@ -55,6 +24,7 @@ export default async function AdressbuchPage() {
           id: true,
           firstName: true,
           lastName: true,
+          dateOfBirth: true,
         },
         orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
       },
@@ -91,6 +61,9 @@ export default async function AdressbuchPage() {
       id: true,
       email: true,
       phone: true,
+      street: true,
+      postalCode: true,
+      city: true,
     },
   });
   const visibleContactsByUserId = new Map(
@@ -111,6 +84,9 @@ export default async function AdressbuchPage() {
         hasDirectoryOptIn,
         email: contact?.email,
         phone: contact?.phone ?? undefined,
+        street: contact?.street ?? undefined,
+        postalCode: contact?.postalCode ?? undefined,
+        city: contact?.city ?? undefined,
         duties: user.dutyAssignments.map((assignment) => ({
           id: assignment.id,
           name: assignment.duty.name,
@@ -119,140 +95,5 @@ export default async function AdressbuchPage() {
     }),
   }));
 
-  return (
-    <div className="flex h-full flex-col gap-6 p-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">Adressbuch</h1>
-        <p className="max-w-2xl text-sm text-muted-foreground">
-          Haushalte und Kontaktdaten, die explizit für das interne
-          Kita-Adressbuch freigegeben wurden.
-        </p>
-      </div>
-
-      {families.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed bg-background p-10 text-center">
-          <Contact className="mb-4 h-10 w-10 text-muted-foreground" />
-          <h3 className="text-lg font-semibold">Keine freigegebenen Kontakte</h3>
-          <p className="mt-2 max-w-sm text-sm text-muted-foreground">
-            Sobald mindestens ein Elternteil eines Haushalts zustimmt,
-            erscheint die Familie hier.
-          </p>
-        </div>
-      ) : (
-        <div className="grid gap-4 lg:grid-cols-2">
-          {families.map((family) => (
-            <Card key={family.id} className="overflow-hidden">
-              <CardHeader className="border-b bg-muted/30 pb-4">
-                <div className="flex items-start justify-between gap-4">
-                  <div>
-                    <CardTitle className="flex items-center gap-2 text-lg">
-                      <UsersRound className="h-4 w-4 text-primary" />
-                      {family.name}
-                    </CardTitle>
-                    <CardDescription className="mt-1">
-                      {family.parents.filter((user) => user.hasDirectoryOptIn).length}{" "}
-                      von {family.parents.length} Elternteilen sichtbar
-                    </CardDescription>
-                  </div>
-                  <Badge variant="success">Freigegeben</Badge>
-                </div>
-              </CardHeader>
-
-              <CardContent className="grid gap-5 pt-5">
-                <section className="space-y-2">
-                  <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    <Baby className="h-3.5 w-3.5" />
-                    Kinder
-                  </div>
-                  {family.children.length === 0 ? (
-                    <p className="text-sm text-muted-foreground">
-                      Keine Kinder hinterlegt.
-                    </p>
-                  ) : (
-                    <div className="flex flex-wrap gap-1.5">
-                      {family.children.map((child) => (
-                        <Badge key={child.id} variant="secondary">
-                          {child.firstName} {child.lastName}
-                        </Badge>
-                      ))}
-                    </div>
-                  )}
-                </section>
-
-                <section className="grid gap-3">
-                  <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    <ShieldCheck className="h-3.5 w-3.5" />
-                    Kontakte
-                  </div>
-                  <div className="grid gap-3">
-                    {family.parents.map((user) => {
-                      return (
-                        <div
-                          key={user.id}
-                          className="rounded-md border bg-background p-3"
-                        >
-                          <div className="flex items-start justify-between gap-3">
-                            <div>
-                              <p className="font-medium">
-                                {user.firstName} {user.lastName}
-                              </p>
-                              {!user.hasDirectoryOptIn && (
-                                <p className="mt-0.5 text-xs text-muted-foreground">
-                                  Kontakt nicht freigegeben.
-                                </p>
-                              )}
-                            </div>
-                            {user.hasDirectoryOptIn ? (
-                              <Badge variant="outline">Opt-in</Badge>
-                            ) : null}
-                          </div>
-
-                          {user.hasDirectoryOptIn && (
-                            <div className="mt-3 grid gap-2 text-sm text-muted-foreground">
-                              {user.email && (
-                                <a
-                                  href={`mailto:${user.email}`}
-                                  className="flex min-w-0 items-center gap-2 hover:text-primary"
-                                >
-                                  <Mail className="h-4 w-4 shrink-0" />
-                                  <span className="truncate">{user.email}</span>
-                                </a>
-                              )}
-                              {user.phone && (
-                                <a
-                                  href={`tel:${user.phone}`}
-                                  className="flex items-center gap-2 hover:text-primary"
-                                >
-                                  <Phone className="h-4 w-4 shrink-0" />
-                                  {user.phone}
-                                </a>
-                              )}
-                            </div>
-                          )}
-
-                          {user.duties.length > 0 && (
-                            <div className="mt-3 flex flex-wrap gap-1.5 border-t pt-3">
-                              {user.duties.map((duty) => (
-                                <Badge
-                                  key={duty.id}
-                                  variant="outline"
-                                  className="bg-primary/5 text-primary"
-                                >
-                                  {duty.name}
-                                </Badge>
-                              ))}
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
-                </section>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
-  );
+  return <DirectoryClient initialFamilies={families} />;
 }

src/app/dashboard/alert-button.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 import { Loader2, BellRing } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { triggerAlertAction } from "./actions";
 
 export function AlertButton({
@@ -12,11 +13,10 @@ export function AlertButton({
 }: {
   assignmentId: string;
 }) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const [isPending, startTransition] = useTransition();
 
   const handleAlert = () => {
-    if (!confirm("Bist du sicher? Dies löst den Notdienst-Alarm aus.")) return;
-    
     startTransition(async () => {
       const result = await triggerAlertAction(assignmentId);
       if ("error" in result && result.error) {
@@ -28,13 +28,24 @@ export function AlertButton({
   };
 
   return (
-    <Button variant="destructive" onClick={handleAlert} disabled={isPending}>
-      {isPending ? (
-        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-      ) : (
-        <BellRing className="mr-2 h-4 w-4" />
-      )}
-      Alarm auslösen
-    </Button>
+    <ConfirmDialog
+      open={confirmOpen}
+      onOpenChange={setConfirmOpen}
+      title="Notdienst-Alarm auslösen?"
+      description="Der Alarm informiert die hinterlegten Kontakte per E-Mail über den Notdienst."
+      confirmLabel="Alarm auslösen"
+      pendingLabel="Alarm wird ausgelöst..."
+      isPending={isPending}
+      onConfirm={handleAlert}
+    >
+      <Button variant="destructive" disabled={isPending}>
+        {isPending ? (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <BellRing className="mr-2 h-4 w-4" />
+        )}
+        Alarm auslösen
+      </Button>
+    </ConfirmDialog>
   );
 }

src/app/dashboard/erzieher/_components/erzieher-list.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useTransition } from "react";
-import { Plus, Pencil, Trash2 } from "lucide-react";
+import { Plus, Pencil, Search, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import {
   Dialog,
   DialogContent,
@@ -18,6 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Table,
   TableBody,
@@ -39,6 +41,9 @@ type EducatorDto = {
 export function ErzieherList({ educators }: { educators: EducatorDto[] }) {
   const [openCreate, setOpenCreate] = useState(false);
   const [editingEducator, setEditingEducator] = useState<EducatorDto | null>(null);
+  const [educatorToDelete, setEducatorToDelete] = useState<EducatorDto | null>(
+    null,
+  );
   const [isPending, startTransition] = useTransition();
 
   const handleCreate = (formData: FormData) => {
@@ -78,25 +83,29 @@ export function ErzieherList({ educators }: { educators: EducatorDto[] }) {
     });
   };
 
-  const handleDelete = (id: string) => {
-    if (!confirm("Wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.")) return;
+  const handleDelete = (educator: EducatorDto) => {
     startTransition(async () => {
-      const res = await deleteEducator(id);
+      const res = await deleteEducator(educator.id);
       if (res.error) {
         toast.error(res.error);
       } else {
         toast.success("ErzieherIn gelöscht.");
+        setEducatorToDelete(null);
       }
     });
   };
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex justify-end">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="relative min-w-72 max-[760px]:w-full max-[760px]:min-w-0">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
+          <Input placeholder="Name suchen" className="pl-9" />
+        </div>
         <Dialog open={openCreate} onOpenChange={setOpenCreate}>
           <DialogTrigger asChild>
             <Button className="gap-2">
-              <Plus className="h-4 w-4" />
+              <Plus className="h-4 w-4 [stroke-width:1.7]" />
               ErzieherIn anlegen
             </Button>
           </DialogTrigger>
@@ -131,39 +140,68 @@ export function ErzieherList({ educators }: { educators: EducatorDto[] }) {
         </Dialog>
       </div>
 
-      <div className="rounded-md border bg-background">
+      <Card>
+        <CardHeader className="flex-row items-center justify-between">
+          <div>
+            <CardTitle>Team</CardTitle>
+            <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+              {educators.length} Einträge im Personalstamm.
+            </p>
+          </div>
+          <Badge variant="secondary" className="tabular-nums">
+            {educators.filter((ed) => ed.active).length} aktiv
+          </Badge>
+        </CardHeader>
+        <CardContent className="px-0 pb-0">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Vorname</TableHead>
+              <TableHead className="pl-6">Vorname</TableHead>
               <TableHead>Nachname</TableHead>
               <TableHead>Status</TableHead>
-              <TableHead className="text-right">Aktionen</TableHead>
+              <TableHead className="pr-6 text-right">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {educators.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={4} className="text-center text-muted-foreground h-24">
-                  Keine Einträge gefunden.
+                <TableCell colSpan={4} className="h-32 text-center">
+                  <div className="flex max-h-[240px] min-h-[200px] flex-col items-center justify-center">
+                    <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                      <Plus className="h-6 w-6 [stroke-width:1.7]" />
+                    </div>
+                    <p className="text-sm font-medium text-[var(--ink)]">
+                      Keine Einträge gefunden
+                    </p>
+                    <p className="mt-1 text-sm text-[var(--ink-soft)]">
+                      Lege die erste Person im Team an.
+                    </p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (
               educators.map((ed) => (
                 <TableRow key={ed.id}>
-                  <TableCell className="font-medium">{ed.firstName}</TableCell>
+                  <TableCell className="pl-6 font-medium">{ed.firstName}</TableCell>
                   <TableCell>{ed.lastName}</TableCell>
                   <TableCell>
                     <Badge variant={ed.active ? "success" : "secondary"}>
                       {ed.active ? "Aktiv" : "Inaktiv"}
                     </Badge>
                   </TableCell>
-                  <TableCell className="text-right">
+                  <TableCell className="pr-6 text-right">
                     <Button variant="ghost" size="icon" onClick={() => setEditingEducator(ed)}>
-                      <Pencil className="h-4 w-4" />
+                      <Pencil className="h-4 w-4 [stroke-width:1.7]" />
                     </Button>
-                    <Button variant="ghost" size="icon" className="text-destructive hover:text-destructive" onClick={() => handleDelete(ed.id)} disabled={isPending}>
-                      <Trash2 className="h-4 w-4" />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
+                      onClick={() => setEducatorToDelete(ed)}
+                      disabled={isPending}
+                      aria-label={`${ed.firstName} ${ed.lastName} löschen`}
+                    >
+                      <Trash2 className="h-4 w-4 [stroke-width:1.7]" />
                     </Button>
                   </TableCell>
                 </TableRow>
@@ -171,7 +209,8 @@ export function ErzieherList({ educators }: { educators: EducatorDto[] }) {
             )}
           </TableBody>
         </Table>
-      </div>
+        </CardContent>
+      </Card>
 
       {/* Edit Dialog */}
       <Dialog open={!!editingEducator} onOpenChange={(open) => !open && setEditingEducator(null)}>
@@ -203,6 +242,25 @@ export function ErzieherList({ educators }: { educators: EducatorDto[] }) {
           </form>
         </DialogContent>
       </Dialog>
+
+      <ConfirmDialog
+        open={!!educatorToDelete}
+        onOpenChange={(open) => {
+          if (!open) setEducatorToDelete(null);
+        }}
+        title="ErzieherIn löschen?"
+        description={
+          educatorToDelete
+            ? `${educatorToDelete.firstName} ${educatorToDelete.lastName} wird aus dem Personalstamm entfernt.`
+            : "Dieser Eintrag wird aus dem Personalstamm entfernt."
+        }
+        confirmLabel="Löschen"
+        pendingLabel="Wird gelöscht..."
+        isPending={isPending}
+        onConfirm={() => {
+          if (educatorToDelete) handleDelete(educatorToDelete);
+        }}
+      />
     </div>
   );
 }

src/app/dashboard/erzieher/page.tsx

@@ -20,21 +20,36 @@ export default async function ErzieherPage() {
     },
     orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
   });
+  const activeCount = educators.filter((educator) => educator.active).length;
 
   return (
-    <div className="flex h-full flex-col gap-6 p-6">
-      <div className="flex items-start justify-between gap-4">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
         <div>
-          <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
-            <GraduationCap className="h-6 w-6 text-primary" />
-            ErzieherInnen-Verwaltung
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            VERWALTUNG · TEAM
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            ErzieherInnen{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              verwalten
+            </em>
           </h1>
-          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
             Stammdaten des Kita-Personals für interne Planung und spätere
             Notdienst-Alarmierung.
           </p>
         </div>
-      </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <GraduationCap className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+            {educators.length} im Team
+          </span>
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {activeCount} aktiv
+          </span>
+        </div>
+      </header>
 
       <ErzieherList educators={educators} />
     </div>

src/app/dashboard/families/_components/families-list-client.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import { useState } from "react";
+import { LayoutGrid, Mail, Search, Table, Users } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Table as UITable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { AddFamilyDialog } from "../add-family-dialog";
+import { DutyManager } from "../duty-manager";
+import { EditFamilyDialog } from "../edit-family-dialog";
+
+interface FamilyUser {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  emailVerifiedAt: Date | null;
+  dutyAssignments: {
+    id: string;
+    dutyId: string;
+    duty: {
+      name: string;
+    };
+  }[];
+}
+
+interface FamilyChild {
+  id: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface FamilyData {
+  id: string;
+  name: string;
+  users: FamilyUser[];
+  children: FamilyChild[];
+}
+
+interface DutyData {
+  id: string;
+  name: string;
+  assignments: {
+    id: string;
+  }[];
+}
+
+interface FamiliesListClientProps {
+  initialFamilies: FamilyData[];
+  allDuties: DutyData[];
+  canManageDuties: boolean;
+}
+
+export function FamiliesListClient({
+  initialFamilies,
+  allDuties,
+  canManageDuties,
+}: FamiliesListClientProps) {
+  const [viewMode, setViewMode] = useState<"table" | "cards">("table");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredFamilies = initialFamilies.filter((family) => {
+    const q = searchQuery.toLowerCase().trim();
+    if (!q) return true;
+
+    // Check family name
+    if (family.name.toLowerCase().includes(q)) return true;
+
+    // Check parents
+    const matchesParent = family.users.some(
+      (user) =>
+        user.firstName.toLowerCase().includes(q) ||
+        user.lastName.toLowerCase().includes(q) ||
+        user.email.toLowerCase().includes(q)
+    );
+    if (matchesParent) return true;
+
+    // Check children
+    const matchesChild = family.children.some(
+      (child) =>
+        child.firstName.toLowerCase().includes(q) ||
+        child.lastName.toLowerCase().includes(q)
+    );
+    return matchesChild;
+  });
+
+  const childCount = filteredFamilies.reduce(
+    (acc, family) => acc + family.children.length,
+    0
+  );
+
+  const pendingInviteCount = filteredFamilies.reduce(
+    (acc, family) =>
+      acc + family.users.filter((user) => !user.emailVerifiedAt).length,
+    0
+  );
+
+  return (
+    <div>
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
+        <div>
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            VERWALTUNG · FAMILIEN
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Familien{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              organisieren
+            </em>
+          </h1>
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
+            Haushalte, Elternteile, Kinder und Ämter an einem ruhigen Ort pflegen.
+          </p>
+        </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setViewMode(viewMode === "table" ? "cards" : "table")}
+            className="flex items-center gap-1.5"
+          >
+            {viewMode === "table" ? (
+              <>
+                <LayoutGrid className="h-4 w-4 [stroke-width:1.7]" />
+                Kartenansicht
+              </>
+            ) : (
+              <>
+                <Table className="h-4 w-4 [stroke-width:1.7]" />
+                Tabellenansicht
+              </>
+            )}
+          </Button>
+          <AddFamilyDialog />
+        </div>
+      </header>
+
+      <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <span className="text-[var(--ink)] tabular-nums">{filteredFamilies.length}</span>
+            Familien
+          </span>
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <span className="text-[var(--ink)] tabular-nums">{childCount}</span>
+            Kinder
+          </span>
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <span className="text-[var(--ink)] tabular-nums">{pendingInviteCount}</span>
+            Offene Einladungen
+          </span>
+        </div>
+        <div className="relative min-w-72 max-[760px]:w-full max-[760px]:min-w-0">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
+          <Input
+            placeholder="Familien, Eltern oder Kinder suchen"
+            className="pl-9"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {filteredFamilies.length === 0 ? (
+        <Card className="border-dashed">
+          <div className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+              <Users className="h-6 w-6 [stroke-width:1.7]" />
+            </div>
+            <h3 className="mb-1 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+              Keine Familien gefunden
+            </h3>
+            <p className="mb-5 max-w-sm text-sm leading-6 text-[var(--ink-soft)]">
+              Passe deine Suche an oder erstelle eine neue Familie.
+            </p>
+            {initialFamilies.length === 0 && <AddFamilyDialog />}
+          </div>
+        </Card>
+      ) : viewMode === "table" ? (
+        <Card>
+          <CardHeader className="flex-row items-start justify-between gap-4">
+            <div>
+              <CardTitle>Haushalte</CardTitle>
+              <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+                {filteredFamilies.length} {filteredFamilies.length === 1 ? "Familie" : "Familien"} ·{" "}
+                {childCount} Kinder · {pendingInviteCount} offene Einladungen
+              </p>
+            </div>
+            <Badge variant="secondary" className="tabular-nums">
+              {filteredFamilies.length}
+            </Badge>
+          </CardHeader>
+          <CardContent className="px-0 pb-0 overflow-x-auto">
+            <UITable>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Familie</TableHead>
+                  <TableHead>Elternteile</TableHead>
+                  <TableHead>Kinder</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="pr-6 text-right">Aktionen</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredFamilies.map((family) => {
+                  const hasPendingInvite = family.users.some(
+                    (user) => !user.emailVerifiedAt
+                  );
+
+                  return (
+                    <TableRow key={family.id}>
+                      <TableCell className="pl-6">
+                        <div className="flex items-center gap-3">
+                          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[13px] font-semibold uppercase text-[var(--accent-deep)]">
+                            {family.name.slice(0, 1)}
+                          </div>
+                          <div>
+                            <div className="font-semibold text-[var(--ink)]">
+                              {family.name}
+                            </div>
+                            <div className="mt-0.5 text-xs text-[var(--ink-muted)]">
+                              {family.users.length} Elternteil
+                              {family.users.length === 1 ? "" : "e"}
+                            </div>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="space-y-2">
+                          {family.users.map((parent) => (
+                            <div key={parent.id} className="min-w-0">
+                              <div className="font-medium text-[var(--ink)]">
+                                {parent.firstName} {parent.lastName}
+                              </div>
+                              <div className="mt-0.5 flex items-center gap-1.5 text-xs text-[var(--ink-muted)]">
+                                <Mail className="h-3 w-3 shrink-0 [stroke-width:1.7]" />
+                                <span className="break-words [overflow-wrap:anywhere]">
+                                  {parent.email}
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {family.children.length === 0 ? (
+                          <span className="text-sm italic text-[var(--ink-faint)]">
+                            Noch keine Kinder
+                          </span>
+                        ) : (
+                          <div className="flex flex-wrap gap-1.5">
+                            {family.children.map((child) => (
+                              <span
+                                key={child.id}
+                                className="inline-flex items-center rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-xs font-medium text-[var(--ink-soft)]"
+                              >
+                                {child.firstName} {child.lastName}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={hasPendingInvite ? "warning" : "success"}>
+                          {hasPendingInvite ? "Einladung offen" : "Aktiv"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="pr-6 text-right">
+                        <div className="flex flex-wrap justify-end gap-1">
+                          <EditFamilyDialog
+                            family={{
+                              id: family.id,
+                              name: family.name,
+                              parents: family.users.map((parent) => ({
+                                id: parent.id,
+                                firstName: parent.firstName,
+                                lastName: parent.lastName,
+                                email: parent.email,
+                              })),
+                              children: family.children,
+                            }}
+                          />
+                          {canManageDuties &&
+                            family.users.map((parent) => (
+                              <DutyManager
+                                key={parent.id}
+                                user={{
+                                  id: parent.id,
+                                  firstName: parent.firstName,
+                                  lastName: parent.lastName,
+                                }}
+                                allDuties={allDuties}
+                                userAssignments={parent.dutyAssignments}
+                              />
+                            ))}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </UITable>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredFamilies.map((family) => {
+            const hasPendingInvite = family.users.some(
+              (user) => !user.emailVerifiedAt
+            );
+            return (
+              <Card key={family.id} className="flex flex-col h-full">
+                <CardHeader className="flex flex-row items-center justify-between pb-3 space-y-0">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-sm font-semibold uppercase text-[var(--accent-deep)]">
+                      {family.name.slice(0, 1)}
+                    </div>
+                    <div>
+                      <CardTitle className="text-lg font-semibold">{family.name}</CardTitle>
+                      <p className="text-xs text-[var(--ink-muted)]">
+                        {family.users.length} Elternteil{family.users.length === 1 ? "" : "e"}
+                      </p>
+                    </div>
+                  </div>
+                  <Badge variant={hasPendingInvite ? "warning" : "success"}>
+                    {hasPendingInvite ? "Einladung offen" : "Aktiv"}
+                  </Badge>
+                </CardHeader>
+                <CardContent className="flex-1 flex flex-col justify-between gap-4 pt-0">
+                  <div className="space-y-4">
+                    <div>
+                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--ink-muted)] mb-1">
+                        Eltern
+                      </p>
+                      <div className="space-y-2.5">
+                        {family.users.map((parent) => (
+                          <div key={parent.id} className="text-sm">
+                            <div className="font-semibold text-[var(--ink)]">
+                              {parent.firstName} {parent.lastName}
+                            </div>
+                            <div className="flex items-center gap-1.5 text-xs text-[var(--ink-muted)] mt-0.5">
+                              <Mail className="h-3.5 w-3.5 shrink-0 [stroke-width:1.7]" />
+                              <span className="break-words [overflow-wrap:anywhere]">
+                                {parent.email}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--ink-muted)] mb-1">
+                        Kinder
+                      </p>
+                      {family.children.length === 0 ? (
+                        <span className="text-xs italic text-[var(--ink-faint)]">
+                          Noch keine Kinder
+                        </span>
+                      ) : (
+                        <div className="flex flex-wrap gap-1.5">
+                          {family.children.map((child) => (
+                            <span
+                              key={child.id}
+                              className="inline-flex items-center rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-xs text-[var(--ink-soft)] font-medium"
+                            >
+                              {child.firstName} {child.lastName}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="border-t border-[var(--hairline)] pt-3 mt-auto flex flex-wrap gap-1 justify-end">
+                    <EditFamilyDialog
+                      family={{
+                        id: family.id,
+                        name: family.name,
+                        parents: family.users.map((parent) => ({
+                          id: parent.id,
+                          firstName: parent.firstName,
+                          lastName: parent.lastName,
+                          email: parent.email,
+                        })),
+                        children: family.children,
+                      }}
+                    />
+                    {canManageDuties &&
+                      family.users.map((parent) => (
+                        <DutyManager
+                          key={parent.id}
+                          user={{
+                            id: parent.id,
+                            firstName: parent.firstName,
+                            lastName: parent.lastName,
+                          }}
+                          allDuties={allDuties}
+                          userAssignments={parent.dutyAssignments}
+                        />
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/dashboard/families/add-family-dialog.tsx

@@ -54,7 +54,7 @@ export function AddFamilyDialog() {
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <Button size="sm">
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="h-4 w-4" />
           Familie hinzufügen
         </Button>
       </DialogTrigger>
@@ -82,7 +82,9 @@ export function AddFamilyDialog() {
 
           {/* ── Elternteile ────────────────────────────────────────── */}
           <fieldset className="space-y-4">
-            <legend className="text-sm font-semibold">Elternteil 1</legend>
+            <legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+              Elternteil 1
+            </legend>
 
             <div className="grid grid-cols-2 gap-3">
               <FormField
@@ -112,8 +114,13 @@ export function AddFamilyDialog() {
           </fieldset>
 
           <fieldset className="space-y-4">
-            <legend className="text-sm font-semibold">
-              Elternteil 2 <span className="font-normal text-muted-foreground">(optional)</span>
+            <legend>
+              <span className="text-[11px] uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+                Elternteil 2
+              </span>{" "}
+              <span className="font-normal italic text-[var(--ink-faint)]">
+                optional
+              </span>
             </legend>
 
             <div className="grid grid-cols-2 gap-3">
@@ -149,7 +156,7 @@ export function AddFamilyDialog() {
           {/* ── Kinder ─────────────────────────────────────────────── */}
           <fieldset className="space-y-3">
             <div className="flex items-center justify-between">
-              <legend className="text-sm font-semibold">
+              <legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
                 Kinder ({childCount})
               </legend>
               {childCount < 10 && (
@@ -168,7 +175,7 @@ export function AddFamilyDialog() {
             {Array.from({ length: childCount }).map((_, i) => (
               <div
                 key={i}
-                className="relative rounded-md border p-4"
+                className="relative rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4"
               >
                 {childCount > 1 && (
                   <button
@@ -178,13 +185,13 @@ export function AddFamilyDialog() {
                       // Felder nach Index benannt sind und der letzte entfernt wird.
                       setChildCount((c) => c - 1);
                     }}
-                    className="absolute right-3 top-3 rounded p-0.5 text-muted-foreground hover:text-destructive"
+                    className="absolute right-3 top-3 rounded-md p-1 text-[var(--ink-muted)] transition-colors hover:bg-[var(--danger-soft)] hover:text-[var(--danger)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]"
                     aria-label={`Kind ${i + 1} entfernen`}
                   >
                     <Trash2 className="h-4 w-4" />
                   </button>
                 )}
-                <p className="mb-3 text-xs font-medium text-muted-foreground">
+                <p className="mb-3 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
                   Kind {i + 1}
                 </p>
                 <div className="grid grid-cols-2 gap-3">
@@ -203,7 +210,7 @@ export function AddFamilyDialog() {
             ))}
 
             {state.errors?.children?.[0] && (
-              <p className="text-xs text-destructive">
+              <p className="text-xs text-[var(--danger)]">
                 {state.errors.children[0]}
               </p>
             )}
@@ -211,7 +218,7 @@ export function AddFamilyDialog() {
 
           {/* Globaler Fehler */}
           {state.errors?._form?.[0] && (
-            <p className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+            <p className="rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
               {state.errors._form[0]}
             </p>
           )}
@@ -219,7 +226,7 @@ export function AddFamilyDialog() {
           <DialogFooter>
             <Button
               type="button"
-              variant="outline"
+              variant="ghost"
               onClick={() => setOpen(false)}
               disabled={pending}
             >
@@ -268,7 +275,7 @@ function FormField({
         required={required}
         aria-invalid={!!error}
       />
-      {error && <p className="text-xs text-destructive">{error}</p>}
+      {error && <p className="text-xs text-[var(--danger)]">{error}</p>}
     </div>
   );
 }

src/app/dashboard/families/duty-manager.tsx

@@ -107,10 +107,10 @@ export function DutyManager({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="h-8 gap-1">
-          <Shield className="h-4 w-4" />
+          <Shield className="h-3.5 w-3.5" />
           <span className="hidden sm:inline">Ämter</span>
           {userAssignments.length > 0 && (
-            <Badge variant="secondary" className="ml-1 px-1 py-0 h-4">
+            <Badge variant="secondary" className="ml-1 h-4 px-1 py-0 tabular-nums">
               {userAssignments.length}
             </Badge>
           )}
@@ -127,16 +127,20 @@ export function DutyManager({
         <div className="flex flex-col gap-6 py-4">
           {/* Current Assignments */}
           <div className="flex flex-col gap-2">
-            <h4 className="text-sm font-semibold">Aktuelle Ämter</h4>
+            <h4 className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+              Aktuelle Ämter
+            </h4>
             {userAssignments.length === 0 ? (
-              <p className="text-sm text-muted-foreground italic">Keine Ämter zugewiesen.</p>
+              <p className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-5 text-sm italic text-[var(--ink-faint)]">
+                Keine Ämter zugewiesen.
+              </p>
             ) : (
               <div className="flex flex-wrap gap-2">
                 {userAssignments.map((assignment) => (
-                  <Badge key={assignment.id} variant="default" className="gap-1 pr-1 bg-primary">
+                  <Badge key={assignment.id} variant="default" className="gap-1 pr-1">
                     {assignment.duty.name}
                     <button
-                      className="ml-1 rounded-full hover:bg-primary-foreground/20 p-0.5"
+                      className="ml-1 rounded-full p-0.5 transition-colors hover:bg-[oklch(0.98_0.005_45_/_0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[oklch(0.98_0.005_45)]"
                       onClick={() => handleRemove(assignment.id)}
                       disabled={isPending}
                     >
@@ -149,17 +153,21 @@ export function DutyManager({
           </div>
 
           {/* Assign new duty */}
-          <div className="flex flex-col gap-2 border-t pt-4">
-            <h4 className="text-sm font-semibold">Vorhandenes Amt zuweisen</h4>
+          <div className="flex flex-col gap-2 border-t border-[var(--hairline-soft)] pt-4">
+            <h4 className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+              Vorhandenes Amt zuweisen
+            </h4>
             {unassignedDuties.length === 0 ? (
-              <p className="text-sm text-muted-foreground italic">Keine weiteren Ämter verfügbar.</p>
+              <p className="text-sm italic text-[var(--ink-faint)]">
+                Keine weiteren Ämter verfügbar.
+              </p>
             ) : (
               <div className="flex flex-wrap gap-2">
                 {unassignedDuties.map((duty) => (
                   <Badge
                     key={duty.id}
                     variant="outline"
-                    className="cursor-pointer hover:bg-muted gap-1 pr-1 group relative"
+                    className="group relative cursor-pointer gap-1 pr-1 hover:border-[var(--accent-mid)] hover:bg-[var(--accent-soft)] hover:text-[var(--accent-deep)]"
                     onClick={() => handleAssign(duty.id)}
                   >
                     <Plus className="h-3 w-3" />
@@ -168,7 +176,7 @@ export function DutyManager({
                     {/* Only show delete if no one is assigned to it across the entire DB */}
                     {duty.assignments.length === 0 && (
                       <button
-                        className="ml-1 rounded-full hover:bg-destructive/20 text-destructive p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="ml-1 rounded-full p-0.5 text-[var(--danger)] opacity-0 transition-opacity hover:bg-[var(--danger-soft)] group-hover:opacity-100"
                         onClick={(e) => {
                           e.stopPropagation();
                           handleDeleteDuty(duty.id);
@@ -186,8 +194,10 @@ export function DutyManager({
           </div>
 
           {/* Create new duty */}
-          <div className="flex flex-col gap-2 border-t pt-4">
-            <h4 className="text-sm font-semibold">Neues Amt anlegen</h4>
+          <div className="flex flex-col gap-2 border-t border-[var(--hairline-soft)] pt-4">
+            <h4 className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+              Neues Amt anlegen
+            </h4>
             <form action={handleCreateDuty} className="flex gap-2">
               <Input name="name" placeholder="z.B. Wäschedienst" className="h-8" required />
               <Button size="sm" className="h-8" disabled={isPending}>

src/app/dashboard/families/edit-family-dialog.tsx

@@ -163,7 +163,7 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
     <Dialog onOpenChange={(open) => !open && resetState()}>
       <DialogTrigger asChild>
         <Button variant="ghost" size="sm" className="h-8 gap-1">
-          <Pencil className="h-4 w-4" />
+          <Pencil className="h-3.5 w-3.5" />
           <span className="hidden sm:inline">Details</span>
         </Button>
       </DialogTrigger>
@@ -189,11 +189,13 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
 
             <fieldset className="grid gap-3">
               <div className="flex items-center justify-between gap-3">
-                <legend className="text-sm font-semibold">Elternteile</legend>
+                <legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+                  Elternteile
+                </legend>
                 {parents.length < 2 && (
                   <Button
                     type="button"
-                    variant="outline"
+                    variant="pill"
                     size="sm"
                     className="h-8 gap-1"
                     onClick={addParent}
@@ -206,9 +208,12 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
               </div>
 
               {parents.map((parent, index) => (
-                <div key={parent.id} className="rounded-md border p-3">
+                <div
+                  key={parent.id}
+                  className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
+                >
                   <div className="mb-3 flex items-center justify-between gap-3">
-                    <p className="text-xs font-medium text-muted-foreground">
+                    <p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
                       Elternteil {index + 1}
                     </p>
                     {parent.kind === "new" && (
@@ -216,7 +221,7 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="h-7 gap-1 px-2 text-destructive hover:text-destructive"
+                        className="h-7 gap-1 px-2 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
                         onClick={() => removeNewParent(parent)}
                         disabled={isPending}
                       >
@@ -254,10 +259,12 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
 
             <fieldset className="grid gap-3">
               <div className="flex items-center justify-between gap-3">
-                <legend className="text-sm font-semibold">Kinder</legend>
+                <legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+                  Kinder
+                </legend>
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="pill"
                   size="sm"
                   className="h-8 gap-1"
                   onClick={addChild}
@@ -269,21 +276,24 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
               </div>
 
               {children.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
+                <p className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-5 text-sm italic text-[var(--ink-faint)]">
                   Keine Kinder verknüpft.
                 </p>
               ) : (
                 children.map((child, index) => (
-                  <div key={child.id} className="rounded-md border p-3">
+                  <div
+                    key={child.id}
+                    className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
+                  >
                     <div className="mb-3 flex items-center justify-between gap-3">
-                      <p className="text-xs font-medium text-muted-foreground">
+                      <p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
                         Kind {index + 1}
                       </p>
                       <Button
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="h-7 gap-1 px-2 text-destructive hover:text-destructive"
+                        className="h-7 gap-1 px-2 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
                         onClick={() => removeChild(child)}
                         disabled={isPending}
                       >

src/app/dashboard/families/page.tsx

@@ -2,18 +2,7 @@ import { UserRole } from "@prisma/client";
 
 import { requireRole } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { AddFamilyDialog } from "./add-family-dialog";
-import { DutyManager } from "./duty-manager";
-import { EditFamilyDialog } from "./edit-family-dialog";
+import { FamiliesListClient } from "./_components/families-list-client";
 
 export const metadata = { title: "Familienverwaltung · Kita-Planer" };
 
@@ -31,7 +20,6 @@ export default async function FamiliesPage() {
   const kitaId = session.user.kitaId!;
 
   // Alle Haushalte der Kita mit Elternteilen und Kindern laden.
-  // kitaId IMMER aus der Session — nie aus URL/Params
   const families = await prisma.family.findMany({
     where: { kitaId },
     select: {
@@ -80,154 +68,15 @@ export default async function FamiliesPage() {
     orderBy: { name: "asc" },
   });
 
-  const childCount = families.reduce(
-    (acc, family) => acc + family.children.length,
-    0,
-  );
   const canManageDuties = session.user.role === UserRole.ADMIN;
 
   return (
-    <div className="px-8 py-8">
-      {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Familienverwaltung
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {families.length === 0
-              ? "Noch keine Familien angelegt."
-              : `${families.length} ${families.length === 1 ? "Familie" : "Familien"} · ${childCount} Kinder`}
-          </p>
-        </div>
-        <AddFamilyDialog />
-      </div>
-
-      {families.length === 0 ? (
-        <EmptyState />
-      ) : (
-        <div className="rounded-lg border bg-background">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Familie</TableHead>
-                <TableHead>Elternteile</TableHead>
-                <TableHead>Kinder</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="text-right">Aktionen</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {families.map((family) => {
-                const hasPendingInvite = family.users.some(
-                  (user) => !user.emailVerifiedAt,
-                );
-
-                return (
-                  <TableRow key={family.id}>
-                    <TableCell className="font-medium">
-                      {family.name}
-                    </TableCell>
-                    <TableCell>
-                      <div className="space-y-1.5">
-                        {family.users.map((parent) => (
-                          <div key={parent.id}>
-                            <div className="font-medium">
-                              {parent.firstName} {parent.lastName}
-                            </div>
-                            <div className="text-xs text-muted-foreground">
-                              {parent.email}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {family.children.length === 0 ? (
-                        <span className="text-sm text-muted-foreground">—</span>
-                      ) : (
-                        <div className="flex flex-wrap gap-1">
-                          {family.children.map((child) => (
-                            <span
-                              key={child.id}
-                              className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs font-medium"
-                            >
-                              {child.firstName} {child.lastName}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant={hasPendingInvite ? "warning" : "success"}>
-                        {hasPendingInvite ? "Einladung offen" : "Aktiv"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex flex-wrap justify-end gap-1">
-                        <EditFamilyDialog
-                          family={{
-                            id: family.id,
-                            name: family.name,
-                            parents: family.users.map((parent) => ({
-                              id: parent.id,
-                              firstName: parent.firstName,
-                              lastName: parent.lastName,
-                              email: parent.email,
-                            })),
-                            children: family.children,
-                          }}
-                        />
-                        {canManageDuties &&
-                          family.users.map((parent) => (
-                            <DutyManager
-                            key={parent.id}
-                            user={{
-                              id: parent.id,
-                              firstName: parent.firstName,
-                              lastName: parent.lastName,
-                            }}
-                            allDuties={allDuties}
-                            userAssignments={parent.dutyAssignments}
-                          />
-                          ))}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function EmptyState() {
-  return (
-    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed bg-background px-6 py-16 text-center">
-      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-        <svg
-          className="h-6 w-6 text-muted-foreground"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-          />
-        </svg>
-      </div>
-      <h3 className="mb-1 font-semibold">Noch keine Familien</h3>
-      <p className="mb-4 max-w-sm text-sm text-muted-foreground">
-        Lege die erste Familie an und lade das Elternteil per Link ein, sein
-        Passwort zu setzen.
-      </p>
-      <AddFamilyDialog />
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <FamiliesListClient
+        initialFamilies={families}
+        allDuties={allDuties}
+        canManageDuties={canManageDuties}
+      />
     </div>
   );
 }

src/app/dashboard/kalender/_components/admin-termin-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import type { ComponentProps, FormEvent } from "react";
+import { useEffect, useMemo, useState, useTransition } from "react";
 import { TerminType } from "@prisma/client";
 import { Plus } from "lucide-react";
 import { toast } from "sonner";
@@ -17,29 +18,131 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { createTerminAdmin } from "../actions";
+import { createTerminAdmin, updateTerminAdmin } from "../actions";
 import { Textarea } from "@/components/ui/textarea";
 
-export function AdminTerminModal() {
-  const [open, setOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
+type AdminTerminFormState = {
+  title: string;
+  description: string;
+  type: TerminType;
+  startDate: string;
+  endDate: string;
+  allDay: boolean;
+};
+
+const initialFormState: AdminTerminFormState = {
+  title: "",
+  description: "",
+  type: TerminType.KITA_FEST,
+  startDate: "",
+  endDate: "",
+  allDay: false,
+};
+
+type AdminTerminModalProps = {
+  triggerLabel?: string;
+  triggerVariant?: ComponentProps<typeof Button>["variant"];
+  triggerClassName?: string;
+  existingTermin?: {
+    id: string;
+    title: string;
+    description: string | null;
+    type: TerminType;
+    startDate: Date;
+    endDate: Date;
+    allDay: boolean;
+  };
+};
+
+export function AdminTerminModal({
+  triggerLabel = "Termin direkt anlegen",
+  triggerVariant,
+  triggerClassName = "gap-2",
+  existingTermin,
+}: AdminTerminModalProps) {
+  const [open, setOpen] = useState(false);
+  const [formState, setFormState] = useState<AdminTerminFormState>(initialFormState);
+  const [isPending, startTransition] = useTransition();
+  const minDateTime = useMemo(() => getLocalDateTimeInputValue(new Date()), []);
+  const minEndDateTime = formState.startDate || minDateTime;
+
+  // Initialize and reset form fields when modal opens
+  useEffect(() => {
+    if (open) {
+      if (existingTermin) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setFormState({
+          title: existingTermin.title,
+          description: existingTermin.description || "",
+          type: existingTermin.type,
+          startDate: getLocalDateTimeInputValue(existingTermin.startDate),
+          endDate: getLocalDateTimeInputValue(existingTermin.endDate),
+          allDay: existingTermin.allDay,
+        });
+      } else {
+        setFormState(initialFormState);
+      }
+    }
+  }, [open, existingTermin]);
+
+  const updateField = <TKey extends keyof AdminTerminFormState>(
+    key: TKey,
+    value: AdminTerminFormState[TKey],
+  ) => {
+    setFormState((current) => {
+      const next = { ...current, [key]: value };
+      if (key === "startDate" && typeof value === "string" && next.endDate && next.endDate < value) {
+        next.endDate = value;
+      }
+      return next;
+    });
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!formState.startDate || !formState.endDate) {
+      toast.error("Bitte Start und Ende ausfüllen.");
+      return;
+    }
+    // Only enforce future start date when creating a new event
+    if (!existingTermin && formState.startDate < minDateTime) {
+      toast.error("Der Startzeitpunkt darf nicht in der Vergangenheit liegen.");
+      return;
+    }
+    if (formState.endDate < formState.startDate) {
+      toast.error("Das Ende darf nicht vor dem Start liegen.");
+      return;
+    }
 
-  const handleAction = (formData: FormData) => {
     const data = {
-      title: formData.get("title") as string,
-      description: formData.get("description") as string,
-      type: formData.get("type") as TerminType,
-      startDate: new Date(formData.get("startDate") as string).toISOString(),
-      endDate: new Date(formData.get("endDate") as string).toISOString(),
-      allDay: formData.get("allDay") === "on",
+      title: formState.title,
+      description: formState.description,
+      type: formState.type,
+      startDate: new Date(formState.startDate).toISOString(),
+      endDate: new Date(formState.endDate).toISOString(),
+      allDay: formState.allDay,
     };
 
     startTransition(async () => {
-      const res = await createTerminAdmin(data);
+      let res;
+      if (existingTermin) {
+        res = await updateTerminAdmin(existingTermin.id, data);
+      } else {
+        res = await createTerminAdmin(data);
+      }
+
       if (res.error) {
         toast.error(res.error);
       } else {
-        toast.success("Termin wurde direkt angelegt!");
+        toast.success(
+          existingTermin
+            ? "Termin wurde erfolgreich aktualisiert!"
+            : "Termin wurde direkt angelegt!"
+        );
+        if (!existingTermin) {
+          setFormState(initialFormState);
+        }
         setOpen(false);
       }
     });
@@ -48,29 +151,46 @@ export function AdminTerminModal() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="gap-2 bg-primary">
-          <Plus className="h-4 w-4" />
-          Termin direkt anlegen
+        <Button variant={triggerVariant} className={triggerClassName}>
+          {!existingTermin && <Plus className="h-4 w-4" />}
+          {triggerLabel}
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <form action={handleAction}>
+        <form onSubmit={handleSubmit}>
           <DialogHeader>
-            <DialogTitle>Termin anlegen (Admin)</DialogTitle>
+            <DialogTitle>
+              {existingTermin ? "Termin bearbeiten (Admin)" : "Termin anlegen (Admin)"}
+            </DialogTitle>
             <DialogDescription>
-              Dieser Termin wird sofort freigegeben und ist für alle sichtbar.
+              {existingTermin
+                ? "Nimm Änderungen an diesem Termin vor. Die Änderungen werden sofort wirksam."
+                : "Dieser Termin wird sofort freigegeben und ist für alle sichtbar."}
             </DialogDescription>
           </DialogHeader>
 
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="title">Titel</Label>
-              <Input id="title" name="title" required placeholder="z.B. Sommerfest" />
+              <Input
+                id="title"
+                name="title"
+                required
+                placeholder="z.B. Sommerfest"
+                value={formState.title}
+                onChange={(event) => updateField("title", event.target.value)}
+              />
             </div>
 
             <div className="grid gap-2">
               <Label htmlFor="description">Beschreibung (Optional)</Label>
-              <Textarea id="description" name="description" placeholder="Details zum Termin..." />
+              <Textarea
+                id="description"
+                name="description"
+                placeholder="Details zum Termin..."
+                value={formState.description}
+                onChange={(event) => updateField("description", event.target.value)}
+              />
             </div>
 
             <div className="grid gap-2">
@@ -78,7 +198,9 @@ export function AdminTerminModal() {
               <select
                 id="type"
                 name="type"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                value={formState.type}
+                className="flex h-10 w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2 text-[13.5px] text-[var(--ink)] ring-offset-[var(--surface)] transition-colors hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+                onChange={(event) => updateField("type", event.target.value as TerminType)}
                 required
               >
                 <option value={TerminType.KITA_FEST}>Kita-Fest</option>
@@ -97,16 +219,39 @@ export function AdminTerminModal() {
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="startDate">Start</Label>
-                <Input id="startDate" name="startDate" type="datetime-local" required />
+                <Input
+                  id="startDate"
+                  name="startDate"
+                  type="datetime-local"
+                  min={existingTermin ? undefined : minDateTime}
+                  value={formState.startDate}
+                  onChange={(event) => updateField("startDate", event.target.value)}
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="endDate">Ende</Label>
-                <Input id="endDate" name="endDate" type="datetime-local" required />
+                <Input
+                  id="endDate"
+                  name="endDate"
+                  type="datetime-local"
+                  min={formState.startDate || (existingTermin ? undefined : minDateTime)}
+                  value={formState.endDate}
+                  onChange={(event) => updateField("endDate", event.target.value)}
+                  required
+                />
               </div>
             </div>
 
             <div className="flex items-center gap-2 mt-2">
-              <input type="checkbox" id="allDay" name="allDay" className="rounded border-gray-300" />
+              <input
+                type="checkbox"
+                id="allDay"
+                name="allDay"
+                checked={formState.allDay}
+                className="rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
+                onChange={(event) => updateField("allDay", event.target.checked)}
+              />
               <Label htmlFor="allDay" className="font-normal cursor-pointer">
                 Ganztägiger Termin
               </Label>
@@ -118,7 +263,7 @@ export function AdminTerminModal() {
               Abbrechen
             </Button>
             <Button type="submit" disabled={isPending}>
-              {isPending ? "Speichern..." : "Termin erstellen"}
+              {isPending ? "Speichern..." : existingTermin ? "Änderungen speichern" : "Termin erstellen"}
             </Button>
           </DialogFooter>
         </form>
@@ -126,3 +271,10 @@ export function AdminTerminModal() {
     </Dialog>
   );
 }
+
+function getLocalDateTimeInputValue(date: Date) {
+  const localDate = new Date(date);
+  localDate.setSeconds(0, 0);
+  const offset = localDate.getTimezoneOffset() * 60_000;
+  return new Date(localDate.getTime() - offset).toISOString().slice(0, 16);
+}

src/app/dashboard/kalender/_components/calendar-overview-client.tsx

@@ -0,0 +1,934 @@
+"use client";
+
+import { useState, useMemo, useTransition } from "react";
+import {
+  TerminType,
+  TerminStatus,
+  EventParticipationStatus,
+  DutyAssignmentStatus,
+} from "@prisma/client";
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  isSameMonth,
+  isSameDay,
+  addMonths,
+  subMonths,
+} from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  Search,
+  ListFilter,
+  ChevronLeft,
+  ChevronRight,
+  Calendar as CalendarIcon,
+  Clock,
+  MapPin,
+  AlertTriangle,
+  WashingMachine,
+  MoreHorizontal,
+  Trash2,
+  Edit,
+} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { toast } from "sonner";
+
+import { CalendarListItemDto } from "./termin-list";
+import { TerminList } from "./termin-list";
+import { MitbringselList } from "./mitbringsel-list";
+import { AdminTerminModal } from "./admin-termin-modal";
+import { deleteTerminAdmin } from "../actions";
+
+const categories = [
+  { label: "Schließtag", type: TerminType.SCHLIESSTAG, color: "var(--danger)" },
+  { label: "Teamtag", type: TerminType.TEAMTAG, color: "var(--danger)" },
+  { label: "Elternabend", type: TerminType.ELTERNABEND, color: "oklch(0.50 0.10 280)" },
+  { label: "Fest", type: TerminType.KITA_FEST, color: "var(--good)" },
+  { label: "Geburtstag", type: TerminType.GEBURTSTAG_INTERN, color: "oklch(0.50 0.10 320)" },
+  { label: "Mein Elterndienst", type: "mein-elterndienst", color: "oklch(0.60 0.16 160)" },
+  { label: "Elterndienst", type: "elterndienst", color: "oklch(0.75 0.08 160)" },
+  { label: "Mein Notdienst", type: "mein-notdienst", color: "oklch(0.60 0.18 45)" },
+  { label: "Notdienst", type: "notdienst", color: "oklch(0.75 0.10 50)" },
+  { label: "Sonstiges", type: TerminType.SONSTIGES, color: "var(--ink-muted)" },
+];
+
+export function CalendarOverviewClient({
+  termine,
+  userId,
+  isAdmin,
+}: {
+  termine: CalendarListItemDto[];
+  userId: string;
+  isAdmin: boolean;
+}) {
+  const [view, setView] = useState<"liste" | "monat" | "agenda">("monat");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTypes, setActiveTypes] = useState<Set<string>>(new Set());
+  const [filterScope, setFilterScope] = useState<"own" | "all">(isAdmin ? "all" : "own");
+
+  // Month navigation state
+  const [currentMonthDate, setCurrentMonthDate] = useState(new Date());
+
+  // Dialog state for day clicking in Month view
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null);
+
+  // Delete event states
+  const [deleteEventId, setDeleteEventId] = useState<string | null>(null);
+  const [deleteEventTitle, setDeleteEventTitle] = useState("");
+  const [isDeleting, startDeleteTransition] = useTransition();
+
+  const toggleType = (type: string) => {
+    setActiveTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  };
+
+  // Filter logic
+  const filteredEvents = useMemo(() => {
+    return termine.filter((item) => {
+      // 0. Filter by scope (own vs all)
+      if (filterScope === "own") {
+        if (item.kind === "duty" && !item.isOwn) return false;
+        if (item.kind === "notdienst" && !item.isOwn) return false;
+      }
+
+      // 1. Search Query filter
+      const query = searchQuery.trim().toLowerCase();
+      if (query) {
+        const titleMatch = item.title.toLowerCase().includes(query);
+        const descMatch =
+          item.kind === "termin" && item.description
+            ? item.description.toLowerCase().includes(query)
+            : false;
+        const familyMatch =
+          (item.kind === "duty" || item.kind === "notdienst") && item.familyName
+            ? item.familyName.toLowerCase().includes(query)
+            : false;
+        const childMatch =
+          item.kind === "notdienst" && item.childName
+            ? item.childName.toLowerCase().includes(query)
+            : false;
+        if (!titleMatch && !descMatch && !familyMatch && !childMatch) return false;
+      }
+
+      // 2. Category filter
+      if (activeTypes.size > 0) {
+        const itemType =
+          item.kind === "duty"
+            ? item.isOwn
+              ? "mein-elterndienst"
+              : "elterndienst"
+            : item.kind === "notdienst"
+            ? item.isOwn
+              ? "mein-notdienst"
+              : "notdienst"
+            : item.type;
+        if (!activeTypes.has(itemType)) return false;
+      }
+
+      return true;
+    });
+  }, [termine, searchQuery, activeTypes, filterScope]);
+
+  // Check if an event falls on a specific day
+  const isEventOnDay = (item: CalendarListItemDto, day: Date) => {
+    const eventStart = new Date(item.startDate);
+    const eventEnd = new Date(item.endDate);
+    const dayTime = new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
+    const startTime = new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate()).getTime();
+    const endTime = new Date(eventEnd.getFullYear(), eventEnd.getMonth(), eventEnd.getDate()).getTime();
+    return dayTime >= startTime && dayTime <= endTime;
+  };
+
+  // Get events for selected day (using all filtered events or all events? We use filtered to keep visual filters consistent!)
+  const selectedDayEvents = useMemo(() => {
+    if (!selectedDay) return [];
+    return filteredEvents.filter((item) => isEventOnDay(item, selectedDay));
+  }, [selectedDay, filteredEvents]);
+
+  // Handle event delete
+  const handleDeleteConfirm = () => {
+    if (!deleteEventId) return;
+    startDeleteTransition(async () => {
+      const res = await deleteTerminAdmin(deleteEventId);
+      if (res.error) {
+        toast.error(res.error);
+      } else {
+        toast.success("Termin wurde erfolgreich gelöscht.");
+        setDeleteEventId(null);
+        // If deleting from the day dialog, update selectedDay if it becomes empty or keep it open
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-5">
+      {/* Search and Filters Header */}
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center flex-wrap gap-3">
+          <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)]">
+            {(["liste", "monat", "agenda"] as const).map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setView(v)}
+                className={[
+                  "h-9 px-4 text-[13px] font-semibold transition",
+                  v !== "liste" ? "border-l border-[var(--hairline-soft)]" : "",
+                  view === v
+                    ? "bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                    : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
+                ].join(" ")}
+              >
+                {v.charAt(0).toUpperCase() + v.slice(1)}
+              </button>
+            ))}
+          </div>
+
+          {!isAdmin && (
+            <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)] p-0.5">
+              <button
+                type="button"
+                onClick={() => setFilterScope("own")}
+                className={[
+                  "h-8 px-4 rounded-full text-[12px] font-semibold transition-all duration-200",
+                  filterScope === "own"
+                    ? "bg-[var(--accent-deep)] text-[var(--surface)] shadow-sm"
+                    : "text-[var(--ink-soft)] hover:text-[var(--ink)] hover:bg-[var(--surface-2)]",
+                ].join(" ")}
+              >
+                Meine Dienste
+              </button>
+              <button
+                type="button"
+                onClick={() => setFilterScope("all")}
+                className={[
+                  "h-8 px-4 rounded-full text-[12px] font-semibold transition-all duration-200",
+                  filterScope === "all"
+                    ? "bg-[var(--accent-deep)] text-[var(--surface)] shadow-sm"
+                    : "text-[var(--ink-soft)] hover:text-[var(--ink)] hover:bg-[var(--surface-2)]",
+                ].join(" ")}
+              >
+                Alle Dienste
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+          {/* Category chips */}
+          <div className="flex flex-wrap gap-1.5">
+            <span className="inline-flex h-9 items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-medium text-[var(--ink-soft)]">
+              <ListFilter className="h-3.5 w-3.5 [stroke-width:1.7]" />
+              Filter
+            </span>
+            {categories.map((cat) => {
+              const isActive = activeTypes.has(cat.type);
+              return (
+                <button
+                  key={cat.label}
+                  type="button"
+                  onClick={() => toggleType(cat.type)}
+                  className={[
+                    "inline-flex h-9 items-center gap-1.5 rounded-full border px-3 text-[13px] font-medium transition",
+                    isActive
+                      ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+                      : "border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
+                  ].join(" ")}
+                >
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: cat.color }}
+                  />
+                  {cat.label}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="relative min-w-56">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ink-muted)] [stroke-width:1.7]" />
+            <Input
+              placeholder="Termine suchen"
+              className="h-9 pl-9"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Main View Contents */}
+      {view === "liste" && (
+        <TerminList termine={filteredEvents} userId={userId} isAdmin={isAdmin} />
+      )}
+
+      {view === "monat" && (
+        <MonthView
+          currentMonthDate={currentMonthDate}
+          setCurrentMonthDate={setCurrentMonthDate}
+          events={filteredEvents}
+          isEventOnDay={isEventOnDay}
+          onDayClick={(day) => setSelectedDay(day)}
+        />
+      )}
+
+      {view === "agenda" && (
+        <AgendaView
+          events={filteredEvents}
+          isAdmin={isAdmin}
+          userId={userId}
+          onDeleteTermin={(id, title) => {
+            setDeleteEventId(id);
+            setDeleteEventTitle(title);
+          }}
+        />
+      )}
+
+      {/* Day details Dialog for Month View */}
+      <Dialog open={!!selectedDay} onOpenChange={(open) => !open && setSelectedDay(null)}>
+        <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-xl">
+              {selectedDay && format(selectedDay, "EEEE, d. MMMM yyyy", { locale: de })}
+            </DialogTitle>
+            <DialogDescription>
+              Übersicht aller Zuteilungen, Feste und Einträge an diesem Tag.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-4 space-y-4">
+            {selectedDayEvents.length === 0 ? (
+              <p className="text-sm italic text-[var(--ink-soft)] text-center py-8">
+                Keine Termine oder Dienste an diesem Tag.
+              </p>
+            ) : (
+              selectedDayEvents.map((item) => (
+                <div
+                  key={item.id}
+                  className="relative rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-4 shadow-sm"
+                >
+                  {item.kind === "duty" ? (
+                    <div className="flex items-start gap-3">
+                      <div
+                        className="absolute inset-y-3 left-0 w-[4px] rounded-r-full"
+                        style={{
+                          backgroundColor: item.isOwn
+                            ? "oklch(0.60 0.16 160)"
+                            : "oklch(0.75 0.08 160)",
+                        }}
+                      />
+                      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--surface-2)] text-[var(--ink-soft)] ml-2">
+                        <WashingMachine className="h-5 w-5 [stroke-width:1.7]" style={{ color: item.isOwn ? "oklch(0.60 0.16 160)" : "oklch(0.75 0.08 160)" }} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between gap-2">
+                          <h4 className="font-semibold text-[15px] text-[var(--ink)] truncate">
+                            {item.title}
+                          </h4>
+                          <Badge
+                            variant="secondary"
+                            style={{
+                              color: item.isOwn
+                                ? "oklch(0.60 0.16 160)"
+                                : "oklch(0.75 0.08 160)",
+                              borderColor:
+                                (item.isOwn
+                                  ? "oklch(0.60 0.16 160)"
+                                  : "oklch(0.75 0.08 160)") + "44",
+                              backgroundColor:
+                                (item.isOwn
+                                  ? "oklch(0.60 0.16 160)"
+                                  : "oklch(0.75 0.08 160)") + "11",
+                            }}
+                            className="border text-[10px]"
+                          >
+                            {item.isOwn ? "Mein Elterndienst" : "Elterndienst"}
+                          </Badge>
+                        </div>
+                        <p className="mt-1 text-sm text-[var(--ink-soft)]">
+                          Familie: {item.familyName}
+                        </p>
+                        <p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1">
+                          <Clock className="h-3.5 w-3.5" />
+                          {format(new Date(item.startDate), "dd.MM.")} -{" "}
+                          {format(new Date(item.endDate), "dd.MM.yyyy")}
+                        </p>
+                        {isAdmin && (
+                          <div className="mt-3 flex gap-2">
+                            <a href="/dashboard/admin/dienste">
+                              <Button size="sm" variant="outline" className="h-7 text-xs px-2.5">
+                                Im Planer bearbeiten
+                              </Button>
+                            </a>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ) : item.kind === "notdienst" ? (
+                    <div className="flex items-start gap-3">
+                      <div
+                        className="absolute inset-y-3 left-0 w-[4px] rounded-r-full"
+                        style={{
+                          backgroundColor: item.isOwn
+                            ? "oklch(0.60 0.18 45)"
+                            : "oklch(0.75 0.10 50)",
+                        }}
+                      />
+                      <div className="pl-2 flex-1 min-w-0">
+                        <div className="flex items-center justify-between gap-2">
+                          <h4 className="font-semibold text-[15px] text-[var(--ink)] truncate">
+                            {item.title}
+                          </h4>
+                          <Badge
+                            variant="secondary"
+                            style={{
+                              color: item.isOwn
+                                ? "oklch(0.60 0.18 45)"
+                                : "oklch(0.75 0.10 50)",
+                              borderColor:
+                                (item.isOwn
+                                  ? "oklch(0.60 0.18 45)"
+                                  : "oklch(0.75 0.10 50)") + "44",
+                              backgroundColor:
+                                (item.isOwn
+                                  ? "oklch(0.60 0.18 45)"
+                                  : "oklch(0.75 0.10 50)") + "11",
+                            }}
+                            className="border text-[10px]"
+                          >
+                            {item.isOwn ? "Mein Notdienst" : "Notdienst"}
+                          </Badge>
+                        </div>
+                        <p className="mt-1 text-sm text-[var(--ink-soft)]">
+                          Kind: {item.childName} (Familie: {item.familyName})
+                        </p>
+                        <p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1">
+                          <Clock className="h-3.5 w-3.5" />
+                          {format(new Date(item.startDate), "dd.MM.yyyy")}
+                        </p>
+                        {isAdmin && (
+                          <div className="mt-3 flex gap-2">
+                            <a href="/dashboard/notdienst/plan">
+                              <Button size="sm" variant="outline" className="h-7 text-xs px-2.5">
+                                Im Planer bearbeiten
+                              </Button>
+                            </a>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex items-start gap-3">
+                      <div
+                        className="absolute inset-y-3 left-0 w-[4px] rounded-r-full"
+                        style={{ backgroundColor: getCategoryColor(item.type) }}
+                      />
+                      <div className="pl-2 flex-1 min-w-0">
+                        <div className="flex items-center justify-between gap-2">
+                          <h4 className="font-semibold text-[15px] text-[var(--ink)] truncate">
+                            {item.title}
+                          </h4>
+                          <span
+                            className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold border border-[var(--hairline)]"
+                            style={{
+                              color: getCategoryColor(item.type),
+                              borderColor: getCategoryColor(item.type) + "44",
+                              backgroundColor: getCategoryColor(item.type) + "11",
+                            }}
+                          >
+                            {getTypeLabel(item.type)}
+                          </span>
+                        </div>
+
+                        <p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1">
+                          <Clock className="h-3.5 w-3.5" />
+                          {item.allDay
+                            ? "Ganztägig"
+                            : `${format(new Date(item.startDate), "HH:mm")} - ${format(
+                                new Date(item.endDate),
+                                "HH:mm",
+                              )}`}
+                        </p>
+
+                        {item.description && (
+                          <p className="mt-2 text-sm text-[var(--ink-soft)] whitespace-pre-wrap leading-relaxed">
+                            {item.description}
+                          </p>
+                        )}
+
+                        {item.participantInfo && item.showParticipantInfo && (
+                          <div className="mt-3 rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-3 text-xs text-[var(--ink)]">
+                            <div className="mb-0.5 flex items-center gap-1.5 font-medium">
+                              <AlertTriangle className="h-3.5 w-3.5 text-[var(--warn)]" />
+                              Hinweis für Teilnehmer
+                            </div>
+                            <p className="whitespace-pre-wrap">{item.participantInfo}</p>
+                          </div>
+                        )}
+
+                        {item.mitbringselListEnabled && (
+                          <div className="mt-3">
+                            <MitbringselList
+                              terminId={item.id}
+                              items={item.mitbringselItems || []}
+                              currentUserId={userId}
+                              isAdmin={isAdmin}
+                            />
+                          </div>
+                        )}
+
+                        {isAdmin && (
+                          <div className="mt-3 flex gap-2 border-t border-[var(--hairline-soft)] pt-3">
+                            <AdminTerminModal
+                              existingTermin={item}
+                              triggerLabel="Bearbeiten"
+                              triggerVariant="outline"
+                              triggerClassName="h-7 text-xs gap-1 px-2.5"
+                            />
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-7 text-xs text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)] gap-1 px-2.5 border-[var(--hairline)]"
+                              onClick={() => {
+                                setDeleteEventId(item.id);
+                                setDeleteEventTitle(item.title);
+                              }}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                              Löschen
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={!!deleteEventId} onOpenChange={(open) => !open && setDeleteEventId(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Termin unwiderruflich löschen?</DialogTitle>
+            <DialogDescription>
+              Möchtest du den Termin &ldquo;{deleteEventTitle}&rdquo; wirklich löschen? Alle
+              zugehörigen Teilnahmen und Mitbringsel-Einträge gehen verloren.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setDeleteEventId(null)}
+              disabled={isDeleting}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Wird gelöscht..." : "Löschen"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// =====================================================================
+// Month Grid Component
+// =====================================================================
+function MonthView({
+  currentMonthDate,
+  setCurrentMonthDate,
+  events,
+  isEventOnDay,
+  onDayClick,
+}: {
+  currentMonthDate: Date;
+  setCurrentMonthDate: (date: Date) => void;
+  events: CalendarListItemDto[];
+  isEventOnDay: (item: CalendarListItemDto, day: Date) => boolean;
+  onDayClick: (day: Date) => void;
+}) {
+  const monthStart = startOfMonth(currentMonthDate);
+  const monthEnd = endOfMonth(monthStart);
+  const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
+
+  const days = useMemo(() => {
+    return eachDayOfInterval({ start: startDate, end: endDate });
+  }, [startDate, endDate]);
+
+  const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+
+  return (
+    <Card className="overflow-hidden border border-[var(--hairline)] shadow-sm">
+      <div className="flex items-center justify-between border-b border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-3">
+        <h3 className="text-[16px] font-semibold text-[var(--ink)]">
+          {format(currentMonthDate, "MMMM yyyy", { locale: de })}
+        </h3>
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setCurrentMonthDate(subMonths(currentMonthDate, 1))}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => setCurrentMonthDate(new Date())}
+            className="h-8 text-xs font-semibold px-2.5"
+          >
+            Heute
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setCurrentMonthDate(addMonths(currentMonthDate, 1))}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-7 border-b border-[var(--hairline-soft)] bg-[var(--surface-3)]/20 py-2 text-center text-xs font-semibold text-[var(--ink-soft)]">
+        {weekdays.map((day) => (
+          <div key={day}>{day}</div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 bg-[var(--hairline-soft)] gap-[1px]">
+        {days.map((day, idx) => {
+          const isCurrentMonth = isSameMonth(day, currentMonthDate);
+          const isToday = isSameDay(day, new Date());
+          const dayEvents = events.filter((item) => isEventOnDay(item, day));
+
+          return (
+            <div
+              key={day.toString() + idx}
+              onClick={() => onDayClick(day)}
+              className={[
+                "min-h-[105px] bg-[var(--surface)] p-2 transition-colors hover:bg-[var(--surface-2)] cursor-pointer flex flex-col justify-between",
+                !isCurrentMonth ? "bg-[var(--surface-3)]/30 text-[var(--ink-muted)] opacity-60" : "text-[var(--ink)]",
+              ].join(" ")}
+            >
+              {/* Day number cell top */}
+              <div className="flex items-center justify-between">
+                <span
+                  className={[
+                    "text-xs font-semibold flex h-6 w-6 items-center justify-center rounded-full",
+                    isToday
+                      ? "bg-[var(--accent-deep)] text-[oklch(0.98_0.005_45)] shadow-sm"
+                      : "",
+                  ].join(" ")}
+                >
+                  {format(day, "d")}
+                </span>
+              </div>
+
+              {/* Event indicators/snippets */}
+              <div className="mt-2 space-y-1 flex-1 flex flex-col justify-end">
+                {dayEvents.slice(0, 3).map((item) => {
+                  const color =
+                    item.kind === "duty"
+                      ? item.isOwn
+                        ? "oklch(0.60 0.16 160)"
+                        : "oklch(0.75 0.08 160)"
+                      : item.kind === "notdienst"
+                      ? item.isOwn
+                        ? "oklch(0.60 0.18 45)"
+                        : "oklch(0.75 0.10 50)"
+                      : getCategoryColor(item.type);
+                  return (
+                    <div
+                      key={item.id}
+                      className="group relative flex items-center gap-1 rounded bg-[var(--surface-2)] px-1.5 py-0.5 text-[10px] font-medium border border-[var(--hairline-soft)]"
+                    >
+                      <span
+                        className="h-1.5 w-1.5 shrink-0 rounded-full"
+                        style={{ backgroundColor: color }}
+                      />
+                      <span className="truncate text-[var(--ink-soft)] max-w-full">
+                        {item.title}
+                      </span>
+                    </div>
+                  );
+                })}
+                {dayEvents.length > 3 && (
+                  <div className="text-[9px] font-semibold text-[var(--accent-deep)] pl-1.5">
+                    + {dayEvents.length - 3} weitere
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
+
+// =====================================================================
+// Agenda Timeline View Component
+// =====================================================================
+function AgendaView({
+  events,
+  isAdmin,
+  userId,
+  onDeleteTermin,
+}: {
+  events: CalendarListItemDto[];
+  isAdmin: boolean;
+  userId: string;
+  onDeleteTermin: (id: string, title: string) => void;
+}) {
+  const grouped = useMemo(() => {
+    const groups = new Map<string, { date: Date; items: CalendarListItemDto[] }>();
+
+    events.forEach((item) => {
+      const key = format(new Date(item.startDate), "yyyy-MM-dd");
+      const group = groups.get(key) ?? { date: new Date(item.startDate), items: [] };
+      group.items.push(item);
+      groups.set(key, group);
+    });
+
+    return Array.from(groups.values()).sort((a, b) => a.date.getTime() - b.date.getTime());
+  }, [events]);
+
+  if (events.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex min-h-[220px] flex-col items-center justify-center text-center p-6">
+          <CalendarIcon className="h-8 w-8 text-[var(--ink-muted)] mb-2" />
+          <h3 className="text-[16px] font-semibold text-[var(--ink)]">
+            Keine Termine oder Dienste gefunden
+          </h3>
+          <p className="text-sm text-[var(--ink-soft)] mt-1 max-w-xs">
+            Passe deine Filter an oder suche nach einem anderen Begriff.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6 pl-4 border-l-2 border-[var(--hairline)]">
+      {grouped.map((group) => (
+        <div key={group.date.toString()} className="relative grid grid-cols-[110px_1fr] gap-4 items-start">
+          {/* Timeline marker */}
+          <div className="absolute -left-[21px] top-1.5 h-3.5 w-3.5 rounded-full border-2 border-[var(--accent-deep)] bg-[var(--surface)]" />
+
+          {/* Date Label on left */}
+          <div className="pt-0.5">
+            <div className="text-[14px] font-bold text-[var(--ink)] leading-none">
+              {format(group.date, "d. MMMM", { locale: de })}
+            </div>
+            <div className="text-[11px] font-semibold uppercase tracking-wider text-[var(--ink-muted)] mt-1">
+              {format(group.date, "EEEE", { locale: de })}
+            </div>
+          </div>
+
+          {/* Items stack on right */}
+          <div className="space-y-3">
+            {group.items.map((item) => {
+              const color =
+                item.kind === "termin"
+                  ? getCategoryColor(item.type)
+                  : item.kind === "notdienst"
+                  ? item.isOwn
+                    ? "oklch(0.60 0.18 45)"
+                    : "oklch(0.75 0.10 50)"
+                  : item.kind === "duty"
+                  ? item.isOwn
+                    ? "oklch(0.60 0.16 160)"
+                    : "oklch(0.75 0.08 160)"
+                  : "oklch(0.60 0.15 160)";
+
+              return (
+                <div
+                  key={item.id}
+                  className="group relative flex items-start justify-between gap-4 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-4 shadow-sm transition-shadow hover:shadow-md"
+                >
+                  <div className="flex items-start gap-3 min-w-0">
+                    <div
+                      className="absolute inset-y-3 left-0 w-[4px] rounded-r-full"
+                      style={{ backgroundColor: color }}
+                    />
+                    <div className="pl-1 min-w-0">
+                      <div className="flex items-center flex-wrap gap-2">
+                        <h4 className="font-bold text-[15px] text-[var(--ink)] truncate">
+                          {item.title}
+                        </h4>
+                        {item.kind === "termin" ? (
+                          <span
+                            className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold border"
+                            style={{
+                              color,
+                              borderColor: color + "44",
+                              backgroundColor: color + "11",
+                            }}
+                          >
+                            {getTypeLabel(item.type)}
+                          </span>
+                        ) : item.kind === "notdienst" ? (
+                          <Badge
+                            variant="secondary"
+                            className="text-[10px]"
+                            style={{
+                              color,
+                              borderColor: color + "44",
+                              backgroundColor: color + "11",
+                            }}
+                          >
+                            {item.isOwn ? "Mein Notdienst" : "Notdienst"}
+                          </Badge>
+                        ) : (
+                          <Badge variant="secondary" className="bg-[oklch(0.95_0.02_160)] text-[oklch(0.40_0.10_160)] text-[10px]">
+                            Elterndienst
+                          </Badge>
+                        )}
+                        {item.kind === "termin" && item.status === TerminStatus.PENDING && (
+                          <Badge variant="warning" className="text-[10px]">Ausstehend</Badge>
+                        )}
+                      </div>
+
+                      <p className="mt-1 text-xs text-[var(--ink-muted)] flex items-center gap-1.5">
+                        <Clock className="h-3.5 w-3.5" />
+                        {item.kind === "termin"
+                          ? item.allDay
+                            ? "Ganztägig"
+                            : `${format(new Date(item.startDate), "HH:mm")} - ${format(
+                                new Date(item.endDate),
+                                "HH:mm",
+                              )}`
+                          : item.kind === "notdienst"
+                          ? `${format(new Date(item.startDate), "dd.MM.yyyy")} (ganztägig)`
+                          : `${format(new Date(item.startDate), "dd.MM.")} - ${format(
+                              new Date(item.endDate),
+                              "dd.MM.yyyy",
+                            )}`}
+                        {item.kind === "termin" && <MapPin className="ml-1 h-3.5 w-3.5" />}
+                        {item.kind === "termin"
+                          ? "Kita"
+                          : item.kind === "notdienst"
+                          ? `Kind: ${item.childName} · Familie: ${item.familyName}`
+                          : `Familie: ${item.familyName}`}
+                      </p>
+
+                      {item.kind === "termin" && item.description && (
+                        <p className="mt-2 text-sm text-[var(--ink-soft)] line-clamp-2 leading-relaxed">
+                          {item.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Actions for admins */}
+                  {isAdmin && item.kind === "termin" && (
+                    <div className="flex gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <AdminTerminModal
+                        existingTermin={item}
+                        triggerLabel=""
+                        triggerVariant="ghost"
+                        triggerClassName="h-8 w-8 p-0"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-[var(--ink-muted)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
+                        onClick={() => onDeleteTermin(item.id, item.title)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// =====================================================================
+// Helper functions for categories/labels
+// =====================================================================
+function getCategoryColor(type: TerminType): string {
+  switch (type) {
+    case TerminType.KITA_FEST:
+    case TerminType.MITMACH_TAG:
+      return "var(--good)";
+    case TerminType.SCHLIESSTAG:
+    case TerminType.TEAMTAG:
+      return "var(--danger)";
+    case TerminType.GEBURTSTAG_INTERN:
+    case TerminType.GEBURTSTAG_EXTERN:
+      return "oklch(0.50 0.10 320)";
+    case TerminType.ELTERNABEND:
+    case TerminType.MITGLIEDERVERSAMMLUNG:
+    case TerminType.ELTERNCAFE:
+      return "oklch(0.50 0.10 280)";
+    default:
+      return "var(--ink-muted)";
+  }
+}
+
+function getTypeLabel(type: TerminType): string {
+  switch (type) {
+    case TerminType.KITA_FEST:
+      return "Kita-Fest";
+    case TerminType.MITMACH_TAG:
+      return "Mitmach-Tag";
+    case TerminType.SCHLIESSTAG:
+      return "Schließtag";
+    case TerminType.TEAMTAG:
+      return "Teamtag";
+    case TerminType.ELTERNABEND:
+      return "Elternabend";
+    case TerminType.MITGLIEDERVERSAMMLUNG:
+      return "Mitgliederversammlung";
+    case TerminType.ELTERNCAFE:
+      return "Elterncafe";
+    case TerminType.GEBURTSTAG_INTERN:
+      return "Geburtstag";
+    case TerminType.GEBURTSTAG_EXTERN:
+      return "Raumanfrage";
+    default:
+      return "Sonstiges";
+  }
+}

src/app/dashboard/kalender/_components/mitbringsel-list.tsx

@@ -55,23 +55,25 @@ export function MitbringselList({
   };
 
   return (
-    <div className="flex flex-col gap-3 rounded-md bg-muted/50 p-3">
-      <div className="flex items-center gap-2 font-medium text-sm mb-1">
-        <Utensils className="h-4 w-4 text-muted-foreground" />
+    <div className="flex flex-col gap-3 rounded-lg bg-[var(--surface-2)] p-3">
+      <div className="mb-1 flex items-center gap-2 text-sm font-medium text-[var(--ink)]">
+        <Utensils className="h-4 w-4 text-[var(--ink-muted)] [stroke-width:1.7]" />
         Mitbring-Liste
       </div>
 
       <div className="flex flex-col gap-2 max-h-40 overflow-y-auto">
         {items.length === 0 ? (
-          <p className="text-xs text-muted-foreground italic">Noch keine Einträge vorhanden.</p>
+          <p className="text-xs italic text-[var(--ink-faint)]">
+            Noch keine Einträge vorhanden.
+          </p>
         ) : (
           items.map((item) => (
             <div
               key={item.id}
-              className="flex items-center justify-between gap-2 rounded-sm bg-background p-2 text-sm shadow-sm"
+              className="flex items-center justify-between gap-2 rounded-md border border-[var(--hairline-soft)] bg-[var(--surface)] p-2 text-sm text-[var(--ink)]"
             >
               <div className="flex flex-col">
-                <span className="font-medium text-xs text-primary">
+                <span className="text-xs font-medium text-[var(--accent-deep)]">
                   {item.user.firstName} {item.user.lastName}
                 </span>
                 <span>{item.content}</span>
@@ -80,11 +82,11 @@ export function MitbringselList({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-6 w-6 text-muted-foreground hover:text-destructive shrink-0"
+                  className="h-6 w-6 shrink-0 text-[var(--ink-muted)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
                   onClick={() => handleDelete(item.id)}
                   disabled={isPending}
                 >
-                  <Trash2 className="h-4 w-4" />
+                  <Trash2 className="h-4 w-4 [stroke-width:1.7]" />
                 </Button>
               )}
             </div>
@@ -112,7 +114,7 @@ export function MitbringselList({
           onClick={handleAdd}
           disabled={!content.trim() || isPending}
         >
-          <Plus className="h-4 w-4 mr-1" />
+          <Plus className="mr-1 h-4 w-4 [stroke-width:1.7]" />
           Hinzufügen
         </Button>
       </div>

src/app/dashboard/kalender/_components/pending-anfragen.tsx

@@ -3,17 +3,20 @@
 import { useTransition } from "react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Check, X, Clock, CalendarIcon } from "lucide-react";
+import { CalendarIcon, Check, Clock, X } from "lucide-react";
 import { toast } from "sonner";
 
-import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { approveTermin, rejectTermin } from "../actions";
 
 export type PendingTerminDto = {
   id: string;
   title: string;
   startDate: Date;
+  createdAt: Date;
+  ageInDays: number;
   allDay: boolean;
   createdBy: { firstName: string; lastName: string } | null;
 };
@@ -21,22 +24,28 @@ export type PendingTerminDto = {
 export function PendingAnfragen({ termine }: { termine: PendingTerminDto[] }) {
   if (termine.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center animate-in fade-in-50">
-        <CalendarIcon className="h-10 w-10 text-muted-foreground mb-4" />
-        <h3 className="text-lg font-semibold">Keine ausstehenden Anfragen</h3>
-        <p className="text-sm text-muted-foreground">
-          Es gibt aktuell keine Terminanfragen, die bestätigt werden müssen.
-        </p>
-      </div>
+      <Card>
+        <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center p-8 text-center animate-in fade-in-50">
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <CalendarIcon className="h-6 w-6 [stroke-width:1.7]" />
+          </div>
+          <h3 className="text-lg font-medium text-[var(--ink)]">
+            Keine ausstehenden Anfragen
+          </h3>
+          <p className="mt-2 text-sm text-[var(--ink-soft)]">
+            Es gibt aktuell keine Terminanfragen, die bestätigt werden müssen.
+          </p>
+        </CardContent>
+      </Card>
     );
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <Card className="overflow-hidden p-0">
       {termine.map((termin) => (
         <PendingTerminCard key={termin.id} termin={termin} />
       ))}
-    </div>
+    </Card>
   );
 }
 
@@ -67,40 +76,57 @@ function PendingTerminCard({ termin }: { termin: PendingTerminDto }) {
   };
 
   return (
-    <Card>
-      <CardContent className="flex items-center justify-between p-4 sm:p-6">
-        <div className="flex flex-col gap-1">
-          <div className="font-semibold">{termin.title}</div>
-          <div className="text-sm text-muted-foreground flex items-center gap-1">
-            <Clock className="h-3.5 w-3.5" />
-            {format(termin.startDate, "PP", { locale: de })}
-            {!termin.allDay && ` • ${format(termin.startDate, "p", { locale: de })}`}
-          </div>
-          <div className="text-sm font-medium text-primary mt-1">
-            Angefragt von: {termin.createdBy?.firstName} {termin.createdBy?.lastName}
-          </div>
-        </div>
+    <div className="grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 border-b border-[var(--hairline-soft)] px-5 py-4 last:border-b-0 hover:bg-[var(--surface-2)]">
+      <div className="flex h-14 w-14 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)]">
+        <span className="text-[22px] font-medium leading-none tracking-[-0.02em] text-[var(--ink)] tabular-nums">
+          {format(termin.startDate, "d", { locale: de })}
+        </span>
+        <span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.08em]">
+          {format(termin.startDate, "EEE", { locale: de })}
+        </span>
+      </div>
 
-        <div className="flex flex-col sm:flex-row gap-2">
-          <Button
-            variant="outline"
-            className="text-destructive hover:bg-destructive hover:text-destructive-foreground border-destructive/20"
-            onClick={handleReject}
-            disabled={isPending}
-          >
-            <X className="h-4 w-4 sm:mr-2" />
-            <span className="hidden sm:inline">Ablehnen</span>
-          </Button>
-          <Button
-            className="bg-emerald-600 hover:bg-emerald-700 text-white"
-            onClick={handleApprove}
-            disabled={isPending}
-          >
-            <Check className="h-4 w-4 sm:mr-2" />
-            <span className="hidden sm:inline">Freigeben</span>
-          </Button>
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-center gap-2">
+          <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+            {termin.title}
+          </h3>
+          {termin.ageInDays > 7 && (
+            <Badge variant="warning">Älter als 7 Tage</Badge>
+          )}
         </div>
-      </CardContent>
-    </Card>
+        <p className="mt-1 flex items-center gap-1 text-sm text-[var(--ink-soft)]">
+          <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
+          {format(termin.startDate, "PP", { locale: de })}
+          {!termin.allDay &&
+            ` · ${format(termin.startDate, "p", { locale: de })}`}
+        </p>
+        <p className="mt-1 text-sm font-medium text-[var(--accent-deep)]">
+          Angefragt von: {termin.createdBy?.firstName}{" "}
+          {termin.createdBy?.lastName} · vor {termin.ageInDays} Tagen
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
+          onClick={handleReject}
+          disabled={isPending}
+        >
+          <X className="h-4 w-4 [stroke-width:1.7]" />
+          Ablehnen
+        </Button>
+        <Button
+          size="sm"
+          onClick={handleApprove}
+          disabled={isPending}
+        >
+          <Check className="h-4 w-4 [stroke-width:1.7]" />
+          Genehmigen
+        </Button>
+      </div>
+    </div>
   );
 }

src/app/dashboard/kalender/_components/termin-list.tsx

@@ -1,19 +1,24 @@
 "use client";
 
+import { useState, useTransition } from "react";
 import { DutyAssignmentStatus, TerminStatus, TerminType } from "@prisma/client";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { AlertTriangle, AlignLeft, Calendar, Clock, WashingMachine } from "lucide-react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { MitbringselList } from "./mitbringsel-list";
-import { toggleMitbringselList } from "../actions";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { useTransition } from "react";
+import {
+  AlertTriangle,
+  Calendar,
+  Clock,
+  MapPin,
+  MoreHorizontal,
+  WashingMachine,
+  Trash2,
+  ShieldAlert,
+} from "lucide-react";
 import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -21,7 +26,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogFooter,
 } from "@/components/ui/dialog";
+import { AdminTerminModal } from "./admin-termin-modal";
+import { TerminRequestModal } from "./termin-request-modal";
+import { MitbringselList } from "./mitbringsel-list";
+import { deleteTerminAdmin } from "../actions";
 
 export type TerminListItemDto = {
   kind: "termin";
@@ -53,9 +63,21 @@ export type DutyCalendarItemDto = {
   status: DutyAssignmentStatus;
   startDate: Date;
   endDate: Date;
+  isOwn: boolean;
 };
 
-export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto;
+export type NotdienstCalendarItemDto = {
+  kind: "notdienst";
+  id: string;
+  title: string;
+  familyName: string;
+  childName: string;
+  isOwn: boolean;
+  startDate: Date;
+  endDate: Date;
+};
+
+export type CalendarListItemDto = TerminListItemDto | DutyCalendarItemDto | NotdienstCalendarItemDto;
 
 export function TerminList({
   termine,
@@ -68,68 +90,126 @@ export function TerminList({
 }) {
   if (termine.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center animate-in fade-in-50">
-        <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
-          <Calendar className="h-10 w-10 text-muted-foreground mb-4" />
-          <h3 className="mt-4 text-lg font-semibold">Keine Termine</h3>
-          <p className="mb-4 mt-2 text-sm text-muted-foreground">
-            Es stehen aktuell keine Termine an.
+      <Card>
+        <CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <Calendar className="h-6 w-6 [stroke-width:1.7]" />
+          </div>
+          <h3 className="mt-5 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+            Keine Termine in diesem Zeitraum
+          </h3>
+          <p className="mt-2 max-w-md text-sm leading-6 text-[var(--ink-soft)]">
+            Lege den ersten Termin an, damit Eltern planen können.
           </p>
-        </div>
-      </div>
+          <div className="mt-5">
+            {isAdmin ? (
+              <AdminTerminModal triggerLabel="+ Termin anlegen" triggerClassName="" />
+            ) : (
+              <TerminRequestModal
+                triggerLabel="+ Termin anlegen"
+                triggerVariant="default"
+                triggerClassName=""
+              />
+            )}
+          </div>
+        </CardContent>
+      </Card>
     );
   }
 
+  const groups = groupByMonth(termine);
+
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-      {termine.map((termin) => (
-        termin.kind === "duty" ? (
-          <DutyCard key={`duty-${termin.id}`} duty={termin} />
-        ) : (
-          <TerminCard
-            key={`termin-${termin.id}`}
-            termin={termin}
-            userId={userId}
-            isAdmin={isAdmin}
-          />
-        )
+    <div className="space-y-8">
+      {groups.map((group) => (
+        <section key={group.key}>
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+              {group.label}
+            </h2>
+            <span className="rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)] tabular-nums">
+              {group.items.length} {group.items.length === 1 ? "Termin" : "Termine"}
+            </span>
+          </div>
+          <Card className="overflow-hidden p-0">
+            <div className="divide-y divide-[var(--hairline-soft)]">
+              {group.items.map((item) =>
+                item.kind === "duty" ? (
+                  <DutyRow key={`duty-${item.id}`} duty={item} isAdmin={isAdmin} />
+                ) : item.kind === "notdienst" ? (
+                  <NotdienstRow key={`notdienst-${item.id}`} notdienst={item} isAdmin={isAdmin} />
+                ) : (
+                  <TerminRow key={`termin-${item.id}`} termin={item} userId={userId} isAdmin={isAdmin} />
+                ),
+              )}
+            </div>
+          </Card>
+        </section>
       ))}
     </div>
   );
 }
 
-function DutyCard({ duty }: { duty: DutyCalendarItemDto }) {
+function DutyRow({ duty, isAdmin }: { duty: DutyCalendarItemDto; isAdmin: boolean }) {
+  const color = duty.isOwn ? "oklch(0.60 0.16 160)" : "oklch(0.75 0.08 160)";
+  const [menuOpen, setMenuOpen] = useState(false);
+
   return (
-    <Card className="flex flex-col overflow-hidden border-emerald-200 bg-emerald-50/60">
-      <CardHeader className="pb-3">
-        <div className="mb-2 flex items-start justify-between gap-2">
-          <Badge className="border-transparent bg-emerald-600 text-white hover:bg-emerald-700">
-            Elterndienst
-          </Badge>
-        </div>
-        <CardTitle className="line-clamp-2 leading-tight">
+    <div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
+      <div className="absolute inset-y-3 left-0 w-[3px] rounded-r-full" style={{ backgroundColor: color }} />
+      <DateTile date={duty.startDate} />
+      <div className="min-w-0">
+        <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
           {duty.title}
-        </CardTitle>
-        <CardDescription className="mt-1 flex items-center gap-1 text-sm">
-          <Clock className="h-3.5 w-3.5" />
+        </h3>
+        <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
+          <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
           {format(duty.startDate, "dd.MM.", { locale: de })} -{" "}
           {format(duty.endDate, "dd.MM.yyyy", { locale: de })}
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="flex-1 pb-4">
-        <div className="flex items-start gap-2 text-sm text-emerald-900">
-          <WashingMachine className="mt-0.5 h-4 w-4 shrink-0" />
-          <p>
-            Eingeteilt: <span className="font-medium">{duty.familyName}</span>
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+          <WashingMachine className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
+          {duty.familyName}
+        </p>
+      </div>
+      <div className="flex items-center gap-2 relative">
+        <CategoryPill color={color}>
+          {duty.isOwn ? "Mein Elterndienst" : "Elterndienst"}
+        </CategoryPill>
+        {isAdmin ? (
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Mehr Optionen"
+              onClick={(e) => {
+                e.stopPropagation();
+                setMenuOpen(!menuOpen);
+              }}
+            >
+              <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+            </Button>
+            {menuOpen && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(false)} />
+                <div className="absolute right-0 mt-1 w-56 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
+                  <a
+                    href="/dashboard/admin/dienste"
+                    className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Dienst im Planer bearbeiten
+                  </a>
+                </div>
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="w-9 h-9" />
+        )}
+      </div>
+    </div>
   );
 }
-
-function TerminCard({
+function TerminRow({
   termin,
   userId,
   isAdmin,
@@ -138,179 +218,252 @@ function TerminCard({
   userId: string;
   isAdmin: boolean;
 }) {
-  const [isPending, startTransition] = useTransition();
+  const color = getTypeColor(termin.type);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [isDeleting, startDeleteTransition] = useTransition();
 
-  const handleToggleMitbringsel = (enabled: boolean) => {
-    startTransition(async () => {
-      const result = await toggleMitbringselList(termin.id, enabled);
-      if (result.error) {
-        toast.error(result.error);
+  const handleDeleteConfirm = () => {
+    startDeleteTransition(async () => {
+      const res = await deleteTerminAdmin(termin.id);
+      if (res.error) {
+        toast.error(res.error);
       } else {
-        toast.success(
-          enabled
-            ? "Mitbring-Liste aktiviert"
-            : "Mitbring-Liste deaktiviert"
-        );
+        toast.success("Termin wurde erfolgreich gelöscht.");
+        setDeleteOpen(false);
       }
     });
   };
 
   return (
-    <Card className="flex flex-col overflow-hidden relative">
-      {termin.status === TerminStatus.PENDING && (
-        <div className="absolute top-0 right-0 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg z-10">
-          Ausstehend
-        </div>
-      )}
-      <CardHeader className="pb-3">
-        <div className="flex justify-between items-start mb-2 gap-2">
-          <Badge variant={getBadgeVariant(termin.type)} className={getBadgeColor(termin.type)}>
-            {getTypeLabel(termin.type)}
-          </Badge>
-        </div>
-        <CardTitle className="line-clamp-2 leading-tight">{termin.title}</CardTitle>
-        <CardDescription className="flex items-center gap-1 mt-1 text-sm">
-          <Clock className="h-3.5 w-3.5" />
-          {format(termin.startDate, "PP", { locale: de })}
-          {!termin.allDay && (
-            <>
-              {" • "}
-              {format(termin.startDate, "p", { locale: de })} -{" "}
-              {format(termin.endDate, "p", { locale: de })}
-            </>
-          )}
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="flex-1 pb-4">
-        {termin.description && (
-          <div className="flex items-start gap-2 text-sm text-muted-foreground mt-2">
-            <AlignLeft className="h-4 w-4 shrink-0 mt-0.5" />
-            <p className="line-clamp-3 whitespace-pre-wrap">{termin.description}</p>
-          </div>
-        )}
-
-        <TerminDetailDialog termin={termin} />
-
-        {/* Admin Toggle for Mitbringsel-List */}
-        {isAdmin && termin.status === TerminStatus.CONFIRMED && (
-          <div className="flex items-center space-x-2 mt-6 pt-4 border-t">
-            <Switch
-              id={`mitbringsel-${termin.id}`}
-              checked={termin.mitbringselListEnabled}
-              onCheckedChange={handleToggleMitbringsel}
-              disabled={isPending}
-            />
-            <Label htmlFor={`mitbringsel-${termin.id}`} className="text-xs">
-              Mitbring-Liste aktiv
-            </Label>
-          </div>
-        )}
-
-        {/* Mitbringsel-List UI */}
-        {termin.mitbringselListEnabled && termin.status === TerminStatus.CONFIRMED && (
-          <div className="mt-4">
-            <MitbringselList
-              terminId={termin.id}
-              items={termin.mitbringselItems || []}
-              currentUserId={userId}
-              isAdmin={isAdmin}
-            />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-function TerminDetailDialog({ termin }: { termin: TerminListItemDto }) {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="mt-4">
-          Details
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{termin.title}</DialogTitle>
-          <DialogDescription>
-            {format(termin.startDate, "PP", { locale: de })}
-            {!termin.allDay &&
-              ` · ${format(termin.startDate, "p", { locale: de })} - ${format(
-                termin.endDate,
-                "p",
-                { locale: de },
-              )}`}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="grid gap-4">
-          <Badge variant={getBadgeVariant(termin.type)} className={getBadgeColor(termin.type)}>
-            {getTypeLabel(termin.type)}
-          </Badge>
-
-          {termin.description ? (
-            <p className="whitespace-pre-wrap text-sm text-muted-foreground">
-              {termin.description}
-            </p>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              Keine Beschreibung hinterlegt.
-            </p>
-          )}
-
-          {termin.participantInfo && termin.showParticipantInfo && (
-            <div className="rounded-md border border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-950">
-              <div className="mb-1 flex items-center gap-2 font-medium">
-                <AlertTriangle className="h-4 w-4 text-yellow-700" />
-                Wichtiger Hinweis für Teilnehmer
-              </div>
-              <p className="whitespace-pre-wrap">{termin.participantInfo}</p>
+    <>
+      <Dialog>
+        <div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
+          <div className="absolute inset-y-3 left-0 w-[3px] rounded-r-full" style={{ backgroundColor: color }} />
+          <DateTile date={termin.startDate} />
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+                {termin.title}
+              </h3>
+              {termin.status === TerminStatus.PENDING && (
+                <Badge variant="warning">Ausstehend</Badge>
+              )}
             </div>
-          )}
+            <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
+              <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
+              {formatTerminTime(termin)}
+              <MapPin className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
+              Kita
+            </p>
+          </div>
+          <div className="flex items-center gap-2 relative">
+            <CategoryPill color={color}>{getTypeLabel(termin.type)}</CategoryPill>
+            <DialogTrigger asChild>
+              <Button variant="ghost" size="sm">
+                Details
+              </Button>
+            </DialogTrigger>
+            {isAdmin ? (
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Mehr Optionen"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setMenuOpen(!menuOpen);
+                  }}
+                >
+                  <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+                </Button>
+                {menuOpen && (
+                  <>
+                    <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(false)} />
+                    <div className="absolute right-0 mt-1 w-48 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
+                      <AdminTerminModal
+                        existingTermin={termin}
+                        triggerLabel="Bearbeiten"
+                        triggerVariant="ghost"
+                        triggerClassName="flex w-full items-center justify-start rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)] font-normal h-auto bg-transparent border-0"
+                      />
+                      <button
+                        type="button"
+                        className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--danger)] hover:bg-[var(--danger-soft)] text-left font-normal"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setMenuOpen(false);
+                          setDeleteOpen(true);
+                        }}
+                      >
+                        Löschen
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : (
+              <div className="w-9 h-9" />
+            )}
+          </div>
         </div>
-      </DialogContent>
-    </Dialog>
+
+        <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{termin.title}</DialogTitle>
+            <DialogDescription>
+              {format(termin.startDate, "PP", { locale: de })}
+              {!termin.allDay &&
+                ` · ${format(termin.startDate, "p", { locale: de })} - ${format(
+                  termin.endDate,
+                  "p",
+                  { locale: de },
+                )}`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4">
+            <div className="flex">
+              <CategoryPill color={color}>{getTypeLabel(termin.type)}</CategoryPill>
+            </div>
+
+            {termin.description ? (
+              <p className="whitespace-pre-wrap text-sm leading-6 text-[var(--ink-soft)]">
+                {termin.description}
+              </p>
+            ) : (
+              <p className="text-sm italic text-[var(--ink-faint)]">
+                Keine Beschreibung hinterlegt.
+              </p>
+            )}
+
+            {termin.participantInfo && termin.showParticipantInfo && (
+              <div className="rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4 text-sm text-[var(--ink)]">
+                <div className="mb-1 flex items-center gap-2 font-medium">
+                  <AlertTriangle className="h-4 w-4 text-[var(--warn)] [stroke-width:1.7]" />
+                  Wichtiger Hinweis für Teilnehmer
+                </div>
+                <p className="whitespace-pre-wrap">{termin.participantInfo}</p>
+              </div>
+            )}
+
+            {termin.mitbringselListEnabled && (
+              <div className="mt-3 border-t border-[var(--hairline-soft)] pt-3">
+                <MitbringselList
+                  terminId={termin.id}
+                  items={termin.mitbringselItems || []}
+                  currentUserId={userId}
+                  isAdmin={isAdmin}
+                />
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Termin unwiderruflich löschen?</DialogTitle>
+            <DialogDescription>
+              Möchtest du den Termin &ldquo;{termin.title}&rdquo; wirklich löschen? Alle
+              zugehörigen Teilnahmen und Mitbringsel-Einträge gehen verloren.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setDeleteOpen(false)}
+              disabled={isDeleting}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Wird gelöscht..." : "Löschen"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
 
-function getBadgeVariant(type: TerminType): "default" | "secondary" | "destructive" | "outline" {
-  switch (type) {
-    case TerminType.KITA_FEST:
-    case TerminType.MITMACH_TAG:
-      return "default";
-    case TerminType.SCHLIESSTAG:
-    case TerminType.TEAMTAG:
-      return "destructive";
-    case TerminType.GEBURTSTAG_INTERN:
-    case TerminType.GEBURTSTAG_EXTERN:
-    case TerminType.ELTERNABEND:
-    case TerminType.MITGLIEDERVERSAMMLUNG:
-    case TerminType.ELTERNCAFE:
-      return "secondary";
-    default:
-      return "outline";
-  }
+function DateTile({ date }: { date: Date }) {
+  return (
+    <div className="flex h-14 w-14 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)]">
+      <span className="text-[22px] font-medium leading-none tracking-[-0.02em] text-[var(--ink)] tabular-nums">
+        {format(date, "d", { locale: de })}
+      </span>
+      <span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.08em]">
+        {format(date, "EEE", { locale: de })}
+      </span>
+    </div>
+  );
 }
 
-function getBadgeColor(type: TerminType): string {
+function CategoryPill({
+  color,
+  children,
+}: {
+  color: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)]"
+      style={{ color }}
+    >
+      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: color }} />
+      {children}
+    </span>
+  );
+}
+
+function groupByMonth(items: CalendarListItemDto[]) {
+  const groups = new Map<string, { key: string; label: string; items: CalendarListItemDto[] }>();
+
+  items.forEach((item) => {
+    const key = format(item.startDate, "yyyy-MM");
+    const label = format(item.startDate, "MMMM yyyy", { locale: de });
+    const group = groups.get(key) ?? { key, label, items: [] };
+    group.items.push(item);
+    groups.set(key, group);
+  });
+
+  return Array.from(groups.values());
+}
+
+function formatTerminTime(termin: TerminListItemDto) {
+  if (termin.allDay) return "ganztägig";
+  return `${format(termin.startDate, "HH:mm", { locale: de })} - ${format(
+    termin.endDate,
+    "HH:mm",
+    { locale: de },
+  )}`;
+}
+
+function getTypeColor(type: TerminType): string {
   switch (type) {
     case TerminType.KITA_FEST:
     case TerminType.MITMACH_TAG:
-      return "bg-amber-500 hover:bg-amber-600 text-white border-transparent";
+      return "var(--good)";
     case TerminType.SCHLIESSTAG:
     case TerminType.TEAMTAG:
-      return "bg-rose-500 hover:bg-rose-600 text-white border-transparent";
+      return "var(--danger)";
     case TerminType.GEBURTSTAG_INTERN:
     case TerminType.GEBURTSTAG_EXTERN:
-      return "bg-blue-500 hover:bg-blue-600 text-white border-transparent";
+      return "oklch(0.50 0.10 320)";
     case TerminType.ELTERNABEND:
     case TerminType.MITGLIEDERVERSAMMLUNG:
     case TerminType.ELTERNCAFE:
-      return "bg-purple-500 hover:bg-purple-600 text-white border-transparent";
+      return "oklch(0.50 0.10 280)";
     default:
-      return "bg-slate-200 text-slate-800 border-slate-300 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-700";
+      return "var(--ink-muted)";
   }
 }
 
@@ -323,7 +476,7 @@ function getTypeLabel(type: TerminType): string {
     case TerminType.SCHLIESSTAG:
       return "Schließtag";
     case TerminType.TEAMTAG:
-      return "Teamtag (Kita geschlossen)";
+      return "Teamtag";
     case TerminType.ELTERNABEND:
       return "Elternabend";
     case TerminType.MITGLIEDERVERSAMMLUNG:
@@ -331,10 +484,71 @@ function getTypeLabel(type: TerminType): string {
     case TerminType.ELTERNCAFE:
       return "Elterncafe";
     case TerminType.GEBURTSTAG_INTERN:
-      return "Geburtstag (Intern)";
+      return "Geburtstag";
     case TerminType.GEBURTSTAG_EXTERN:
-      return "Raumanfrage (Extern)";
+      return "Raumanfrage";
     default:
       return "Sonstiges";
   }
 }
+
+function NotdienstRow({ notdienst, isAdmin }: { notdienst: NotdienstCalendarItemDto; isAdmin: boolean }) {
+  const color = notdienst.isOwn ? "oklch(0.60 0.18 45)" : "oklch(0.75 0.10 50)";
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
+      <div className="absolute inset-y-3 left-0 w-[3px] rounded-r-full" style={{ backgroundColor: color }} />
+      <DateTile date={notdienst.startDate} />
+      <div className="min-w-0">
+        <h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
+          {notdienst.title}
+        </h3>
+        <p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
+          <Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
+          {format(notdienst.startDate, "dd.MM.yyyy", { locale: de })} (ganztägig)
+          <span className="inline-flex items-center gap-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-[var(--ink-muted)]" />
+            Kind: {notdienst.childName}
+          </span>
+        </p>
+      </div>
+      <div className="flex items-center gap-2 relative">
+        <CategoryPill color={color}>
+          {notdienst.isOwn ? "Mein Notdienst" : "Notdienst"}
+        </CategoryPill>
+        {isAdmin ? (
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Mehr Optionen"
+              onClick={(e) => {
+                e.stopPropagation();
+                setMenuOpen(!menuOpen);
+              }}
+            >
+              <MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+            </Button>
+            {menuOpen && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(false)} />
+                <div className="absolute right-0 mt-1 w-56 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
+                  <a
+                    href="/dashboard/notdienst/plan"
+                    className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Notdienst im Planer bearbeiten
+                  </a>
+                </div>
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="w-9 h-9" />
+        )}
+      </div>
+    </div>
+  );
+}

src/app/dashboard/kalender/_components/termin-request-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import type { ComponentProps, FormEvent } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { TerminType } from "@prisma/client";
 import { CalendarPlus } from "lucide-react";
 import { toast } from "sonner";
@@ -19,17 +20,74 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { createTerminRequest } from "../actions";
 
-export function TerminRequestModal() {
-  const [open, setOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
+type TerminRequestFormState = {
+  title: string;
+  type: TerminType;
+  startDate: string;
+  endDate: string;
+  allDay: boolean;
+};
+
+const initialFormState: TerminRequestFormState = {
+  title: "",
+  type: TerminType.KITA_FEST,
+  startDate: "",
+  endDate: "",
+  allDay: false,
+};
+
+type TerminRequestModalProps = {
+  triggerLabel?: string;
+  triggerVariant?: ComponentProps<typeof Button>["variant"];
+  triggerClassName?: string;
+};
+
+export function TerminRequestModal({
+  triggerLabel = "Termin anfragen",
+  triggerVariant = "ghost",
+  triggerClassName = "gap-2",
+}: TerminRequestModalProps) {
+  const [open, setOpen] = useState(false);
+  const [formState, setFormState] = useState<TerminRequestFormState>(initialFormState);
+  const [isPending, startTransition] = useTransition();
+  const minDateTime = useMemo(() => getLocalDateTimeInputValue(new Date()), []);
+  const minEndDateTime = formState.startDate || minDateTime;
+
+  const updateField = <TKey extends keyof TerminRequestFormState>(
+    key: TKey,
+    value: TerminRequestFormState[TKey],
+  ) => {
+    setFormState((current) => {
+      const next = { ...current, [key]: value };
+      if (key === "startDate" && typeof value === "string" && next.endDate && next.endDate < value) {
+        next.endDate = value;
+      }
+      return next;
+    });
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!formState.startDate || !formState.endDate) {
+      toast.error("Bitte Start und Ende ausfüllen.");
+      return;
+    }
+    if (formState.startDate < minDateTime) {
+      toast.error("Der Startzeitpunkt darf nicht in der Vergangenheit liegen.");
+      return;
+    }
+    if (formState.endDate < formState.startDate) {
+      toast.error("Das Ende darf nicht vor dem Start liegen.");
+      return;
+    }
 
-  const handleAction = (formData: FormData) => {
     const data = {
-      title: formData.get("title") as string,
-      type: formData.get("type") as TerminType,
-      startDate: new Date(formData.get("startDate") as string).toISOString(),
-      endDate: new Date(formData.get("endDate") as string).toISOString(),
-      allDay: formData.get("allDay") === "on",
+      title: formState.title,
+      type: formState.type,
+      startDate: new Date(formState.startDate).toISOString(),
+      endDate: new Date(formState.endDate).toISOString(),
+      allDay: formState.allDay,
     };
 
     startTransition(async () => {
@@ -38,6 +96,7 @@ export function TerminRequestModal() {
         toast.error(res.error);
       } else {
         toast.success("Terminanfrage wurde erfolgreich gestellt!");
+        setFormState(initialFormState);
         setOpen(false);
       }
     });
@@ -46,13 +105,13 @@ export function TerminRequestModal() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" className="gap-2">
-          <CalendarPlus className="h-4 w-4" />
-          Termin anfragen
+        <Button variant={triggerVariant} className={triggerClassName}>
+          <CalendarPlus className="h-4 w-4 [stroke-width:1.7]" />
+          {triggerLabel}
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <form action={handleAction}>
+        <form onSubmit={handleSubmit}>
           <DialogHeader>
             <DialogTitle>Termin anfragen</DialogTitle>
             <DialogDescription>
@@ -64,7 +123,14 @@ export function TerminRequestModal() {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="title">Titel</Label>
-              <Input id="title" name="title" required placeholder="z.B. Geburtstag von Mia" />
+              <Input
+                id="title"
+                name="title"
+                required
+                placeholder="z.B. Geburtstag von Mia"
+                value={formState.title}
+                onChange={(event) => updateField("title", event.target.value)}
+              />
             </div>
 
             <div className="grid gap-2">
@@ -72,7 +138,9 @@ export function TerminRequestModal() {
               <select
                 id="type"
                 name="type"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                value={formState.type}
+                className="flex h-10 w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2 text-[13.5px] text-[var(--ink)] ring-offset-[var(--surface)] transition-colors hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50"
+                onChange={(event) => updateField("type", event.target.value as TerminType)}
                 required
               >
                 <option value={TerminType.KITA_FEST}>Kita-Fest</option>
@@ -91,16 +159,39 @@ export function TerminRequestModal() {
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="startDate">Start</Label>
-                <Input id="startDate" name="startDate" type="datetime-local" required />
+                <Input
+                  id="startDate"
+                  name="startDate"
+                  type="datetime-local"
+                  min={minDateTime}
+                  value={formState.startDate}
+                  onChange={(event) => updateField("startDate", event.target.value)}
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="endDate">Ende</Label>
-                <Input id="endDate" name="endDate" type="datetime-local" required />
+                <Input
+                  id="endDate"
+                  name="endDate"
+                  type="datetime-local"
+                  min={minEndDateTime}
+                  value={formState.endDate}
+                  onChange={(event) => updateField("endDate", event.target.value)}
+                  required
+                />
               </div>
             </div>
 
             <div className="flex items-center gap-2 mt-2">
-              <input type="checkbox" id="allDay" name="allDay" className="rounded border-gray-300" />
+              <input
+                type="checkbox"
+                id="allDay"
+                name="allDay"
+                checked={formState.allDay}
+                className="rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
+                onChange={(event) => updateField("allDay", event.target.checked)}
+              />
               <Label htmlFor="allDay" className="font-normal cursor-pointer">
                 Ganztägiger Termin
               </Label>
@@ -120,3 +211,10 @@ export function TerminRequestModal() {
     </Dialog>
   );
 }
+
+function getLocalDateTimeInputValue(date: Date) {
+  const localDate = new Date(date);
+  localDate.setSeconds(0, 0);
+  const offset = localDate.getTimezoneOffset() * 60_000;
+  return new Date(localDate.getTime() - offset).toISOString().slice(0, 16);
+}

src/app/dashboard/kalender/actions.ts

@@ -27,6 +27,12 @@ const terminSchema = z.object({
 function buildTerminData(data: z.infer<typeof terminSchema>) {
   const startDate = new Date(data.startDate);
   const endDate = new Date(data.endDate);
+  const now = new Date();
+  now.setSeconds(0, 0);
+
+  if (startDate < now) {
+    return { error: "Der Startzeitpunkt darf nicht in der Vergangenheit liegen." };
+  }
 
   if (endDate < startDate) {
     return { error: "Das Enddatum darf nicht vor dem Startdatum liegen." };
@@ -329,3 +335,28 @@ export async function deleteMitbringsel(itemId: string) {
     return { error: "Ein Fehler ist aufgetreten." };
   }
 }
+
+export async function deleteTerminAdmin(terminId: string) {
+  const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
+  const kitaId = session.user.kitaId;
+  if (!kitaId) {
+    return { error: "Kein Mandant zugeordnet." };
+  }
+
+  try {
+    await prisma.termin.delete({
+      where: {
+        id: terminId,
+        kitaId,
+      },
+    });
+
+    revalidatePath("/dashboard/kalender");
+    revalidatePath("/dashboard/admin/kalender");
+    revalidatePath("/dashboard");
+    return { success: true };
+  } catch (error) {
+    console.error("Fehler beim Löschen des Termins:", error);
+    return { error: "Termin konnte nicht gelöscht werden." };
+  }
+}

src/app/dashboard/kalender/page.tsx

@@ -2,20 +2,25 @@ import {
   DutyAssignmentStatus,
   EventParticipationStatus,
   TerminStatus,
+  TerminType,
   UserRole,
 } from "@prisma/client";
+import { HelpCircle } from "lucide-react";
 
 import { requireKitaSession } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
 import { AdminTerminModal } from "./_components/admin-termin-modal";
 import { PendingAnfragen, type PendingTerminDto } from "./_components/pending-anfragen";
-import { TerminList, type CalendarListItemDto } from "./_components/termin-list";
+import { type CalendarListItemDto } from "./_components/termin-list";
 import { TerminRequestModal } from "./_components/termin-request-modal";
+import { CalendarOverviewClient } from "./_components/calendar-overview-client";
+
+export const metadata = { title: "Terminkalender · Kita-Planer" };
 
 export default async function KalenderPage({
   searchParams,
 }: {
-  searchParams: { tab?: string };
+  searchParams: Promise<{ tab?: string }>;
 }) {
   const session = await requireKitaSession();
   const isAdmin =
@@ -23,7 +28,9 @@ export default async function KalenderPage({
     session.user.role === UserRole.KOORDINATOR;
   const familyIdForParticipation = session.user.familyId ?? "__no_family__";
 
-  const currentTab = searchParams.tab || "übersicht";
+  const resolvedSearchParams = await searchParams;
+  const currentTab = resolvedSearchParams.tab || "übersicht";
+  const now = new Date();
 
   const confirmedTermineRows = await prisma.termin.findMany({
     where: {
@@ -120,13 +127,14 @@ export default async function KalenderPage({
     where: {
       kitaId: session.user.kitaId,
       status: DutyAssignmentStatus.PLANNED,
-      endDate: { gte: new Date() },
+      endDate: { gte: now },
     },
     select: {
       id: true,
       startDate: true,
       endDate: true,
       status: true,
+      familyId: true,
       dutyType: {
         select: {
           name: true,
@@ -141,6 +149,32 @@ export default async function KalenderPage({
     orderBy: { startDate: "asc" },
   });
 
+  const notdienstAssignmentRows = await prisma.notdienstAssignment.findMany({
+    where: {
+      kitaId: session.user.kitaId,
+      plan: {
+        status: "PUBLISHED",
+      },
+    },
+    select: {
+      id: true,
+      date: true,
+      child: {
+        select: {
+          firstName: true,
+          lastName: true,
+          familyId: true,
+          family: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+    },
+    orderBy: { date: "asc" },
+  });
+
   const allUserTermine: CalendarListItemDto[] = [
     ...confirmedTermineRows.map((termin) => ({
       ...termin,
@@ -162,20 +196,41 @@ export default async function KalenderPage({
             participation.status === EventParticipationStatus.ATTENDING,
         ),
     })),
-    ...dutyAssignmentRows.map((assignment) => ({
-      kind: "duty" as const,
-      id: assignment.id,
-      title: assignment.dutyType.name,
-      familyName: assignment.family.name,
-      status: assignment.status,
-      startDate: assignment.startDate,
-      endDate: assignment.endDate,
-    })),
+    ...dutyAssignmentRows.map((assignment) => {
+      const isOwn = assignment.familyId === familyIdForParticipation;
+      return {
+        kind: "duty" as const,
+        id: assignment.id,
+        title: isOwn
+          ? `Mein Elterndienst (${assignment.dutyType.name})`
+          : `${assignment.dutyType.name} (${assignment.family.name})`,
+        familyName: assignment.family.name,
+        status: assignment.status,
+        startDate: assignment.startDate,
+        endDate: assignment.endDate,
+        isOwn,
+      };
+    }),
+    ...notdienstAssignmentRows.map((assignment) => {
+      const isOwn = assignment.child.familyId === familyIdForParticipation;
+      return {
+        kind: "notdienst" as const,
+        id: assignment.id,
+        title: isOwn
+          ? `Mein Notdienst (${assignment.child.firstName})`
+          : `Notdienst (${assignment.child.family.name})`,
+        familyName: assignment.child.family.name,
+        childName: `${assignment.child.firstName} ${assignment.child.lastName}`,
+        isOwn,
+        startDate: assignment.date,
+        endDate: assignment.date,
+      };
+    }),
   ].sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
 
   let allPendingTermine: PendingTerminDto[] = [];
   if (isAdmin) {
-    allPendingTermine = await prisma.termin.findMany({
+    const pendingRows = await prisma.termin.findMany({
       where: {
         kitaId: session.user.kitaId,
         status: TerminStatus.PENDING,
@@ -184,6 +239,8 @@ export default async function KalenderPage({
         id: true,
         title: true,
         startDate: true,
+        createdAt: true,
+        type: true,
         allDay: true,
         createdBy: {
           select: {
@@ -194,67 +251,74 @@ export default async function KalenderPage({
       },
       orderBy: { createdAt: "desc" },
     });
+    allPendingTermine = pendingRows.map((termin) => ({
+      ...termin,
+      ageInDays: Math.floor(
+        (now.getTime() - termin.createdAt.getTime()) / (1000 * 60 * 60 * 24),
+      ),
+    }));
   }
 
   return (
-    <div className="flex h-full flex-col gap-6 p-6">
-      <div className="flex items-center justify-between">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:items-start max-[900px]:flex-col">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Terminkalender</h1>
-          <p className="text-muted-foreground">
-            Alle anstehenden Termine, Feste und Schließtage im Überblick.
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            TERMINKALENDER
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Was steht{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              an
+            </em>
+            ?
+          </h1>
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
+            Alle anstehenden Termine, Feste, Dienste und Schließtage im
+            Überblick.
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
           <TerminRequestModal />
+          <span className="group relative inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink-muted)]">
+            <HelpCircle className="h-4 w-4 [stroke-width:1.7]" />
+            <span className="pointer-events-none absolute right-0 top-11 z-30 hidden w-72 rounded-lg bg-[oklch(0.22_0.015_45)] px-3 py-2 text-left text-xs leading-5 text-white shadow-lg group-hover:block">
+              Anfragen müssen vom Vorstand bestätigt werden, direkte Anlage
+              erscheint sofort im Kalender.
+            </span>
+          </span>
           {isAdmin && <AdminTerminModal />}
         </div>
-      </div>
+      </header>
 
       {isAdmin ? (
-        <div className="flex flex-col gap-4">
-          <div className="flex gap-4 border-b">
-            <a
-              href="/dashboard/kalender?tab=übersicht"
-              className={`pb-2 text-sm font-medium transition-colors hover:text-primary ${
-                currentTab === "übersicht"
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground"
-              }`}
-            >
-              Übersicht
-            </a>
-            <a
-              href="/dashboard/kalender?tab=anfragen"
-              className={`flex items-center gap-2 pb-2 text-sm font-medium transition-colors hover:text-primary ${
-                currentTab === "anfragen"
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground"
-              }`}
-            >
-              Ausstehende Anfragen
-              {allPendingTermine.length > 0 && (
-                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-                  {allPendingTermine.length}
-                </span>
-              )}
-            </a>
-          </div>
+        <div className="flex flex-col gap-5">
+          <TabBar
+            currentTab={currentTab}
+            overviewCount={allUserTermine.length}
+            pendingCount={allPendingTermine.length}
+          />
 
-          <div className="pt-2">
+          <div>
             {currentTab === "übersicht" ? (
-              <TerminList
+              <CalendarOverviewClient
                 termine={allUserTermine}
                 userId={session.user.id}
                 isAdmin={isAdmin}
               />
-            ) : (
+            ) : currentTab === "anfragen" ? (
               <PendingAnfragen termine={allPendingTermine} />
+            ) : (
+              <CalendarOverviewClient
+                termine={[]}
+                userId={session.user.id}
+                isAdmin={isAdmin}
+              />
             )}
           </div>
         </div>
       ) : (
-        <TerminList
+        <CalendarOverviewClient
           termine={allUserTermine}
           userId={session.user.id}
           isAdmin={isAdmin}
@@ -263,3 +327,83 @@ export default async function KalenderPage({
     </div>
   );
 }
+
+
+
+function TabBar({
+  currentTab,
+  overviewCount,
+  pendingCount,
+}: {
+  currentTab: string;
+  overviewCount: number;
+  pendingCount: number;
+}) {
+  return (
+    <div className="flex border-b border-[var(--hairline)]">
+      <TabLink
+        href="/dashboard/kalender?tab=übersicht"
+        active={currentTab === "übersicht"}
+        count={overviewCount}
+      >
+        Übersicht
+      </TabLink>
+      <TabLink
+        href="/dashboard/kalender?tab=anfragen"
+        active={currentTab === "anfragen"}
+        count={pendingCount}
+        attention={pendingCount > 0}
+      >
+        Ausstehende Anfragen
+      </TabLink>
+      <TabLink
+        href="/dashboard/kalender?tab=vergangen"
+        active={currentTab === "vergangen"}
+      >
+        Vergangene
+      </TabLink>
+    </div>
+  );
+}
+
+function TabLink({
+  href,
+  active,
+  count,
+  attention,
+  children,
+}: {
+  href: string;
+  active: boolean;
+  count?: number;
+  attention?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      className={[
+        "-mb-px inline-flex h-11 items-center gap-2 border-b-2 px-1.5 text-sm transition first:pl-0",
+        active
+          ? "border-[var(--accent)] font-semibold text-[var(--ink)]"
+          : "border-transparent font-medium text-[var(--ink-soft)] hover:text-[var(--ink)]",
+      ].join(" ")}
+    >
+      {children}
+      {typeof count === "number" && (
+        <span
+          className={[
+            "rounded-full px-2 py-0.5 text-[11px] font-semibold tabular-nums",
+            attention
+              ? "bg-[var(--accent-deep)] text-[oklch(0.98_0.005_45)]"
+              : "border border-[var(--hairline)] bg-[var(--surface-2)] text-[var(--ink-soft)]",
+          ].join(" ")}
+        >
+          {count}
+        </span>
+      )}
+    </a>
+  );
+}
+
+

src/app/dashboard/layout.tsx

@@ -1,12 +1,9 @@
 import type { Metadata } from "next";
-import { Baby, LogOut } from "lucide-react";
 
 import { signOut } from "@/auth";
 import { requireKitaSession } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { SidebarNav } from "@/components/dashboard/sidebar-nav";
+import { DashboardShell } from "@/components/dashboard/dashboard-shell";
 
 export const metadata: Metadata = {
   robots: {
@@ -16,11 +13,11 @@ export const metadata: Metadata = {
 };
 
 // =====================================================================
-// Dashboard-Layout · Linke Sidebar
+// Dashboard-Layout · Responsive App Shell
 // ---------------------------------------------------------------------
 // Server Component: liest kitaId aus der Session, holt den Kita-Namen
-// aus der DB und rendert das App-Shell (Sidebar + main content area).
-// Der eigentliche Seiteninhalt kommt via {children} rein.
+// aus der DB und rendert die responsive DashboardShell (mit Desktop-Sidebar
+// und Mobile-Drawer).
 // =====================================================================
 
 export default async function DashboardLayout({
@@ -34,63 +31,22 @@ export default async function DashboardLayout({
     where: { id: session.user.kitaId },
     select: { name: true },
   });
+  const displayName = session.user.name ?? session.user.email ?? "Kita-Planer";
+
+  async function handleSignOut() {
+    "use server";
+    await signOut({ redirectTo: "/" });
+  }
 
   return (
-    <div className="flex min-h-screen bg-muted/30">
-      {/* ── Sidebar ───────────────────────────────────────────────────── */}
-      <aside className="flex w-60 shrink-0 flex-col border-r bg-background">
-        {/* Logo / Kita-Name */}
-        <div className="flex h-16 items-center gap-2.5 border-b px-5">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
-            <Baby className="h-4 w-4" />
-          </div>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold leading-none">
-              {kita.name}
-            </p>
-            <p className="mt-0.5 text-xs text-muted-foreground">Kita-Planer</p>
-          </div>
-        </div>
-
-        {/* Navigation */}
-        <div className="flex-1 overflow-y-auto py-4">
-          <SidebarNav role={session.user.role} />
-        </div>
-
-        {/* Footer: User-Info + Abmelden */}
-        <div className="border-t p-3">
-          <Separator className="mb-3" />
-          <div className="mb-2 px-3">
-            <p className="truncate text-xs font-medium">
-              {session.user.name ?? session.user.email}
-            </p>
-            <p className="truncate text-xs text-muted-foreground">
-              {session.user.role}
-            </p>
-          </div>
-          <form
-            action={async () => {
-              "use server";
-              await signOut({ redirectTo: "/" });
-            }}
-          >
-            <Button
-              type="submit"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start gap-2 text-muted-foreground"
-            >
-              <LogOut className="h-4 w-4" />
-              Abmelden
-            </Button>
-          </form>
-        </div>
-      </aside>
-
-      {/* ── Main Content ──────────────────────────────────────────────── */}
-      <main className="flex-1 overflow-y-auto">
-        {children}
-      </main>
-    </div>
+    <DashboardShell
+      kitaName={kita.name}
+      userName={displayName}
+      userRole={session.user.role}
+      signOutAction={handleSignOut}
+    >
+      {children}
+    </DashboardShell>
   );
 }
+

src/app/dashboard/news-ticker.tsx

@@ -58,12 +58,12 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
 
   return (
     <>
-      <Card className="mb-8 border-emerald-200 bg-emerald-50/60">
+      <Card className="mb-8 border-[var(--good)] bg-[var(--good-soft)]">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between gap-3">
             <div>
               <CardTitle className="flex items-center gap-2 text-lg">
-                <Megaphone className="h-5 w-5 text-emerald-700" />
+                <Megaphone className="h-5 w-5 text-[var(--good)] [stroke-width:1.7]" />
                 Schwarzes Brett
               </CardTitle>
               <CardDescription>
@@ -81,26 +81,26 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
                 key={item.id}
                 type="button"
                 onClick={() => openAnnouncement(item)}
-                className="rounded-md border bg-background p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-300 hover:shadow-md"
+                className="rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-4 text-left transition hover:border-[var(--accent-mid)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
               >
                 <div className="mb-3 flex items-start justify-between gap-2">
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                    <Bell className="h-3.5 w-3.5" />
+                  <div className="flex items-center gap-2 text-xs text-[var(--ink-muted)]">
+                    <Bell className="h-3.5 w-3.5 [stroke-width:1.7]" />
                     {item.createdAt}
                   </div>
                   {isUnread && (
-                    <Badge className="bg-emerald-600 text-white">NEU</Badge>
+                    <Badge variant="success">NEU</Badge>
                   )}
                 </div>
-                <h3 className="line-clamp-2 font-semibold leading-snug">
+                <h3 className="line-clamp-2 font-semibold leading-snug text-[var(--ink)]">
                   {item.title}
                 </h3>
-                <p className="mt-2 line-clamp-3 text-sm leading-6 text-muted-foreground">
+                <p className="mt-2 line-clamp-3 text-sm leading-6 text-[var(--ink-soft)]">
                   {item.content}
                 </p>
                 {item.attachments.length > 0 && (
-                  <p className="mt-3 flex items-center gap-1 text-xs font-medium text-emerald-700">
-                    <FileText className="h-3.5 w-3.5" />
+                  <p className="mt-3 flex items-center gap-1 text-xs font-medium text-[var(--accent-deep)]">
+                    <FileText className="h-3.5 w-3.5 [stroke-width:1.7]" />
                     {item.attachments.length} Anhang
                     {item.attachments.length === 1 ? "" : "e"}
                   </p>
@@ -122,7 +122,7 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
                 </DialogDescription>
               </DialogHeader>
 
-              <div className="rounded-md border bg-muted/30 p-4 text-sm">
+              <div className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4 text-sm">
                 <MarkdownContent content={selected.content} />
               </div>
 
@@ -138,7 +138,7 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
                         className="justify-start"
                       >
                         <a href={attachment.fileUrl} target="_blank" rel="noreferrer">
-                          <FileText className="h-4 w-4" />
+                          <FileText className="h-4 w-4 [stroke-width:1.7]" />
                           {attachment.fileName}
                         </a>
                       </Button>

src/app/dashboard/notdienst/actions.ts

@@ -15,11 +15,23 @@ import { getTargetMonthData } from "@/lib/date-utils";
 // Die Termine werden Round-Robin auf die Kinder aufgeteilt.
 // =====================================================================
 
+const dateKeyPattern = /^\d{4}-\d{2}-\d{2}$/;
+
 const payloadSchema = z.object({
   childrenIds: z.array(z.string()).min(1),
-  dates: z.array(z.string().datetime()), // ISO strings
+  dates: z.array(
+    z.string().regex(dateKeyPattern).refine((value) => {
+      const date = dateKeyToUtcDate(value);
+      return value === date.toISOString().slice(0, 10);
+    }),
+  ),
 });
 
+function dateKeyToUtcDate(dateKey: string) {
+  const [year, month, day] = dateKey.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, day));
+}
+
 export async function saveNotdienstAvailabilities(payloadRaw: {
   childrenIds: string[];
   dates: string[];
@@ -35,7 +47,8 @@ export async function saveNotdienstAvailabilities(payloadRaw: {
     return { error: "Ungültige Eingabedaten." };
   }
 
-  const { childrenIds, dates } = parsed.data;
+  const { childrenIds } = parsed.data;
+  const dates = Array.from(new Set(parsed.data.dates)).sort();
 
   // ── 1. Sperrfrist prüfen ───────────────────────────────────────────
   const { targetYear, targetMonth, isLocked } = getTargetMonthData();
@@ -79,9 +92,15 @@ export async function saveNotdienstAvailabilities(payloadRaw: {
   }
 
   // Termine in Date-Objekte wandeln und sortieren
-  const parsedDates = dates
-    .map((d) => new Date(d))
-    .sort((a, b) => a.getTime() - b.getTime());
+  const parsedDates = dates.map(dateKeyToUtcDate);
+  const hasOutsideTargetMonth = parsedDates.some(
+    (date) =>
+      date.getUTCFullYear() !== targetYear ||
+      date.getUTCMonth() !== targetMonth - 1,
+  );
+  if (hasOutsideTargetMonth) {
+    return { error: "Bitte wähle Termine im Zielmonat aus." };
+  }
 
   // Round-Robin Zuweisung
   const inserts: {
@@ -110,8 +129,8 @@ export async function saveNotdienstAvailabilities(payloadRaw: {
           kitaId,
           childId: { in: childrenIds },
           date: {
-            gte: new Date(targetYear, targetMonth - 1, 1),
-            lt: new Date(targetYear, targetMonth, 1),
+            gte: new Date(Date.UTC(targetYear, targetMonth - 1, 1)),
+            lt: new Date(Date.UTC(targetYear, targetMonth, 1)),
           },
         },
       });
@@ -126,7 +145,7 @@ export async function saveNotdienstAvailabilities(payloadRaw: {
     });
 
     revalidatePath("/dashboard/notdienst");
-    return { success: true };
+    return { success: true, dates };
   } catch (error) {
     console.error("Fehler beim Speichern der Notdienste:", error);
     return { error: "Ein Fehler ist aufgetreten beim Speichern der Termine." };

src/app/dashboard/notdienst/notdienst-entry.tsx

@@ -1,58 +1,29 @@
 "use client";
 
-import { useState } from "react";
-import { ArrowRight, CalendarHeart } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { NotdienstForm } from "./notdienst-form";
+import {
+  NotdienstForm,
+  type NotdienstCalendarItem,
+} from "./notdienst-form";
 
 type NotdienstEntryProps = {
-  hasAnyAvailability: boolean;
   targetYear: number;
   targetMonth: number;
   isLocked: boolean;
   requiredDaysTotal: number;
   initialSelectedDates: string[];
   childrenIds: string[];
+  calendarItems: NotdienstCalendarItem[];
 };
 
 export function NotdienstEntry({
-  hasAnyAvailability,
   targetYear,
   targetMonth,
   isLocked,
   requiredDaysTotal,
   initialSelectedDates,
   childrenIds,
+  calendarItems,
 }: NotdienstEntryProps) {
-  const [showForm, setShowForm] = useState(hasAnyAvailability);
-
-  if (!showForm) {
-    return (
-      <div className="flex min-h-[420px] items-center justify-center rounded-lg border border-dashed bg-gradient-to-b from-emerald-50/70 to-background p-8 text-center">
-        <div className="mx-auto max-w-lg">
-          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 shadow-sm">
-            <CalendarHeart className="h-10 w-10" />
-          </div>
-          <h2 className="mt-6 text-2xl font-semibold tracking-tight">
-            Willkommen beim Notdienst!
-          </h2>
-          <p className="mt-3 text-sm leading-6 text-muted-foreground">
-            Es sieht so aus, als hättest du noch keine Termine eingetragen.
-          </p>
-          <Button
-            type="button"
-            className="mt-6"
-            onClick={() => setShowForm(true)}
-          >
-            Jetzt erste Pflicht-Termine eintragen
-            <ArrowRight className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <NotdienstForm
       targetYear={targetYear}
@@ -61,6 +32,7 @@ export function NotdienstEntry({
       requiredDaysTotal={requiredDaysTotal}
       initialSelectedDates={initialSelectedDates}
       childrenIds={childrenIds}
+      calendarItems={calendarItems}
     />
   );
 }

src/app/dashboard/notdienst/notdienst-form.tsx

@@ -1,30 +1,92 @@
 "use client";
 
-import { useState, useTransition } from "react";
-import { Info, Loader2, CheckCircle2 } from "lucide-react";
-import { format } from "date-fns";
+import { useMemo, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Clock3,
+  Info,
+  Loader2,
+  LockKeyhole,
+  X,
+} from "lucide-react";
+import {
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns";
 import { de } from "date-fns/locale";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
-import { getWorkingDaysOfMonth } from "@/lib/date-utils";
-import { Button } from "@/components/ui/button";
+import { formatDateKey, getWorkingDaysOfMonth } from "@/lib/date-utils";
 import { saveNotdienstAvailabilities } from "./actions";
 
-// =====================================================================
-// NotdienstForm · Client Component
-// ---------------------------------------------------------------------
-// Erlaubt das Auswählen von N Tagen aus der Liste der Werktage des
-// Zielmonats. Speichert als Array von Datum-Strings.
-// =====================================================================
+export const notdienstEventCategories = {
+  closure: {
+    label: "Schließtag",
+    dot: "oklch(0.62 0.10 35)",
+    bg: "oklch(0.96 0.04 35)",
+    border: "oklch(0.88 0.04 35)",
+    text: "oklch(0.38 0.08 35)",
+  },
+  team: {
+    label: "Teamtag",
+    dot: "oklch(0.62 0.10 70)",
+    bg: "oklch(0.96 0.04 70)",
+    border: "oklch(0.88 0.04 70)",
+    text: "oklch(0.38 0.08 70)",
+  },
+  parents: {
+    label: "Elternabend",
+    dot: "oklch(0.62 0.10 280)",
+    bg: "oklch(0.96 0.04 280)",
+    border: "oklch(0.88 0.04 280)",
+    text: "oklch(0.38 0.08 280)",
+  },
+  social: {
+    label: "Fest",
+    dot: "oklch(0.62 0.10 155)",
+    bg: "oklch(0.96 0.04 155)",
+    border: "oklch(0.88 0.04 155)",
+    text: "oklch(0.38 0.08 155)",
+  },
+  birthday: {
+    label: "Geburtstag",
+    dot: "oklch(0.62 0.10 320)",
+    bg: "oklch(0.96 0.04 320)",
+    border: "oklch(0.88 0.04 320)",
+    text: "oklch(0.38 0.08 320)",
+  },
+} as const;
+
+type NotdienstEventCategory = keyof typeof notdienstEventCategories;
+
+export type NotdienstCalendarItem = {
+  id: string;
+  title: string;
+  category: NotdienstEventCategory;
+  startDate: Date;
+  endDate: Date;
+  allDay: boolean;
+  note: string | null;
+};
 
 interface NotdienstFormProps {
   targetYear: number;
   targetMonth: number;
   isLocked: boolean;
   requiredDaysTotal: number;
-  initialSelectedDates: string[]; // ISO Strings
+  initialSelectedDates: string[];
   childrenIds: string[];
+  calendarItems: NotdienstCalendarItem[];
 }
 
 export function NotdienstForm({
@@ -34,33 +96,44 @@ export function NotdienstForm({
   requiredDaysTotal,
   initialSelectedDates,
   childrenIds,
+  calendarItems,
 }: NotdienstFormProps) {
-  // Lokaler State für die Auswahl. Ein Datum liegt immer als ISO-String vor (z.B. "2026-06-01T00:00:00.000Z")
+  const router = useRouter();
+  // Lokaler State für die Auswahl. Ein Datum liegt als stabiler yyyy-MM-dd-Schlüssel vor.
   const [selectedDates, setSelectedDates] = useState<Set<string>>(
     new Set(initialSelectedDates),
   );
   const [isPending, startTransition] = useTransition();
 
-  const workingDays = getWorkingDaysOfMonth(targetYear, targetMonth);
+  const closureDateKeys = useMemo(
+    () => getClosureDateKeys(calendarItems),
+    [calendarItems],
+  );
+  const selectableDateKeys = useMemo(() => {
+    const workingDays = getWorkingDaysOfMonth(targetYear, targetMonth);
+    return new Set(
+      workingDays
+        .map(formatDateKey)
+        .filter((dateKey) => !closureDateKeys.has(dateKey)),
+    );
+  }, [closureDateKeys, targetMonth, targetYear]);
+  const monthStart = startOfMonth(new Date(targetYear, targetMonth - 1));
   const selectedCount = selectedDates.size;
-  const isFulfilled = selectedCount >= requiredDaysTotal;
+  const hasMinimumRequirement = requiredDaysTotal > 0;
+  const isFulfilled =
+    !hasMinimumRequirement || selectedCount >= requiredDaysTotal;
+  const selectedLabel =
+    selectedCount === 1 ? "1 Tag markiert" : `${selectedCount} Tage markiert`;
 
-  function toggleDate(dateStr: string) {
+  function handleChange(nextDates: Set<string>) {
     if (isLocked || isPending) return;
-
-    const newSet = new Set(selectedDates);
-    if (newSet.has(dateStr)) {
-      newSet.delete(dateStr);
-    } else {
-      newSet.add(dateStr);
-    }
-    setSelectedDates(newSet);
+    setSelectedDates(nextDates);
   }
 
   function handleSave() {
     if (isLocked) return;
 
-    if (!isFulfilled) {
+    if (hasMinimumRequirement && !isFulfilled) {
       toast.error(
         `Bitte wähle noch ${requiredDaysTotal - selectedCount} weitere Termine aus.`,
       );
@@ -78,107 +151,489 @@ export function NotdienstForm({
       if (result?.error) {
         toast.error(result.error);
       } else {
+        setSelectedDates(new Set(result.dates));
         toast.success("Verfügbarkeiten erfolgreich gespeichert.");
+        router.refresh();
       }
     });
   }
 
   return (
-    <div className="space-y-6">
-      {/* Fortschritt / Sperr-Hinweis */}
-      <div
-        className={cn(
-          "flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between",
-          isLocked ? "bg-destructive/5" : "bg-card",
-        )}
-      >
-        <div className="flex items-start gap-3">
-          {isLocked ? (
-            <Info className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
-          ) : isFulfilled ? (
-            <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
-          ) : (
-            <Info className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground" />
-          )}
+    <div>
+      {isLocked ? (
+        <div className="mb-4 flex items-start gap-3 rounded-[10px] border border-[oklch(0.88_0.04_35)] bg-[oklch(0.96_0.018_35)] p-4 text-sm text-[oklch(0.38_0.08_35)]">
+          <Info className="mt-0.5 h-4 w-4 shrink-0" />
+          <p>
+            Die Frist für diesen Monat ist abgelaufen. Änderungen sind nicht
+            mehr möglich.
+          </p>
+        </div>
+      ) : null}
 
-          <div>
-            <h3 className="font-medium">
-              {isLocked
-                ? "Planung abgeschlossen"
-                : "Deine ausgewählten Termine"}
-            </h3>
-            <p className="text-sm text-muted-foreground">
-              {isLocked
-                ? "Die Frist für diesen Monat ist abgelaufen. Änderungen sind nicht mehr möglich."
-                : `Du hast ${selectedCount} von ${requiredDaysTotal} benötigten Tagen markiert.`}
-            </p>
+      <div className="overflow-x-auto">
+        <NotdienstCalendar
+          month={monthStart}
+          events={calendarItems}
+          selected={selectedDates}
+          requiredDays={requiredDaysTotal}
+          disabled={isLocked || isPending}
+          selectableDateKeys={selectableDateKeys}
+          onChange={handleChange}
+          onSave={handleSave}
+          isSaving={isPending}
+        />
+      </div>
+      <p className="sr-only" aria-live="polite">
+        {hasMinimumRequirement
+          ? `Du hast ${selectedCount} von ${requiredDaysTotal} benötigten Tagen markiert.`
+          : `${selectedLabel}. Für diese Kita ist aktuell keine Mindestanzahl hinterlegt.`}
+      </p>
+    </div>
+  );
+}
+
+type NotdienstCalendarProps = {
+  month: Date;
+  events: NotdienstCalendarItem[];
+  selected: Set<string>;
+  requiredDays: number;
+  disabled?: boolean;
+  selectableDateKeys: Set<string>;
+  isSaving?: boolean;
+  onChange: (selected: Set<string>) => void;
+  onSave: () => void;
+};
+
+export function NotdienstCalendar({
+  month,
+  events,
+  selected,
+  requiredDays,
+  disabled = false,
+  selectableDateKeys,
+  isSaving = false,
+  onChange,
+  onSave,
+}: NotdienstCalendarProps) {
+  const [visibleMonth, setVisibleMonth] = useState(month);
+  const [activeEvent, setActiveEvent] = useState<NotdienstCalendarItem | null>(
+    null,
+  );
+  const visibleMonthStart = startOfMonth(visibleMonth);
+  const visibleMonthEnd = endOfMonth(visibleMonthStart);
+  const calendarStart = startOfWeek(visibleMonthStart, { weekStartsOn: 1 });
+  const calendarEnd = endOfWeek(visibleMonthEnd, { weekStartsOn: 1 });
+  const calendarDays = eachDayOfInterval({
+    start: calendarStart,
+    end: calendarEnd,
+  }).map((day) => startOfDay(day));
+  const selectedCount = selected.size;
+  const extraCount = Math.max(0, selectedCount - requiredDays);
+  const statusText =
+    requiredDays > 0 && selectedCount >= requiredDays
+      ? `Fertig — alle ${requiredDays} Tage markiert`
+      : `${selectedCount} von ${requiredDays} Tagen`;
+
+  function toggleDate(dateKey: string) {
+    if (disabled || !selectableDateKeys.has(dateKey)) return;
+
+    const nextSelected = new Set(selected);
+    if (nextSelected.has(dateKey)) {
+      nextSelected.delete(dateKey);
+    } else {
+      nextSelected.add(dateKey);
+    }
+    onChange(nextSelected);
+  }
+
+  return (
+    <section
+      className="min-w-[1040px] bg-[var(--notdienst-bg)] px-11 py-10 text-[var(--notdienst-ink)] shadow-sm [--notdienst-accent-deep:oklch(0.42_0.10_38)] [--notdienst-accent-mid:oklch(0.82_0.07_38)] [--notdienst-accent-soft:oklch(0.93_0.04_38)] [--notdienst-accent:oklch(0.58_0.11_38)] [--notdienst-bg:oklch(0.965_0.012_75)] [--notdienst-hairline-soft:oklch(0.93_0.01_75)] [--notdienst-hairline:oklch(0.90_0.012_75)] [--notdienst-ink-faint:oklch(0.76_0.01_45)] [--notdienst-ink-muted:oklch(0.60_0.012_45)] [--notdienst-ink-soft:oklch(0.45_0.015_45)] [--notdienst-ink:oklch(0.26_0.015_45)] [--notdienst-out-month:oklch(0.82_0.012_75)] [--notdienst-surface-week:oklch(0.945_0.014_75)] [--notdienst-surface:oklch(0.985_0.008_75)]"
+      style={{
+        backgroundImage:
+          "radial-gradient(oklch(0.85 0.02 75 / 0.10) 1px, transparent 1px)",
+        backgroundSize: "16px 16px",
+      }}
+    >
+      <header className="flex items-start justify-between gap-8">
+        <div>
+          <p className="text-[11px] font-semibold uppercase leading-none text-[var(--notdienst-accent)] [letter-spacing:0.18em]">
+            NOTDIENST · {format(visibleMonthStart, "MMMM yyyy", { locale: de })}
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight text-[var(--notdienst-ink)] [letter-spacing:-0.025em]">
+            Wann magst du{" "}
+            <em className="font-normal italic text-[var(--notdienst-accent-deep)]">
+              helfen
+            </em>
+            ?
+          </h1>
+        </div>
+
+        <div className="mt-3 flex items-center gap-4 rounded-full border border-[var(--notdienst-hairline)] bg-[var(--notdienst-surface)] px-5 py-3 shadow-[0_12px_30px_oklch(0.36_0.02_45_/_0.06)]">
+          <div className="flex items-center gap-1.5">
+            {Array.from({ length: Math.max(requiredDays, 1) }).map(
+              (_, index) => {
+                const isMarked = index < selectedCount;
+                return (
+                  <span
+                    key={index}
+                    className={cn(
+                      "h-2.5 w-2.5 rounded-full border border-[var(--notdienst-accent)]",
+                      isMarked && "bg-[var(--notdienst-accent)]",
+                    )}
+                  />
+                );
+              },
+            )}
+            {extraCount > 0 ? (
+              <span className="ml-1 text-[11px] font-semibold text-[var(--notdienst-accent-deep)]">
+                +{extraCount}
+              </span>
+            ) : null}
+          </div>
+          <span className="text-[13px] font-semibold text-[var(--notdienst-ink-soft)]">
+            {statusText}
+          </span>
+          <button
+            type="button"
+            onClick={onSave}
+            disabled={disabled || isSaving || selectedCount < requiredDays}
+            className="inline-flex h-8 items-center gap-2 rounded-full bg-[var(--notdienst-accent-deep)] px-5 text-[13px] font-bold text-white transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-55"
+          >
+            {isSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+            Speichern
+          </button>
+        </div>
+      </header>
+
+      <div className="mt-9 flex items-center justify-between gap-8">
+        <div className="flex items-center gap-3">
+          <h2 className="text-[22px] font-medium text-[var(--notdienst-ink)] [font-variant-numeric:tabular-nums]">
+            {format(visibleMonthStart, "MMMM yyyy", { locale: de })}
+          </h2>
+          <div className="flex items-center gap-1.5">
+            <button
+              type="button"
+              aria-label="Vorheriger Monat"
+              onClick={() =>
+                setVisibleMonth(
+                  new Date(
+                    visibleMonthStart.getFullYear(),
+                    visibleMonthStart.getMonth() - 1,
+                    1,
+                  ),
+                )
+              }
+              className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-[var(--notdienst-hairline)] bg-[var(--notdienst-surface)] text-[var(--notdienst-ink-soft)] transition hover:border-[var(--notdienst-accent-mid)] hover:text-[var(--notdienst-accent-deep)]"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              aria-label="Nächster Monat"
+              onClick={() =>
+                setVisibleMonth(
+                  new Date(
+                    visibleMonthStart.getFullYear(),
+                    visibleMonthStart.getMonth() + 1,
+                    1,
+                  ),
+                )
+              }
+              className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-[var(--notdienst-hairline)] bg-[var(--notdienst-surface)] text-[var(--notdienst-ink-soft)] transition hover:border-[var(--notdienst-accent-mid)] hover:text-[var(--notdienst-accent-deep)]"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
           </div>
         </div>
 
-        <Button
-          onClick={handleSave}
-          disabled={isLocked || isPending || !isFulfilled}
-          className="shrink-0"
-        >
-          {isPending ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          ) : null}
-          {isLocked ? "Gesperrt" : "Speichern"}
-        </Button>
+        <CalendarLegend />
       </div>
 
-      {/* Datumsliste */}
-      <div className="rounded-lg border bg-card">
-        <div className="p-4 border-b bg-muted/30">
-          <p className="text-sm font-medium">Werktage im {format(new Date(targetYear, targetMonth - 1, 1), "MMMM", { locale: de })}</p>
-        </div>
-        <div className="divide-y">
-          {workingDays.map((day) => {
-            const dateStr = day.toISOString();
-            const isSelected = selectedDates.has(dateStr);
-            const isToday = day.getTime() === new Date().setHours(0, 0, 0, 0);
+      <div className="mt-8 grid grid-cols-7 gap-1.5">
+        {[
+          "Montag",
+          "Dienstag",
+          "Mittwoch",
+          "Donnerstag",
+          "Freitag",
+          "Samstag",
+          "Sonntag",
+        ].map((weekday) => (
+          <div
+            key={weekday}
+            className="px-2 text-[11px] font-semibold uppercase text-[var(--notdienst-ink-muted)] [letter-spacing:0.08em]"
+          >
+            {weekday}
+          </div>
+        ))}
+      </div>
 
-            return (
-              <button
-                key={dateStr}
-                type="button"
-                disabled={isLocked || isPending}
-                onClick={() => toggleDate(dateStr)}
-                className={cn(
-                  "flex w-full items-center justify-between px-4 py-3 text-left transition-colors",
-                  !isLocked && !isPending && "hover:bg-muted/50",
-                  isSelected && "bg-primary/5 hover:bg-primary/10",
-                  (isLocked || isPending) && "cursor-not-allowed opacity-70",
-                )}
-              >
-                <div className="flex items-center gap-3">
-                  {/* Custom Checkbox Indicator */}
-                  <div
-                    className={cn(
-                      "flex h-5 w-5 items-center justify-center rounded border",
-                      isSelected
-                        ? "border-primary bg-primary text-primary-foreground"
-                        : "border-input bg-background",
-                    )}
-                  >
-                    {isSelected && <CheckCircle2 className="h-3.5 w-3.5" />}
-                  </div>
-                  <div>
-                    <span className={cn("font-medium", isSelected && "text-primary")}>
-                      {format(day, "EEEE, dd. MMMM", { locale: de })}
-                    </span>
-                    {isToday && (
-                      <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
-                        Heute
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </button>
-            );
-          })}
-        </div>
+      <div className="mt-2 grid grid-cols-7 gap-1.5">
+        {calendarDays.map((day) => {
+          const dateKey = formatDateKey(day);
+          const isInTargetMonth = isSameMonth(day, visibleMonthStart);
+          const isSelected = selected.has(dateKey);
+          const dayEvents = getCalendarItemsForDay(events, day);
+          const hasClosure = dayEvents.some(
+            (event) => event.category === "closure",
+          );
+          const isSelectable =
+            isInTargetMonth && selectableDateKeys.has(dateKey) && !hasClosure;
+          const isWeekend = day.getDay() === 0 || day.getDay() === 6;
+
+          return (
+            <CalendarTile
+              key={dateKey}
+              day={day}
+              events={dayEvents}
+              isInTargetMonth={isInTargetMonth}
+              isSelected={isSelected}
+              isSelectable={isSelectable}
+              isWeekend={isWeekend}
+              hasClosure={hasClosure}
+              disabled={disabled}
+              onToggle={() => toggleDate(dateKey)}
+              onOpenEvent={setActiveEvent}
+            />
+          );
+        })}
+      </div>
+
+      {activeEvent ? (
+        <EventDialog
+          event={activeEvent}
+          onClose={() => setActiveEvent(null)}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+function CalendarTile({
+  day,
+  events,
+  isInTargetMonth,
+  isSelected,
+  isSelectable,
+  isWeekend,
+  hasClosure,
+  disabled,
+  onToggle,
+  onOpenEvent,
+}: {
+  day: Date;
+  events: NotdienstCalendarItem[];
+  isInTargetMonth: boolean;
+  isSelected: boolean;
+  isSelectable: boolean;
+  isWeekend: boolean;
+  hasClosure: boolean;
+  disabled: boolean;
+  onToggle: () => void;
+  onOpenEvent: (event: NotdienstCalendarItem) => void;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative min-h-24 rounded-[10px] border p-[10px_11px] text-left transition",
+        "border-[var(--notdienst-hairline)] bg-[var(--notdienst-surface)]",
+        isSelectable &&
+          !disabled &&
+          "cursor-pointer hover:border-[var(--notdienst-accent-mid)] hover:shadow-[0_10px_28px_oklch(0.36_0.02_45_/_0.08)]",
+        isSelected &&
+          "border-[var(--notdienst-accent-mid)] bg-[var(--notdienst-accent-soft)]",
+        hasClosure &&
+          "cursor-default border-[oklch(0.88_0.04_35)] bg-[oklch(0.96_0.018_35)]",
+        (isWeekend || !isInTargetMonth) &&
+          "cursor-default border-[var(--notdienst-hairline-soft)] bg-[var(--notdienst-surface-week)]",
+      )}
+      onClick={isSelectable && !disabled ? onToggle : undefined}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <span
+          className={cn(
+            "font-medium leading-none [font-variant-numeric:tabular-nums] [letter-spacing:-0.02em]",
+            isWeekend || !isInTargetMonth
+              ? "text-[13px] text-[var(--notdienst-out-month)]"
+              : "text-[17px] text-[var(--notdienst-ink)]",
+            isSelected && "text-[var(--notdienst-accent-deep)]",
+            hasClosure && "text-[oklch(0.38_0.08_35)]",
+          )}
+        >
+          {format(day, "d")}
+        </span>
+        {isSelected ? (
+          <Check className="h-2.5 w-2.5 text-[var(--notdienst-accent-deep)] [stroke-width:2.5]" />
+        ) : null}
+        {hasClosure ? (
+          <LockKeyhole className="h-3 w-3 text-[oklch(0.38_0.08_35)]" />
+        ) : null}
+      </div>
+
+      <div className="absolute inset-x-[11px] bottom-[10px] space-y-1.5">
+        {events.slice(0, 2).map((event) => (
+          <button
+            key={`${formatDateKey(day)}-${event.id}`}
+            type="button"
+            className="group/event relative flex w-full items-center gap-1.5 overflow-visible text-left"
+            onClick={(clickEvent) => {
+              clickEvent.stopPropagation();
+              onOpenEvent(event);
+            }}
+          >
+            <span
+              className="h-4 w-[3px] shrink-0 rounded-sm"
+              style={{
+                backgroundColor: notdienstEventCategories[event.category].dot,
+              }}
+            />
+            <span className="truncate text-[11px] font-medium text-[var(--notdienst-ink-soft)]">
+              {event.title}
+            </span>
+            <span className="pointer-events-none absolute bottom-full left-0 z-20 mb-2 hidden min-w-44 rounded-lg bg-[oklch(0.22_0.015_45)] px-3 py-2 text-left text-white shadow-xl group-hover/event:block">
+              <span className="block text-[10px] font-semibold uppercase text-white/65 [letter-spacing:0.08em]">
+                {notdienstEventCategories[event.category].label}
+              </span>
+              <span className="mt-0.5 block text-[12px] font-semibold">
+                {event.title}
+              </span>
+              <span className="mt-1 block text-[11px] text-white/75">
+                {formatEventTime(event)}
+              </span>
+            </span>
+          </button>
+        ))}
+        {events.length > 2 ? (
+          <p className="text-[11px] font-medium text-[var(--notdienst-ink-muted)]">
+            +{events.length - 2} weitere
+          </p>
+        ) : null}
       </div>
     </div>
   );
 }
+
+function CalendarLegend() {
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-4 text-[11px] font-medium text-[var(--notdienst-ink-soft)]">
+      <span className="inline-flex items-center gap-1.5">
+        <span className="h-[9px] w-[9px] rounded-[2px] bg-[var(--notdienst-accent)]" />
+        Dein Notdienst
+      </span>
+      {Object.entries(notdienstEventCategories).map(([key, category]) => (
+        <span key={key} className="inline-flex items-center gap-1.5">
+          <span
+            className="h-[9px] w-[9px] rounded-[2px]"
+            style={{ backgroundColor: category.dot }}
+          />
+          {category.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function EventDialog({
+  event,
+  onClose,
+}: {
+  event: NotdienstCalendarItem;
+  onClose: () => void;
+}) {
+  const category = notdienstEventCategories[event.category];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-[oklch(0.25_0.015_45_/_0.20)] p-6 backdrop-blur-[2px]"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-md rounded-xl border border-[var(--notdienst-hairline)] bg-[var(--notdienst-surface)] p-6 text-[var(--notdienst-ink)] shadow-2xl"
+        onClick={(eventClick) => eventClick.stopPropagation()}
+      >
+        <div className="flex items-start justify-between gap-4">
+          <span
+            className="inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold"
+            style={{
+              backgroundColor: category.bg,
+              borderColor: category.border,
+              color: category.text,
+            }}
+          >
+            {category.label}
+          </span>
+          <button
+            type="button"
+            aria-label="Detail schließen"
+            onClick={onClose}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--notdienst-ink-muted)] transition hover:bg-[var(--notdienst-surface-week)] hover:text-[var(--notdienst-ink)]"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <h3 className="mt-4 text-2xl font-medium leading-tight [letter-spacing:-0.02em]">
+          {event.title}
+        </h3>
+        <p className="mt-3 flex items-center gap-2 text-sm font-medium text-[var(--notdienst-ink-soft)]">
+          <Clock3 className="h-4 w-4" />
+          {formatEventDate(event)}
+        </p>
+        {event.note ? (
+          <p className="mt-5 text-sm leading-6 text-[var(--notdienst-ink-soft)]">
+            {event.note}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function getCalendarItemsForDay(
+  items: NotdienstCalendarItem[],
+  day: Date,
+) {
+  const dayStart = startOfDay(day).getTime();
+
+  return items.filter((item) => {
+    const itemStart = startOfDay(item.startDate).getTime();
+    const itemEnd = startOfDay(item.endDate).getTime();
+
+    return itemStart <= dayStart && itemEnd >= dayStart;
+  });
+}
+
+function getClosureDateKeys(items: NotdienstCalendarItem[]) {
+  const closureKeys = new Set<string>();
+
+  for (const item of items) {
+    if (item.category !== "closure") continue;
+
+    const days = eachDayOfInterval({
+      start: startOfDay(item.startDate),
+      end: startOfDay(item.endDate),
+    });
+
+    for (const day of days) {
+      closureKeys.add(formatDateKey(day));
+    }
+  }
+
+  return closureKeys;
+}
+
+function formatEventDate(event: NotdienstCalendarItem) {
+  const date = format(event.startDate, "EEEE, d. MMMM yyyy", { locale: de });
+  return event.allDay
+    ? `${date} · Ganztägig`
+    : `${date} · ${formatEventTime(event)}`;
+}
+
+function formatEventTime(event: NotdienstCalendarItem) {
+  if (event.allDay) return "Ganztägig";
+
+  return `${format(event.startDate, "HH:mm")} - ${format(
+    event.endDate,
+    "HH:mm",
+  )}`;
+}

src/app/dashboard/notdienst/page.tsx

@@ -1,15 +1,21 @@
 import Link from "next/link";
-import { UserRole } from "@prisma/client";
-import { Info, Calendar, ArrowRight, ShieldAlert } from "lucide-react";
+import { TerminStatus, TerminType, UserRole } from "@prisma/client";
+import { ArrowRight, ShieldAlert } from "lucide-react";
+import { Manrope } from "next/font/google";
 
 import { requireRole } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { getTargetMonthData } from "@/lib/date-utils";
+import { formatDateKey, getTargetMonthData } from "@/lib/date-utils";
 import { Button } from "@/components/ui/button";
 import { NotdienstEntry } from "./notdienst-entry";
 
 export const metadata = { title: "Notdienst · Kita-Planer" };
 
+const manrope = Manrope({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
 export default async function NotdienstPage() {
   // ELTERN können eintragen; Admins/Koordinatoren haben hier eigentlich
   // andere Ansichten (Plan-Generierung), aber wir lassen sie zur Demonstration
@@ -44,13 +50,15 @@ export default async function NotdienstPage() {
     : [];
 
   const targetData = getTargetMonthData();
-  const { targetYear, targetMonth, monthName, isLocked } = targetData;
+  const { targetYear, targetMonth, isLocked } = targetData;
+  const targetMonthStart = new Date(Date.UTC(targetYear, targetMonth - 1, 1));
+  const targetMonthEnd = new Date(Date.UTC(targetYear, targetMonth, 1));
 
   const requiredDaysTotal = children.length * kita.notdienstMinPerChildPerMonth;
   const childIds = children.map((child) => child.id);
 
   // Bisherige Einträge für den Zielmonat laden, haushaltsweit über die Kinder.
-  const [availabilities, availabilityCountForCurrentOrNextMonth] =
+  const [availabilities, termine] =
     children.length > 0
       ? await Promise.all([
           prisma.notdienstAvailability.findMany({
@@ -58,80 +66,94 @@ export default async function NotdienstPage() {
               kitaId,
               childId: { in: childIds },
               date: {
-                gte: new Date(targetYear, targetMonth - 1, 1),
-                lt: new Date(targetYear, targetMonth, 1),
+                gte: targetMonthStart,
+                lt: targetMonthEnd,
               },
             },
             select: { date: true },
           }),
-          prisma.notdienstAvailability.count({
+          prisma.termin.findMany({
             where: {
               kitaId,
-              childId: { in: childIds },
-              date: {
-                gte: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-                lt: new Date(new Date().getFullYear(), new Date().getMonth() + 2, 1),
-              },
+              status: TerminStatus.CONFIRMED,
+              startDate: { lt: targetMonthEnd },
+              endDate: { gte: targetMonthStart },
             },
+            select: {
+              id: true,
+              title: true,
+              description: true,
+              type: true,
+              startDate: true,
+              endDate: true,
+              allDay: true,
+            },
+            orderBy: { startDate: "asc" },
           }),
         ])
-      : [[], 0];
+      : [[], []];
 
-  const selectedDates = availabilities.map((a) => a.date.toISOString());
+  const selectedDates = availabilities.map((a) => formatDateKey(a.date));
 
   return (
-    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-8">
-      <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
-            <Calendar className="h-6 w-6 text-primary" />
-            Notdienst planen
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Gib hier an, an welchen Tagen du im Notdienst unterstützen kannst.
-          </p>
-        </div>
-        <div className="flex flex-col items-start gap-1 sm:items-end">
-          <span className="rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
-            Zielmonat: {monthName}
-          </span>
-          {isLocked && (
-            <span className="text-xs font-medium text-destructive flex items-center gap-1">
-              <Info className="h-3 w-3" />
-              Eingabefrist abgelaufen
-            </span>
-          )}
-        </div>
-      </div>
-
+    <div className={`${manrope.className} mx-auto max-w-7xl px-4 py-8 sm:px-8`}>
       {children.length === 0 ? (
         <NotdienstLockout />
       ) : (
         <NotdienstEntry
-          hasAnyAvailability={availabilityCountForCurrentOrNextMonth > 0}
           targetYear={targetYear}
           targetMonth={targetMonth}
           isLocked={isLocked}
           requiredDaysTotal={requiredDaysTotal}
           initialSelectedDates={selectedDates}
           childrenIds={childIds}
+          calendarItems={termine.map((termin) => ({
+            id: termin.id,
+            title: termin.title,
+            category: getTerminCategory(termin.type),
+            startDate: termin.startDate,
+            endDate: termin.endDate,
+            allDay: termin.allDay,
+            note: termin.description,
+          }))}
         />
       )}
     </div>
   );
 }
 
+function getTerminCategory(type: TerminType) {
+  switch (type) {
+    case TerminType.SCHLIESSTAG:
+      return "closure" as const;
+    case TerminType.TEAMTAG:
+      return "team" as const;
+    case TerminType.KITA_FEST:
+    case TerminType.MITMACH_TAG:
+      return "social" as const;
+    case TerminType.ELTERNABEND:
+    case TerminType.MITGLIEDERVERSAMMLUNG:
+    case TerminType.ELTERNCAFE:
+      return "parents" as const;
+    case TerminType.GEBURTSTAG_INTERN:
+    case TerminType.GEBURTSTAG_EXTERN:
+      return "birthday" as const;
+    default:
+      return "social" as const;
+  }
+}
+
 function NotdienstLockout() {
   return (
-    <div className="flex min-h-[420px] items-center justify-center rounded-lg border border-dashed bg-muted/20 p-8 text-center">
+    <div className="flex min-h-[420px] items-center justify-center rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-8 text-center">
       <div className="mx-auto max-w-lg">
-        <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm">
-          <ShieldAlert className="h-10 w-10" />
+        <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+          <ShieldAlert className="h-10 w-10 [stroke-width:1.7]" />
         </div>
-        <h2 className="mt-6 text-2xl font-semibold tracking-tight">
+        <h2 className="mt-6 text-2xl font-medium tracking-[-0.02em] text-[var(--ink)]">
           Erst Kinder hinterlegen
         </h2>
-        <p className="mt-3 text-sm leading-6 text-muted-foreground">
+        <p className="mt-3 text-sm leading-6 text-[var(--ink-soft)]">
           Bitte lege zuerst deine Kinder im Profil an, bevor du Notdienste
           übernimmst.
         </p>

src/app/dashboard/notdienst/plan/_components/settings-modal.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useTransition, type FormEvent } from "react";
+import { SlidersHorizontal } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { updateKitaNotdienstSettingsAction } from "../actions";
+
+interface SettingsModalProps {
+  initialMinPerChild: number;
+  initialReminderDays: number;
+}
+
+export function SettingsModal({
+  initialMinPerChild,
+  initialReminderDays,
+}: SettingsModalProps) {
+  const [open, setOpen] = useState(false);
+  const [minPerChild, setMinPerChild] = useState(initialMinPerChild);
+  const [reminderDays, setReminderDays] = useState(initialReminderDays);
+  const [isPending, startTransition] = useTransition();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (minPerChild < 0 || reminderDays < 0) {
+      toast.error("Werte dürfen nicht negativ sein.");
+      return;
+    }
+
+    startTransition(async () => {
+      const res = await updateKitaNotdienstSettingsAction(
+        minPerChild,
+        reminderDays
+      );
+      if (res.error) {
+        toast.error(res.error);
+      } else {
+        toast.success("Regeln erfolgreich gespeichert!");
+        setOpen(false);
+      }
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <SlidersHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+          Einstellungen
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Notdienst-Einstellungen</DialogTitle>
+            <DialogDescription>
+              Passe die standardmäßigen Regeln für die Notdienst-Verteilung in deiner Kita an.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="minPerChild">
+                Mindesteinteilungen pro Kind/Monat
+              </Label>
+              <Input
+                id="minPerChild"
+                name="minPerChild"
+                type="number"
+                min="0"
+                required
+                value={minPerChild}
+                onChange={(e) => setMinPerChild(parseInt(e.target.value, 10))}
+              />
+              <p className="text-xs text-[var(--ink-muted)]">
+                Bestimmt das Richtmaß der automatischen Verteilung für Kinder im jeweiligen Monat.
+              </p>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="reminderDays">
+                Erinnerungsfrist (Tage vor Monatsende)
+              </Label>
+              <Input
+                id="reminderDays"
+                name="reminderDays"
+                type="number"
+                min="0"
+                required
+                value={reminderDays}
+                onChange={(e) => setReminderDays(parseInt(e.target.value, 10))}
+              />
+              <p className="text-xs text-[var(--ink-muted)]">
+                Frist, nach der Eltern automatisch per Mail an offene Verfügbarkeiten erinnert werden.
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setMinPerChild(initialMinPerChild);
+                setReminderDays(initialReminderDays);
+                setOpen(false);
+              }}
+            >
+              Abbrechen
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Speichern..." : "Regeln speichern"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/dashboard/notdienst/plan/actions.ts

@@ -1,21 +1,36 @@
 "use server";
 
+import { createElement } from "react";
 import { revalidatePath } from "next/cache";
 import { NotdienstPlanStatus, UserRole } from "@prisma/client";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
 
 import { requireRole } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
 import { getTargetMonthData, getWorkingDaysOfMonth } from "@/lib/date-utils";
+import { getAppEmailConfigError, sendAppEmail } from "@/lib/mail";
+import { NotdienstAvailabilityReminderEmail } from "@/emails/NotdienstAvailabilityReminderEmail";
+import { NotdienstAssignmentEmail } from "@/emails/NotdienstAssignmentEmail";
 
 // =====================================================================
 // /dashboard/notdienst/plan · Server Actions
 // =====================================================================
 
-export async function generatePlanAction() {
+export async function generatePlanAction(year?: number, month?: number) {
   const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
   const kitaId = session.user.kitaId!;
 
-  const { targetYear, targetMonth } = getTargetMonthData();
+  let targetYear: number;
+  let targetMonth: number;
+  if (year !== undefined && month !== undefined) {
+    targetYear = year;
+    targetMonth = month;
+  } else {
+    const data = getTargetMonthData();
+    targetYear = data.targetYear;
+    targetMonth = data.targetMonth;
+  }
 
   // Prüfen, ob schon ein Plan existiert
   const existingPlan = await prisma.notdienstPlan.findUnique({
@@ -33,8 +48,8 @@ export async function generatePlanAction() {
     where: {
       kitaId,
       date: {
-        gte: new Date(targetYear, targetMonth - 1, 1),
-        lt: new Date(targetYear, targetMonth, 1),
+        gte: new Date(Date.UTC(targetYear, targetMonth - 1, 1)),
+        lt: new Date(Date.UTC(targetYear, targetMonth, 1)),
       },
     },
     include: { child: { select: { familyId: true } } },
@@ -141,17 +156,44 @@ export async function updateAssignmentAction(
   const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
   const kitaId = session.user.kitaId!;
 
-  const parsedDate = new Date(date);
+  const [yr, mo, dy] = date.slice(0, 10).split("-").map(Number);
+  const parsedDate = new Date(Date.UTC(yr, mo - 1, dy));
 
   try {
-    await prisma.$transaction(async (tx) => {
-      // Prüfen, ob Plan noch DRAFT ist
+    const { shouldSendEmails, assignedChildInfo } = await prisma.$transaction(async (tx) => {
+      let txShouldSendEmails = false;
+      let txAssignedChildInfo: {
+        parentEmails: string[];
+        parentNames: string[];
+        dateLabel: string;
+      } | null = null;
+
       const plan = await tx.notdienstPlan.findUnique({
         where: { id: planId, kitaId },
       });
 
-      if (!plan || plan.status !== NotdienstPlanStatus.DRAFT) {
-        throw new Error("Plan kann nicht mehr bearbeitet werden.");
+      if (!plan) {
+        throw new Error("Plan nicht gefunden.");
+      }
+
+      const isDraft = plan.status === NotdienstPlanStatus.DRAFT;
+      const isPublished = plan.status === NotdienstPlanStatus.PUBLISHED;
+
+      if (!isDraft && !isPublished) {
+        throw new Error("Plan kann nicht bearbeitet werden.");
+      }
+
+      // Wenn der Plan bereits veröffentlicht ist, dürfen nur unbesetzte Termine geändert werden.
+      // Ein Termin gilt als "unbesetzt", wenn am Veröffentlichungstag kein Assignment existierte
+      // bzw. das Assignment erst nach dem Veröffentlichungs-Zeitpunkt erstellt wurde.
+      const existingAssignment = await tx.notdienstAssignment.findFirst({
+        where: { planId, date: parsedDate },
+      });
+
+      if (isPublished && existingAssignment) {
+        if (!plan.publishedAt || existingAssignment.createdAt <= plan.publishedAt) {
+          throw new Error("In einem bereits veröffentlichten Plan können nur unbesetzte Termine geändert werden.");
+        }
       }
 
       // Altes Assignment für diesen Tag löschen
@@ -167,7 +209,16 @@ export async function updateAssignmentAction(
             kitaId,
             active: true,
           },
-          select: { id: true },
+          include: {
+            family: {
+              include: {
+                users: {
+                  where: { role: UserRole.ELTERN },
+                  select: { email: true, firstName: true, lastName: true },
+                },
+              },
+            },
+          },
         });
 
         if (!child) {
@@ -182,9 +233,57 @@ export async function updateAssignmentAction(
             date: parsedDate,
           },
         });
+
+        // Wenn der Plan bereits veröffentlicht ist, bereiten wir E-Mail-Benachrichtigungen vor
+        if (isPublished) {
+          const parents = child.family.users.filter((u) => !!u.email);
+          if (parents.length > 0) {
+            const localFormatDate = new Date(yr, mo - 1, dy);
+            txAssignedChildInfo = {
+              parentEmails: parents.map((p) => p.email!),
+              parentNames: parents.map((p) => `${p.firstName} ${p.lastName}`),
+              dateLabel: format(localFormatDate, "EEEE, dd. MMMM yyyy", { locale: de }),
+            };
+            txShouldSendEmails = true;
+          }
+        }
       }
+
+      return {
+        shouldSendEmails: txShouldSendEmails,
+        assignedChildInfo: txAssignedChildInfo,
+      };
     });
 
+    // E-Mails außerhalb der DB-Transaktion senden
+    if (shouldSendEmails && assignedChildInfo) {
+      const kita = await prisma.kita.findUnique({
+        where: { id: kitaId },
+        select: { name: true },
+      });
+
+      if (kita) {
+        const BASE_URL = process.env.NEXTAUTH_URL ?? process.env.AUTH_URL ?? "http://localhost:3000";
+        const link = `${BASE_URL}/dashboard/notdienst`;
+
+        for (let i = 0; i < assignedChildInfo.parentEmails.length; i++) {
+          const email = assignedChildInfo.parentEmails[i];
+          const name = assignedChildInfo.parentNames[i];
+
+          await sendAppEmail({
+            to: email,
+            subject: `Notdienst-Einteilung am ${assignedChildInfo.dateLabel}`,
+            react: createElement(NotdienstAssignmentEmail, {
+              parentName: name,
+              kitaName: kita.name,
+              dateLabel: assignedChildInfo.dateLabel,
+              link,
+            }),
+          });
+        }
+      }
+    }
+
     revalidatePath("/dashboard/notdienst/plan");
     return { success: true };
   } catch (error) {
@@ -193,3 +292,174 @@ export async function updateAssignmentAction(
     };
   }
 }
+
+export async function updateKitaNotdienstSettingsAction(
+  minPerChild: number,
+  reminderDays: number,
+) {
+  const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
+  const kitaId = session.user.kitaId;
+  if (!kitaId) {
+    return { error: "Kein Mandant zugeordnet." };
+  }
+
+  try {
+    await prisma.kita.update({
+      where: { id: kitaId },
+      data: {
+        notdienstMinPerChildPerMonth: minPerChild,
+        notdienstReminderDaysBefore: reminderDays,
+      },
+    });
+
+    revalidatePath("/dashboard/notdienst/plan");
+    return { success: true };
+  } catch (error) {
+    console.error(error);
+    return { error: "Fehler beim Speichern der Einstellungen." };
+  }
+}
+
+export async function sendNotdienstRemindersAction(year: number, month: number) {
+  const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
+  const kitaId = session.user.kitaId;
+  if (!kitaId) {
+    return { error: "Kein Mandant zugeordnet." };
+  }
+
+  const mailConfigError = getAppEmailConfigError();
+  if (mailConfigError) {
+    return { error: mailConfigError };
+  }
+
+  try {
+    // 1. Get Kita Name
+    const kita = await prisma.kita.findUnique({
+      where: { id: kitaId },
+      select: { name: true },
+    });
+    if (!kita) {
+      return { error: "Kita nicht gefunden." };
+    }
+
+    // 2. Fetch all families in this Kita with at least one active child and retrieve parents
+    const families = await prisma.family.findMany({
+      where: {
+        kitaId,
+        children: { some: { active: true } },
+      },
+      include: {
+        users: {
+          where: { role: UserRole.ELTERN },
+        },
+      },
+    });
+
+    // 3. For target month, find availability entries
+    const monthStart = new Date(year, month - 1, 1);
+    const monthEnd = new Date(year, month, 1);
+
+    const respondedFamilies = await prisma.notdienstAvailability.findMany({
+      where: {
+        kitaId,
+        date: {
+          gte: monthStart,
+          lt: monthEnd,
+        },
+      },
+      select: {
+        child: {
+          select: {
+            familyId: true,
+          },
+        },
+      },
+    });
+
+    const respondedFamilyIds = new Set(respondedFamilies.map((a) => a.child.familyId));
+
+    // 4. Find open families (not responded yet)
+    const openFamilies = families.filter((f) => !respondedFamilyIds.has(f.id));
+
+    if (openFamilies.length === 0) {
+      return { success: true, count: 0 };
+    }
+
+    // 5. Build emails list and send
+    const monthDate = new Date(year, month - 1, 1);
+    const monthLabel = format(monthDate, "MMMM yyyy", { locale: de });
+    const BASE_URL = process.env.NEXTAUTH_URL ?? process.env.AUTH_URL ?? "http://localhost:3000";
+    const link = `${BASE_URL}/dashboard/notdienst`;
+
+    let sentCount = 0;
+    for (const family of openFamilies) {
+      for (const parent of family.users) {
+        if (!parent.email) continue;
+
+        const result = await sendAppEmail({
+          to: parent.email,
+          subject: `Erinnerung: Bitte Verfügbarkeiten für den Notdienst ${monthLabel} eintragen`,
+          react: createElement(NotdienstAvailabilityReminderEmail, {
+            parentName: `${parent.firstName} ${parent.lastName}`,
+            kitaName: kita.name,
+            monthLabel,
+            link,
+          }),
+        });
+
+        if (result.success) {
+          sentCount++;
+        } else {
+          console.error(`E-Mail konnte nicht an ${parent.email} gesendet werden:`, result.error);
+        }
+      }
+    }
+
+    return { success: true, count: sentCount };
+  } catch (error) {
+    console.error("Fehler beim Versenden der Erinnerungen:", error);
+    return { error: "Fehler beim Versenden der Erinnerungen." };
+  }
+}
+
+export async function resetPlanAction(planId: string) {
+  const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
+  const kitaId = session.user.kitaId;
+  if (!kitaId) {
+    return { error: "Kein Mandant zugeordnet." };
+  }
+
+  try {
+    await prisma.$transaction(async (tx) => {
+      // Ensure the plan belongs to this kita and is draft
+      const plan = await tx.notdienstPlan.findFirst({
+        where: { id: planId, kitaId },
+      });
+
+      if (!plan) {
+        throw new Error("Plan nicht gefunden.");
+      }
+
+      if (plan.status !== NotdienstPlanStatus.DRAFT) {
+        throw new Error("Nur Pläne im Entwurfsstatus können zurückgesetzt werden.");
+      }
+
+      // Delete all assignments
+      await tx.notdienstAssignment.deleteMany({
+        where: { planId },
+      });
+
+      // Delete the plan itself
+      await tx.notdienstPlan.delete({
+        where: { id: planId },
+      });
+    });
+
+    revalidatePath("/dashboard/notdienst/plan");
+    return { success: true };
+  } catch (error) {
+    console.error("Fehler beim Zurücksetzen des Plans:", error);
+    return { error: error instanceof Error ? error.message : "Fehler beim Zurücksetzen des Plans." };
+  }
+}
+

src/app/dashboard/notdienst/plan/page.tsx

@@ -1,39 +1,108 @@
-import { UserRole } from "@prisma/client";
-import { Settings2 } from "lucide-react";
+import Link from "next/link";
+import { addMonths, getYear, getMonth, format } from "date-fns";
+import { de } from "date-fns/locale";
+import { TerminType, UserRole } from "@prisma/client";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import { requireRole } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { getTargetMonthData, getWorkingDaysOfMonth } from "@/lib/date-utils";
+import { getWorkingDaysOfMonth } from "@/lib/date-utils";
 import { PlanView } from "./plan-view";
+import { SettingsModal } from "./_components/settings-modal";
 
 export const metadata = { title: "Plan-Generierung · Kita-Planer" };
 
-export default async function PlanungsZentralePage() {
+export default async function PlanungsZentralePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ year?: string; month?: string }>;
+}) {
   const session = await requireRole([UserRole.ADMIN, UserRole.KOORDINATOR]);
   const kitaId = session.user.kitaId!;
 
-  const { targetYear, targetMonth, monthName } = getTargetMonthData();
+  const resolvedSearchParams = await searchParams;
+  const now = new Date();
+  const nextMonth = addMonths(now, 1);
+  const targetYear = resolvedSearchParams.year ? parseInt(resolvedSearchParams.year, 10) : getYear(nextMonth);
+  const targetMonth = resolvedSearchParams.month ? parseInt(resolvedSearchParams.month, 10) : (getMonth(nextMonth) + 1);
 
-  // Aktuellen Plan suchen
-  const plan = await prisma.notdienstPlan.findUnique({
-    where: {
-      kitaId_year_month: { kitaId, year: targetYear, month: targetMonth },
-    },
-    select: {
-      id: true,
-      status: true,
-      assignments: {
-        select: {
-          id: true,
-          childId: true,
-          date: true,
+  const monthDate = new Date(targetYear, targetMonth - 1, 1);
+  const monthName = format(monthDate, "MMMM", { locale: de });
+
+  const workingDays = getWorkingDaysOfMonth(targetYear, targetMonth);
+  const monthStart = new Date(targetYear, targetMonth - 1, 1);
+  const monthEnd = new Date(targetYear, targetMonth, 1);
+
+  const [plan, families, availabilities, closureCount, kita] = await Promise.all([
+    prisma.notdienstPlan.findUnique({
+      where: {
+        kitaId_year_month: { kitaId, year: targetYear, month: targetMonth },
+      },
+      select: {
+        id: true,
+        status: true,
+        publishedAt: true,
+        assignments: {
+          select: {
+            id: true,
+            childId: true,
+            date: true,
+            createdAt: true,
+          },
         },
       },
-    },
-  });
-
-  // Alle Werktage
-  const workingDays = getWorkingDaysOfMonth(targetYear, targetMonth);
+    }),
+    prisma.family.findMany({
+      where: {
+        kitaId,
+        children: { some: { active: true } },
+      },
+      select: {
+        id: true,
+        name: true,
+        children: {
+          where: { active: true },
+          select: { id: true },
+        },
+      },
+      orderBy: { name: "asc" },
+    }),
+    prisma.notdienstAvailability.findMany({
+      where: {
+        kitaId,
+        date: {
+          gte: monthStart,
+          lt: monthEnd,
+        },
+      },
+      select: {
+        date: true,
+        child: {
+          select: {
+            familyId: true,
+          },
+        },
+      },
+      orderBy: { date: "asc" },
+    }),
+    prisma.termin.count({
+      where: {
+        kitaId,
+        type: TerminType.SCHLIESSTAG,
+        startDate: {
+          gte: monthStart,
+          lt: monthEnd,
+        },
+      },
+    }),
+    prisma.kita.findUniqueOrThrow({
+      where: { id: kitaId },
+      select: {
+        notdienstMinPerChildPerMonth: true,
+        notdienstReminderDaysBefore: true,
+      },
+    }),
+  ]);
 
   // Wir laden auch alle aktiven Kinder (inkl. Eltern-Namen) für das manuelle Dropdown.
   // Idealerweise gruppiert man das nach "Verfügbar an diesem Tag" und "Alle", 
@@ -44,6 +113,7 @@ export default async function PlanungsZentralePage() {
       id: true,
       firstName: true,
       lastName: true,
+      familyId: true,
       family: {
         select: {
           name: true,
@@ -68,45 +138,120 @@ export default async function PlanungsZentralePage() {
       id: c.id,
       name: `${c.firstName} ${c.lastName}`,
       parentName,
+      familyId: c.familyId,
     };
   });
 
+  const availabilityDatesByFamily = new Map<string, Set<string>>();
+  availabilities.forEach((availability) => {
+    const familyId = availability.child.familyId;
+    const dates = availabilityDatesByFamily.get(familyId) ?? new Set<string>();
+    dates.add(availability.date.toISOString());
+    availabilityDatesByFamily.set(familyId, dates);
+  });
+
+  const familyStatuses = families.map((family) => {
+    const dates = Array.from(availabilityDatesByFamily.get(family.id) ?? []);
+    return {
+      id: family.id,
+      name: family.name,
+      selectedDays: dates.map((date) => ({
+        iso: date,
+        label: new Intl.DateTimeFormat("de-DE", {
+          weekday: "short",
+          day: "2-digit",
+          month: "2-digit",
+        }).format(new Date(date)),
+      })),
+      childCount: family.children.length,
+    };
+  });
+
+  const respondedFamilies = familyStatuses.filter(
+    (family) => family.selectedDays.length > 0,
+  ).length;
+  const openFamilies = Math.max(familyStatuses.length - respondedFamilies, 0);
+  const totalAvailabilitySlots = availabilities.length;
+  const requiredDays = workingDays.length;
+  const coverageFactor =
+    requiredDays > 0 ? totalAvailabilitySlots / requiredDays : 0;
+
   // Wir mappen die Assignments auf die Werktage
   const daysWithAssignments = workingDays.map((day) => {
     const assignment = plan?.assignments.find(
       (a) => a.date.getTime() === day.getTime()
     );
+    const isOriginallyUnassigned =
+      !assignment ||
+      (plan?.publishedAt && assignment.createdAt > plan.publishedAt);
+
     return {
       date: day.toISOString(),
       assignmentId: assignment?.id || null,
       childId: assignment?.childId || null,
+      isOriginallyUnassigned: !!isOriginallyUnassigned,
     };
   });
 
   return (
-    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-8">
-      <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:items-start max-[900px]:flex-col">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
-            <Settings2 className="h-6 w-6 text-primary" />
-            Notdienst-Planung
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            NOTDIENST · PLANUNG
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Notdienst{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              zuweisen
+            </em>
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
             Koordiniere und generiere den Notdienst-Plan.
           </p>
         </div>
-        <div className="flex items-center gap-2">
-          <span className="rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
-            Zielmonat: {monthName}
-          </span>
+
+        <div className="print:hidden flex shrink-0 items-center gap-2">
+          <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)]">
+            <Link
+              href={`/dashboard/notdienst/plan?year=${getYear(addMonths(monthDate, -1))}&month=${getMonth(addMonths(monthDate, -1)) + 1}`}
+              className="inline-flex h-9 w-9 items-center justify-center border-r border-[var(--hairline-soft)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)] transition"
+            >
+              <ChevronLeft className="h-4 w-4 [stroke-width:1.7]" />
+            </Link>
+            <div className="flex h-9 min-w-36 items-center justify-center px-4 text-[13px] font-semibold text-[var(--ink)]">
+              {monthName} {targetYear}
+            </div>
+            <Link
+              href={`/dashboard/notdienst/plan?year=${getYear(addMonths(monthDate, 1))}&month=${getMonth(addMonths(monthDate, 1)) + 1}`}
+              className="inline-flex h-9 w-9 items-center justify-center border-l border-[var(--hairline-soft)] text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)] transition"
+            >
+              <ChevronRight className="h-4 w-4 [stroke-width:1.7]" />
+            </Link>
+          </div>
+          <SettingsModal
+            initialMinPerChild={kita.notdienstMinPerChildPerMonth}
+            initialReminderDays={kita.notdienstReminderDaysBefore}
+          />
         </div>
-      </div>
+      </header>
 
       <PlanView
         planId={plan?.id}
         status={plan?.status}
         days={daysWithAssignments}
         allChildren={allChildren}
+        familyStatuses={familyStatuses}
+        requiredDays={requiredDays}
+        respondedFamilies={respondedFamilies}
+        openFamilies={openFamilies}
+        totalFamilies={familyStatuses.length}
+        totalAvailabilitySlots={totalAvailabilitySlots}
+        coverageFactor={coverageFactor}
+        closureCount={closureCount}
+        monthName={monthName}
+        year={targetYear}
+        month={targetMonth}
       />
     </div>
   );

src/app/dashboard/notdienst/plan/plan-view.tsx

@@ -1,41 +1,102 @@
 "use client";
 
-import { useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
 import { NotdienstPlanStatus } from "@prisma/client";
-import { Loader2, Wand2, CheckSquare } from "lucide-react";
+import {
+  ArrowRight,
+  CheckSquare,
+  Download,
+  Loader2,
+  RotateCcw,
+  Send,
+  Wand2,
+} from "lucide-react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   generatePlanAction,
   publishPlanAction,
   updateAssignmentAction,
+  sendNotdienstRemindersAction,
+  resetPlanAction,
 } from "./actions";
 
 interface PlanViewProps {
   planId?: string;
   status?: NotdienstPlanStatus;
   days: {
-    date: string; // ISO
+    date: string;
     assignmentId: string | null;
     childId: string | null;
+    isOriginallyUnassigned?: boolean;
   }[];
   allChildren: {
     id: string;
     name: string;
     parentName: string;
+    familyId: string;
   }[];
+  familyStatuses: {
+    id: string;
+    name: string;
+    childCount: number;
+    selectedDays: {
+      iso: string;
+      label: string;
+    }[];
+  }[];
+  requiredDays: number;
+  respondedFamilies: number;
+  openFamilies: number;
+  totalFamilies: number;
+  totalAvailabilitySlots: number;
+  coverageFactor: number;
+  closureCount: number;
+  monthName: string;
+  year: number;
+  month: number;
 }
 
-export function PlanView({ planId, status, days, allChildren }: PlanViewProps) {
+export function PlanView({
+  planId,
+  status,
+  days,
+  allChildren,
+  familyStatuses,
+  requiredDays,
+  respondedFamilies,
+  openFamilies,
+  totalFamilies,
+  totalAvailabilitySlots,
+  coverageFactor,
+  closureCount,
+  monthName,
+  year,
+  month,
+}: PlanViewProps) {
   const [isPending, startTransition] = useTransition();
+  const [activeTab, setActiveTab] = useState<"preview" | "manual">("preview");
+  const [resetDialogOpen, setResetDialogOpen] = useState(false);
+
+  const responsePercent =
+    totalFamilies > 0 ? Math.round((respondedFamilies / totalFamilies) * 100) : 0;
 
   const handleGenerate = () => {
     startTransition(async () => {
-      const result = await generatePlanAction();
+      const result = await generatePlanAction(year, month);
       if ("error" in result && result.error) {
         toast.error(result.error as string);
       } else {
@@ -56,8 +117,32 @@ export function PlanView({ planId, status, days, allChildren }: PlanViewProps) {
     });
   };
 
+  const handleSendReminders = () => {
+    startTransition(async () => {
+      const result = await sendNotdienstRemindersAction(year, month);
+      if ("error" in result && result.error) {
+        toast.error(result.error as string);
+      } else if (result.success) {
+        toast.success(`${result.count} Erinnerungs-E-Mail(s) erfolgreich versendet.`);
+      }
+    });
+  };
+
+  const handleReset = () => {
+    if (!planId) return;
+    startTransition(async () => {
+      const result = await resetPlanAction(planId);
+      if ("error" in result && result.error) {
+        toast.error(result.error as string);
+      } else {
+        toast.success("Plan wurde erfolgreich zurückgesetzt.");
+        setResetDialogOpen(false);
+      }
+    });
+  };
+
   const handleAssignmentChange = (date: string, newChildId: string) => {
-    if (!planId || status !== "DRAFT") return;
+    if (!planId || (status !== "DRAFT" && status !== "PUBLISHED")) return;
     const valueToSet = newChildId === "empty" ? null : newChildId;
 
     startTransition(async () => {
@@ -70,21 +155,178 @@ export function PlanView({ planId, status, days, allChildren }: PlanViewProps) {
     });
   };
 
+  if (!planId && respondedFamilies === 0) {
+    return (
+      <Card className="border-dashed">
+        <div className="flex min-h-[280px] flex-col items-center justify-center p-8 text-center">
+          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+            <Wand2 className="h-7 w-7 [stroke-width:1.7]" />
+          </div>
+          <h3 className="mb-1 text-xl font-medium tracking-[-0.02em] text-[var(--ink)]">
+            Noch keine Verfügbarkeiten
+          </h3>
+          <p className="mb-5 max-w-md text-sm leading-6 text-[var(--ink-soft)]">
+            Für {monthName} hat noch keine Familie geantwortet. Verschicke
+            zuerst Erinnerungen, damit die automatische Planung belastbar ist.
+          </p>
+          <div className="flex flex-wrap justify-center gap-2">
+            <Button disabled={isPending} onClick={handleGenerate}>
+              Trotzdem generieren
+            </Button>
+            <Button variant="ghost" onClick={handleSendReminders} disabled={isPending}>
+              {isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
+              ) : (
+                <Send className="h-4 w-4 [stroke-width:1.7]" />
+              )}
+              Erinnerungen verschicken
+            </Button>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
   if (!planId) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed bg-card p-12 text-center">
-        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
-          <Wand2 className="h-6 w-6" />
+      <div className="space-y-5">
+        <div className="grid grid-cols-[minmax(0,2fr)_minmax(300px,1fr)] gap-5 max-[1050px]:grid-cols-1">
+          <Card className="p-0">
+            <div className="border-b border-[var(--hairline-soft)] px-6 py-5">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+                    Verfügbarkeiten Eltern
+                  </h2>
+                  <p className="mt-1 text-[13.5px] leading-5 text-[var(--ink-soft)]">
+                    {respondedFamilies} von {totalFamilies} Familien haben
+                    geantwortet · noch {openFamilies} offen
+                  </p>
+                </div>
+                <span className="text-sm font-semibold tabular-nums text-[var(--ink-soft)]">
+                  {responsePercent}%
+                </span>
+              </div>
+              <div className="mt-4 h-1 overflow-hidden rounded-full bg-[var(--accent-soft)]">
+                <div
+                  className="h-full rounded-full bg-[var(--accent)]"
+                  style={{ width: `${responsePercent}%` }}
+                />
+              </div>
+            </div>
+
+            <div className="divide-y divide-[var(--hairline-soft)]">
+              {familyStatuses.map((family) => (
+                <div
+                  key={family.id}
+                  className="group relative flex items-center gap-3 px-6 py-3.5 transition-colors hover:bg-[var(--surface-2)]"
+                >
+                  <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[11px] font-semibold uppercase text-[var(--accent-deep)]">
+                    {family.name.slice(0, 1)}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-[var(--ink)]">
+                      {family.name}
+                    </p>
+                    <p className="text-xs text-[var(--ink-muted)]">
+                      {family.childCount} Kind
+                      {family.childCount === 1 ? "" : "er"}
+                    </p>
+                  </div>
+                  <FamilyStatusPill selectedDays={family.selectedDays.length} />
+                  <div className="pointer-events-none absolute right-6 top-10 z-20 hidden max-w-xs rounded-lg bg-[oklch(0.22_0.015_45)] px-3 py-2 text-xs leading-5 text-white shadow-lg group-hover:block">
+                    {family.selectedDays.length > 0
+                      ? family.selectedDays.map((day) => day.label).join(" · ")
+                      : "Noch keine Tage markiert"}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="border-t border-[var(--hairline-soft)] px-6 py-4">
+              <Button
+                variant="ghost"
+                onClick={handleSendReminders}
+                disabled={isPending || openFamilies === 0}
+              >
+                {isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
+                ) : (
+                  <Send className="h-4 w-4 [stroke-width:1.7]" />
+                )}
+                Erinnerung an offene senden ({openFamilies})
+              </Button>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div>
+              <h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+                Bedarfs-Übersicht
+              </h2>
+              <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+                Planungsgrundlage für {monthName}.
+              </p>
+            </div>
+            <div className="mt-5 grid gap-4">
+              <PlanMetric
+                label={`Tage benötigt in ${monthName}`}
+                value={requiredDays}
+              />
+              <PlanMetric
+                label="Verfügbarkeiten gesamt"
+                value={totalAvailabilitySlots}
+              />
+              <PlanMetric
+                label="Überdeckung"
+                value={`${coverageFactor.toFixed(1)}×`}
+                badge="good"
+              />
+              <PlanMetric label="Schließtage" value={closureCount} />
+            </div>
+            <div className="mt-5 rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-3 text-sm leading-6 text-[var(--ink-soft)]">
+              {coverageFactor >= 1
+                ? "Du hast genug Verfügbarkeiten für einen Plan."
+                : "Die Verfügbarkeiten reichen noch nicht für einen belastbaren Plan."}
+            </div>
+          </Card>
         </div>
-        <h3 className="mb-1 text-lg font-semibold">Noch kein Plan vorhanden</h3>
-        <p className="mb-6 max-w-sm text-sm text-muted-foreground">
-          Generiere den Plan basierend auf den Verfügbarkeiten der Eltern
-          automatisch.
-        </p>
-        <Button onClick={handleGenerate} disabled={isPending}>
-          {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Plan automatisch generieren
-        </Button>
+
+        <Card variant="featured" className="sticky bottom-6 z-10 p-5">
+          <div className="flex items-center justify-between gap-5 max-[760px]:flex-col max-[760px]:items-start">
+            <div className="flex gap-4">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                <Wand2 className="h-5 w-5 [stroke-width:1.7]" />
+              </div>
+              <div>
+                <h3 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+                  Plan automatisch generieren
+                </h3>
+                <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+                  Verteilt {requiredDays} Notdiensttage fair auf{" "}
+                  {respondedFamilies} Familien.
+                </p>
+                <details className="mt-3 text-xs text-[var(--ink-soft)]">
+                  <summary className="cursor-pointer font-semibold text-[var(--accent-deep)]">
+                    Faire Verteilung berücksichtigt
+                  </summary>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    <span>☑ Quote pro Familie</span>
+                    <span>☑ Bevorzugte Tage</span>
+                    <span>☐ Geschwister-Familien zusammen</span>
+                  </div>
+                </details>
+              </div>
+            </div>
+            <Button onClick={handleGenerate} disabled={isPending}>
+              {isPending && (
+                <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
+              )}
+              Generieren
+              <ArrowRight className="h-4 w-4 [stroke-width:1.7]" />
+            </Button>
+          </div>
+        </Card>
       </div>
     );
   }
@@ -92,95 +334,333 @@ export function PlanView({ planId, status, days, allChildren }: PlanViewProps) {
   const isDraft = status === "DRAFT";
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between rounded-lg border bg-card p-4">
+    <div className="space-y-5">
+      <div className="print:hidden flex flex-wrap items-center justify-between gap-3">
+        <div className="inline-flex overflow-hidden rounded-full border border-[var(--hairline)] bg-[var(--surface)]">
+          <TabButton
+            active={activeTab === "preview"}
+            onClick={() => setActiveTab("preview")}
+          >
+            Plan-Vorschau
+          </TabButton>
+          <TabButton
+            active={activeTab === "manual"}
+            onClick={() => setActiveTab("manual")}
+            withDivider
+          >
+            Manuell zuweisen
+          </TabButton>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {isDraft && (
+            <Button onClick={handlePublish} disabled={isPending}>
+              {isPending && (
+                <Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
+              )}
+              <CheckSquare className="h-4 w-4 [stroke-width:1.7]" />
+              Plan veröffentlichen
+            </Button>
+          )}
+          <Button variant="ghost" onClick={() => window.print()}>
+            <Download className="h-4 w-4 [stroke-width:1.7]" />
+            Als PDF exportieren
+          </Button>
+          <Button
+            variant="ghost"
+            className="text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
+            onClick={() => setResetDialogOpen(true)}
+            disabled={isPending}
+          >
+            <RotateCcw className="h-4 w-4 [stroke-width:1.7]" />
+            Plan zurücksetzen
+          </Button>
+        </div>
+      </div>
+
+      <Card className="print:hidden flex items-center justify-between p-4">
         <div className="flex items-center gap-3">
           <Badge variant={isDraft ? "warning" : "success"}>
             {isDraft ? "Entwurf" : "Veröffentlicht"}
           </Badge>
-          <span className="text-sm text-muted-foreground">
+          <span className="text-sm text-[var(--ink-soft)]">
             {isDraft
               ? "Du kannst die Liste jetzt manuell anpassen."
               : "Dieser Plan ist verbindlich."}
           </span>
         </div>
+      </Card>
 
-        {isDraft && (
-          <Button onClick={handlePublish} disabled={isPending}>
-            {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            <CheckSquare className="mr-2 h-4 w-4" />
-            Plan veröffentlichen
-          </Button>
-        )}
-      </div>
+      {activeTab === "preview" ? (
+        <PlanPreviewTable days={days} allChildren={allChildren} />
+      ) : (
+        <ManualAssignmentTable
+          days={days}
+          allChildren={allChildren}
+          isDraft={isDraft}
+          isPending={isPending}
+          onAssignmentChange={handleAssignmentChange}
+        />
+      )}
 
-      <div className="rounded-lg border bg-card">
-        <div className="grid grid-cols-[1fr_2fr] border-b bg-muted/30 p-4 text-sm font-medium">
-          <div>Datum</div>
-          <div>Eingeteilte Familie</div>
-        </div>
-        <div className="divide-y">
-          {days.map((day) => {
-            const dateObj = new Date(day.date);
-            const isUnbesetzt = !day.childId;
-
-            return (
-              <div
-                key={day.date}
-                className="grid grid-cols-[1fr_2fr] items-center p-4 transition-colors hover:bg-muted/10"
-              >
-                <div className="font-medium">
-                  {format(dateObj, "EE, dd.MM.", { locale: de })}
-                </div>
-                <div>
-                  {isDraft ? (
-                    <select
-                      className="w-full max-w-sm rounded-md border border-input bg-background px-3 py-1.5 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      value={day.childId || "empty"}
-                      disabled={isPending}
-                      onChange={(e) =>
-                        handleAssignmentChange(day.date, e.target.value)
-                      }
-                    >
-                      <option value="empty" className="text-destructive">
-                        -- Unbesetzt --
-                      </option>
-                      {allChildren.map((c) => (
-                        <option key={c.id} value={c.id}>
-                          {c.parentName} ({c.name})
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <div>
-                      {isUnbesetzt ? (
-                        <span className="text-sm font-medium text-destructive">
-                          Unbesetzt!
-                        </span>
-                      ) : (
-                        <span className="text-sm">
-                          {
-                            allChildren.find((c) => c.id === day.childId)
-                              ?.parentName
-                          }{" "}
-                          <span className="text-muted-foreground">
-                            (
-                            {
-                              allChildren.find((c) => c.id === day.childId)
-                                ?.name
-                            }
-                            )
-                          </span>
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
+      <Dialog open={resetDialogOpen} onOpenChange={setResetDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Plan zurücksetzen?</DialogTitle>
+            <DialogDescription>
+              Möchtest du den Plan wirklich zurücksetzen? Alle Zuteilungen für diesen Monat gehen unwiderruflich verloren.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => setResetDialogOpen(false)}
+              disabled={isPending}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleReset}
+              disabled={isPending}
+            >
+              {isPending ? "Zurücksetzen..." : "Ja, Plan zurücksetzen"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
+
+function FamilyStatusPill({ selectedDays }: { selectedDays: number }) {
+  if (selectedDays === 0) {
+    return (
+      <span className="rounded-full border border-[var(--warn)] bg-[var(--warn-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--warn)]">
+        Noch nicht
+      </span>
+    );
+  }
+
+  return (
+    <span className="rounded-full border border-[var(--good)] bg-[var(--good-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--good)]">
+      {selectedDays} Tage
+    </span>
+  );
+}
+
+function PlanMetric({
+  label,
+  value,
+  badge,
+}: {
+  label: string;
+  value: number | string;
+  badge?: "good";
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 border-b border-[var(--hairline-soft)] pb-3 last:border-b-0 last:pb-0">
+      <span className="text-[13.5px] text-[var(--ink-soft)]">{label}</span>
+      {badge ? (
+        <span className="rounded-full border border-[var(--good)] bg-[var(--good-soft)] px-2.5 py-1 text-sm font-semibold text-[var(--good)] tabular-nums">
+          {value}
+        </span>
+      ) : (
+        <span className="text-2xl font-medium tracking-[-0.025em] text-[var(--ink)] tabular-nums">
+          {value}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  withDivider,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  withDivider?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={[
+        "h-9 px-4 text-[13px] font-semibold transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]",
+        withDivider ? "border-l border-[var(--hairline-soft)]" : "",
+        active
+          ? "bg-[var(--accent-soft)] text-[var(--accent-deep)]"
+          : "text-[var(--ink-soft)] hover:bg-[var(--surface-2)]",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}
+
+function PlanPreviewTable({
+  days,
+  allChildren,
+}: Pick<PlanViewProps, "days" | "allChildren">) {
+  return (
+    <Card className="overflow-hidden p-0">
+      <div className="grid grid-cols-[1.1fr_1fr_2fr_1.6fr_1fr] border-b border-[var(--hairline-soft)] bg-[var(--surface-2)] p-4 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+        <div>Datum</div>
+        <div>Wochentag</div>
+        <div>Zugewiesen</div>
+        <div>Backup</div>
+        <div>Status</div>
+      </div>
+      <div className="divide-y divide-[var(--hairline-soft)]">
+        {days.map((day) => {
+          const [yr, mo, dy] = day.date.slice(0, 10).split("-").map(Number);
+          const dateObj = new Date(yr, mo - 1, dy);
+          const assignedChild = allChildren.find(
+            (child) => child.id === day.childId,
+          );
+
+          return (
+            <div
+              key={day.date}
+              className="grid cursor-pointer grid-cols-[1.1fr_1fr_2fr_1.6fr_1fr] items-center p-4 text-sm transition-colors hover:bg-[var(--surface-2)]"
+            >
+              <div className="font-medium tabular-nums text-[var(--ink)]">
+                {format(dateObj, "dd.MM.", { locale: de })}
+              </div>
+              <div className="text-[var(--ink-soft)]">
+                {format(dateObj, "EEEE", { locale: de })}
+              </div>
+              <div className="text-[var(--ink)]">
+                {assignedChild ? assignedChild.parentName : "Unbesetzt"}
+                {assignedChild && (
+                  <span className="ml-1 text-[var(--ink-muted)]">
+                    ({assignedChild.name})
+                  </span>
+                )}
+              </div>
+              <div className="italic text-[var(--ink-faint)]">Noch offen</div>
+              <div>
+                <Badge variant={assignedChild ? "success" : "destructive"}>
+                  {assignedChild ? "Besetzt" : "Offen"}
+                </Badge>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
+
+function ManualAssignmentTable({
+  days,
+  allChildren,
+  isDraft,
+  isPending,
+  onAssignmentChange,
+}: Pick<PlanViewProps, "days" | "allChildren"> & {
+  isDraft: boolean;
+  isPending: boolean;
+  onAssignmentChange: (date: string, newChildId: string) => void;
+}) {
+  // Map childId to familyId for quick lookup
+  const childFamilyMap = useMemo(() => {
+    const map = new Map<string, string>();
+    allChildren.forEach((child) => {
+      if (child.familyId) {
+        map.set(child.id, child.familyId);
+      }
+    });
+    return map;
+  }, [allChildren]);
+
+  // Compute family assignment counts in real-time based on current selections
+  const familyAssignmentCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    days.forEach((day) => {
+      if (day.childId) {
+        const famId = childFamilyMap.get(day.childId);
+        if (famId) {
+          counts.set(famId, (counts.get(famId) ?? 0) + 1);
+        }
+      }
+    });
+    return counts;
+  }, [days, childFamilyMap]);
+
+  return (
+    <Card className="overflow-hidden p-0">
+      <div className="grid grid-cols-[1fr_2fr] border-b border-[var(--hairline-soft)] bg-[var(--surface-2)] p-4 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+        <div>Datum</div>
+        <div>Eingeteilte Familie</div>
+      </div>
+      <div className="divide-y divide-[var(--hairline-soft)]">
+        {days.map((day) => {
+          const [yr, mo, dy] = day.date.slice(0, 10).split("-").map(Number);
+          const dateObj = new Date(yr, mo - 1, dy);
+          const assignedChild = allChildren.find(
+            (child) => child.id === day.childId,
+          );
+
+          return (
+            <div
+              key={day.date}
+              className="grid grid-cols-[1fr_2fr] items-center p-4 transition-colors hover:bg-[var(--surface-2)]"
+            >
+              <div className="font-medium text-[var(--ink)]">
+                {format(dateObj, "EE, dd.MM.", { locale: de })}
+              </div>
+              <div>
+                {isDraft || day.isOriginallyUnassigned ? (
+                  <div className="flex flex-wrap items-center gap-2">
+                    <select
+                      className="w-full max-w-sm rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-1.5 text-sm text-[var(--ink)] ring-offset-[var(--surface)] hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+                      value={day.childId || "empty"}
+                      disabled={isPending}
+                      onChange={(event) =>
+                        onAssignmentChange(day.date, event.target.value)
+                      }
+                    >
+                      <option value="empty">-- Unbesetzt --</option>
+                      {allChildren.map((child) => {
+                        const famId = child.familyId;
+                        const count = famId ? (familyAssignmentCounts.get(famId) ?? 0) : 0;
+                        return (
+                          <option key={child.id} value={child.id}>
+                            {child.parentName} ({child.name}) — {count}x
+                          </option>
+                        );
+                      })}
+                    </select>
+                    {!isDraft && (
+                      <span className="text-[11px] font-semibold text-[oklch(0.60_0.18_45)] bg-[oklch(0.95_0.02_45)] border border-[oklch(0.85_0.05_45)] px-2 py-0.5 rounded-md shrink-0">
+                        Nachträglich änderbar
+                      </span>
+                    )}
+                  </div>
+                ) : assignedChild ? (
+                  <span className="text-sm text-[var(--ink)]">
+                    {assignedChild.parentName}{" "}
+                    <span className="text-[var(--ink-muted)]">
+                      ({assignedChild.name})
+                    </span>
+                  </span>
+                ) : (
+                  <span className="text-sm font-medium text-[var(--danger)]">
+                    Unbesetzt!
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}

src/app/dashboard/page.tsx

@@ -1,83 +1,83 @@
 import Link from "next/link";
+import type { ComponentType } from "react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Users, CalendarCheck2, ShieldCheck, AlertTriangle, ClipboardList } from "lucide-react";
-import { DutyAssignmentStatus, UserRole, NotdienstPlanStatus, TerminStatus } from "@prisma/client";
+import {
+  CalendarCheck2,
+  CalendarClock,
+  ChevronRight,
+  Clock3,
+  ListTodo,
+  Users,
+  type LucideProps,
+} from "lucide-react";
+import { UserRole } from "@prisma/client";
 
 import { requireKitaSession } from "@/lib/auth-utils";
+import { getTargetMonthData } from "@/lib/date-utils";
 import { prisma } from "@/lib/prisma";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+import { Stat } from "@/components/ui/stat";
 import { OnboardingDialog } from "@/components/OnboardingDialog";
-import { AlertButton } from "./alert-button";
-import { AbsenceCard } from "./absence-card";
-import { NewsTicker } from "./news-ticker";
-import { RsvpActionCard } from "./rsvp-action-card";
+import { AbsenceCard, UpcomingAbsencesCard } from "./absence-card";
 
 export const metadata = { title: "Übersicht · Kita-Planer" };
 
 export default async function DashboardPage() {
   const session = await requireKitaSession();
   const now = new Date();
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+
+  const targetData = getTargetMonthData();
+  const targetMonthStart = new Date(
+    Date.UTC(targetData.targetYear, targetData.targetMonth - 1, 1),
+  );
+  const targetMonthEnd = new Date(
+    Date.UTC(targetData.targetYear, targetData.targetMonth, 1),
+  );
 
   const kita = await prisma.kita.findUniqueOrThrow({
     where: { id: session.user.kitaId },
     select: {
       name: true,
       notdienstModuleEnabled: true,
+      notdienstMinPerChildPerMonth: true,
       terminModuleEnabled: true,
       adressbuchModuleEnabled: true,
     },
   });
 
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  // Schnelle Statistiken und persönliche Dienste für die Übersicht.
   const [
     familyCount,
     childCount,
-    upcomingDuties,
+    todayAbsenceCount,
+    notdienstAvailabilityCount,
     onboardingUser,
     absenceChildren,
     upcomingAbsences,
-    latestAnnouncements,
   ] = await Promise.all([
     prisma.family.count({
       where: { kitaId: session.user.kitaId },
     }),
     prisma.child.count({
-      where: { kitaId: session.user.kitaId },
+      where: { kitaId: session.user.kitaId, active: true },
+    }),
+    prisma.absence.count({
+      where: {
+        kitaId: session.user.kitaId,
+        startDate: { lte: today },
+        endDate: { gte: today },
+      },
+    }),
+    prisma.notdienstAvailability.count({
+      where: {
+        kitaId: session.user.kitaId,
+        date: {
+          gte: targetMonthStart,
+          lt: targetMonthEnd,
+        },
+      },
     }),
-    session.user.familyId
-      ? prisma.dutyAssignment.findMany({
-          where: {
-            kitaId: session.user.kitaId,
-            familyId: session.user.familyId,
-            status: DutyAssignmentStatus.PLANNED,
-            endDate: { gte: today },
-          },
-          select: {
-            id: true,
-            startDate: true,
-            endDate: true,
-            dutyType: {
-              select: {
-                name: true,
-              },
-            },
-          },
-          orderBy: { startDate: "asc" },
-          take: 5,
-        })
-      : Promise.resolve([]),
     prisma.user.findFirstOrThrow({
       where: {
         id: session.user.id,
@@ -142,101 +142,25 @@ export default async function DashboardPage() {
           take: 6,
         })
       : Promise.resolve([]),
-    prisma.announcement.findMany({
-      where: { kitaId: session.user.kitaId },
-      select: {
-        id: true,
-        title: true,
-        content: true,
-        createdAt: true,
-        author: {
-          select: {
-            firstName: true,
-            lastName: true,
-          },
-        },
-        attachments: {
-          select: {
-            id: true,
-            fileName: true,
-            fileUrl: true,
-            fileType: true,
-          },
-        },
-        reads: {
-          where: { userId: session.user.id },
-          select: { id: true },
-          take: 1,
-        },
-      },
-      orderBy: { createdAt: "desc" },
-      take: 3,
-    }),
   ]);
 
-  const familyChildIds = absenceChildren.map((child) => child.id);
-  const openRsvpTermine =
-    session.user.familyId && familyChildIds.length > 0
-      ? await prisma.termin.findMany({
-          where: {
-            kitaId: session.user.kitaId,
-            status: TerminStatus.CONFIRMED,
-            requiresRsvp: true,
-            OR: [
-              { rsvpDeadline: { gt: now } },
-              { rsvpDeadline: null, startDate: { gt: now } },
-            ],
-          },
-          select: {
-            id: true,
-            title: true,
-            startDate: true,
-            rsvpDeadline: true,
-            participations: {
-              where: {
-                childId: { in: familyChildIds },
-              },
-              select: {
-                childId: true,
-                status: true,
-              },
-            },
-          },
-          orderBy: { startDate: "asc" },
-          take: 5,
-        })
-      : [];
-
-  const rsvpActionEvents = openRsvpTermine
-    .map((termin) => {
-      const statusByChildId = new Map(
-        termin.participations.map((participation) => [
-          participation.childId,
-          participation.status,
-        ]),
-      );
-
-      return {
-        id: termin.id,
-        title: termin.title,
-        startDate: termin.startDate.toISOString(),
-        rsvpDeadline: termin.rsvpDeadline?.toISOString() ?? null,
-        children: absenceChildren.map((child) => ({
-          id: child.id,
-          name: `${child.firstName} ${child.lastName}`,
-          status: statusByChildId.get(child.id) ?? null,
-        })),
-      };
-    })
-    .filter((termin) => termin.children.some((child) => !child.status));
-
-  const isAdmin =
-    session.user.role === UserRole.ADMIN ||
-    session.user.role === UserRole.SUPERADMIN;
   const canReportAbsences = session.user.role !== UserRole.ERZIEHER;
+  const requiredNotdienstDays = Math.max(
+    childCount * kita.notdienstMinPerChildPerMonth,
+    1,
+  );
+  const openNotdienstDays = Math.max(
+    requiredNotdienstDays - notdienstAvailabilityCount,
+    0,
+  );
+  const todayPresentCount = Math.max(childCount - todayAbsenceCount, 0);
+  const firstName =
+    session.user.name?.split(" ")[0] ??
+    session.user.email?.split("@")[0] ??
+    "zusammen";
 
   return (
-    <div className="px-8 py-8">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
       <OnboardingDialog
         user={{
           phone: onboardingUser.phone,
@@ -253,249 +177,153 @@ export default async function DashboardPage() {
         }
       />
 
-      <div className="mb-8">
-        <h1 className="text-2xl font-semibold tracking-tight">
-          Willkommen, {session.user.name?.split(" ")[0] ?? "zusammen"}!
-        </h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Hier ist die Übersicht für <strong>{kita.name}</strong>.
-        </p>
-      </div>
-
-      <RsvpActionCard events={rsvpActionEvents} />
-
-      <NewsTicker
-        items={latestAnnouncements.map((announcement) => ({
-          id: announcement.id,
-          title: announcement.title,
-          content: announcement.content,
-          createdAt: format(announcement.createdAt, "dd.MM.yyyy", {
-            locale: de,
-          }),
-          authorName: `${announcement.author.firstName} ${announcement.author.lastName}`,
-          isUnread: announcement.reads.length === 0,
-          attachments: announcement.attachments.map((attachment) => ({
-            id: attachment.id,
-            fileName: attachment.fileName,
-            fileUrl: attachment.fileUrl,
-            fileType: attachment.fileType,
-          })),
-        }))}
-      />
-
-      {/* Heutiger Notdienst (Nur für Admins/Koordinatoren) */}
-      {isAdmin && (
-        <div className="mb-8">
-          <TodaysNotdienstCard kitaId={session.user.kitaId!} />
+      <header className="mb-9 flex items-start justify-between gap-8">
+        <div>
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            ÜBERSICHT · {kita.name}
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            Willkommen{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              zurück
+            </em>
+            , {firstName}.
+          </h1>
+          <p className="mt-3 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
+            Heute, {format(now, "EEEE, d. MMMM yyyy", { locale: de })}. Hier
+            siehst du auf einen Blick, was bei {kita.name} ansteht und kannst
+            dein Kind schnell für Abwesenheiten melden.
+          </p>
         </div>
-      )}
+        <div className="mt-9 inline-flex shrink-0 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-4 py-2 text-[13px] font-semibold text-[var(--ink-soft)]">
+          <Clock3 className="h-3.5 w-3.5 [stroke-width:1.7]" />
+          {format(now, "EEE, d. MMM yyyy", { locale: de })}
+        </div>
+      </header>
 
-      {canReportAbsences && (
-        <AbsenceCard
-          today={format(today, "yyyy-MM-dd")}
-          childOptions={absenceChildren.map((child) => ({
-            id: child.id,
-            name: `${child.firstName} ${child.lastName}`,
-          }))}
-          absences={upcomingAbsences.map((absence) => ({
-            id: absence.id,
-            childName: `${absence.child.firstName} ${absence.child.lastName}`,
-            reason: absence.reason,
-            note: absence.note,
-            startDate: format(absence.startDate, "yyyy-MM-dd"),
-            endDate: format(absence.endDate, "yyyy-MM-dd"),
-          }))}
-        />
-      )}
+      <div className="grid grid-cols-[minmax(0,1fr)_360px] gap-5 max-[1100px]:grid-cols-1">
+        <div className="min-w-0">
+          {canReportAbsences ? (
+            <AbsenceCard
+              today={format(today, "yyyy-MM-dd")}
+              childOptions={absenceChildren.map((child) => ({
+                id: child.id,
+                name: `${child.firstName} ${child.lastName}`,
+              }))}
+              absences={upcomingAbsences.map((absence) => ({
+                id: absence.id,
+                childName: `${absence.child.firstName} ${absence.child.lastName}`,
+                reason: absence.reason,
+                note: absence.note,
+                startDate: format(absence.startDate, "yyyy-MM-dd"),
+                endDate: format(absence.endDate, "yyyy-MM-dd"),
+              }))}
+            />
+          ) : null}
+        </div>
 
-      {upcomingDuties.length > 0 && (
-        <Card className="mb-8 border-emerald-200 bg-emerald-50/50">
-          <CardHeader className="pb-3">
-            <CardTitle className="flex items-center gap-2 text-lg">
-              <ClipboardList className="h-5 w-5 text-emerald-700" />
-              Deine anstehenden Dienste
-            </CardTitle>
-            <CardDescription>
-              Die nächsten Einteilungen für deinen Haushalt.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {upcomingDuties.map((duty) => (
-              <div key={duty.id} className="rounded-md border bg-background p-3">
-                <p className="font-medium">{duty.dutyType.name}</p>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  {format(duty.startDate, "dd.MM.", { locale: de })} bis{" "}
-                  {format(duty.endDate, "dd.MM.yyyy", { locale: de })}
-                </p>
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Statistik-Kacheln */}
-      <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <StatCard
-          label="Familien"
-          value={familyCount}
-          description="registrierte Familien"
-          icon={<Users className="h-5 w-5 text-muted-foreground" />}
-        />
-        <StatCard
-          label="Kinder"
-          value={childCount}
-          description="in der Einrichtung"
-          icon={<ShieldCheck className="h-5 w-5 text-muted-foreground" />}
-        />
+        <aside>
+          <UpcomingAbsencesCard
+            absences={upcomingAbsences.map((absence) => ({
+              id: absence.id,
+              childName: `${absence.child.firstName} ${absence.child.lastName}`,
+              reason: absence.reason,
+              note: absence.note,
+              startDate: format(absence.startDate, "yyyy-MM-dd"),
+              endDate: format(absence.endDate, "yyyy-MM-dd"),
+            }))}
+          />
+        </aside>
       </div>
 
-      {/* Schnell-Aktionen für Admins */}
-      {isAdmin && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Schnellstart</CardTitle>
-            <CardDescription>
-              Die nächsten Schritte, um deine Kita einzurichten.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-wrap gap-3">
-            <Button asChild size="sm">
-              <Link href="/dashboard/families">
-                <Users className="mr-2 h-4 w-4" />
-                Familien verwalten
-              </Link>
-            </Button>
-            {kita.terminModuleEnabled && (
-              <Button asChild size="sm" variant="outline">
-                <Link href="/dashboard/kalender">
-                  <CalendarCheck2 className="mr-2 h-4 w-4" />
-                  Terminkalender
-                </Link>
-              </Button>
-            )}
-          </CardContent>
-        </Card>
-      )}
+      <section className="mt-5 grid grid-cols-4 gap-3.5 max-[1100px]:grid-cols-2 max-[640px]:grid-cols-1">
+        <Stat label="Familien" value={familyCount} hint="registrierte Familien" />
+        <Stat label="Kinder" value={childCount} hint="in der Einrichtung" />
+        <Stat
+          label={`Notdienst ${targetData.monthName}`}
+          value={notdienstAvailabilityCount}
+          suffix={`/ ${requiredNotdienstDays}`}
+          hint={`Tage abgedeckt · ${openNotdienstDays} offen`}
+        />
+        <Stat
+          label="Heute anwesend"
+          value={todayPresentCount}
+          hint="Kinder in der Kita"
+        />
+      </section>
+
+      <section className="mt-7">
+        <h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
+          Schnellstart
+        </h2>
+        <p className="mt-1 text-[13.5px] text-[var(--ink-soft)]">
+          Häufige Aktionen für Vorstand und Koordination.
+        </p>
+        <div className="mt-4 grid grid-cols-3 gap-3 max-[1100px]:grid-cols-1">
+          <QuickCard
+            href="/dashboard/families"
+            icon={Users}
+            title="Familien verwalten"
+            sub="Familien anlegen, Kinder zuordnen, Kontakte pflegen."
+          />
+          {kita.terminModuleEnabled ? (
+            <QuickCard
+              href="/dashboard/kalender"
+              icon={CalendarClock}
+              title="Terminkalender"
+              sub="Schließtage, Elternabende und Feste planen."
+            />
+          ) : null}
+          {kita.notdienstModuleEnabled ? (
+            <QuickCard
+              href="/dashboard/notdienst/plan"
+              icon={ListTodo}
+              title="Notdienst-Planung"
+              sub="Verfügbarkeiten überblicken und Dienste zuweisen."
+            />
+          ) : null}
+          {kita.adressbuchModuleEnabled ? (
+            <QuickCard
+              href="/dashboard/adressbuch"
+              icon={CalendarCheck2}
+              title="Adressbuch"
+              sub="Kontakte der Kita-Gemeinschaft schnell finden."
+            />
+          ) : null}
+        </div>
+      </section>
     </div>
   );
 }
 
-function StatCard({
-  label,
-  value,
-  description,
-  icon,
+function QuickCard({
+  href,
+  icon: Icon,
+  title,
+  sub,
 }: {
-  label: string;
-  value: number;
-  description: string;
-  icon: React.ReactNode;
+  href: string;
+  icon: ComponentType<LucideProps>;
+  title: string;
+  sub: string;
 }) {
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-sm font-medium text-muted-foreground">
-          {label}
-        </CardTitle>
-        {icon}
-      </CardHeader>
-      <CardContent>
-        <div className="text-3xl font-bold">{value}</div>
-        <p className="mt-1 text-xs text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
-  );
-}
-
-async function TodaysNotdienstCard({ kitaId }: { kitaId: string }) {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  // Wir suchen das Assignment für heute, aber nur wenn der Plan PUBLISHED ist
-  const assignment = await prisma.notdienstAssignment.findFirst({
-    where: {
-      kitaId,
-      date: today,
-      plan: { status: NotdienstPlanStatus.PUBLISHED },
-    },
-    select: {
-      id: true,
-      child: {
-        select: {
-          firstName: true,
-          lastName: true,
-          family: {
-            select: {
-              name: true,
-              users: {
-                select: {
-                  firstName: true,
-                  lastName: true,
-                },
-              },
-            },
-          },
-        },
-      },
-      alerts: {
-        select: {
-          status: true,
-        },
-      },
-    },
-  });
-
-  if (!assignment) return null;
-
-  const parentNames = assignment.child.family.users
-    .map((parent) => `${parent.firstName} ${parent.lastName}`)
-    .join(", ");
-  const existingAlert = assignment.alerts[0]; // Kann PENDING, CONFIRMED oder CANCELLED sein
-
-  return (
-    <Card className="border-primary/20 bg-primary/5">
-      <CardHeader className="pb-3">
-        <CardTitle className="text-lg flex items-center gap-2">
-          <AlertTriangle className="h-5 w-5 text-primary" />
-          Heutiger Notdienst
-        </CardTitle>
-        <CardDescription>
-          Laut dem veröffentlichten Plan ist heute folgende Familie eingeteilt:
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <p className="font-medium text-base">
-            {parentNames || assignment.child.family.name}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            Kind: {assignment.child.firstName} {assignment.child.lastName}
-          </p>
-        </div>
-
-        <div className="flex items-center gap-3">
-          {existingAlert ? (
-            <Badge
-              variant={
-                existingAlert.status === "CONFIRMED"
-                  ? "success"
-                  : existingAlert.status === "PENDING"
-                    ? "warning"
-                    : "destructive"
-              }
-              className="px-3 py-1 text-sm"
-            >
-              {existingAlert.status === "CONFIRMED"
-                ? "Einsatz bestätigt"
-                : existingAlert.status === "PENDING"
-                  ? "Wartet auf Bestätigung"
-                  : "Abgebrochen"}
-            </Badge>
-          ) : (
-            <AlertButton assignmentId={assignment.id} />
-          )}
-        </div>
-      </CardContent>
-    </Card>
+    <Link
+      href={href}
+      className="group flex min-h-[86px] items-center gap-4 rounded-[14px] border border-[var(--hairline)] bg-[var(--surface)] p-4 transition hover:border-[var(--accent-mid)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
+    >
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+        <Icon className="h-4.5 w-4.5 [stroke-width:1.7]" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-semibold text-[var(--ink)]">
+          {title}
+        </p>
+        <p className="mt-1 line-clamp-2 text-[13px] leading-5 text-[var(--ink-soft)]">
+          {sub}
+        </p>
+      </div>
+      <ChevronRight className="h-4 w-4 shrink-0 text-[var(--ink-faint)] transition group-hover:translate-x-1 group-hover:text-[var(--accent-deep)]" />
+    </Link>
   );
 }

src/app/dashboard/profil/_components/contact-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useTransition } from "react";
+import { useRouter } from "next/navigation";
 import { Loader2, Save } from "lucide-react";
 import { toast } from "sonner";
 
@@ -15,10 +16,12 @@ type ContactFormProps = {
     street: string | null;
     postalCode: string | null;
     city: string | null;
+    directoryOptIn: boolean;
   };
 };
 
 export function ContactForm({ contact }: ContactFormProps) {
+  const router = useRouter();
   const [isPending, startTransition] = useTransition();
 
   function handleSubmit(formData: FormData) {
@@ -28,6 +31,7 @@ export function ContactForm({ contact }: ContactFormProps) {
         street: String(formData.get("street") ?? ""),
         postalCode: String(formData.get("postalCode") ?? ""),
         city: String(formData.get("city") ?? ""),
+        directoryOptIn: formData.get("directoryOptIn") === "on",
       });
 
       if (result.error) {
@@ -36,13 +40,19 @@ export function ContactForm({ contact }: ContactFormProps) {
       }
 
       toast.success("Kontaktdaten gespeichert.");
+      router.refresh();
     });
   }
 
   return (
     <form action={handleSubmit} className="grid gap-4">
       <div className="grid gap-2">
-        <Label htmlFor="phone">Telefonnummer</Label>
+        <Label
+          htmlFor="phone"
+          className="text-xs font-semibold text-[var(--ink-soft)]"
+        >
+          Telefonnummer
+        </Label>
         <Input
           id="phone"
           name="phone"
@@ -53,7 +63,12 @@ export function ContactForm({ contact }: ContactFormProps) {
       </div>
 
       <div className="grid gap-2">
-        <Label htmlFor="street">Straße und Hausnummer</Label>
+        <Label
+          htmlFor="street"
+          className="text-xs font-semibold text-[var(--ink-soft)]"
+        >
+          Straße und Hausnummer
+        </Label>
         <Input
           id="street"
           name="street"
@@ -62,9 +77,14 @@ export function ContactForm({ contact }: ContactFormProps) {
         />
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-[120px_1fr]">
+      <div className="grid gap-3 sm:grid-cols-[100px_1fr]">
         <div className="grid gap-2">
-          <Label htmlFor="postalCode">PLZ</Label>
+          <Label
+            htmlFor="postalCode"
+            className="text-xs font-semibold text-[var(--ink-soft)]"
+          >
+            PLZ
+          </Label>
           <Input
             id="postalCode"
             name="postalCode"
@@ -73,7 +93,12 @@ export function ContactForm({ contact }: ContactFormProps) {
           />
         </div>
         <div className="grid gap-2">
-          <Label htmlFor="city">Ort</Label>
+          <Label
+            htmlFor="city"
+            className="text-xs font-semibold text-[var(--ink-soft)]"
+          >
+            Ort
+          </Label>
           <Input
             id="city"
             name="city"
@@ -83,7 +108,23 @@ export function ContactForm({ contact }: ContactFormProps) {
         </div>
       </div>
 
-      <div className="flex justify-end">
+      <div className="flex items-center gap-2 mt-2">
+        <input
+          type="checkbox"
+          id="directoryOptIn"
+          name="directoryOptIn"
+          defaultChecked={contact.directoryOptIn}
+          className="rounded border-[var(--hairline)] accent-[var(--accent-deep)]"
+        />
+        <Label
+          htmlFor="directoryOptIn"
+          className="font-normal cursor-pointer text-xs text-[var(--ink-soft)]"
+        >
+          Im Adressbuch anzeigen (Datenschutzerklärung)
+        </Label>
+      </div>
+
+      <div className="flex justify-end pt-1">
         <Button type="submit" disabled={isPending}>
           {isPending ? (
             <Loader2 className="h-4 w-4 animate-spin" />

src/app/dashboard/profil/_components/delete-account-dialog.tsx

@@ -23,7 +23,7 @@ export function DeleteAccountDialog() {
   const [confirmText, setConfirmText] = useState("");
   const [isPending, startTransition] = useTransition();
 
-  const isConfirmed = confirmText === "LÖSCHEN";
+  const isConfirmed = confirmText === "DELETE";
 
   const handleDelete = () => {
     if (!isConfirmed) return;
@@ -44,18 +44,19 @@ export function DeleteAccountDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="destructive" className="w-full sm:w-auto">
-          <AlertTriangle className="h-4 w-4 mr-2" />
+          <AlertTriangle className="h-4 w-4" />
           Account & Daten endgültig löschen
         </Button>
       </DialogTrigger>
-      <DialogContent className="border-destructive/30">
+      <DialogContent className="border-[var(--danger)]">
         <DialogHeader>
-          <DialogTitle className="text-destructive flex items-center gap-2">
+          <DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
             <AlertTriangle className="h-5 w-5" />
             Gefahrenzone: Account löschen
           </DialogTitle>
-          <DialogDescription className="text-base pt-2">
-            Diese Aktion kann <strong className="text-foreground">nicht</strong> rückgängig gemacht werden. 
+          <DialogDescription className="pt-2 text-base">
+            Diese Aktion kann <strong className="text-[var(--ink)]">nicht</strong>{" "}
+            rückgängig gemacht werden.
             Wenn du das letzte Elternteil im Haushalt bist, wird die gesamte
             Familie inklusive Kinder gelöscht. Gibt es ein weiteres Elternteil,
             bleibt der Haushalt für diese Person erhalten und nur dein Account
@@ -63,16 +64,17 @@ export function DeleteAccountDialog() {
           </DialogDescription>
         </DialogHeader>
         
-        <div className="bg-destructive/10 text-destructive-foreground p-3 text-sm rounded-md my-2 border border-destructive/20">
-          Bitte tippe das Wort <strong>LÖSCHEN</strong> in das Feld unten ein, um den Vorgang zu bestätigen.
+        <div className="my-2 rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
+          Bitte tippe <strong>DELETE</strong> in das Feld unten ein, um den
+          Vorgang zu bestätigen.
         </div>
 
         <div className="grid gap-2 py-4">
           <Input 
             value={confirmText}
             onChange={(e) => setConfirmText(e.target.value)}
-            placeholder="LÖSCHEN"
-            className="border-destructive/50 focus-visible:ring-destructive"
+            placeholder="DELETE"
+            className="border-[var(--danger)] focus-visible:ring-[var(--focus-ring)]"
           />
         </div>
 

src/app/dashboard/profil/_components/my-children-manager.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { type FormEvent, useState, useTransition } from "react";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import {
   Dialog,
   DialogContent,
@@ -16,6 +17,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { getChildBirthdateRange } from "@/lib/child-birthdate";
 import { createMyChild, deleteMyChild, updateMyChild } from "../actions";
 
 export type MyChild = {
@@ -25,6 +27,18 @@ export type MyChild = {
   dateOfBirth: string | null;
 };
 
+type ChildPayload = {
+  firstName: string;
+  lastName: string;
+  dateOfBirth: string;
+};
+
+const emptyChildPayload: ChildPayload = {
+  firstName: "",
+  lastName: "",
+  dateOfBirth: "",
+};
+
 export function MyChildrenManager({
   items,
   canManage,
@@ -33,38 +47,41 @@ export function MyChildrenManager({
   canManage: boolean;
 }) {
   const [createOpen, setCreateOpen] = useState(false);
+  const [createPayload, setCreatePayload] =
+    useState<ChildPayload>(emptyChildPayload);
   const [editingChild, setEditingChild] = useState<MyChild | null>(null);
+  const [editPayload, setEditPayload] =
+    useState<ChildPayload>(emptyChildPayload);
+  const [childToDelete, setChildToDelete] = useState<MyChild | null>(null);
   const [isPending, startTransition] = useTransition();
 
-  function payloadFromForm(formData: FormData) {
-    return {
-      firstName: String(formData.get("firstName") ?? ""),
-      lastName: String(formData.get("lastName") ?? ""),
-      dateOfBirth: String(formData.get("dateOfBirth") ?? ""),
-    };
+  function openEditor(child: MyChild) {
+    setEditingChild(child);
+    setEditPayload(payloadFromChild(child));
   }
 
-  function handleCreate(formData: FormData) {
+  function handleCreate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
     startTransition(async () => {
-      const result = await createMyChild(payloadFromForm(formData));
+      const result = await createMyChild(createPayload);
       if (result.error) {
         toast.error(result.error);
         return;
       }
 
       toast.success("Kind angelegt.");
+      setCreatePayload(emptyChildPayload);
       setCreateOpen(false);
     });
   }
 
-  function handleUpdate(formData: FormData) {
+  function handleUpdate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
     if (!editingChild) return;
 
     startTransition(async () => {
-      const result = await updateMyChild(
-        editingChild.id,
-        payloadFromForm(formData),
-      );
+      const result = await updateMyChild(editingChild.id, editPayload);
       if (result.error) {
         toast.error(result.error);
         return;
@@ -76,11 +93,6 @@ export function MyChildrenManager({
   }
 
   function handleDelete(child: MyChild) {
-    const confirmed = confirm(
-      `${child.firstName} ${child.lastName} wirklich entfernen?`,
-    );
-    if (!confirmed) return;
-
     startTransition(async () => {
       const result = await deleteMyChild(child.id);
       if (result.error) {
@@ -89,37 +101,52 @@ export function MyChildrenManager({
       }
 
       toast.success("Kind entfernt.");
+      setChildToDelete(null);
     });
   }
 
   return (
     <div className="space-y-3">
       {items.length === 0 ? (
-        <p className="text-sm text-muted-foreground">Keine Kinder verknüpft.</p>
+        <p className="text-sm italic text-[var(--ink-faint)]">
+          Keine Kinder verknüpft.
+        </p>
       ) : (
         <div className="flex flex-col gap-2">
           {items.map((child) => (
             <div
               key={child.id}
-              className="flex items-center justify-between gap-3 rounded-md bg-muted/50 p-2"
+              className="flex items-center justify-between gap-3 rounded-lg bg-[var(--surface-2)] p-[10px_12px]"
             >
-              <div>
-                <p className="font-medium">
-                  {child.firstName} {child.lastName}
-                </p>
-                {child.dateOfBirth && (
-                  <p className="text-xs text-muted-foreground">
-                    Geboren am {new Date(child.dateOfBirth).toLocaleDateString("de-DE")}
+              <div className="flex min-w-0 items-center gap-3">
+                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
+                  {getInitials(child)}
+                </div>
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-semibold text-[var(--ink)]">
+                    {child.firstName} {child.lastName}
                   </p>
-                )}
+                  {child.dateOfBirth ? (
+                    <p className="text-xs text-[var(--ink-soft)]">
+                      Geboren am{" "}
+                      {new Date(child.dateOfBirth).toLocaleDateString("de-DE")}
+                    </p>
+                  ) : (
+                    <p className="text-xs italic text-[var(--ink-faint)]">
+                      Geburtsdatum fehlt
+                    </p>
+                  )}
+                </div>
               </div>
               <div className="flex shrink-0 items-center gap-1">
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
-                  onClick={() => setEditingChild(child)}
+                  className="h-7 w-7"
+                  onClick={() => openEditor(child)}
                   disabled={isPending || !canManage}
+                  aria-label="Kind bearbeiten"
                 >
                   <Pencil className="h-4 w-4" />
                 </Button>
@@ -127,9 +154,10 @@ export function MyChildrenManager({
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="text-destructive hover:text-destructive"
-                  onClick={() => handleDelete(child)}
+                  className="h-7 w-7 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
+                  onClick={() => setChildToDelete(child)}
                   disabled={isPending || !canManage}
+                  aria-label="Kind löschen"
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
@@ -140,22 +168,32 @@ export function MyChildrenManager({
       )}
 
       {canManage ? (
-        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <Dialog
+          open={createOpen}
+          onOpenChange={(open) => {
+            setCreateOpen(open);
+            if (!open) setCreatePayload(emptyChildPayload);
+          }}
+        >
           <DialogTrigger asChild>
-            <Button type="button" variant="outline" size="sm" className="gap-2">
+            <Button type="button" variant="pill" size="sm" className="w-full">
               <Plus className="h-4 w-4" />
               Kind hinzufügen
             </Button>
           </DialogTrigger>
           <DialogContent>
-            <form action={handleCreate}>
+            <form onSubmit={handleCreate}>
               <DialogHeader>
                 <DialogTitle>Kind hinzufügen</DialogTitle>
                 <DialogDescription>
                   Dieses Kind wird mit deinem Haushalt verknüpft.
                 </DialogDescription>
               </DialogHeader>
-              <ChildFields />
+              <ChildFields
+                idPrefix="create-child"
+                value={createPayload}
+                onChange={setCreatePayload}
+              />
               <DialogFooter>
                 <Button
                   type="button"
@@ -173,7 +211,7 @@ export function MyChildrenManager({
           </DialogContent>
         </Dialog>
       ) : (
-        <p className="text-xs text-muted-foreground">
+        <p className="text-xs italic text-[var(--ink-faint)]">
           Dein Account ist noch keinem Haushalt zugeordnet.
         </p>
       )}
@@ -183,11 +221,17 @@ export function MyChildrenManager({
         onOpenChange={(open) => !open && setEditingChild(null)}
       >
         <DialogContent>
-          <form action={handleUpdate}>
+          <form onSubmit={handleUpdate}>
             <DialogHeader>
               <DialogTitle>Kind bearbeiten</DialogTitle>
             </DialogHeader>
-            {editingChild && <ChildFields child={editingChild} />}
+            {editingChild && (
+              <ChildFields
+                idPrefix="edit-child"
+                value={editPayload}
+                onChange={setEditPayload}
+              />
+            )}
             <DialogFooter>
               <Button
                 type="button"
@@ -204,40 +248,107 @@ export function MyChildrenManager({
           </form>
         </DialogContent>
       </Dialog>
+
+      <ConfirmDialog
+        open={!!childToDelete}
+        onOpenChange={(open) => {
+          if (!open) setChildToDelete(null);
+        }}
+        title="Kind entfernen?"
+        description={
+          childToDelete
+            ? `${childToDelete.firstName} ${childToDelete.lastName} wird aus deinem Haushalt entfernt.`
+            : "Dieses Kind wird aus deinem Haushalt entfernt."
+        }
+        confirmLabel="Entfernen"
+        pendingLabel="Wird entfernt..."
+        isPending={isPending}
+        onConfirm={() => {
+          if (childToDelete) handleDelete(childToDelete);
+        }}
+      />
     </div>
   );
 }
 
-function ChildFields({ child }: { child?: MyChild }) {
+function ChildFields({
+  idPrefix,
+  value,
+  onChange,
+}: {
+  idPrefix: string;
+  value: ChildPayload;
+  onChange: (value: ChildPayload) => void;
+}) {
+  const birthdateRange = getChildBirthdateRange();
+
   return (
     <div className="grid gap-4 py-4">
       <div className="grid gap-2">
-        <Label htmlFor="child-firstName">Vorname</Label>
+        <Label
+          htmlFor={`${idPrefix}-firstName`}
+          className="text-xs font-semibold text-[var(--ink-soft)]"
+        >
+          Vorname
+        </Label>
         <Input
-          id="child-firstName"
+          id={`${idPrefix}-firstName`}
           name="firstName"
-          defaultValue={child?.firstName ?? ""}
+          value={value.firstName}
+          onChange={(event) =>
+            onChange({ ...value, firstName: event.target.value })
+          }
           required
         />
       </div>
       <div className="grid gap-2">
-        <Label htmlFor="child-lastName">Nachname</Label>
+        <Label
+          htmlFor={`${idPrefix}-lastName`}
+          className="text-xs font-semibold text-[var(--ink-soft)]"
+        >
+          Nachname
+        </Label>
         <Input
-          id="child-lastName"
+          id={`${idPrefix}-lastName`}
           name="lastName"
-          defaultValue={child?.lastName ?? ""}
+          value={value.lastName}
+          onChange={(event) =>
+            onChange({ ...value, lastName: event.target.value })
+          }
           required
         />
       </div>
       <div className="grid gap-2">
-        <Label htmlFor="child-dateOfBirth">Geburtsdatum</Label>
+        <Label
+          htmlFor={`${idPrefix}-dateOfBirth`}
+          className="text-xs font-semibold text-[var(--ink-soft)]"
+        >
+          Geburtsdatum
+        </Label>
         <Input
-          id="child-dateOfBirth"
+          id={`${idPrefix}-dateOfBirth`}
           name="dateOfBirth"
           type="date"
-          defaultValue={child?.dateOfBirth ?? ""}
+          min={birthdateRange.min}
+          max={birthdateRange.max}
+          value={value.dateOfBirth}
+          onChange={(event) =>
+            onChange({ ...value, dateOfBirth: event.target.value })
+          }
         />
       </div>
     </div>
   );
 }
+
+function payloadFromChild(child: MyChild): ChildPayload {
+  return {
+    firstName: child.firstName,
+    lastName: child.lastName,
+    dateOfBirth: child.dateOfBirth ?? "",
+  };
+}
+
+function getInitials(child: MyChild) {
+  return `${child.firstName[0] ?? ""}${child.lastName[0] ?? ""}`.toUpperCase();
+}

src/app/dashboard/profil/actions.ts

@@ -2,8 +2,14 @@
 
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
+import { NotdienstPlanStatus } from "@prisma/client";
 
 import { requireKitaSession } from "@/lib/auth-utils";
+import {
+  CHILD_MAX_AGE_YEARS,
+  getChildBirthdateRange,
+  parseDateInput,
+} from "@/lib/child-birthdate";
 import { prisma } from "@/lib/prisma";
 
 // Telefonnummern: führendes "+" optional, dann Ziffern, Leerzeichen, Bindestriche,
@@ -23,8 +29,8 @@ const childSchema = z
   })
   .superRefine((data, ctx) => {
     if (!data.dateOfBirth) return;
-    const parsed = new Date(`${data.dateOfBirth}T00:00:00`);
-    if (Number.isNaN(parsed.getTime())) {
+    const parsed = parseDateInput(data.dateOfBirth);
+    if (!parsed) {
       ctx.addIssue({
         path: ["dateOfBirth"],
         code: "custom",
@@ -32,22 +38,19 @@ const childSchema = z
       });
       return;
     }
-    // In der Zukunft geborene Kinder existieren nicht.
-    const today = new Date();
-    today.setHours(23, 59, 59, 999);
-    if (parsed > today) {
+    const { min, max } = getChildBirthdateRange();
+    if (data.dateOfBirth > max) {
       ctx.addIssue({
         path: ["dateOfBirth"],
         code: "custom",
         message: "Geburtsdatum darf nicht in der Zukunft liegen.",
       });
     }
-    // Schutz vor offensichtlichen Tippfehlern (1899 statt 1989 o.ä.).
-    if (parsed.getFullYear() < 1900) {
+    if (data.dateOfBirth < min) {
       ctx.addIssue({
         path: ["dateOfBirth"],
         code: "custom",
-        message: "Bitte ein realistisches Geburtsdatum angeben.",
+        message: `Kinder dürfen maximal ${CHILD_MAX_AGE_YEARS} Jahre alt sein.`,
       });
     }
   });
@@ -77,15 +80,9 @@ const contactSchema = z.object({
       "Bitte eine gültige Postleitzahl angeben.",
     ),
   city: z.string().trim().max(100).optional(),
+  directoryOptIn: z.boolean().optional(),
 });
 
-function parseDateInput(value?: string) {
-  if (!value) return null;
-
-  const date = new Date(`${value}T00:00:00`);
-  return Number.isNaN(date.getTime()) ? null : date;
-}
-
 // Gibt die erste konkrete Field-Error-Message aus einem Zod-Fehler zurück,
 // damit der User nicht nur "Ungültige Eingabedaten" sieht.
 function firstZodMessage(
@@ -187,6 +184,20 @@ export async function updateMyContact(rawPayload: unknown) {
   }
 
   try {
+    const currentUser = await prisma.user.findUniqueOrThrow({
+      where: { id: session.user.id },
+      select: { directoryOptInAt: true },
+    });
+
+    let newDirectoryOptInAt: Date | null = currentUser.directoryOptInAt;
+    if (parsed.data.directoryOptIn) {
+      if (!newDirectoryOptInAt) {
+        newDirectoryOptInAt = new Date();
+      }
+    } else {
+      newDirectoryOptInAt = null;
+    }
+
     await prisma.user.update({
       where: { id: session.user.id },
       data: {
@@ -194,6 +205,7 @@ export async function updateMyContact(rawPayload: unknown) {
         street: parsed.data.street || null,
         postalCode: parsed.data.postalCode || null,
         city: parsed.data.city || null,
+        directoryOptInAt: newDirectoryOptInAt,
       },
     });
 
@@ -290,6 +302,27 @@ export async function deleteMyAccount() {
       return { error: "Account wurde nicht gefunden." };
     }
 
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const activeNotdienstAssignments = user.familyId
+      ? await prisma.notdienstAssignment.count({
+          where: {
+            kitaId: session.user.kitaId,
+            date: { gte: today },
+            plan: { status: NotdienstPlanStatus.PUBLISHED },
+            child: { familyId: user.familyId },
+          },
+        })
+      : 0;
+
+    if (activeNotdienstAssignments > 0) {
+      return {
+        error:
+          "Dein Account kann nicht gelöscht werden, solange aktive Notdienst-Verpflichtungen bestehen.",
+      };
+    }
+
     if (!user.familyId) {
       await prisma.user.delete({
         where: { id: user.id },

src/app/dashboard/profil/page.tsx

@@ -1,19 +1,28 @@
-import { requireKitaSession } from "@/lib/auth-utils";
-import { prisma } from "@/lib/prisma";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
 import {
+  AtSign,
   Baby,
   CalendarHeart,
   Home,
   Mail,
   Phone,
   Shield,
+  Trash2,
   UserCircle,
 } from "lucide-react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { requireKitaSession } from "@/lib/auth-utils";
+import { prisma } from "@/lib/prisma";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { DefItem, DefList, EmptyDefValue } from "@/components/ui/def-list";
+import { RoleBadge } from "@/components/ui/role-badge";
 import { DeleteAccountDialog } from "./_components/delete-account-dialog";
 import { MyChildrenManager } from "./_components/my-children-manager";
 import { CreateFamilyDialog } from "./_components/create-family-dialog";
@@ -24,133 +33,139 @@ export const metadata = { title: "Mein Profil · Kita-Planer" };
 export default async function ProfilPage() {
   const session = await requireKitaSession();
 
-  const user = await prisma.user.findUniqueOrThrow({
-    where: { id: session.user.id },
-    select: {
-      id: true,
-      email: true,
-      firstName: true,
-      lastName: true,
-      role: true,
-      familyId: true,
-      phone: true,
-      street: true,
-      postalCode: true,
-      city: true,
-      createdAt: true,
-      family: {
-        select: {
-          name: true,
-          children: {
-            select: {
-              id: true,
-              firstName: true,
-              lastName: true,
-              dateOfBirth: true,
+  const [kita, user] = await Promise.all([
+    prisma.kita.findUniqueOrThrow({
+      where: { id: session.user.kitaId },
+      select: { name: true },
+    }),
+    prisma.user.findUniqueOrThrow({
+      where: { id: session.user.id },
+      select: {
+        id: true,
+        email: true,
+        firstName: true,
+        lastName: true,
+        role: true,
+        familyId: true,
+        phone: true,
+        street: true,
+        postalCode: true,
+        city: true,
+        directoryOptInAt: true,
+        createdAt: true,
+        family: {
+          select: {
+            name: true,
+            children: {
+              select: {
+                id: true,
+                firstName: true,
+                lastName: true,
+                dateOfBirth: true,
+              },
+              orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
             },
-            orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
           },
         },
-      },
-      dutyAssignments: {
-        select: {
-          id: true,
-          duty: {
-            select: {
-              name: true,
+        dutyAssignments: {
+          select: {
+            id: true,
+            duty: {
+              select: {
+                name: true,
+              },
             },
           },
         },
       },
-    },
-  });
+    }),
+  ]);
+
+  const fullName = `${user.firstName} ${user.lastName}`.trim();
 
   return (
-    <div className="flex h-full flex-col gap-6 p-6 max-w-4xl mx-auto w-full">
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight">Mein Profil</h1>
-        <p className="text-muted-foreground">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-9">
+        <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+          PROFIL · {kita.name}
+        </p>
+        <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+          Mein{" "}
+          <em className="font-normal italic text-[var(--accent-deep)]">
+            Profil
+          </em>
+        </h1>
+        <p className="mt-3 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
           Deine persönlichen Daten, verknüpfte Kinder und DSGVO-Einstellungen.
         </p>
-      </div>
+      </header>
 
-      <div className="grid gap-6 md:grid-cols-2">
-        {/* Persönliche Daten */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <UserCircle className="h-5 w-5" />
-              Persönliche Daten
-            </CardTitle>
+      <div className="grid items-start gap-5 lg:grid-cols-2">
+        <Card className="self-stretch">
+          <CardHeader className="pb-5">
+            <div className="flex items-start gap-3">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                <UserCircle className="h-4 w-4 [stroke-width:1.7]" />
+              </div>
+              <div>
+                <CardTitle>Persönliche Daten</CardTitle>
+                <CardDescription className="mt-2">
+                  Read-only Stammdaten deines Accounts.
+                </CardDescription>
+              </div>
+            </div>
           </CardHeader>
-          <CardContent className="flex flex-col gap-4">
-            <div>
-              <div className="text-sm text-muted-foreground">Name</div>
-              <div className="font-medium text-lg">
-                {user.firstName} {user.lastName}
-              </div>
-            </div>
-            <div>
-              <div className="text-sm text-muted-foreground flex items-center gap-1">
-                <Mail className="h-3.5 w-3.5" /> E-Mail
-              </div>
-              <div className="font-medium">{user.email}</div>
-            </div>
-            <div>
-              <div className="text-sm text-muted-foreground flex items-center gap-1">
-                <Phone className="h-3.5 w-3.5" /> Telefon
-              </div>
-              <div className="font-medium">
-                {user.phone ?? "Noch nicht hinterlegt"}
-              </div>
-            </div>
-            <div>
-              <div className="text-sm text-muted-foreground">Rolle im Verein</div>
-              <Badge variant={user.role === "ELTERN" ? "secondary" : "default"} className="mt-1">
-                {user.role}
-              </Badge>
-            </div>
-            <div>
-              <div className="text-sm text-muted-foreground flex items-center gap-1">
-                <Home className="h-3.5 w-3.5" /> Haushalt
-              </div>
-              {user.family ? (
-                <div className="font-medium">{user.family.name}</div>
-              ) : (
-                <div className="mt-2 space-y-3 rounded-md border border-dashed p-3">
-                  <p className="text-sm text-muted-foreground">
-                    Dein Account ist noch keinem Haushalt zugeordnet. Lege hier
-                    deinen eigenen Haushalt an, wenn du selbst Elternteil in der
-                    Kita bist.
-                  </p>
-                  <CreateFamilyDialog
-                    defaultFamilyName={`Familie ${user.lastName}`}
-                  />
-                </div>
-              )}
-            </div>
-            <div className="pt-2 border-t mt-2">
-              <div className="text-sm text-muted-foreground flex items-center gap-1">
-                <CalendarHeart className="h-3.5 w-3.5" /> Mitglied seit
-              </div>
-              <div className="text-sm">
-                {format(user.createdAt, "PPP", { locale: de })}
-              </div>
-            </div>
+          <CardContent>
+            <DefList>
+              <DefItem icon={UserCircle} label="Name" value={fullName} />
+              <DefItem icon={Mail} label="E-Mail" value={user.email} />
+              <DefItem
+                icon={Phone}
+                label="Telefon"
+                value={user.phone ? user.phone : <EmptyDefValue />}
+              />
+              <DefItem icon={Shield} label="Rolle" value={<RoleBadge role={user.role} />} />
+              <DefItem
+                icon={Home}
+                label="Haushalt"
+                value={
+                  user.family ? (
+                    user.family.name
+                  ) : (
+                    <div className="grid gap-3 rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-3">
+                      <p className="text-sm font-normal leading-5 text-[var(--ink-soft)]">
+                        Dein Account ist noch keinem Haushalt zugeordnet.
+                      </p>
+                      <CreateFamilyDialog
+                        defaultFamilyName={`Familie ${user.lastName}`}
+                      />
+                    </div>
+                  )
+                }
+              />
+              <DefItem
+                icon={CalendarHeart}
+                label="Mitglied seit"
+                value={format(user.createdAt, "PPP", { locale: de })}
+              />
+            </DefList>
           </CardContent>
         </Card>
 
-        <div className="flex flex-col gap-6">
+        <div className="grid gap-4">
           <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Phone className="h-5 w-5" />
-                Kontaktdaten
-              </CardTitle>
-              <CardDescription>
-                Diese Angaben helfen bei Notdienst, Adressbuch und Abstimmung in
-                der Kita.
-              </CardDescription>
+            <CardHeader className="pb-5">
+              <div className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                  <AtSign className="h-4 w-4 [stroke-width:1.7]" />
+                </div>
+                <div>
+                  <CardTitle>Kontaktdaten</CardTitle>
+                  <CardDescription className="mt-2">
+                    Für Notdienst, Adressbuch und Abstimmung in der Kita.
+                  </CardDescription>
+                </div>
+              </div>
             </CardHeader>
             <CardContent>
               <ContactForm
@@ -159,18 +174,25 @@ export default async function ProfilPage() {
                   street: user.street,
                   postalCode: user.postalCode,
                   city: user.city,
+                  directoryOptIn: !!user.directoryOptInAt,
                 }}
               />
             </CardContent>
           </Card>
 
-          {/* Kinder */}
           <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Baby className="h-5 w-5" />
-                Meine Kinder
-              </CardTitle>
+            <CardHeader className="pb-5">
+              <div className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                  <Baby className="h-4 w-4 [stroke-width:1.7]" />
+                </div>
+                <div>
+                  <CardTitle>Meine Kinder</CardTitle>
+                  <CardDescription className="mt-2">
+                    Kinder deines Haushalts verwalten.
+                  </CardDescription>
+                </div>
+              </div>
             </CardHeader>
             <CardContent>
               <MyChildrenManager
@@ -187,23 +209,53 @@ export default async function ProfilPage() {
             </CardContent>
           </Card>
 
-          {/* Ämter */}
           <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Shield className="h-5 w-5" />
-                Meine Ämter & Dienste
-              </CardTitle>
+            <CardHeader className="pb-5">
+              <div className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                  <Shield className="h-4 w-4 [stroke-width:1.7]" />
+                </div>
+                <div>
+                  <CardTitle>Meine Ämter & Dienste</CardTitle>
+                  <CardDescription className="mt-2">
+                    Feste Aufgaben und laufende Zuständigkeiten.
+                  </CardDescription>
+                </div>
+              </div>
             </CardHeader>
             <CardContent>
               {user.dutyAssignments.length === 0 ? (
-                <p className="text-sm text-muted-foreground">Du hast aktuell keine festen Ämter übernommen.</p>
+                <div className="flex min-h-32 flex-col items-center justify-center rounded-[14px] border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-5 text-center">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[var(--accent-deep)]">
+                    <Shield className="h-4 w-4 [stroke-width:1.7]" />
+                  </div>
+                  <p className="mt-3 text-sm font-medium text-[var(--ink)]">
+                    Keine festen Ämter übernommen
+                  </p>
+                  <p className="mt-1 text-xs text-[var(--ink-soft)]">
+                    Dienste und Rollen erscheinen hier, sobald sie zugewiesen
+                    sind.
+                  </p>
+                </div>
               ) : (
-                <div className="flex flex-wrap gap-2">
+                <div className="grid gap-2">
                   {user.dutyAssignments.map((assignment) => (
-                    <Badge key={assignment.id} variant="default" className="text-sm py-1 px-3">
-                      {assignment.duty.name}
-                    </Badge>
+                    <div
+                      key={assignment.id}
+                      className="flex items-center justify-between gap-3 rounded-lg bg-[var(--surface-2)] p-[10px_12px]"
+                    >
+                      <div>
+                        <p className="text-sm font-semibold text-[var(--ink)]">
+                          {assignment.duty.name}
+                        </p>
+                        <p className="text-xs text-[var(--ink-soft)]">
+                          laufender Dienst
+                        </p>
+                      </div>
+                      <span className="rounded-full border border-[var(--accent-mid)] bg-[var(--accent-soft)] px-2.5 py-1 text-[10.5px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.1em]">
+                        Aktiv
+                      </span>
+                    </div>
                   ))}
                 </div>
               )}
@@ -212,18 +264,24 @@ export default async function ProfilPage() {
         </div>
       </div>
 
-      <Card className="border-destructive/20 mt-8">
-        <CardHeader>
-          <CardDescription>
-            Hier kannst du dein Profil und je nach Haushaltssituation auch die
-            zugehörigen Familiendaten DSGVO-konform löschen.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+      <Card className="mt-5 bg-[var(--surface-2)]">
+        <CardContent className="flex items-center justify-between gap-6 pt-[22px] max-[760px]:flex-col max-[760px]:items-start">
+          <div className="max-w-2xl">
+            <div className="flex items-center gap-2 text-[var(--danger)]">
+              <Trash2 className="h-4 w-4 [stroke-width:1.7]" />
+              <h2 className="text-lg font-medium tracking-[-0.02em]">
+                Danger Zone
+              </h2>
+            </div>
+            <p className="mt-2 text-[13.5px] leading-5 text-[var(--ink-soft)]">
+              Hier kannst du dein Profil und je nach Haushaltssituation auch die
+              zugehörigen Familiendaten DSGVO-konform löschen. Aktive
+              Notdienst-Verpflichtungen blockieren die Löschung.
+            </p>
+          </div>
           <DeleteAccountDialog />
         </CardContent>
       </Card>
-
     </div>
   );
 }

src/app/dashboard/rsvp-action-card.tsx

@@ -43,13 +43,13 @@ export function RsvpActionCard({ events }: { events: DashboardRsvpEventDto[] })
   if (events.length === 0) return null;
 
   return (
-    <Card className="mb-8 border-amber-200 bg-amber-50/70">
+    <Card className="mb-8 border-[var(--warn)] bg-[var(--warn-soft)]">
       <CardHeader className="pb-3">
-        <CardTitle className="flex items-center gap-2 text-lg text-amber-950">
-          <AlertTriangle className="h-5 w-5 text-amber-700" />
+        <CardTitle className="flex items-center gap-2 text-lg text-[var(--ink)]">
+          <AlertTriangle className="h-5 w-5 text-[var(--warn)] [stroke-width:1.7]" />
           Aktion erforderlich
         </CardTitle>
-        <CardDescription className="text-amber-900/80">
+        <CardDescription className="text-[var(--ink-soft)]">
           Für diese Termine fehlt noch mindestens eine Rückmeldung deiner
           Familie.
         </CardDescription>
@@ -58,11 +58,11 @@ export function RsvpActionCard({ events }: { events: DashboardRsvpEventDto[] })
         {events.map((event) => (
           <div
             key={event.id}
-            className="flex flex-col gap-3 rounded-md border bg-background p-4 sm:flex-row sm:items-center sm:justify-between"
+            className="flex flex-col gap-3 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-4 sm:flex-row sm:items-center sm:justify-between"
           >
             <div>
-              <p className="font-medium">{event.title}</p>
-              <p className="mt-1 text-sm text-muted-foreground">
+              <p className="font-medium text-[var(--ink)]">{event.title}</p>
+              <p className="mt-1 text-sm text-[var(--ink-soft)]">
                 Rückmeldung bis{" "}
                 {format(
                   new Date(event.rsvpDeadline ?? event.startDate),
@@ -141,15 +141,18 @@ function RsvpDialog({ event }: { event: DashboardRsvpEventDto }) {
 
         <div className="grid gap-3 py-2">
           {event.children.map((child) => (
-            <div key={child.id} className="rounded-md border p-4">
+            <div
+              key={child.id}
+              className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4"
+            >
               <div className="mb-3 flex items-center justify-between gap-3">
-                <p className="font-medium">{child.name}</p>
+                <p className="font-medium text-[var(--ink)]">{child.name}</p>
                 {child.status && (
                   <Badge variant="outline">bereits gemeldet</Badge>
                 )}
               </div>
               <div className="grid gap-2 sm:grid-cols-2">
-                <label className="flex cursor-pointer items-center gap-2 rounded-md border p-3 text-sm hover:bg-muted/50">
+                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-3 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]">
                   <input
                     type="radio"
                     name={`rsvp-${child.id}`}
@@ -164,10 +167,10 @@ function RsvpDialog({ event }: { event: DashboardRsvpEventDto }) {
                       }))
                     }
                   />
-                  <Check className="h-4 w-4 text-emerald-600" />
+                  <Check className="h-4 w-4 text-[var(--good)] [stroke-width:1.7]" />
                   Nimmt teil
                 </label>
-                <label className="flex cursor-pointer items-center gap-2 rounded-md border p-3 text-sm hover:bg-muted/50">
+                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-3 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]">
                   <input
                     type="radio"
                     name={`rsvp-${child.id}`}
@@ -182,7 +185,7 @@ function RsvpDialog({ event }: { event: DashboardRsvpEventDto }) {
                       }))
                     }
                   />
-                  <X className="h-4 w-4 text-rose-600" />
+                  <X className="h-4 w-4 text-[var(--danger)] [stroke-width:1.7]" />
                   Nimmt nicht teil
                 </label>
               </div>

src/app/globals.css

@@ -1,86 +1,69 @@
 @import "tailwindcss";
+@import "./styles/tokens.css";
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-background: var(--bg);
+  --color-foreground: var(--ink);
+  --color-card: var(--surface);
+  --color-card-foreground: var(--ink);
+  --color-popover: var(--surface);
+  --color-popover-foreground: var(--ink);
+  --color-primary: var(--accent-deep);
+  --color-primary-foreground: oklch(0.98 0.005 45);
+  --color-secondary: var(--surface-2);
+  --color-secondary-foreground: var(--ink);
+  --color-muted: var(--surface-week);
+  --color-muted-foreground: var(--ink-muted);
+  --color-accent: var(--accent-soft);
+  --color-accent-foreground: var(--accent-deep);
+  --color-destructive: var(--danger);
+  --color-destructive-foreground: oklch(0.98 0.005 45);
+  --color-border: var(--hairline);
+  --color-input: var(--hairline);
+  --color-ring: var(--accent);
+  --font-sans: var(--font-manrope);
+  --font-mono: var(--font-manrope);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --card: var(--surface);
+  --card-foreground: var(--ink);
+  --popover: var(--surface);
+  --popover-foreground: var(--ink);
+  --primary: var(--accent-deep);
+  --primary-foreground: oklch(0.98 0.005 45);
+  --secondary: var(--surface-2);
+  --secondary-foreground: var(--ink);
+  --muted: var(--surface-week);
+  --muted-foreground: var(--ink-muted);
+  --accent-foreground: var(--accent-deep);
+  --destructive: var(--danger);
+  --destructive-foreground: oklch(0.98 0.005 45);
+  --border: var(--hairline);
+  --input: var(--hairline);
+  --ring: var(--accent);
   --radius: 0.625rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 0.1);
-    --input: oklch(1 0 0 / 0.15);
-    --ring: oklch(0.556 0 0);
-  }
-}
-
 @layer base {
   * {
     border-color: var(--border);
   }
   body {
-    background-color: var(--background);
-    color: var(--foreground);
+    background-color: var(--bg);
+    background-image: var(--paper-pattern);
+    background-size: 16px 16px;
+    color: var(--ink);
     font-family: var(--font-sans), system-ui, sans-serif;
   }
+
+  ::selection {
+    background: var(--accent-soft);
+    color: var(--accent-deep);
+  }
 }

src/app/layout.tsx

@@ -1,17 +1,13 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { UmamiAnalytics } from "@/components/analytics/umami-analytics";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const manrope = Manrope({
+  variable: "--font-manrope",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
 export const metadata: Metadata = {
@@ -56,7 +52,7 @@ export default function RootLayout({
   return (
     <html
       lang="de"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${manrope.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
         {children}

src/app/login/actions.ts

@@ -18,6 +18,7 @@ import { signIn } from "@/auth";
 const loginSchema = z.object({
   email: z.string().email("Bitte eine gültige E-Mail-Adresse angeben.").toLowerCase().trim(),
   password: z.string().min(1, "Passwort fehlt."),
+  callbackUrl: z.string().optional(),
 });
 
 export type LoginState = {
@@ -28,6 +29,12 @@ export type LoginState = {
   };
 };
 
+function safeCallbackUrl(value: string | undefined) {
+  if (!value) return "/dashboard";
+  if (!value.startsWith("/") || value.startsWith("//")) return "/dashboard";
+  return value;
+}
+
 export async function loginAction(
   _prev: LoginState,
   formData: FormData,
@@ -37,16 +44,13 @@ export async function loginAction(
     return { errors: parsed.error.flatten().fieldErrors };
   }
   const { email, password } = parsed.data;
+  const redirectTo = safeCallbackUrl(parsed.data.callbackUrl);
 
   try {
     await signIn("credentials", {
       email,
       password,
-      // Auth-Utils entscheiden im Folge-Render, ob /onboarding oder /dashboard.
-      // Wir landen aus Sicherheitsgründen erstmal generisch auf der Wurzel.
-      // Der Proxy (proxy.ts) übernimmt das Routing:
-      // → /onboarding wenn kein kitaId, → /dashboard wenn vorhanden.
-      redirectTo: "/",
+      redirectTo,
     });
   } catch (err) {
     // signIn wirft NEXT_REDIRECT bei Erfolg → das müssen wir bewusst

src/app/login/login-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useActionState } from "react";
+import { useActionState, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -10,11 +10,29 @@ import { loginAction, type LoginState } from "./actions";
 
 const initialState: LoginState = {};
 
-export function LoginForm() {
+export function LoginForm({
+  callbackUrl,
+  devAdminEmail,
+  devAdminPassword,
+  devParentEmail,
+  devParentPassword,
+}: {
+  callbackUrl: string;
+  devAdminEmail?: string;
+  devAdminPassword?: string;
+  devParentEmail?: string;
+  devParentPassword?: string;
+}) {
   const [state, formAction, pending] = useActionState(loginAction, initialState);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const showDevHelpers = !!(devAdminEmail || devParentEmail);
 
   return (
     <form action={formAction} className="space-y-4">
+      <input type="hidden" name="callbackUrl" value={callbackUrl} />
+
       <div className="space-y-1.5">
         <Label htmlFor="email">E-Mail</Label>
         <Input
@@ -24,6 +42,8 @@ export function LoginForm() {
           autoComplete="email"
           required
           aria-invalid={!!state.errors?.email}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
         />
         {state.errors?.email?.[0] && (
           <p className="text-xs text-destructive">{state.errors.email[0]}</p>
@@ -39,6 +59,8 @@ export function LoginForm() {
           autoComplete="current-password"
           required
           aria-invalid={!!state.errors?.password}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
         />
         {state.errors?.password?.[0] && (
           <p className="text-xs text-destructive">{state.errors.password[0]}</p>
@@ -54,6 +76,42 @@ export function LoginForm() {
       <Button type="submit" className="w-full" disabled={pending}>
         {pending ? "Anmelden…" : "Anmelden"}
       </Button>
+
+      {showDevHelpers && (
+        <div className="rounded-lg border border-dashed border-muted-foreground/30 bg-muted/40 p-3 space-y-2 text-xs">
+          <p className="text-center font-medium text-muted-foreground">Dev-Schnellzugriff (nur lokal):</p>
+          <div className="grid grid-cols-2 gap-2">
+            {devAdminEmail && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setEmail(devAdminEmail);
+                  setPassword(devAdminPassword || "");
+                }}
+                className="text-xs py-1.5 h-auto cursor-pointer"
+              >
+                🔑 Admin
+              </Button>
+            )}
+            {devParentEmail && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  setEmail(devParentEmail);
+                  setPassword(devParentPassword || "");
+                }}
+                className="text-xs py-1.5 h-auto cursor-pointer"
+              >
+                👪 Eltern
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
     </form>
   );
 }

src/app/login/page.tsx

@@ -15,11 +15,32 @@ import { LoginForm } from "./login-form";
 
 export const metadata = { title: "Anmelden · Kita-Planer" };
 
-export default async function LoginPage() {
+type LoginPageProps = {
+  searchParams?: Promise<{ callbackUrl?: string | string[] }>;
+};
+
+function getSafeCallbackUrl(value: string | string[] | undefined) {
+  const callbackUrl = Array.isArray(value) ? value[0] : value;
+  if (!callbackUrl) return "/dashboard";
+  if (!callbackUrl.startsWith("/") || callbackUrl.startsWith("//")) {
+    return "/dashboard";
+  }
+  return callbackUrl;
+}
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
   const session = await auth();
   if (session?.user?.id) {
     redirect(getPostLoginRedirect(session.user));
   }
+  const resolvedSearchParams = await searchParams;
+  const callbackUrl = getSafeCallbackUrl(resolvedSearchParams?.callbackUrl);
+
+  const isDev = process.env.NODE_ENV === "development";
+  const devAdminEmail = isDev ? process.env.DEV_LOGIN_ADMIN_EMAIL : undefined;
+  const devAdminPassword = isDev ? process.env.DEV_LOGIN_ADMIN_PASSWORD : undefined;
+  const devParentEmail = isDev ? process.env.DEV_LOGIN_PARENT_EMAIL : undefined;
+  const devParentPassword = isDev ? process.env.DEV_LOGIN_PARENT_PASSWORD : undefined;
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-muted/30 px-4 py-12">
@@ -29,7 +50,13 @@ export default async function LoginPage() {
           <CardDescription>Willkommen zurück.</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <LoginForm />
+          <LoginForm
+            callbackUrl={callbackUrl}
+            devAdminEmail={devAdminEmail}
+            devAdminPassword={devAdminPassword}
+            devParentEmail={devParentEmail}
+            devParentPassword={devParentPassword}
+          />
           <p className="text-center text-sm text-muted-foreground">
             Noch keinen Account?{" "}
             <Link href="/register" className="font-medium text-foreground underline">

src/app/page.tsx

@@ -3,8 +3,10 @@ import Image from "next/image";
 import Link from "next/link";
 import {
   ArrowRight,
+  Bell,
   CheckCircle2,
   ClipboardList,
+  Clock,
   DatabaseZap,
   FileStack,
   Fingerprint,
@@ -14,6 +16,7 @@ import {
   MessageSquareText,
   MessagesSquare,
   PhoneCall,
+  Search,
   Route,
   ShieldCheck,
   Table2,
@@ -72,7 +75,7 @@ const privacyPoints = [
   {
     icon: DatabaseZap,
     title: "Strikt isolierte Mandanten",
-    text: "Jede Kita arbeitet innerhalb ihrer eigenen kitaId-Grenze. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
+    text: "Jede Kita arbeitet technisch streng getrennt pro Kita. Rollen und Datenabfragen bleiben konsequent tenant-isoliert.",
   },
   {
     icon: Fingerprint,
@@ -81,7 +84,7 @@ const privacyPoints = [
   },
   {
     icon: Trash2,
-    title: "Recht auf Vergessenwerden",
+    title: "Recht auf Löschung",
     text: "Eltern können ihren Account selbst löschen. Wenn sie der letzte Haushaltspartner sind, werden die Familiendaten sauber entfernt.",
   },
   {
@@ -112,26 +115,31 @@ const replacedTools = [
     icon: MessagesSquare,
     title: "WhatsApp für offizielle Infos",
     text: "Ankündigungen, Anhänge und Lesestatus gehören in einen verbindlichen Kanal, nicht zwischen spontane Rückfragen.",
+    accent: "bg-emerald-50 text-emerald-700 ring-emerald-100",
   },
   {
     icon: Table2,
     title: "Excel-Listen für Dienste",
     text: "Verfügbarkeiten, Mindesttage und Dienstpläne werden strukturierter als in Tabellen mit Version 17-final-final.",
+    accent: "bg-lime-50 text-lime-700 ring-lime-100",
   },
   {
     icon: FileStack,
     title: "Verstreute PDFs und Mail-Anhänge",
     text: "Wichtige Dokumente hängen am passenden Kontext und bleiben geschützt abrufbar.",
+    accent: "bg-red-50 text-red-700 ring-red-100",
   },
   {
     icon: ClipboardList,
     title: "Manuelle Kontaktlisten",
     text: "Familien, Kinder und freigegebene Kontaktdaten werden kontrolliert statt lose herumgereicht.",
+    accent: "bg-sky-50 text-sky-700 ring-sky-100",
   },
   {
     icon: PhoneCall,
     title: "Telefonchaos bei Krankmeldungen",
     text: "Eltern melden Abwesenheiten digital; das Team sieht morgens schneller, wer fehlt.",
+    accent: "bg-amber-50 text-amber-700 ring-amber-100",
   },
 ];
 
@@ -153,21 +161,28 @@ const audienceRoles = [
   },
 ];
 
+const onboardingTimeAnchors = [
+  "Demo-Call (30 Min)",
+  "Setup-Termin (1 Woche später)",
+  "Familien einladen (Woche 2)",
+  "Erste echte Dienstrunde (Woche 3–4)",
+] as const;
+
 const onboardingSteps = [
   {
-    title: "Demo anfragen",
+    title: onboardingTimeAnchors[0],
     text: "Ihr beschreibt kurz eure aktuelle Organisation und die größten Reibungspunkte.",
   },
   {
-    title: "Setup mit Kita und Vorstand klären",
+    title: onboardingTimeAnchors[1],
     text: "Wir schauen gemeinsam auf Rollen, Module, Datenschutzfragen und den sinnvollen Einstieg.",
   },
   {
-    title: "Familien einladen oder anlegen",
+    title: onboardingTimeAnchors[2],
     text: "Der Vorstand bringt Eltern, Kinder und Zuständigkeiten in eine saubere Struktur.",
   },
   {
-    title: "Module im Alltag nutzen",
+    title: onboardingTimeAnchors[3],
     text: "Dienste, Kalender, Krankmeldungen, Adressbuch und Schwarzes Brett ersetzen nach und nach Nebenkanäle.",
   },
 ];
@@ -267,6 +282,27 @@ export default function LandingPage() {
           </div>
         </section>
 
+        <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6 lg:py-24">
+          <div className="mb-10 grid gap-5 lg:grid-cols-[0.78fr_1fr] lg:items-end">
+            <div>
+              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
+                Produkt statt Versprechen
+              </p>
+              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
+                So sieht operative Kita-Arbeit aus, wenn sie nicht mehr im Chat
+                liegt.
+              </h2>
+            </div>
+            <p className="max-w-2xl text-sm leading-6 text-slate-600 lg:justify-self-end">
+              Der Notdienst-Planer sammelt Verfügbarkeiten, zeigt offene
+              Familien und macht aus losen Antworten einen veröffentlichbaren
+              Monatsplan.
+            </p>
+          </div>
+
+          <ProductBrowserMock />
+        </section>
+
         <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6 lg:py-24">
           <div className="mb-10 grid gap-5 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
             <div>
@@ -293,7 +329,9 @@ export default function LandingPage() {
                   key={item.title}
                   className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm"
                 >
-                  <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
+                  <div
+                    className={`mb-4 flex h-10 w-10 items-center justify-center rounded-lg ring-1 ${item.accent}`}
+                  >
                     <Icon className="h-5 w-5" />
                   </div>
                   <h3 className="font-semibold tracking-tight">{item.title}</h3>
@@ -409,6 +447,9 @@ export default function LandingPage() {
                       </Button>
                     </div>
                   </CardHeader>
+                  <CardContent className="pt-0">
+                    <FeaturePreview slug={feature.slug} />
+                  </CardContent>
                 </Card>
               );
             })}
@@ -593,3 +634,133 @@ export default function LandingPage() {
     </div>
   );
 }
+
+function ProductBrowserMock() {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-emerald-100 bg-white shadow-[0_24px_70px_rgba(15,23,42,0.12)]">
+      <div className="flex items-center justify-between border-b border-slate-200 bg-[#fbf8ef] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <span className="h-3 w-3 rounded-full bg-red-300" />
+          <span className="h-3 w-3 rounded-full bg-amber-300" />
+          <span className="h-3 w-3 rounded-full bg-emerald-300" />
+        </div>
+        <div className="rounded-full border border-slate-200 bg-white px-4 py-1 text-xs font-medium text-slate-500">
+          app.kita-planer.de/dashboard/notdienst
+        </div>
+        <div className="w-16" />
+      </div>
+
+      <div className="bg-[#fbf8ef] p-2 sm:p-4">
+        <Image
+          src="/landing/notdienst-calendar-linen.png"
+          alt="Notdienst-Kalender im Kita-Planer mit ausgewählten Tagen im Juni 2026"
+          width={2262}
+          height={1640}
+          sizes="(min-width: 1280px) 1184px, calc(100vw - 40px)"
+          className="h-auto w-full rounded-xl border border-slate-200 bg-[#fbf8ef]"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FeaturePreview({ slug }: { slug: string }) {
+  if (slug === "notdienst-planer") {
+    return (
+      <div className="rounded-xl border border-red-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center justify-between text-xs">
+          <span className="font-semibold text-slate-700">Juni</span>
+          <span className="rounded-full bg-red-50 px-2 py-1 text-red-700">
+            12/16
+          </span>
+        </div>
+        <div className="grid grid-cols-5 gap-1.5">
+          {["", "bg-red-100", "", "bg-red-100", "", "bg-red-100", "", "", "bg-red-100", ""].map(
+            (cell, index) => (
+              <span
+                key={index}
+                className={`h-7 rounded-md border border-red-100 bg-white ${cell}`}
+              />
+            ),
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (slug === "kita-kalender") {
+    return (
+      <div className="rounded-xl border border-sky-100 bg-[#fbf8ef] p-3">
+        {[
+          ["10", "Schließtag", "bg-red-400"],
+          ["18", "Elternabend", "bg-indigo-400"],
+          ["29", "Sommerfest", "bg-emerald-500"],
+        ].map(([date, title, color]) => (
+          <div
+            key={title}
+            className="mb-2 last:mb-0 flex items-center gap-3 rounded-lg bg-white px-3 py-2 text-xs"
+          >
+            <span className="font-semibold tabular-nums text-slate-950">
+              {date}
+            </span>
+            <span className={`h-5 w-1 rounded-full ${color}`} />
+            <span className="text-slate-600">{title}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (slug === "eltern-adressbuch") {
+    return (
+      <div className="rounded-xl border border-emerald-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-400">
+          <Search className="h-3.5 w-3.5" />
+          Familie suchen
+        </div>
+        {["Meier", "Mustermann"].map((name) => (
+          <div key={name} className="mb-2 last:mb-0 flex items-center gap-2">
+            <span className="h-7 w-7 rounded-lg bg-emerald-50" />
+            <span className="h-2 flex-1 rounded-full bg-slate-200" />
+            <span className="h-2 w-10 rounded-full bg-emerald-100" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (slug === "krankmeldung") {
+    return (
+      <div className="rounded-xl border border-amber-100 bg-[#fbf8ef] p-3">
+        <div className="mb-3 flex items-center gap-2 text-xs font-semibold text-slate-700">
+          <Clock className="h-4 w-4 text-amber-700" />
+          Heute fehlen 2 Kinder
+        </div>
+        {["Kai · krank", "Mia · Arzttermin"].map((item) => (
+          <div
+            key={item}
+            className="mb-2 last:mb-0 rounded-lg bg-white px-3 py-2 text-xs text-slate-600"
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-indigo-100 bg-[#fbf8ef] p-3">
+      <div className="mb-3 flex items-center gap-2 text-xs font-semibold text-slate-700">
+        <Bell className="h-4 w-4 text-indigo-700" />
+        Neue Mitteilung
+      </div>
+      <div className="space-y-2">
+        <span className="block h-2.5 w-4/5 rounded-full bg-slate-200" />
+        <span className="block h-2.5 w-3/5 rounded-full bg-slate-200" />
+        <span className="inline-flex rounded-full bg-indigo-50 px-2 py-1 text-xs text-indigo-700">
+          PDF angehängt
+        </span>
+      </div>
+    </div>
+  );
+}

src/app/styles/tokens.css

@@ -0,0 +1,37 @@
+:root {
+  /* Surfaces */
+  --bg: oklch(0.965 0.012 75);
+  --surface: oklch(0.985 0.008 75);
+  --surface-2: oklch(0.975 0.010 75);
+  --surface-week: oklch(0.945 0.014 75);
+
+  /* Ink */
+  --ink: oklch(0.26 0.015 45);
+  --ink-soft: oklch(0.45 0.015 45);
+  --ink-muted: oklch(0.60 0.012 45);
+  --ink-faint: oklch(0.76 0.010 45);
+
+  /* Hairlines */
+  --hairline: oklch(0.90 0.012 75);
+  --hairline-soft: oklch(0.93 0.010 75);
+
+  /* Accent */
+  --accent: oklch(0.58 0.11 38);
+  --accent-deep: oklch(0.42 0.10 38);
+  --accent-soft: oklch(0.93 0.04 38);
+  --accent-mid: oklch(0.82 0.07 38);
+
+  /* Semantic */
+  --good: oklch(0.55 0.10 155);
+  --good-soft: oklch(0.94 0.03 155);
+  --warn: oklch(0.62 0.10 70);
+  --warn-soft: oklch(0.95 0.04 70);
+  --danger: oklch(0.55 0.13 25);
+  --danger-soft: oklch(0.95 0.04 25);
+
+  --focus-ring: oklch(0.85 0.07 38 / 0.30);
+  --paper-pattern: radial-gradient(
+    oklch(0.85 0.02 75 / 0.10) 1px,
+    transparent 1px
+  );
+}

src/components/dashboard/dashboard-shell.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import React, { useState } from "react";
+import { LogOut, Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SidebarNav } from "./sidebar-nav";
+import { UserRole } from "@prisma/client";
+
+type DashboardShellProps = {
+  kitaName: string;
+  userName: string;
+  userRole: UserRole;
+  children: React.ReactNode;
+  signOutAction: () => void | Promise<void>;
+};
+
+export function DashboardShell({
+  kitaName,
+  userName,
+  userRole,
+  children,
+  signOutAction,
+}: DashboardShellProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const displayName = userName;
+  const initials = getInitials(displayName);
+
+  return (
+    <div className="grid min-h-screen grid-cols-[256px_minmax(0,1fr)] bg-[var(--bg)] max-[760px]:grid-cols-1">
+      {/* ── Desktop Sidebar ── */}
+      <aside className="print:hidden sticky top-0 flex h-screen shrink-0 flex-col border-r border-[var(--hairline)] bg-[var(--surface)] max-[760px]:hidden">
+        {/* Logo / Kita-Name */}
+        <div className="flex h-[82px] items-center gap-3 border-b border-[var(--hairline-soft)] px-5">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
+            {kitaName.slice(0, 1).toUpperCase()}
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
+              {kitaName}
+            </p>
+            <p className="mt-1 text-xs text-[var(--ink-soft)]">Kita-Planer</p>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex-1 overflow-y-auto py-6">
+          <SidebarNav role={userRole} />
+        </div>
+
+        {/* Footer: User-Info + Abmelden */}
+        <div className="border-t border-[var(--hairline-soft)] p-4">
+          <div className="mb-3 flex items-center gap-2.5 px-1">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
+              {initials}
+            </div>
+            <div className="min-w-0">
+              <p className="truncate text-xs font-semibold text-[var(--ink)]">
+                {displayName}
+              </p>
+              <p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
+                {userRole}
+              </p>
+            </div>
+          </div>
+          <form action={signOutAction}>
+            <Button
+              type="submit"
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
+            >
+              <LogOut className="h-4 w-4" />
+              Abmelden
+            </Button>
+          </form>
+        </div>
+      </aside>
+
+      {/* ── Mobile Top Header Bar ── */}
+      <header className="print:hidden hidden max-[760px]:flex sticky top-0 z-40 h-16 items-center justify-between border-b border-[var(--hairline)] bg-[var(--surface)] px-5">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
+            {kitaName.slice(0, 1).toUpperCase()}
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
+              {kitaName}
+            </p>
+          </div>
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label={isOpen ? "Menü schließen" : "Menü öffnen"}
+        >
+          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+        </Button>
+      </header>
+
+      {/* ── Mobile Sidebar Drawer/Overlay ── */}
+      {isOpen && (
+        <div className="print:hidden fixed inset-0 z-30 hidden max-[760px]:block">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity"
+            onClick={() => setIsOpen(false)}
+          />
+          {/* Drawer content */}
+          <aside className="fixed bottom-0 top-16 left-0 flex w-[280px] max-w-[85vw] flex-col border-r border-[var(--hairline)] bg-[var(--surface)] shadow-2xl transition-transform">
+            <div className="flex-1 overflow-y-auto py-6" onClick={() => setIsOpen(false)}>
+              <SidebarNav role={userRole} />
+            </div>
+
+            {/* Footer */}
+            <div className="border-t border-[var(--hairline-soft)] p-4">
+              <div className="mb-3 flex items-center gap-2.5 px-1">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
+                  {initials}
+                </div>
+                <div className="min-w-0">
+                  <p className="truncate text-xs font-semibold text-[var(--ink)]">
+                    {displayName}
+                  </p>
+                  <p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
+                    {userRole}
+                  </p>
+                </div>
+              </div>
+              <form action={signOutAction}>
+                <Button
+                  type="submit"
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
+                >
+                  <LogOut className="h-4 w-4" />
+                  Abmelden
+                </Button>
+              </form>
+            </div>
+          </aside>
+        </div>
+      )}
+
+      {/* ── Main Content Area ── */}
+      <main className="min-w-0 overflow-y-auto max-[760px]:pt-0">
+        {children}
+      </main>
+    </div>
+  );
+}
+
+function getInitials(value: string) {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return value.slice(0, 2).toUpperCase();
+}

src/components/dashboard/sidebar-nav.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   LayoutDashboard,
@@ -15,24 +14,28 @@ import {
   Megaphone,
 } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { NavItem } from "@/components/ui/nav-item";
 
 import { UserRole } from "@prisma/client";
 
 const navItems = [
   {
+    section: "Heute",
     href: "/dashboard",
     label: "Übersicht",
     icon: LayoutDashboard,
     exact: true,
   },
   {
+    section: "Heute",
     href: "/dashboard/notdienst",
     label: "Notdienst (Eltern)",
     icon: CalendarCheck2,
     exact: true,
+    badge: "4",
   },
   {
+    section: "Heute",
     href: "/dashboard/notdienst/plan",
     label: "Notdienst-Planung",
     icon: CalendarCheck2,
@@ -40,18 +43,21 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR],
   },
   {
+    section: "Heute",
     href: "/dashboard/kalender",
     label: "Terminkalender",
     icon: CalendarDays,
     exact: false,
   },
   {
+    section: "Heute",
     href: "/dashboard/adressbuch",
     label: "Adressbuch",
     icon: Contact,
     exact: false,
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/families",
     label: "Familienverwaltung",
     icon: Users,
@@ -59,6 +65,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/admin/dienste",
     label: "Dienstplan",
     icon: ClipboardList,
@@ -66,6 +73,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/admin/news",
     label: "Schwarzes Brett",
     icon: Megaphone,
@@ -73,6 +81,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/admin/kalender",
     label: "Event-Anmeldungen",
     icon: CalendarCheck2,
@@ -80,6 +89,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/admin/abwesenheiten",
     label: "Abwesenheiten",
     icon: Stethoscope,
@@ -87,6 +97,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN, UserRole.KOORDINATOR, UserRole.ERZIEHER],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/erzieher",
     label: "ErzieherInnen",
     icon: GraduationCap,
@@ -94,6 +105,7 @@ const navItems = [
     allowedRoles: [UserRole.ADMIN],
   },
   {
+    section: "Verwaltung",
     href: "/dashboard/profil",
     label: "Mein Profil",
     icon: UserCircle,
@@ -103,32 +115,40 @@ const navItems = [
 
 export function SidebarNav({ role }: { role: UserRole }) {
   const pathname = usePathname();
+  const visibleItems = navItems.filter(
+    ({ allowedRoles }) =>
+      !allowedRoles || (allowedRoles as UserRole[]).includes(role),
+  );
+  const sections = ["Heute", "Verwaltung"];
 
   return (
-    <nav className="flex flex-col gap-1 px-3">
-      {navItems.map(({ href, label, icon: Icon, exact, allowedRoles }) => {
-        // Filter out items not allowed for the current role
-        if (allowedRoles && !(allowedRoles as UserRole[]).includes(role)) {
-          return null;
-        }
-
-        const isActive = exact ? pathname === href : pathname.startsWith(href);
-        return (
-          <Link
-            key={href}
-            href={href}
-            className={cn(
-              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-              isActive
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-            )}
-          >
-            <Icon className="h-4 w-4 shrink-0" />
-            {label}
-          </Link>
-        );
-      })}
+    <nav className="flex flex-col gap-8 px-5">
+      {sections.map((section) => (
+        <div key={section}>
+          <p className="mb-3 px-2.5 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.18em]">
+            {section}
+          </p>
+          <div className="flex flex-col gap-1">
+            {visibleItems
+              .filter((item) => item.section === section)
+              .map(({ href, label, icon, exact, badge }) => {
+                const isActive = exact
+                  ? pathname === href
+                  : pathname.startsWith(href);
+                return (
+                  <NavItem
+                    key={href}
+                    href={href}
+                    label={label}
+                    icon={icon}
+                    active={isActive}
+                    badge={badge}
+                  />
+                );
+              })}
+          </div>
+        </div>
+      ))}
     </nav>
   );
 }

src/components/ui/badge.tsx

@@ -4,21 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-semibold transition-colors focus:outline-none focus:ring-[3px] focus:ring-[var(--focus-ring)]",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground",
+          "border-transparent bg-[var(--accent-deep)] text-[oklch(0.98_0.005_45)]",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground",
+          "border-[var(--hairline)] bg-[var(--surface-2)] text-[var(--ink-soft)]",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground",
-        outline: "text-foreground",
+          "border-transparent bg-[var(--danger-soft)] text-[var(--danger)]",
+        outline: "border-[var(--hairline)] text-[var(--ink-soft)]",
         success:
-          "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+          "border-transparent bg-[var(--good-soft)] text-[var(--good)]",
         warning:
-          "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+          "border-transparent bg-[var(--warn-soft)] text-[var(--warn)]",
       },
     },
     defaultVariants: {

src/components/ui/button.tsx

@@ -5,24 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-[13.5px] font-semibold transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] disabled:pointer-events-none disabled:opacity-50 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.7]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "rounded-lg bg-[var(--accent-deep)] text-[oklch(0.98_0.005_45)] hover:bg-[oklch(0.36_0.10_38)]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] text-[var(--ink)] hover:border-[var(--accent-mid)]",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "rounded-lg border border-[var(--hairline)] bg-transparent text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
+        ghost:
+          "rounded-lg border border-[var(--hairline)] bg-transparent text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        link: "text-primary underline-offset-4 hover:underline",
+          "rounded-lg bg-[var(--danger)] text-[oklch(0.98_0.005_45)] hover:brightness-95",
+        link: "rounded-lg text-[var(--accent-deep)] underline-offset-4 hover:underline",
+        pill:
+          "rounded-full border border-[var(--hairline)] bg-transparent text-[var(--ink-soft)] hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        default: "h-10 gap-2 px-[18px] py-2.5",
+        sm: "h-9 gap-2 px-3",
+        lg: "h-11 gap-2 px-8",
         icon: "h-10 w-10",
       },
     },

src/components/ui/card.tsx

@@ -1,15 +1,33 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+const cardVariants = cva(
+  "relative rounded-[14px] border border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink)]",
+  {
+    variants: {
+      variant: {
+        default: "",
+        featured:
+          "overflow-hidden border-[var(--accent-mid)] bg-linear-to-b from-[oklch(0.985_0.012_50)] to-[var(--surface)] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-[var(--accent)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
-        className,
-      )}
+      className={cn(cardVariants({ variant, className }))}
       {...props}
     />
   ),
@@ -18,7 +36,7 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-[22px_24px]", className)} {...props} />
   ),
 );
 CardHeader.displayName = "CardHeader";
@@ -31,7 +49,7 @@ const CardTitle = React.forwardRef<HTMLElement, CardTitleProps>(
   ({ className, as: Comp = "div", ...props }, ref) => (
     <Comp
       ref={ref as React.Ref<HTMLDivElement>}
-      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      className={cn("text-lg font-medium leading-none tracking-[-0.02em]", className)}
       {...props}
     />
   ),
@@ -42,7 +60,7 @@ const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-[13.5px] text-[var(--ink-soft)]", className)}
       {...props}
     />
   ),
@@ -51,14 +69,14 @@ CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("p-[22px_24px] pt-0", className)} {...props} />
   ),
 );
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("flex items-center p-[22px_24px] pt-0", className)} {...props} />
   ),
 );
 CardFooter.displayName = "CardFooter";

src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { AlertTriangle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: ReactNode;
+  confirmLabel: string;
+  cancelLabel?: string;
+  pendingLabel?: string;
+  isPending?: boolean;
+  children?: ReactNode;
+  onConfirm: () => void | Promise<void>;
+};
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel = "Abbrechen",
+  pendingLabel = "Wird ausgeführt...",
+  isPending = false,
+  children,
+  onConfirm,
+}: ConfirmDialogProps) {
+  async function handleConfirm() {
+    await onConfirm();
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {children ? <DialogTrigger asChild>{children}</DialogTrigger> : null}
+      <DialogContent className="border-[var(--danger)]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
+            <AlertTriangle className="h-5 w-5" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="pt-1 text-sm leading-6">
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
+          Diese Aktion kann nicht rückgängig gemacht werden.
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isPending}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={isPending}
+          >
+            {isPending ? pendingLabel : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ui/def-list.tsx

@@ -0,0 +1,52 @@
+import type { ComponentType, ReactNode } from "react";
+import type { LucideProps } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function DefList({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <dl className={cn("divide-y divide-[var(--hairline-soft)]", className)}>
+      {children}
+    </dl>
+  );
+}
+
+export function DefItem({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon?: ComponentType<LucideProps>;
+  label: string;
+  value: ReactNode;
+}) {
+  return (
+    <div className="grid gap-1 py-3 first:pt-0 last:pb-0">
+      <dt className="flex items-center gap-1.5 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+        {Icon ? <Icon className="h-3.5 w-3.5 [stroke-width:1.7]" /> : null}
+        {label}
+      </dt>
+      <dd className="text-sm font-medium text-[var(--ink)] [overflow-wrap:anywhere] [font-variant-numeric:tabular-nums]">
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+export function EmptyDefValue({
+  children = "Noch nicht hinterlegt",
+}: {
+  children?: ReactNode;
+}) {
+  return (
+    <span className="font-normal italic text-[var(--ink-faint)]">
+      {children}
+    </span>
+  );
+}

src/components/ui/dialog.tsx

@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[oklch(0.25_0.015_45_/_0.20)] backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -35,13 +35,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--hairline)] bg-[var(--surface)] p-6 text-[var(--ink)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[14px]",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md text-[var(--ink-muted)] opacity-80 transition-opacity hover:bg-[var(--surface-2)] hover:text-[var(--ink)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface)] disabled:pointer-events-none data-[state=open]:bg-[var(--accent-soft)] data-[state=open]:text-[var(--accent-deep)]">
         <X className="h-4 w-4" />
         <span className="sr-only">Schließen</span>
       </DialogPrimitive.Close>
@@ -85,7 +85,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-lg font-medium leading-none tracking-[-0.02em] text-[var(--ink)]",
       className,
     )}
     {...props}
@@ -99,7 +99,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-[var(--ink-soft)]", className)}
     {...props}
   />
 ));

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2.5 text-[13.5px] text-[var(--ink)] transition file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--ink-faint)] hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:bg-[oklch(0.99_0.005_75)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

src/components/ui/nav-item.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import type { ComponentType } from "react";
+import type { LucideProps } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type NavItemProps = {
+  href: string;
+  label: string;
+  icon: ComponentType<LucideProps>;
+  active?: boolean;
+  badge?: number | string;
+};
+
+export function NavItem({
+  href,
+  label,
+  icon: Icon,
+  active = false,
+  badge,
+}: NavItemProps) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13.5px] font-medium text-[var(--ink-soft)] transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]",
+        "hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
+        active &&
+          "bg-[var(--accent-soft)] font-semibold text-[var(--accent-deep)] before:absolute before:left-[-14px] before:top-1.5 before:h-[calc(100%-12px)] before:w-[3px] before:rounded-full before:bg-[var(--accent)]",
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0 [stroke-width:1.7]" />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {badge ? (
+        <span className="rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-2 py-0.5 text-[11px] font-semibold text-[var(--ink-muted)]">
+          {badge}
+        </span>
+      ) : null}
+    </Link>
+  );
+}

src/components/ui/role-badge.tsx

@@ -0,0 +1,29 @@
+import type { UserRole } from "@prisma/client";
+
+import { cn } from "@/lib/utils";
+
+type RoleBadgeProps = {
+  role: UserRole;
+  className?: string;
+};
+
+const roleLabels: Record<string, string> = {
+  SUPERADMIN: "Admin",
+  ADMIN: "Vorstand",
+  KOORDINATOR: "Koordinator",
+  ELTERN: "Eltern",
+  ERZIEHER: "Erzieher",
+};
+
+export function RoleBadge({ role, className }: RoleBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex w-fit rounded-full border border-[var(--accent-mid)] bg-[var(--accent-soft)] px-2.5 py-1 text-[10.5px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.1em]",
+        className,
+      )}
+    >
+      {roleLabels[role] ?? role}
+    </span>
+  );
+}

src/components/ui/select.tsx

@@ -16,16 +16,20 @@ const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
+    {...props}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full appearance-none items-center justify-between rounded-lg border border-[var(--hairline)] bg-[var(--surface)] bg-[right_12px_center] bg-no-repeat px-3 py-2.5 pr-9 text-[13.5px] text-[var(--ink)] transition placeholder:text-[var(--ink-faint)] hover:border-[var(--accent-mid)] focus:border-[var(--accent)] focus:bg-[oklch(0.99_0.005_75)] focus:outline-none focus:ring-[3px] focus:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
-    {...props}
+    style={{
+      backgroundImage:
+        "linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%)",
+      backgroundPosition: "calc(100% - 16px) 50%, calc(100% - 11px) 50%",
+      backgroundSize: "5px 5px, 5px 5px",
+      ...props.style,
+    }}
   >
     {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -66,7 +70,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-[var(--hairline)] bg-[var(--surface)] text-[var(--ink)] shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -97,7 +101,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-[13.5px] outline-none focus:bg-[var(--accent-soft)] focus:text-[var(--accent-deep)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

src/components/ui/sonner.tsx

@@ -12,15 +12,16 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      position="bottom-center"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            "group toast group-[.toaster]:rounded-[10px] group-[.toaster]:border-0 group-[.toaster]:bg-[oklch(0.22_0.015_45)] group-[.toaster]:px-[18px] group-[.toaster]:py-3 group-[.toaster]:text-white group-[.toaster]:shadow-none group-data-[state=open]:animate-in group-data-[state=open]:slide-in-from-bottom-8 group-data-[state=open]:duration-200",
+          description: "group-[.toast]:text-white/70",
           actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            "group-[.toast]:bg-[var(--accent)] group-[.toast]:text-white",
           cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            "group-[.toast]:bg-white/10 group-[.toast]:text-white",
         },
       }}
       {...props}

src/components/ui/stat.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils";
+
+type StatProps = {
+  label: string;
+  value: number | string;
+  suffix?: string;
+  hint?: string;
+  className?: string;
+};
+
+export function Stat({ label, value, suffix, hint, className }: StatProps) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-[14px] border border-[var(--hairline)] bg-[var(--surface)] p-5 text-[var(--ink)] before:absolute before:inset-x-5 before:top-0 before:h-[1.5px] before:bg-[var(--accent)] before:opacity-40",
+        className,
+      )}
+    >
+      <p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
+        {label}
+      </p>
+      <p className="mt-2 text-[30px] font-medium leading-none tracking-[-0.025em] [font-variant-numeric:tabular-nums]">
+        {value}
+        {suffix ? (
+          <em className="ml-1 text-sm not-italic text-[var(--ink-muted)]">
+            {suffix}
+          </em>
+        ) : null}
+      </p>
+      {hint ? (
+        <p className="mt-2 text-xs text-[var(--ink-soft)]">{hint}</p>
+      ) : null}
+    </div>
+  );
+}

src/components/ui/table.tsx

@@ -9,7 +9,10 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn(
+        "w-full caption-bottom text-[13.5px] text-[var(--ink)]",
+        className,
+      )}
       {...props}
     />
   </div>
@@ -20,7 +23,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b [&_tr]:border-[var(--hairline-soft)]", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -43,7 +50,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b border-[var(--hairline-soft)] transition-colors hover:bg-[var(--surface-2)] data-[state=selected]:bg-[var(--accent-soft)]",
       className,
     )}
     {...props}
@@ -58,7 +65,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-11 px-4 text-left align-middle text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--ink-muted)] [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -72,7 +79,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      "px-4 py-3.5 align-middle text-[var(--ink)] [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
     {...props}
   />
 ));
@@ -84,7 +94,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("mt-4 text-sm text-[var(--ink-muted)]", className)}
     {...props}
   />
 ));

src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   <textarea
     ref={ref}
     className={cn(
-      "flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex min-h-24 w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2.5 text-[13.5px] text-[var(--ink)] transition placeholder:text-[var(--ink-faint)] hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:bg-[oklch(0.99_0.005_75)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

src/emails/NotdienstAssignmentEmail.tsx

@@ -0,0 +1,189 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import { baseBodyStyle, colors, fontStack } from "./_styles";
+
+type NotdienstAssignmentEmailProps = {
+  parentName: string;
+  kitaName: string;
+  dateLabel: string;
+  link: string;
+};
+
+export function NotdienstAssignmentEmail({
+  parentName,
+  kitaName,
+  dateLabel,
+  link,
+}: NotdienstAssignmentEmailProps) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Aktualisierung Notdienst-Plan: Zuteilung für {dateLabel}</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.card}>
+            <Section style={styles.brandBar}>
+              <Text style={styles.brand}>Kita-Planer</Text>
+            </Section>
+            <Text style={styles.kicker}>Notdienst-Einteilung</Text>
+            <Heading style={styles.heading}>Neuer Notdienst-Termin zugewiesen</Heading>
+            <Text style={styles.lead}>
+              Hallo {parentName},
+            </Text>
+
+            <Text style={styles.text}>
+              in der Kita <strong>{kitaName}</strong> gab es eine Änderung an der Notdienst-Planung. 
+              Du wurdest für folgenden Tag für den Notdienst eingeteilt:
+            </Text>
+
+            <Section style={styles.dateBadge}>
+              <Text style={styles.dateText}>{dateLabel}</Text>
+            </Section>
+
+            <Text style={styles.text}>
+              Bitte merke dir diesen Termin vor. Du kannst den vollständigen Plan auch jederzeit online im Kita-Planer einsehen.
+            </Text>
+
+            <Button href={link} style={styles.button}>
+              Zum Kita-Planer
+            </Button>
+
+            <Text style={styles.fallbackText}>
+              Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser:
+            </Text>
+            <Text style={styles.linkText}>{link}</Text>
+          </Section>
+
+          <Text style={styles.footer}>
+            Diese Nachricht wurde automatisch vom Kita-Planer deiner Kita versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: baseBodyStyle,
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+    fontFamily: fontStack,
+  },
+  card: {
+    padding: "0 28px 28px",
+    backgroundColor: colors.cardBg,
+    borderRadius: "10px",
+    border: `1px solid ${colors.border}`,
+    boxShadow: "0 10px 26px rgba(31, 59, 45, 0.08)",
+    overflow: "hidden",
+    fontFamily: fontStack,
+  },
+  brandBar: {
+    margin: "0 -28px 28px",
+    padding: "14px 28px",
+    backgroundColor: colors.brandGreen,
+    fontFamily: fontStack,
+  },
+  brand: {
+    margin: 0,
+    color: colors.eyebrow,
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+    fontFamily: fontStack,
+  },
+  kicker: {
+    margin: "0 0 10px",
+    color: colors.brandGreenAccent,
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase" as const,
+    fontFamily: fontStack,
+  },
+  heading: {
+    margin: "0 0 14px",
+    color: colors.textPrimary,
+    fontSize: "28px",
+    lineHeight: "34px",
+    fontWeight: 800,
+    fontFamily: fontStack,
+  },
+  lead: {
+    margin: "0 0 22px",
+    color: colors.textBody,
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontFamily: fontStack,
+  },
+  text: {
+    margin: "0 0 24px",
+    color: colors.textBody,
+    fontSize: "15px",
+    lineHeight: "24px",
+    fontFamily: fontStack,
+  },
+  dateBadge: {
+    padding: "16px",
+    backgroundColor: "#f7f5ef",
+    borderLeft: `4px solid ${colors.brandGreen}`,
+    borderRadius: "4px",
+    margin: "0 0 24px",
+    fontFamily: fontStack,
+  },
+  dateText: {
+    margin: 0,
+    fontSize: "18px",
+    fontWeight: 700,
+    color: colors.textPrimary,
+    fontFamily: fontStack,
+  },
+  button: {
+    display: "inline-block",
+    padding: "14px 20px",
+    backgroundColor: colors.brandGreen,
+    color: "#ffffff",
+    borderRadius: "6px",
+    fontSize: "15px",
+    fontWeight: 700,
+    textDecoration: "none",
+    fontFamily: fontStack,
+  },
+  fallbackText: {
+    margin: "28px 0 8px",
+    color: colors.textMuted,
+    fontSize: "13px",
+    lineHeight: "20px",
+    fontFamily: fontStack,
+  },
+  linkText: {
+    margin: 0,
+    color: colors.link,
+    fontSize: "13px",
+    lineHeight: "20px",
+    wordBreak: "break-all" as const,
+    fontFamily: fontStack,
+  },
+  footer: {
+    margin: "20px 0 0",
+    color: colors.textFaint,
+    fontSize: "12px",
+    lineHeight: "18px",
+    textAlign: "center" as const,
+    fontFamily: fontStack,
+  },
+};

src/emails/NotdienstAvailabilityReminderEmail.tsx

@@ -0,0 +1,166 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import { baseBodyStyle, colors, fontStack } from "./_styles";
+
+type NotdienstAvailabilityReminderEmailProps = {
+  parentName: string;
+  kitaName: string;
+  monthLabel: string;
+  link: string;
+};
+
+export function NotdienstAvailabilityReminderEmail({
+  parentName,
+  kitaName,
+  monthLabel,
+  link,
+}: NotdienstAvailabilityReminderEmailProps) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Erinnerung: Verfügbarkeiten für den Notdienst {monthLabel} eintragen</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.card}>
+            <Section style={styles.brandBar}>
+              <Text style={styles.brand}>Kita-Planer</Text>
+            </Section>
+            <Text style={styles.kicker}>Erinnerung Notdienst-Planung</Text>
+            <Heading style={styles.heading}>Verfügbarkeiten für {monthLabel} eintragen</Heading>
+            <Text style={styles.lead}>
+              Hallo {parentName},
+            </Text>
+
+            <Text style={styles.text}>
+              für den Monat <strong>{monthLabel}</strong> läuft aktuell die Planung des Notdienstes in der Kita <strong>{kitaName}</strong>. 
+              Bitte trage deine Verfügbarkeiten im Planer ein, damit wir die Tage fair verteilen können.
+            </Text>
+
+            <Button href={link} style={styles.button}>
+              Verfügbarkeiten eintragen
+            </Button>
+
+            <Text style={styles.fallbackText}>
+              Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser:
+            </Text>
+            <Text style={styles.linkText}>{link}</Text>
+          </Section>
+
+          <Text style={styles.footer}>
+            Diese Nachricht wurde automatisch vom Kita-Planer deiner Kita versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: baseBodyStyle,
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+    fontFamily: fontStack,
+  },
+  card: {
+    padding: "0 28px 28px",
+    backgroundColor: colors.cardBg,
+    borderRadius: "10px",
+    border: `1px solid ${colors.border}`,
+    boxShadow: "0 10px 26px rgba(31, 59, 45, 0.08)",
+    overflow: "hidden",
+    fontFamily: fontStack,
+  },
+  brandBar: {
+    margin: "0 -28px 28px",
+    padding: "14px 28px",
+    backgroundColor: colors.brandGreen,
+    fontFamily: fontStack,
+  },
+  brand: {
+    margin: 0,
+    color: colors.eyebrow,
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+    fontFamily: fontStack,
+  },
+  kicker: {
+    margin: "0 0 10px",
+    color: colors.brandGreenAccent,
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase" as const,
+    fontFamily: fontStack,
+  },
+  heading: {
+    margin: "0 0 14px",
+    color: colors.textPrimary,
+    fontSize: "28px",
+    lineHeight: "34px",
+    fontWeight: 800,
+    fontFamily: fontStack,
+  },
+  lead: {
+    margin: "0 0 22px",
+    color: colors.textBody,
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontFamily: fontStack,
+  },
+  text: {
+    margin: "0 0 24px",
+    color: colors.textBody,
+    fontSize: "15px",
+    lineHeight: "24px",
+    fontFamily: fontStack,
+  },
+  button: {
+    display: "inline-block",
+    padding: "14px 20px",
+    backgroundColor: colors.brandGreen,
+    color: "#ffffff",
+    borderRadius: "6px",
+    fontSize: "15px",
+    fontWeight: 700,
+    textDecoration: "none",
+    fontFamily: fontStack,
+  },
+  fallbackText: {
+    margin: "28px 0 8px",
+    color: colors.textMuted,
+    fontSize: "13px",
+    lineHeight: "20px",
+    fontFamily: fontStack,
+  },
+  linkText: {
+    margin: 0,
+    color: colors.link,
+    fontSize: "13px",
+    lineHeight: "20px",
+    wordBreak: "break-all" as const,
+    fontFamily: fontStack,
+  },
+  footer: {
+    margin: "20px 0 0",
+    color: colors.textFaint,
+    fontSize: "12px",
+    lineHeight: "18px",
+    textAlign: "center" as const,
+    fontFamily: fontStack,
+  },
+};

src/lib/absence-utils.ts

@@ -0,0 +1,13 @@
+import { AbsenceReason } from "@prisma/client";
+
+export function reasonLabel(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "Krank";
+  if (reason === AbsenceReason.VACATION) return "Urlaub";
+  return "Sonstiges";
+}
+
+export function reasonColor(reason: AbsenceReason) {
+  if (reason === AbsenceReason.ILLNESS) return "var(--danger)";
+  if (reason === AbsenceReason.VACATION) return "var(--warn)";
+  return "var(--accent)";
+}

src/lib/child-birthdate.ts

@@ -0,0 +1,34 @@
+export const CHILD_MAX_AGE_YEARS = 7;
+
+export function formatDateInputValue(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}
+
+export function getChildBirthdateRange(referenceDate = new Date()) {
+  const max = new Date(
+    referenceDate.getFullYear(),
+    referenceDate.getMonth(),
+    referenceDate.getDate(),
+  );
+  const min = new Date(max);
+  min.setFullYear(min.getFullYear() - CHILD_MAX_AGE_YEARS);
+
+  return {
+    min: formatDateInputValue(min),
+    max: formatDateInputValue(max),
+  };
+}
+
+export function parseDateInput(value?: string) {
+  if (!value) return null;
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+
+  const date = new Date(`${value}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return null;
+
+  return formatDateInputValue(date) === value ? date : null;
+}

src/lib/date-utils.ts

@@ -1,13 +1,8 @@
 import {
   addMonths,
-  endOfMonth,
   getDate,
   getYear,
   getMonth,
-  isWeekend,
-  eachDayOfInterval,
-  startOfMonth,
-  startOfDay,
   format,
 } from "date-fns";
 import { de } from "date-fns/locale";
@@ -36,13 +31,28 @@ export function getTargetMonthData(now = new Date()) {
 }
 
 export function getWorkingDaysOfMonth(year: number, month: number) {
-  // month ist 1-12, Date erwartet 0-11
-  const start = startOfMonth(new Date(year, month - 1));
-  const end = endOfMonth(start);
+  const start = new Date(Date.UTC(year, month - 1, 1));
+  const end = new Date(Date.UTC(year, month, 0)); // last day of month
 
-  const days = eachDayOfInterval({ start, end });
-  
-  return days
-    .filter((day) => !isWeekend(day))
-    .map((day) => startOfDay(day));
+  const days: Date[] = [];
+  const current = new Date(start);
+  while (current <= end) {
+    const dayOfWeek = current.getUTCDay(); // 0 is Sunday, 6 is Saturday
+    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
+      days.push(new Date(current));
+    }
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+  return days;
+}
+
+export function formatDateKey(date: Date) {
+  return format(date, "yyyy-MM-dd");
+}
+
+export function formatUtcDateKey(date: Date) {
+  const yyyy = date.getUTCFullYear();
+  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const dd = String(date.getUTCDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
 }

src/lib/mail.ts

@@ -16,6 +16,9 @@ type SendAppEmailResult =
   | { success: false; error: string };
 
 export function getAppEmailConfigError() {
+  if (process.env.NODE_ENV === "development") {
+    return null;
+  }
   if (!process.env.RESEND_API_KEY) {
     return "RESEND_API_KEY ist nicht konfiguriert.";
   }
@@ -35,6 +38,16 @@ export async function sendAppEmail({
   replyTo,
 }: SendAppEmailInput): Promise<SendAppEmailResult> {
   if (!process.env.RESEND_API_KEY) {
+    if (process.env.NODE_ENV === "development") {
+      console.log("\n✉️  [DEV EMAIL SIMULATION]");
+      console.log(`From:    ${from || "not-configured"}`);
+      console.log(`To:      ${Array.isArray(to) ? to.join(", ") : to}`);
+      console.log(`Subject: ${subject}`);
+      console.log("-----------------------------------------");
+      console.log("Email body react element is rendered.");
+      console.log("=========================================\n");
+      return { success: true, id: "dev-simulated-id" };
+    }
     return {
       success: false,
       error: "RESEND_API_KEY ist nicht konfiguriert.",