diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index 9fe067cf..9f39577f 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -277,27 +277,38 @@
}
.uhr__bahn { stroke: rgba(150, 186, 220, .09); stroke-width: 3; }
-/* AUSSEN: die Stunde in Schwarzsilber. Am breitesten und am ruhigsten --
- sie bewegt sich in fuenf Minuten um ein halbes Grad. */
-.uhr__stunde {
- stroke: url(#uhr-silber);
- stroke-width: 3.4;
- stroke-dasharray: 285.88;
+/* AUSSEN: die SEKUNDE in Rot, auf der laengsten Bahn (07.09.2026
+ gedreht, Wunsch Filipe: "die minuten in der mitte und sekunden
+ aussen").
+
+ Das ist die Anordnung eines Chronographen und nicht die eines
+ Fortschrittsbalkens: Der schnellste Zeiger laeuft aussen, weil man
+ Bewegung dort am besten sieht -- und der langsamste innen, wo eine
+ kleine Drehung schon viel bedeutet.
+
+ DIE ZAHLEN GEHOEREN ZUM RADIUS. Ein vertauschter Ring ohne
+ vertauschte Umfaenge sieht aus wie eine haengende Uhr: Der Bogen
+ endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und
+ nicht geschaetzt. */
+.uhr__sekunde {
+ stroke: url(#uhr-rot);
+ stroke-width: 2.6;
+ stroke-dasharray: 285.88; /* r = 45.5 */
stroke-dashoffset: 285.88;
}
/* MITTE: die Minute in Blau. */
.uhr__minute {
stroke: url(#uhr-blau);
stroke-width: 3;
- stroke-dasharray: 241.90;
+ stroke-dasharray: 241.90; /* r = 38.5 */
stroke-dashoffset: 241.90;
}
-/* INNEN: die Sekunde in Rot. Am duennsten -- sie laeuft am schnellsten,
- und eine schnelle dicke Linie wird unruhig. */
-.uhr__sekunde {
- stroke: url(#uhr-rot);
- stroke-width: 2.4;
- stroke-dasharray: 197.92;
+/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten --
+ sie bewegt sich in fuenf Minuten um ein halbes Grad. */
+.uhr__stunde {
+ stroke: url(#uhr-silber);
+ stroke-width: 3.6;
+ stroke-dasharray: 197.92; /* r = 31.5 */
stroke-dashoffset: 197.92;
}
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 08f83d7a..bb593aeb 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -749,7 +749,22 @@ body.start > main { position: relative; z-index: 1; }
margin: 0; font-size: .76rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise);
}
-.gruppe__unter { font-size: .78rem; color: var(--text-still); }
+/* --text-leise (#94a5bb) statt --text-still (#7f8fa6), 07.09.2026.
+
+ Diese Zeile steht als einzige Beschriftung OHNE Karte direkt auf dem
+ Buehnenbild. Solange die Gruppen dort standen, wo das Bild dunkel
+ ist, ging der leiseste Ton gut. Mit der fuenften Rolle (Spicy Media)
+ rutschte auf personen.html alles eine Zeile nach unten -- und die
+ DogFather-Beschreibung landete auf rgb(46, 44, 47): 4,21:1 statt der
+ noetigen 4,5.
+
+ Der Ausloeser war also nicht die Farbe, sondern eine Verschiebung.
+ Genau deshalb bekommt ein Text, dessen Untergrund ein FOTO ist, nicht
+ den leisesten Ton: Was heute passt, passt nach der naechsten
+ eingefuegten Zeile nicht mehr. Jetzt 5,5:1 -- mit Luft.
+
+ Gemessen von pruef-buehne an echten Bildpunkten. */
+.gruppe__unter { font-size: .78rem; color: var(--text-leise); }
.kacheln {
list-style: none; margin: 0; padding: 0;
@@ -4533,3 +4548,168 @@ body[data-fremde-sicht="ja"]::after {
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.glocke--kachel .glocke__zeichen { width: 20px; height: 20px; }
+
+
+/* =====================================================================
+ EIN MATERIAL FÜR DIE GANZE WEBSITE (07.09.2026)
+
+ Filipe: "ICH WILL DASS DU DIE KACHELN DER KOMPLETTEN WEBSITE KOMPLETT
+ VERÄNDERST ... SEHR HOCHWERTIG UND EPISCH ... EINE EINZIGARTIGE
+ WEBSITE ... PERFEKT AUF DEM PC UND AUF DEM HANDY."
+
+ ---------------------------------------------------------------------
+ WARUM DAS BISHER NICHT GEKLAPPT HAT
+
+ Die Startseite hat seit heute ein Material -- beleuchtete Platte,
+ Lichtkante, Schatten, Körnung. Die anderen sechzehn Seiten hatten
+ weiterhin `background: var(--flaeche)` und einen Rand: flache
+ Rechtecke. Man wechselte die Seite und fiel aus einer Oberfläche in
+ eine andere.
+
+ Ich habe das bisher Seite für Seite nachgezogen -- und genau deshalb
+ war es nie fertig. Bei fünfundvierzig Stellen ist das kein Weg.
+
+ ---------------------------------------------------------------------
+ EINE STELLE, NICHT FÜNFUNDVIERZIG
+
+ Die Liste unten ist nicht erfunden, sie ist GEMESSEN: Es sind genau
+ die Klassen, die in den siebzehn Stildateien `var(--flaeche)` als
+ Kartenfläche benutzen. Wer eine neue Karte baut und diesen Token
+ nimmt, gehört dazu -- und sollte hier eingetragen werden.
+
+ `:where()` ist der entscheidende Kniff: Es hat SPEZIFITÄT NULL.
+ Dadurch überschreibt diese Regel nichts, was eine Seite selbst
+ festlegt -- eine Warnkarte bleibt rot, eine Spalte behält ihre
+ Statusfarbe, die Kacheln der Startseite ihre eigene Form. Sie legt nur
+ den Boden, auf dem alle stehen. Ohne `:where()` müsste ich an
+ dreißig Stellen `!important` schreiben oder Reihenfolgen sortieren --
+ beides Wege, die beim nächsten Umbau kippen.
+
+ ---------------------------------------------------------------------
+ WAS DAS MATERIAL AUSMACHT
+
+ GEWICHT Zwei Schatten: ein enger, dunkler direkt darunter und
+ ein weiter, weicher. Ein einzelner sieht immer nach
+ Aufkleber aus.
+ MATERIALSTÄRKE Licht oben, Schatten unten -- beide innen. Nur die
+ obere Kante ergibt einen aufgeklebten Strich; erst
+ beide zusammen ergeben ein Blech.
+ TIEFE Ein Verlauf von oben nach unten. Eine einfarbige
+ Fläche ist Papier.
+ KÖRNUNG Auf einer eigenen Ebene mit `overlay` und 3 % --
+ genau der Fehler, den ich heute zweimal gemacht habe:
+ Körnung auf derselben Ebene wie ein Glanz erbt dessen
+ Deckkraft und wird zum grauen Schleier.
+
+ AUF DEM HANDY DASSELBE MATERIAL, nur flacher: Schatten kosten dort
+ Rechenzeit und bringen wenig, weil ohnehin nichts nebeneinander liegt.
+ ===================================================================== */
+
+:where(
+ .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand,
+ .ki-kasten, .hinweis, .k-ansicht, .k-serie, .k-abo, .k-listentag,
+ .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .schulung__neu,
+ .nachricht, .creator, .summe, .wert, .pdf, .pdf-ablage, .suchleiste,
+ .person, .kk, .fortschritt, .punkt, .nur-lesen, .todo-liste li,
+ .unterweisung, .warnkarte
+ /* `.profil-gruppe` stand hier und existiert nirgends -- ich hatte den
+ Namen aus dem Kopf geschrieben statt aus der Datei. pruef-struktur
+ hat es als totes CSS gemeldet. Die Karten auf profil.html heissen
+ `.gruppe`, und genau dieser Name gehoert NICHT in diese Liste: Auf
+ der Startseite heissen die Kachelgruppen ebenso, und die haetten
+ dann ploetzlich eine Kartenflaeche. Zwei Dinge mit demselben
+ Klassennamen sind der Grund, warum man solche Listen misst statt
+ sie zu raten. */
+) {
+ position: relative;
+ /* DUNKLER ALS DER ERSTE ANLAUF (07.09.2026, gemessen).
+
+ Zuerst stand hier rgba(26, 34, 49, .92) -- heller als das
+ `var(--flaeche)`, das ersetzt wurde. Auf personen.html landete die
+ Rollenbeschreibung damit auf rgb(46, 44, 47) und kam auf 4,21:1
+ statt der noetigen 4,5. Ein Material, das die ganze Website
+ aufhellt, hellt auch jeden Text darauf auf -- und das faellt an der
+ leisesten Schrift zuerst auf, nicht an der lautesten.
+
+ Jetzt derselbe Verlauf wie bei den Kacheln, die gemessen bestehen. */
+ background:
+ linear-gradient(168deg,
+ rgba(20, 27, 40, .94) 0%,
+ rgba(11, 15, 24, .95) 62%,
+ rgba(8, 11, 18, .95) 100%);
+ border: 1px solid rgba(150, 186, 220, .12);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .075),
+ inset 0 -1px 0 rgba(0, 0, 0, .42),
+ 0 2px 4px -2px rgba(0, 0, 0, .5),
+ 0 12px 28px -18px rgba(0, 0, 0, .85);
+}
+
+/* Die Körnung. Eigene Ebene, `overlay`, 3 % -- und `pointer-events:
+ none`, sonst läge eine unsichtbare Fläche über jedem Knopf in jeder
+ Karte der ganzen Website. */
+:where(
+ .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand,
+ .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu,
+ .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung
+)::after {
+ content: "";
+ position: absolute; inset: 0;
+ pointer-events: none;
+ border-radius: inherit;
+ background-image: var(--koernung);
+ background-size: 140px 140px;
+ opacity: .03;
+ mix-blend-mode: overlay;
+ z-index: 0;
+}
+
+/* Karten, die man anklickt, kommen beim Zeigen NÄHER -- sie werden
+ nicht heller. So verhält sich ein Gegenstand, den man anhebt, und
+ deshalb wirkt es echt, ohne dass etwas blinkt. */
+:where(a, button):where(.datei, .pdf, .creator, .person, .kk, .call):hover,
+:where(.datei, .pdf, .creator, .person, .kk):hover {
+ transform: translateY(-2px);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .10),
+ inset 0 -1px 0 rgba(0, 0, 0, .42),
+ 0 4px 9px -4px rgba(0, 0, 0, .55),
+ 0 18px 36px -20px rgba(0, 0, 0, .9);
+}
+:where(.datei, .pdf, .creator, .person, .kk) {
+ transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
+}
+
+@media (max-width: 620px) {
+ /* Flacher auf dem Handy: Nebeneinander liegt dort ohnehin nichts, und
+ große weiche Schatten kosten bei jedem Scrollen Rechenzeit. Das
+ Material bleibt -- nur seine Höhe über dem Grund sinkt. */
+ :where(
+ .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand,
+ .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu,
+ .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung
+ ) {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .07),
+ inset 0 -1px 0 rgba(0, 0, 0, .4),
+ 0 4px 12px -8px rgba(0, 0, 0, .8);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ :where(.datei, .pdf, .creator, .person, .kk):hover { transform: none; }
+}
+@media (forced-colors: active) {
+ /* Im Kontrastmodus zählt ausschließlich die Kante. Verläufe, Schatten
+ und Körnung sind dort nicht nur wirkungslos, sondern schädlich. */
+ :where(
+ .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand,
+ .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu,
+ .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung
+ ) { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
+ :where(
+ .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand,
+ .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu,
+ .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung
+ )::after { display: none; }
+}
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index 120d5bdf..07510aac 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -356,7 +356,7 @@
/* Drei Umfaenge, ausgerechnet und nicht als Formel im Stil: Aendert
jemand einen Radius im HTML, faellt der Ring sofort auf, statt sich
stillschweigend zu verrechnen. U = 2 * pi * r */
- const UMFANG = { stunde: 285.88, minute: 241.90, sekunde: 197.92 }; // r = 45.5 / 38.5 / 31.5
+ const UMFANG = { sekunde: 285.88, minute: 241.90, stunde: 197.92 }; // r = 45.5 / 38.5 / 31.5
function uhrStarten() {
const zeit = $('uhr-zeit'), sek = $('uhr-sek');
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 0cdfa329..47b8d912 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,9 +9,9 @@
-
-
-
+
+
+
@@ -211,10 +211,10 @@
-
-
-
-
-
+
+
+
+
+