fix(oberflaeche): Kopfleiste einzeilig halten, Demo-Uhr feststellen

Zwei Mängel, die erst in den aufgenommenen Bildern auffielen.

Auf Handybreite brach die Kopfleiste um und drängte den Namen der
Anwendung in die zweite Zeile, mitten zwischen die Menüpunkte. Sie bleibt
jetzt auf allen Breiten einzeilig; wird es eng, scrollt die Navigation
waagerecht.

Das Tagesdatum auf der Startseite wird serverseitig gerendert, weshalb
Playwrights Uhr nicht griff — die Bilder hätten sich täglich geändert. In
der Screenshot-Instanz (DEMO_MODUS=true) steht die Uhr jetzt fest. Reine
Funktionen bekommen den Zeitpunkt weiterhin als Parameter; src/server/
zeitgeber.ts ist die eine Stelle, an der er entsteht.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app/(app)/page.tsx

@@ -10,10 +10,11 @@ import { wochenKapazitaet } from '@/lib/bereich'
 import { alsDatum, alsDauer } from '@/lib/zeit'
 import { verlangeAnmeldung } from '@/server/berechtigung'
 import { db } from '@/server/db'
+import { jetzt } from '@/server/zeitgeber'
 
 export default async function StartSeite() {
   const benutzer = await verlangeAnmeldung('/')
-  const jetzt = new Date()
+  const heute = jetzt()
 
   const bereiche = await db.bereich.findMany({
     where: { aktiv: true },
@@ -26,7 +27,7 @@ export default async function StartSeite() {
     <div className="flex flex-col gap-8">
       <header>
         <h1 className="text-2xl font-semibold tracking-tight">Guten Tag, {anrede}</h1>
-        <p className="text-gedaempft-vordergrund mt-1 text-sm">{alsDatum(jetzt)}</p>
+        <p className="text-gedaempft-vordergrund mt-1 text-sm">{alsDatum(heute)}</p>
       </header>
 
       <section className="flex flex-col gap-4">