Verwaltung: mehr Information pro Zeile statt leerer Flaeche

Rueckmeldung 22.08.2026 mit Bildschirmfoto: die Anfragenliste wirkte blass
und leer. Zu Recht -- sie zeigte Nummer, Name, Paket, Status, Datum. Das
ist korrekt, beantwortet aber nicht die Fragen, die man beim Draufschauen
WIRKLICH hat.

Jetzt steht in jeder Zeile:
* E-Mail direkt sichtbar (vorher musste man die Anfrage dafuer oeffnen)
* Paket, Budgetrahmen, Wunschtermin als eigene Marken
* Sprache, falls es NICHT Deutsch ist -- dann antwortet man auch in der
  richtigen Sprache
* ob daraus schon ein Kunde geworden ist

Statt eines Datums steht dort "vor 3 Tagen". Beim Datum muss man selbst
rechnen, wie lange jemand schon wartet -- und genau das ist die Frage,
die zaehlt. Ab sieben Tagen ohne Bearbeitung wird die Angabe rot: eine
Anfrage, die eine Woche liegt, ist ein verlorener Kunde.

Ein farbiger Streifen links codiert den Status zusaetzlich zur Textmarke.
Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine Information --
zusammen mit dem Text ist sie ein schneller Anker beim Ueberfliegen.

Der leere Zustand stellt nicht mehr nur fest, dass nichts da ist, sondern
erklaert, WO Anfragen herkommen, und legt den Link zum Formular gleich
daneben.

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

webdesign/verwaltung.html

@@ -74,7 +74,7 @@
   }
   .vw-karte:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); }
   .vw-karte-nr { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--wd-blau); white-space: nowrap; }
-  .vw-karte-mitte { min-width: 0; }
+  .vw-karte-mitte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
   .vw-karte-name { font-weight: 700; color: var(--wd-text); }
   .vw-karte-info { font-size: .87rem; color: var(--wd-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .vw-karte-rechts { text-align: right; white-space: nowrap; }
@@ -144,6 +144,49 @@
     display: block; word-break: break-all; margin: .6rem 0;
     font-size: .84rem; color: var(--wd-gold); line-height: 1.5;
   }
+
+  /* ---------- Anfragekarte, gehobene Fassung ----------
+     Die erste Fassung zeigte Nummer, Name, Paket, Status, Datum. Das ist
+     korrekt, aber es beantwortet nicht die Fragen, die man beim
+     Draufschauen WIRKLICH hat: Wie dringend ist das? Wie viel Geld steckt
+     drin? Wie lange liegt es schon? Genau die stehen jetzt drin.
+
+     Ein farbiger Streifen links codiert den Status zusaetzlich zur
+     Textmarke — Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine
+     Information, zusammen mit dem Text ist sie ein schneller Anker. */
+  .vw-karte {
+    position: relative;
+    overflow: hidden;
+    padding-left: 1.5rem;
+  }
+  .vw-karte::before {
+    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+    background: var(--wd-rand-stark);
+  }
+  .vw-karte--neu::before { background: var(--wd-gold); }
+  .vw-karte--pruefung::before,
+  .vw-karte--angebot::before { background: var(--wd-blau); }
+  .vw-karte--rueckfrage::before { background: var(--wd-lila); }
+  .vw-karte--angenommen::before,
+  .vw-karte--abgeschlossen::before { background: var(--wd-ok); }
+  .vw-karte--abgelehnt::before { background: var(--wd-fehler); }
+
+  .vw-karte-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
+  .vw-mini {
+    font-size: .74rem; font-weight: 600; padding: .15rem .5rem;
+    border-radius: 6px; background: rgba(127,208,232,.09);
+    color: var(--wd-text-mid); border: 1px solid var(--wd-rand);
+    white-space: nowrap;
+  }
+  .vw-mini--geld { color: var(--wd-gold); border-color: rgba(232,200,119,.3); background: rgba(232,200,119,.07); }
+  .vw-mini--alt { color: var(--wd-fehler); border-color: rgba(255,157,157,.3); background: rgba(255,157,157,.06); }
+
+  /* Leerer Zustand — auch hier fuehren statt nur feststellen. */
+  .vw-leer-gross { text-align: center; padding: clamp(2rem,6vw,3.5rem) 1.5rem; }
+  .vw-leer-gross-symbol { font-size: 2.6rem; opacity: .45; margin-bottom: .6rem; }
+  .vw-leer-gross h3 { margin-bottom: .3em; }
+  .vw-leer-gross p { max-width: 46ch; margin-left: auto; margin-right: auto; }
+
   .vw-leer-hinweis { text-align: center; padding: 3rem 1rem; color: var(--wd-text-soft); }
   .vw-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
 </style>
@@ -448,6 +491,29 @@
     });
   }
 
+
+  /* Ganze Tage seit einem Zeitpunkt. Bewusst ueber den Kalendertag
+     gerechnet, nicht ueber 24-Stunden-Bloecke: eine Anfrage von gestern
+     23:50 Uhr ist umgangssprachlich "gestern", nicht "vor 0 Tagen". */
+  function tageSeit(zeit) {
+    if (!zeit) return 0;
+    var dann = new Date(zeit);
+    if (isNaN(dann.getTime())) return 0;
+    var a = new Date(dann.getFullYear(), dann.getMonth(), dann.getDate());
+    var heute = new Date();
+    var b = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate());
+    return Math.round((b - a) / 86400000);
+  }
+
+  function zeitText(tage) {
+    if (tage <= 0) return "heute";
+    if (tage === 1) return "gestern";
+    if (tage < 7) return "vor " + tage + " Tagen";
+    if (tage < 14) return "vor einer Woche";
+    if (tage < 31) return "vor " + Math.floor(tage / 7) + " Wochen";
+    return "vor " + Math.floor(tage / 30) + " Monaten";
+  }
+
   function zeichneListe() {
     var liste = document.getElementById("vw-liste");
     var gefiltert = alleAnfragen.filter(function (a) {
@@ -460,23 +526,48 @@
     });
 
     if (!gefiltert.length) {
-      liste.innerHTML = '<div class="vw-leer-hinweis">' +
-        (alleAnfragen.length ? "Keine Anfrage passt zu diesem Filter." :
-         filterArchiv ? "Im Archiv liegt noch nichts." : "Noch keine Anfragen eingegangen.") + "</div>";
+      /* Auch hier fuehren statt nur feststellen: Wer keine Anfragen hat,
+         soll wissen, WO sie herkommen -- und den Link gleich griffbereit
+         haben. */
+      liste.innerHTML = alleAnfragen.length
+        ? '<div class="vw-leer-hinweis">Keine Anfrage passt zu diesem Filter.</div>'
+        : filterArchiv
+          ? '<div class="vw-leer-hinweis">Im Archiv liegt noch nichts. Archivierte Anfragen bleiben vollstaendig erhalten und lassen sich jederzeit zurueckholen.</div>'
+          : '<div class="wd-karte vw-leer-gross" style="cursor:default;display:block">' +
+              '<div class="vw-leer-gross-symbol" aria-hidden="true">📬</div>' +
+              "<h3>Noch keine Anfragen</h3>" +
+              '<p class="wd-leise">Sobald jemand das Formular ausfuellt, landet die Anfrage hier — mit allem, was er angegeben hat, und du bekommst eine Benachrichtigung.</p>' +
+              '<div class="wd-btn-reihe" style="justify-content:center;margin-top:1rem">' +
+                '<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html" target="_blank" rel="noopener">Formular ansehen</a>' +
+                '<a class="wd-btn wd-btn--still wd-btn--klein" href="/webdesign/" target="_blank" rel="noopener">Zur Seite</a>' +
+              "</div></div>";
       return;
     }
 
     liste.innerHTML = gefiltert.map(function (a) {
-      return '<button type="button" class="vw-karte" data-id="' + s(a.id) + '">' +
+      var tage = tageSeit(a.erstellt_am);
+      /* "vor 3 Tagen" sagt mehr als ein Datum. Beim Datum muss man selbst
+         rechnen, wie lange jemand schon wartet -- und genau das ist die
+         Frage, die zaehlt. Ab sieben Tagen ohne Bearbeitung wird es rot:
+         eine Anfrage, die eine Woche liegt, ist ein verlorener Kunde. */
+      var liegtLange = tage >= 7 && (a.status === "neu" || a.status === "rueckfrage");
+      return '<button type="button" class="vw-karte vw-karte--' + s(a.status) + '" data-id="' + s(a.id) + '">' +
         '<span class="vw-karte-nr">' + s(a.nummer) + "</span>" +
         '<span class="vw-karte-mitte">' +
-          '<span class="vw-karte-name">' + s(a.name) + "</span><br />" +
-          '<span class="vw-karte-info">' + s(PAKET_TEXT[a.paket] || a.paket) +
-          (a.budget ? " · " + s(BUDGET_TEXT[a.budget] || a.budget) : "") + "</span>" +
+          '<span class="vw-karte-name">' + s(a.name) + "</span>" +
+          '<span class="vw-karte-info">' + s(a.email) + "</span>" +
+          '<span class="vw-karte-marken">' +
+            '<span class="vw-mini">' + s(PAKET_TEXT[a.paket] || a.paket) + "</span>" +
+            (a.budget ? '<span class="vw-mini vw-mini--geld">' + s(BUDGET_TEXT[a.budget] || a.budget) + "</span>" : "") +
+            (a.termin ? '<span class="vw-mini">Wunsch: ' + s(a.termin) + "</span>" : "") +
+            (a.sprache && a.sprache !== "de" ? '<span class="vw-mini">' + s(a.sprache.toUpperCase()) + "</span>" : "") +
+            (a.kunde_id ? '<span class="vw-mini">ist Kunde</span>' : "") +
+          "</span>" +
         "</span>" +
         '<span class="vw-karte-rechts">' +
           '<span class="vw-status vw-status--' + s(a.status) + '">' + s(STATUS_TEXT[a.status] || a.status) + "</span>" +
-          '<span class="vw-karte-zeit">' + window.WD.datum(a.erstellt_am) + "</span>" +
+          '<span class="vw-karte-zeit' + (liegtLange ? " vw-mini--alt" : "") + '">' +
+            s(zeitText(tage)) + "</span>" +
         "</span></button>";
     }).join("");