Portal: Aufgabenliste und Postfach fuer den Kunden

Schritt 4 von 4 -- damit sind beide Wuensche vom 22.08.2026 vollstaendig:
"wenn sie drauf druecken sollen sie auch sehen was ich schon gemacht habe
von dem was im plan war" und "die kunden sollen mir auch nachrichten
hinterlassen koennen".

AUFGABENLISTE IM PROJEKT

Bisher sah der Kunde nur die Phase ("Design . 3/7") -- eine Zahl ohne
Inhalt. Sie beantwortet die eigentliche Frage nicht: WAS ist denn fertig?

Die Liste steht GANZ OBEN, direkt nach dem Projektkopf, noch vor
Zahlungen und Dateien. Die sind wichtig, aber sie sind nicht der Grund
fuer den Klick.

Zwei Entscheidungen praegen die Ansicht:

1. Offene Kundenpunkte stehen in einem EIGENEN Kasten ganz oben ("Das
   brauche ich noch von dir"), nicht nur farblich markiert irgendwo
   mittendrin. Wer eine lange Liste sieht, liest sie als Bericht ueber
   fremde Arbeit und ueberliest seinen eigenen Teil -- genau daraus
   entstehen die meisten Verzoegerungen. Ist nichts offen, steht das
   auch da: "Von dir wird gerade nichts gebraucht." Eine gute Nachricht
   darf ausgesprochen werden.

2. Der Kunde hakt seine eigenen Punkte selbst ab. Nur diese haben einen
   Knopf; bei fremden Punkten ist das Zeichen reine Anzeige. Ein Knopf,
   der nichts tut, laesst die Seite kaputt wirken. Geprueft: 4 Knoepfe
   bei 2 offenen eigenen Punkten (sie erscheinen zweimal), 5 feste.

Grosse Zahl statt Prozent: "2 von 6 erledigt" ist greifbar, "33 %" ist
eine Rechnung, die niemand fuehlt. Der Balken traegt die vier
Prozessfarben -- dieselben wie auf der Ablaufseite und in der Verwaltung.

Der Ton ist bewusst gewaehlt. Der Kunde liest die Liste, wenn er unsicher
ist -- also im Zweifel schon angespannt. "Wir warten auf dich" waere
Druck, "Das brauche ich noch von dir" ist eine Bitte.

POSTFACH AUF DER UEBERSICHT

Bewusst auf der Uebersicht, nicht im Projekt: Wer kein Projekt hat -- oder
eine Frage, die zu keinem gehoert -- konnte vorher gar nicht schreiben und
musste zur E-Mail greifen. Damit war der Verlauf weg, sobald man ihn
brauchte.

Niedrigschwellig: kein Betreff, kein Pflichtfeld, der Projektbezug ist
freiwillig. Wer glaubt, eine Nachricht muesse eine "richtige" Anfrage
sein, schreibt gar nicht erst -- und genau die kurzen Fragen sollen hier
landen. Wird nachgeladen, damit die Uebersicht sofort dasteht.

Projekt- und Aufgabendaten werden gleichzeitig angefordert statt
nacheinander -- sonst waere die Wartezeit die Summe beider Anfragen. Die
Aufgabenliste darf dabei fehlschlagen, ohne die Seite mitzureissen: Wer
wegen einer leeren Liste seine Zahlungen nicht mehr saehe, waere
schlechter dran als vorher.

EIN SICHTBARER FEHLER GEFUNDEN

Auf dem Screenshot stand "Ideen & Aenderungswuensche". Ursache ist
eine Falle mit zwei Wegen: Texte ueber data-i18n landen als HTML in der
Seite, dort ist "&" richtig. Derselbe Text im JavaScript laeuft aber
durch die Absicherung und wird ein zweites Mal kodiert. Derselbe Baustein
ist also je nach Verwendungsort richtig oder falsch.

Das kann man nicht im Kopf behalten -- deshalb neu pruef-texte.mjs mit
ZWEI Pruefungen:

  Anzeige:   alle 11 Seiten x 5 Sprachen = 55 Kombinationen, sichtbarer
             Text darf keine Kodierungsreste enthalten.
  Quelltext: welcher Baustein mit "&" wird irgendwo abgesichert
             eingesetzt?

Beide sind noetig. Gegengeprueft: Die Anzeigepruefung allein haette den
Fehler NICHT gefunden, weil die Ideen-Karte erst nach einer Anmeldung
erscheint. Die Quelltextpruefung findet ihn ohne Anzeige.

Auch die Quelltextpruefung selbst wurde zweimal gegengeprueft: Zuerst
meldete sie zusaetzlich po_senden ("Senden", voellig harmlos) -- ihre
Blockerkennung lief bis zum naechsten Schluessel und schluckte dabei
einen Kommentar mit "&". Jetzt zaehlt sie geschweifte Klammern. Ein
Fehlalarm im Pruefwerkzeug ist fast so schaedlich wie ein uebersehener
Fehler: Man gewoehnt sich daran, ihn wegzusehen.

GEPRUEFT

32 Pruefungen im Portal (Computer und Handy), alle bestanden. Darunter:
114 Texte in allen fuenf Sprachen vollstaendig, Kundenpunkte stehen vor
der langen Liste, Aufgaben vor den Zahlungen, Abhaken meldet den
richtigen Punkt, alle Kaestchen mindestens 24 px, keine Fehler im
Protokoll. Dazu 55 Seiten-Sprach-Kombinationen ohne Kodierungsreste.

Ein Fehler im Test selbst gefunden und behoben: Die Adressabfrage prueft
jetzt den PFAD statt der ganzen Adresse. Der API-Server heisst
"postfach.dogfather-universe.com" -- ein includes("/postfach") traf den
HOSTNAMEN und damit jede Anfrage, auch die Uebersicht.

Versionsstempel und Cache-Name auf v5.

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

assets/css/webdesign.css

@@ -1390,3 +1390,155 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .po-legende .po-l-2 { background: var(--wd-p2); }
 .po-legende .po-l-3 { background: var(--wd-p3); }
 .po-legende .po-l-4 { background: var(--wd-p4); }
+
+/* =====================================================================
+   PORTAL — AUFGABENLISTE UND POSTFACH  (22.08.2026)
+
+   "wenn sie drauf drücken sollen sie auch sehen was ich schon gemacht
+   habe von dem was im plan war."
+
+   Dieselben vier Prozessfarben wie auf der Ablaufseite, in der Vorschau
+   und in der Verwaltung. Das ist der eigentliche Wert: Eine Farbe
+   bedeutet im ganzen Bereich dasselbe — sonst wäre sie Dekoration.
+   ===================================================================== */
+
+/* Die grosse Zahl. "9 von 14 erledigt" ist greifbar, "64 %" ist eine
+   Rechnung, die niemand fühlt. */
+.po-aufg-stand { margin: .9rem 0 .2rem; font-size: .92rem; color: var(--wd-text-soft); }
+.po-aufg-stand b {
+  font-family: var(--font-head); font-weight: 800;
+  font-size: 1.7rem; color: var(--wd-text); margin-right: .3rem;
+}
+
+.po-fortschritt { display: flex; gap: 4px; height: 8px; margin-bottom: 1.2rem; }
+.po-fs-teil { flex: 1; border-radius: 999px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
+.po-fs-teil > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
+.po-fs-teil[data-k="start"]      > i { background: var(--wd-p1); }
+.po-fs-teil[data-k="gestaltung"] > i { background: var(--wd-p2); }
+.po-fs-teil[data-k="umsetzung"]  > i { background: var(--wd-p3); }
+.po-fs-teil[data-k="abschluss"]  > i { background: var(--wd-p4); }
+
+/* ---------- "Das brauche ich noch von dir" ----------
+   Ein EIGENER Kasten ganz oben, nicht nur eine farbige Zeile irgendwo
+   in der Liste. Wer eine lange Liste sieht, liest sie als Bericht über
+   fremde Arbeit und überliest seinen eigenen Teil — und genau daraus
+   entstehen die meisten Verzögerungen.
+
+   Gold, weil es im ganzen Bereich für "das betrifft dich" steht. Nicht
+   Rot: Es ist eine Bitte, kein Fehler. */
+.po-dubist {
+  margin: 0 0 1.3rem;
+  padding: .9rem 1rem 1rem;
+  border-radius: 14px;
+  background: rgba(232,200,119,.07);
+  border: 1px solid rgba(232,200,119,.32);
+}
+.po-dubist h4 {
+  margin: 0; font-size: 1rem; color: var(--wd-gold);
+  font-family: var(--font-head); font-weight: 700;
+}
+
+/* Der beruhigende Gegenpart. Wenn nichts offen ist, soll das auch
+   dastehen — Abwesenheit einer Aufforderung ist eine gute Nachricht und
+   darf ruhig ausgesprochen werden. */
+.po-allesgut {
+  margin: 0 0 1.3rem; padding: .75rem .95rem;
+  border-radius: 12px; font-size: .9rem;
+  background: rgba(111,214,163,.08);
+  border: 1px solid rgba(111,214,163,.28);
+  color: var(--wd-ok);
+}
+
+/* ---------- Gruppen und Zeilen ---------- */
+.po-aufg-gruppe { margin-bottom: 1.1rem; }
+.po-aufg-kopf {
+  display: flex; align-items: baseline; gap: .5rem;
+  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
+  margin-bottom: .45rem; padding-bottom: .35rem;
+  border-bottom: 1px solid var(--wd-rand);
+}
+.po-aufg-zahl { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: .8rem; color: var(--wd-text-soft); }
+.po-aufg-gruppe[data-k="start"]      .po-aufg-kopf { color: var(--wd-p1); }
+.po-aufg-gruppe[data-k="gestaltung"] .po-aufg-kopf { color: var(--wd-p2); }
+.po-aufg-gruppe[data-k="umsetzung"]  .po-aufg-kopf { color: var(--wd-p3); }
+.po-aufg-gruppe[data-k="abschluss"]  .po-aufg-kopf { color: var(--wd-p4); }
+
+/* Zeile und Spalte ausdrücklich für JEDES Kind.
+
+   Ohne Spaltenangabe geht es schief, und zwar auf eine Art, die man
+   nicht errät: Das Raster platziert zuerst alle Elemente mit
+   FESTGELEGTER Zeile und erst danach die freien. Kästchen und Marke
+   haben beide eine feste Zeile — sie würden zusammen nach vorne rutschen
+   und der Titel landete ganz rechts. Genau das ist am 22.08.2026 in der
+   Verwaltung passiert und erst am Screenshot aufgefallen. */
+.po-aufg {
+  display: grid;
+  grid-template-columns: auto minmax(0,1fr) auto;
+  gap: .12rem .7rem; align-items: start;
+  padding: .55rem .6rem; margin-bottom: .25rem;
+  border-radius: 10px; border: 1px solid transparent;
+}
+.po-aufg-haken  { grid-row: 1 / span 2; grid-column: 1; }
+.po-aufg-titel  { grid-row: 1; grid-column: 2; font-size: .94rem; color: var(--wd-text); overflow-wrap: anywhere; }
+.po-aufg-marken { grid-row: 1; grid-column: 3; }
+.po-aufg-text   { grid-row: 2; grid-column: 2 / span 2; font-size: .82rem; color: var(--wd-text-soft); line-height: 1.5; }
+
+.po-aufg--fertig .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
+.po-aufg--weg    .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; opacity: .55; }
+.po-aufg--du { background: rgba(232,200,119,.06); }
+
+/* Im oberen Kasten stehen dieselben Punkte noch einmal. Dort brauchen
+   sie den eigenen Hintergrund nicht — der Kasten ist schon golden, ein
+   zweiter Goldton darin würde nur schmutzig wirken. */
+.po-aufg--hervor { background: transparent; padding-left: 0; padding-right: 0; }
+
+/* Das Kästchen. Bei eigenen Punkten ein echter Knopf (tastaturbedienbar,
+   44px Trefferfläche über das Innenabstands-Polster), sonst nur Anzeige.
+   Ein Knopf, der nichts tut, lässt die Seite kaputt wirken. */
+.po-aufg-haken {
+  width: 26px; height: 26px; margin-top: .05rem; padding: 0;
+  border-radius: 8px; border: 2px solid var(--wd-rand-stark);
+  background: transparent; color: transparent;
+  display: grid; place-items: center;
+  font-size: .95rem; line-height: 1;
+  transition: all var(--wd-zeit-schnell) ease;
+}
+button.po-aufg-haken { cursor: pointer; }
+button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,200,119,.1); }
+.po-aufg-haken--fest { cursor: default; }
+.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: #06120c; }
+.po-aufg--jetzt  .po-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
+.po-aufg--weg    .po-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
+/* Offene EIGENE Punkte: der Rand ist golden, damit klar ist, dass hier
+   geklickt werden kann und soll. */
+.po-aufg--du button.po-aufg-haken { border-color: rgba(232,200,119,.55); }
+
+.po-aufg-marke {
+  display: inline-block; white-space: nowrap;
+  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
+  padding: .14rem .45rem; border-radius: 999px;
+}
+.po-aufg-marke--ok    { background: rgba(111,214,163,.13); color: var(--wd-ok); }
+.po-aufg-marke--jetzt { background: rgba(183,157,255,.15); color: var(--wd-p2); }
+.po-aufg-marke--du    { background: rgba(232,200,119,.16); color: var(--wd-gold); }
+.po-aufg-nicht {
+  display: inline-block; margin-left: .4rem;
+  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
+  padding: .12rem .4rem; border-radius: 999px;
+  background: rgba(255,157,157,.12); color: var(--wd-fehler);
+}
+
+/* Auf dem Handy rutscht die Marke unter den Titel — nebeneinander bliebe
+   für den Titel eine Spalte von zwei Wörtern Breite. */
+@media (max-width: 520px) {
+  .po-aufg { grid-template-columns: auto minmax(0,1fr); }
+  .po-aufg-marken { grid-row: 2; grid-column: 2; margin-bottom: .15rem; }
+  .po-aufg-text   { grid-row: 3; grid-column: 2; }
+}
+
+/* ---------- Postfach auf der Übersicht ---------- */
+.po-pf-verlauf {
+  max-height: 46vh; overflow-y: auto;
+  margin: .8rem 0 .2rem; padding-right: .3rem;
+  display: flex; flex-direction: column; gap: .5rem;
+}