Das Logo ohne Feld auf Rosa, und kein Schwarz mehr auf der Marke

Zwei Dinge, die beim Ansehen aufgefallen sind.

**Das Rechteck auf dem Panel.** Das Logo bringt sein rosa Feld selbst mit, und
auf der rosa Flaeche stand es als Rechteck in leicht anderem Ton darauf. Der
Ton war dabei derselbe — verschoben hat ihn die Lichtblende, die ueber der
Panelflaeche liegt und unter dem Logo endete.

Das Manual kennt fuer den Schriftzug zwei Faelle, und sie brauchen
verschiedene Dateien: auf Weiss gehoert er nach §4.1 in ein rechteckiges rosa
Feld, in einem grossflaechigen rosa Umfeld dagegen wird er nach §3.1 nur mit
Freiraum integriert — die Flaeche ist ja schon da. Es gibt deshalb jetzt
manner-logo-auf-rosa.svg ohne eigenes Feld, und die rosa Flaechen benutzen es.
Damit bleibt nichts mehr uebrig, wo die Blende enden koennte.

Die Blende selbst ist weg. Sie war Weiss auf Rosa und hellte die Markenfarbe
so weit auf, dass sie kaum noch die Markenfarbe war; geblieben ist ein feines
Raster und eine leichte Tiefe zur unteren Ecke, beides aus ink.

**Schwarz auf der Marke.** "Uebersicht", "Berichte" und der Rest der Kopfzeile
standen in ink. Das traegt zwar (7.47:1), sieht aber aus wie Text, der aus
Versehen auf der Marke gelandet ist. Alles Geschriebene auf Rosa steht jetzt
in brand-700: 6.60:1, und es ist dieselbe Paarung, aus der der Schriftzug
selbst besteht — blaue Lettern auf rosa Feld.

Dabei noch eine Schwaeche gefunden: das Abzeichen an der Glocke kam als
danger-solid auf dem rosa Band nur auf 2.78:1 und blieb unter den 3:1, die
WCAG 1.4.11 fuer ein bedeutungstragendes Element verlangt. Mit danger-text
sind es 3.26:1, und die Ziffer darin steht mit 7.12:1 besser als vorher.

**Und ausgemistet.** Die Logodatei wog 74 kB, weil die Vorlage aus Seite 3 des
Manuals gezogen wurde und die ganze Seite mitgenommen hat: 219 Elemente, die
den Fliesstext jener Seite zeichnen ("Der Manner Schriftzug ... darf nicht
veraendert werden"), unsichtbar rosa auf Rosa oder ausserhalb des Beschnitts.
Das eigentliche Logo sind vier Pfade. Beide Fassungen wiegen jetzt 18,7 kB.

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

@@ -122,47 +122,47 @@ function BrandPanel() {
     // 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. Das Raster ist
-          jetzt aus ink statt aus Weiss: auf Rosa verschwindet Weiss. */}
+      {/* Ein feines Raster und eine leichte Tiefe zur unteren Ecke — genug
+          Struktur, damit die Fläche nicht wie ein Farbfehler wirkt, aber ohne
+          Bilddatei und ohne von der einen Schaltfläche gegenüber abzulenken.
+          Beides aus ink: Weiss verschwindet auf Rosa, und die Lichtblende, die
+          hier vorher lag, hellte die Markenfarbe so weit auf, dass sie kaum
+          noch die Markenfarbe war. */}
       <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.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",
+            "radial-gradient(45rem 45rem at 100% 100%, rgb(35 31 32 / 0.08), transparent 60%)," +
+            "linear-gradient(rgb(35 31 32 / 0.04) 1px, transparent 1px)," +
+            "linear-gradient(90deg, rgb(35 31 32 / 0.04) 1px, transparent 1px)",
+          backgroundSize: "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. */}
+      {/* Alles Geschriebene hier steht in brand-700. Weiss faellt auf Manner
+          Rosa mit 2.18:1 aus, und ink traegt zwar (7.47:1), sieht aber aus wie
+          Text, der aus Versehen auf der Marke gelandet ist. Dunkelblau auf
+          Rosa (6.60:1) ist dieselbe Paarung, aus der der Schriftzug selbst
+          besteht. Die Abstufung macht Groesse und Gewicht, nicht Transparenz:
+          eine aufgehellte Schrift waere genau das, was hier durchfaellt. */}
       <div className="relative -ml-4">
-        <AppWortmarke hoehe={36} textKlasse="text-brand-700" />
+        <AppWortmarke hoehe={36} aufRosa textKlasse="text-brand-700" />
       </div>
 
       <div className="relative max-w-md">
         <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-ink">
+        <p className="mt-4 text-sm leading-relaxed text-brand-700">
           Stammdaten, Planstellen und Berichtslinien der Alpenwerk Industrie GmbH — jederzeit auch zu einem beliebigen
           Stichtag.
         </p>
       </div>
 
-      <p className="relative text-xs font-semibold text-ink">Interne Anwendung · Zugriff nur für die Personalabteilung</p>
+      <p className="relative text-xs font-semibold text-brand-700">Interne Anwendung · Zugriff nur für die Personalabteilung</p>
     </aside>
   );
 }

components/brand/Logo.tsx

@@ -17,21 +17,41 @@
 // Aufrufstellen — sonst haengt die Einhaltung daran, dass jede einzelne
 // daran denkt.
 //
-// ═══ Rosa ═══
+// ═══ Rosa — und warum es zwei Dateien gibt ═══
 //
-// §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die
-// Datei bringt ihr rosa Feld selbst mit, das Logo ist also auf jedem
-// Untergrund regelkonform — auch auf dem blauen Panel der Anmeldeseite.
+// §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Das
+// Manual kennt dafuer zwei Faelle, und sie brauchen verschiedene Dateien:
 //
-// Als <img> und nicht inline: die Datei wiegt 73 kB, weil die Kontur des
-// Schriftzugs aus 77 Pfaden besteht. Inline laege sie in jeder einzelnen
-// Seitenauslieferung; als Datei holt der Browser sie einmal und nimmt sie
-// danach aus dem Zwischenspeicher.
+//   • **Auf Weiss** (§4.1) gehoert das Logo „in ein rechteckiges rosa Feld".
+//     Das ist manner-logo.svg — der Schriftzug samt seiner rosa Flaeche.
+//
+//   • **In einem grossflaechigen rosa Umfeld** (§3.1) wird es „mit genuegend
+//     Freiraum rundum integriert" — die Flaeche ist dann schon da. Dafuer
+//     gibt es manner-logo-auf-rosa.svg, den Schriftzug ohne eigenes Feld.
+//
+// Die zweite Fassung ist nicht nur schoener, sie ist noetig: mit Feld stand
+// auf dem rosa Panel ein Rechteck in leicht anderem Ton. Der Ton war dabei
+// derselbe — was ihn verschob, war die Lichtblende, die ueber der Panelflaeche
+// liegt und unter dem Logo endet. Ohne eigenes Feld gibt es nichts mehr, wo
+// sie enden koennte.
+//
+// Als <img> und nicht inline: die Datei holt der Browser einmal und nimmt sie
+// danach aus dem Zwischenspeicher, statt in jeder Seitenauslieferung
+// mitzureisen.
 
-/** Seitenverhaeltnis der Datei: viewBox 288.6781 x 116.18912. */
+/** Seitenverhaeltnis beider Dateien: viewBox 288.6781 x 116.18912. */
 const VERHAELTNIS = 288.6781 / 116.18912;
 
-export function MannerLogo({ hoehe = 28, className = "" }: { hoehe?: number; className?: string }) {
+export function MannerLogo({
+  hoehe = 28,
+  aufRosa = false,
+  className = "",
+}: {
+  hoehe?: number;
+  /** Fuer rosa Untergruende: die Fassung ohne eigenes Feld. */
+  aufRosa?: boolean;
+  className?: string;
+}) {
   const breite = Math.round(hoehe * VERHAELTNIS);
   return (
     // next/image bringt Groessenvarianten und Ladelogik fuer Fotos mit; fuer
@@ -39,7 +59,7 @@ export function MannerLogo({ hoehe = 28, className = "" }: { hoehe?: number; cla
     // Bildoptimierung laesst SVG ohnehin unveraendert durch.
     // eslint-disable-next-line @next/next/no-img-element
     <img
-      src="/brand/manner-logo.svg"
+      src={aufRosa ? "/brand/manner-logo-auf-rosa.svg" : "/brand/manner-logo.svg"}
       alt="Manner"
       width={breite}
       height={hoehe}
@@ -59,16 +79,18 @@ export function MannerLogo({ hoehe = 28, className = "" }: { hoehe?: number; cla
  */
 export function AppWortmarke({
   hoehe = 26,
+  aufRosa = false,
   textKlasse = "text-ink",
   className = "",
 }: {
   hoehe?: number;
+  aufRosa?: boolean;
   textKlasse?: string;
   className?: string;
 }) {
   return (
     <span className={`flex items-center ${className}`}>
-      <MannerLogo hoehe={hoehe} />
+      <MannerLogo hoehe={hoehe} aufRosa={aufRosa} />
       <span className={`text-base font-extrabold tracking-tight ${textKlasse}`}>Alpenwerk HR</span>
     </span>
   );

components/shell/NotesBell.tsx

@@ -66,12 +66,17 @@ export function NotesBell({ notes, kollegen }: { notes: OpenNote[]; kollegen: Ko
 
   return (
     <div ref={containerRef} className="relative">
-      {/* 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">
+      {/* brand-700 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-brand-700 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">
+          // danger-text statt danger-solid: als Flaeche auf dem rosa Band kam
+          // das hellere Rot nur auf 2.78:1 und blieb damit unter den 3:1, die
+          // WCAG 1.4.11 fuer ein bedeutungstragendes Element verlangt. Der
+          // dunklere Ton derselben Familie erreicht 3.26:1, und die Ziffer
+          // darin steht mit 7.12:1 besser als vorher.
+          <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-text px-1 text-[10px] font-bold text-white">
             {notes.length}
           </span>
         )}

components/shell/Sidebar.tsx

@@ -64,12 +64,12 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
             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" />
+          <AppWortmarke hoehe={24} aufRosa textKlasse="text-brand-700" />
           <button
             type="button"
             onClick={onClose}
             aria-label="Navigation schließen"
-            className="-mr-1 rounded p-2 text-ink hover:bg-accent-100 lg:hidden"
+            className="-mr-1 rounded p-2 text-brand-700 hover:bg-accent-100 lg:hidden"
           >
             <X className="h-5 w-5" />
           </button>

components/shell/Topbar.tsx

@@ -41,30 +41,34 @@ export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProp
     // 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.
+    // Geschrieben wird darauf in brand-700 und nicht in ink: Schwarz auf Rosa
+    // traegt zwar (7.47:1), sieht aber aus wie Text, der aus Versehen auf der
+    // Marke gelandet ist. Dunkelblau auf Rosa ist dieselbe Paarung, aus der
+    // der Schriftzug selbst besteht, und kommt auf 6.60:1.
+    //
+    // Gedaempftes gibt es hier nicht mehr: ink-muted liegt auf Rosa bei
+    // 2.33:1. 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 hover:bg-accent-100 lg:hidden"
+          className="-ml-1 rounded p-2 text-brand-700 hover:bg-accent-100 lg:hidden"
         >
           <Menu className="h-5 w-5" />
         </button>
-        <h1 className="truncate text-base font-bold text-ink">{titleFor(pathname)}</h1>
+        <h1 className="truncate text-base font-bold text-brand-700">{titleFor(pathname)}</h1>
       </div>
       <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-ink/25 sm:pl-4">
+        <div className="flex items-center gap-2 text-sm sm:border-l sm:border-brand-700/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>
+          <span className="hidden font-semibold text-brand-700 md:inline">{userLabel}</span>
           <form action={logout}>
-            <button type="submit" aria-label="Abmelden" className="rounded p-2 text-ink hover:bg-accent-100">
+            <button type="submit" aria-label="Abmelden" className="rounded p-2 text-brand-700 hover:bg-accent-100">
               <LogOut className="h-4 w-4" />
             </button>
           </form>

docs/farbschema.html

@@ -101,7 +101,7 @@
 
   .freiraum { display: inline-block; outline: 1px dashed var(--accent-600); outline-offset: 0; }
   .logo-demo { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
-  .on-blue { background: var(--brand-700); padding: 22px; border-radius: 8px; }
+  .on-rosa { background: var(--accent-500); padding: 22px; border-radius: 8px; }
   .on-white { background: #fff; padding: 22px; border-radius: 8px; border: 1px solid var(--border); }
 </style>
 </head>
@@ -162,7 +162,7 @@
         <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>
+            <td><b>so steht Text im rosa Band</b> — dieselbe Paarung wie im Schriftzug</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>
@@ -291,7 +291,7 @@
       <h3>Navigation</h3>
       <div class="nav">
         <div class="hd">
-          <img src="../public/brand/manner-logo.svg" alt="Manner" width="60" height="24"
+          <img src="../public/brand/manner-logo-auf-rosa.svg" alt="Manner" width="60" height="24"
                style="padding:8px;box-sizing:content-box">
           <span style="font-weight:800;font-size:15px;color:var(--brand-700)">Alpenwerk HR</span>
         </div>
@@ -317,29 +317,40 @@
   </div>
 
   <!-- ══════════════════════════════════════════════════════════ -->
-  <h2>5 · Das Logo und sein Freiraum</h2>
-  <p>CD §4.1 verlangt „genuegend Freiraum rundum (X, X/3)". X ist hier als Hoehe des
-  Logos gelesen, der Freiraum also als ein Drittel davon — die gestrichelte Linie zeigt
-  ihn. Er steckt im Bauteil selbst, nicht in den Aufrufstellen.</p>
+  <h2>5 · Das Logo, sein Freiraum und die zwei Fassungen</h2>
+  <p>§1.2 laesst den Schriftzug nur zur Gaenze auf Rosa zu. Das Manual kennt dafuer zwei
+  Faelle, und sie brauchen verschiedene Dateien — deshalb liegen zwei im Projekt.</p>
   <div class="logo-demo">
     <div class="on-white">
       <span class="freiraum">
         <img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
              style="padding:20px;box-sizing:content-box;display:block">
       </span>
-      <div style="font-size:11px;color:var(--ink-muted);margin-top:8px">auf Weiss</div>
+      <div style="font-size:11px;color:var(--ink-muted);margin-top:8px">
+        <code>manner-logo.svg</code> — auf Weiss, mit eigenem rosa Feld (§4.1)</div>
     </div>
-    <div class="on-blue">
+    <div class="on-rosa">
       <span class="freiraum">
-        <img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
+        <img src="../public/brand/manner-logo-auf-rosa.svg" alt="Manner" width="150" height="60"
              style="padding:20px;box-sizing:content-box;display:block">
       </span>
-      <div style="font-size:11px;color:#ffffffaa;margin-top:8px">auf dem Panel der Anmeldeseite</div>
+      <div style="font-size:11px;color:var(--brand-700);margin-top:8px">
+        <code>manner-logo-auf-rosa.svg</code> — im rosa Umfeld, ohne Feld (§3.1)</div>
     </div>
   </div>
-  <p style="font-size:12px;color:var(--ink-muted)">
-    §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die Datei
-    bringt ihr rosa Feld mit, das Logo ist damit auf jedem Untergrund regelkonform.</p>
+  <p style="font-size:12px;color:var(--ink-body)">
+    Der Freiraum X/3 (gestrichelt) steckt im Bauteil selbst und nicht in den
+    Aufrufstellen — sonst haengt seine Einhaltung daran, dass jede einzelne daran denkt.
+    Die Fassung mit Feld auf eine rosa Flaeche zu setzen ging schief: das Feld stand als
+    Rechteck in leicht anderem Ton darauf. Der Ton war derselbe — verschoben hat ihn die
+    Lichtblende ueber der Flaeche, die unter dem Logo endete.</p>
+  <div class="note">
+    <b>Nebenbei ausgemistet.</b> Beide Dateien wogen 74 kB, weil die Vorlage aus Seite 3
+    des Manuals gezogen wurde und die ganze Seite mitgenommen hat: 219 Elemente, die den
+    Fliesstext jener Seite zeichnen („Der Manner Schriftzug … darf nicht veraendert
+    werden"), rosa auf Rosa oder ausserhalb des Beschnitts. Das eigentliche Logo sind
+    vier Pfade. Jetzt 18,7 kB.
+  </div>
 
   <!-- ══════════════════════════════════════════════════════════ -->
   <h2>6 · Was hier noch nicht entschieden ist</h2>