screen3: Das Verteil-Formular -- Karten statt Zeilen, und alle auf einmal

"diese kachel soll viel geiler sein, also alles was drin ist soll viel
geiler gestaltet sein, viel hochwertiger, viel profissineller, auch
die möglichkeit alle auf einmal auszuwählen und so. mach es hoch krass
profissionel, übersichtlich und richtig krass geil bitte."

VORHER: ein Kaestchen und ein Name je Zeile, untereinander. Bei sieben
Leuten sieben gleiche Zeilen -- man liest alle, um eine zu finden, und
auf dem Handy kostet das sieben Bildschirmzeilen.

JETZT EINE KARTE JE PERSON, im Raster (am Rechner drei Spalten, auf
dem Handy eine). Drei Dinge machen den Unterschied zwischen "Liste"
und "Auswahl":

  1. DIE GANZE KARTE IST DAS ZIEL, nicht das Kaestchen darin. Auf
     einem Handy ist ein Kaestchen 20 px breit, eine Karte 200. Das
     Kaestchen bleibt trotzdem stehen -- es ist das, was ein
     Vorleseprogramm ansagt und was die Tastatur bedient.
  2. DIE GEWAEHLTE KARTE SIEHT ANDERS AUS: Rahmen und Flaeche in der
     Akzentfarbe. Ein Haken allein ist bei sieben Karten zu wenig.
     Ueber `:has(input:checked)` und nicht ueber eine Klasse aus dem
     Skript -- der Zustand steht schon im Kaestchen, ihn zusaetzlich
     als Klasse zu fuehren waeren zwei Wahrheiten.
  3. JEDE KARTE NENNT DIE ROLLE. "Diene" und "Funny" sagen nichts;
     "Diene, Modi" schon. Der Rollenname kommt fertig vom Server
     (`rolle_name`) -- ihn hier aus einem Schluessel zu uebersetzen
     hiesse, die Namen der Rollen in eine Datei zu schreiben, die
     jeder herunterlaedt.

ALLE AUF EINMAL -- UND DIE GRUPPEN DAZU

Eine Schnellwahl ueber der Liste: Alle · Rechte Hand · Linke Hand ·
Modi · Keine.

DIE GRUPPEN WERDEN GELESEN, NICHT AUFGEZAEHLT. Welche Rollen
vorkommen, sagt die Liste selbst. Eine feste Aufzaehlung hier waere
die, die beim naechsten Rollenzuschnitt eine Gruppe verschweigt -- und
niemand merkte es, weil die Knoepfe ja funktionieren. Genau diese
Sorte Liste hat gestern die linke Hand auf der Team-Lage verschluckt.

Gruppenknoepfe nur, wenn es mehr als eine Rolle gibt: "Modi" neben
"Alle" bei einer Liste aus lauter Modis waeren zwei Knoepfe fuer
dasselbe.

DER ZAEHLER ist der Teil, der Uebersicht macht: "2 von 7 ausgewaehlt".
Bei sieben Kaestchen sieht man nicht mehr, wie viele angehakt sind --
man zaehlt nach.

Gemessen bei 1280 und bei 390 px: 7 Karten, fuenf Schnellknoepfe, kein
waagerechtes Scrollen, keine Browsermeldung.
pruef-bewerbung-aufgaben: 101 Pruefungen, 0 Fehler.

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

workspace/assets/css/entwicklung.css

@@ -1998,3 +1998,121 @@
   .b-fazit__schritt { border: 1px solid CanvasText; }
   .b-fazit__team { border-left: 2px solid CanvasText; }
 }
+
+/* =====================================================================
+   DIE AUSWAHL IM VERTEIL-FORMULAR (23.09.2026)
+   =====================================================================
+
+   Filipe: „diese kachel soll viel geiler sein, also alles was drin ist
+   soll viel geiler gestaltet sein, viel hochwertiger, viel
+   profissineller, auch die möglichkeit alle auf einmal auszuwählen und
+   so. mach es hoch krass profissionel, übersichtlich"
+
+   Vorher: ein Kästchen und ein Name je Zeile, untereinander. Bei sechs
+   Leuten sechs gleiche Zeilen — man liest alle, um eine zu finden, und
+   auf dem Handy kostet das sechs Bildschirmzeilen.
+
+   Jetzt eine Karte je Person, im Raster. Drei Dinge machen den
+   Unterschied zwischen „Liste" und „Auswahl":
+
+     1. DIE GANZE KARTE IST DAS ZIEL, nicht das Kästchen darin. Auf
+        einem Handy ist ein Kästchen 20 px breit, eine Karte 200.
+     2. DIE GEWÄHLTE KARTE SIEHT ANDERS AUS — Rahmen und Fläche in der
+        Akzentfarbe. Ein Haken allein ist bei acht Karten zu wenig.
+     3. DER ZÄHLER OBEN sagt, wie viele es sind. Ohne ihn zählt man.
+   ===================================================================== */
+.e-fuer__kopf {
+  display: flex; flex-wrap: wrap; align-items: baseline;
+  justify-content: space-between; gap: 8px 14px;
+  margin: 0 0 8px;
+}
+.e-fuer__rechts {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
+  margin-left: auto;
+}
+.e-fuer__zahl {
+  font-size: .78rem; font-weight: 650;
+  color: color-mix(in srgb, var(--akzent) 72%, #ffffff);
+}
+/* Steht niemand zur Wahl, ist der Satz eine Auskunft und keine Zahl --
+   dann tritt er zurück. */
+.e-fuer__zahl[data-leer="ja"] { color: var(--text-still); font-weight: 600; }
+
+/* ---- Die Schnellwahl ------------------------------------------------- */
+.e-fuer__schnell { display: flex; flex-wrap: wrap; gap: 6px; }
+.e-fuer__kurz {
+  padding: 5px 11px; border-radius: 999px;
+  font: inherit; font-size: .76rem; font-weight: 600;
+  color: var(--text-leise);
+  background: rgba(255, 255, 255, .04);
+  border: 1px solid var(--rand);
+  cursor: pointer;
+  /* 32 px hoch über die Zeilenhöhe, nicht über eine feste Höhe: So
+     wächst der Knopf mit, wenn jemand die Schrift größer stellt. */
+  line-height: 1.6; min-height: 32px;
+  display: inline-flex; align-items: center;
+  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
+}
+.e-fuer__kurz:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--akzent) 48%, transparent);
+  background: color-mix(in srgb, var(--akzent) 10%, transparent);
+}
+.e-fuer__kurz:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* ---- Die Karten ------------------------------------------------------ */
+.e-fuer__leute {
+  display: grid; gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
+  margin: 0 0 12px;
+}
+.e-fuer__karte {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px;
+  border-radius: var(--radius-klein, 12px);
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .03);
+  cursor: pointer;
+  /* 44 px ist das Mindestmaß für einen Daumen (WCAG 2.5.8 verlangt
+     24, das Haus nimmt 44). Über min-height, damit lange Namen die
+     Karte wachsen lassen statt sie zu sprengen. */
+  min-height: 52px;
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.e-fuer__karte:hover {
+  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
+  background: rgba(255, 255, 255, .06);
+}
+/* GEWÄHLT SIEHT ANDERS AUS. `:has()` statt einer Klasse aus dem
+   Skript: Der Zustand steht schon im Kästchen -- ihn zusätzlich als
+   Klasse zu führen wären zwei Wahrheiten, und eine davon läuft
+   irgendwann nach. */
+.e-fuer__karte:has(input:checked) {
+  border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
+  background: color-mix(in srgb, var(--akzent) 13%, transparent);
+}
+.e-fuer__karte:has(input:focus-visible) {
+  outline: 2px solid var(--akzent); outline-offset: 2px;
+}
+.e-fuer__karte input { width: 19px; height: 19px; flex: none; cursor: pointer; }
+
+.e-fuer__zeichen {
+  width: 30px; height: 30px; border-radius: 50%; flex: none;
+  display: grid; place-items: center;
+  font-size: .8rem; font-weight: 700;
+  color: color-mix(in srgb, var(--akzent) 78%, #ffffff);
+  background: color-mix(in srgb, var(--akzent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
+}
+.e-fuer__text { display: grid; gap: 1px; min-width: 0; }
+.e-fuer__name {
+  font-size: .9rem; font-weight: 650; color: var(--text);
+  overflow-wrap: anywhere;
+}
+.e-fuer__rolle { font-size: .74rem; color: var(--text-still); }
+
+@media (forced-colors: active) {
+  .e-fuer__karte { border: 1px solid CanvasText; }
+  .e-fuer__karte:has(input:checked) { border: 2px solid Highlight; }
+  .e-fuer__kurz { border: 1px solid CanvasText; }
+}