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/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);
     }
   }