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; }
+}

workspace/assets/js/entwicklung.js

@@ -444,6 +444,18 @@
       const einzeln = $('e-art').querySelector('input[value="mehrere"]');
       if (einzeln) einzeln.checked = true;
     }
+    /* DER ZAEHLER IST DER TEIL, DER UEBERSICHT MACHT. Bei acht
+       Kaestchen sieht man nicht mehr, wie viele angehakt sind -- man
+       zaehlt nach. Er steht in der Kopfzeile der Auswahl und sagt es. */
+    const zahlFeld = $('e-fuer-zahl');
+    if (zahlFeld) {
+      const gesamt = (leute || []).length;
+      zahlFeld.textContent = an.length
+        ? `${an.length} von ${gesamt} ausgewählt`
+        : `niemand ausgewählt (${gesamt} zur Wahl)`;
+      zahlFeld.dataset.leer = an.length ? 'nein' : 'ja';
+    }
+
     const knopf = $('verteilen-knopf');
     const name = an.length
       ? (leute.find((x) => String(x.id) === String(fuerPerson))?.name || null) : null;
@@ -461,6 +473,28 @@
     }
   }
 
+  /* =====================================================================
+     DIE AUSWAHL ALS KARTEN (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 sie alle, um eine
+     zu finden.
+
+     Jetzt eine Karte je Person: Anfangsbuchstabe im Kreis, Name,
+     Rolle darunter. Sie liegen NEBENEINANDER (Raster), damit acht
+     Leute nicht acht Bildschirmzeilen kosten -- auf dem Handy eine
+     Spalte, am Rechner drei.
+
+     ANGEHAKT WIRD DIE GANZE KARTE, nicht das Kästchen darin: Auf
+     einem Handy ist ein Kästchen 20 px, eine Karte 200. Das Kästchen
+     bleibt trotzdem da -- es ist das, was ein Vorleseprogramm
+     ansagt, und was die Tastatur bedient. */
   function fuerLeuteBauen() {
     const ziel = $('e-fuer-leute');
     if (!ziel) return;
@@ -471,21 +505,81 @@
     if (fuerPerson !== null && fuerPerson !== undefined) warAn.add(String(fuerPerson));
     ziel.replaceChildren();
     for (const p2 of (leute || [])) {
-      const zeile = document.createElement('label');
-      zeile.className = 'z-wahl__zeile';
+      const karte2 = document.createElement('label');
+      karte2.className = 'e-fuer__karte';
       const k = document.createElement('input');
       k.type = 'checkbox';
       k.value = String(p2.id);
       k.checked = warAn.has(String(p2.id));
       k.addEventListener('change', auswahlLesen);
-      const t = document.createElement('span');
-      t.textContent = p2.name || 'Jemand';
-      zeile.append(k, t);
-      ziel.append(zeile);
+
+      const zeichen = el('span', 'e-fuer__zeichen',
+        String(p2.name || '?').trim().charAt(0).toUpperCase());
+      zeichen.setAttribute('aria-hidden', 'true');
+
+      const text = el('span', 'e-fuer__text');
+      text.append(el('span', 'e-fuer__name', p2.name || 'Jemand'));
+      /* DIE ROLLE KOMMT VOM SERVER als fertiges Wort (`rolle_name`).
+         Sie hier aus einem Rollenschlüssel zu übersetzen hieße, die
+         Namen der Rollen in eine Datei zu schreiben, die jeder
+         herunterlädt -- darüber wacht eine eigene Prüfung. */
+      if (p2.rolle_name) text.append(el('span', 'e-fuer__rolle', p2.rolle_name));
+
+      karte2.append(k, zeichen, text);
+      ziel.append(karte2);
     }
+    schnellwahlBauen();
     auswahlLesen();
   }
 
+  /* =====================================================================
+     ALLE AUF EINMAL -- UND DIE GRUPPEN DAZU
+
+     „auch die möglichkeit alle auf einmal auszuwählen und so."
+
+     DIE GRUPPEN WERDEN GELESEN, NICHT AUFGEZÄHLT: Welche Rollen in
+     der Liste vorkommen, sagt die Liste. Eine feste Aufzählung hier
+     wäre die, die beim nächsten Rollenzuschnitt eine Gruppe
+     verschweigt -- und niemand merkte es, weil die Knöpfe ja
+     funktionieren.
+
+     „Keine" steht am Ende und nur, wenn etwas angehakt ist. Ein
+     Knopf, der nichts zurücknehmen kann, ist ein Knopf, der nichts
+     tut. */
+  function schnellwahlBauen() {
+    const ziel = $('e-fuer-schnell');
+    if (!ziel) return;
+    const rollen = [];
+    for (const p2 of (leute || [])) {
+      if (p2.rolle_name && !rollen.includes(p2.rolle_name)) rollen.push(p2.rolle_name);
+    }
+    ziel.replaceChildren();
+
+    const knopf = (wort, was) => {
+      const b = el('button', 'e-fuer__kurz', wort);
+      b.type = 'button';
+      b.addEventListener('click', () => {
+        for (const k of $('e-fuer-leute').querySelectorAll('input[type=checkbox]')) {
+          const p2 = (leute || []).find((x) => String(x.id) === k.value);
+          k.checked = was === 'alle' ? true
+            : was === 'keine' ? false
+              : (p2?.rolle_name === was);
+        }
+        auswahlLesen();
+      });
+      return b;
+    };
+
+    if ((leute || []).length > 1) ziel.append(knopf('Alle', 'alle'));
+    /* Eine Gruppe nur dann, wenn sie NICHT alle sind -- „Modis" neben
+       „Alle" bei einer Liste aus lauter Modis wären zwei Knöpfe für
+       dasselbe. */
+    if (rollen.length > 1) {
+      for (const r of rollen) ziel.append(knopf(r, r));
+    }
+    ziel.append(knopf('Keine', 'keine'));
+  }
+
   function formularAuf() {
     const f = $('e-neu');
     if (!f) return;