Zwei bis drei Bilder je Supportmeldung -- und zwei Funde unterwegs

VanVan im Support, Meldung #11, VIERMAL gemeldet: „Hier im
Supportbereich kann man immer nur ein Bild hinzufuegen bei einer
Meldung. 2-3 waeren besser." Und in der zweiten Runde der Satz, auf
den es ankommt: „wenn man es nacheinander versucht hinzuzufuegen wird
das Bild immer nur ersetzt."

EINE TABELLE STATT NEUER SPALTEN

`support_bilder` haelt ab jetzt JEDES Supportbild -- das der Meldung
(`runde_nr` NULL) und das einer Antwort (`runde_nr` = Runde). Die
Alternative waere `bild2_datei`, `bild3_datei` gewesen, und beim
vierten Bild wieder. Eine Zeile je Bild kennt keine Obergrenze im
Schema; die Grenze steht an EINER Stelle im Code (`BILDER_MAX = 3`)
und kommt von dort in die Oberflaeche, statt dort ein zweites Mal
zu stehen.

DIE ACHT VORHANDENEN BILDER WANDERN MIT. Ohne diesen Schritt haette
die neue Tabelle ab heute recht und die alten Bilder waeren
unsichtbar -- ohne Fehler, ohne rote Zeile, nur acht leere Karten.
Der Umzug steht NACH der Spaltennachruestung: Er liest
`urteil_bild_datei`, und die gibt es in einer bestehenden Datenbank
erst, nachdem sie ergaenzt wurde. Stuende er davor, scheiterte er
genau dort, wo es darauf ankommt -- live, waehrend lokal alles gruen
bliebe, weil jede Pruefung ihre Datenbank frisch anlegt.

DREI BILDER IN EINER ANFRAGE

`x-bilder: 20481,15320` sagt, wo zu schneiden ist, der Rumpf ist die
Aneinanderreihung. `multipart/form-data` haette einen Zerleger
gebraucht, den dieses Haus nicht hat; drei Anfragen nacheinander
haetten den Zustand „Meldung da, Bild zwei laedt noch" erzeugt --
genau den, gegen den die Kommentare an dieser Route schon vorher
argumentieren. Die Summe muss auf das Byte stimmen, und jedes Stueck
wird einzeln an seinen ersten Bytes erkannt: Wer falsch schneidet,
bekommt eine Absage, kein verfaelschtes Bild. Ohne den Kopf gilt der
ganze Rumpf als ein Bild -- derselbe Satz mit einer Laenge, damit
eine Seite aus dem Zwischenspeicher weiterlaeuft.

EINE ROUTE STATT DREI. `/:id/bild` und `/:id/runde/:nr/bild` sind
weg; es gibt `/:id/bild/:bid`. Wohin ein Bild gehoert, steht in
seiner Zeile -- der Weg muss es nicht wiederholen. Die
Meldungsnummer bleibt trotzdem im Pfad: Sie ist die
Sichtbarkeitsfrage, und beides muss zusammenpassen (gemessen).

ZWEI FUNDE, DIE DIE PRUEFUNG GEMACHT HAT UND NICHT ICH

 1. UEBER DIE SEITE KAM GAR KEIN BILD MEHR AN. Beim Melden stand
    kein `Content-Type`. Das ging gut, solange der Rumpf eine
    einzelne Datei war -- ein `File` bringt seinen Typ mit. Ein
    `Blob` aus mehreren hat keinen, `fetch` schickt die Zeile dann
    gar nicht, `express.raw` fuehlt sich nicht zustaendig, und der
    Server bekam einen leeren Rumpf. Die Meldung waere durchgegangen,
    der Text angekommen, die Bilder weg -- ohne Fehlermeldung. Alle
    Pruefungen am Server waren dabei gruen; gefunden hat es erst der
    echte Browser.

 2. DAS KREUZ DES DRITTEN BILDES LAG AUF DEM ZWEITEN. Der
    Entfernen-Knopf ist 44 px breit und absolut gesetzt, der Kasten
    aber nur so breit wie sein Bild. Bei einem schmalen Bild ragt er
    darueber hinaus -- wer „das zweite weg" antippt, loescht das
    dritte. `min-width`/`min-height` loesen das an der Ursache: Ein
    Kasten ist nie schmaler als der Knopf in ihm.

WAS ICH FALSCH ANGENOMMEN HATTE: Ich hatte eingebaut, dass ein
Nachtrag in derselben Runde die Bilder ersetzt. Die Pruefung dazu
wurde rot -- zu Recht: Eine zweite Antwort in derselben Runde kann
es nicht geben, die erste verlaesst den Stand „wartet". Der Code
waere nie gelaufen und damit nie pruefbar gewesen. Er ist weg; an
seiner Stelle steht der Beweis, dass er nicht fehlt.

DREI WEITERE ROTE ZEILEN, DIE NICHT ZU DIESEM UMBAU GEHOERTEN

 * `manager-ziele.js` hatte einen ZWEITEN Notnagel
   (`frageNach ? … : confirm(…)`). `nachfrage.js` hat denselben
   laengst, und zwar mit dem vollstaendigen Text; der hiesige war
   der kuerzere und haette gewonnen. Zwei Antworten auf dieselbe
   Frage -- gemeldet von `pruef-nachfrage`.
 * Zwei Mittelpunkte in `reaktion.css` standen woertlich im
   `content`. Sie liegen im Latin-1-Block, wo `pruef-zeichen` die
   Truemmer einer verunglueckten Kodierung sucht. Jetzt als Escape
   -- im Browser nachgemessen, es steht Zeichen fuer Zeichen
   dasselbe da.
 * Das Aufraeumen nach 90 Tagen loeschte nur das EINE Bild der
   Meldung; die Bilder aus den Antwortrunden blieben ohne Zeile auf
   der Platte liegen. Die Liste kommt jetzt aus einer Abfrage statt
   aus einer Spalte und kann deshalb nicht wieder unvollstaendig
   sein.

GEPRUEFT

  pruef-support            78 -> 104 ok
    darunter: der Umzug der alten Bilder auf einer eigenen
    Wegwerf-Datenbank -- zweimal und dreimal gestartet, nichts
    verdoppelt, Datum von damals erhalten
  pruef-support-bilder     NEU, 36 ok (echter Browser)
    dreimal nacheinander waehlen ergibt drei, das vierte wird mit
    einem Satz abgelehnt, dasselbe zaehlt nicht doppelt, einzeln
    entfernen laesst die anderen stehen, alle drei laden wirklich
    (naturalWidth), Kreuze 44x44 und keines verdeckt (mit Gegenprobe
    per Deckel), nichts ragt auf 390 px heraus
  pruef-nachfrage          69 -> 74 ok
  pruef-struktur          102 ok, 413 Routen (vorher 414: zwei weg,
                          eine neu)
  pruef-zeichen             7 ok (vorher 1 Fehler)
  pruef-aufbewahrung       45 ok
  pruef-manager-ziele     216 ok
  pruef-ports              10 ok · pruef-portnummern 41 ok
    (die neue Pruefdatei verschiebt die abgeleiteten Nummern)

NUR DAS AGENTURHAUS IST BETROFFEN. Die Supportseite liegt unter
`/workspace`; am Crew-Haus aendert sich keine Zeile.

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

workspace/assets/css/support.css

@@ -71,13 +71,66 @@
 }
 .s-bild__name { font-size: .8rem; color: var(--text-still); }
 
-.s-vorschau { margin-top: 12px; }
+/* ===== BIS ZU DREI VORSCHAUEN (02.10.2026) =========================
+
+   VanVan, Meldung #11: „2-3 waeren besser." Aus einem Bild wird eine
+   Reihe -- sie bricht um, statt schmal zu werden: Drei auf 280 Pixel
+   gequetschte Bildschirmfotos zeigen nichts mehr, und genau das Zeigen
+   ist der Zweck der Vorschau.
+
+   KLEINER, WENN ES MEHRERE SIND, steht hier NICHT als eigene Regel:
+   `max-height` gilt fuer alle gleich, und der Umbruch erledigt den
+   Rest. Eine Sonderregel „ab zwei Bildern 140 px" waere eine zweite
+   Zahl, die beim naechsten Mal vergessen wird. */
+.s-vorschau {
+  margin-top: 12px;
+  display: flex; flex-wrap: wrap; gap: 10px;
+}
+/* ==== DER KASTEN MUSS SEIN EIGENES KREUZ TRAGEN (02.10.2026) ======
+
+   Gefunden von `pruef-support-bilder`, nicht beim Nachdenken: Beim
+   Klick auf das Kreuz des ZWEITEN Bildes meldete Playwright, das
+   Kreuz des DRITTEN liege davor. Grund: Das Kreuz ist 44 px breit
+   und absolut gesetzt, der Kasten aber nur so breit wie sein Bild.
+   Bei einem schmalen Bild -- ein Ausschnitt, ein hochkantes Foto in
+   Briefmarkengroesse -- ragt das Kreuz ueber den Kasten hinaus und
+   legt sich auf den Nachbarn. Wer dann „das zweite weg" antippt,
+   loescht das dritte.
+
+   `min-width` und `min-height` loesen das an der Ursache: Ein Kasten
+   ist nie schmaler als der Knopf, der in ihm liegt. */
+.s-vorschau__eins {
+  position: relative; display: block;
+  min-width: 56px; min-height: 56px;
+}
 .s-vorschau img {
-  display: block; max-width: 100%; max-height: 260px;
+  display: block; max-width: 100%; max-height: 200px;
   width: auto; height: auto;
   border-radius: var(--radius-klein);
   border: 1px solid var(--rand);
 }
+/* DAS KREUZ GEHOERT ZUM BILD, nicht in eine Liste darunter. Wer das
+   dritte Bild falsch erwischt hat, trifft es dort, wo er hinsieht.
+
+   44 PIXEL, wie jeder Knopf im Haus -- auf dem Bild liegend, deshalb
+   mit eigenem dunklem Grund: Ein helles Kreuz auf einem hellen
+   Bildschirmfoto waere unsichtbar. */
+.s-vorschau__weg {
+  position: absolute; top: 4px; right: 4px;
+  min-width: 44px; min-height: 44px;
+  display: grid; place-items: center;
+  border: 1px solid var(--rand);
+  border-radius: 999px;
+  background: rgba(10, 14, 20, .78);
+  color: var(--text);
+  font-size: 1rem; line-height: 1;
+  cursor: pointer;
+}
+.s-vorschau__weg:hover,
+.s-vorschau__weg:focus-visible {
+  background: rgba(10, 14, 20, .92);
+  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
+}
 
 .s-knopfreihe {
   display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
@@ -255,7 +308,16 @@
 }
 .s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }
 
-.s-karte__bild { margin-top: 11px; }
+/* MEHRERE BILDER STEHEN NEBENEINANDER und brechen um (02.10.2026).
+   Hier stand nur ein `margin-top` -- ein Kasten fuer genau ein Bild.
+
+   DIE SCHRANKE IST DIE BREITE, nicht die Anzahl: 340 Pixel halten die
+   Reihe auch dann zusammen, wenn sie rechts neben dem Text steht
+   (ab 760 px, siehe unten). Ohne sie waere die Bildspalte bei drei
+   Bildern breiter als der Text daneben. */
+.s-karte__bild { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
+.s-karte__bild[data-viele] { max-width: 340px; }
+.s-karte__bild[data-viele] img { max-height: 150px; }
 .s-karte__bild img {
   display: block; max-width: 100%; max-height: 300px;
   width: auto; height: auto;
@@ -292,24 +354,14 @@
    Dieselbe Fase, derselbe heller werdende Rand und dieselbe
    Fokusmarke wie oben: Was gleich funktioniert, soll gleich
    aussehen. */
-.s-runde__bild {
-  display: block;
-  margin-top: 8px;
-  border-radius: 3px;
-}
-.s-runde__bild img {
-  display: block; max-width: 100%; max-height: 180px;
-  width: auto; height: auto;
-  border: 1px solid var(--rand);
-  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
-  box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .95);
-  transition: border-color var(--tempo, .18s);
-}
-.s-runde__bild:hover img,
-.s-runde__bild:focus-visible img {
-  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
-}
-.s-runde__bild:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
+/* SEIT DEM 02.10. DERSELBE KASTEN wie oben (`.s-karte__bild`), nur
+   kleiner. Hier stand eine eigene Klasse `.s-runde__bild` mit fast
+   denselben zwanzig Zeilen -- zwei Stellen, an denen dasselbe steht,
+   und beim naechsten Mal wird nur eine davon verbessert. Was bleibt,
+   ist der Groessenunterschied, und der ist der ganze Grund: */
+.s-runde .s-karte__bild { margin-top: 8px; }
+.s-runde .s-karte__bild img { max-height: 180px; }
+.s-runde .s-karte__bild[data-viele] img { max-height: 120px; }
 
 /* =====================================================================
    DAS BILD NEBEN DEN TEXT, NICHT DARUNTER (25.09.2026)
@@ -328,8 +380,15 @@
    Breite waere eine Luecke bei jeder Meldung ohne Bild -- und die sind
    die Mehrzahl.
    ===================================================================== */
+/* `:has(> …)` UND NICHT `:has(…)` -- der Pfeil ist seit dem 02.10.
+   nicht mehr Geschmackssache. Seit die Rundenbilder denselben Kasten
+   benutzen (siehe oben), traefe die Regel ohne Pfeil auch auf eine
+   Karte zu, deren Bild tief im Verlauf steckt: Die Karte bekaeme eine
+   zweite Spalte, in der nichts steht, und der Text waere ohne Grund
+   halb so breit. Gefragt ist das EIGENE Bild der Meldung, also das
+   direkte Kind. */
 @media (min-width: 760px) {
-  .s-karte:has(.s-karte__bild) {
+  .s-karte:has(> .s-karte__bild) {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
@@ -341,12 +400,12 @@
     column-gap: 20px;
     align-items: start;
   }
-  .s-karte:has(.s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
-  .s-karte:has(.s-karte__bild) > .s-karte__text { grid-area: text; }
-  .s-karte:has(.s-karte__bild) > .s-karte__wo { grid-area: wo; }
-  .s-karte:has(.s-karte__bild) > .s-antwort { grid-area: antwort; }
-  .s-karte:has(.s-karte__bild) > .s-karte__tun { grid-area: tun; }
-  .s-karte:has(.s-karte__bild) > .s-karte__bild {
+  .s-karte:has(> .s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
+  .s-karte:has(> .s-karte__bild) > .s-karte__text { grid-area: text; }
+  .s-karte:has(> .s-karte__bild) > .s-karte__wo { grid-area: wo; }
+  .s-karte:has(> .s-karte__bild) > .s-antwort { grid-area: antwort; }
+  .s-karte:has(> .s-karte__bild) > .s-karte__tun { grid-area: tun; }
+  .s-karte:has(> .s-karte__bild) > .s-karte__bild {
     grid-area: bild; margin-top: 0; align-self: start;
   }
   /* 180 UND NICHT 260 (gemessen 25.09.2026). Bei 260 war die Karte
@@ -355,7 +414,13 @@
      anklickbar ("In voller Groesse ansehen"), eine Vorschau reicht
      also. Ein Handy-Bildschirmfoto ist bei 180 px noch als solches zu
      erkennen; darum geht es an dieser Stelle. */
-  .s-karte:has(.s-karte__bild) > .s-karte__bild img { max-height: 180px; }
+  .s-karte:has(> .s-karte__bild) > .s-karte__bild img { max-height: 180px; }
+  /* UND KLEINER, WENN ES MEHRERE SIND. Bei 180 px stuenden zwei
+     nebeneinander und das dritte darunter -- die Karte waere hoeher
+     als bei einem einzigen grossen Bild, und genau das sollte die
+     zweite Spalte verhindern. Bei 120 px passen drei in zwei Reihen
+     in dieselbe Hoehe. */
+  .s-karte:has(> .s-karte__bild) > .s-karte__bild[data-viele] img { max-height: 120px; }
 }
 .s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }