Verwaltung uebersichtlicher, Bildlaufleiste dunkel

Rueckmeldung 22.08.2026 zur Anfrage-Detailansicht: "das ganze soll viel
uebersichtlicher sein und nicht so durcheinander" und "die leiste rechts
zum hoch und runter, kannst du die mal geil aussehen lassen anstatt
einfach so kake weiss."

1. DAS DURCHEINANDER HATTE EINE URSACHE

Die Kaesten standen in "columns: 2" -- Zeitungsspalten. Die fuellen sich
von selbst: erst Spalte eins bis oben voll, dann Spalte zwei. Wo ein
Kasten landet, haengt allein davon ab, wie lang die vor ihm sind. Bei
einer Anfrage stand "Interne Notizen" oben rechts, bei der naechsten
unten links. Es gab schlicht keine Ordnung, der man haette folgen koennen.

Jetzt ein festes Raster mit einer Aussage:
  LINKS  = was der Kunde geschickt hat   (lesen)
  RECHTS = was du damit machst           (handeln)

Immer gleich. Nach der zweiten Anfrage weiss man, wo man hinschaut, ohne
zu suchen. Rechts ist schmaler (Knoepfe brauchen weniger Platz als
laufender Text) und klebt beim Scrollen mit -- die Handlungen sind der
Grund, warum man die Ansicht oeffnet, sie duerfen nicht aus dem Bild
wandern.

Reihenfolge rechts korrigiert: "Anfrage uebernehmen" steht jetzt oben.
Es ist der Knopf, den man bei einer neuen Anfrage druecken WILL -- er
stand unter den Notizen und damit ausserhalb des sichtbaren Bereichs.

2. "KEINE ANGABE" WAR DIE HALBE ANSICHT

Jede fehlende Angabe bekam eine eigene Zeile. Der Kasten "Umfang"
enthielt zweimal nichts und war trotzdem so gross wie einer mit Inhalt.

Leere Felder sind aber keine Information, sondern deren Fehlen. Sie
stehen jetzt als EINE leise Zeile am Fuss: "Ohne Angabe: Bereiche,
Funktionen". Aus sechs Zeilen wird eine. Weggelassen werden sie nicht --
man muss sehen, wonach gefragt wurde und was unbeantwortet blieb, genau
daraus entstehen die Rueckfragen.

Neu darueber: "Auf einen Blick" mit Paket, Budget, Wunschtermin und
Alter. Die vier Fragen, die man immer zuerst hat, standen vorher auf drei
Kaesten verteilt. Das Alter als "vor 3 Tagen" statt als Datum -- die
Frage ist nie "welcher Tag war das", sondern "wie lange liegt das schon
hier", und die beantwortet ein Datum erst nach Kopfrechnen.

3. BILDLAUFLEISTE -- und ein Fehler, der fast durchgegangen waere

Auf einer durchgehend dunklen Seite ist eine weisse Bildlaufleiste der
einzige grelle Streifen im Bild. Sie zieht den Blick dorthin, wo nichts
Wichtiges steht, und blendet. Verstoesst gegen die Dauervorgabe
"augenschonend".

Zwei Wege noetig, weil kein Browser beide versteht: color-scheme: dark
fuer Firefox/Safari (wirkt zusaetzlich auf Auswahl- und Datumsfelder, die
sonst weiss aufblitzen), ::-webkit-scrollbar fuer Chrome/Edge.
scrollbar-width/-color bewusst NICHT gesetzt -- sobald es dasteht,
ignoriert Chrome die feineren ::-webkit-Regeln.

Beim ersten Versuch stand dort nur ".wd ::-webkit-scrollbar" -- MIT
Leerzeichen. Das trifft nur Elemente INNERHALB der Seite, nicht den body
selbst. Alle Messungen sahen gut aus; an der einen Leiste, ueber die sich
jemand beschwert hatte, haette sich nichts geaendert. Jetzt beide
Fassungen, mit einem Warnhinweis im CSS.

GEPRUEFT

Neue Datei pruef-detail.mjs: echter Browser, 1440x900 und 390x844, mit
einer absichtlich sehr knappen Anfrage -- genau die sah vorher schlecht
aus. 20 Pruefungen, alle bestanden: Spalten nebeneinander bzw. auf dem
Handy untereinander, rechte schmaler als linke, keine Ueberlappung, kein
waagerechtes Schieben, nichts ragt aus dem Fenster, keine einzelne
"keine Angabe"-Zeile mehr, keine Fehler im Protokoll.

Die Bildlaufleiste liess sich nur in einem ECHTEN Browserfenster pruefen:
Headless-Chromium blendet Leisten grundsaetzlich ueber dem Inhalt ein und
meldet deshalb immer 0 px Breite. Mit sichtbarem Fenster gemessen: 12 px,
alle sechs Regeln vom Browser akzeptiert.

Versionsstempel auf allen 11 Seiten und Cache-Name des Service Workers
auf v3 -- sonst liefert der eigene Zwischenspeicher beim ersten Laden
weiter die alte Fassung aus.

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

assets/css/webdesign.css

@@ -75,6 +75,89 @@
   --wd-zeit-lang: .6s;
 }
 
+/* ---------------------------------------------------------------------
+   1b. BILDLAUFLEISTE
+
+   Rückmeldung 22.08.2026: "die leiste rechts zum hoch und runter, kannst
+   du die mal geil aussehen lassen anstatt einfach so kake weiß."
+
+   Zu Recht. Auf einer durchgehend dunklen Seite ist eine helle
+   Bildlaufleiste der einzige grelle Streifen im Bild — sie zieht den
+   Blick genau dorthin, wo nichts Wichtiges steht, und ist bei einer
+   dunklen Umgebung schlicht blendend. Das widerspricht der Dauervorgabe
+   "augenschonend".
+
+   Zwei Wege sind nötig, weil kein Browser beide versteht:
+
+     * color-scheme: dark  -- Firefox und Safari. Ein einziges Wort, das
+       dem Browser sagt: das hier ist eine dunkle Oberfläche, nimm deine
+       dunklen Bedienelemente. Wirkt auch auf Auswahlfelder und
+       Datumsauswahl, die sonst weiß aufblitzen.
+
+     * ::-webkit-scrollbar -- Chrome, Edge, Opera. Feiner steuerbar,
+       aber ausschließlich dort verfügbar.
+
+   scrollbar-width/-color (die neue Norm) NICHT verwendet: Sobald es
+   gesetzt ist, ignoriert Chrome die ::-webkit-Regeln und man bekommt
+   überall die grobe Fassung. Zwei getrennte Wege ergeben in beiden
+   Browserfamilien das bessere Ergebnis.
+
+   Die Leiste ist bewusst zurückhaltend: gedeckt, erst beim Zeigen etwas
+   heller. Sie soll auffindbar sein, nicht leuchten.
+   --------------------------------------------------------------------- */
+body.wd,
+.wd input, .wd select, .wd textarea {
+  /* Wirkt zusätzlich auf Formularfelder — sonst bleibt die Datumsauswahl
+     in Firefox ein weißes Rechteck mitten in der dunklen Seite. */
+  color-scheme: dark;
+}
+
+/* ACHTUNG bei den Selektoren: "body.wd::-webkit-scrollbar" (ohne
+   Leerzeichen) und ".wd ::-webkit-scrollbar" (mit Leerzeichen) sind
+   zwei VERSCHIEDENE Dinge, und man braucht beide.
+
+     ohne Leerzeichen -> die Leiste des body selbst, also die grosse
+                         rechts am Fensterrand. GENAU die war gemeint.
+     mit Leerzeichen  -> die Leisten von Elementen INNERHALB der Seite,
+                         z.B. im Detailfenster der Verwaltung.
+
+   Beim ersten Versuch stand hier nur die zweite Fassung. Alle Messungen
+   sahen gut aus — an der einzigen Leiste, ueber die sich jemand
+   beschwert hatte, aenderte sich dadurch nichts. */
+body.wd::-webkit-scrollbar,
+.wd ::-webkit-scrollbar { width: 12px; height: 12px; }
+
+body.wd::-webkit-scrollbar-track,
+.wd ::-webkit-scrollbar-track {
+  background: rgba(8, 14, 24, .6);
+  border-radius: 999px;
+}
+
+body.wd::-webkit-scrollbar-thumb,
+.wd ::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(127,208,232,.44), rgba(183,157,255,.36));
+  border-radius: 999px;
+  /* Der durchsichtige Rand lässt die Spur seitlich durchscheinen — der
+     Griff wirkt dadurch schmaler als die Trefferfläche. Bedienbar bleibt
+     die volle Breite, sichtbar ist nur ein feiner Strich. */
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+body.wd::-webkit-scrollbar-thumb:hover,
+.wd ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(127,208,232,.6), rgba(183,157,255,.5));
+  background-clip: content-box;
+}
+body.wd::-webkit-scrollbar-thumb:active,
+.wd ::-webkit-scrollbar-thumb:active {
+  background: linear-gradient(180deg, rgba(127,208,232,.8), rgba(183,157,255,.7));
+  background-clip: content-box;
+}
+/* Die Ecke zwischen waagerechter und senkrechter Leiste — ohne diese
+   Zeile bleibt genau dort ein weißes Quadrat stehen. */
+body.wd::-webkit-scrollbar-corner,
+.wd ::-webkit-scrollbar-corner { background: transparent; }
+
 /* ---------------------------------------------------------------------
    2. GRUNDLAGEN
    --------------------------------------------------------------------- */