Ring so gross wie die Uhr, Stunden geschaerft, Report-Karten gerade, Schutz wird Magenta

--- screen1: Glocke nach rechts, Ring so gross wie die Uhr ---

"dieser button links vom kreis soll rechts davon sein und der kreis
soll die gleiche groesse wie die uhr haben."

Die KAESTEN waren schon exakt gleich gross (248 x 248, seit gestern aus
einer Variablen). Der gezeichnete Ring aber nicht: Sein aeusserer Bogen
lag bei Radius 128 von 150, plus halbe Strichbreite also bei 132,5 --
88 Prozent des Kastens, gerendert 219 statt 248 px. Die Uhr daneben
fuellt ihren Kasten ganz aus, ihr Leuchtkranz ragt sogar 7 px darueber
hinaus. Zwei gleich grosse Kaesten mit ungleich grossem Inhalt sehen
ungleich gross aus.

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.

Die Glocke steht jetzt rechts vom Ring. Damit liegen beide Knoepfe
INNEN, zwischen den Instrumenten und dem Text -- vorher sassen sie an
den beiden Aussenkanten, so weit voneinander entfernt wie moeglich,
obwohl sie dasselbe tun: einstellen, was einen erreicht.

--- screen2: die Stunden ---

"die stunden muss noch perfektionnieren."

DIE LICHTKANTE WAR EIN KRATZER. Sie stand auf 50 Prozent Weiss bei 0,9
Breite. Auf den schmalen Sekunden- und Minutenbahnen ist das eine
Kante; auf dem 5,8 px breiten Stundenbalken war es ein zweiter,
weisser Balken auf dem roten. Der Grund ist Verhaeltnis UND Farbe:
0,9 von 3,2 sind 28 Prozent, 0,9 von 5,8 nur 16 -- aber die Stunde ist
die einzige deckende, kraeftig gefaerbte Bahn, und auf Rot faellt
dasselbe Weiss doppelt so stark auf wie auf Silber. Jetzt 22 Prozent
bei 0,6 Breite.

DER KOPF BLEIBT ROT. Er stand auf #ffd9dd, also fast weiss -- das
aktuelle Glied war zwar das hellste, hatte aber die Farbe seiner Bahn
verloren und sah aus wie ein Fremdkoerper zwischen den roten Balken.
Jetzt ein helles, deutliches Rot: Es hebt sich durch Helligkeit ab,
nicht durch eine andere Farbe.

--- screen3: die Report-Karten stehen gerade ---

"ich will dass alles passt, nicht bedeckt ist, schief steht oder zu
tief oder zu hoch."

NACHGEMESSEN, ALLE 17 KARTEN -- der Befund 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), und Karten in derselben Reihe waren verschieden hoch.

DIE URSACHE IST EINE ZEILE: `.kachel__zahl` steht `position: absolute`
bei top 13 / right 13. Auf der Startseite ist das richtig -- gleich
grosse Kacheln, einzeiliger Name. Hier bricht der Name um ("Community:
neue Eintraege"), die Karte waechst nach unten, die Zahl bleibt oben
kleben. Sie war ausserdem fuer die Hoehenrechnung unsichtbar, weshalb
es vorher schon eine `min-height` als Pflaster brauchte.

Jetzt ein echtes Raster: Name links (Zeile 1), Trend darunter, Zahl
rechts ueber beide Zeilen und mittig. `display: contents` auf dem
Wrapper -- so werden seine Kinder selbst zu Rasterfeldern, ohne dass am
HTML etwas geaendert werden muss und ohne dass die Startseite, die
dieselben Klassen benutzt, etwas davon mitbekommt.

Nachgemessen danach: 17 von 17 sauber -- nichts ragt heraus, nichts
ueberlappt, nichts abgeschnitten, kein Versatz ueber 5 px, und keine
Reihe mit ungleichen Hoehen.

--- screen4: Schutz & Regeln wird Magenta ---

"ich will dass die kategorie eine farbe bekommt die extrem krass
auffaellt. diese kategorie ist naemlich seeeehr wichtig."

MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES SONST NICHT GIBT. Rot ist fuer
"ueberfaellig" und Spicy Media vergeben, Babyblau fuer DogFather, Lila
fuer Manager, Gruen fuer Scout, Bronze fuer Creator, Bernstein fuer
"dringend". #ff2fd0 stoesst mit keinem davon zusammen -- es faellt
nicht auf, weil es HELLER ist, sondern weil es einzigartig ist. Das
ist verlaesslicher: Helligkeit konkurriert mit den Nachbarn,
Einzigartigkeit nicht.

Gerechnet wie bei Ton 21: Abstand zum naechsten Nachbarn 0,1305 (die
Grenze im Satz liegt bei 0,0973), Buntheit 0,276 -- die hoechste im
ganzen Satz, das alte Gold lag bei 0,170 --, Kontrast 6,00:1. Von
sieben Kandidaten sind drei an der Abstandsgrenze gescheitert. Das
Saeuregelb #e0ff00 waere lauter gewesen (16,86:1), haette sich aber
mit dem Bernstein von "dringend" und dem Gold der Nachbarkacheln um
dieselbe Wirkung gestritten. Die Kachel bleibt gebaut wie alle
anderen; was sie heraushebt, ist die Farbe, keine Sonderform.

--- Eine Rueckwirkung, die pruef-buehne gefunden hat ---

Die Typenschilder von gestern nutzen `background-clip: text` -- dafuer
MUSS `color: transparent` sein. pruef-buehne las genau dieses `color`,
machte daraus Schwarz und meldete 1,07:1 fuer Text, der hell und gut
lesbar ist. Fuenf Fehlalarme auf drei Seiten.

Eine Warnung, die bei richtiger Arbeit anschlaegt, wird abgeschaltet.
Sie ist deshalb nicht weichgemacht, sondern GENAUER geworden: Bei
Verlaufsschrift zaehlt jetzt der DUNKELSTE Farbstopp der ersten
Hintergrundebene -- der schlechteste Punkt, den es auf dieser Schrift
wirklich gibt. Damit meldet start.html 4,74:1 (noetig 4,5), die
Pruefung findet also weiter die engste Stelle.

UND DIE GEGENPROBE HAT SOFORT EINEN FEHLER IN MEINEM EIGENEN CODE
GEFUNDEN: Ich suchte das Ende der ersten Ebene mit `"),"` -- diese
Zeichenfolge steht aber schon am Ende des ERSTEN `rgb(...)`. Die
Messung las damit immer nur den ersten Stopp und haette einen dunklen
Verlauf fuer hell gehalten. Jetzt wird ueber Klammern gezaehlt. Der
Helfer steht einmal und wird als Quelltext in beide Seiten-Aufrufe
gereicht -- zwei Kopien waeren zwei Gelegenheiten auseinanderzulaufen.

Geprueft: pruef-buehne (mit neuer Gegenprobe), pruef-start-ansicht,
pruef-css-klassen, pruef-handy, pruef-workspace-seiten -- alle in
Ordnung.

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

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));
 }