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]>
This commit is contained in:
2026-09-01 10:22:22 +02:00
co-authored by Claude Opus 5
parent c01aeb4225
commit c46fb413ab
24 changed files with 495 additions and 243 deletions
+12 -1
View File
@@ -17,10 +17,21 @@
Man liest zuerst, WO man ist, und bewegt sich dann. Deshalb steht der
Monat groß und die Navigation daneben, nicht umgekehrt. */
.k-kopf {
position: relative; overflow: hidden;
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
margin-bottom: 22px;
margin-bottom: 22px; padding-bottom: 18px;
/* Dieselbe auslaufende Trennlinie wie auf allen anderen Seiten -- der
Kalender hat zwar einen eigenen Kopf, gehört aber zur selben
Familie. Die Farbe kommt aus data-ton am body (kopf.js). */
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;
}
/* Zeichen und Zeitraum nebeneinander (die Plakette setzt kopf.js). */
.k-kopf .kopf-zeile__marke { align-items: center; }
.k-kopf .k-kopf__titel { min-width: 0; }
.k-zeitraum {
margin: 0;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);