Die Kopfleiste: nicht die dritte Zahl, sondern gar keine

BEFUND. Der Gesamtlauf war nach dem Bildumbau bei SIEBZEHN Dateien rot,
pruef-handy allein mit 37 Fehlern. Alle mit derselben Meldung:
"ueber=126px". Eine Ursache, siebzehnfach gezaehlt.

Sie war meine. Um den Layout-Sprung bei 1280 px zu beheben, hatte ich
den Umbruch der aeusseren Leiste wieder auf "nur unter 380 px" gestellt
-- und damit bei 390 und 412 px genau das Loch aufgerissen, das ich
Stunden vorher geschlossen hatte. Dieselbe feste Schwelle von 380, ueber
die zwei Commits vorher eine Regel in CLAUDE.md gewandert ist.

DREI ANLAEUFE, und die ersten beiden waren Symptomkur:

  1. `flex: 0 0 auto` fuer die Bedienelemente -> 126 px Ueberstand bei
     412 px (sie koennen weder schrumpfen noch umbrechen).
  2. Hoher Schrumpf-Faktor am Schriftzug (220 gegen 1) -> besser, aber
     von 19 fehlenden Pixeln nahmen die Knoepfe 0,19, und die runden auf
     1 auf. Ein Pixel, und die Gruppe brach um. Ich habe daraufhin die
     Abstaende verkleinert; danach war es wieder genau ein Pixel. Wer an
     einem Rundungsfehler schraubt, hat die falsche Stellschraube.
  3. RICHTIG: dem Schriftzug gar keine Wunschbreite geben.
     `flex: 1 1 0` heisst "ich beanspruche nichts und nehme, was uebrig
     bleibt". Damit entsteht ueberhaupt kein Fehlbetrag, der verteilt
     werden muesste. Kein Schrumpf-Faktor, keine Schwelle, nichts zu
     runden. Dazu `max-width: max-content`, sonst zieht `flex-grow` die
     Marken-Pille ueber die ganze Leiste (990 statt 375 px) -- wovor der
     Kommentar zwei Zeilen darueber ausdruecklich warnt und was ich beim
     Umbau uebergangen habe.

Gemessen ueber neun Breiten: 1920 bis 768 einzeilig (71 px), 412 und 390
zweizeilig (127), 320 dreizeilig (167). Ueberstand ueberall null. Und der
Layout-Sprung von 0,94 ist damit auch weg -- er kam aus derselben Ecke.

Dabei drei weitere echte Fehler gefunden, alle in Neuem von heute:
  * Der Namenslink in der Fruehwarnung war 22x25 px -- unter dem
    Mindestmass von 24x24 (WCAG 2.5.8). Bei kurzen Namen trifft man
    daneben. Jetzt ein echtes Fingerziel mit negativem Aussenabstand, der
    die Polsterung optisch wieder aufhebt.
  * Die Warnkarten standen bei 320 px 9 px aus dem Bild:
    `minmax(320px, 1fr)` begrenzt die Spalte, nicht ihren Inhalt. Erst
    `min(320px, 100%)` PLUS `min-width: 0` PLUS umbrechender Kopf loesen
    es -- einzeln keines davon. Die Schreibweise stand zwei Abschnitte
    weiter oben laengst richtig da.
  * Der Zurueck-Link im Schriftzug ragte aus seinem Kasten:
    `overflow: hidden` schneidet nur die ANZEIGE ab, der Link behaelt
    seine Layoutbreite. Bei 768 px lag sein Mittelpunkt unter den
    Bedienelementen -- ein Klick dorthin traf das Falsche, auf 17 von 18
    Seiten, und zu sehen war davon nichts.

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

workspace/assets/css/uebersicht.css

@@ -231,7 +231,13 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
 
 .warnliste {
   display: grid; gap: 12px;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  /* min(320px, 100%) statt 320px. Eine feste Mindestbreite ist auf einem
+     320-px-Schirm groesser als der Platz, der nach den Raendern uebrig
+     bleibt -- die Karte stand 9 px aus dem Bild (gemessen von
+     pruef-breiten). Dieselbe Schreibweise wie bei .creator-liste und
+     .summen zwei Abschnitte weiter oben; ich habe sie hier nur nicht
+     uebernommen. */
+  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
 }
 
 .warnkarte {
@@ -242,14 +248,42 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
   border: 1px solid rgba(217, 164, 65, .28);
   border-radius: var(--radius-klein);
 }
+/* min-width: 0 UND umbrechen duerfen (06.09.2026).
+
+   `minmax(min(320px, 100%), 1fr)` begrenzt die SPALTE -- nicht das, was
+   darin steht. Solange die Karte ihren Mindestinhalt nicht unterbieten
+   darf, waechst die Spalte trotzdem mit: Bei 320 px stand sie 9 px aus
+   dem Bild, weil Name und "Schreiben"-Knopf nebeneinander bleiben
+   wollten. Beides zusammen loest es, einzeln keines von beiden. */
+.warnkarte { min-width: 0; }
 .warnkarte__kopf {
   display: flex; align-items: baseline; justify-content: space-between;
   gap: 12px; margin-bottom: 10px;
+  flex-wrap: wrap; min-width: 0;
 }
+/* Ein sehr langer Name ohne Leerzeichen ("SpongBobSchwammKopf") ist
+   sonst selbst breiter als der Schirm. */
+.warnkarte__name, .warnsignal__text { overflow-wrap: anywhere; }
 .warnkarte__name {
   font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
+  /* EIN FINGERZIEL, KEIN WORT. Als schlichter Inline-Link war der Kasten
+     genau so gross wie der Name -- bei "Tili" 22 x 25 px. Das Mindestmass
+     nach WCAG 2.2 (2.5.8) sind 24 x 24; darunter trifft man mit dem
+     Daumen daneben, und zwar ausgerechnet bei kurzen Namen. Gemessen von
+     pruef-handy auf allen drei Geraeten.
+
+     Die negativen Aussenabstaende heben die Polsterung optisch wieder
+     auf: Der Name steht danach exakt dort, wo er vorher stand, hat aber
+     eine Flaeche, die man trifft. */
+  display: inline-flex; align-items: center;
+  min-width: 44px; min-height: 32px;
+  padding: 4px 8px; margin: -4px -8px;
+  border-radius: 8px;
 }
-.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
+.warnkarte__name:hover, .warnkarte__name:focus-visible {
+  background: rgba(255, 255, 255, .05);
+}
+
 
 /* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
    ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */