Abbruch-Dialog und Farbunterscheidung meins/beim Kunden

ABBRECHEN IN DER OBERFLAECHE
Der Server konnte es seit gestern, die Knoepfe fehlten. Jetzt steht am
Ende der Projektansicht ein zurueckhaltender Knopf -- bewusst nicht
zwischen den anderen: Es ist die seltenste und endgueltigste Handlung an
einem Projekt, und ein gleich lauter Knopf daneben laedt zum
Verwechseln ein.

Beim Aufklappen rechnet die Seite vor: wie viele Schritte erledigt sind,
wie viel gezahlt wurde, wie viel davon verdient ist, und was sich daraus
als Erstattung ergibt. Der Betrag steht als Vorschlag im Feld und ist
aenderbar -- geprueft wird, dass der GEAENDERTE Wert hinausgeht und nicht
der vorgeschlagene, sonst waere das Feld eine Attrappe.

Gerechnet wird erst beim Aufklappen, nicht beim Oeffnen der
Projektansicht: Dazwischen kann man Punkte abgehakt haben, und die
Zahlen sollen den Stand von JETZT zeigen. Faellt die Vorschau aus, laesst
sich der Betrag von Hand eintragen -- ein ausgefallener Rechendienst darf
kein Projekt in der Liste festhalten.

Ein bereits abgebrochenes Projekt bekommt keinen Knopf mehr, sondern
einen Kasten mit Datum, Grund, wer abgebrochen hat und was zu erstatten
war.

MEINS ODER SEINS
Wunsch: 'ich will dass die kunden sachen auch in der verwaltungs seite
von kacheln eine andere farbe haben wie meine damit ich sie gut
unterscheide.'

Was bei mir liegt, bleibt im Markenblau. Was beim Kunden liegt, bekommt
Lila. Gemessen: rgb(127,208,232) gegen rgb(183,157,255).

Bewusst NICHT ueber Rot/Gruen: Die Warnstufen sind an das ALTER
vergeben und muessen frei bleiben. Eine Kachel, die gleichzeitig 'beim
Kunden' und 'seit acht Tagen ueberfaellig' faerben muesste, koennte nur
eine der beiden Aussagen zeigen -- und die Frist ist die wichtigere.

Dazu eine 3px-Kante links auf beiden Seiten. Farbe allein traegt die
Aussage nicht: Wer sie nicht unterscheiden kann, saehe sonst zwei gleich
aussehende Bloecke (WCAG 1.4.1). Die Kante ist ein Gegensatz, keine
Markierung einer Gruppe -- meins blau, seins lila.

Geprueft mit 42 Pruefungen auf Computer und Handy, die messen, was
tatsaechlich an den Server geht und welche Farben wirklich berechnet
werden. Alle bestehenden Pruefungen weiter gruen.

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

webdesign/verwaltung.html

@@ -123,6 +123,16 @@
   .vw-meld-weg:focus-visible { outline: 2px solid rgb(var(--wd-blau-rgb) / .95); outline-offset: 2px; }
   .vw-meld-alle { margin: .1rem 0 1rem; }
 
+  .vw-abbruch-rechnung {
+    padding: .7rem .85rem; margin-bottom: .8rem;
+    border-radius: var(--wd-radius-m, 14px);
+    background: rgb(255 255 255 / .04);
+    border: 1px solid rgb(255 255 255 / .08);
+  }
+  .wd .vw-abbruch-rechnung p { font-size: .86rem; margin: 0 0 .25rem; }
+  .wd .vw-abbruch-vorschlag { color: var(--wd-gold); }
+  .vw-abbruch-info { border-left: 3px solid #e78278; padding-left: .8rem; }
+
   .wd .vw-ub-h {
     font-size: 1.05rem; font-weight: 650;
     margin: 1.9rem 0 .75rem;
@@ -140,6 +150,44 @@
     grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
     margin-bottom: .4rem;
   }
+  /* ================================================================
+     MEINS ODER SEINS — auf einen Blick unterscheidbar
+
+     Wunsch vom 24.08.2026: "ich will dass die kunden sachen auch in der
+     verwaltungs seite von kacheln eine andere farbe haben wie meine
+     damit ich sie gut unterscheide."
+
+     Umgesetzt über den TON, nicht über die Warnfarbe: Was bei mir liegt,
+     bleibt im Markenblau — das ist meine Arbeit. Was beim Kunden liegt,
+     bekommt Lila. Der Unterschied ist deutlich, ohne dass eine der
+     beiden Seiten nach Alarm aussieht.
+
+     Warum nicht Rot/Grün: Die Warnstufen (gelb, rot) sind an das ALTER
+     vergeben und müssen frei bleiben. Eine Kachel, die gleichzeitig
+     "beim Kunden" und "seit acht Tagen überfällig" färben müsste,
+     könnte nur eine der beiden Aussagen zeigen — und die Frist ist die
+     wichtigere.
+
+     Zusätzlich zur Farbe eine Kante links. Farbe allein trägt die
+     Aussage nicht: Wer sie nicht unterscheiden kann, sähe sonst zwei
+     gleich aussehende Blöcke (WCAG 1.4.1). */
+  #vw-ub-beikunde .vw-ub-kachel {
+    border-color: rgb(var(--wd-lila-rgb) / .28);
+    border-left: 3px solid rgb(var(--wd-lila-rgb) / .55);
+  }
+  #vw-ub-beikunde .vw-ub-kachel .vw-ub-zahl { color: var(--wd-lila); }
+  #vw-ub-beikunde .vw-ub-kachel:hover:not(:disabled) {
+    border-color: rgb(var(--wd-lila-rgb) / .5);
+  }
+  /* Auch die Null-Kachel bleibt zugeordnet — sonst wäre ausgerechnet
+     die gute Nachricht die einzige ohne erkennbare Herkunft. */
+  #vw-ub-beikunde .vw-ub-kachel--leer { border-left-color: rgb(var(--wd-lila-rgb) / .3); }
+  /* Meine Seite bekommt spiegelbildlich eine blaue Kante, damit der
+     Unterschied ein Gegensatz ist und nicht "eine Gruppe ist markiert". */
+  #vw-ub-beimir .vw-ub-kachel { border-left: 3px solid rgb(var(--wd-blau-rgb) / .5); }
+  #vw-ub-beimir .vw-ub-kachel--warn { border-left-color: #e9c46a; }
+  #vw-ub-beimir .vw-ub-kachel--rot  { border-left-color: #e78278; }
+
   @media (max-width: 560px) {
     /* Zwei Spalten statt einer.
 
@@ -1333,6 +1381,11 @@
     shop: "Shop & umfangreiche Website", verwaltung: "Buchhaltungs- & Steuerverwaltung",
     betreuung: "Laufende Betreuung", unklar: "Noch unklar",
   };
+  var ABBRUCH_TEXT = {
+    keine_zahlung: "nicht gezahlt", kunde_abgesprungen: "Kunde abgesprungen",
+    keine_mitwirkung: "keine Mitwirkung", einvernehmlich: "einvernehmlich",
+    mein_ruecktritt: "mein Rücktritt", sonstiges: "sonstiges",
+  };
   var VORHANDEN_TEXT = { ja: "vorhanden", teilweise: "teilweise", nein: "fehlt noch" };
   var BUDGET_TEXT = {
     "bis-500": "bis 500 €", "500-1000": "500 – 1.000 €",
@@ -3193,10 +3246,118 @@
         '<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-p-senden">Senden</button>' +
       "</div>" +
 
+      /* ----- ABBRECHEN -----
+
+         Steht ganz unten und zurückhaltend gestaltet: Es ist die
+         seltenste und die endgültigste Handlung an einem Projekt. Ein
+         gleich lauter Knopf zwischen den anderen lädt zum Verwechseln
+         ein. */
+      (p.status === "abgebrochen"
+        ? '<div class="vw-abschnitt vw-abbruch-info"><h3>Abgebrochen</h3>' +
+          '<p class="wd-klein">' +
+          (p.abbruch_am ? s(window.WD.datum(p.abbruch_am)) : "") +
+          (p.abbruch_grund ? " · Grund: " + s(ABBRUCH_TEXT[p.abbruch_grund] || p.abbruch_grund) : "") +
+          (p.abbruch_wer ? " · durch " + (p.abbruch_wer === "kunde" ? "den Kunden" : "dich") : "") +
+          "</p>" +
+          (p.abbruch_erstattung_cent
+            ? '<p class="wd-klein">Zu erstatten war: <strong>' +
+              (p.abbruch_erstattung_cent / 100).toFixed(2).replace(".", ",") + " €</strong></p>"
+            : '<p class="wd-klein wd-leise">Es war nichts zu erstatten.</p>') +
+          "</div>"
+        : '<div class="vw-abschnitt"><h3>Auftrag abbrechen</h3>' +
+          '<p class="wd-klein wd-leise">Wenn der Kunde nicht zahlt, sich nicht mehr meldet ' +
+          'oder selbst abspringt. Die Seite rechnet dir vor, wie viel Arbeit erledigt ist, ' +
+          'und schlägt daraus einen Erstattungsbetrag vor.</p>' +
+          '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="vw-abbruch-auf">' +
+          "Abbruch vorbereiten</button>" +
+          '<div id="vw-abbruch-form" hidden style="margin-top:.9rem">' +
+            '<div id="vw-abbruch-rechnung" class="vw-abbruch-rechnung">wird berechnet…</div>' +
+            '<div class="wd-feld"><label for="vw-ab-grund2">Grund</label>' +
+              '<select id="vw-ab-grund2">' +
+                '<option value="keine_zahlung">Der Kunde hat nicht gezahlt</option>' +
+                '<option value="kunde_abgesprungen">Der Kunde ist abgesprungen</option>' +
+                '<option value="keine_mitwirkung">Keine Mitwirkung (Texte, Bilder, Rückmeldung)</option>' +
+                '<option value="einvernehmlich">Einvernehmlich beendet</option>' +
+                '<option value="mein_ruecktritt">Ich trete zurück</option>' +
+                '<option value="sonstiges">Sonstiges</option>' +
+              "</select></div>" +
+            '<div class="wd-feld"><label for="vw-ab-wer">Wer bricht ab?</label>' +
+              '<select id="vw-ab-wer">' +
+                '<option value="kunde">Der Kunde</option>' +
+                '<option value="dogfather">Ich</option>' +
+              "</select></div>" +
+            '<div class="wd-feld"><label for="vw-ab-erstattung">Zu erstatten (Euro)</label>' +
+              '<input type="number" id="vw-ab-erstattung" min="0" step="0.01" inputmode="decimal" />' +
+              '<span class="wd-feld-hilfe">Vorschlag aus dem Fortschritt — änderbar.</span></div>' +
+            '<div class="wd-feld"><label for="vw-ab-notiz">Notiz ' +
+              '<span class="wd-leise">optional, nur für dich</span></label>' +
+              '<textarea id="vw-ab-notiz" rows="2"></textarea></div>' +
+            '<button type="button" class="wd-btn wd-btn--klein" id="vw-abbruch-los">' +
+            "Auftrag jetzt abbrechen</button>" +
+          "</div></div>") +
+
       "</div></div>";
 
     blatt.querySelector(".vw-zu").addEventListener("click", schliesseDetail);
 
+    /* ---- Abbrechen ---- */
+    var abbAuf = blatt.querySelector("#vw-abbruch-auf");
+    if (abbAuf) {
+      var abbForm = blatt.querySelector("#vw-abbruch-form");
+      abbAuf.addEventListener("click", async function () {
+        abbForm.hidden = !abbForm.hidden;
+        abbAuf.textContent = abbForm.hidden ? "Abbruch vorbereiten" : "Doch nicht abbrechen";
+        if (abbForm.hidden) return;
+        /* Erst beim Aufklappen rechnen lassen. Die Zahlen sollen den
+           Stand von JETZT zeigen, nicht den vom Öffnen der Projektseite
+           — dazwischen kann man Punkte abgehakt haben. */
+        try {
+          var v = await api("/webdesign/admin/projekte/" + encodeURIComponent(p.id) + "/abbruch-vorschau");
+          var r = v.rechnung || {};
+          blatt.querySelector("#vw-abbruch-rechnung").innerHTML =
+            "<p><strong>" + r.fertig + " von " + r.gesamt + " Schritten erledigt (" +
+            r.prozent + " %)</strong></p>" +
+            "<p>Bezahlt: " + s(r.bezahltText || "0,00 €") + " · davon verdient: " +
+            s(r.behaltenText || "0,00 €") + "</p>" +
+            '<p class="vw-abbruch-vorschlag">Vorschlag zur Erstattung: <strong>' +
+            s(r.erstattungText || "0,00 €") + "</strong></p>";
+          blatt.querySelector("#vw-ab-erstattung").value =
+            ((r.erstattungCent || 0) / 100).toFixed(2);
+        } catch (f) {
+          /* Ohne Vorschau trotzdem abbrechen können: Der Betrag lässt
+             sich von Hand eintragen. Ein ausgefallener Rechendienst darf
+             kein Projekt in der Liste festhalten. */
+          blatt.querySelector("#vw-abbruch-rechnung").innerHTML =
+            '<p class="wd-klein">Die Vorschau konnte nicht geladen werden: ' + s(f.message) +
+            " Du kannst den Betrag von Hand eintragen.</p>";
+        }
+      });
+
+      blatt.querySelector("#vw-abbruch-los").addEventListener("click", async function (ev) {
+        /* Nachfragen: Danach ist das Projekt abgebrochen, und offene
+           Rechnungen sind storniert. */
+        if (!confirm("Auftrag " + p.nummer + " wirklich abbrechen? Offene Rechnungen werden storniert.")) return;
+        window.WD.knopfSperren(ev.target, true, "Wird abgebrochen…");
+        try {
+          var a = await api("/webdesign/admin/projekte/" + encodeURIComponent(p.id) + "/abbrechen", {
+            method: "POST",
+            body: {
+              grund: blatt.querySelector("#vw-ab-grund2").value,
+              wer: blatt.querySelector("#vw-ab-wer").value,
+              erstattungEuro: Number(blatt.querySelector("#vw-ab-erstattung").value) || 0,
+              notiz: blatt.querySelector("#vw-ab-notiz").value,
+            },
+          });
+          schliesseDetail();
+          await ladeProjekte();
+          window.WD.meldung(meldung, a.hinweis || "Abgebrochen.", "ok");
+        } catch (f) {
+          window.WD.knopfSperren(ev.target, false);
+          window.WD.meldung(meldung, "Abbrechen fehlgeschlagen: " + f.message, "fehler");
+        }
+      });
+    }
+
     /* Zustand weiterschalten. */
     blatt.querySelectorAll("[data-weiter]").forEach(function (b) {
       b.addEventListener("click", function () {