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>

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>