diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css
index be3d7f4b..bbc75312 100644
--- a/workspace/assets/css/calls.css
+++ b/workspace/assets/css/calls.css
@@ -344,3 +344,132 @@
 @media (forced-colors: active) {
   .call { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
 }
+
+
+/* =====================================================================
+   DAS BRETT — zwei Spalten statt einer Liste (07.09.2026)
+
+   Filipe: "immer noch gleich aufgestellt, man kann sogar bestimmt zwei
+   kategorien neben einander legen ... wenn ich sage komplett aendern
+   dan komplett aendern."
+
+   Er hatte recht. Beim letzten Mal habe ich nur das Material der Karten
+   getauscht -- die Aufstellung blieb eine Spalte, in der drei Gruppen
+   untereinander standen. Und weil "Steht an" siebenundzwanzig Eintraege
+   hat, lagen die beiden anderen ausserhalb des Bildes: Man SAH die
+   Aenderung gar nicht, weil man nie so weit kam.
+
+   Jetzt sind die Gruppen eigenstaendige Tafeln in einem Raster. Die
+   kurze, dringende ("Protokoll fehlt") und das Archiv ("Festgehalten")
+   liegen NEBEN der langen Liste statt darunter.
+
+   `align-items: start` ist dabei der entscheidende Punkt: Ohne ihn
+   waeren alle Tafeln so hoch wie die hoechste, und neben der langen
+   Liste stuenden zwei fast leere Kaesten. So endet jede Tafel dort, wo
+   ihr Inhalt endet.
+
+   KEINE feste Spaltenzuweisung im Skript. Welche Tafel wo landet,
+   entscheidet die Breite -- eine im Skript festgeschriebene Spalte waere
+   eine Zahl, die beim naechsten Fenster falsch ist.
+   ===================================================================== */
+.call-brett {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
+  gap: 16px;
+  align-items: start;
+}
+/* Die lange Liste bekommt die erste Spalte und behaelt sie. Ohne diese
+   Zeile wandert sie je nach Anzahl mal links, mal rechts -- und eine
+   Oberflaeche, deren Aufbau sich mit dem Inhalt aendert, lernt man nie. */
+.call-brett .gruppe[data-gruppe="anstehend"] { grid-row: span 2; }
+
+.call-brett .gruppe {
+  margin: 0;
+  padding: 4px 14px 14px;
+  border: 1px solid rgba(150, 186, 220, .12);
+  border-radius: 4px 18px 18px 4px;
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--tafel-ton, var(--akzent)) 16%, transparent) 0%,
+      color-mix(in srgb, var(--tafel-ton, var(--akzent)) 5%, transparent) 12%,
+      transparent 34%),
+    linear-gradient(163deg,
+      rgba(21, 28, 41, .95) 0%,
+      rgba(11, 15, 24, .95) 62%,
+      rgba(8, 11, 18, .95) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .075),
+    inset 0 -1px 0 rgba(0, 0, 0, .45),
+    0 2px 4px -2px rgba(0, 0, 0, .5),
+    0 14px 30px -20px rgba(0, 0, 0, .88);
+  overflow: hidden;
+  position: relative;
+}
+/* Jede Tafel traegt die Farbe ihres Zustands in einer Schiene links --
+   dieselbe Sprache wie ueberall: Bernstein wartet, Blau steht an, Gruen
+   ist erledigt. */
+.call-brett .gruppe[data-gruppe="offen"]      { --tafel-ton: #f0c48a; }
+.call-brett .gruppe[data-gruppe="anstehend"]  { --tafel-ton: var(--akzent); }
+.call-brett .gruppe[data-gruppe="erledigt"]   { --tafel-ton: #79d1a2; }
+.call-brett .gruppe::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--tafel-ton) 85%, transparent) 0%,
+    color-mix(in srgb, var(--tafel-ton) 35%, transparent) 100%);
+}
+
+/* Der Kopf ist der Schalter -- <button>, also muessen die Vorgaben des
+   Browsers zurueck (eigene Schrift, Rand, zentrierter Text). */
+.call-brett .stufe__kopf {
+  appearance: none; -webkit-appearance: none;
+  width: 100%;
+  font: inherit; color: inherit; text-align: left;
+  border: 0; background: none; cursor: pointer;
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 2px;
+  border-radius: 10px;
+  transition: background var(--tempo);
+}
+.call-brett .stufe__kopf:hover { background: rgba(255, 255, 255, .04); }
+.call-brett .stufe__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.call-brett .stufe__titel { margin: 0; }
+.call-brett .stufe__zahl { margin-left: auto; }
+.call-brett .gruppe__pfeil {
+  width: 16px; height: 16px; flex: none;
+  color: var(--text-still);
+  transition: transform var(--tempo);
+}
+.call-brett .gruppe[data-zu="ja"] .gruppe__pfeil { transform: rotate(-90deg); }
+.call-brett .gruppe[data-zu="ja"] { padding-bottom: 4px; }
+.call-brett .gruppe__karten { margin-top: 0; }
+/* Die Karten stehen jetzt IN einer Tafel -- sie brauchen keine zweite
+   schwere Flaeche, sonst liegt Kasten in Kasten. Leichter Grund, gleiche
+   Schiene. */
+.call-brett .call {
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--c) 14%, transparent) 0%,
+      transparent 38%),
+    rgba(255, 255, 255, .028);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
+}
+.call-brett .call:hover {
+  transform: none;
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--c) 20%, transparent) 0%,
+      transparent 42%),
+    rgba(255, 255, 255, .05);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .call-brett .stufe__kopf, .call-brett .gruppe__pfeil { transition: none; }
+}
+@media (max-width: 900px) {
+  /* Eine Spalte -- und die Reihenspanne muss weg, sonst reisst sie in
+     der einspaltigen Ansicht eine leere Zeile auf. */
+  .call-brett .gruppe[data-gruppe="anstehend"] { grid-row: auto; }
+}
+@media (forced-colors: active) {
+  .call-brett .gruppe { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
+}
diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index 8c78814e..9fe067cf 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -174,7 +174,7 @@
    -------------------------------------------------------------------- */
 .uhr {
   position: relative;
-  width: 112px; height: 112px; flex: none;
+  width: 124px; height: 124px; flex: none;
   display: grid; place-items: center;
   border-radius: 50%;
   /* SCHICHT 1: der Metallrand. Ein Verlauf von hell (oben links, wo das
@@ -213,17 +213,21 @@
    sechzig Elementen mehr im Baum. Jeder fuenfte Strich ist kraeftiger
    -- das ist der Unterschied zwischen "Punkte im Kreis" und "Skala". */
 .uhr__skala {
-  position: absolute; inset: 9px; border-radius: 50%;
+  /* Die Skala liegt GANZ AUSSEN, jenseits des Stundenrings -- zwischen
+     den Ringen waere sie ein vierter Kreis und der Grund, warum das
+     Zifferblatt unruhig wirkt. Zwoelf kraeftige Striche fuer die
+     Stunden, sechzig feine dazwischen. */
+  position: absolute; inset: 1px; border-radius: 50%;
   background:
     repeating-conic-gradient(from 0deg,
-      rgba(255, 145, 155, .55) 0deg 1deg,
-      transparent 1deg 30deg),
+      rgba(226, 234, 244, .70) 0deg 0.8deg,
+      transparent 0.8deg 30deg),
     repeating-conic-gradient(from 0deg,
-      rgba(150, 186, 220, .26) 0deg 0.5deg,
-      transparent 0.5deg 6deg);
-  -webkit-mask: radial-gradient(circle, transparent 0 74%, #000 74% 86%, transparent 86%);
-  mask: radial-gradient(circle, transparent 0 74%, #000 74% 86%, transparent 86%);
-  opacity: .65;
+      rgba(150, 186, 220, .22) 0deg 0.4deg,
+      transparent 0.4deg 6deg);
+  -webkit-mask: radial-gradient(circle, transparent 0 92%, #000 92% 99%, transparent 99%);
+  mask: radial-gradient(circle, transparent 0 92%, #000 92% 99%, transparent 99%);
+  opacity: .8;
   pointer-events: none; z-index: 1;
 }
 /* SCHICHT 3: das Glas. Eine Spiegelung von oben links ueber die Kuppe,
@@ -246,38 +250,57 @@
   z-index: 2;
   overflow: visible;
 }
-.uhr__bahn, .uhr__minute, .uhr__zeiger {
-  fill: none; stroke-linecap: round;
-  stroke-dasharray: 276.46;
+/* DREI RINGE, ALLE SCHARF (07.09.2026).
+
+   Filipe: "die minuten blau, [die stunden] schwarzsilber glaenzend und
+   die sekunden rot ... soll null unscharf sein, sehr schoen praezise."
+
+   KEIN blur(), KEIN drop-shadow auf den Boegen. Ein Weichzeichner auf
+   einer Linie macht sie nicht edler, sondern unscharf -- genau das war
+   der Vorwurf, und er stimmte: An der alten Uhr lag ein blur(1.2px) auf
+   dem Schein und ein drop-shadow auf dem Sekundenbogen.
+
+   Der GLANZ entsteht stattdessen aus dem Verlauf selbst. Echtes Metall
+   glaenzt nicht, weil es leuchtet, sondern weil es das Licht an
+   verschiedenen Stellen verschieden zurueckwirft: hell, dunkel, hell,
+   dunkel. Genau das machen die fuenf Stopps des Silberverlaufs im SVG.
+   Ein zweifarbiger Verlauf waere ein Farbverlauf; erst der Wechsel ist
+   Metall.
+
+   Die Kappen sind BUTT und nicht rund. Eine runde Kappe steht ueber das
+   Ende hinaus -- bei "null Sekunden" saehe man dann trotzdem einen
+   Punkt, und die Anzeige waere um zwei Grad falsch. Praezise heisst
+   auch: nichts anzeigen, wo nichts ist. */
+.uhr__bahn, .uhr__stunde, .uhr__minute, .uhr__sekunde {
+  fill: none;
+  stroke-linecap: butt;
 }
-.uhr__bahn { stroke: rgba(150, 186, 220, .10); stroke-width: 4; }
-/* Der Stundenstand: breit und gedeckt, im Verlauf Rot -> Babyblau. Er
-   aendert sich einmal pro Minute und darf nicht um Aufmerksamkeit
-   bitten -- deshalb kein Leuchten. */
+.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;
+  stroke-dashoffset: 285.88;
+}
+/* MITTE: die Minute in Blau. */
 .uhr__minute {
-  stroke: url(#uhr-lauf);
-  stroke-width: 4;
-  stroke-dashoffset: 276.46;
-  opacity: .72;
+  stroke: url(#uhr-blau);
+  stroke-width: 3;
+  stroke-dasharray: 241.90;
+  stroke-dashoffset: 241.90;
 }
-/* Die Sekunde: schmaler, heller, gegenlaeufig gefaerbt und mit einem
-   Hauch Leuchten. */
-.uhr__zeiger {
-  stroke: url(#uhr-sekunde); stroke-width: 2;
-  stroke-dashoffset: 276.46;
-  filter: drop-shadow(0 0 3px rgba(168, 228, 255, .75));
-}
-/* Der Kopf am Ende des Sekundenbogens -- ein Punkt, der mitlaeuft.
-   Das ist die eine Stelle, an der sich sichtbar etwas BEWEGT, und
-   deshalb die, an der das Auge merkt, dass die Seite lebt. */
-.uhr__kopf-schein {
-  fill: rgba(168, 228, 255, .28);
-  filter: blur(1.2px);
-}
-.uhr__kopf-kern {
-  fill: #eaf7ff;
-  filter: drop-shadow(0 0 4px rgba(168, 228, 255, .95));
+/* 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;
+  stroke-dashoffset: 197.92;
 }
+
 .uhr__mitte {
   position: relative; z-index: 4;
   display: grid; justify-items: center; gap: 2px; line-height: 1;
@@ -331,7 +354,7 @@
      keine Zeile mehr übrig. */
   .willkommen { padding: 18px 16px; }
   .willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
-  .uhr { width: 88px; height: 88px; }
+  .uhr { width: 96px; height: 96px; }
   .uhr__zeit { font-size: 1.18rem; }
 }
 
@@ -339,9 +362,77 @@
   /* Die Uhr springt ohnehin -- hier gibt es nichts abzuschalten. Die
      Zeile steht trotzdem da, damit der nächste, der einen weichen
      Zeiger einbaut, sie findet. */
-  .uhr__zeiger, .uhr__minute { transition: none; }
+  .uhr__stunde, .uhr__minute, .uhr__sekunde { transition: none; }
 }
 @media (forced-colors: active) {
   .uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
   .uhr__skala, .uhr__glas { display: none; }
 }
+
+/* =====================================================================
+   GRUPPEN LASSEN SICH ZUKLAPPEN (07.09.2026)
+
+   Wunsch Filipe: "diese kategorien soll man auch zu und aufmachen
+   koennen so wie es einem lieb ist gerade."
+
+   DIE UEBERSCHRIFT IST DER SCHALTER. Ein kleines Dreieck daneben waere
+   ein Ziel von 14 Pixeln; die ganze Zeile ist eines von 40. Deshalb ist
+   der Kopf ein <button> und nicht ein <div> mit einem Knopf darin --
+   damit kommt auch die Tastaturbedienung geschenkt.
+
+   Ein Knopf bringt allerdings die Vorgaben des Browsers mit (eigene
+   Schrift, eigener Rand, zentrierter Text). Die muessen alle
+   zurueckgesetzt werden, sonst sieht die Ueberschrift wie eine
+   Schaltflaeche aus -- und genau das soll sie NICHT: Sie soll aussehen
+   wie vorher und sich nur anders anfuehlen.
+   ===================================================================== */
+.gruppe__kopf {
+  /* Alles, was ein <button> mitbringt, wieder aus. */
+  appearance: none; -webkit-appearance: none;
+  width: 100%;
+  font: inherit; color: inherit; text-align: left;
+  border: 0; background: none;
+  cursor: pointer;
+  /* Und der Aufbau von vorher. */
+  position: relative;
+  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
+  margin-bottom: 14px; padding: 6px 4px 10px;
+  border-radius: 10px;
+  transition: background var(--tempo);
+}
+.gruppe__kopf:hover { background: rgba(255, 255, 255, .035); }
+.gruppe__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* Die Zahl sagt, was hinter einer zugeklappten Gruppe steckt. Sie steht
+   ganz rechts, direkt vor dem Pfeil -- dort sucht man sie. */
+.gruppe__zahl {
+  margin-left: auto;
+  min-width: 22px; padding: 1px 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .06);
+  color: var(--text-still);
+  font-size: .74rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.gruppe__pfeil {
+  width: 16px; height: 16px; flex: none;
+  color: var(--text-still);
+  transition: transform var(--tempo), color var(--tempo);
+}
+.gruppe__kopf:hover .gruppe__pfeil { color: var(--text); }
+/* Zugeklappt zeigt der Pfeil nach rechts -- die Richtung, in die es
+   geht, wenn man drueckt. */
+.gruppe[data-zu="ja"] .gruppe__pfeil { transform: rotate(-90deg); }
+
+/* Eine zugeklappte Gruppe rueckt zusammen: Der Abstand, den die Kacheln
+   gebraucht haben, gehoert ihnen und nicht der Ueberschrift. */
+.gruppe[data-zu="ja"] { margin-bottom: 10px; }
+.gruppe[data-zu="ja"] .gruppe__kopf { margin-bottom: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .gruppe__kopf, .gruppe__pfeil { transition: none; }
+}
+@media (forced-colors: active) {
+  .gruppe__kopf { border: 1px solid CanvasText; }
+}
diff --git a/workspace/assets/js/calls.js b/workspace/assets/js/calls.js
index bf5ca964..85885871 100644
--- a/workspace/assets/js/calls.js
+++ b/workspace/assets/js/calls.js
@@ -467,15 +467,72 @@
       return;
     }
 
+    /* ===================================================================
+       EIN BRETT AUS ZWEI SPALTEN, KEINE LISTE (07.09.2026)
+
+       Filipe: "du hast gesagt hast die seite umgeaendert hast du aber
+       nicht, immer noch gleich aufgestellt, man kann sogar bestimmt zwei
+       kategorien neben einander legen."
+
+       Er hatte recht -- ich hatte beim letzten Mal nur das MATERIAL der
+       Karten getauscht und die Aufstellung gelassen. Die drei Gruppen
+       standen weiter untereinander, und weil "Steht an" siebenundzwanzig
+       Eintraege hat, lagen die beiden anderen ausserhalb des Bildes.
+
+       Jetzt ist es ein Brett: Die Gruppen sind eigenstaendige Tafeln in
+       einem Raster mit zwei Spalten. "Protokoll fehlt" (kurz, dringend)
+       und "Festgehalten" (Archiv) landen dadurch NEBEN der langen
+       Liste statt darunter -- man sieht alle drei auf einmal.
+
+       Die Zuordnung macht das CSS ueber die Spaltenbreite, nicht dieses
+       Skript. Eine hier festgeschriebene Spalte waere eine Zahl, die
+       beim naechsten Fenster falsch ist. */
+    ziel.className = 'call-brett';
+
     for (const g of GRUPPEN) {
       const liste = daten[g.schluessel];
       if (!liste.length) continue;
       const s = el('section', 'gruppe');
       s.dataset.gruppe = g.schluessel;
-      const kopf = el('div', 'stufe__kopf');
+
+      /* JEDE TAFEL LAESST SICH ZUKLAPPEN, und der Zustand wird gemerkt
+         ("so wie es einem lieb ist gerade"). Der Kopf ist der Schalter,
+         nicht ein Dreieck daneben -- die ganze Zeile ist ein Ziel von
+         40 Pixeln statt eines von vierzehn.
+
+         Vorgabe: "Festgehalten" ist zu. Es ist das Archiv; wer die Seite
+         oeffnet, will wissen, was ANSTEHT. Die anderen beiden stehen
+         offen. Wer es anders will, klickt einmal -- und es bleibt so. */
+      const kopf = el('button', 'stufe__kopf');
+      kopf.type = 'button';
       kopf.append(el('h2', 'stufe__titel', g.titel), el('span', 'stufe__zahl', String(liste.length)));
+      const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      pfeil.setAttribute('class', 'gruppe__pfeil');
+      pfeil.setAttribute('viewBox', '0 0 24 24');
+      pfeil.setAttribute('aria-hidden', 'true');
+      pfeil.innerHTML = '<path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor"'
+        + ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>';
+      kopf.append(pfeil);
       s.append(kopf);
-      if (g.frage) s.append(el('p', 'block__frage', g.frage));
+
+      const koerper = el('div', 'gruppe__koerper');
+      if (g.frage) koerper.append(el('p', 'block__frage', g.frage));
+
+      const schluessel = `calls:${g.schluessel}`;
+      let zu = g.schluessel === 'erledigt';
+      try {
+        const gemerkt = localStorage.getItem(schluessel);
+        if (gemerkt) zu = gemerkt === 'zu';
+      } catch { /* ohne Ablage bleibt die Vorgabe */ }
+      const stand = (istZu) => {
+        s.dataset.zu = istZu ? 'ja' : 'nein';
+        kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true');
+        koerper.hidden = istZu;
+      };
+      kopf.addEventListener('click', () => {
+        zu = !zu; stand(zu);
+        try { localStorage.setItem(schluessel, zu ? 'zu' : 'auf'); } catch { /* egal */ }
+      });
 
       /* DIE ANSTEHENDEN WERDEN NACH ZEITRAUM UNTERTEILT (06.09.2026).
          Die anderen beiden Gruppen nicht: "Protokoll fehlt" ist eine
@@ -484,12 +541,14 @@
          aussieht, aber nur an einer Stelle etwas nützt, verwirrt an den
          anderen. */
       if (g.schluessel === 'anstehend' && liste.length > 4) {
-        s.append(...zeitraumBloecke(liste, g.schluessel));
+        koerper.append(...zeitraumBloecke(liste, g.schluessel));
       } else {
         const box = el('div', 'gruppe__karten');
         for (const c of liste) box.append(karte(c, g.schluessel));
-        s.append(box);
+        koerper.append(box);
       }
+      s.append(koerper);
+      stand(zu);
       ziel.append(s);
     }
   }
diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js
index ca752080..bc992a5a 100644
--- a/workspace/assets/js/start.js
+++ b/workspace/assets/js/start.js
@@ -139,13 +139,51 @@
       if (!meine.length) continue;
 
       const abschnitt = el('section', 'gruppe');
-      const kopf = el('div', 'gruppe__kopf');
       /* Manche Gruppen heißen für einen Creator anders -- siehe GRUPPEN. */
       const istCreator = zeigt.rolle === 'creator';
+
+      /* ===============================================================
+         JEDE GRUPPE LAESST SICH ZUKLAPPEN (07.09.2026)
+
+         Wunsch Filipe: "diese kategorien soll man auch zu und aufmachen
+         koennen so wie es einem lieb ist gerade."
+
+         DER KOPF IST DER SCHALTER, nicht ein Knopf daneben. Eine
+         Ueberschrift, neben der ein kleines Dreieck sitzt, laedt zum
+         Zielen ein; eine Ueberschrift, die SELBST der Schalter ist,
+         trifft man immer. Deshalb <button> statt <div> -- damit kommt
+         die Tastaturbedienung und die Ansage fuer Vorleseprogramme
+         geschenkt, statt sie mit tabindex und role nachzubauen.
+
+         DER ZUSTAND WIRD GEMERKT. "So wie es einem lieb ist" heisst:
+         Er muss den naechsten Aufruf ueberleben. Gespeichert wird je
+         Gruppe und je ANGESEHENER Rolle -- DogFather, der sich einen
+         Creator ansieht, hat dort eine andere Aufteilung im Kopf als
+         auf seiner eigenen Seite.
+
+         Faellt localStorage aus (privates Fenster, volle Ablage), ist
+         das kein Fehler: Dann steht eben alles offen. Ein Merker, der
+         die Seite mitreisst, waere schlimmer als ein vergessener. */
+      const kopf = el('button', 'gruppe__kopf');
+      kopf.type = 'button';
+      const schluessel = `gruppe:${zeigt.rolle}:${gruppe.name}`;
+      let zu = false;
+      try { zu = localStorage.getItem(schluessel) === 'zu'; } catch { zu = false; }
+
       kopf.append(el('h2', 'gruppe__name',
         (istCreator && gruppe.nameCreator) || gruppe.name));
       kopf.append(el('span', 'gruppe__unter',
         (istCreator && gruppe.unterCreator) || gruppe.unter));
+      /* Die Zahl sagt, was hinter einer zugeklappten Gruppe steckt --
+         ohne sie klappt man drei Gruppen auf, um zu suchen. */
+      kopf.append(el('span', 'gruppe__zahl', String(meine.length)));
+      const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      pfeil.setAttribute('class', 'gruppe__pfeil');
+      pfeil.setAttribute('viewBox', '0 0 24 24');
+      pfeil.setAttribute('aria-hidden', 'true');
+      pfeil.innerHTML = '<path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor"'
+        + ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>';
+      kopf.append(pfeil);
       abschnitt.append(kopf);
 
       const liste = el('ul', 'kacheln');
@@ -216,6 +254,23 @@
         liste.append(li);
       }
       abschnitt.append(liste);
+
+      /* Das Aufklappen laeuft ueber ein Merkmal am Abschnitt, nicht ueber
+         `hidden` an der Liste: So kann das CSS den Uebergang zeichnen
+         und den Pfeil drehen, ohne dass das Skript etwas davon wissen
+         muss. */
+      const stand = (istZu) => {
+        abschnitt.dataset.zu = istZu ? 'ja' : 'nein';
+        kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true');
+        liste.hidden = istZu;
+      };
+      stand(zu);
+      kopf.addEventListener('click', () => {
+        zu = !zu;
+        stand(zu);
+        try { localStorage.setItem(schluessel, zu ? 'zu' : 'auf'); } catch { /* egal */ }
+      });
+
       ziel.append(abschnitt);
     }
     /* KEIN eigener Aufruf mehr: kopf.js stellt das Licht einmal fuer das
@@ -294,32 +349,57 @@
      Sekunden weiter. Stattdessen wird jedes Mal bis zur NÄCHSTEN vollen
      Sekunde gewartet -- die Anzeige bleibt für immer im Takt der
      Systemuhr. */
-  const UHR_UMFANG = 276.46;
+  /* 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
+
   function uhrStarten() {
     const zeit = $('uhr-zeit'), sek = $('uhr-sek');
-    const zeiger = $('uhr-zeiger'), minute = $('uhr-minute');
-    if (!zeit || !zeiger) return;
+    const ringe = {
+      stunde: $('uhr-stunde'), minute: $('uhr-minute'), sekunde: $('uhr-sekunde'),
+    };
+    if (!zeit || !ringe.sekunde) return;
     const p = (n) => String(n).padStart(2, '0');
 
-    const kopf = $('uhr-kopf');
+    /* Voll = kein Versatz. Die Ringe wachsen im Uhrzeigersinn, weil das
+       SVG im Stil um 90 Grad zurueckgedreht ist. */
+    const setze = (welcher, anteil) => {
+      const el = ringe[welcher];
+      if (el) el.style.strokeDashoffset = String(UMFANG[welcher] * (1 - anteil));
+    };
+
     const takt = () => {
       const j = new Date();
-      zeit.textContent = `${p(j.getHours())}:${p(j.getMinutes())}`;
-      sek.textContent = p(j.getSeconds());
-      /* Voll = kein Versatz. Der Ring wächst im Uhrzeigersinn, weil das
-         SVG im Stil um 90 Grad zurückgedreht ist. */
-      zeiger.style.strokeDashoffset = String(UHR_UMFANG * (1 - j.getSeconds() / 60));
-      if (minute) minute.style.strokeDashoffset = String(UHR_UMFANG * (1 - j.getMinutes() / 60));
-      /* Der leuchtende Kopf sitzt am ENDE des Sekundenbogens. Er wird um
-         die Mitte gedreht -- 6 Grad je Sekunde. Die Drehung passiert im
-         SVG-Koordinatensystem (0..100), NICHT im Stil: Dort liegt schon
-         die -90-Grad-Drehung des ganzen Rings, und zwei Drehungen an
-         zwei Stellen laufen beim nächsten Umbau auseinander. */
-      if (kopf) kopf.setAttribute('transform', `rotate(${j.getSeconds() * 6} 50 50)`);
-      /* Der volle Zeitpunkt für Vorleseprogramme -- sichtbar steht dort
+      const std = j.getHours(), min = j.getMinutes(), sk = j.getSeconds();
+      zeit.textContent = `${p(std)}:${p(min)}`;
+      sek.textContent = p(sk);
+
+      /* JEDER RING LAEUFT WEICH IN SEINER EIGENEN EINHEIT.
+
+         Die Sekunde springt (sie ist die Anzeige selbst), Minute und
+         Stunde nicht: Ein Minutenring, der einmal pro Minute einen
+         Sprung macht, sieht aus wie eine haengende Anzeige. Er bekommt
+         deshalb die Sekunden anteilig dazu -- und die Stunde die
+         Minuten. Genau das hat Filipe verlangt ("die minuten sollen
+         auch den minuten entsprechen mitlaufen").
+
+         Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
+         zwoelf Stunden, und der Ring soll sich wie eines lesen. */
+      setze('sekunde', sk / 60);
+      setze('minute', (min + sk / 60) / 60);
+      setze('stunde', ((std % 12) + min / 60) / 12);
+
+      /* Der volle Zeitpunkt fuer Vorleseprogramme -- sichtbar steht dort
          nur die Uhrzeit, vorgelesen wird der ganze Satz. */
       const uhr = $('uhr');
-      if (uhr) uhr.setAttribute('aria-label', `${p(j.getHours())}:${p(j.getMinutes())} Uhr`);
+      if (uhr) uhr.setAttribute('aria-label', `${p(std)}:${p(min)} Uhr`);
+
+      /* KEIN setInterval(1000). Ein fester Takt laeuft mit der Zeit aus
+         dem Tritt (jeder Durchlauf kostet Millisekunden) und
+         ueberspringt dann gelegentlich eine Sekunde. Gewartet wird bis
+         zur naechsten VOLLEN Sekunde -- die Anzeige bleibt fuer immer im
+         Takt der Systemuhr. */
       setTimeout(takt, 1000 - (Date.now() % 1000) + 8);
     };
     takt();
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index dd68ac89..cd2a7ed8 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,9 +9,9 @@
 <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/aufgaben.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -211,10 +211,10 @@
   </form>
 </dialog>
 
-<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/aufgaben.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/aufgaben.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/automation.html b/workspace/automation.html
index d651c604..09bb641f 100644
--- a/workspace/automation.html
+++ b/workspace/automation.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/automation.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/automation.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -134,10 +134,10 @@
 
 </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/automation.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/automation.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/bereich.html b/workspace/bereich.html
index e8d2063d..b1d15922 100644
--- a/workspace/bereich.html
+++ b/workspace/bereich.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/bereich.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/bereich.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -143,14 +143,14 @@
 
 </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/checkliste.js?v=202609070423" defer></script>
-<script src="assets/js/ampel.js?v=202609070423" defer></script>
-<script src="assets/js/schulung.js?v=202609070423" defer></script>
-<script src="assets/js/vorlagen.js?v=202609070423" defer></script>
-<script src="assets/js/bereich.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/checkliste.js?v=202609070433" defer></script>
+<script src="assets/js/ampel.js?v=202609070433" defer></script>
+<script src="assets/js/schulung.js?v=202609070433" defer></script>
+<script src="assets/js/vorlagen.js?v=202609070433" defer></script>
+<script src="assets/js/bereich.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/calls.html b/workspace/calls.html
index aaa0df6d..b9e7fd42 100644
--- a/workspace/calls.html
+++ b/workspace/calls.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/calls.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/calls.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -76,11 +76,11 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609070423" defer></script>
-<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/calls.js?v=202609070423" defer></script>
+<script src="assets/js/ki.js?v=202609070433" 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/calls.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/chat.html b/workspace/chat.html
index f1f87bd1..68a66706 100644
--- a/workspace/chat.html
+++ b/workspace/chat.html
@@ -9,16 +9,16 @@
 <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" />
 <!-- aufgaben.css bringt die Dialog- und Formularstile mit (.dialog,
      .neu__zeile, .dialog__knoepfe). Sie stehen dort seit dem
      Aufgabenbrett; sie hierher zu kopieren hiesse, sie an zwei Stellen
      zu pflegen. Dieselbe Lösung nutzen kalender.html und content.html.
      Gemeldet von pruef-css-klassen.mjs, bevor jemand einen ungestylten
      Dialog zu sehen bekam. -->
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/chat.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/chat.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -154,9 +154,9 @@
   </form>
 </dialog>
 
-<script src="assets/js/bereiche.js?v=202609070423"></script>
-<script src="assets/js/kopf.js?v=202609070423"></script>
-<script src="assets/js/glocke.js?v=202609070423"></script>
-<script src="assets/js/chat.js?v=202609070423"></script>
+<script src="assets/js/bereiche.js?v=202609070433"></script>
+<script src="assets/js/kopf.js?v=202609070433"></script>
+<script src="assets/js/glocke.js?v=202609070433"></script>
+<script src="assets/js/chat.js?v=202609070433"></script>
 </body>
 </html>
diff --git a/workspace/content.html b/workspace/content.html
index db06f495..d46dd303 100644
--- a/workspace/content.html
+++ b/workspace/content.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/content.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/content.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -166,12 +166,12 @@
 
 </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/checkliste.js?v=202609070423" defer></script>
-<script src="assets/js/vorlagen.js?v=202609070423" defer></script>
-<script src="assets/js/content.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/checkliste.js?v=202609070433" defer></script>
+<script src="assets/js/vorlagen.js?v=202609070433" defer></script>
+<script src="assets/js/content.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/dateien.html b/workspace/dateien.html
index d67f4acc..2202d4a9 100644
--- a/workspace/dateien.html
+++ b/workspace/dateien.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/dateien.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/dateien.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -95,10 +95,10 @@
 
 </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/dateien.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/dateien.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/index.html b/workspace/index.html
index 53c8283a..08ec7513 100644
--- a/workspace/index.html
+++ b/workspace/index.html
@@ -27,7 +27,7 @@
 
 <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/gate.css?v=202609070433" />
 </head>
 
 <body class="gate">
@@ -186,6 +186,6 @@
 </main>
 </div>
 
-<script src="assets/js/gate.js?v=202609070423" defer></script>
+<script src="assets/js/gate.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/kalender.html b/workspace/kalender.html
index c0b734a9..a98baed0 100644
--- a/workspace/kalender.html
+++ b/workspace/kalender.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/kalender.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/kalender.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -257,11 +257,11 @@
 
 </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/kalender.js?v=202609070423" defer></script>
-<script src="assets/js/kalender-abo.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/kalender.js?v=202609070433" defer></script>
+<script src="assets/js/kalender-abo.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/leistung.html b/workspace/leistung.html
index 83bc7786..1373074b 100644
--- a/workspace/leistung.html
+++ b/workspace/leistung.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/leistung.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/leistung.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -211,10 +211,10 @@
   </form>
 </dialog>
 
-<script src="assets/js/wahl.js?v=202609070423"></script>
-<script src="assets/js/bereiche.js?v=202609070423"></script>
-<script src="assets/js/kopf.js?v=202609070423"></script>
-<script src="assets/js/glocke.js?v=202609070423"></script>
-<script src="assets/js/leistung.js?v=202609070423"></script>
+<script src="assets/js/wahl.js?v=202609070433"></script>
+<script src="assets/js/bereiche.js?v=202609070433"></script>
+<script src="assets/js/kopf.js?v=202609070433"></script>
+<script src="assets/js/glocke.js?v=202609070433"></script>
+<script src="assets/js/leistung.js?v=202609070433"></script>
 </body>
 </html>
diff --git a/workspace/personen.html b/workspace/personen.html
index 786f1aef..ebfa2abd 100644
--- a/workspace/personen.html
+++ b/workspace/personen.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/personen.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/personen.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -123,10 +123,10 @@
 
 </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/personen.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/personen.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/profil.html b/workspace/profil.html
index a63850be..86367b68 100644
--- a/workspace/profil.html
+++ b/workspace/profil.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -201,11 +201,11 @@
 
 </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/steckbrief.js?v=202609070423" defer></script>
-<script src="assets/js/profil.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/steckbrief.js?v=202609070433" defer></script>
+<script src="assets/js/profil.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/report.html b/workspace/report.html
index 58318070..a409f8a6 100644
--- a/workspace/report.html
+++ b/workspace/report.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/report.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/report.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -93,11 +93,11 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609070423" defer></script>
-<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/report.js?v=202609070423" defer></script>
+<script src="assets/js/ki.js?v=202609070433" 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/report.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/scouting.html b/workspace/scouting.html
index 0ca6e698..1b898796 100644
--- a/workspace/scouting.html
+++ b/workspace/scouting.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/scouting.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/scouting.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -126,10 +126,10 @@
   </div>
 </div>
 
-<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/scouting.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/scouting.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/start.html b/workspace/start.html
index d2e1c8ca..2560fdbb 100644
--- a/workspace/start.html
+++ b/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>
diff --git a/workspace/startcheck.html b/workspace/startcheck.html
index 62a23a95..7c9dfdb0 100644
--- a/workspace/startcheck.html
+++ b/workspace/startcheck.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/startcheck.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/startcheck.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -72,11 +72,11 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609070423" defer></script>
-<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/startcheck.js?v=202609070423" defer></script>
+<script src="assets/js/ki.js?v=202609070433" 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/startcheck.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html
index 853a8947..d3016b40 100644
--- a/workspace/steckbrief.html
+++ b/workspace/steckbrief.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -113,10 +113,10 @@
 
 </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/steckbrief.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/steckbrief.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html
index 37c56112..eff7ff53 100644
--- a/workspace/uebersicht.html
+++ b/workspace/uebersicht.html
@@ -9,12 +9,12 @@
 <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" />
 <!-- Formular- und Dialogstile: seit dem 07.09.2026 steht hier der
      Dialog "Creator anlegen". -->
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -136,10 +136,10 @@
 
 </main>
 
-<script src="assets/js/bereiche.js?v=202609070423" defer></script>
+<script src="assets/js/bereiche.js?v=202609070433" 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/uebersicht.js?v=202609070423" 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/uebersicht.js?v=202609070433" defer></script>
 </body>
 </html>
diff --git a/workspace/wissen.html b/workspace/wissen.html
index b0cfb555..11738aef 100644
--- a/workspace/wissen.html
+++ b/workspace/wissen.html
@@ -9,10 +9,10 @@
 <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/aufgaben.css?v=202609070423" />
-<link rel="stylesheet" href="assets/css/wissen.css?v=202609070423" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070433" />
+<link rel="stylesheet" href="assets/css/wissen.css?v=202609070433" />
 </head>
 
 <body class="start">
@@ -177,10 +177,10 @@
 
 </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/wissen.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/wissen.js?v=202609070433" defer></script>
 </body>
 </html>