feat(portal): Live-Vorschaufenster pro Projektkarte im Kundenbereich

Statt nur Name + Link zeigt jede Projektkarte jetzt ein kleines,
skaliertes Live-Fenster der echten Webseite (iframe der previewUrl,
responsiv per ResizeObserver auf 1280px-Basisbreite herunterskaliert).
Klick aufs Fenster oeffnet die Seite im neuen Tab. Nicht-fertige
Projekte zeigen einen Platzhalter statt iframe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/app.js

@@ -83,6 +83,22 @@ function featuresForProject(features, projectId) {
   return features.filter((f) => !f.projectId || f.projectId === projectId)
 }
 
+const PREVIEW_BASE_WIDTH = 1280
+function setupPreviewFrame(frame) {
+  const view = frame.querySelector('.preview-frame__view')
+  if (!view) return
+  const apply = () => {
+    const w = frame.clientWidth
+    if (w) view.style.transform = `scale(${w / PREVIEW_BASE_WIDTH})`
+  }
+  if (typeof ResizeObserver !== 'undefined') {
+    new ResizeObserver(apply).observe(frame)
+  } else {
+    window.addEventListener('resize', apply)
+  }
+  apply()
+}
+
 function renderProjectCard(project, features) {
   const li = document.createElement('li')
   li.className = 'project-card'
@@ -91,14 +107,25 @@ function renderProjectCard(project, features) {
     ? `<div class="feature-tags">${projectFeatures.map((f) => `<span class="feature-tag">${escapeHtml(f.featureKey)}</span>`).join('')}</div>`
     : ''
 
+  const ready = isProjectPreviewReady(project)
+  const url = project.previewUrl ? escapeAttr(project.previewUrl) : ''
+  const previewHtml = ready && url
+    ? `
+      <a class="preview-frame" href="${url}" target="_blank" rel="noreferrer" data-preview-frame aria-label="Projekt-Webseite in neuem Tab öffnen">
+        <iframe class="preview-frame__view" src="${url}" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
+        <span class="preview-frame__hint">Webseite öffnen ↗</span>
+      </a>`
+    : `<div class="preview-frame preview-frame--empty"><span>${project.previewUrl ? 'Vorschau wird vorbereitet …' : 'Noch keine Webseite veröffentlicht'}</span></div>`
+
   li.innerHTML = `
+    ${previewHtml}
     <h2>${escapeHtml(project.projectName || project.subdomain || 'Projekt')}</h2>
     <dl>
       <dt>Subdomain</dt><dd>${escapeHtml(project.subdomain || '–')}</dd>
-      <dt>Vorschau</dt><dd>${project.previewUrl ? `<a class="btn btn-green" href="${escapeAttr(project.previewUrl)}">Projekt-Webseite öffnen</a>` : '–'}</dd>
       <dt>Live-Domain</dt><dd>${project.liveDomain ? escapeHtml(project.liveDomain) : '–'}</dd>
       <dt>Status</dt><dd>${escapeHtml(project.status || '–')}</dd>
     </dl>
+    ${ready && url ? `<p class="preview-open"><a class="btn btn-green" href="${url}" target="_blank" rel="noreferrer">Projekt-Webseite öffnen ↗</a></p>` : ''}
     ${featureHtml}
     <div class="project-details-toggle">
       <button type="button" class="portal-btn-outline" data-details-btn>Details anzeigen</button>
@@ -106,6 +133,9 @@ function renderProjectCard(project, features) {
     <div class="project-details hidden" data-details-box></div>
   `
 
+  const frame = li.querySelector('[data-preview-frame]')
+  if (frame) setupPreviewFrame(frame)
+
   const btn = li.querySelector('[data-details-btn]')
   const box = li.querySelector('[data-details-box]')
   let loaded = false

public/dashboard.html

@@ -61,6 +61,31 @@
     .commit-meta { font-size: 12px; opacity: 0.6; }
     .commit-body { font-size: 13px; opacity: 0.8; white-space: pre-wrap; margin: 2px 0 0 8px; }
 
+    /* Projekt-Vorschaufenster */
+    .preview-frame {
+      position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
+      overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
+      background: rgba(255,255,255,0.04); margin-bottom: 1rem; text-decoration: none;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+    .preview-frame:hover { border-color: rgba(157,61,254,0.7); box-shadow: 0 0 0 1px rgba(157,61,254,0.35); }
+    .preview-frame__view {
+      position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0;
+      transform-origin: 0 0; pointer-events: none; background: #fff;
+    }
+    .preview-frame__hint {
+      position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
+      font-size: 13px; font-weight: 600; color: #fff;
+      background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
+      opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
+    }
+    .preview-frame:hover .preview-frame__hint { opacity: 1; }
+    .preview-frame--empty {
+      display: flex; align-items: center; justify-content: center;
+      color: rgba(255,255,255,0.5); font-size: 14px; aspect-ratio: 16 / 10;
+    }
+    .preview-open { margin: 0.75rem 0 0; }
+
     /* Chat */
     .chat-box { display: flex; flex-direction: column; height: 480px; }
     .chat-messages { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }