diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css
index 3a7ae8f5..e43e3bdc 100644
--- a/workspace/assets/css/calls.css
+++ b/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;
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index b989f4cc..b1897fec 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -204,7 +204,31 @@ body.start > .schleier {
/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
sichtbar darüber, aber Klicks landeten teils am falschen Ort. */
-body.start > .kopfleiste,
+/* DIE KOPFLEISTE BLEIBT OBEN STEHEN (07.09.2026).
+
+ Filipe: "diese leiste soll immer da stehen bleiben, egal ob man die
+ seite runterscrollt oder nicht, auf allen seiten."
+
+ Sie WAR nie klebend, obwohl es zwanzig Zeilen weiter unten so
+ dasteht (`.kopfleiste { position: sticky; top: 0 }`). Diese Regel
+ hier hat es ueberschrieben: `body.start > .kopfleiste` ist (0,2,1),
+ `.kopfleiste` nur (0,1,0) -- die staerkere gewinnt, unabhaengig von
+ der Reihenfolge. Gemessen im Browser: `position: relative`, und beim
+ Scrollen um 600 px wanderte die Leiste um 600 px nach oben aus dem
+ Bild.
+
+ Das ist heute die VIERTE Spielart derselben Falle: `:where()` war 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 mitnahm.
+ Wer `position` setzt, nur um `z-index` zu bekommen, greift jedes Mal
+ daneben.
+
+ Der Stapelwert bleibt: 6 statt 1, damit die Leiste ueber den Modulen
+ liegt -- sie steht ja jetzt auf ihnen. */
+body.start > .kopfleiste {
+ position: sticky; top: 0; z-index: 6;
+}
body.start > .inhalt,
body.start > main { position: relative; z-index: 1; }
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 097374c3..aa114d0d 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+