Sechs Wuensche: Hintergruende, Knopfverteilung, Universum, Uhrkoepfe, Knallrot

--- screen3 + screen1: die Hintergruende draengeln nicht mehr ---

"die hintergrunde sollen ueberall so sein dass die sich nicht in den
vordergrund draengeln." / "mach den hintergrund von dieser kachel
dunkler, so dass die die kacheln drin viel mehr auffallen."

`--raster` stand auf .26 Deckkraft -- auf dunkler Flaeche kein Hauch
mehr, sondern ein gezeichnetes Gitter. Im Tagdialog lief es sichtbar
durch die Ueberschrift, in den Sammelkacheln stand es VOR den Karten
darin. Jetzt .09: Man sieht eine Struktur, man zaehlt keine Linien.
Eine Zahl fuer das ganze Haus -- sie steht einmal in module.css und
wird an fuenf Stellen benutzt.

Die Anlasskachel im Kalender lag mit rgba(19,26,38,.88) auf demselben
Helligkeitsniveau wie die Karten darin: keine Vitrine, sondern eine
dritte Flaeche gleicher Lautstaerke. Jetzt fast schwarz. An den Karten
musste dafuer nichts geaendert werden -- der Abstand entsteht von
selbst.

--- screen2: ein Knopf wandert nach links ---

"eins von diesen buttons soll links bei dem anderen kreis sein."

Die GLOCKE geht nach links zum Ring, der WECKER bleibt rechts bei der
Uhr. Das ist nicht ausgewuerfelt: Der Wecker ist eine Uhrzeit. Die
Glocke entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt --
und der Ring links zeigt genau das.

Die Kachel ist damit spiegelsymmetrisch belegt: 48 px Knopf + 14 px
Abstand + 248 px Instrument auf beiden Seiten. Genau das rechnet
`--spalte`. Die Zentrierung des Rings ist weggefallen -- sie war noetig,
solange er allein in einer fuer Instrument PLUS Knopf bemessenen Spalte
stand. Der reservierte Platz schrumpft von 104 auf 48 px je Seite; die
Begruendung fuer das Reservieren bleibt: Ein Platz, der erst mit der
Antwort entsteht, laesst die Zeile springen.

--- screen4: zwei Chilis und zwei Huskys dazu ---

"setz in den hintergrund noch 1-2 peperonis und dan das logo von
dogfather, also nur den husky."

DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-weiss und
freigestellt (nachgemessen: 49 % durchsichtig). Als Hintergrundbild bei
15 % verschwaenden die schwarzen Flaechen im dunklen Grund und uebrig
blieben die hellen -- ein zerrissener Umriss, kein Hund. Als Maske
ueber einer Farbflaeche wird daraus eine geschlossene Silhouette in
DogFathers Babyblau. Im Universum schweben jetzt beide Marken in ihren
beiden Farben: sieben Chilis rot, zwei Huskys blau.

--- screen5: die Punkte sind ersetzt, das letzte Glied leuchtet ---

"ich will dass du die punkte ersetzt und immer der letzte soll mehr
strahlen oder so." / "alles ist mega ausser die stunden muss du noch
perfektionnieren."

DIE DREI UMLAUFENDEN PERLEN SIND WEG -- samt 60 Zeilen Rechnung. Sie
waren ein zweites Ding an einer zweiten Stelle: eigene Uhr ab dem
ersten Takt (weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab),
eigener Startwinkel je Bahn, drei Winkel, die die kleineren Einheiten
anteilig mittragen mussten. All das war noetig, WEIL der Kopf neben der
Reihe herlief statt Teil von ihr zu sein. Genau deshalb trugen sie am
08.09. noch die alten Farben, als die Bahnen getauscht wurden.

Jetzt zeichnet eine zweite SVG-Lage genau EIN Glied heller -- dasselbe,
das die Reihe darunter zuletzt gesetzt hat, aus denselben Zahlen. Sie
kann gar nicht danebenstehen. Heller statt groesser: Waere der Kopf
groesser, waere er ein Fremdkoerper in der Reihe.

DIE STUNDEN WAREN BREITER ALS LANG -- 5,5 lang bei 7 breit, also 0,79:1.
Ein Segment, das breiter ist als lang, liest sich als Klotz quer auf
der Bahn statt als Balken entlang. Und weil die Kantenlage nur 0,4
versetzt ist, lief der 0,9 breite Lichtstrich MITTEN DURCH jeden Balken
statt an seiner Kante. Jetzt 10 lang bei 5,8 breit (1,7:1), und der
Kantenversatz ist nach Bandbreite gestaffelt: (Breite - 0,9) / 2, also
0,75 / 1,65 / 2,05 zusaetzlich zur Gruppe.

--- screen6: die Scout-Pipeline wird knallrot ---

"die farbe von dieser kategorie soll knall rot sein."

Die anderen zwanzig Kachelfarben sind gerechnet (OKLab, groesstmoeglicher
Abstand). Diese eine ist gewuenscht -- und wurde deshalb GEGEN den Satz
geprueft statt eingetragen: Der engste vorhandene Abstand liegt bei
0,0973. #ff1f2e kommt seinem naechsten Nachbarn auf 0,1228 nahe, ist
also weiter entfernt als das engste vorhandene Paar. Kontrast 5,01:1
(noetig 4,5). Von sechs geprueften Rottoenen der mit dem groessten
Abstand UND genug Kontrast.

tools/kachel-farben.mjs weiss jetzt davon: Ein kuenftiger Lauf wuerde
wieder Rosa vorschlagen, und das waere eine stille Ruecknahme einer
ausdruecklichen Entscheidung.

--- Ein Messfehler, der festgehalten gehoert ---

Beim Pruefen von screen4 meldete meine Foto-Methode vier Beschriftungen
unter 4,5:1 -- bei einem Verlust von 0,00 bis 0,15 durch das Universum.
Dass die Ursache nicht das Universum sein konnte, stand damit schon in
den Zahlen. Exakt gerechnet (Vordergrundfarbe gegen die tatsaechliche
Flaeche darunter) liegen dieselben Texte bei 9,13:1 bis 10,76:1.

Die Foto-Methode mittelt ueber alle helleren Bildpunkte, und bei
duenner Grossbuchstabenschrift ist die Haelfte davon halb
ausgeleuchtete Kantenpunkte. Fuer grosse Schrift taugt sie, fuer kleine
Versalien meldet sie systematisch zu wenig. Haette ich ihr geglaubt,
haette ich vier Farben "repariert", die in Ordnung sind.

Geprueft: pruef-start-ansicht, pruef-css-klassen, pruef-kalender,
pruef-buehne, pruef-handy, pruef-workspace-seiten, pruef-tagesruf --
alle in Ordnung. Dazu Ring und Uhr auf 248/248 nachgemessen, die
Kopf-Muster gegen die Uhrzeit nachgerechnet (01:24:59 -> Sekunde bei
281,115, Minute bei 96,76, Stunde bei 16,493) und die Kachelfarbe gegen
alle zwanzig anderen in OKLab geprueft.

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

workspace/start.html

@@ -14,12 +14,12 @@
 <meta name="theme-color" content="#06090f" />
 <link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
 <link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
 <!-- Nur die Startseite: Begrüßungskachel, Uhr, Glockenmulde. Siehe
      den Hinweis in start.css -- dort stand es bis zum 07.09.2026. -->
-<link rel="stylesheet" href="assets/css/heim.css?v=202609090113" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
+<link rel="stylesheet" href="assets/css/heim.css?v=202609090133" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
 </head>
 
 <body class="start">
@@ -89,6 +89,23 @@
       <span class="zuniversum__chili" style="--x: 68%; --y: 17%; --gr: 128px; --tief: .12; --dauer: 118s; --ver: -52s; --kipp: -7deg"></span>
       <span class="zuniversum__chili" style="--x: 80%; --y: 74%; --gr: 70px;  --tief: .16; --dauer: 83s;  --ver: -17s; --kipp: 31deg"></span>
       <span class="zuniversum__chili" style="--x: 45%; --y: 97%; --gr: 44px;  --tief: .14; --dauer: 104s; --ver: -68s; --kipp: -25deg"></span>
+      <!-- Zwei weitere Chilis und zwei Huskys (09.09.2026, Wunsch
+           Filipe: "setz in den hintergrund noch 1-2 peperonis und dan
+           das logo von dogfather, also nur den husky").
+
+           DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-
+           weiss und freigestellt (nachgemessen: 49 % durchsichtig). Als
+           Hintergrundbild bei 15 % Deckkraft verschwaenden die
+           schwarzen Flaechen im dunklen Grund und uebrig blieben die
+           hellen Stellen -- ein zerrissener Umriss, kein Hund. Als
+           Maske ueber einer Farbflaeche wird daraus eine geschlossene
+           Silhouette, und die traegt DogFathers Babyblau. Damit
+           schweben im Universum die beiden Marken des Hauses in ihren
+           beiden Farben. -->
+      <span class="zuniversum__chili" style="--x: 19%; --y:  9%; --gr: 54px;  --tief: .13; --dauer: 88s;  --ver: -24s; --kipp: 18deg"></span>
+      <span class="zuniversum__chili" style="--x: 73%; --y: 93%; --gr: 66px;  --tief: .12; --dauer: 112s; --ver: -41s; --kipp: -33deg"></span>
+      <span class="zuniversum__husky" style="--x: 15%; --y: 88%; --gr: 74px;  --tief: .15; --dauer: 97s;  --ver: -12s; --kipp: -9deg"></span>
+      <span class="zuniversum__husky" style="--x: 88%; --y: 14%; --gr: 58px;  --tief: .12; --dauer: 126s; --ver: -59s; --kipp: 14deg"></span>
     </span>
 
     <p class="marke willkommen__datum">
@@ -114,6 +131,25 @@
            bin?" Die Entscheidung faellt im Server
            (workspace-zentrale.js), nicht hier: Was der Browser nicht
            bekommt, kann er auch nicht verraten.               -->
+      <!-- ==== LINKS: KNOPF UND RING ================================
+           Der Ring stand hier allein in seiner Spalte und war darin
+           zentriert. Seit dem 09.09.2026 (Wunsch Filipe: "eins von
+           diesen buttons soll links bei dem anderen kreis sein") steht
+           die Glocke daneben -- genau spiegelbildlich zur Uhr rechts,
+           die den Wecker neben sich hat.
+
+           WELCHER KNOPF WOHIN, ist nicht ausgewuerfelt: Der WECKER ist
+           eine Uhrzeit und gehoert zur Uhr. Die GLOCKE ist die
+           Einstellung dafuer, ob man ueberhaupt etwas ueber sein Team
+           erfaehrt -- und der Ring links zeigt genau das, den Stand
+           des Teams. Wer den Ring ansieht und mehr davon wissen will,
+           findet den Schalter dafuer daneben.
+
+           Die Spalte ist damit auf beiden Seiten gleich belegt:
+           48 px Knopf + 14 px Abstand + Instrument. Genau das rechnet
+           `--spalte` in heim.css aus. -->
+      <div class="willkommen__links">
+      <div class="glocke-platz glocke-platz--links" id="glocke-platz-links"></div>
       <div class="zring" id="zring">
         <svg class="zring__bild" id="zring-bild" viewBox="0 0 300 300"
              role="img" aria-labelledby="zring-titel zring-text">
@@ -134,6 +170,7 @@
           <span class="zring__unter" id="zring-unter">wird geladen</span>
         </div>
       </div>
+      </div><!-- /.willkommen__links -->
 
       <!-- ==== MITTE: WER, WO, WAS ================================== -->
       <div class="willkommen__text">
@@ -364,6 +401,21 @@
             <circle class="uhr__minute"  data-ring="minute"  cx="50" cy="50" r="38.5" id="uhr-minute" />
             <circle class="uhr__stunde"  data-ring="stunde"  cx="50" cy="50" r="31.5" id="uhr-stunde" />
 
+            <!-- DAS LETZTE GLIED JEDER BAHN, hell und mit Schein.
+
+                 Dieselben Kreise noch einmal, aber mit einem Muster,
+                 das nur EIN Glied zeigt -- das gerade aktuelle. Sie
+                 liegen ueber den Bahnen, tragen dieselbe Geometrie und
+                 koennen deshalb gar nicht danebenliegen: Ort und Laenge
+                 rechnet dieselbe Funktion aus wie fuer die Reihe
+                 darunter (`start.js`, `setze`).
+
+                 `data-kopf` statt `data-ring`, damit das Skript sie
+                 getrennt ansprechen kann. -->
+            <circle class="uhr__kopf uhr__kopf--sekunde" data-kopf="sekunde" cx="50" cy="50" r="45.5" />
+            <circle class="uhr__kopf uhr__kopf--minute"  data-kopf="minute"  cx="50" cy="50" r="38.5" />
+            <circle class="uhr__kopf uhr__kopf--stunde"  data-kopf="stunde"  cx="50" cy="50" r="31.5" />
+
             <!-- DER KOMETENSCHWEIF IST WEG (08.09.2026).
 
                  Er machte aus einem durchgehenden Bogen eine Richtung --
@@ -389,18 +441,24 @@
                das, woran das Auge sich ausrichtet. Ein aufgesetzter Keil
                in Hausrot, mit heller Metallkante. -->
           <span class="uhr__zwoelf" aria-hidden="true"></span>
-          <!-- DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je
-               Minute herum und ist das Einzige an der Uhr, das sich
-               BEWEGT statt nur zu wachsen. Ein Bogen zeigt einen Stand,
-               eine laufende Perle zeigt LEBEN -- und genau das ist der
-               Unterschied zwischen einer Anzeige und einem Instrument. -->
-          <span class="uhr__perle" id="uhr-perle" aria-hidden="true"></span>
-          <!-- Dieselbe Kappe fuer Minute und Stunde, auf ihren eigenen
-               Bahnen. Drei Koepfe statt einem: Erst dadurch liest man
-               die drei Ringe als drei ZEIGER und nicht als drei
-               Fortschrittsbalken. -->
-          <span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
-          <span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" aria-hidden="true"></span>
+          <!-- DIE DREI PERLEN SIND WEG (09.09.2026, screen5).
+
+               Filipe: "ich will dass du die punkte ersetzt und immer
+               der letzte soll mehr strahlen oder so."
+
+               Es waren drei HTML-Elemente, die auf ihren Bahnen
+               umliefen -- Koepfe, die NEBEN der Reihe herliefen statt
+               Teil von ihr zu sein. Seit alle drei Bahnen aus einzelnen
+               Gliedern bestehen, gibt es dafuer eine bessere Antwort:
+               Das LETZTE Glied ist der Kopf. Es muss nur leuchten.
+
+               Das macht jetzt eine eigene Lage im SVG (`.uhr__kopf`),
+               die genau EIN Glied zeichnet -- dasselbe, das die Bahn
+               darunter gerade zuletzt gesetzt hat. Kein Element mehr im
+               Baum, keine zweite Winkelrechnung, die mit der ersten
+               auseinanderlaufen kann. Genau daran bin ich am 08.09.
+               haengengeblieben: Die Perlen trugen noch die alten
+               Farben, weil sie eine zweite Stelle waren. -->
           <!-- DER LED-KRANZ UND DIE VIER ANKER (08.09.2026).
                Nach Filipes Vorbild -- was bei 164 px davon traegt,
                steht in heim.css begruendet. -->
@@ -522,10 +580,10 @@
   </p>
 </main>
 
-<script src="assets/js/wahl.js?v=202609090113" defer></script>
-<script src="assets/js/bereiche.js?v=202609090113" defer></script>
-<script src="assets/js/kopf.js?v=202609090113" defer></script>
-<script src="assets/js/glocke.js?v=202609090113" defer></script>
-<script src="assets/js/start.js?v=202609090113" defer></script>
+<script src="assets/js/wahl.js?v=202609090133" defer></script>
+<script src="assets/js/bereiche.js?v=202609090133" defer></script>
+<script src="assets/js/kopf.js?v=202609090133" defer></script>
+<script src="assets/js/glocke.js?v=202609090133" defer></script>
+<script src="assets/js/start.js?v=202609090133" defer></script>
 </body>
 </html>