Leeres Portal: zeigen statt erzaehlen

Rueckmeldung 22.08.2026 mit Bildschirmfoto: "dass muss noch viel
spezieller, krasser und geiler sein, nicht so einfach".

Der Kern des Problems war nicht die Optik, sondern die Haltung: Die Seite
BESCHRIEB, was hier bald stehen wird ("Eine Leiste zeigt dir, in welcher
Phase dein Projekt ist"). Beschreibungen sind schwach -- man muss sie
lesen und sich dann etwas vorstellen.

Jetzt steht dort eine echte, als Vorschau gekennzeichnete Projektkarte:
Projektnummer, Titel, eine Phasenleiste, die langsam durchlaeuft, die
Marke "Dogfather ist dran" und ein naechster Schritt. Man sieht in zwei
Sekunden, was drei Saetze nicht erklaeren.

Die Karte ist bewusst als Vorschau erkennbar -- gestrichelter Rand,
Etikett oben rechts, gedaempfte Schrift, Nummer P-0000-0000. Sie darf nie
mit einem echten Projekt verwechselt werden.

Dazu ein sehr langsamer Lichtstreifen, der einmal durchwandert. Er sagt
ohne Worte "hier passiert gleich etwas", ohne zu blinken oder zu zappeln
-- augenschonend bleibt Dauervorgabe.

Bei prefers-reduced-motion laeuft nichts, aber die Phasenleiste zeigt
trotzdem drei erledigte Phasen. Ohne das staende dort eine leere graue
Reihe und die Vorschau erklaerte gar nichts mehr -- ein abgeschaltetes
Element muss trotzdem noch seine Aussage transportieren.

45/45 Handy-Abnahme, i18n vollstaendig.

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

assets/css/webdesign.css

@@ -960,3 +960,93 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
 .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; }
+
+/* ---------------------------------------------------------------------
+   19. VORSCHAU IM LEEREN PORTAL
+
+   Die erste Fassung BESCHRIEB, was hier bald stehen wird ("Eine Leiste
+   zeigt dir, in welcher Phase dein Projekt ist"). Beschreibungen sind
+   schwach — man muss sie lesen und sich dann etwas vorstellen.
+
+   Diese Fassung ZEIGT es: eine echte, halbdurchsichtige Projektkarte,
+   deren Phasenleiste langsam durchläuft. Man sieht in zwei Sekunden, was
+   drei Sätze nicht erklären. Genau das ist der Unterschied zwischen
+   "erklärt" und "verstanden".
+
+   Die Karte ist bewusst als Vorschau erkennbar (gedämpft, mit Etikett) —
+   sie darf nie mit einem echten Projekt verwechselt werden.
+   --------------------------------------------------------------------- */
+.po-vorschau {
+  position: relative;
+  border-radius: var(--wd-r-gross);
+  padding: clamp(1.1rem, 2.6vw, 1.5rem);
+  background: linear-gradient(180deg, rgba(20,32,50,.5), rgba(9,15,26,.66));
+  border: 1px dashed var(--wd-rand-stark);
+  text-align: left;
+  overflow: hidden;
+}
+.po-vorschau::after {
+  /* Sanfter Lichtstreifen, der einmal langsam durchwandert. Er sagt ohne
+     Worte "hier passiert gleich etwas", ohne zu blinken oder zu zappeln. */
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(105deg, transparent 35%, rgba(127,208,232,.07) 50%, transparent 65%);
+  background-size: 260% 100%;
+  animation: po-schimmer 5.5s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes po-schimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
+
+.po-vorschau-etikett {
+  position: absolute; top: .7rem; right: .8rem;
+  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
+  font-weight: 800; color: var(--wd-text-soft);
+  padding: .2rem .55rem; border-radius: 999px;
+  background: rgba(5,7,11,.7); border: 1px solid var(--wd-rand);
+}
+.po-vorschau-nr { font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--wd-blau); opacity: .75; }
+.po-vorschau h4 { margin: .15rem 0 .6rem; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--wd-text); opacity: .85; }
+
+/* Die laufende Phasenleiste — der eigentliche Kern der Vorschau. */
+.po-vorschau-phasen { display: flex; gap: 3px; margin-bottom: .5rem; }
+.po-vorschau-phasen span {
+  flex: 1; height: 6px; border-radius: 999px;
+  background: rgba(127,208,232,.13);
+  animation: po-phase-lauf 7s ease-in-out infinite;
+}
+.po-vorschau-phasen span:nth-child(1) { animation-delay: 0s; }
+.po-vorschau-phasen span:nth-child(2) { animation-delay: .55s; }
+.po-vorschau-phasen span:nth-child(3) { animation-delay: 1.1s; }
+.po-vorschau-phasen span:nth-child(4) { animation-delay: 1.65s; }
+.po-vorschau-phasen span:nth-child(5) { animation-delay: 2.2s; }
+.po-vorschau-phasen span:nth-child(6) { animation-delay: 2.75s; }
+.po-vorschau-phasen span:nth-child(7) { animation-delay: 3.3s; }
+@keyframes po-phase-lauf {
+  0%, 8%   { background: rgba(127,208,232,.13); }
+  14%, 55% { background: var(--wd-blau-tief); }
+  100%     { background: rgba(127,208,232,.13); }
+}
+
+.po-vorschau-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--wd-text-soft); }
+.po-vorschau-marke {
+  display: inline-flex; align-items: center; gap: .3rem;
+  padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
+  background: rgba(127,208,232,.12); color: var(--wd-blau);
+}
+.po-vorschau-schritt { margin: .7rem 0 0; font-size: .88rem; color: var(--wd-text-mid); opacity: .8; }
+
+/* Bewegungsreduktion: keine Animation, aber die Leiste soll trotzdem
+   etwas zeigen — sonst steht dort eine leere graue Reihe. */
+@media (prefers-reduced-motion: reduce) {
+  .po-vorschau::after { animation: none; }
+  .po-vorschau-phasen span { animation: none; }
+  .po-vorschau-phasen span:nth-child(-n+3) { background: var(--wd-blau-tief); }
+}
+
+/* Die vier Merkmale kompakter und mit farbigem Akzent statt nur Nummer. */
+.po-leer-punkt { transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; }
+.po-leer-punkt:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.08); }
+.po-leer-nr {
+  background: linear-gradient(135deg, rgba(127,208,232,.22), rgba(183,157,255,.18));
+  color: var(--wd-blau-hell); border-color: var(--wd-rand-stark);
+}

assets/js/i18n-wd-portal.js

@@ -72,6 +72,28 @@ window.I18N_WD = {
     pt: "O teu projeto aparece aqui assim que for criado.",
   },
   /* --- Leerer Zustand: fuehrt, statt zu enttaeuschen --- */
+  po_vorschau: {
+    de: "Vorschau",
+    "de-CH": "Vorschau",
+    en: "Preview",
+    fr: "Aperçu",
+    pt: "Pré-visualização",
+  },
+  po_vorschau_titel: {
+    de: "So sieht dein Projekt hier aus",
+    "de-CH": "So gseht dis Projekt do us",
+    en: "This is how your project will look here",
+    fr: "Voici à quoi ressemblera ton projet",
+    pt: "É assim que o teu projeto vai aparecer aqui",
+  },
+  po_vorschau_schritt: {
+    de: "Entwurf ansehen und Rückmeldung geben",
+    "de-CH": "Entwurf aaluege und Rückmäldig gäh",
+    en: "Review the draft and give feedback",
+    fr: "Consulter la maquette et donner ton retour",
+    pt: "Ver o esboço e dar feedback",
+  },
+
   po_leer_h3: {
     de: "Gleich geht es los",
     "de-CH": "Glii gohts los",

assets/js/wd-portal.js

@@ -180,6 +180,24 @@
           "</div>" +
           "<h3>" + s(window.WD.t("po_leer_h3")) + "</h3>" +
           '<p class="wd-leise">' + s(window.WD.t("po_keine_projekte")) + "</p>" +
+          /* ZEIGEN statt erzaehlen: eine echte, als Vorschau erkennbare
+             Projektkarte mit laufender Phasenleiste. Man versteht in zwei
+             Sekunden, was drei Saetze nicht erklaeren. */
+          '<div class="po-vorschau">' +
+            '<span class="po-vorschau-etikett">' + s(window.WD.t("po_vorschau")) + "</span>" +
+            '<span class="po-vorschau-nr">P-0000-0000</span>' +
+            "<h4>" + s(window.WD.t("po_vorschau_titel")) + "</h4>" +
+            '<div class="po-vorschau-phasen" aria-hidden="true">' +
+              "<span></span><span></span><span></span><span></span><span></span><span></span><span></span>" +
+            "</div>" +
+            '<div class="po-vorschau-zeile">' +
+              '<span class="po-vorschau-marke">' + s(window.WD.t("po_wartet_dogfather")) + "</span>" +
+              "<span>" + s(window.WD.t("po_st_design")) + " · 3/7</span>" +
+            "</div>" +
+            '<p class="po-vorschau-schritt"><strong>' + s(window.WD.t("po_naechster_schritt")) +
+              ":</strong> " + s(window.WD.t("po_vorschau_schritt")) + "</p>" +
+          "</div>" +
+
           '<div class="po-leer-liste">' +
             [["po_leer_1", "po_leer_1t"], ["po_leer_2", "po_leer_2t"],
              ["po_leer_3", "po_leer_3t"], ["po_leer_4", "po_leer_4t"]]