Thread-Layout: Strich als Flex-Geschwister, mittig unter dem Avatar

Strich neben dem Content wird über ein eigenes Flex-Element mit
align-self: stretch gezeichnet statt über eine Border am Content –
dadurch exakt so hoch wie der Inhalt, kein Über-/Unterstehen mehr.
Vorfahren und Antworten teilen denselben Mechanismus (Antworten ohne
Border). Strichposition und -dicke über CSS-Variablen an die halbe
Avatargröße gekoppelt, sodass die Linie mittig unter dem Byline-Avatar
sitzt. Antworten-Label in die Byline verschoben, vertikaler Abstand
unter den .body-Container.

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

web/js/feed.js

@@ -45,9 +45,13 @@ function renderEntry(e) {
   // Soft-gelöschter Beitrag: nur Platzhalter, damit der Thread navigierbar bleibt.
   if (e.deleted) {
     el.innerHTML = `
-      <div class="muted">[deleted] · ${when}</div>
-      <div class="content">[deleted]</div>
-      <div class="muted"><a href="/e/${e.pid}">${replyLabel}</a></div>
+      <div class="muted byline"><span>[deleted] · ${when} · <a href="/e/${e.pid}">${replyLabel}</a></span></div>
+      <div class="threadline-wrapper">
+        <div class="threadline"></div>
+        <div class="body">
+          <div class="content">[deleted]</div>
+        </div>
+      </div>
     `;
     el.addEventListener("click", (ev) => {
       if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
@@ -64,16 +68,20 @@ function renderEntry(e) {
   el.innerHTML = `
     <div class="muted byline">
       <a href="/u/${user}"><img class="avatar avatar-sm" src="${avatarUrl(e.avatar)}" alt="" loading="lazy"></a>
-      <span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when}</span>
+      <span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when} · <a href="/e/${e.pid}">${replyLabel}</a></span>
     </div>
-    <div class="content">${linkify(e.content)}</div>
-    ${media}
-    <div class="interactions">
-      <div class="muted replies"><a href="/e/${e.pid}">${replyLabel}</a></div>
-      <div class="row">
-        <button class="ghost" data-mode="left">Links</button>
-        <span class="muted">– / –</span>
-        <button class="ghost" data-mode="right">Rechts</button>
+    <div class="threadline-wrapper">
+      <div class="threadline"></div>
+      <div class="body">
+        <div class="content">${linkify(e.content)}</div>
+        ${media}
+        <div class="interactions">
+          <div class="row">
+            <button class="ghost" data-mode="left">Links</button>
+            <span class="muted">– / –</span>
+            <button class="ghost" data-mode="right">Rechts</button>
+          </div>
+        </div>
       </div>
     </div>
   `;