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]>

webdesign/verwaltung.html

@@ -11,8 +11,8 @@
 <link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-title" content="DF Verwaltung" />
-<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
-<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
+<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd3" />
+<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
 <style>
   /* =====================================================================
      Verwaltungsbereich — bewusst NUR AUF DEUTSCH.
@@ -186,25 +186,110 @@
     z-index: 2;
   }
 
-  /* Zwei Spalten ab Tablet: die Abschnitte sind unterschiedlich hoch,
-     deshalb Mauerwerk statt Raster — sonst entstehen grosse Luecken. */
-  @media (min-width: 780px) {
-    .vw-detail-spalten { columns: 2; column-gap: 1.4rem; }
-    .vw-detail-spalten > .vw-abschnitt {
-      break-inside: avoid; -webkit-column-break-inside: avoid;
-      display: inline-block; width: 100%;
+  /* ---------- Zwei Spalten MIT BEDEUTUNG ----------
+     Vorher "columns: 2" — also Zeitungsspalten. Die füllen sich von
+     selbst: erst Spalte eins bis oben voll, dann Spalte zwei. Welcher
+     Kasten wo landet, hängt allein davon ab, wie lang die davor sind.
+     Bei einer Anfrage stand "Interne Notizen" oben rechts, bei der
+     nächsten unten links. Genau das war das Durcheinander
+     (Rückmeldung 22.08.2026) — es gab schlicht keine Ordnung, der man
+     hätte folgen können.
+
+     Jetzt ein festes Raster mit einer Aussage:
+
+       LINKS  = was der Kunde geschickt hat        (lesen)
+       RECHTS = was du damit machst                (handeln)
+
+     Diese Trennung ist immer gleich. Man weiss nach der zweiten Anfrage,
+     wo man hinschauen muss, ohne zu suchen.
+
+     Die rechte Spalte ist schmaler: Sie enthaelt Knoepfe und kurze Texte,
+     die linke laufende Angaben. Gleich breit wuerde rechts Luft und
+     links Enge erzeugen.
+
+     Und sie klebt beim Scrollen mit. Die Handlungen sind der Grund, warum
+     man diese Ansicht ueberhaupt oeffnet — sie duerfen nicht nach unten
+     aus dem Bild wandern, waehrend man oben die Angaben liest. */
+  @media (min-width: 900px) {
+    .vw-detail-spalten {
+      display: grid;
+      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+      gap: 0 1.3rem;
+      align-items: start;
+    }
+    .vw-dt-links, .vw-dt-rechts { min-width: 0; }
+    .vw-dt-rechts {
+      position: sticky;
+      /* Abstand zur oben klebenden Kopfzeile, sonst schiebt sich der
+         erste Kasten darunter. */
+      top: 6.2rem;
     }
   }
+  /* Unter 900px untereinander — in der Reihenfolge lesen, dann handeln. */
+  .vw-dt-links, .vw-dt-rechts { display: flex; flex-direction: column; }
+
+  /* ---------- Auf einen Blick ----------
+     Die vier Fragen, die man IMMER zuerst hat: Was will der? Wie viel
+     Geld? Bis wann? Wie alt ist die Anfrage? Sie standen bisher verteilt
+     in drei verschiedenen Kaesten weiter unten. Jetzt einmal oben,
+     gross, ohne Suchen. */
+  .vw-blick {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
+    gap: .5rem;
+    margin-bottom: 1.1rem;
+  }
+  .vw-blick-feld {
+    padding: .7rem .8rem;
+    border-radius: 12px;
+    background: rgba(127,208,232,.055);
+    border: 1px solid var(--wd-rand);
+    min-width: 0;
+  }
+  .vw-blick-was {
+    display: block; font-size: .68rem; letter-spacing: .11em;
+    text-transform: uppercase; color: var(--wd-text-soft); margin-bottom: .22rem;
+  }
+  .vw-blick-wert {
+    display: block; font-family: var(--font-head); font-weight: 700;
+    font-size: .98rem; color: var(--wd-text); line-height: 1.25;
+    overflow-wrap: break-word;
+  }
+  .vw-blick-wert.vw-leer { font-family: var(--font-body); font-weight: 400; opacity: .5; font-size: .88rem; }
+
+  /* ---------- Nicht Angegebenes ----------
+     Vorher bekam jede fehlende Angabe eine eigene Zeile mit "keine
+     Angabe". Bei einer knappen Anfrage bestand die halbe Ansicht daraus —
+     der Kasten "Umfang" enthielt nichts als zweimal diesen Text und war
+     trotzdem so gross wie ein Kasten mit Inhalt.
+
+     Leere Felder sind aber keine Information, sondern deren Fehlen. Sie
+     stehen jetzt als EINE zurueckhaltende Zeile am Fuss des Kastens.
+     Weggelassen werden sie nicht: Man muss sehen koennen, wonach gefragt
+     wurde und was unbeantwortet blieb — genau daraus entstehen die
+     Rueckfragen. */
+  .vw-ohne {
+    margin-top: .55rem; padding-top: .5rem;
+    border-top: 1px dashed var(--wd-rand);
+    font-size: .8rem; color: var(--wd-text-soft); line-height: 1.5;
+  }
+  .vw-ohne b { font-weight: 600; color: var(--wd-text-soft); }
+
+  /* Ein Kasten, in dem GAR NICHTS ausgefuellt wurde, tritt als Ganzes
+     zurueck — er soll nicht dieselbe Aufmerksamkeit bekommen wie einer
+     mit Inhalt. */
+  .vw-abschnitt--leer { opacity: .62; }
+  .vw-abschnitt--leer:hover { opacity: 1; }
 
   /* Jeder Abschnitt wird eine eigene Flaeche statt nur einer Linie. */
-  .vw-detail-spalten > .vw-abschnitt {
+  .vw-detail-spalten .vw-abschnitt {
     padding: .95rem 1.1rem 1rem;
     border-radius: 14px;
     background: rgba(16, 26, 41, .5);
     border: 1px solid var(--wd-rand);
     margin-bottom: 1.1rem;
   }
-  .vw-detail-spalten > .vw-abschnitt > h3 { border-bottom: none; padding-bottom: 0; margin-bottom: .7rem; }
+  .vw-detail-spalten .vw-abschnitt > h3 { border-bottom: none; padding-bottom: 0; margin-bottom: .7rem; }
 
   /* "keine Angabe" tritt zurueck: Es ist die Abwesenheit einer Information
      und darf nicht so aussehen wie eine. */
@@ -439,7 +524,7 @@
   <div class="vw-detail-blatt" id="vw-detail-blatt"></div>
 </div>
 
-<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
+<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
 <script>
 /* =====================================================================
    Verwaltung: Anfragen ansehen, Status ändern, Notizen, Archivieren.
@@ -793,6 +878,52 @@
       (leer ? "keine Angabe" : s(roh ? roh : wert)) + "</dd></div>";
   }
 
+  /* Baut einen Kasten aus Paaren [Bezeichnung, Wert] und trennt dabei
+     Ausgefuelltes von Leerem: gefuellte Angaben als vollwertige Zeilen,
+     alle fehlenden zusammen als eine leise Zeile darunter.
+
+     Der Unterschied in der Praxis: Aus sechs Zeilen "keine Angabe"
+     untereinander wird "Ohne Angabe: Telefon, Zielgruppe, Termin" — eine
+     Zeile statt sechs, und man liest auf einen Blick, was noch fehlt,
+     statt es sich aus Luecken zusammenzusuchen. */
+  function abschnitt(titel, paare, anhang) {
+    var gefuellt = paare.filter(function (p) { return p[1]; });
+    var fehlend = paare.filter(function (p) { return !p[1]; }).map(function (p) { return p[0]; });
+
+    var innen = gefuellt.map(function (p) { return paar(p[0], p[1]); }).join("");
+    /* Anhang (Knoepfe, Zusatzfragen) VOR die Fehlt-Zeile. Die gehoert an
+       den Fuss des Kastens — ein Knopf darunter sah aus, als beziehe er
+       sich auf die fehlenden Angaben. */
+    innen += anhang || "";
+    if (fehlend.length) {
+      innen += '<div class="vw-ohne"><b>Ohne Angabe:</b> ' + s(fehlend.join(", ")) + "</div>";
+    }
+    return '<div class="vw-abschnitt' + (gefuellt.length ? "" : " vw-abschnitt--leer") + '">' +
+      "<h3>" + s(titel) + "</h3>" + innen + "</div>";
+  }
+
+  function blickFeld(was, wert) {
+    var leer = !wert;
+    return '<div class="vw-blick-feld"><span class="vw-blick-was">' + s(was) + "</span>" +
+      '<span class="vw-blick-wert' + (leer ? " vw-leer" : "") + '">' +
+      (leer ? "offen" : s(wert)) + "</span></div>";
+  }
+
+  /* "vor 3 Tagen" statt eines Datums. Beim Sichten der Anfragen ist die
+     Frage nie "welcher Tag war das", sondern "wie lange liegt das schon
+     hier" — und die beantwortet ein Datum erst nach Kopfrechnen. */
+  function alter(iso) {
+    var ms = Date.now() - new Date(iso).getTime();
+    var tage = Math.floor(ms / 86400000);
+    if (isNaN(tage)) return "";
+    if (tage <= 0) return "heute";
+    if (tage === 1) return "gestern";
+    if (tage < 7) return "vor " + tage + " Tagen";
+    if (tage < 14) return "vor 1 Woche";
+    if (tage < 60) return "vor " + Math.floor(tage / 7) + " Wochen";
+    return "vor " + Math.floor(tage / 30) + " Monaten";
+  }
+
   async function oeffneDetail(id) {
     offeneId = id;
     detail.classList.add("vw-auf");
@@ -816,46 +947,80 @@
           '<span class="vw-status vw-status--' + s(a.status) + '">' + s(STATUS_TEXT[a.status] || a.status) + "</span></div>" +
           '<button class="vw-zu" type="button" aria-label="Schließen">✕</button>' +
         "</div>" +
+        /* Auf einen Blick — die vier Fragen, die man immer zuerst hat. */
+        '<div class="vw-blick">' +
+          blickFeld("Paket", PAKET_TEXT[a.paket] || a.paket) +
+          blickFeld("Budget", BUDGET_TEXT[a.budget] || a.budget) +
+          blickFeld("Wunschtermin", a.termin) +
+          blickFeld("Eingegangen", alter(a.erstellt_am)) +
+        "</div>" +
+
         '<div class="vw-detail-spalten">' +
 
-        '<div class="vw-abschnitt"><h3>Kontakt</h3>' +
-          paar("E-Mail", a.email) +
-          paar("Telefon", a.telefon) +
-          paar("Bevorzugt", a.kontaktweg === "telefon" ? "Telefon" : "E-Mail") +
-          paar("Sprache", a.sprache) +
+        /* ----- LINKS: was der Kunde geschickt hat (lesen) ----- */
+        '<div class="vw-dt-links">' +
+
+        abschnitt("Kontakt", [
+          ["E-Mail", a.email],
+          ["Telefon", a.telefon],
+          ["Bevorzugt", a.kontaktweg === "telefon" ? "Telefon" : "E-Mail"],
+          ["Sprache", (a.sprache || "").toUpperCase()],
+        ],
           '<div class="wd-btn-reihe" style="margin-top:.7rem">' +
             '<a class="wd-btn wd-btn--zweit wd-btn--klein" href="mailto:' + s(a.email) +
             "?subject=" + encodeURIComponent("Deine Anfrage " + a.nummer + " bei Dogfather Webdesign") +
-            '">Antwort schreiben</a></div>' +
-        "</div>" +
+            '">Antwort schreiben</a></div>') +
 
-        '<div class="vw-abschnitt"><h3>Vorhaben</h3>' +
-          paar("Paket", PAKET_TEXT[a.paket] || a.paket) +
-          paar("Ziel", a.ziel) +
-          paar("Zielgruppe", a.zielgruppe) +
-        "</div>" +
+        abschnitt("Vorhaben", [
+          ["Ziel", a.ziel],
+          ["Zielgruppe", a.zielgruppe],
+        ]) +
 
-        '<div class="vw-abschnitt"><h3>Umfang</h3>' +
-          paar("Bereiche", a.seiten) +
-          paar("Funktionen", funktionen) +
-          details +
-        "</div>" +
+        /* "details" sind die Zusatzfragen aus dem Formular — sie kommen
+           schon fertig gebaut und immer gefuellt, deshalb als Anhang. */
+        abschnitt("Umfang", [
+          ["Bereiche", a.seiten],
+          ["Funktionen", funktionen],
+        ], details) +
 
-        '<div class="vw-abschnitt"><h3>Vorhandene Inhalte</h3>' +
-          paar("Texte", VORHANDEN_TEXT[a.hat_texte] || a.hat_texte) +
-          paar("Bilder", VORHANDEN_TEXT[a.hat_bilder] || a.hat_bilder) +
-          paar("Logo", VORHANDEN_TEXT[a.hat_logo] || a.hat_logo) +
-          paar("Domain", VORHANDEN_TEXT[a.hat_domain] || a.hat_domain) +
-        "</div>" +
-
-        '<div class="vw-abschnitt"><h3>Rahmen</h3>' +
-          paar("Budget", BUDGET_TEXT[a.budget] || a.budget) +
-          paar("Wunschtermin", a.termin) +
-          paar("Eingegangen", window.WD.datum(a.erstellt_am)) +
-        "</div>" +
+        abschnitt("Vorhandene Inhalte", [
+          ["Texte", VORHANDEN_TEXT[a.hat_texte] || a.hat_texte],
+          ["Bilder", VORHANDEN_TEXT[a.hat_bilder] || a.hat_bilder],
+          ["Logo", VORHANDEN_TEXT[a.hat_logo] || a.hat_logo],
+          ["Domain", VORHANDEN_TEXT[a.hat_domain] || a.hat_domain],
+        ]) +
 
         (a.bemerkung ? '<div class="vw-abschnitt"><h3>Bemerkung</h3>' + paar("", a.bemerkung) + "</div>" : "") +
 
+        "</div>" +
+
+        /* ----- RECHTS: was du damit machst (handeln) ----- */
+        '<div class="vw-dt-rechts">' +
+
+        /* Der wichtigste Knopf steht oben. Bei einer neuen Anfrage ist die
+           Uebernahme das, was man tun WILL — sie stand vorher unter den
+           Notizen und damit ausserhalb des Bildes. */
+        (a.kunde_id
+          ? '<div class="vw-abschnitt"><h3>Kunde</h3>' +
+            '<p class="wd-klein wd-leise">Aus dieser Anfrage wurde bereits ein Kundenzugang erstellt. Du findest ihn oben unter „Kunden“.</p></div>'
+          : '<div class="vw-abschnitt"><h3>Weiter geht es</h3>' +
+            '<div class="vw-uebernahme">' +
+              "<h4>Anfrage übernehmen</h4>" +
+              "<p>Legt in einem Schritt den Kundenzugang UND das Projekt an — mit den Angaben aus dieser Anfrage. Du bekommst danach sofort den Einladungslink.</p>" +
+              '<dl class="vw-uebernahme-vorschau">' +
+                "<dt>Kunde</dt><dd>" + s(a.name) + "</dd>" +
+                "<dt>E-Mail</dt><dd>" + s(a.email) + "</dd>" +
+                "<dt>Projekt</dt><dd>" + s(PAKET_TEXT[a.paket] || a.paket) + " für " + s(a.name) + "</dd>" +
+                "<dt>Sprache</dt><dd>" + s((a.sprache || "de").toUpperCase()) + "</dd>" +
+              "</dl>" +
+              '<div class="wd-feld" style="margin-bottom:.8rem">' +
+                '<label for="vw-ue-preis">Gesamtpreis in Euro <span class="wd-leise">optional, später änderbar</span></label>' +
+                '<input type="number" id="vw-ue-preis" min="0" step="1" inputmode="numeric" placeholder="z. B. 1500" />' +
+                '<span class="wd-feld-hilfe" id="vw-ue-anzahlung">Die 30 % Anzahlung wird daraus berechnet.</span>' +
+              "</div>" +
+              '<button type="button" class="wd-btn wd-btn--haupt" id="vw-uebernehmen">Kunde und Projekt anlegen</button>' +
+            "</div></div>") +
+
         '<div class="vw-abschnitt"><h3>Status ändern</h3>' +
           '<div class="vw-status-wahl">' +
           Object.keys(STATUS_TEXT).map(function (k) {
@@ -877,33 +1042,14 @@
           '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-notiz-speichern">Notiz speichern</button>' +
         "</div>" +
 
-        (a.kunde_id
-          ? '<div class="vw-abschnitt"><h3>Kunde</h3>' +
-            '<p class="wd-klein wd-leise">Aus dieser Anfrage wurde bereits ein Kundenzugang erstellt. Du findest ihn oben unter „Kunden“.</p></div>'
-          : '<div class="vw-abschnitt"><h3>Weiter geht es</h3>' +
-            '<div class="vw-uebernahme">' +
-              "<h4>Anfrage übernehmen</h4>" +
-              "<p>Legt in einem Schritt den Kundenzugang UND das Projekt an — mit den Angaben aus dieser Anfrage. Du bekommst danach sofort den Einladungslink.</p>" +
-              '<dl class="vw-uebernahme-vorschau">' +
-                "<dt>Kunde</dt><dd>" + s(a.name) + "</dd>" +
-                "<dt>E-Mail</dt><dd>" + s(a.email) + "</dd>" +
-                "<dt>Projekt</dt><dd>" + s(PAKET_TEXT[a.paket] || a.paket) + " für " + s(a.name) + "</dd>" +
-                "<dt>Sprache</dt><dd>" + s((a.sprache || "de").toUpperCase()) + "</dd>" +
-              "</dl>" +
-              '<div class="wd-feld" style="margin-bottom:.8rem">' +
-                '<label for="vw-ue-preis">Gesamtpreis in Euro <span class="wd-leise">optional, später änderbar</span></label>' +
-                '<input type="number" id="vw-ue-preis" min="0" step="1" inputmode="numeric" placeholder="z. B. 1500" />' +
-                '<span class="wd-feld-hilfe" id="vw-ue-anzahlung">Die 30 % Anzahlung wird daraus berechnet.</span>' +
-              "</div>" +
-              '<button type="button" class="wd-btn wd-btn--haupt" id="vw-uebernehmen">Kunde und Projekt anlegen</button>' +
-            "</div></div>") +
-
         '<div class="vw-abschnitt"><h3>Aufräumen</h3>' +
           '<p class="wd-klein wd-leise">Archivieren löscht nichts — die Anfrage bleibt vollständig erhalten und lässt sich jederzeit zurückholen.</p>' +
           '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="vw-archivieren">' +
           (a.archiviert ? "Aus dem Archiv zurückholen" : "Archivieren") + "</button>" +
         "</div>" +
-        "</div>";
+
+        "</div>" +   /* Ende rechte Spalte */
+        "</div>";    /* Ende Spaltenraster */
 
       blatt.querySelector(".vw-zu").addEventListener("click", schliesseDetail);