Die Auswahlliste lag hinter dem Dialog

Filipe: "wenn ich auf zustaendigkeit druecke dan erscheint die auswahl
im hintergrund kontrollier das."

KONTROLLIERT, UND ER HAT RECHT. Gemessen im Browser: Der Kanal-Dialog
ist modal, die Liste hing an BODY, und ein Klick in ihre Mitte traf
DIALOG.dialog -- also den Dialog, nicht die Liste. Sie war da, sichtbar
war sie nicht, bedienbar erst recht nicht.

DER GRUND IST EINE EBENE, KEINE ZAHL. Ein Dialog aus showModal() liegt
in der TOP LAYER, einer Schicht ueber dem ganzen Dokument. Kein
z-index holt etwas aus dem Body davor; die Ebene entscheidet.

DER ERSTE VERSUCH WAR FALSCH, und das Bildschirmfoto hat es gezeigt:
Die Liste IN den Dialog zu haengen bringt sie zwar nach vorn -- und
laesst sie am unteren Rand abschneiden. `.dialog` traegt ein
clip-path fuer die abgeschraegte Ecke, und ein clip-path beschneidet
ALLE Nachkommen, auch "position: fixed". Die Liste endete mitten im
Wort "Events".

Damit ging beides nicht: draussen dahinter, drinnen beschnitten.

DER POPOVER IST GENAU DAFUER GEMACHT. Er hebt ein Element in dieselbe
Ebene wie den Dialog, ohne es zu seinem Kind zu machen: kein Beschnitt,
kein z-index-Wettlauf, und der Browser raeumt ihn beim Schliessen
selbst weg. Fehlt er im Browser, bleibt alles wie bisher -- ausserhalb
eines Dialogs aendert sich ohnehin nichts.

Die drei Zeilen in gate.css nehmen die Vorgaben zurueck, die ein
Popover mitbringt (Rahmen, Polster, und "inset: 0" plus "margin: auto",
was ihn in die Bildmitte stellt).

UND MEINE MESSUNG WAR ZUERST FALSCH, nicht der Code: Sie fragte
document.elementFromPoint und bekam DIALOG -- auch als die Liste
sichtbar darueber lag. Top-Layer-Elemente erfasst elementFromPoint
nicht verlaesslich. Gemessen wird jetzt, was ein Mensch tut: auf einen
Eintrag tippen und nachsehen, ob er ankommt. Er kommt an
("chat -> events"), und die Liste schliesst sich danach.

DAZU EINE EIGENE SCHLAMPEREI VON VORHIN: Die neuen Handy-Kacheln auf
"Eure Aufgaben" hatten .7rem = 11,2 px. Die Grenze des Hauses liegt
bei 11,5 px, und sie steht dort aus einem Grund -- Augenschonung ist
Pflicht, nicht Geschmack. pruef-css-klassen hat es gefangen ("43
Stellen unter 11,5 px, eine mehr als die Grundlinie 42"). Genau dafuer
zaehlt sie mit. Jetzt .75rem, und die Zahl steht wieder bei 42.

Gemessen: 7 Messungen am Dialog ohne Befund, css-klassen wieder in
Ordnung.

NICHT VON HEUTE ABEND, aber gefunden: pruef-chatkachel meldet "mit
allen 13 Toenen (2)". Seit Commit 7a674963 liegen die meisten Toene
auf einem Ring und nur der Rest im Gitter; die Pruefung zaehlt nur das
Gitter. Sie ist damit dauerhaft rot und gehoert nachgezogen.

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

workspace/assets/js/wahl.js

@@ -294,7 +294,62 @@
 
     fuellen(suchfeld ? suchfeld.value : '');
 
+    /* ==== WOHIN DIE LISTE GEHAENGT WIRD (23.09.2026) ===============
+
+       Hier stand nur "document.body.append(liste)". Das geht ueberall
+       gut -- ausser in einem modalen Dialog.
+
+       Ein Dialog, der mit showModal() geoeffnet wurde, liegt in der
+       TOP LAYER: einer Ebene ueber dem ganzen Dokument. Kein z-index
+       der Welt holt etwas aus dem Body davor -- die EBENE entscheidet,
+       nicht die Zahl. Die Liste war also da, lag aber dahinter.
+
+       Gemessen: Ein Klick in die Mitte der aufgeklappten Liste traf
+       DIALOG.dialog. Filipe: "dan erscheint die auswahl im
+       hintergrund."
+
+       In den Dialog gehaengt liegt sie in derselben Ebene wie er --
+       und damit davor.
+
+       UND WARUM DIE POSITION JETZT INLINE STEHT: In module.css steht
+       ".dialog > * { position: relative }". Das ist (0,1,0), genauso
+       stark wie ".wahl2__liste { position: fixed }" in gate.css -- und
+       module.css wird spaeter geladen. Als direktes Kind des Dialogs
+       waere die Liste also "relative" geworden und mitten im Formular
+       gelandet statt am Knopf.
+
+       Dieselbe Falle wie heute frueh bei der Kopfleiste: eine Regel,
+       die etwas anderes wollte, nimmt die Positionierung mit. Diesmal
+       vorher gemessen statt hinterher gesucht. Der Inline-Stil schlaegt
+       beide Regeln, ohne eine davon anzufassen -- und gilt auch fuer
+       jeden kuenftigen Dialog. */
+    const dlg = z.knopf.closest("dialog");
     document.body.append(liste);
+    liste.style.position = "fixed";
+    /* IN EINEM DIALOG BRAUCHT DIE LISTE DIE TOP LAYER.
+
+       Erster Versuch war, sie IN den Dialog zu haengen. Sie lag dann
+       zwar davor -- und wurde am unteren Rand abgeschnitten: .dialog
+       traegt ein clip-path fuer die abgeschraegte Ecke, und ein
+       clip-path beschneidet ALLE Nachkommen, auch "position: fixed".
+       Gemessen und auf dem Bildschirmfoto gesehen: Die Liste endete
+       mitten im Wort "Events".
+
+       Damit ging beides nicht: draussen liegt sie hinter dem Dialog
+       (Top Layer), drinnen wird sie beschnitten (clip-path).
+
+       Der Popover ist genau dafuer gemacht: Er hebt ein Element in
+       dieselbe Ebene wie den Dialog, OHNE es zu seinem Kind zu machen.
+       Kein Beschnitt, kein z-index-Wettlauf, und der Browser raeumt
+       ihn beim Schliessen selbst weg.
+
+       WENN ER FEHLT, bleibt die Liste im Body -- also so, wie sie
+       vorher ueberall war. Ausserhalb eines Dialogs aendert sich
+       nichts. */
+    if (dlg && dlg.open && typeof liste.showPopover === "function") {
+      liste.setAttribute("popover", "manual");
+      try { liste.showPopover(); } catch { /* dann eben ohne */ }
+    }
     stelle(z);
     z.knopf.setAttribute('aria-expanded', 'true');
     aktiv = z;