diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css
index ed4af86b..4f14f2be 100644
--- a/assets/css/webdesign.css
+++ b/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);
+}
diff --git a/assets/js/i18n-wd-portal.js b/assets/js/i18n-wd-portal.js
index c426dc85..ba7c1100 100644
--- a/assets/js/i18n-wd-portal.js
+++ b/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",
diff --git a/assets/js/wd-portal.js b/assets/js/wd-portal.js
index 9708948f..d82052fb 100644
--- a/assets/js/wd-portal.js
+++ b/assets/js/wd-portal.js
@@ -180,6 +180,24 @@
"" +
"" + s(window.WD.t("po_leer_h3")) + "
" +
'' + s(window.WD.t("po_keine_projekte")) + "
" +
+ /* ZEIGEN statt erzaehlen: eine echte, als Vorschau erkennbare
+ Projektkarte mit laufender Phasenleiste. Man versteht in zwei
+ Sekunden, was drei Saetze nicht erklaeren. */
+ '' +
+ '
' + s(window.WD.t("po_vorschau")) + "" +
+ '
P-0000-0000' +
+ "
" + s(window.WD.t("po_vorschau_titel")) + "
" +
+ '
' +
+ "" +
+ "
" +
+ '
' +
+ '' + s(window.WD.t("po_wartet_dogfather")) + "" +
+ "" + s(window.WD.t("po_st_design")) + " · 3/7" +
+ "
" +
+ '
' + s(window.WD.t("po_naechster_schritt")) +
+ ": " + s(window.WD.t("po_vorschau_schritt")) + "
" +
+ "
' +
[["po_leer_1", "po_leer_1t"], ["po_leer_2", "po_leer_2t"],
["po_leer_3", "po_leer_3t"], ["po_leer_4", "po_leer_4t"]]