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/css/start.css

@@ -230,11 +230,111 @@ body.start > main { position: relative; z-index: 1; }
 .zurueck { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
 .zurueck:hover { border-bottom-color: currentColor; }
 
+/* ---------- Der Kopf jeder Unterseite ------------------------------------
+
+   Bis zum 01.09.2026 war das eine Zeile Text mit einem Knopf daneben --
+   auf allen dreizehn Seiten dieselbe, in derselben Farbe, ohne Zeichen.
+   Wer eine Kachel anklickte, verlor beim Übergang jede Spur davon,
+   woher er kam.
+
+   Jetzt trägt der Kopf Zeichen UND Farbton seiner Kachel (gesetzt von
+   kopf.js aus derselben Liste, aus der auch die Kachel kommt) und
+   bekommt dieselbe Behandlung wie sie: Plakette mit dem Zeichen, ein
+   leuchtender Strich über der Bereichsangabe, ein sehr schwaches
+   Wasserzeichen dahinter und eine auslaufende Trennlinie darunter.
+
+   Nichts davon ist Schmuck um seiner selbst willen: Es ist dieselbe
+   Bildsprache wie auf der Startseite, und dadurch weiß man ohne Lesen,
+   wo man ist. */
 .kopf-zeile {
+  position: relative;
+  overflow: hidden;
   display: flex; align-items: flex-end; justify-content: space-between;
-  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
+  gap: 20px; flex-wrap: wrap;
+  margin-bottom: 28px; padding: 0 0 20px;
+  border-bottom: 1px solid transparent;
+  border-image: linear-gradient(90deg,
+    color-mix(in srgb, var(--ton, var(--akzent)) 40%, var(--rand-hell)),
+    transparent 62%) 1;
+}
+.kopf-zeile .titel {
+  margin: 0;
+  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
+  letter-spacing: -.02em;
+  color: #f2f7fd;
+  text-shadow: 0 2px 22px color-mix(in srgb, var(--ton, var(--akzent)) 22%, transparent);
+}
+.kopf-zeile .unterzeile { margin-bottom: 0; }
+
+/* Zeichen und Text nebeneinander. Der Block darf schrumpfen (min-width),
+   sonst drückt er den Knopf rechts aus dem Bild -- derselbe Fehler wie
+   im August in der Kopfleiste. */
+.kopf-zeile__marke {
+  display: flex; align-items: center; gap: 16px;
+  min-width: 0; flex: 1 1 auto;
+  position: relative; z-index: 1;
+}
+.kopf-zeichen {
+  flex: none;
+  display: grid; place-items: center;
+  width: 52px; height: 52px; border-radius: 15px;
+  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 34%, transparent);
+  background:
+    radial-gradient(120% 120% at 30% 18%,
+      color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent), transparent 72%),
+    rgba(255, 255, 255, .04);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .09),
+    0 12px 28px -14px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
+}
+.kopf-zeichen__svg {
+  width: 26px; height: 26px;
+  fill: none; stroke: var(--ton, var(--akzent)); stroke-width: 1.6;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+
+/* Der Bereichsname über dem Titel bekommt denselben leuchtenden Strich
+   wie die Abschnitte auf der Startseite -- so gehört sichtbar zusammen,
+   was zusammengehört. */
+.kopf-zeile .marke {
+  display: flex; align-items: center; gap: 9px;
+  margin-bottom: 7px;
+  color: color-mix(in srgb, var(--ton, var(--akzent)) 62%, #cfe0f0);
+}
+.kopf-zeile .marke::before {
+  content: "";
+  width: 22px; height: 2px; border-radius: 2px;
+  background: linear-gradient(90deg, var(--ton, var(--akzent)), transparent);
+}
+
+/* Dasselbe Zeichen noch einmal, riesig und fast unsichtbar. Es liegt im
+   Kopf (overflow: hidden schneidet es sauber ab) und macht jede Seite
+   auf den ersten Blick unverwechselbar, ohne dass man es bewusst
+   wahrnimmt. */
+.kopf-wasserzeichen {
+  position: absolute; right: -18px; top: 50%;
+  transform: translateY(-50%) rotate(-8deg);
+  pointer-events: none;
+  opacity: .06;
+  z-index: 0;
+}
+.kopf-wasserzeichen__svg {
+  width: 190px; height: 190px;
+  fill: none; stroke: var(--ton, var(--akzent)); stroke-width: 1;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+/* Auf schmalen Bildschirmen läge das Wasserzeichen unter dem Text und
+   würde ihn unruhig machen -- dort bleibt es weg. */
+@media (max-width: 720px) {
+  .kopf-wasserzeichen { display: none; }
+  .kopf-zeichen { width: 42px; height: 42px; border-radius: 12px; }
+  .kopf-zeichen__svg { width: 21px; height: 21px; }
+  .kopf-zeile__marke { gap: 12px; }
+}
+@media (forced-colors: active) {
+  .kopf-wasserzeichen { display: none; }
+  .kopf-zeichen__svg { stroke: CanvasText; }
 }
-.kopf-zeile .titel { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
 
 .leise { color: var(--text-still); font-weight: 400; }