Jede Seite traegt Zeichen und Farbe ihrer Kachel

Auf der Startseite hat jeder Bereich sein eigenes Zeichen und seinen
eigenen Farbton -- siebzehn unterscheidbare Bereiche statt siebzehn
Kaesten. Bisher endete das an der Kachel: Wer sie anklickte, landete auf
einer Seite, der man nicht mehr ansah, woher sie kam. Dreizehn Seiten,
alle in demselben Blau, alle ohne Zeichen, alle mit derselben duennen
Textzeile als Kopf.

Jetzt wird die Kachel weitergereicht. Der Kopf jeder Seite bekommt
dieselbe Behandlung wie die Kachel: Plakette mit dem Zeichen, der
Bereichsname mit leuchtendem Strich in der Kachelfarbe, ein groesserer
Titel und dasselbe Zeichen noch einmal riesig und fast unsichtbar als
Wasserzeichen dahinter. Aufgaben ist ueberall orange, Kalender ueberall
tuerkis, Personen ueberall rot-gold.

EINE QUELLE STATT ZWEIER LISTEN. Zeichen, Ton, Rolle und Ziel jedes
Bereichs standen nur in start.js. Sie einfach zu kopieren waere der
sichere Weg dazu, dass "Aufgaben" irgendwann auf der Startseite gelb und
auf der Aufgabenseite gruen ist. Beides liegt jetzt in
assets/js/bereiche.js und wird von start.js UND kopf.js benutzt -- wer
eine Kachel aendert, aendert damit automatisch auch den Kopf der Seite.
Sie koennen gar nicht auseinanderlaufen.

Eingesetzt wird die Plakette von kopf.js, nicht in dreizehn HTML-Dateien:
Das vorhandene Markup wird nur umschlossen, nicht ersetzt. Der Kalender
hat einen eigenen Kopf (dort ist der Zeitraum die Ueberschrift) und wird
ausdruecklich mitgenommen -- sonst waere ausgerechnet die aufwendigste
Seite die einzige ohne Zeichen.

Die Seitenpruefung sieht jetzt auf allen dreizehn Seiten nach, dass Ton
UND Zeichen UND Wasserzeichen da sind, und gibt beides aus (ton=9
zeichen=3/3). Eine Seite, die ihre Zuordnung verliert, faellt damit
sofort auf statt erst beim Hinsehen.

Kontrast danach an echten Bildpunkten nachgemessen: haelt auf allen
sechs geprueften Seiten (schlechtester Wert 4,80:1).

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/js/kopf.js

@@ -116,6 +116,70 @@
     return true;
   }
 
+  /* ---------- Jede Seite trägt Zeichen und Farbe ihrer Kachel -------------
+
+     Auf der Startseite hat jeder Bereich sein eigenes Zeichen und seinen
+     eigenen Farbton. Bisher endete das an der Kachel: Wer sie anklickte,
+     landete auf einer Seite, der man nicht mehr ansah, woher sie kam --
+     dreizehn Seiten, alle in demselben Blau, alle ohne Zeichen.
+
+     Jetzt wird die Kachel weitergereicht. Der Kopf der Seite bekommt
+     dasselbe Zeichen groß daneben, denselben Farbton für Strich, Zeichen
+     und Titel, und dasselbe Zeichen noch einmal riesig und fast
+     unsichtbar als Wasserzeichen -- genau die Behandlung, die auf der
+     Startseite aus siebzehn Kästen siebzehn unterscheidbare Bereiche
+     gemacht hat.
+
+     Die Zuordnung kommt aus assets/js/bereiche.js, also aus derselben
+     Liste wie die Kachel selbst. Wer dort eine Farbe ändert, ändert
+     Kachel UND Seite -- sie können gar nicht auseinanderlaufen. */
+  (function seiteEinfaerben() {
+    const B = window.Bereiche;
+    /* Der Kalender hat einen eigenen Kopf (.k-kopf), weil dort der
+       Zeitraum die Überschrift ist. Er soll sein Zeichen trotzdem
+       bekommen -- sonst wäre ausgerechnet die aufwendigste Seite die
+       einzige ohne. */
+    const kopf = document.querySelector('.kopf-zeile, .k-kopf');
+    if (!B || !kopf) return;
+
+    const bereich = B.zuSeite(location.pathname, location.search);
+    if (!bereich) return;
+
+    /* Der Ton hängt am body: Damit erreicht er auch Bauteile, die weit
+       unten auf der Seite stehen (Karten, Knöpfe, Zähler) -- nicht nur
+       den Kopf. Die 17 Töne selbst stehen in start.css und hängen nur am
+       Merkmal data-ton, nicht an einer Klasse. */
+    document.body.dataset.ton = String(bereich.ton);
+
+    /* Der Kopf ist bisher ein <div> mit Text. Er bekommt links eine
+       Plakette mit dem Zeichen -- eingefügt VOR dem vorhandenen Text,
+       ohne ihn anzufassen. Dadurch funktioniert das auf allen dreizehn
+       Seiten, ohne dreizehn HTML-Dateien zu ändern. */
+    const erstes = kopf.firstElementChild;
+    if (!erstes) return;
+
+    const plakette = document.createElement('span');
+    plakette.className = 'kopf-zeichen';
+    plakette.setAttribute('aria-hidden', 'true');
+    plakette.append(B.zeichenBauen(bereich.zeichen, 'kopf-zeichen__svg'));
+
+    const reihe = document.createElement('div');
+    reihe.className = 'kopf-zeile__marke';
+    reihe.append(plakette);
+    kopf.insertBefore(reihe, erstes);
+    reihe.append(erstes);
+
+    /* Das Wasserzeichen: dasselbe Zeichen riesig und bei sehr geringer
+       Deckkraft hinter dem Kopf. Es liegt im Kopf selbst, nicht auf der
+       Seite -- sonst würde es beim Blättern mitwandern und stören. */
+    const schatten = document.createElement('span');
+    schatten.className = 'kopf-wasserzeichen';
+    schatten.setAttribute('aria-hidden', 'true');
+    schatten.append(B.zeichenBauen(bereich.zeichen, 'kopf-wasserzeichen__svg'));
+    kopf.append(schatten);
+    kopf.dataset.gezeichnet = 'ja';
+  })();
+
   /* ---------- Der Schriftzug oben links -----------------------------------
 
      Er stand als eine Zeile in einer Farbe da: "DOGFATHER UNIVERSE ·