dialog: eigene Diskussion pro Beitrag (MVP, flach, eingeladene-only)

- DB: public.comments (thread, parent_id, user_id, author_name/-avatar, body, deleted)
- API: GET /api/comments (öffentlich lesen), POST/DELETE (eingeloggt),
  POST /api/auth/login (Token fürs Widget)
- Vanilla-Widget static/dialog.js: Karten mit Name+Bild, flacher Dialog mit
  optionalem Bezug (↳ Antwort auf), Inline-Login, Löschen (eigene/Admin)
- eingebettet in single.html (thread = Beitrags-Pfad), Styling im Theme-Look
- Autorname/-bild kommen aus dem Profil (data/authors.json)

Realtime (Supabase) folgt als nächster Schritt.

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

assets/css/custom.css

@@ -424,6 +424,55 @@ a:hover {
 a.byline-author, a.journal-author { color: inherit; text-decoration: none; }
 a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
 
+/* ── Dialog (Diskussion pro Beitrag) ─────────────────────────────────────── */
+.dialog {
+  max-width: var(--container-width);
+  margin: var(--spacing-xl) auto;
+  padding: 0 var(--spacing-md);
+}
+.dialog-title {
+  font-family: var(--font-family-serif);
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+.dialog-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
+.dialog-empty { color: var(--color-text-muted); font-style: italic; }
+.dialog-card { border: 1px solid var(--color-border); border-radius: 12px; padding: var(--spacing-md); background: var(--color-bg-secondary); }
+.dialog-card-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.6em; }
+.dialog-avatar {
+  width: 40px; height: 40px; border-radius: 50%; flex: none;
+  background: var(--color-border) center/cover no-repeat;
+  display: grid; place-items: center; font-weight: 600; color: var(--color-text-muted);
+}
+.dialog-meta { display: flex; flex-direction: column; line-height: 1.3; }
+.dialog-name { font-weight: 600; }
+.dialog-time { font-size: var(--font-size-small); color: var(--color-text-muted); }
+.dialog-replyto { font-size: var(--font-size-small); color: var(--accent); }
+.dialog-body { font-family: var(--font-family-serif); line-height: 1.6; white-space: pre-wrap; }
+.dialog-actions { display: flex; gap: 0.8em; margin-top: 0.6em; }
+.dialog-actions button {
+  background: none; border: none; padding: 0; cursor: pointer;
+  font-size: var(--font-size-small); color: var(--color-text-muted);
+}
+.dialog-actions button:hover { color: var(--accent); }
+
+.dialog-composer { display: flex; flex-direction: column; gap: 0.6em; }
+.dialog-loginhint { color: var(--color-text-muted); margin: 0; }
+.dialog-textarea, .dialog-input {
+  width: 100%; font: inherit; padding: 0.7em 0.9em;
+  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-primary);
+}
+.dialog-textarea { min-height: 90px; resize: vertical; font-family: var(--font-family-serif); }
+.dialog-row { display: flex; gap: 0.6em; }
+.dialog-send {
+  font: inherit; cursor: pointer; padding: 0.55em 1.3em; border-radius: 999px;
+  background: var(--accent); color: #fff; border: 1px solid var(--accent);
+}
+.dialog-send:hover { background: #a23f23; }
+.dialog-logout { font: inherit; cursor: pointer; padding: 0.55em 1.1em; border-radius: 999px; background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); }
+.dialog-replychip { align-self: flex-start; font-size: var(--font-size-small); cursor: pointer; padding: 0.25em 0.8em; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: none; }
+
 /* ------------------------------------------------------------------------
    Journal entries — three Republik-style layouts (set in front matter
    via `layout: image|icon|text`). Every entry is a full-bleed coloured