diff --git a/ruf.png b/ruf.png
new file mode 100644
index 00000000..9ee21722
Binary files /dev/null and b/ruf.png differ
diff --git a/tools/kachel-farben.mjs b/tools/kachel-farben.mjs
index 46cd2675..eae973f2 100644
--- a/tools/kachel-farben.mjs
+++ b/tools/kachel-farben.mjs
@@ -46,6 +46,21 @@
Aufrufen mit: node tools/kachel-farben.mjs
Die Ausgabe wird nach start.css uebertragen (Abschnitt "Kacheln").
+
+ 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
+ steht dort #ff1f2e; dieses Werkzeug wuerde beim naechsten Lauf
+ wieder Rosa vorschlagen.
+
+ NICHT EINFACH UEBERNEHMEN, sondern die Ausgabe fuer Ton 21
+ verwerfen. Der Wunsch ist geprueft und nicht willkuerlich: #ff1f2e
+ liegt in OKLab 0,1228 von seinem naechsten Nachbarn entfernt --
+ weiter als das engste vorhandene Paar im Satz (0,0973) -- und hat
+ 5,01:1 Kontrast. Wer den Satz neu rechnet, muss diese Farbe als
+ FESTEN Punkt vorgeben und die uebrigen zwanzig darum herum
+ verteilen; sonst ist der naechste Lauf eine stille Ruecknahme einer
+ ausdruecklichen Entscheidung.
=================================================================== */
/* ---------- Farbenlehre ------------------------------------------- */
diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index 23ba0093..36d8ba6e 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -482,10 +482,6 @@
links und rechts, dazwischen der Text. */
.zring {
position: relative; aspect-ratio: 1; width: 100%; max-width: var(--instrument);
- /* In der breiteren Spalte mittig -- sonst klebte er links, waehrend
- die Uhr rechts an ihrer Kante steht, und die Kachel saehe schief
- aus, ohne dass eine Zahl falsch waere. */
- justify-self: center;
margin: 0 auto;
}
.zring__bild {
@@ -991,6 +987,20 @@
.uhr__zeit { font-size: calc(var(--instrument) * .168); }
.uhr__sek { font-size: calc(var(--instrument) * .068); }
+/* LINKS: KNOPF UND RING, spiegelbildlich zur Uhr rechts (screen2,
+ 09.09.2026). Dieselben 14 px Abstand, dieselben 48 px Knopfbreite --
+ deshalb geht `--spalte` auf beiden Seiten genau auf.
+
+ Die Zentrierung des Rings ist damit WEG, und das ist kein Versehen:
+ Sie war noetig, solange er allein in einer Spalte stand, die fuer
+ Instrument PLUS Knopf bemessen ist. Jetzt fuellt er sie mit seinem
+ Knopf zusammen aus -- eine zusaetzliche Zentrierung wuerde ihn
+ wieder verschieben. */
+.willkommen__links {
+ display: flex; align-items: center; gap: 14px;
+ min-width: 0;
+}
+
.glocke-platz {
/* ZWEI KNOEPFE UEBEREINANDER, und der Platz gilt fuer beide.
@@ -1001,8 +1011,18 @@
auf 46 stehen lassen, waere genau der Sprung zurueckgekommen, gegen
den der Absatz darueber geschrieben wurde: Der zweite Knopf haengt
an derselben Abfrage wie der erste. */
- width: 48px; height: 104px; flex: none;
- display: flex; flex-direction: column; align-items: center; gap: 8px;
+ /* EIN KNOPF JE SEITE, nicht mehr zwei uebereinander.
+
+ Bis zum 09.09.2026 standen Glocke und Tagesruf beide rechts, und
+ der Platz war 104 px hoch reserviert (2 x 48 + 8 Abstand). Seit
+ die Glocke nach links gewandert ist, traegt jede Seite einen --
+ also 48 px. Die Begruendung fuer das RESERVIEREN bleibt
+ unveraendert gueltig: Beide Knoepfe haengen an einer Abfrage, und
+ ein Platz, der erst mit der Antwort entsteht, laesst die Zeile
+ springen. Man zielt auf etwas, und im Moment des Klicks rutscht
+ es weg. */
+ width: 48px; height: 48px; flex: none;
+ display: flex; flex-direction: column; align-items: center;
position: relative;
}
diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css
index 1f2dafa4..41c14620 100644
--- a/workspace/assets/css/kalender.css
+++ b/workspace/assets/css/kalender.css
@@ -1308,9 +1308,24 @@
.k-anlasskachel {
margin: 0 0 24px;
padding: 18px 20px 6px;
+ /* DUNKLER ALS DIE KARTEN DARIN (09.09.2026, screen1).
+
+ Filipe: "mach den hintergrund von dieser kachel dunkler, so dass
+ die die kacheln drin viel mehr auffallen."
+
+ Das ist die Aufgabe einer Sammelkachel und war hier falsch herum:
+ Sie lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie
+ die Anlasskarten darin -- damit war sie nicht der Untergrund,
+ sondern eine dritte Flaeche gleicher Lautstaerke. Eine Vitrine ist
+ dunkler als das, was darin steht; sonst sieht man die Vitrine.
+
+ Jetzt fast schwarz und praktisch deckend (.97/.99). Die Karten
+ darin behalten ihre Helligkeit unveraendert -- der Abstand
+ zwischen beiden entsteht dadurch von selbst, ohne dass an den
+ Karten etwas geaendert werden musste. */
background:
var(--raster),
- linear-gradient(178deg, rgba(19, 26, 38, .88), rgba(10, 14, 22, .93));
+ linear-gradient(178deg, rgba(9, 13, 20, .97), rgba(4, 7, 12, .99));
}
.k-anlasskachel:not(:has(> section:not([hidden]))) { display: none; }
/* Die Abschnitte darin tragen nur noch ihre Ueberschrift -- die
diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css
index cbed3403..4525ef3d 100644
--- a/workspace/assets/css/module.css
+++ b/workspace/assets/css/module.css
@@ -83,9 +83,29 @@
/* Die Schräge steht als Größe da, damit Silhouette, Kantenlicht und
Eckwinkel garantiert dieselbe benutzen. */
--fase: 18px;
+ /* DAS RASTER TRITT ZURUECK (09.09.2026, screen3).
+
+ Filipe: "die hintergrunde sollen ueberall so sein dass die sich
+ nicht in den vordergrund draengeln."
+
+ Es stand auf .26 Deckkraft. Das ist auf einer dunklen 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. Ein Hintergrund, den man LIEST, ist kein
+ Hintergrund.
+
+ Jetzt .09. Das ist der Wert, bei dem man aus einem Meter Abstand
+ eine Struktur SIEHT, aber keine Linien ZAEHLT -- und genau das ist
+ der Unterschied zwischen Material und Muster. Dieselbe Ueberlegung
+ wie beim Kohlefasergewebe der Zentrale, das bei drei Prozent liegt.
+
+ EINE ZAHL FUER DAS GANZE HAUS: `--raster` steht hier einmal und
+ wird an 20 Stellen benutzt. Wer es leiser will, aendert diese eine
+ Zeile -- deshalb war es auch richtig, es nicht an jeder Kachel
+ einzeln nachzuziehen. */
--raster:
- repeating-linear-gradient(0deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px),
- repeating-linear-gradient(90deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px);
+ repeating-linear-gradient(0deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px),
+ repeating-linear-gradient(90deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px);
}
/* MODULLISTE */
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 49be805f..27acab64 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -860,7 +860,24 @@ body.start > main { position: relative; z-index: 1; }
[data-ton="18"] { --ton: #9299fd; } /* Automationen */
[data-ton="19"] { --ton: #796ce0; } /* Dateien */
[data-ton="20"] { --ton: #fc88db; } /* Creator-Profile */
-[data-ton="21"] { --ton: #fdb0d2; } /* Scout */
+/* TON 21 IST VON HAND GESETZT (09.09.2026, screen6).
+
+ Filipe: "die farbe von dieser kategorie soll knall rot sein."
+ Gemeint ist die Scout-Pipeline.
+
+ Die anderen zwanzig sind gerechnet (tools/kachel-farben.mjs, auf
+ groesstmoeglichen Abstand in OKLab). Diese eine ist gewuenscht --
+ und deshalb wurde sie GEGEN den Satz geprueft statt einfach
+ eingetragen: Der kleinste Abstand zwischen zwei der 21 Farben liegt
+ bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn (Ton 2,
+ #e15e8e) auf 0,1228 nahe -- also weiter entfernt als das engste
+ vorhandene Paar. Der Satz wird durch diese Farbe nicht schlechter,
+ er wird an dieser Stelle sogar eindeutiger.
+
+ Kontrast auf dem dunklen Grund: 5,01:1 (noetig 4,5). Von sechs
+ geprueften Rottoenen hat dieser den groessten Abstand UND genug
+ Kontrast -- deshalb dieser und nicht der erstbeste. */
+[data-ton="21"] { --ton: #ff1f2e; } /* Scout-Pipeline -- Wunsch: knallrot */
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
@@ -5263,12 +5280,6 @@ body[data-fremde-sicht="ja"]::after {
selbst sitzt oben auf dem Radius des Sekundenbogens. So braucht die
Drehung keine Rechnung mit Winkelfunktionen: Der Kasten dreht sich,
die Perle wird mitgenommen. */
-.uhr__perle {
- position: absolute; inset: 10px;
- z-index: 5; pointer-events: none;
- transform: rotate(0deg);
- transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
-}
/* DER ABSTAND FOLGT DER BAHN, DIE FARBE FOLGT DER BAHN -- und beides
muss beim Farbtausch mitgehen. Am 08.09.2026 habe ich genau das
vergessen: Die drei BOEGEN waren getauscht (Stunde rot, Minute
@@ -5282,46 +5293,15 @@ body[data-fremde-sicht="ja"]::after {
/* AUSSEN, BABYBLAU: der Kopf der Sekundenpunkte. Am groessten, weil er
der einzige ist, der sich sichtbar bewegt. */
-.uhr__perle::before {
- content: "";
- position: absolute; top: 4.2%; left: 50%;
- width: 7px; height: 7px; margin-left: -3.5px;
- border-radius: 50%;
- background:
- radial-gradient(circle at 36% 32%, #fff 0%, #d8efff 34%, #7ec8f2 70%, #1d5a80 100%);
- box-shadow:
- 0 0 6px 1px rgba(126, 200, 242, .75),
- 0 0 13px 3px rgba(110, 180, 235, .3),
- inset 0 0 0 .5px rgba(255, 255, 255, .55);
-}
/* MITTE, SILBER: der Kopf der Minutenbalken. Poliertes Metall, kein
Licht -- er ist der Bezug, an dem man die anderen beiden misst. */
-.uhr__perle--minute::before {
- top: 12.6%;
- width: 6px; height: 6px; margin-left: -3px;
- background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6edf6 34%, #97a4b4 70%, #414b58 100%);
- box-shadow:
- 0 0 4px 1px rgba(220, 235, 255, .45),
- inset 0 0 0 .5px rgba(255, 255, 255, .6);
-}
/* INNEN, ROT: der Kopf der Stundenbalken. Der kleinste Punkt in der
kraeftigsten Farbe -- er bewegt sich am wenigsten und darf deshalb
auffallen, ohne zu stoeren. */
-.uhr__perle--stunde::before {
- top: 21.4%;
- width: 5.4px; height: 5.4px; margin-left: -2.7px;
- background: radial-gradient(circle at 36% 32%, #fff 0%, #ffb0b6 38%, #ff4257 72%, #7e1a24 100%);
- box-shadow:
- 0 0 5px 1px rgba(255, 80, 95, .6),
- inset 0 0 0 .5px rgba(255, 255, 255, .5);
-}
-
@media (prefers-reduced-motion: reduce) {
/* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
- .uhr__perle { transition: none; }
}
@media (forced-colors: active) {
- .uhr__zwoelf, .uhr__perle { display: none; }
.uhr__schatten, .uhr__kante { display: none; }
}
@@ -5474,6 +5454,37 @@ body[data-fremde-sicht="ja"]::after {
}
.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
+/* DER VERSATZ MUSS DER BREITE FOLGEN (09.09.2026, screen5).
+
+ Die Kantenlage liegt als Gruppe 0,4 Einheiten hoeher als die Bahn
+ darunter. Das war richtig, solange alle drei Baender aehnlich schmal
+ waren. Inzwischen sind sie 3,2 / 5 / 5,8 breit -- und ein 0,9
+ breiter Lichtstrich, der nur 0,4 versetzt ist, liegt auf einem
+ 5,8er Balken nicht auf der KANTE, sondern MITTEN DRIN. Im
+ Bildschirmfoto lief ein heller Streifen quer durch jeden roten
+ Stundenbalken; das war der Rest, den Filipe an den Stunden gestoert
+ hat.
+
+ Damit der Strich die Kante gerade noch streift, muss er um
+ (Bandbreite - Strichbreite) / 2 versetzt sein. Die Gruppe bringt
+ davon schon 0,4 mit, der Rest kommt hier:
+
+ Sekunde (3,2 - 0,9) / 2 = 1,15 -> noch 0,75
+ Minute (5,0 - 0,9) / 2 = 2,05 -> noch 1,65
+ Stunde (5,8 - 0,9) / 2 = 2,45 -> noch 2,05
+
+ `px` in einem SVG-Transform sind Einheiten des viewBox, keine
+ Bildpunkte -- die Uhr skaliert damit mit, ohne dass sich das
+ Verhaeltnis verschiebt.
+
+ Dass die Kante immer NACH OBEN versetzt ist und nicht senkrecht zum
+ jeweiligen Balken, ist Absicht: Es ist ein Licht von oben, kein
+ aufgemalter Rand. Oben streift es die Oberkante, unten die
+ Unterkante -- genau das tut Licht. */
+.uhr__kante .uhr__sekunde { transform: translateY(-0.75px); }
+.uhr__kante .uhr__minute { transform: translateY(-1.65px); }
+.uhr__kante .uhr__stunde { transform: translateY(-2.05px); }
+
/* DIE ZIFFERNINSEL (07.09.2026).
Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein
@@ -5878,11 +5889,7 @@ body[data-fremde-sicht="ja"]::after {
statt bei 360 Grad zurueckzuspringen -- sonst liefe die Ueberblendung
einmal je Minute rueckwaerts durch das ganze Zifferblatt. Genau das
macht start.js jetzt (fortlaufende Sekunden statt sk % 60). */
-.uhr__perle {
- transition: transform .92s cubic-bezier(.33, 0, .2, 1);
-}
@media (prefers-reduced-motion: reduce) {
- .uhr__perle { transition: none; }
}
/* ===================================================================
@@ -6015,9 +6022,16 @@ body[data-fremde-sicht="ja"]::after {
/* ---- 3. Die Breiten, klar gestaffelt ----------------------------- */
.uhr__minute { stroke-width: 5; }
-.uhr__stunde { stroke-width: 7; }
+/* 5,8 STATT 7 (09.09.2026, screen5). Zusammen mit der laengeren
+ Gliedlaenge in start.js (5,5 -> 10) ergibt das ein Verhaeltnis von
+ 1,7:1 statt 0,79:1. Vorher war ein Stundenglied BREITER ALS LANG und
+ las sich deshalb als Klotz quer auf der Bahn statt als Balken
+ entlang. Zusaetzlich lief der helle Strich der Kantenlage (0,4 nach
+ oben versetzt) mitten hindurch statt an der Oberkante -- bei einem
+ laengeren Glied sitzt er wieder da, wo er hingehoert. */
+.uhr__stunde { stroke-width: 5.8; }
.uhr__schatten .uhr__minute { stroke-width: 6; }
-.uhr__schatten .uhr__stunde { stroke-width: 8; }
+.uhr__schatten .uhr__stunde { stroke-width: 6.8; }
/* ---- 2. Die Sekunde als Punktreihe -------------------------------
`stroke-linecap: round` plus eine Strichlaenge nahe null ergibt
@@ -6036,12 +6050,6 @@ body[data-fremde-sicht="ja"]::after {
/* (Die Scheine selbst: siehe Dateiende, ein Satz fuer alle drei.) */
/* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist
scharf -- was leuchtet, hat einen Rand. */
-.uhr__perle::before {
- box-shadow:
- 0 0 0 1px rgba(255, 255, 255, .75),
- 0 0 4px 0 currentColor;
-}
-
/* ===================================================================
DIE DREI FARBEN, NEU VERTEILT (08.09.2026)
@@ -6083,10 +6091,6 @@ body[data-fremde-sicht="ja"]::after {
/* Die Koepfe tragen die Farbe ihrer Bahn -- sonst zeigte ein blauer
Punkt auf eine rote Reihe. */
-.uhr__perle::before { color: rgba(126, 200, 242, .9); }
-.uhr__perle--minute::before { color: rgba(226, 236, 248, .85); }
-.uhr__perle--stunde::before { color: rgba(255, 92, 104, .9); }
-
/* ---- Der Punktkranz: rot, schwarz, babyblau im Wechsel -----------
Drei Farben in einem `repeating-conic-gradient`: je 6 Grad ein
@@ -6196,17 +6200,41 @@ body[data-fremde-sicht="ja"]::after {
fuenf Aufklebern und einem Raum mit Tiefe. Die Unschaerfe ist hier
ausdruecklich richtig (Entfernung), waehrend sie an der Uhr
ausdruecklich falsch war (dort ist alles gleich nah). */
-.willkommen > .zuniversum .zuniversum__chili {
+.willkommen > .zuniversum .zuniversum__chili,
+.willkommen > .zuniversum .zuniversum__husky {
position: absolute;
left: var(--x); top: var(--y);
width: var(--gr); height: var(--gr);
margin: calc(var(--gr) / -2);
- background: url("../img/marke-spicy.webp") center / contain no-repeat;
opacity: var(--tief);
filter: blur(calc((.11 - var(--tief)) * 22px));
animation: zuni-schweben var(--dauer) ease-in-out var(--ver) infinite;
will-change: transform;
}
+.willkommen > .zuniversum .zuniversum__chili {
+ background: url("../img/marke-spicy.webp") center / contain no-repeat;
+}
+/* DER HUSKY ALS MASKE (09.09.2026, screen4).
+
+ Filipe: "setz in den hintergrund noch 1-2 peperonis und dan das logo
+ von dogfather, also nur den husky."
+
+ Die Datei ist schwarz-weiss und freigestellt (nachgemessen: 49 %
+ durchsichtig). Als Hintergrundbild bei 15 % Deckkraft verschwaenden
+ die schwarzen Flaechen im dunklen Grund, 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. Im Universum schweben damit die beiden Marken
+ des Hauses in ihren beiden Farben.
+
+ Er ist eine Spur staerker eingestellt als die Chilis: Eine
+ geschlossene Silhouette wirkt bei gleicher Deckkraft leiser als eine
+ mit Aussparungen -- beim Chili fuehrt die Flamme innen den Blick. */
+.willkommen > .zuniversum .zuniversum__husky {
+ background: #7ec8f2;
+ -webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
+ mask: url("../img/marke-husky.webp") center / contain no-repeat;
+}
/* Die Bahn: eine langgezogene Acht statt eines Kreises. Ein Kreis
sieht nach Karussell aus, sobald man ihn zweimal gesehen hat; eine
@@ -6232,7 +6260,8 @@ body[data-fremde-sicht="ja"]::after {
nicht "weniger Gestaltung". */
@media (prefers-reduced-motion: reduce) {
.willkommen > .zuniversum::before,
- .willkommen > .zuniversum .zuniversum__chili { animation: none; }
+ .willkommen > .zuniversum .zuniversum__chili,
+ .willkommen > .zuniversum .zuniversum__husky { animation: none; }
}
/* Auf schmalen Bildschirmen wird die Kachel hoch und schmal. Fuenf
@@ -6241,8 +6270,15 @@ body[data-fremde-sicht="ja"]::after {
aussieht", sondern weil bei 380 px Breite der 122-px-Chili ein
Drittel der Kachel einnimmt und hinter dem Titel steht. */
@media (max-width: 700px) {
- .willkommen > .zuniversum .zuniversum__chili:nth-child(1),
- .willkommen > .zuniversum .zuniversum__chili:nth-child(3) { display: none; }
+ /* Auf schmalen Schirmen bleiben vier von acht Motiven. `> :nth-child`
+ statt `.zuniversum__chili:nth-child` -- die Kinder sind jetzt
+ zweierlei, und ein Klassenname im Selektor haette beim Zaehlen
+ trotzdem ALLE Geschwister mitgezaehlt. Das sieht richtig aus und
+ trifft die falschen. */
+ .willkommen > .zuniversum > :nth-child(1),
+ .willkommen > .zuniversum > :nth-child(3),
+ .willkommen > .zuniversum > :nth-child(7),
+ .willkommen > .zuniversum > :nth-child(8) { display: none; }
}
/* Wo Benachrichtigungen gar nicht gehen, sieht man das dem Knopf an --
@@ -6604,3 +6640,58 @@ body[data-fremde-sicht="ja"]::after {
/* Der Haken gehoert ueber die Raendelung -- sonst liegt der Ring auf
ihm. */
.zahlen-leer__haken svg { position: relative; z-index: 1; }
+
+/* =====================================================================
+ DAS LETZTE GLIED LEUCHTET (screen5, 09.09.2026)
+
+ Filipe: "ich will dass du die punkte ersetzt und immer der letzte
+ soll mehr strahlen oder so, mach das richtig geil."
+
+ An dieser Stelle liefen bis heute drei HTML-Perlen auf eigenen
+ Bahnen. Sie waren ein zweites Ding an einer zweiten Stelle -- mit
+ eigener Winkelrechnung, eigener Farbe und eigener Groesse. Genau
+ deshalb standen sie am 08.09. in den falschen Farben, als die Bahnen
+ getauscht wurden: Wer eine Sache an zwei Orten fuehrt, aendert
+ irgendwann nur einen.
+
+ Jetzt zeichnet eine zweite SVG-Lage dasselbe letzte Glied noch
+ einmal -- heller, mit engem Schein. Sie kann gar nicht danebenstehen:
+ Ort und Laenge kommen aus derselben Funktion wie die Reihe darunter.
+
+ HELLER STATT GROESSER. Der Kopf hat dieselbe Breite und dieselbe
+ Laenge wie jedes andere Glied. Waere er groesser, waere er ein
+ Fremdkoerper in der Reihe; heller ist er dasselbe Glied, nur eben das
+ aktuelle. Das ist der Unterschied zwischen einem Zeiger, der auf die
+ Reihe zeigt, und einer Reihe, die selbst sagt, wo sie steht.
+
+ AUGENSCHONEND: Der Schein ist ENG (2 bis 3 px) und pulsiert nicht.
+ Er soll die Stelle markieren, nicht die Aufmerksamkeit fesseln -- die
+ Uhr steht dauerhaft im Bild. Eine Ueberblendung von .25 s macht den
+ Sprung von Glied zu Glied weich, ohne dass etwas wandert.
+ ===================================================================== */
+.uhr__kopf {
+ fill: none;
+ stroke-linecap: inherit;
+ transition: stroke-dashoffset .25s cubic-bezier(.34, 1.2, .64, 1);
+}
+.uhr__kopf--sekunde {
+ stroke: #dff2ff;
+ stroke-width: 3.6;
+ stroke-linecap: round;
+ filter: drop-shadow(0 0 2.4px rgba(150, 215, 250, .95));
+}
+.uhr__kopf--minute {
+ stroke: #ffffff;
+ stroke-width: 5.2;
+ filter: drop-shadow(0 0 2.2px rgba(226, 238, 250, .9));
+}
+.uhr__kopf--stunde {
+ stroke: #ffd9dd;
+ stroke-width: 6;
+ filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95));
+}
+/* Wer weniger Bewegung will, bekommt den Sprung ohne Ueberblendung --
+ der Kopf steht dann einfach am richtigen Glied. */
+@media (prefers-reduced-motion: reduce) {
+ .uhr__kopf { transition: none; }
+}
diff --git a/workspace/assets/js/glocke.js b/workspace/assets/js/glocke.js
index f2f9b81b..57c26866 100644
--- a/workspace/assets/js/glocke.js
+++ b/workspace/assets/js/glocke.js
@@ -189,7 +189,21 @@
einer umgezogen ist, wäre keine Verbesserung. Und weil die
Kopfleiste am 06.09. schon einmal an einem sechsten Element
zerbrochen ist, wird sie hier nebenbei um eines leichter. */
- const platz = document.getElementById('glocke-platz');
+ /* SEIT DEM 09.09.2026 GIBT ES ZWEI PLAETZE (screen2).
+
+ Die Glocke geht nach LINKS neben den Ring, der Tagesruf bleibt
+ rechts neben der Uhr. Welcher wohin, folgt der Bedeutung: Der
+ Wecker ist eine Uhrzeit und gehoert zur Uhr; die Glocke
+ entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt --
+ und der Ring links zeigt genau das.
+
+ Gibt es den linken Platz nicht (jede Seite ausser der
+ Startseite), faellt die Glocke wie bisher auf den rechten
+ zurueck und von dort auf die Kopfleiste. Zwei Rueckfaelle, kein
+ Sonderfall: Ein Knopf, der auf zwoelf Seiten verschwindet, weil
+ er auf einer umgezogen ist, waere keine Verbesserung. */
+ const platzLinks = document.getElementById('glocke-platz-links');
+ const platz = platzLinks || document.getElementById('glocke-platz');
const kopf = platz || document.querySelector('.kopfleiste__rechts');
if (!kopf || document.getElementById('glocke')) return;
@@ -245,7 +259,11 @@
}
zeichnen();
- if (platz) await tagesrufBauen(platz);
+ /* Der Tagesruf gehoert IMMER an den rechten Platz -- auch wenn die
+ Glocke links sitzt. `platz` zeigt jetzt auf den linken, deshalb
+ wird der rechte hier eigens geholt. */
+ const platzRechts = document.getElementById('glocke-platz');
+ if (platzRechts) await tagesrufBauen(platzRechts);
}
/* =====================================================================
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 2f87d74d..71ffa4db 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -375,9 +375,10 @@
`data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an
denen man eine vergessen kann -- und ein Schatten, der stehen
bleibt, sieht sofort kaputt aus. */
- const lagen = {};
+ const lagen = {}, koepfe = {};
for (const welcher of ['sekunde', 'minute', 'stunde']) {
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
+ koepfe[welcher] = document.querySelector(`[data-kopf="${welcher}"]`);
}
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
@@ -402,7 +403,26 @@
und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
liest man die drei auch ohne Farbe auseinander. */
const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
- const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 5.5 };
+ /* DIE STUNDE WAR BREITER ALS LANG (behoben 09.09.2026, screen5).
+
+ Filipe: "alles ist mega ausser die stunden muss du noch
+ perfektionnieren."
+
+ Nachgemessen war das der Grund: Ein Stundenglied war 5,5 lang
+ und 7 breit. Ein Segment, das breiter ist als lang, liest sich
+ nicht als Balken auf einer Bahn, sondern als Klotz quer darauf --
+ und weil die Kantenlage 0,4 nach oben versetzt ist, lief
+ zusaetzlich ein heller Strich mitten hindurch statt an der
+ Oberkante entlang.
+
+ Jetzt 10 lang bei 5,8 breit. Das Verhaeltnis ist damit 1,7:1
+ statt 0,79:1 -- aus dem Klotz wird ein Balken, und der helle
+ Strich sitzt wieder da, wo er hingehoert: auf der Kante.
+
+ Die Staffelung bleibt eindeutig: Punkt (0,01), kurzer Balken
+ (1,7), langer Balken (10). Je langsamer die Bahn, desto laenger
+ das Glied. */
+ const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 10 };
const punktMuster = (U, n, gesamt, laenge) => {
const schritt = U / gesamt;
@@ -467,10 +487,32 @@
el.style.strokeDashoffset = '0';
}
- };
+ /* DAS LETZTE GLIED, EINZELN (09.09.2026, screen5).
- /* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */
- let nullpunkt = null, startWinkel = 0, minStart = 0, stdStart = 0, sekStart = 0;
+ Filipe: "immer der letzte soll mehr strahlen oder so."
+
+ Vorher liefen dafuer drei HTML-Perlen auf eigenen Bahnen -- mit
+ einer EIGENEN Winkelrechnung. Zwei Rechnungen fuer denselben
+ Ort sind zwei Gelegenheiten auseinanderzulaufen, und genau das
+ ist am 08.09. passiert: Die Bahnen tauschten die Farben, die
+ Perlen nicht.
+
+ Jetzt zeichnet eine zweite Lage GENAU EIN Glied, aus denselben
+ Zahlen wie die Reihe darunter: Laenge unveraendert, alles
+ andere Luecke, Anfang um (n-1) Schritte verschoben.
+
+ `dashoffset` ist NEGATIV, und das ist keine Willkuer: Ein
+ positiver Wert schiebt das Muster rueckwaerts, der Strich
+ erschiene frueher. Um ihn bei p BEGINNEN zu lassen, braucht es
+ -p. */
+ const kopf = koepfe[welcher];
+ if (kopf) {
+ const schritt = U / gesamt;
+ const laenge = GLIED_LAENGE[welcher];
+ kopf.style.strokeDasharray = `${laenge} ${(U - laenge).toFixed(3)}`;
+ kopf.style.strokeDashoffset = `-${((n - 1) * schritt).toFixed(3)}`;
+ }
+ };
const takt = () => {
const j = new Date();
@@ -490,65 +532,27 @@
Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
zwoelf Stunden, und der Ring soll sich wie eines lesen. */
setze('sekunde', sk / 60);
- /* Die Perle sitzt auf dem Kopf des Sekundenbogens. Sechs Grad je
- Sekunde, im selben Takt wie die Anzeige -- sie springt also
- mit, statt weich zu gleiten. Das ist ehrlicher (die Anzeige ist
- digital) und kostet EINE Bildberechnung je Sekunde statt
- sechzig. Auf einer Seite, die stundenlang offen steht, ist das
- der Unterschied zwischen einem warmen und einem kalten
- Rechner. */
- /* DIE KOEPFE ZAEHLEN WEITER, STATT ZURUECKZUSPRINGEN.
- Sie gleiten jetzt (Ueberblendung in heim.css) statt zu
- springen. Damit das funktioniert, darf der Winkel bei 59 -> 0
- Sekunden NICHT von 354 auf 0 fallen -- die Ueberblendung liefe
- sonst einmal je Minute rueckwaerts durch das ganze
- Zifferblatt. Gerechnet wird deshalb mit der fortlaufenden Zeit:
- Der Winkel waechst immer weiter, und 366 Grad sieht genauso aus
- wie 6, nur dass der Weg dorthin vorwaerts fuehrt.
+ /* HIER STAND DIE PERLENRECHNUNG -- 60 Zeilen, und sie ist mit den
+ Perlen zusammen weggefallen (09.09.2026, screen5).
- Die Anzeige selbst rechnet weiterhin nur einmal je Sekunde --
- die Bewegung dazwischen macht der Browser, nicht das Skript. */
- /* SEIT DEM ERSTEN TAKT, NICHT SEIT 1970.
+ Sie war ein Lehrstueck fuer sich: eine eigene Uhr ab dem ersten
+ Takt, weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab und
+ die Nachkommastellen verlor; ein Startwinkel je Bahn; drei
+ Winkel, die die kleineren Einheiten anteilig mittragen mussten,
+ damit kein Kopf neben dem Ende seines Bogens steht.
- Der erste Versuch rechnete mit der vollen Unixzeit. Ergebnis im
- Bildschirmfoto: `rotate(1.07333e+10deg)` -- eine Zahl in
- Exponentialschreibweise, bei der die Nachkommastellen laengst
- weg sind. Die Perlen standen sichtbar NEBEN dem Ende ihrer
- Boegen, die rote sogar auf der anderen Seite des Zifferblatts.
- Gerechnet war es richtig, darstellbar nicht.
+ All das war noetig, WEIL der Kopf ein zweites Ding an einer
+ zweiten Stelle war. Er ist jetzt das letzte Glied der Bahn
+ selbst und wird von derselben Funktion aus denselben Zahlen
+ gesetzt (siehe `setze`). Damit kann er gar nicht mehr
+ danebenstehen -- nicht weil die Rechnung besser ist, sondern
+ weil es nur noch eine gibt.
- Jetzt zaehlt eine eigene Uhr ab dem ersten Takt: Startwinkel ist
- der echte Stand beim Laden, danach kommen 6 Grad je Sekunde
- dazu. Die Zahl bleibt klein (ein Tag sind 518 400 Grad), waechst
- aber weiter -- und nur das braucht die Ueberblendung, damit sie
- nie rueckwaerts laeuft. */
- if (nullpunkt === null) {
- nullpunkt = Math.floor(j.getTime() / 1000);
- startWinkel = sk * 6;
- minStart = min; stdStart = std; sekStart = sk;
- }
- const seit = Math.floor(j.getTime() / 1000) - nullpunkt;
- const winkelSek = startWinkel + seit * 6;
- const perle = $('uhr-perle');
- if (perle) perle.style.transform = `rotate(${winkelSek.toFixed(2)}deg)`;
- /* Die beiden anderen Koepfe laufen mit IHREN Ringen -- die Minute
- nimmt die Sekunden anteilig mit, die Stunde die Minuten. Sonst
- staende der Kopf neben dem Ende seines Bogens, und genau das
- sieht man sofort. */
- /* Minute und Stunde ebenso: Startstand plus das, was seither
- vergangen ist. Sie tragen die kleineren Einheiten anteilig mit,
- damit ihr Kopf nie neben dem Ende ihres Bogens steht. */
- const perleMin = $('uhr-perle-minute');
- if (perleMin) {
- const start = (minStart + sekStart / 60) * 6;
- perleMin.style.transform = `rotate(${(start + seit * 0.1).toFixed(3)}deg)`;
- }
- const perleStd = $('uhr-perle-stunde');
- if (perleStd) {
- const start = ((stdStart % 12) + minStart / 60) * 30;
- perleStd.style.transform = `rotate(${(start + seit / 120).toFixed(4)}deg)`;
- }
+ Der Rest, der hier stand (nullpunkt, startWinkel, minStart,
+ stdStart, sekStart), wird nirgends sonst gebraucht und ist
+ ebenfalls weg. Eine Variable, die nur noch gepflegt wird, ist
+ eine Falle fuer den naechsten Leser. */
setze('minute', (min + sk / 60) / 60);
setze('stunde', ((std % 12) + min / 60) / 12);
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 05dfc574..22110c8a 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+