Die Kopfleiste war nie klebend -- und das Call-Brett hatte eine leere Haelfte

DIE LEISTE BLEIBT JETZT OBEN (screen 3)

Filipe: "diese leiste soll immer da stehen bleiben, egal ob man die
seite runterscrollt oder nicht, auf allen seiten."

In start.css steht seit jeher `.kopfleiste { position: sticky; top: 0 }`.
Zwanzig Zeilen darueber steht aber

    body.start > .kopfleiste { position: relative; z-index: 1; }

und das ist (0,2,1) gegen (0,1,0) -- die staerkere Regel gewinnt,
unabhaengig von der Reihenfolge. Gemessen im Browser: `position:
relative`, und bei 600 px Scrollen wanderte die Leiste 600 px aus dem
Bild. Sie hat also nie geklebt, obwohl es im Code so dasteht.

Das ist heute die VIERTE Spielart derselben Falle: `:where()` zu
schwach, `body.start .willkommen` zu stark, die Kachel-Verschachtelung
zu stark -- und hier eine Regel, die etwas ganz anderes wollte (den
Stapelwert ueber der Buehne) und dabei die Positionierung mitgenommen
hat. Merksatz: Wer `position` setzt, nur um `z-index` zu bekommen,
greift jedes Mal daneben.

Nachgemessen: 700 px gescrollt, Leiste steht bei 0.

DAS CALL-BRETT: DREI TAFELN STATT ZWEIER SPALTEN (screen 2)

Filipe: "das bewegt sich immer noch mit, das ist so scheissen."

DAS PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung. Zwei Spalten, und
"Steht an" hatte siebenundzwanzig Karten: Die rechte Spalte lief ueber
mehrere Bildschirmhoehen, die linke war nach zwei Koepfen zu Ende. Wer
scrollt, sieht dann eine leere halbe Seite mit einer Ueberschrift, die
scheinbar mitwandert -- sie steht bloss still, waehrend daneben alles
laeuft.

Jetzt bekommt jede Tafel DIESELBE Hoehe und einen EIGENEN Lauf. Alle
drei Gruppen sind damit immer gleichzeitig zu sehen, egal wie viel in
einer steckt, und die Seite selbst scrollt kaum noch. Das ist die
Bauart jedes Aufgabenbretts, und sie ist es aus genau diesem Grund.

Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer festen
Zahl. Unter 900 px stehen die Tafeln untereinander und laufen wieder
frei -- auf dem Handy ist ein Kaestchen mit eigenem Balken eine Falle,
keine Hilfe. Der Balken ist selbst gestaltet; der Systembalken reisst
ein weisses Band in eine dunkle Flaeche.

NOCH OFFEN aus derselben Nachricht: der Erinnerungswecker fuer Termine
(ein-/ausschaltbar je Eintrag, mehrere Zeitpunkte, von jedem selbst
einstellbar) -- dazu will Filipe ausdruecklich Recherche, und der baut
sich nicht nebenbei.

Zehn Pruefungen gelaufen, alle gruen.

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

workspace/assets/css/calls.css

@@ -372,16 +372,66 @@
    entscheidet die Breite -- eine im Skript festgeschriebene Spalte waere
    eine Zahl, die beim naechsten Fenster falsch ist.
    ===================================================================== */
+/* =====================================================================
+   DREI TAFELN NEBENEINANDER, JEDE MIT EIGENEM LAUF (07.09.2026)
+
+   Filipe: "das bewegt sich immer noch mit, das ist so scheissen.
+   gestalte die 3 kategorien anders, es soll richtig geil sein."
+
+   DAS EIGENTLICHE PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung.
+   Zwei Spalten, und "Steht an" hatte siebenundzwanzig Karten: Die
+   rechte Spalte lief ueber mehrere Bildschirmhoehen nach unten, die
+   linke war nach zwei Koepfen zu Ende. Wer scrollt, sieht dann
+   minutenlang eine leere halbe Seite mit einer Ueberschrift, die
+   scheinbar "mitwandert" -- sie steht bloss still, waehrend daneben
+   alles laeuft.
+
+   Ein Brett loest das anders: Jede Tafel bekommt DIESELBE Hoehe und
+   einen EIGENEN Lauf. Damit sind alle drei Gruppen immer gleichzeitig
+   zu sehen, egal wie viel in einer steckt, und die Seite selbst
+   scrollt kaum noch. Das ist die Bauart jedes Aufgabenbretts, und sie
+   ist es aus genau diesem Grund.
+
+   Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer
+   festen Zahl: Auf einem Laptop bleibt unten Luft, auf einem grossen
+   Schirm nutzt das Brett den Platz. Unter 900 px stehen die Tafeln
+   untereinander und laufen wieder frei -- auf dem Handy ist ein
+   Kaestchen mit eigenem Balken eine Falle, keine Hilfe.
+   ===================================================================== */
 .call-brett {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
   gap: 16px;
-  align-items: start;
+  align-items: stretch;
+}
+.call-brett .gruppe {
+  display: flex; flex-direction: column;
+  min-height: 0;
+}
+.call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: min(62vh, 620px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* Ein eigener Lauf braucht einen eigenen Balken -- der Systembalken
+     ist hell und reisst ein weisses Band in eine dunkle Flaeche. */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(150, 186, 220, .35) transparent;
+}
+.call-brett .gruppe__karten::-webkit-scrollbar { width: 10px; }
+.call-brett .gruppe__karten::-webkit-scrollbar-track { background: transparent; }
+.call-brett .gruppe__karten::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(150, 186, 220, .42), rgba(150, 186, 220, .22));
+  border: 3px solid transparent; background-clip: content-box;
+  border-radius: 999px;
+}
+@media (max-width: 900px) {
+  /* Untereinander und ohne eigenen Lauf -- siehe oben. */
+  .call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten {
+    max-height: none; overflow: visible;
+  }
 }
-/* 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;