Neun gemeldete Fehler, und die Frage, welcher Build gerade läuft

Ein grosser Commit, weil die Punkte einander bedingen: ohne lesbare
Fehlermeldung war die Serienerkennung nicht zu diagnostizieren, und ohne
Build-Kennung nicht einmal festzustellen, ob überhaupt der gebaute Stand
läuft. Zwei der neun Meldungen betrafen Funktionen, die seit Stunden im
Quelltext stehen.

Version und Build. Die Version steht fest; daneben eine Kennung aus
sechs Zeichen, die sich bei jedem Docker-Bau ändert. Sie steht in der
Verwaltung, unter /health und im Protokoll bei jedem Start. Damit ist
"reden wir vom selben Build?" in zwei Sekunden beantwortet statt in
einem halben Tag.

Serien. Lag eine Datei direkt im Serienordner und trug vor der
Folgennummer nichts, wurde der ganze Dateiname zum Serientitel: aus 95
Serien wurden 737, jede mit einer Folge, bei jedem Lauf neu. Dazu lief
der Scan in Verweise hinein — derselbe Ordner unter zwei Namen ergab
zwei Serien. Und weder neue noch umgezogene Dateien standen in der
Pfadliste des Laufs, weshalb ein doppelt gesehener Pfad eine zweite
Zeile mit gleichem (LibraryId, Path) anlegte und der
Eindeutigkeitsindex den ganzen Speichervorgang scheitern liess. Jede
Serienanlage wird jetzt im Tagesprotokoll begründet.

Fehlermeldungen. "An error occurred while saving the entity changes"
stand englisch in einer deutschen Oberfläche und nannte weder Ursache
noch nächsten Schritt. Jetzt geht der vollständige Text ins Protokoll
und ein deutscher Satz ohne Fehlercode in die Anzeige — auch für
"Failed to fetch", das aus dem Browser kam und nie übersetzt wurde.

Protokolle. Die Ansicht holte die ganze Datei und zeigte 800 Zeilen
davon; bei zwei Megabyte brach die Verbindung ab. Gelesen wird jetzt
serverseitig rückwärts, mit einem Knopf für mehr.

Auswahlfelder. Die drei <select> zeichnete das Betriebssystem: ein
helles Systemmenü mitten in der dunklen Oberfläche. Ersetzt durch ein
eigenes Listenfeld mit Tastaturbedienung.

Bildwahl. Drei Raster untereinander in einem scrollenden Dialog hiess
zwei Scrollebenen übereinander. Jetzt ein Reiter je Bildtyp.

Sprache. Die Serversprache stand in der Serverliste zwischen Name,
Metadaten und Fassung — gesucht und nicht gefunden. Sie hat jetzt einen
eigenen Abschnitt ganz oben.

Dazu: ein Knopf, der den erfassten Inhalt einer Mediathek verwirft, ohne
Name und Pfad mitzunehmen; ein Abschnitt Speicher mit den drei Pfaden,
ihrer Belegung und dem Leeren des Bildspeichers; und die Korrektur einer
Zuordnung frischt nur noch die Kachel auf statt die ganze Seite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/style.css

@@ -261,23 +261,53 @@ svg { width: 20px; height: 20px; display: block; flex: none; }
 .pille {
   position: relative; display: inline-flex; align-items: center;
 }
-.pille select {
-  appearance: none; -webkit-appearance: none;
-  background: none; border: 0; outline: none; cursor: pointer;
-  color: var(--text-dim); font-weight: 500;
-  padding: 6px 26px 6px 11px; border-radius: var(--r-pill);
+.pille .auswahl {
+  background: none; border: 0; color: var(--text-dim); font-weight: 500;
+  padding: 6px 11px; border-radius: var(--r-pill);
 }
-.pille select:hover { background: var(--elevated); color: var(--text); }
-.pille select:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+.pille .auswahl:hover { background: var(--elevated); color: var(--text); }
 /* Gesetzt heisst farbig — so sieht man ohne Lesen, dass gefiltert wird. */
-.pille.gesetzt select { color: var(--accent); }
-.pille::after {
-  content: ''; position: absolute; right: 11px; top: 50%;
-  width: 6px; height: 6px; margin-top: -4px;
-  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
-  transform: rotate(45deg); color: var(--text-faint); pointer-events: none;
+.pille.gesetzt .auswahl { color: var(--accent); }
+
+/* ---------- Auswahlfeld ----------
+ *
+ * Ersetzt <select>. Dessen Liste zeichnet das Betriebssystem: mitten in der
+ * dunklen Oberfläche erschien ein helles Systemmenü, das sich weder färben
+ * noch runden lässt. Die Liste hier ist dieselbe Fläche wie das Kontextmenü
+ * — gleicher Rahmen, gleiche Radien, gleicher Schatten.
+ */
+.auswahl {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--elevated); border: 1px solid var(--line);
+  border-radius: var(--r-knopf); cursor: pointer;
+  color: var(--text-dim); font-size: var(--t-normal); font-weight: 500;
+  padding: 7px 10px; text-align: left;
 }
-.pille.gesetzt::after { color: var(--accent); }
+.auswahl:hover { color: var(--text); }
+.auswahl > span:first-child {
+  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.auswahl-pfeil { display: inline-flex; color: var(--text-faint); }
+.auswahl-pfeil svg { width: 15px; height: 15px; }
+.auswahl[aria-expanded='true'] .auswahl-pfeil { transform: rotate(180deg); }
+
+.auswahl-liste {
+  position: fixed; z-index: 120;
+  max-height: min(50vh, 360px); overflow-y: auto;
+  padding: var(--s-tight);
+  background: var(--elevated);
+  border: 1px solid var(--line); border-radius: var(--r-flaeche);
+  box-shadow: var(--schatten-dialog);
+  display: flex; flex-direction: column;
+}
+.auswahl-punkt {
+  background: none; border: 0; border-radius: var(--r-knopf);
+  padding: 8px var(--s-regular); text-align: left; white-space: nowrap;
+  color: var(--text-dim); font-size: var(--t-normal);
+}
+.auswahl-punkt:hover { background: var(--raised); color: var(--text); }
+/* Das Gewählte trägt die Akzentfarbe — ohne Haken, der die Breite verschiebt. */
+.auswahl-punkt.gewaehlt { color: var(--accent); font-weight: 600; }
 
 .filterzeile .zuruecksetzen {
   background: none; border: 0; padding: 6px 4px;
@@ -612,6 +642,9 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
   display: flex; flex-direction: column; gap: var(--s-loose);
   max-height: 60vh; overflow-y: auto;
 }
+/* Im Bilddialog ist die Höhe fest: so springt die Fläche beim Reiterwechsel
+ * nicht, und der Reiter bleibt an derselben Stelle. */
+.dlg-breit .dlg-koerper { height: 62vh; max-height: none; }
 .dlg-feld { display: flex; flex-direction: column; gap: var(--s-snug); }
 .dlg-feld.waagerecht {
   flex-direction: row; align-items: center; gap: var(--s-snug); cursor: pointer;
@@ -903,10 +936,36 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
 .bildblock { display: flex; flex-direction: column; gap: var(--s-snug); }
 .bildblock h3 { margin: 0; font-size: var(--t-gross); font-weight: 600; flex: 1; }
 
+/* ---------- Bildwahl: ein Reiter je Typ ----------
+ *
+ * Vorher standen Plakat, Hintergrund und Schriftzug untereinander: der
+ * Dialogkörper scrollte, und jedes Raster darin scrollte noch einmal. Wo das
+ * Rad landet, hing davon ab, über welcher Fläche der Zeiger gerade stand.
+ * Jetzt ist ein Typ sichtbar, und genau eine Fläche scrollt.
+ */
+.bildreiter {
+  display: flex; gap: var(--s-tight);
+  border-bottom: 1px solid var(--line);
+  margin: calc(var(--s-loose) * -1) 0 0;
+  position: sticky; top: 0; z-index: 2; background: var(--surface);
+}
+.bildreiter-knopf {
+  display: inline-flex; align-items: baseline; gap: 6px;
+  background: none; border: 0; border-bottom: 2px solid transparent;
+  padding: 10px var(--s-regular); margin-bottom: -1px;
+  color: var(--text-muted); font-size: var(--t-normal); font-weight: 600;
+}
+.bildreiter-knopf:hover { color: var(--text); }
+.bildreiter-knopf.an { color: var(--text); border-bottom-color: var(--accent); }
+.bildreiter-knopf .winzig { color: var(--text-faint); }
+
+/* **Die eine scrollende Fläche.** Der Dialogkörper selbst wächst nicht mehr
+ * mit, sonst wären es wieder zwei. */
+.bildbuehne { display: flex; flex-direction: column; min-height: 220px; }
+
 .bildgitter {
   display: grid; gap: var(--s-snug);
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-  max-height: 260px; overflow-y: auto;
   padding: 2px;
 }