Das Aufgaben-Formular: was aufklappt, bekommt jetzt auch Platz

Filipe, 22.09.2026, zum Bildschirmfoto: „wie scheisse sieht das aus,
verbesser das bitte." Zu sehen: „Anlegen" und „Abbrechen" lagen mitten
in der Personenliste.

GEMESSEN statt geraten, bei 1280 px mit aufgeklappter Liste:

    Zelle            Zeilen          Hoehe   Inhalt
    feld-verant      24px 44px          68      107
    feld-mehrere     43px 44px          87      261   <-- 174 zu viel

Jede Zelle des Formularrasters bekommt zwei Zeilen: Beschriftung oben,
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
alle Eingaben auf einer Linie sitzen (17.09.).

`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet in der
44-Pixel-Zeile und laeuft heraus, sobald jemand sie oeffnet. Was
herauslaeuft, belegt keinen Platz -- also legt es sich ueber das
Naechste, und das Naechste sind die Knoepfe.

DIE MESSUNG HAT MICH VOR DEM NAHELIEGENDEN FEHLER BEWAHRT.
Erster Gedanke: „Zellen ohne eigene Eingabe brauchen die zwei Zeilen
nicht" -- `:has(> input, > select, > textarea)`. Die Messung sagt etwas
anderes: Von sieben Zellen haben SECHS ihre Eingabe nicht als direktes
Kind, weil der Auswahl-Baustein sie in ein <div> wickelt. Die Regel
haette fast das ganze Formular getroffen und genau die Ausrichtung
zerstoert, die sie schuetzen soll.

`aria-expanded` ist gemessen das einzige Merkmal, das nur bei dieser
Zelle steht -- und es ist das inhaltlich richtige: Es sagt „dieser
Bereich kann groesser werden". Etwas, das groesser werden kann, darf
keine feste Hoehe haben.

UND DIE PRUEFUNG, DIE ES HAETTE FINDEN MUESSEN
pruef-formulare war gruen -- sie klappt das Feld nie auf. Ein Zustand,
der nie hergestellt wird, kann nicht gemessen werden.

Neuer Abschnitt: Jedes Element mit `aria-expanded` im Formular wird
geoeffnet, danach darf keine Rasterzelle mehr Inhalt haben, als sie
hoch ist. Nicht diese eine Stelle, sondern die Eigenschaft -- damit
faellt auch die naechste auf, die es noch gar nicht gibt.

ZWEI ANLAEUFE DABEI WAREN FALSCH, und der zweite war der gefaehrliche:
  1. `scrollHeight` der Zelle meldete elf Zellen als kaputt, die alle
     in Ordnung sind: Der Hinweis unter einem Feld haengt seit dem
     17.09. absichtlich absolut darunter. Eine Warnung, die bei
     richtigem Verhalten anschlaegt, wird abgeschaltet.
  2. Nur die direkten Kinder im Fluss -- das war gruen, AUCH MIT DEM
     ECHTEN FEHLER. Nachgemessen mit zurueckgenommener Behebung:
     immer noch gruen. Das Raster staucht das Kind auf die feste
     Zeilenhoehe, das Kind bleibt also brav in der Zelle; was
     herauslaeuft, ist der Inhalt darin.

Jetzt misst sie in die Tiefe (ohne Teilbaeume unter absolut gesetzten
Elementen und ohne eigene Rollbereiche) und ist beidseitig belegt:
  mit Behebung    -> gruen
  ohne Behebung   -> FEHL „feld-mehrere: Inhalt reicht bis 169 px,
                     Zelle ist 87 px hoch"
Dazu eine Gegenprobe, die eine Zelle kuenstlich einklemmt.

Ueberlappungen im Formular: von 12 auf 4 -- und die vier sind Absicht
(der echte <select> liegt unsichtbar ueber seinem Knopf).

pruef-formulare, pruef-aufgabenbrett, pruef-css-klassen gruen.

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

workspace/befinden.html

@@ -7,14 +7,14 @@
 <meta name="robots" content="noindex, nofollow" />
 <link rel="manifest" href="/workspace/app.webmanifest" />
 <meta name="theme-color" content="#06090f" />
-<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609221443" />
-<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609221443" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609221443" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609221443" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609221443" />
-<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609221443" />
-<link rel="stylesheet" href="assets/css/module.css?v=202609221443" />
-<link rel="stylesheet" href="assets/css/haus.css?v=202609221443" />
+<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609221458" />
+<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609221458" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609221458" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609221458" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609221458" />
+<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609221458" />
+<link rel="stylesheet" href="assets/css/module.css?v=202609221458" />
+<link rel="stylesheet" href="assets/css/haus.css?v=202609221458" />
 </head>
 
 <body class="start">
@@ -180,14 +180,14 @@
 
 </main>
 
-<script src="assets/js/meldung.js?v=202609221443" defer></script>
-<script src="assets/js/nachfrage.js?v=202609221443" defer></script>
+<script src="assets/js/meldung.js?v=202609221458" defer></script>
+<script src="assets/js/nachfrage.js?v=202609221458" defer></script>
 
 
-<script src="assets/js/wahl.js?v=202609221443" defer></script>
-<script src="assets/js/bereiche.js?v=202609221443" defer></script>
-<script src="assets/js/installieren.js?v=202609221443" defer></script>
-<script src="assets/js/kopf.js?v=202609221443" defer></script>
-<script src="assets/js/befinden.js?v=202609221443" defer></script>
+<script src="assets/js/wahl.js?v=202609221458" defer></script>
+<script src="assets/js/bereiche.js?v=202609221458" defer></script>
+<script src="assets/js/installieren.js?v=202609221458" defer></script>
+<script src="assets/js/kopf.js?v=202609221458" defer></script>
+<script src="assets/js/befinden.js?v=202609221458" defer></script>
 </body>
 </html>