Vier Tafeln in einer Reihe -- die offene breiter als die Reiter

Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann eins
drunter. perfektionier das."

DER GRUND WAR EINE RECHNUNG, DIE ICH NICHT KONTROLLIERT HABE

Dort stand `auto-fit` mit 340 px Mindestbreite -- CSS rechnet sich dann
selbst aus, wie viele nebeneinanderpassen. Bei vier Tafeln in einer
1240 px breiten Spalte reichte es fuer drei; die vierte rutschte in
eine zweite Zeile. `auto-fit` ist bequem, solange die Anzahl offen ist.
Sobald sie feststeht, ist es eine Rechnung, die man aus der Hand gibt.

Vier sind es, vier stehen nebeneinander -- und zwar mit `flex` statt
`grid`, weil damit die OFFENE Tafel breiter sein kann als die
geschlossenen. Es ist immer genau eine offen, und die bekommt den
anderthalbfachen Anteil: Dort wird gearbeitet, die anderen sind
Reiter. Das ist der Unterschied zwischen vier gleich grossen Kaesten
und einem Brett.

UND EIN VERSPRECHEN, DAS ERST NACH DEM ERSTEN KLICK GALT

Das Akkordeon griff nur beim Klicken. Beim Laden kamen die gemerkten
Staende aus der Ablage, und die konnten drei offene Tafeln ergeben --
im Bildschirmfoto standen genau so drei offen nebeneinander. Jetzt
bleibt beim Aufbau die erste Tafel offen, die etwas enthaelt; alle
weiteren klappen zu, ohne den gemerkten Stand zu ueberschreiben.

DREIMAL GEMESSEN STATT GESCHAETZT

Nach dem Umbau standen dort "LAEUFT AUTO..." und "FESTGEHALT..." --
252 px je Reiter, gemessen. Ich habe zweimal an den Pixeln gedreht
(Anteil 2,2 -> 1,8 -> 1,5, Sperrung 0,08 -> 0,035 em) und es blieb
abgeschnitten. Die richtige Antwort war nicht die dritte Zahl, sondern
der Name: Ein Reiter braucht ein Wort. Aus "Laeuft automatisch" wurde
"Wiederholungen" -- was es genau heisst, steht im Satz darunter, und
den liest man ohnehin erst, wenn die Tafel offen ist.

Gemessen am Ende: vier Tafeln, EINE Reihe, EINE offen, KEIN
abgeschnittener Titel.

Sechs Pruefungen gelaufen, alle gruen.

OFFEN, damit es nicht untergeht: pruef-call-kategorien meldet auf
Windows sporadisch Rueckgabewert 127 -- NACH "ALLES IN ORDNUNG", also
beim Beenden des Prozesses (libuv-Assertion beim Schliessen des noch
laufenden Servers). Das Ergebnis stimmt, der Rueckgabewert luegt. Wer
nur auf den Code sieht, haelt einen gruenen Lauf fuer rot.

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

workspace/assets/css/calls.css

@@ -399,11 +399,65 @@
    Kaestchen mit eigenem Balken eine Falle, keine Hilfe.
    ===================================================================== */
 .call-brett {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
-  gap: 16px;
+  /* EINE REIHE, VIER TAFELN (07.09.2026).
+
+     Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann
+     eins drunter."
+
+     Vorher stand hier `auto-fit` mit 340 px Mindestbreite. Das rechnet
+     sich selbst aus, wie viele nebeneinanderpassen -- und bei vier
+     Tafeln in einer 1240 px breiten Spalte reichte es fuer drei. Die
+     vierte rutschte in eine zweite Zeile, und das Brett sah aus wie
+     ein Versehen. `auto-fit` ist bequem, solange die Anzahl offen ist;
+     sobald sie feststeht, ist es eine Rechnung, die man nicht
+     kontrolliert.
+
+     Vier sind es, vier stehen nebeneinander -- und zwar mit `flex`
+     statt `grid`, weil damit die OFFENE Tafel breiter sein kann als
+     die drei geschlossenen. Es ist immer genau eine offen (siehe
+     calls.js), und die bekommt doppelten Anteil: Dort wird gearbeitet,
+     die anderen sind Reiter. Das ist der Unterschied zwischen vier
+     gleich grossen Kaesten und einem Brett. */
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 14px;
   align-items: stretch;
 }
+.call-brett .gruppe { flex: 1 1 0; min-width: 0; }
+.call-brett .gruppe:not([data-zu="ja"]) { flex: 1.5 1 0; }
+
+/* DER TITEL MUSS GANZ HINEINPASSEN, nicht abgeschnitten werden.
+
+   Im ersten Anlauf standen dort "LAEUFT AUTO..." und "FESTGEHALT..." --
+   gemessen bei 222 px je zugeklappter Tafel. Ein abgeschnittener Name
+   auf einem Reiter ist das Gegenteil von uebersichtlich: Man muss ihn
+   aufklappen, um zu wissen, was drin ist.
+
+   Zwei Stellschrauben statt einer: Die offene Tafel nimmt 1,5 Anteile
+   statt 2,2 (die geschlossenen wachsen dadurch von 222 auf 266 px), und
+   die Sperrung der Grossbuchstaben faellt von 0,08 auf 0,035 em. Beides
+   zusammen bringt "LAEUFT AUTOMATISCH" unter -- Punkte bleiben als
+   letzte Rueckfallebene stehen, falls jemand eine laengere Gruppe
+   erfindet. */
+.call-brett .stufe__titel {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  letter-spacing: .035em;
+  font-size: .74rem;
+}
+.call-brett .stufe__kopf { gap: 8px; padding-left: 13px; padding-right: 11px; }
+.call-brett .stufe__zahl, .call-brett .gruppe__pfeil { flex: none; }
+
+@media (max-width: 1100px) {
+  /* Vier nebeneinander unter 1100 px waeren vier Streifen von 250 px --
+     lesbar, aber nicht mehr benutzbar. Ab hier zwei Reihen zu zwei. */
+  .call-brett { flex-wrap: wrap; }
+  .call-brett .gruppe,
+  .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 calc(50% - 7px); }
+}
+@media (max-width: 700px) {
+  .call-brett .gruppe,
+  .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 100%; }
+}
 .call-brett .gruppe {
   display: flex; flex-direction: column;
   min-height: 0;