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>

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>