dialog: auf eigene Seite auslagern — Beitrag bleibt sauber

- single.html: eingebetteter Dialog raus, stattdessen „→ Dialog"-Link
- neue /dialog/-Seite (content/dialog.md + layouts/_default/dialog.html) mit
  Thread aus ?thread=, Rücklink zum Beitrag
- dialog.js liest Thread aus data-thread ODER ?thread=
- Styling: Pill-Link am Beitragsende, zentrierte Dialog-Seite

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

assets/css/custom.css

@@ -424,12 +424,27 @@ 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 ───────────────────────────────────────────────────────────────── */
-.dialog {
+/* Link am Ende des Beitrags (der Beitrag selbst bleibt sauber) */
-  max-width: var(--container-width);
+.dialog-link {
-  margin: var(--spacing-xl) auto;
+  display: inline-block;
-  padding: 0 var(--spacing-md);
+  margin-top: var(--spacing-lg);
+  font-family: var(--font-family-display);
+  font-weight: 500;
+  color: var(--accent);
+  text-decoration: none;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  padding: 0.45em 1.2em;
 }
+.dialog-link:hover { background: var(--accent); color: #fff; }
+
+/* Eigene Dialog-Seite (/dialog/?thread=…) */
+.dialog-page { max-width: var(--container-width); margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); }
+.dialog-back { margin: 0 0 var(--spacing-sm); }
+.dialog-back a { color: var(--color-text-muted); text-decoration: none; }
+.dialog-back a:hover { color: var(--accent); }
+
 .dialog-title {
   font-family: var(--font-family-serif);
   border-top: 1px solid var(--color-border);

content/dialog.md

@@ -0,0 +1,5 @@
+---
+title: Dialog
+layout: dialog
+toc: false
+---

layouts/_default/dialog.html

@@ -0,0 +1,19 @@
+{{ define "main" }}
+  <div class="dialog-page">
+    <p class="dialog-back" id="dialog-context"></p>
+    <section id="ob-dialog"></section>
+  </div>
+  <script defer src="/dialog.js"></script>
+  <script>
+    /* Kontext: Rücklink zum diskutierten Beitrag (thread = dessen Pfad). */
+    (function () {
+      var t = new URLSearchParams(location.search).get('thread');
+      var el = document.getElementById('dialog-context');
+      if (t && el) {
+        var a = document.createElement('a');
+        a.href = t; a.textContent = '← zum Beitrag';
+        el.appendChild(a);
+      }
+    })();
+  </script>
+{{ end }}

layouts/_default/single.html

@@ -62,10 +62,9 @@
         {{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
       </ul>
     {{- end }}
+
+    {{/* Dialog liegt auf eigener Seite — der Beitrag bleibt sauber */}}
+    <a class="dialog-link" href="/dialog/?thread={{ .RelPermalink }}">→ Dialog</a>
   </article>
 
-  {{/* Dialog — jeder Beitrag ist ein Diskussionsstart */}}
-  <section class="dialog" id="ob-dialog" data-thread="{{ .RelPermalink }}"></section>
-  <script defer src="/dialog.js"></script>
-
 {{ end }}

static/dialog.js

@@ -3,7 +3,8 @@
 (function () {
   const root = document.getElementById('ob-dialog');
   if (!root) return;
-  const thread = root.dataset.thread;
+  const thread = root.dataset.thread || new URLSearchParams(location.search).get('thread') || '';
+  if (!thread) { root.innerHTML = '<p class="dialog-empty">Kein Thema gewählt.</p>'; return; }
   const TKEY = 'ob_dialog_token', NKEY = 'ob_dialog_name';
   let token = localStorage.getItem(TKEY);
   let myName = localStorage.getItem(NKEY);