Rosa fuehrt, Blau bedient

Die Flaechenverteilung war verkehrt herum. Blau lag auf dem Groessten, was die
Anmeldeseite zu vergeben hat, und Rosa nur in Andeutungen daneben — bei einer
Marke, deren Schriftzug auf Rosa steht und deren Manual Rosa zuerst nennt.

Sichtbar wurde es am Logo. Es bringt sein rosa Feld selbst mit, weil §1.2 den
Schriftzug nur zur Gaenze auf Rosa zulaesst. Auf einer blauen Flaeche steht
dieses Feld als ausgeschnittenes Rechteck darauf. Auf Weiss ist es dagegen
richtig — §4.1 verlangt fuer weissen Untergrund genau das, ein rechteckiges
rosa Feld. Falsch war also nicht das Logo, sondern die blaue Flaeche darunter.

Rosa bekommen jetzt: das Panel der Anmeldeseite und das Band ueber der
Anwendung aus Kopfzeile und Logokopf der Seitenleiste. Beide zusammen sind ein
durchgehender Streifen, in dem das Logo aufgeht statt darauf zu liegen — was
§3.1 mit "in einem grossflaechigen rosa Umfeld eingebettet" meint.

Blau bleibt, was es ist: Knopf, Link, Fokusring, ausgewaehlter Eintrag. Das ist
dasselbe Verhaeltnis, aus dem der Schriftzug besteht — blaue Lettern auf rosa
Feld — und es ist das einzige, das traegt. Weiss auf Rosa sind 2.18:1.

Auf den rosa Flaechen steht deshalb nichts Weisses und nichts Gedaempftes mehr.
ink kommt auf 7.47:1, brand-700 auf 6.60:1; ink-muted lag bei 2.33:1 und ist
aus Kopfzeile, Glocke und Logokopf verschwunden. Gestuft wird ueber Groesse und
Gewicht statt ueber Transparenz — eine aufgehellte Schrift ist genau das, was
auf dieser Flaeche durchfaellt.

Das Raster auf dem Panel ist von Weiss auf ink gewechselt: auf Rosa war es
nicht mehr zu sehen.

Lint, Typen, Schemaabgleich, 552 Tests und der Build sind sauber. Im Browser
nicht gesehen.

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

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">
+    // Rosa und nicht Blau: Rosa ist die Farbe, in der die Marke auftritt, und
-      {/* Zwei weiche Lichtpunkte und ein feines Raster — genug Struktur, damit
+    // 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(60rem 40rem at 15% 0%, rgb(255 255 255 / 0.26), transparent 60%)," +
-            "radial-gradient(40rem 40rem at 100% 100%, rgb(255 255 255 / 0.10), transparent 55%)," +
+            "radial-gradient(40rem 40rem at 100% 100%, rgb(35 31 32 / 0.07), transparent 55%)," +
-            "linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px)," +
+            "linear-gradient(rgb(35 31 32 / 0.045) 1px, transparent 1px)," +
-            "linear-gradient(90deg, rgb(255 255 255 / 0.05) 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>
   );
 }

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">

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>

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>

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
+  <p><b>Rosa ist die fuehrende Farbe.</b> Es traegt die grossen Flaechen — das Panel der
-  Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.</p>
+  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>