Frontend: Kommentarbereich, Ladezeit & Interaktionsleiste

- "Antworten"-Überschrift entfernt; direkte Antworten sind eine flache Liste
- Thread-Strich nur noch bei der Ahnenkette (#ancestors), Antworten nur eingerückt
- font-display: swap + korrekte format()-Hinweise -> kein FOIT mehr beim Laden
- Interaktionsleiste als Grid: Vote-Buttons zentriert, "n Antworten" links daneben

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

web/css/app.css

@@ -2,28 +2,34 @@
    EB Garamond als Fließtext, Cheltenham Classic für die Überschrift,
    Concrete-Textur als Hintergrund, weiße zentrierte Inhaltsspalte. */
 
+/* font-display: swap -> Text wird sofort mit System-Serife gezeichnet und
+   wechselt zur Webschrift, sobald geladen (kein FOIT). Der Browser lädt nur
+   das erste passende src-Format, daher .ttf als truetype korrekt deklarieren. */
 @font-face {
   font-family: "EB Garamond";
-  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
-       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("truetype");
+  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf") format("truetype"),
+       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "EB Garamond";
-  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf"),
-       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("truetype");
+  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf") format("truetype"),
+       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("opentype");
   font-weight: normal;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Cheltenham Classic";
-  src: url("/static/assets/cheltenham/CheltenhamClassic.ttf"),
-       url("/static/assets/cheltenham/CheltenhamClassic.otf") format("truetype");
+  src: url("/static/assets/cheltenham/CheltenhamClassic.ttf") format("truetype"),
+       url("/static/assets/cheltenham/CheltenhamClassic.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 html {
@@ -163,15 +169,34 @@ a.button:hover, button:hover {
   max-width: 100%;
 }
 
-/* Ahnenkette / Antworten leicht eingerückt mit Threadline. */
-#ancestors .card,
-#replies .card {
+/* Ahnenkette: der Strich links symbolisiert den Thread oberhalb des Beitrags. */
+#ancestors .card {
   border-left: 3px solid gray;
   margin-left: 3%;
   padding-left: 0.75rem;
 }
 
+/* Direkte Antworten unter dem Fokus-Beitrag: nur eingerückt, kein Thread-Strich. */
+#replies .card {
+  margin-left: 3%;
+  padding-left: 0.75rem;
+}
+
+/* Interaktionsleiste: Vote-Buttons mittig (auto-Spalte zwischen zwei gleichen
+   1fr-Spalten), das Antworten-Label links daneben. */
+.interactions {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin-top: 0.25rem;
+}
+
+.interactions .replies {
+  justify-self: start;
+}
+
 .row {
+  justify-self: center;
   display: flex;
   align-items: center;
   gap: 0.5rem;

web/entry.html

@@ -31,7 +31,6 @@
       <p class="msg" id="reply-msg"></p>
     </section>
 
-    <h2 id="replies-heading">Antworten</h2>
     <section id="replies"></section>
   </main>
 

web/js/feed.js

@@ -60,12 +60,14 @@ function renderEntry(e) {
     <div class="muted"><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when}</div>
     <div class="content">${linkify(e.content)}</div>
     ${media}
-    <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="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>
     </div>
-    <div class="muted"><a href="/e/${e.pid}">${replyLabel}</a></div>
   `;
   setupVoting(el, e.pid);
   el.addEventListener("click", (ev) => {