diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 6fa3ec0..92b6dcf 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -114,40 +114,55 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
 
 function BrandPanel() {
   return (
-    <aside className="relative hidden overflow-hidden bg-brand-700 lg:flex lg:flex-col lg:justify-between lg:p-12">
-      {/* Zwei weiche Lichtpunkte und ein feines Raster — genug Struktur, damit
+    // Rosa und nicht Blau: Rosa ist die Farbe, in der die Marke auftritt, und
+    // die Flaeche ist das Groesste, was diese Seite zu vergeben hat. Blau war
+    // hier doppelt falsch — es drehte das Verhaeltnis der beiden Markenfarben
+    // um, und das Logo bringt sein eigenes rosa Feld mit (§1.2), das auf Blau
+    // wie ein aufgeklebtes Rechteck stand. Auf Rosa geht es in die Flaeche
+    // ueber, und genau das meint §3.1 mit „in einem grossflaechigen rosa
+    // Umfeld eingebettet".
+    <aside className="relative hidden overflow-hidden bg-accent-500 lg:flex lg:flex-col lg:justify-between lg:p-12">
+      {/* Ein weicher Lichtpunkt und ein feines Raster — genug Struktur, damit
           die Fläche nicht wie ein Farbfehler wirkt, aber ohne Bilddatei und
-          ohne von der einen Schaltfläche gegenüber abzulenken. */}
+          ohne von der einen Schaltfläche gegenüber abzulenken. Das Raster ist
+          jetzt aus ink statt aus Weiss: auf Rosa verschwindet Weiss. */}
       <div
         aria-hidden="true"
         className="pointer-events-none absolute inset-0"
         style={{
           backgroundImage:
-            "radial-gradient(60rem 40rem at 15% 0%, rgb(255 255 255 / 0.16), transparent 60%)," +
-            "radial-gradient(40rem 40rem at 100% 100%, rgb(255 255 255 / 0.10), transparent 55%)," +
-            "linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px)," +
-            "linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px)",
+            "radial-gradient(60rem 40rem at 15% 0%, rgb(255 255 255 / 0.26), transparent 60%)," +
+            "radial-gradient(40rem 40rem at 100% 100%, rgb(35 31 32 / 0.07), transparent 55%)," +
+            "linear-gradient(rgb(35 31 32 / 0.045) 1px, transparent 1px)," +
+            "linear-gradient(90deg, rgb(35 31 32 / 0.045) 1px, transparent 1px)",
           backgroundSize: "auto, auto, 3rem 3rem, 3rem 3rem",
         }}
       />
 
       {/* -ml-4 gleicht den Freiraum des Logos aus, damit die Wortmarke
           buendig mit dem Text darunter beginnt und nicht eingerueckt wirkt. */}
+      {/* Kein Weiss mehr auf dieser Flaeche: Weiss auf Manner Rosa sind
+          2.18:1 und damit unlesbar, in jeder Groesse. Getragen wird der Text
+          von ink (7.47:1) und brand-700 (6.60:1) — und die Ueberschrift in
+          Blau auf Rosa ist dieselbe Paarung, aus der der Schriftzug selbst
+          besteht. Die Abstufung macht ab jetzt Groesse und Gewicht, nicht
+          Transparenz: eine aufgehellte Schrift waere genau das, was hier
+          durchfaellt. */}
       <div className="relative -ml-4">
-        <AppWortmarke hoehe={36} textKlasse="text-white" />
+        <AppWortmarke hoehe={36} textKlasse="text-brand-700" />
       </div>
 
       <div className="relative max-w-md">
-        <p className="text-3xl font-extrabold leading-tight tracking-tight text-white">
+        <p className="text-3xl font-extrabold leading-tight tracking-tight text-brand-700">
           Die Organisation, so wie sie heute wirklich aussieht.
         </p>
-        <p className="mt-4 text-sm leading-relaxed text-white/70">
+        <p className="mt-4 text-sm leading-relaxed text-ink">
           Stammdaten, Planstellen und Berichtslinien der Alpenwerk Industrie GmbH — jederzeit auch zu einem beliebigen
           Stichtag.
         </p>
       </div>
 
-      <p className="relative text-xs text-white/50">Interne Anwendung · Zugriff nur für die Personalabteilung</p>
+      <p className="relative text-xs font-semibold text-ink">Interne Anwendung · Zugriff nur für die Personalabteilung</p>
     </aside>
   );
 }
diff --git a/components/shell/NotesBell.tsx b/components/shell/NotesBell.tsx
index 9c16428..f98252c 100644
--- a/components/shell/NotesBell.tsx
+++ b/components/shell/NotesBell.tsx
@@ -66,7 +66,9 @@ export function NotesBell({ notes, kollegen }: { notes: OpenNote[]; kollegen: Ko
 
   return (
     <div ref={containerRef} className="relative">
-      <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Meine Notizen" className="relative rounded p-1.5 text-ink-muted hover:bg-surface">
+      {/* ink statt ink-muted: die Glocke sitzt im rosa Markenband der Kopfzeile,
+          und ink-muted kommt darauf nur auf 2.33:1. */}
+      <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Meine Notizen" className="relative rounded p-1.5 text-ink hover:bg-accent-100">
         <Bell className="h-4 w-4" />
         {notes.length > 0 && (
           <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-solid px-1 text-[10px] font-bold text-white">
diff --git a/components/shell/Sidebar.tsx b/components/shell/Sidebar.tsx
index de7f70b..07fd0f9 100644
--- a/components/shell/Sidebar.tsx
+++ b/components/shell/Sidebar.tsx
@@ -60,13 +60,16 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
             Abstand mit (siehe components/brand/Logo.tsx), und beides
             uebereinander schoebe die Wortmarke sichtbar aus der Flucht der
             Navigationspunkte darunter. */}
-        <div className="flex h-14 shrink-0 items-center justify-between border-b border-border pl-2 pr-3">
+        {/* Rosa wie die Kopfzeile daneben: beide zusammen sind ein
+            durchgehendes Band ueber der Anwendung, in dem das Logo mit seinem
+            eigenen rosa Feld aufgeht statt als Rechteck darauf zu liegen. */}
+        <div className="flex h-14 shrink-0 items-center justify-between border-b border-accent-600/40 bg-accent-500 pl-2 pr-3">
           <AppWortmarke hoehe={24} textKlasse="text-brand-700" />
           <button
             type="button"
             onClick={onClose}
             aria-label="Navigation schließen"
-            className="-mr-1 rounded p-2 text-ink-muted hover:bg-surface lg:hidden"
+            className="-mr-1 rounded p-2 text-ink hover:bg-accent-100 lg:hidden"
           >
             <X className="h-5 w-5" />
           </button>
diff --git a/components/shell/Topbar.tsx b/components/shell/Topbar.tsx
index 66dfd69..7dc4612 100644
--- a/components/shell/Topbar.tsx
+++ b/components/shell/Topbar.tsx
@@ -35,13 +35,22 @@ export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProp
   return (
     // Sticky, with the notch inset added to its top padding: on an iPhone in
     // landscape the bar would otherwise sit under the rounded corner.
-    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-border bg-white px-3 pt-[env(safe-area-inset-top)] sm:px-6">
+    //
+    // Rosa und nicht Weiss: zusammen mit dem Kopf der Seitenleiste bildet
+    // dieser Streifen das durchgehende Markenband ueber der Anwendung. Auf
+    // Weiss stand das Logo daneben als ausgeschnittenes Rechteck, weil es
+    // sein rosa Feld mitbringt; in einem rosa Band geht es darin auf.
+    //
+    // Alles Geschriebene darauf ist ink: ink-muted kommt auf Rosa nur auf
+    // 2.33:1 und faellt durch. Aufgehellt wird nichts mehr, gestuft wird
+    // ueber Groesse und Gewicht.
+    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-accent-600/40 bg-accent-500 px-3 pt-[env(safe-area-inset-top)] sm:px-6">
       <div className="flex min-w-0 items-center gap-2">
         <button
           type="button"
           onClick={onOpenNav}
           aria-label="Navigation öffnen"
-          className="-ml-1 rounded p-2 text-ink-body hover:bg-surface lg:hidden"
+          className="-ml-1 rounded p-2 text-ink hover:bg-accent-100 lg:hidden"
         >
           <Menu className="h-5 w-5" />
         </button>
@@ -50,12 +59,12 @@ export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProp
       <div className="flex shrink-0 items-center gap-1 sm:gap-4">
         <NotesBell notes={openNotes} kollegen={kollegen} />
         <NewHireButton />
-        <div className="flex items-center gap-2 text-sm sm:border-l sm:border-border sm:pl-4">
+        <div className="flex items-center gap-2 text-sm sm:border-l sm:border-ink/25 sm:pl-4">
           {/* The name is the first thing worth dropping on a narrow screen —
               the account is still reachable via the sign-out control. */}
           <span className="hidden font-semibold text-ink md:inline">{userLabel}</span>
           <form action={logout}>
-            <button type="submit" aria-label="Abmelden" className="rounded p-2 text-ink-muted hover:bg-surface">
+            <button type="submit" aria-label="Abmelden" className="rounded p-2 text-ink hover:bg-accent-100">
               <LogOut className="h-4 w-4" />
             </button>
           </form>
diff --git a/docs/farbschema.html b/docs/farbschema.html
index 939c193..d09a282 100644
--- a/docs/farbschema.html
+++ b/docs/farbschema.html
@@ -88,7 +88,7 @@
 
   .nav { width: 232px; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
   .nav .hd { height: 56px; display: flex; align-items: center; gap: 0; padding-left: 8px;
-             border-bottom: 1px solid var(--border); }
+             background: var(--accent-500); border-bottom: 1px solid var(--accent-600); }
   .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 3px 10px;
            border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-body); text-decoration: none; }
   .nav a.active { background: var(--brand-100); color: var(--brand-700); }
@@ -144,8 +144,12 @@
 
   <!-- ══════════════════════════════════════════════════════════ -->
   <h2>2 · Warum Blau bedient und Rosa traegt</h2>
-  <p>Die Rollenverteilung ist nicht gewaehlt, sondern gemessen. Nach WCAG 2.1 braucht
-  Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.</p>
+  <p><b>Rosa ist die fuehrende Farbe.</b> Es traegt die grossen Flaechen — das Panel der
+  Anmeldeseite, das Band ueber der Anwendung aus Kopfzeile und Logokopf. Blau ist die
+  Farbe der kleinen, bedienbaren Dinge: Knopf, Link, Fokusring, ausgewaehlter Eintrag.
+  Dasselbe Verhaeltnis steckt im Schriftzug selbst — blaue Lettern auf rosa Feld.</p>
+  <p>Welche Farbe welche Rolle bekommt, ist dabei nicht gewaehlt, sondern gemessen. Nach
+  WCAG 2.1 braucht Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.</p>
 
   <div class="card">
     <table>
@@ -157,6 +161,10 @@
             <td>reicht fuer das Logo, nicht fuer Text</td></tr>
         <tr><td>ink #231F20 auf Manner Rosa</td><td class="num">7.47:1</td><td class="ok">AAA</td>
             <td>so wird Rosa benutzt: Flaeche unter Dunklem</td></tr>
+        <tr><td>brand-700 auf Manner Rosa</td><td class="num">6.60:1</td><td class="ok">AA</td>
+            <td>Ueberschrift und Wortmarke im rosa Band</td></tr>
+        <tr><td>ink-muted auf Manner Rosa</td><td class="num">2.33:1</td><td class="bad">faellt durch</td>
+            <td>deshalb steht im rosa Band nichts Gedaempftes mehr</td></tr>
         <tr><td>Weiss auf Manner Blau</td><td class="num">9.47:1</td><td class="ok">AAA</td>
             <td>Knopf, Panel</td></tr>
         <tr><td>Manner Blau auf Weiss</td><td class="num">9.47:1</td><td class="ok">AAA</td>