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/components/kopfleiste.tsx

@@ -35,12 +35,20 @@ export function Kopfleiste({
 
   return (
     <header className="border-rand bg-karte border-b">
-      <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-3">
-        <Link href="/" className="text-base font-semibold tracking-tight">
+      {/*
+        Bewusst eine einzige Zeile auf allen Breiten: Wird es eng, scrollt die
+        Navigation waagerecht, statt umzubrechen und den Namen der Anwendung in
+        die zweite Zeile zu drängen.
+      */}
+      <div className="mx-auto flex w-full max-w-5xl items-center gap-3 px-4 py-3 sm:gap-6">
+        <Link href="/" className="shrink-0 text-base font-semibold tracking-tight">
           Planer
         </Link>
 
-        <nav aria-label="Hauptnavigation" className="flex flex-1 flex-wrap gap-1">
+        <nav
+          aria-label="Hauptnavigation"
+          className="flex min-w-0 flex-1 gap-1 overflow-x-auto"
+        >
           {sichtbar.map((eintrag) => {
             const aktiv =
               eintrag.pfad === '/' ? pfad === '/' : pfad.startsWith(eintrag.pfad)
@@ -50,7 +58,7 @@ export function Kopfleiste({
                 href={eintrag.pfad}
                 aria-current={aktiv ? 'page' : undefined}
                 className={cn(
-                  'rounded-md px-3 py-1.5 text-sm transition-colors',
+                  'shrink-0 rounded-md px-3 py-1.5 text-sm whitespace-nowrap transition-colors',
                   aktiv
                     ? 'bg-gedaempft text-vordergrund font-medium'
                     : 'text-gedaempft-vordergrund hover:bg-gedaempft hover:text-vordergrund',
@@ -65,7 +73,7 @@ export function Kopfleiste({
           })}
         </nav>
 
-        <div className="flex items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1">
           <FarbschemaKnopf />
           <span
             className="text-gedaempft-vordergrund hidden text-xs sm:inline"