Drei Ringe, klappbare Gruppen -- und die Calls-Seite endlich wirklich umgebaut

DU HATTEST RECHT (Bildschirmfoto 3). Beim letzten Mal habe ich an der
Calls-Seite nur das MATERIAL der Karten getauscht und die Aufstellung
gelassen. Drei Gruppen untereinander, und weil "Steht an" 27 Eintraege
hat, lagen die beiden anderen ausserhalb des Bildes -- man SAH die
Aenderung gar nicht, weil man nie so weit kam. Das war Lackieren, kein
Umbauen.

JETZT EIN BRETT AUS ZWEI SPALTEN. Die Gruppen sind eigenstaendige Tafeln
in einem Raster; "Protokoll fehlt" (kurz, dringend) und "Festgehalten"
(Archiv) liegen NEBEN der langen Liste statt darunter. `align-items:
start` ist dabei der Punkt: Ohne ihn waeren alle Tafeln so hoch wie die
hoechste, und neben der langen Liste stuenden zwei fast leere Kaesten.
Welche Tafel wo landet, entscheidet die Breite und nicht das Skript --
eine festgeschriebene Spalte waere eine Zahl, die beim naechsten Fenster
falsch ist.

Jede Tafel klappt zu, und der Zustand wird gemerkt. Vorgabe: "Festgehalten"
ist zu -- es ist das Archiv; wer die Seite oeffnet, will wissen, was
ansteht.

DIE GRUPPEN AUF DER STARTSEITE genauso. Der Kopf IST der Schalter, nicht
ein Dreieck daneben: Die ganze Zeile ist ein Ziel von 40 Pixeln statt
eines von vierzehn. <button> statt <div>, damit Tastaturbedienung und
Ansage nicht mit tabindex und role nachgebaut werden muessen. Gemerkt
wird je Gruppe UND je angesehener Rolle -- DogFather, der sich einen
Creator ansieht, hat dort eine andere Aufteilung im Kopf.

DIE UHR: drei Ringe statt zwei. Aussen die Stunde in Schwarzsilber, in
der Mitte die Minute in Blau, innen die Sekunde in Rot -- von aussen nach
innen immer schneller, so liest man eine Uhr ohne nachzudenken.

UND SIE IST SCHARF. Kein blur(), kein drop-shadow mehr auf den Boegen --
an der alten lag beides drauf, und der Vorwurf stimmte. Der Glanz kommt
jetzt aus dem VERLAUF: Echtes Metall glaenzt nicht, weil es leuchtet,
sondern weil es das Licht abwechselnd hell und dunkel zurueckwirft. Fuenf
Stopps statt zwei -- ein zweifarbiger Verlauf waere ein Farbverlauf,
erst der Wechsel ist Metall. Dazu `shape-rendering="geometricPrecision"`
(sonst rastert der Browser duenne Boegen grober) und Kappen auf `butt`
statt `round`: Eine runde Kappe steht ueber das Ende hinaus, bei null
Sekunden saehe man trotzdem einen Punkt.

Minute und Stunde laufen WEICH mit: die Minute bekommt die Sekunden
anteilig, die Stunde die Minuten. Ein Minutenring, der einmal pro Minute
springt, sieht aus wie eine haengende Anzeige.

Gruen: css-klassen (15), call-kategorien (17), start-ansicht (136),
handy (59), breiten (23), buehne (38), struktur (32).

NOCH OFFEN: der neue Kachelstil fuer die ganze Website und die Rolle
"Spicy Media".

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

workspace/start.html

@@ -9,11 +9,11 @@
 <meta name="theme-color" content="#0674b9" />
 <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=202609070423" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
 <!-- 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=202609070423" />
+<link rel="stylesheet" href="assets/css/heim.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -80,29 +80,61 @@
              geht von Rot nach Babyblau, der Sekundenring zurück. Wo der
              eine warm ist, ist der andere kühl -- so bleiben die beiden
              Ringe auseinanderzuhalten, auch wenn sie sich überlagern. -->
+        <!-- DREI RINGE (07.09.2026, Wunsch Filipe).
+
+             Aussen die STUNDE in Schwarzsilber, in der Mitte die MINUTE
+             in Blau, innen die SEKUNDE in Rot. Von aussen nach innen
+             immer schneller -- so liest man eine Uhr, ohne nachzudenken:
+             Der aeussere Ring bewegt sich fast nie, der innere staendig.
+
+             ALLES SCHARF. Kein blur() und kein drop-shadow auf den
+             Boegen. Ein Weichzeichner auf einer Linie macht sie nicht
+             edler, sondern unscharf -- und genau das war der Vorwurf.
+             Der Glanz im Silber entsteht aus dem VERLAUF selbst (hell,
+             dunkel, hell), nicht aus einem Schein darum herum. Genau so
+             glaenzt echtes Metall.
+
+             `shape-rendering="geometricPrecision"` steht bewusst dran:
+             Ohne das rastert der Browser duenne Boegen mit einer
+             schnelleren, groberen Methode. -->
         <div class="uhr" id="uhr" role="timer" aria-live="off">
-          <svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true">
+          <svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true"
+               shape-rendering="geometricPrecision">
             <defs>
-              <linearGradient id="uhr-lauf" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0%"   stop-color="#ff5f6d" />
-                <stop offset="52%"  stop-color="#c97ba8" />
-                <stop offset="100%" stop-color="#8fd8ff" />
+              <!-- Schwarzsilber: vier Stopps, nicht zwei. Ein Verlauf von
+                   Hell nach Dunkel ist ein Farbverlauf; erst der Wechsel
+                   hell-dunkel-hell-dunkel liest sich als geschliffenes
+                   Metall, weil eine gebogene Flaeche das Licht genau so
+                   zurueckwirft. -->
+              <linearGradient id="uhr-silber" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%"   stop-color="#f2f6fa" />
+                <stop offset="26%"  stop-color="#7d8794" />
+                <stop offset="48%"  stop-color="#dfe7ef" />
+                <stop offset="70%"  stop-color="#5b646f" />
+                <stop offset="100%" stop-color="#c8d2dc" />
               </linearGradient>
-              <linearGradient id="uhr-sekunde" x1="1" y1="1" x2="0" y2="0">
-                <stop offset="0%"   stop-color="#a8e4ff" />
-                <stop offset="100%" stop-color="#ff7b84" />
+              <linearGradient id="uhr-blau" x1="0" y1="1" x2="1" y2="0">
+                <stop offset="0%"   stop-color="#2f7fd4" />
+                <stop offset="50%"  stop-color="#63b8f5" />
+                <stop offset="100%" stop-color="#a8ddff" />
+              </linearGradient>
+              <linearGradient id="uhr-rot" x1="1" y1="0" x2="0" y2="1">
+                <stop offset="0%"   stop-color="#ff8a91" />
+                <stop offset="50%"  stop-color="#ff4d5c" />
+                <stop offset="100%" stop-color="#c22636" />
               </linearGradient>
             </defs>
-            <circle class="uhr__bahn" cx="50" cy="50" r="44" />
-            <circle class="uhr__minute" cx="50" cy="50" r="44" id="uhr-minute" />
-            <circle class="uhr__zeiger" cx="50" cy="50" r="44" id="uhr-zeiger" />
-            <!-- Der leuchtende Kopf am Ende des Sekundenbogens. Er wird
-                 GEDREHT statt neu berechnet -- eine Drehung ist eine
-                 Zahl, eine Position wären zwei plus Sinus und Kosinus. -->
-            <g class="uhr__kopf" id="uhr-kopf">
-              <circle class="uhr__kopf-schein" cx="50" cy="6" r="4.6" />
-              <circle class="uhr__kopf-kern"   cx="50" cy="6" r="2.1" />
-            </g>
+
+            <!-- Die Bahnen. Sie stehen immer da, damit man sieht, wie
+                 weit ein Ring noch zu laufen hat -- ein Bogen ohne Bahn
+                 ist ein Strich ohne Bezug. -->
+            <circle class="uhr__bahn" cx="50" cy="50" r="45.5" />
+            <circle class="uhr__bahn" cx="50" cy="50" r="38.5" />
+            <circle class="uhr__bahn" cx="50" cy="50" r="31.5" />
+
+            <circle class="uhr__stunde" cx="50" cy="50" r="45.5" id="uhr-stunde" />
+            <circle class="uhr__minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
+            <circle class="uhr__sekunde" cx="50" cy="50" r="31.5" id="uhr-sekunde" />
           </svg>
           <span class="uhr__skala" aria-hidden="true"></span>
           <span class="uhr__glas" aria-hidden="true"></span>
@@ -221,10 +253,10 @@
   </p>
 </main>
 
-<script src="assets/js/wahl.js?v=202609070423" defer></script>
-<script src="assets/js/bereiche.js?v=202609070423" defer></script>
-<script src="assets/js/kopf.js?v=202609070423" defer></script>
-<script src="assets/js/glocke.js?v=202609070423" defer></script>
-<script src="assets/js/start.js?v=202609070423" defer></script>
+<script src="assets/js/wahl.js?v=202609070433" defer></script>
+<script src="assets/js/bereiche.js?v=202609070433" defer></script>
+<script src="assets/js/kopf.js?v=202609070433" defer></script>
+<script src="assets/js/glocke.js?v=202609070433" defer></script>
+<script src="assets/js/start.js?v=202609070433" defer></script>
 </body>
 </html>