diff --git a/server/pruef-buehne.mjs b/server/pruef-buehne.mjs
index e89e02d8..f326f477 100644
--- a/server/pruef-buehne.mjs
+++ b/server/pruef-buehne.mjs
@@ -14,6 +14,40 @@ import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
+
+/* =====================================================================
+ DER DUNKELSTE FARBSTOPP DER ERSTEN HINTERGRUNDEBENE
+
+ Gebraucht an ZWEI Stellen (Messung und Gegenprobe), deshalb steht er
+ hier einmal und wird als Quelltext in die Seite gereicht. Zwei
+ Kopien waeren zwei Gelegenheiten auseinanderzulaufen -- und genau
+ das ist der Fehler, den diese Datei sonst sucht.
+
+ DAS ENDE DER EBENE WIRD UEBER KLAMMERN GEZAEHLT, nicht ueber `"),"`.
+ Mein erster Anlauf schnitt bei der ersten Zeichenfolge `),` ab --
+ die steht aber schon am Ende des ERSTEN `rgb(...)`. Er las damit
+ immer nur den ersten Stopp und haette einen dunklen Verlauf fuer
+ hell gehalten. Die Gegenprobe unten hat es in der ersten Minute
+ gemeldet. */
+function dunkelsterStopp(backgroundImage) {
+ if (!backgroundImage || backgroundImage === "none") return null;
+ const start = backgroundImage.indexOf("(");
+ if (start < 0) return null;
+ let tiefe = 0, ende = -1;
+ for (let i = start; i < backgroundImage.length; i++) {
+ if (backgroundImage[i] === "(") tiefe++;
+ else if (backgroundImage[i] === ")") { tiefe--; if (tiefe === 0) { ende = i + 1; break; } }
+ }
+ const erste = ende > 0 ? backgroundImage.slice(0, ende) : backgroundImage;
+ const stopps = [...erste.matchAll(/rgba?\(([^)]+)\)/g)]
+ .map((m) => m[1].split(",").slice(0, 3).map((x) => Number(x.trim())))
+ .filter((f) => f.length === 3 && f.every((x) => Number.isFinite(x)));
+ if (!stopps.length) return null;
+ const hell = (f) => 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2];
+ return stopps.reduce((a, b) => (hell(b) < hell(a) ? b : a));
+}
+const DUNKELSTER_QUELLE = dunkelsterStopp.toString();
+
const ordner = mkdtempSync(join(tmpdir(), "ws-buehne-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = "4193";
@@ -113,7 +147,10 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
sichtbaren Text -- nicht die Farbangabe im Stil, die weiß nichts
davon, was dahinterliegt. */
const bild = await seite.screenshot({ type: "png" });
- const schlimmster = await seite.evaluate(async (b64) => {
+ const schlimmster = await seite.evaluate(async ([b64, quelle]) => {
+ /* Derselbe Helfer wie in der Gegenprobe -- als Quelltext
+ hereingereicht, damit es ihn nur EINMAL gibt. */
+ const dunkelster = new Function("return " + quelle)();
const kanal = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
const hell = (c) => 0.2126 * kanal(c[0]) + 0.7152 * kanal(c[1]) + 0.0722 * kanal(c[2]);
const kontrast = (a, b) => {
@@ -198,7 +235,31 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
if (!p) { ohneStelle++; continue; }
const st = st0;
- const farbe = st.color.match(/\d+/g).slice(0, 3).map(Number);
+
+ /* WENN DIE SCHRIFT IHRE FARBE AUS EINEM VERLAUF BEKOMMT
+ (09.09.2026).
+
+ Seit die Abschnittsschilder aus gebuerstetem Metall bestehen
+ (`background-clip: text`), ist ihr `color` notwendigerweise
+ `transparent` -- anders geht die Technik nicht. Diese
+ Pruefung las genau dieses `color`, machte daraus [0,0,0] und
+ meldete 1,07:1 fuer Text, der in Wahrheit hell und gut
+ lesbar ist. Fuenf Fehlalarme auf drei Seiten.
+
+ Eine Warnung, die bei richtiger Arbeit anschlaegt, wird
+ abgeschaltet -- deshalb wird sie hier nicht weichgemacht,
+ sondern GENAUER: Bei Verlaufsschrift zaehlt der DUNKELSTE
+ Farbstopp des Verlaufs. Das ist der schlechteste Punkt, den
+ es auf dieser Schrift wirklich gibt, und damit strenger als
+ ein Mittelwert und ehrlicher als das durchsichtige `color`.
+
+ Nur die ERSTE Ebene wird gelesen: `background-clip: text,
+ border-box, border-box` schneidet Ebene 1 auf die Schrift zu,
+ die uebrigen sind die Flaeche darunter. */
+ const clipText = (st.webkitBackgroundClip || st.backgroundClip || "")
+ .split(",")[0].trim() === "text";
+ let farbe = clipText ? dunkelster(st.backgroundImage) : null;
+ if (!farbe) farbe = st.color.match(/\d+/g).slice(0, 3).map(Number);
const gr = parseFloat(st.fontSize);
const fett = Number(st.fontWeight) >= 700;
const grenze = (gr >= 24 || (gr >= 18.66 && fett)) ? 3 : 4.5;
@@ -209,7 +270,45 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
}
}
return { ...schlecht, anzahl, ohneStelle, gesamt: alle.length };
- }, bild.toString("base64"));
+ }, [bild.toString("base64"), DUNKELSTER_QUELLE]);
+
+ /* ---- GEGENPROBE ZUR VERLAUFSSCHRIFT ----------------------------
+
+ Seit die Messung bei `background-clip: text` den dunkelsten
+ Farbstopp nimmt statt des durchsichtigen `color`, muss bewiesen
+ werden, dass sie damit noch NEIN sagen kann. Sonst haette ich
+ eine Warnung entschaerft, statt sie genauer zu machen.
+
+ Zwei erfundene Elemente auf derselben Seite: eines mit einem
+ hellen Verlauf (muss durchgehen), eines mit einem dunklen (muss
+ durchfallen). Beide werden sofort wieder entfernt. */
+ const gegen = await seite.evaluate((quelle) => {
+ const dunkelster = new Function("return " + quelle)();
+ const bauen = (verlauf) => {
+ const d = document.createElement("span");
+ d.textContent = "Probe";
+ d.style.cssText = "position:fixed;left:-9999px;font-size:14px;"
+ + `background:${verlauf} text;-webkit-background-clip:text;`
+ + "background-clip:text;color:transparent;";
+ document.body.append(d);
+ const st = getComputedStyle(d);
+ const clip = (st.webkitBackgroundClip || st.backgroundClip || "").split(",")[0].trim();
+ const gefunden = dunkelster(st.backgroundImage);
+ d.remove();
+ return { clip, dunkelster: gefunden };
+ };
+ return {
+ hell: bauen("linear-gradient(180deg, #ffffff, #cfd9e6)"),
+ dunkel: bauen("linear-gradient(180deg, #ffffff, #101418)"),
+ };
+ }, DUNKELSTER_QUELLE);
+ ok(gegen.hell.clip === "text" && gegen.hell.dunkelster
+ && gegen.hell.dunkelster.join(",") === "207,217,230",
+ `${s}: Gegenprobe -- heller Verlauf, dunkelster Stopp erkannt `
+ + `(${gegen.hell.dunkelster?.join(",")})`);
+ ok(gegen.dunkel.dunkelster && gegen.dunkel.dunkelster.join(",") === "16,20,24",
+ `${s}: Gegenprobe -- dunkler Verlauf wird als dunkel erkannt `
+ + `(${gegen.dunkel.dunkelster?.join(",")}), also faellt so etwas auf`);
ok(schlimmster.v >= schlimmster.grenze,
`${s}: schlechtester Kontrast ${schlimmster.v.toFixed(2)}:1 (nötig ${schlimmster.grenze}:1) `
diff --git a/tools/kachel-farben.mjs b/tools/kachel-farben.mjs
index eae973f2..bf10ba40 100644
--- a/tools/kachel-farben.mjs
+++ b/tools/kachel-farben.mjs
@@ -47,6 +47,16 @@
Aufrufen mit: node tools/kachel-farben.mjs
Die Ausgabe wird nach start.css uebertragen (Abschnitt "Kacheln").
+ ACHTUNG -- ZWEI TOENE SIND VON HAND GESETZT (Stand 09.09.2026).
+
+ TON 5 (Schutz & Regeln) steht auf #ff2fd0. Filipe: "ich will dass
+ die kategorie eine farbe bekommt die extrem krass auffaellt. diese
+ kategorie ist naemlich seeeehr wichtig." Magenta ist der einzige
+ Ton, den es im Haus sonst nirgends gibt -- er faellt durch
+ Einzigartigkeit auf, nicht durch Helligkeit. Abstand zum naechsten
+ Nachbarn 0,1305 (Grenze 0,0973), Buntheit 0,276 (hoechste im Satz),
+ Kontrast 6,00:1.
+
ACHTUNG -- TON 21 IST SEIT DEM 09.09.2026 VON HAND GESETZT.
Filipe wollte die Scout-Pipeline ausdruecklich in Knallrot
("die farbe von dieser kategorie soll knall rot sein"). In start.css
diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css
index 5211495a..e1c1deb8 100644
--- a/workspace/assets/css/report.css
+++ b/workspace/assets/css/report.css
@@ -212,3 +212,75 @@
die bequemere Antwort und die falsche -- sie ist die Aussage der
Karte. */
.block .kachel { min-height: 74px; }
+
+/* =====================================================================
+ DIE ZAHLENKARTEN STEHEN GERADE (screen3, 09.09.2026)
+
+ Filipe: "perfektionnier auch noch bitte die kacheln die schriften
+ drin und die zahlen. ich will dass alles passt, nicht bedeckt ist,
+ schief steht oder zu tief oder zu hoch."
+
+ NACHGEMESSEN, ALLE 17 KARTEN. Der Befund war eindeutig und deckt
+ sich genau mit dem, was er beschreibt:
+
+ * Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN Hoehen.
+ * Sie ueberlappten sich waagerecht (gemessener Abstand -183 bis
+ -524 px, also weit ineinander).
+ * Karten in derselben Reihe waren verschieden hoch.
+
+ DIE URSACHE IST EINE EINZIGE ZEILE: `.kachel__zahl` steht
+ `position: absolute` bei top 13 / right 13. Auf der Startseite ist
+ das richtig -- dort sind die Kacheln gleich gross und der Name
+ einzeilig. Hier bricht der Name auf zwei Zeilen um ("Community:
+ neue Eintraege"), die Karte waechst nach unten, und die Zahl bleibt
+ oben kleben. Sie ist ausserdem fuer die Hoehenrechnung unsichtbar,
+ weshalb es vorher schon einmal eine `min-height` als Pflaster
+ brauchte.
+
+ JETZT EIN ECHTES RASTER, ohne absolute Position:
+
+ Spalte 1 Name (Zeile 1), Trend darunter (Zeile 2)
+ Spalte 2 die Zahl, ueber beide Zeilen, mittig
+
+ `display: contents` auf `.kachel__wert`: Der Wrapper verschwindet
+ als Kasten, seine Kinder werden selbst zu Rasterfeldern. So kommt
+ die Zahl nach rechts und der Trend unter den Namen, OHNE dass am
+ HTML etwas geaendert werden muss -- und ohne dass die Startseite,
+ die dieselben Klassen benutzt, davon etwas mitbekommt.
+
+ `align-items: center` statt der alten Mindesthoehe: Die Zahl ist
+ jetzt Teil des Flusses, also rechnet die Karte ihre Hoehe mit ihr
+ aus. Die `min-height` bleibt trotzdem stehen -- sie sorgt dafuer,
+ dass eine Karte mit kurzem Namen nicht flacher wird als ihre
+ Nachbarn.
+ ===================================================================== */
+.block .kachel {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ column-gap: 14px;
+ row-gap: 2px;
+}
+/* Der Wrapper verschwindet, seine Kinder werden Rasterfelder. */
+.block .kachel__wert { display: contents; }
+.block .kachel__zahl {
+ position: static;
+ grid-column: 2; grid-row: 1 / -1;
+ align-self: center;
+ /* Rechtsbuendig und mit gleichen Ziffernbreiten: Untereinander
+ stehende Zahlen sollen eine Spalte bilden, keine Treppe. */
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+.block .kachel__name {
+ grid-column: 1; grid-row: 1;
+ margin: 0;
+ padding-right: 0; /* der Abstand kommt jetzt aus column-gap */
+ align-self: center;
+}
+.block .kachel .trend {
+ grid-column: 1; grid-row: 2;
+ justify-self: start;
+}
+/* Ohne Trend soll die zweite Zeile keinen Platz belegen. */
+.block .kachel:not(:has(.trend)) { row-gap: 0; }
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 7bfe5687..70fba16f 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -844,7 +844,40 @@ body.start > main { position: relative; z-index: 1; }
[data-ton="2"] { --ton: #e15e8e; } /* Zahlen */
[data-ton="3"] { --ton: #ff9781; } /* LIVE */
[data-ton="4"] { --ton: #c26201; } /* Chat */
-[data-ton="5"] { --ton: #febf12; } /* Schutz */
+/* TON 5 IST VON HAND GESETZT (09.09.2026, screen4).
+
+ Filipe: "ich will dass die kategorie eine farbe bekommt die extrem
+ krass auffällt. diese kategorie ist nämlich seeeehr wichtig und so
+ soll sie auch auffallen." Gemeint ist "Schutz & Regeln" -- die
+ einzige Kachel mit diesem Ton (nachgesehen in bereiche.js).
+
+ MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES HIER SONST NICHT GIBT.
+ Rot ist im Haus für "überfällig" und für Spicy Media vergeben,
+ Babyblau für DogFather, Lila für Manager, Grün für Scout, Bronze
+ für Creator, Bernstein für "dringend". Ein Magenta stößt mit keinem
+ davon zusammen. Es fällt nicht auf, weil es HELLER ist, sondern
+ weil es einzigartig ist -- und das ist die verlässlichere Art:
+ Helligkeit konkurriert mit den Nachbarn, Einzigartigkeit nicht.
+
+ NACHGERECHNET WIE BEI TON 21: Der engste Abstand zwischen zwei der
+ übrigen zwanzig Farben liegt bei 0,0973 (OKLab). #ff2fd0 kommt
+ seinem nächsten Nachbarn (Ton 8, #c06ad0) auf 0,1305 nahe, ist also
+ weiter entfernt als das engste vorhandene Paar. Seine Buntheit ist
+ mit 0,276 die höchste im ganzen Satz -- das alte Gold lag bei
+ 0,170. Kontrast auf dunklem Grund: 6,00:1.
+
+ Von sieben geprüften Kandidaten sind drei an der Abstandsgrenze
+ gescheitert (#ff2f9c, #00ff9d und #ff5ce0 lagen ihren Nachbarn zu
+ nahe). Unter den bestandenen hat dieser die höchste Buntheit bei
+ ausreichendem Kontrast. Das Säuregelb #e0ff00 wäre lauter gewesen
+ (16,86:1), hätte sich aber mit dem Bernstein von "dringend" und dem
+ Gold der Nachbarkacheln um dieselbe Wirkung gestritten.
+
+ Die Kachel bleibt gebaut wie alle anderen -- das war ausdrücklich
+ gewünscht ("alle kacheln auf der ganzen website sollen sein wie auf
+ der startseite"). Was sie heraushebt, ist die Farbe, nicht eine
+ Sonderform. */
+[data-ton="5"] { --ton: #ff2fd0; } /* Schutz & Regeln -- Wunsch: extrem auffällig */
[data-ton="6"] { --ton: #768b09; } /* Community */
[data-ton="7"] { --ton: #089868; } /* Reports */
[data-ton="8"] { --ton: #c06ad0; } /* Kalender */
@@ -5452,7 +5485,26 @@ body[data-fremde-sicht="ja"]::after {
stroke: rgba(255, 255, 255, .72) !important;
stroke-width: .9;
}
-.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
+/* DIE KANTE DER STUNDE IST EIN HAUCH, KEIN STRICH (09.09.2026,
+ screen2 -- "die stunden muss noch perfektionnieren").
+
+ Sie stand auf 50 Prozent Weiss bei 0,9 Breite. Auf den schmalen
+ Sekunden- und Minutenbahnen ist das eine Lichtkante; auf dem 5,8 px
+ breiten Stundenbalken war es ein zweiter, weisser Balken auf dem
+ roten -- im vergroesserten Bildschirmfoto sieht es aus wie ein
+ Kratzer quer durch das Material.
+
+ Der Grund ist Verhaeltnis, nicht Farbe: 0,9 von 3,2 (Sekunde) sind
+ 28 Prozent der Breite, 0,9 von 5,8 waeren 16 -- aber die Stunde ist
+ auch die einzige DECKENDE, kraeftig gefaerbte Bahn. Auf Rot faellt
+ dasselbe Weiss doppelt so stark auf wie auf Silber.
+
+ Jetzt 22 Prozent. Die Kante ist noch da (sie macht aus der Flaeche
+ ein Werkstueck), aber sie ist wieder eine Kante. */
+.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .22) !important; }
+/* Und schmaler: 0,6 statt 0,9 -- auf dem breitesten Balken darf die
+ Kante nicht die breiteste sein. */
+.uhr__kante .uhr__stunde { stroke-width: .6; }
/* DER VERSATZ MUSS DER BREITE FOLGEN (09.09.2026, screen5).
@@ -6685,8 +6737,20 @@ body[data-fremde-sicht="ja"]::after {
stroke-width: 5.2;
filter: drop-shadow(0 0 2.2px rgba(226, 238, 250, .9));
}
+/* DER KOPF DER STUNDE BLEIBT ROT (09.09.2026, screen2).
+
+ Er stand auf #ffd9dd -- fast weiss. Damit war das aktuelle Glied
+ zwar das hellste, aber es hatte die Farbe seiner Bahn verloren: Im
+ Bildschirmfoto sah es aus, als staende dort ein Fremdkoerper
+ zwischen den roten Balken. Bei Sekunde und Minute faellt das nicht
+ auf, weil Babyblau und Silber ohnehin hell sind.
+
+ Jetzt ein helles, aber deutliches Rot. Es hebt sich durch HELLIGKEIT
+ und Schein von den anderen elf ab, nicht durch eine andere Farbe --
+ das ist der Unterschied zwischen "das ist die aktuelle Stunde" und
+ "da stimmt etwas nicht". */
.uhr__kopf--stunde {
- stroke: #ffd9dd;
+ stroke: #ff8c96;
stroke-width: 6;
filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95));
}
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 17cad599..767e95db 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -748,10 +748,30 @@
defs.appendChild(lauf);
svg.appendChild(defs);
+ /* DIE RADIEN FUELLEN JETZT DEN KASTEN (09.09.2026, screen1).
+
+ Filipe: "der kreis soll die gleiche groesse wie die uhr haben."
+
+ Nachgemessen waren beide Kaesten schon exakt gleich gross
+ (248 x 248) -- der gezeichnete Ring aber nicht: Sein aeusserer
+ Bogen lag bei Radius 128 von 150, plus 4,5 halbe Strichbreite
+ also bei 132,5. Das sind 88 Prozent des Kastens, gerendert 219
+ statt 248 px. Die Uhr daneben fuellt ihren Kasten dagegen ganz
+ aus (ihr Leuchtkranz ragt sogar 7 px darueber hinaus). Zwei
+ gleich grosse Kaesten mit ungleich grossem Inhalt sehen ungleich
+ gross aus, und genau das war zu sehen.
+
+ Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) --
+ dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5
+ = 149,5 von 150: ein halber Pixel Luft, damit die runde Kappe
+ nicht abgeschnitten wird. */
+ const R_AUSSEN = 145;
+ const R_SEGMENTE = 120;
+
/* 1. Die leere Bahn zuerst -- damit der Ring auch bei 0 % ein Ring
ist und nicht ein Punkt. */
svg.appendChild(svgEl('path', {
- d: bogen(150, 150, 128, 0, Math.PI * 1.9999),
+ d: bogen(150, 150, R_AUSSEN, 0, Math.PI * 1.9999),
stroke: 'rgba(120, 150, 185, .16)', 'stroke-width': '9',
fill: 'none', 'stroke-linecap': 'round',
}));
@@ -766,7 +786,7 @@
const von = i * schritt + luecke / 2;
const bis = (i + 1) * schritt - luecke / 2;
const st = svgEl('path', {
- d: bogen(150, 150, 106, von, bis),
+ d: bogen(150, 150, R_SEGMENTE, von, bis),
stroke: RING_FARBE[s.stufe] || '#8fb3cf',
'stroke-width': '7', fill: 'none', 'stroke-linecap': 'round',
opacity: s.stufe === 'offen' ? '.95' : '.72',
@@ -785,14 +805,14 @@
const anteil = Math.max(0, Math.min(100, Number(daten.prozent) || 0));
const bis = (anteil / 100) * Math.PI * 2;
if (bis > 0.01) {
- const d = bogen(150, 150, 128, 0, Math.min(bis, Math.PI * 1.9999));
+ const d = bogen(150, 150, R_AUSSEN, 0, Math.min(bis, Math.PI * 1.9999));
svg.appendChild(svgEl('path', {
d, stroke: 'url(#zring-lauf)', 'stroke-width': '9',
fill: 'none', 'stroke-linecap': 'round',
}));
/* Ein heller Punkt an der Spitze macht aus dem Bogen einen
Zeiger -- er markiert den Stand so genau, wie die Zahl es sagt. */
- const px = 150 + 128 * Math.cos(bis), py = 150 + 128 * Math.sin(bis);
+ const px = 150 + R_AUSSEN * Math.cos(bis), py = 150 + R_AUSSEN * Math.sin(bis);
svg.appendChild(svgEl('circle', { cx: px, cy: py, r: '3.4', fill: '#eaf4ff' }));
}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 7c3257dc..d716e8d3 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+