chore: Demo-Daten und Bildaufnahme fuer Benachrichtigungen

Die Aufnahme kann jetzt einen einzelnen Ausschnitt statt der ganzen Seite
festhalten. Ein Bild der kompletten Einstellungsseite zeigt im Kapitel zu
den Benachrichtigungen zu wenig vom Eigentlichen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

screenshots/bilder.spec.ts

@@ -24,6 +24,13 @@ type Aufnahme = {
   pfad: string
   /** Wird vor der Aufnahme ausgeführt, z. B. um ein Formular aufzuklappen. */
   vorbereiten?: (seite: Page) => Promise<void>
+  /**
+   * Nur diesen Ausschnitt aufnehmen statt der ganzen Seite.
+   *
+   * Für Themen, die auf einer gemeinsamen Seite wohnen: ein Bild der ganzen
+   * Einstellungsseite zeigt im Handbuchkapitel zu wenig vom Eigentlichen.
+   */
+  ausschnitt?: string
 }
 
 const AUFNAHMEN: Aufnahme[] = [
@@ -37,6 +44,11 @@ const AUFNAHMEN: Aufnahme[] = [
   { name: 'bereiche', pfad: '/bereiche' },
   { name: 'kalenderkonten', pfad: '/kalenderkonten' },
   { name: 'einstellungen', pfad: '/einstellungen' },
+  {
+    name: 'benachrichtigungen',
+    pfad: '/einstellungen',
+    ausschnitt: '[data-bild="benachrichtigungen"]',
+  },
   { name: 'protokoll', pfad: '/verwaltung/protokoll' },
 ]
 
@@ -82,10 +94,12 @@ for (const schema of ['hell', 'dunkel'] as const) {
         // Der Farbschema-Umschalter und Schriften sollen fertig sein.
         await seite.waitForTimeout(300)
 
-        await seite.screenshot({
-          path: `${ZIEL}/${aufnahme.name}-${schema}-${geraet}.png`,
-          fullPage: true,
-        })
+        const ziel = `${ZIEL}/${aufnahme.name}-${schema}-${geraet}.png`
+        if (aufnahme.ausschnitt) {
+          await seite.locator(aufnahme.ausschnitt).screenshot({ path: ziel })
+        } else {
+          await seite.screenshot({ path: ziel, fullPage: true })
+        }
       }
 
       await kontext.close()