Projekte anlegen und ein leerer Zustand, der fuehrt statt zu enttaeuschen

Rueckmeldung 22.08.2026 mit Bildschirmfoto aus dem eigenen Testzugang:
"die seite soll jetzt schon bitte richtig krass sein und hoch profissionel,
auch sehr detailliert."

Zwei Luecken, beide geschlossen:

1) Projekte liessen sich nur ueber die Schnittstelle anlegen. Jetzt in der
   Verwaltung: pro Kunde ein "+ Projekt" mit Titel, Paket, Preis,
   Richttermin und naechstem Schritt. Bewusst als Einblendung direkt bei
   der Kundenzeile statt als eigene Seite -- man legt ein Projekt IMMER
   fuer einen bestimmten Kunden an, nie im luftleeren Raum. Der Kundenname
   steht deshalb gross im Formular, damit es nicht versehentlich dem
   Falschen angehaengt wird.
   Die 30 % Anzahlung wird beim Tippen live mitgerechnet. Sie wird zwar
   serverseitig berechnet, aber wer sie beim Eintippen sieht, merkt eine
   falsche Null sofort -- und nicht erst, wenn der Kunde ueberweisen soll.

2) Der leere Zustand im Portal war ein einziger Satz. Das ist eine
   verpasste Gelegenheit: Wer dort zum ersten Mal landet, hat gerade sein
   Passwort gesetzt und weiss noch nicht, was ihn erwartet -- genau dann
   entscheidet sich, ob die Seite souveraen wirkt oder unfertig. Jetzt
   zeigt er in vier Punkten, WAS gleich hier stehen wird (Projektstand,
   wer am Zug ist, Dateien und Nachrichten, Ideen jederzeit) und schliesst
   mit der Zusicherung, dass nichts zu tun ist. Fuenfsprachig.

45/45 Handy-Abnahme, i18n vollstaendig.

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

assets/css/webdesign.css

@@ -917,3 +917,46 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   .wd-karte { border: 1px solid #bbb; background: #fff; box-shadow: none; }
   .wd h1, .wd h2, .wd h3, .wd p, .wd li { color: #000 !important; }
 }
+
+/* ---------------------------------------------------------------------
+   18. LEERER ZUSTAND IM KUNDENPORTAL
+
+   Ein leerer Bereich mit einem einzigen Satz ist eine verpasste
+   Gelegenheit. Wer hier zum ersten Mal landet, hat gerade sein Passwort
+   gesetzt und weiß noch nicht, was ihn erwartet — genau dann entscheidet
+   sich, ob die Seite souverän wirkt oder unfertig.
+
+   Deshalb zeigt der leere Zustand, WAS gleich hier stehen wird, statt
+   nur festzustellen, dass gerade nichts da ist.
+   --------------------------------------------------------------------- */
+.po-leer { text-align: center; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem); }
+.po-leer-symbol { width: clamp(64px, 12vw, 92px); margin: 0 auto .9rem; position: relative; }
+.po-leer-symbol img { width: 100%; height: auto; opacity: .9; }
+.po-leer-symbol::before {
+  content: ""; position: absolute; inset: -24%; z-index: -1; border-radius: 50%;
+  background: radial-gradient(circle, rgba(127,208,232,.26), transparent 70%);
+  filter: blur(20px);
+}
+.po-leer h3 { margin-bottom: .3em; }
+.po-leer > p { max-width: 48ch; margin-left: auto; margin-right: auto; }
+
+.po-leer-liste {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
+  margin: 1.6rem 0 1.2rem; text-align: left;
+}
+@media (max-width: 640px) { .po-leer-liste { grid-template-columns: 1fr; } }
+.po-leer-punkt {
+  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
+  padding: .9rem 1rem; border-radius: 14px;
+  background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
+}
+.po-leer-nr {
+  width: 28px; height: 28px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-head); font-weight: 800; font-size: .85rem;
+  color: var(--wd-blau); background: rgba(127,208,232,.12);
+  border: 1px solid var(--wd-rand-stark);
+}
+.po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; }
+.po-leer-punkt span { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; }
+.po-leer-fuss { margin: 0; }