Design-Feinschliff: Kontrast-Bug behoben, Sidebar-Navigation mit Mobile-Drawer

Hauptursache fuer "Text kaum lesbar": globals.css schaltete bei einem
System im Dark Mode automatisch auf helle Schrift auf dunklem Hintergrund
um (prefers-color-scheme), waehrend jede einzelne Komponente durchgehend
hartcodierte helle Tailwind-Klassen nutzt (bg-white, text-slate-800 etc.)
- keine ist dark-mode-bewusst. Ergebnis je nach Systemeinstellung: helle
Schrift auf hellem Hintergrund. Fix: die automatische Dark-Mode-Umschaltung
komplett entfernt, App rendert immer hell (passend zu allen Komponenten),
bis es einen echten Dark Mode gibt. Ausserdem: body ueberschrieb die
bereits geladene Geist-Schrift mit hartcodiertem Arial-Fallback - behoben.

Zusaetzlich alle 33 Stellen mit text-slate-400 (Kontrast ~2.9:1, faellt
WCAG AA durch) auf text-slate-500 (~4.6:1, besteht AA) angehoben.

Navigation vollstaendig neu gebaut: von einer horizontal umbrechenden
Topbar mit ~10 Textlinks (die am PC schlecht aussah und am Handy komplett
unbedienbar war, da nichts fuer Mobile vorgesehen war) zu einer echten
Sidebar mit Icons (@tabler/icons-react, wie im urspruenglichen Architektur-
plan vorgesehen aber bisher nie installiert) und gruppierten Abschnitten
(Patienten / Recht & Briefe / Verwaltung / Konto). Unter der lg-Breakpoint
wird die Sidebar zu einem Off-Canvas-Drawer mit Hamburger-Button und
Backdrop - gleiches Pattern wie die mobile Sidebar der alten App.

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

pflegepilot_v3/frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@tabler/icons-react": "^3.45.0",
         "@tanstack/react-query": "^5.101.2",
         "next": "16.2.10",
         "react": "19.2.4",
@@ -1263,6 +1264,32 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.45.0.tgz",
+      "integrity": "sha512-jiATwV8+zGYLTZ7gMLGivCic+KtsMZXcDmufIG8umlLxoHhI6902hGYIEt0Oa9Y9SXblNzUlrisHm5jOFMxOQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.45.0.tgz",
+      "integrity": "sha512-t/AuKs7ALMDDTY+B9IvfZnlO0mbLlP/lJxP/HnGC49QkM8mCsTN38kYyxjXxgrb1+TeK53ioVBJqIV7n/eysXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.45.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",

pflegepilot_v3/frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@tabler/icons-react": "^3.45.0",
     "@tanstack/react-query": "^5.101.2",
     "next": "16.2.10",
     "react": "19.2.4",

pflegepilot_v3/frontend/src/app/(app)/admin/einstellungen/page.tsx

@@ -54,7 +54,7 @@ export default function BackendEinstellungenPage() {
     if (data) setForm(data);
   }, [data]);
 
-  if (isLoading) return <div className="mx-auto max-w-2xl p-6 text-slate-400">Lädt…</div>;
+  if (isLoading) return <div className="mx-auto max-w-2xl p-6 text-slate-500">Lädt…</div>;
 
   return (
     <div className="mx-auto max-w-2xl p-6">

pflegepilot_v3/frontend/src/app/(app)/admin/page.tsx

@@ -59,7 +59,7 @@ export default function AdminPage() {
       render: (n) => (
         <div>
           <span className="font-medium text-slate-800">{n.name || n.benutzername}</span>
-          <span className="ml-2 text-xs text-slate-400">
+          <span className="ml-2 text-xs text-slate-500">
             {n.rolle}
             {n.ist_demo && " · demo"}
           </span>
@@ -79,7 +79,7 @@ export default function AdminPage() {
       label: "Aktionen",
       render: (n) =>
         n.id === eigeneId ? (
-          <span className="text-xs text-slate-400">eigenes Konto</span>
+          <span className="text-xs text-slate-500">eigenes Konto</span>
         ) : (
           <div className="flex flex-wrap gap-2 text-xs">
             {n.aktiv ? (
@@ -163,7 +163,7 @@ export default function AdminPage() {
         <p className="mb-3 text-sm font-semibold text-slate-700">Konten</p>
         {rechnungFehler && <p className="mb-2 text-sm text-red-600">{rechnungFehler}</p>}
         {isLoading ? (
-          <p className="text-slate-400">Lädt…</p>
+          <p className="text-slate-500">Lädt…</p>
         ) : (
           <ResponsiveTable columns={columns} rows={nutzer ?? []} rowKey={(n) => n.id} />
         )}

pflegepilot_v3/frontend/src/app/(app)/aufgaben/page.tsx

@@ -95,7 +95,7 @@ export default function AufgabenPage() {
       {anlegen.isError && <p className="mb-3 text-sm text-red-600">{(anlegen.error as Error).message}</p>}
 
       {isLoading ? (
-        <p className="text-slate-400">Lädt…</p>
+        <p className="text-slate-500">Lädt…</p>
       ) : (
         <ResponsiveTable columns={columns} rows={aufgaben ?? []} rowKey={(a) => a.id} />
       )}

pflegepilot_v3/frontend/src/app/(app)/changelog/page.tsx

@@ -61,7 +61,7 @@ export default function ChangelogPage() {
           <div key={e.id} className="rounded-2xl border border-slate-200 bg-white p-4">
             <div className="flex items-start justify-between">
               <div>
-                <p className="text-xs font-medium text-slate-400">
+                <p className="text-xs font-medium text-slate-500">
                   Version {e.version} · {new Date(e.datum).toLocaleDateString("de-DE")}
                 </p>
                 <p className="mb-1 text-sm font-semibold text-slate-800">{e.titel}</p>

pflegepilot_v3/frontend/src/app/(app)/dashboard/page.tsx

@@ -12,7 +12,7 @@ export default function DashboardPage() {
       <h1 className="mb-4 text-2xl font-semibold text-slate-800">Dashboard</h1>
 
       {isLoading || !data ? (
-        <p className="text-slate-400">Lädt…</p>
+        <p className="text-slate-500">Lädt…</p>
       ) : (
         <BentoGrid>
           <BentoTile accent="mint">
@@ -37,14 +37,14 @@ export default function DashboardPage() {
           <BentoTile span={4}>
             <p className="mb-3 text-sm font-semibold text-slate-700">Zuletzt bearbeitete Patienten</p>
             {data.letzte_patienten.length === 0 ? (
-              <p className="text-sm text-slate-400">Noch keine Patienten angelegt.</p>
+              <p className="text-sm text-slate-500">Noch keine Patienten angelegt.</p>
             ) : (
               <ul className="divide-y divide-slate-100">
                 {data.letzte_patienten.map((p) => (
                   <li key={p.id} className="py-2">
                     <Link href={`/patienten/${p.id}`} className="text-sm text-slate-700 hover:underline">
                       {p.vorname} {p.nachname}
-                      <span className="ml-2 text-xs text-slate-400">Pflegegrad {p.pflegegrad}</span>
+                      <span className="ml-2 text-xs text-slate-500">Pflegegrad {p.pflegegrad}</span>
                     </Link>
                   </li>
                 ))}

pflegepilot_v3/frontend/src/app/(app)/kalender/page.tsx

@@ -26,7 +26,7 @@ export default function KalenderPage() {
       <h1 className="mb-4 text-2xl font-semibold text-slate-800">Kalender & Fristen</h1>
 
       {isLoading ? (
-        <p className="text-slate-400">Lädt…</p>
+        <p className="text-slate-500">Lädt…</p>
       ) : (
         <>
           <Gruppe titel="Überfällig" farbe="border-red-200 bg-red-50" events={gruppen.ueberfaellig} />
@@ -34,7 +34,7 @@ export default function KalenderPage() {
           <Gruppe titel="Später" farbe="border-slate-200 bg-white" events={gruppen.spaeter} />
         </>
       )}
-      <p className="mt-2 text-xs text-slate-400">heute: {heute}</p>
+      <p className="mt-2 text-xs text-slate-500">heute: {heute}</p>
     </div>
   );
 }
@@ -49,10 +49,10 @@ function Gruppe({ titel, farbe, events }: { titel: string; farbe: string; events
           <div key={`${e.typ}-${e.id}`} className={`rounded-xl border p-3 text-sm ${farbe}`}>
             <div className="flex items-center justify-between">
               <span className="font-medium text-slate-800">{e.titel}</span>
-              <span className="text-xs text-slate-400">{TYP_LABEL[e.typ] ?? e.typ}</span>
+              <span className="text-xs text-slate-500">{TYP_LABEL[e.typ] ?? e.typ}</span>
             </div>
             <p className="text-xs text-slate-500">{e.beschreibung}</p>
-            <p className="mt-1 text-xs text-slate-400">
+            <p className="mt-1 text-xs text-slate-500">
               {e.datum} {e.patient_name && `· ${e.patient_name}`}
             </p>
           </div>

pflegepilot_v3/frontend/src/app/(app)/katalog/page.tsx

@@ -62,7 +62,7 @@ export default function KatalogPage() {
       </div>
 
       {isLoading ? (
-        <p className="text-slate-400">Lädt…</p>
+        <p className="text-slate-500">Lädt…</p>
       ) : (
         <>
           <p className="mb-3 text-sm text-slate-500">{data?.total} Einträge gefunden</p>
@@ -75,7 +75,7 @@ export default function KatalogPage() {
                     <div key={item.id} className="rounded-xl border border-slate-200 bg-white p-4">
                       <p className="font-medium text-slate-800">{item.name}</p>
                       <p className="mt-1 text-xs text-slate-500">{item.kurz}</p>
-                      <p className="mt-2 text-xs text-slate-400">{item.rechtsgrundlage}</p>
+                      <p className="mt-2 text-xs text-slate-500">{item.rechtsgrundlage}</p>
                       <p className="mt-1 text-sm font-medium text-slate-700">{item.betrag}</p>
                     </div>
                   ))}

pflegepilot_v3/frontend/src/app/(app)/layout.tsx

@@ -1,12 +1,75 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
+import {
+  IconLayoutDashboard,
+  IconUsers,
+  IconBook2,
+  IconCalculator,
+  IconScale,
+  IconMail,
+  IconChecklist,
+  IconCalendarEvent,
+  IconCreditCard,
+  IconSparkles,
+  IconSettings,
+  IconUsersGroup,
+  IconMenu2,
+  IconX,
+  IconLogout,
+} from "@tabler/icons-react";
 import { useAuth } from "@/lib/auth";
 import { AuthOverlay } from "@/components/AuthOverlay";
 import { ChangelogModal } from "@/components/ChangelogModal";
 
+type NavItem = { href: string; label: string; icon: typeof IconUsers };
+type NavSection = { title?: string; items: NavItem[] };
+
+const NUTZER_SECTIONS: NavSection[] = [
+  { items: [{ href: "/dashboard", label: "Dashboard", icon: IconLayoutDashboard }] },
+  {
+    title: "Patienten",
+    items: [
+      { href: "/patienten", label: "Patienten", icon: IconUsers },
+      { href: "/katalog", label: "Katalog", icon: IconBook2 },
+      { href: "/rechner", label: "Rechner", icon: IconCalculator },
+    ],
+  },
+  {
+    title: "Recht & Briefe",
+    items: [
+      { href: "/widerspruch", label: "Widerspruch", icon: IconScale },
+      { href: "/musterbrief", label: "Musterbrief", icon: IconMail },
+    ],
+  },
+  {
+    title: "Verwaltung",
+    items: [
+      { href: "/aufgaben", label: "Aufgaben", icon: IconChecklist },
+      { href: "/kalender", label: "Kalender", icon: IconCalendarEvent },
+    ],
+  },
+  {
+    title: "Konto",
+    items: [
+      { href: "/meinabo", label: "Mein Abo", icon: IconCreditCard },
+      { href: "/changelog", label: "Was ist neu?", icon: IconSparkles },
+    ],
+  },
+];
+
+const ADMIN_SECTIONS: NavSection[] = [
+  {
+    items: [
+      { href: "/admin", label: "Admin-Dashboard", icon: IconUsersGroup },
+      { href: "/admin/einstellungen", label: "Einstellungen", icon: IconSettings },
+    ],
+  },
+  { title: "Konto", items: [{ href: "/changelog", label: "Was ist neu?", icon: IconSparkles }] },
+];
+
 const NUTZER_NUR_PFADE = [
   "/dashboard", "/patienten", "/katalog", "/rechner", "/widerspruch", "/musterbrief", "/meinabo",
   "/aufgaben", "/kalender",
@@ -17,6 +80,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   const me = meQuery.data;
   const pathname = usePathname();
   const router = useRouter();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
     if (!me) return;
@@ -28,74 +92,106 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
     }
   }, [me, pathname, router]);
 
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
   if (meQuery.isLoading) {
-    return <div className="flex min-h-screen items-center justify-center text-slate-400">Lädt…</div>;
+    return <div className="flex min-h-screen items-center justify-center text-slate-500">Lädt…</div>;
   }
 
   if (!me) {
     return <AuthOverlay />;
   }
 
+  const sections = me.rolle === "admin" ? ADMIN_SECTIONS : NUTZER_SECTIONS;
+
   return (
-    <div className="min-h-screen bg-slate-50">
-      <header className="flex items-center justify-between border-b border-slate-200 bg-white px-6 py-3">
-        <nav className="flex flex-wrap items-center gap-4 text-sm">
-          <span className="font-semibold text-slate-800">Pflegepilot</span>
-          {me.rolle === "admin" ? (
-            <>
-              <Link href="/admin" className="text-slate-600 hover:text-slate-900">
-                Admin-Dashboard
-              </Link>
-              <Link href="/admin/einstellungen" className="text-slate-600 hover:text-slate-900">
-                Einstellungen
-              </Link>
-            </>
-          ) : (
-            <>
-              <Link href="/dashboard" className="text-slate-600 hover:text-slate-900">
-                Dashboard
-              </Link>
-              <Link href="/patienten" className="text-slate-600 hover:text-slate-900">
-                Patienten
-              </Link>
-              <Link href="/katalog" className="text-slate-600 hover:text-slate-900">
-                Katalog
-              </Link>
-              <Link href="/rechner" className="text-slate-600 hover:text-slate-900">
-                Rechner
-              </Link>
-              <Link href="/widerspruch" className="text-slate-600 hover:text-slate-900">
-                Widerspruch
-              </Link>
-              <Link href="/musterbrief" className="text-slate-600 hover:text-slate-900">
-                Musterbrief
-              </Link>
-              <Link href="/aufgaben" className="text-slate-600 hover:text-slate-900">
-                Aufgaben
-              </Link>
-              <Link href="/kalender" className="text-slate-600 hover:text-slate-900">
-                Kalender
-              </Link>
-              <Link href="/meinabo" className="text-slate-600 hover:text-slate-900">
-                Mein Abo
-              </Link>
-            </>
-          )}
-          <Link href="/changelog" className="text-slate-600 hover:text-slate-900">
-            Was ist neu?
-          </Link>
+    <div className="flex min-h-screen bg-slate-50">
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-slate-900/50 lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-200 ease-out lg:static lg:z-auto lg:w-64 lg:translate-x-0 ${
+          mobileOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between px-5 py-4">
+          <span className="text-lg font-semibold text-slate-800">Pflegepilot</span>
+          <button
+            onClick={() => setMobileOpen(false)}
+            className="text-slate-500 lg:hidden"
+            aria-label="Menü schließen"
+          >
+            <IconX size={22} />
+          </button>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto px-3 pb-4">
+          {sections.map((section, i) => (
+            <div key={i} className="mb-4">
+              {section.title && (
+                <p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  {section.title}
+                </p>
+              )}
+              <div className="flex flex-col gap-0.5">
+                {section.items.map((item) => {
+                  const active = pathname === item.href || pathname.startsWith(item.href + "/");
+                  const Icon = item.icon;
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                        active
+                          ? "bg-slate-800 text-white"
+                          : "text-slate-700 hover:bg-slate-100"
+                      }`}
+                    >
+                      <Icon size={18} className="shrink-0" />
+                      {item.label}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
         </nav>
-        <div className="flex items-center gap-3 text-sm text-slate-500">
-          <span>
+
+        <div className="border-t border-slate-200 p-4">
+          <p className="mb-2 truncate text-sm font-medium text-slate-700">
             {me.name ?? me.benutzername}
-            {me.ist_demo && " · Demo"}
-          </span>
-          <button onClick={() => logout.mutate()} className="text-slate-500 underline">
+            {me.ist_demo && <span className="ml-1 text-xs font-normal text-slate-500">· Demo</span>}
+          </p>
+          <button
+            onClick={() => logout.mutate()}
+            className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100"
+          >
+            <IconLogout size={18} />
             Abmelden
           </button>
         </div>
-      </header>
-      <main>{children}</main>
+      </aside>
+
+      <div className="flex min-h-screen flex-1 flex-col">
+        <header className="flex items-center gap-3 border-b border-slate-200 bg-white px-4 py-3 lg:hidden">
+          <button
+            onClick={() => setMobileOpen(true)}
+            className="text-slate-600"
+            aria-label="Menü öffnen"
+          >
+            <IconMenu2 size={24} />
+          </button>
+          <span className="font-semibold text-slate-800">Pflegepilot</span>
+        </header>
+
+        <main className="flex-1">{children}</main>
+      </div>
 
       {me.changelog_ungesehen.length > 0 && <ChangelogModal eintraege={me.changelog_ungesehen} />}
     </div>

pflegepilot_v3/frontend/src/app/(app)/meinabo/page.tsx

@@ -17,7 +17,7 @@ export default function MeinAboPage() {
   };
 
   if (isLoading || !data) {
-    return <div className="mx-auto max-w-md p-6 text-slate-400">Lädt…</div>;
+    return <div className="mx-auto max-w-md p-6 text-slate-500">Lädt…</div>;
   }
 
   return (

pflegepilot_v3/frontend/src/app/(app)/musterbrief/page.tsx

@@ -202,7 +202,7 @@ export default function MusterbriefPage() {
               </pre>
             </div>
           ) : (
-            <p className="text-sm text-slate-400">Noch kein Brief erstellt.</p>
+            <p className="text-sm text-slate-500">Noch kein Brief erstellt.</p>
           )}
         </div>
       </div>

pflegepilot_v3/frontend/src/app/(app)/patienten/[id]/page.tsx

@@ -27,7 +27,7 @@ export default function PatientDetailPage({ params }: { params: Promise<{ id: st
   const [tbForm, setTbForm] = useState({ datum: new Date().toISOString().slice(0, 10), allgemein: "" });
 
   if (isLoading || !patient) {
-    return <div className="mx-auto max-w-3xl p-6 text-slate-400">Lädt…</div>;
+    return <div className="mx-auto max-w-3xl p-6 text-slate-500">Lädt…</div>;
   }
 
   const notizSpeichern = (e: React.FormEvent) => {
@@ -142,15 +142,15 @@ export default function PatientDetailPage({ params }: { params: Promise<{ id: st
           </div>
         </div>
         {!antraege || antraege.length === 0 ? (
-          <p className="text-sm text-slate-400">Noch keine Anträge oder Briefe.</p>
+          <p className="text-sm text-slate-500">Noch keine Anträge oder Briefe.</p>
         ) : (
           <ul className="divide-y divide-slate-100">
             {antraege.map((a) => (
               <li key={a.id} className="flex items-center justify-between py-2 text-sm">
                 <div>
                   <span className="font-medium text-slate-700">{a.typ}</span>
-                  <span className="ml-2 text-xs text-slate-400">{a.status}</span>
-                  <span className="ml-2 text-xs text-slate-400">
+                  <span className="ml-2 text-xs text-slate-500">{a.status}</span>
+                  <span className="ml-2 text-xs text-slate-500">
                     {new Date(a.erstellt_am).toLocaleDateString("de-DE")}
                   </span>
                 </div>
@@ -231,7 +231,7 @@ export default function PatientDetailPage({ params }: { params: Promise<{ id: st
             </li>
           ))}
           {(!tagebuch || tagebuch.length === 0) && (
-            <p className="py-2 text-sm text-slate-400">Noch keine Einträge.</p>
+            <p className="py-2 text-sm text-slate-500">Noch keine Einträge.</p>
           )}
         </ul>
       </section>
@@ -261,7 +261,7 @@ export default function PatientDetailPage({ params }: { params: Promise<{ id: st
             </li>
           ))}
           {(!dokumente || dokumente.length === 0) && (
-            <p className="py-2 text-sm text-slate-400">Noch keine Dokumente.</p>
+            <p className="py-2 text-sm text-slate-500">Noch keine Dokumente.</p>
           )}
         </ul>
       </section>
@@ -272,7 +272,7 @@ export default function PatientDetailPage({ params }: { params: Promise<{ id: st
 function Field({ label, value }: { label: string; value?: string | null }) {
   return (
     <div>
-      <p className="text-xs text-slate-400">{label}</p>
+      <p className="text-xs text-slate-500">{label}</p>
       <p className="text-slate-700">{value || "–"}</p>
     </div>
   );

pflegepilot_v3/frontend/src/app/(app)/patienten/neu/page.tsx

@@ -189,7 +189,7 @@ export default function NeuerPatientPage() {
         {state.step === 3 && <Step3 state={state} dispatch={dispatch} />}
         {state.step === 4 &&
           (fragenLoading || !fragenData ? (
-            <p className="text-slate-400">Lädt…</p>
+            <p className="text-slate-500">Lädt…</p>
           ) : (
             <Step4 state={state} dispatch={dispatch} fragenData={fragenData} total={total} />
           ))}
@@ -249,7 +249,7 @@ function StepDots({ current }: { current: number }) {
                   ? "bg-slate-800 text-white"
                   : done
                   ? "bg-emerald-500 text-white"
-                  : "border border-slate-300 text-slate-400"
+                  : "border border-slate-300 text-slate-500"
               }`}
             >
               {done ? "✓" : n}

pflegepilot_v3/frontend/src/app/(app)/patienten/page.tsx

@@ -71,7 +71,7 @@ export default function PatientenPage() {
       </div>
 
       {isLoading ? (
-        <p className="text-slate-400">Lädt…</p>
+        <p className="text-slate-500">Lädt…</p>
       ) : (
         <ResponsiveTable columns={columns} rows={data ?? []} rowKey={(p) => p.id} />
       )}

pflegepilot_v3/frontend/src/app/(app)/rechner/page.tsx

@@ -87,7 +87,7 @@ export default function RechnerPage() {
               </li>
             ))}
           </ul>
-          <p className="mt-3 text-xs text-slate-400">
+          <p className="mt-3 text-xs text-slate-500">
             {data.relevant_count} passende Leistungen im Katalog gefunden.
           </p>
         </div>

pflegepilot_v3/frontend/src/app/(app)/widerspruch/page.tsx

@@ -255,7 +255,7 @@ export default function WiderspruchPage() {
               </pre>
             </div>
           ) : (
-            <p className="text-sm text-slate-400">Noch kein Widerspruch erstellt.</p>
+            <p className="text-sm text-slate-500">Noch kein Widerspruch erstellt.</p>
           )}
         </div>
       </div>

pflegepilot_v3/frontend/src/app/globals.css

@@ -1,8 +1,14 @@
 @import "tailwindcss";
 
+/* Bewusst kein prefers-color-scheme-Dark-Mode: keine Komponente in dieser
+   App ist dark-mode-bewusst (durchgehend hartcodierte helle Tailwind-Klassen
+   wie bg-white/text-slate-800). Ein automatischer Hell/Dunkel-Wechsel nur
+   ueber diese zwei CSS-Variablen wuerde helle Schrift auf hellem Hintergrund
+   erzeugen (kaum lesbar) statt eines echten Dark Mode - die App rendert
+   deshalb immer hell, bis es einen richtigen Dark Mode gibt. */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f8fafc;
+  --foreground: #1e293b;
 }
 
 @theme inline {
@@ -12,17 +18,11 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
 
 /* Responsive-Tabelle: normale <table> ab 700px, darunter Akkordeon-Karten.

pflegepilot_v3/frontend/src/components/ChangelogModal.tsx

@@ -16,7 +16,7 @@ export function ChangelogModal({ eintraege }: { eintraege: ChangelogEintrag[] })
         <div className="max-h-96 overflow-y-auto">
           {eintraege.map((e) => (
             <div key={e.id} className="mb-4 border-b border-slate-100 pb-4 last:border-0">
-              <p className="text-xs font-medium text-slate-400">
+              <p className="text-xs font-medium text-slate-500">
                 Version {e.version} · {new Date(e.datum).toLocaleDateString("de-DE")}
               </p>
               <p className="mb-1 text-sm font-semibold text-slate-800">{e.titel}</p>

pflegepilot_v3/frontend/src/components/DateWheelPicker.tsx

@@ -64,7 +64,7 @@ function WheelColumn({
         <div
           key={item + i}
           className={`flex h-10 snap-center items-center justify-center text-sm ${
-            i === selectedIndex ? "font-semibold text-slate-900" : "text-slate-400"
+            i === selectedIndex ? "font-semibold text-slate-900" : "text-slate-500"
           }`}
         >
           {item}

pflegepilot_v3/frontend/src/components/ResponsiveTable.tsx

@@ -24,7 +24,7 @@ export function ResponsiveTable<T>({
   );
 
   if (rows.length === 0) {
-    return <p className="py-8 text-center text-sm text-slate-400">Keine Einträge.</p>;
+    return <p className="py-8 text-center text-sm text-slate-500">Keine Einträge.</p>;
   }
 
   return (