style(post): polish post header + actions toolbar

- PostActions: every item is a rounded-full pill with subtle border;
  the three icon-only actions (share/copy/print) cluster in one
  segmented control with divider lines, count + reading-time stand
  alone left and right
- Share button only renders when `navigator.share` is available so
  desktop doesn't get a duplicate of "Copy link"
- All action buttons drop their inline labels and use `title=` +
  `aria-label` for tooltip-only access; copy still flips icon to a
  checkmark for 1.5s on success
- Empty comment state stacks vertically on mobile (icon above), goes
  horizontal + left-aligned on ≥sm
- Post header rebuilt: image fixed at 150x150 (no more mobile blow-up),
  right column is `flex flex-col gap-3` so date/tags/actions share one
  rhythm instead of ad-hoc margins
- Reading-time now also walks `row*Content` and pulls `content`/`body`/
  `text` strings — Termin-Posts with empty body but markdown rows now
  show a meaningful estimate

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

src/lib/components/Comments.svelte

@@ -400,8 +400,8 @@
     </div>
   {:else}
     {#if topLevel.length === 0}
-      <div class="flex flex-col items-center gap-2 py-8 text-center">
-        <Icon icon="mdi:comment-text-outline" class="size-10 text-zinc-300" />
+      <div class="flex flex-col items-center gap-2 py-8 text-center sm:flex-row sm:items-center sm:text-left sm:py-4 sm:gap-3">
+        <Icon icon="mdi:comment-text-outline" class="size-10 text-zinc-300 shrink-0" />
         <p class="text-sm text-zinc-500">{t(T.comments_empty)}</p>
       </div>
     {:else}

src/lib/components/PostActions.svelte

@@ -64,7 +64,9 @@
   });
 
   function onCommentClick(e: MouseEvent) {
-    const el = document.getElementById(commentTargetId) as HTMLDetailsElement | null;
+    const el = document.getElementById(
+      commentTargetId,
+    ) as HTMLDetailsElement | null;
     if (!el) return;
     e.preventDefault();
     el.open = true;
@@ -76,6 +78,17 @@
   let copyTimer: ReturnType<typeof setTimeout> | null = null;
   let shareTimer: ReturnType<typeof setTimeout> | null = null;
 
+  // Share button only renders when the browser actually has a native share-
+  // sheet — otherwise it would just be a duplicate of "Link kopieren".
+  // SSR has no `navigator`, so this stays false until client mount.
+  let canShare = $state(false);
+  $effect(() => {
+    canShare =
+      typeof navigator !== "undefined" &&
+      typeof (navigator as Navigator & { share?: unknown }).share ===
+        "function";
+  });
+
   function flashCopied() {
     copied = true;
     if (copyTimer) clearTimeout(copyTimer);
@@ -110,17 +123,16 @@
   }
 
   async function share() {
-    const w = window as unknown as { navigator: Navigator & { share?: (data: ShareData) => Promise<void> } };
-    if (typeof w.navigator.share === "function") {
-      try {
-        await w.navigator.share({ title, url });
-        flashShared();
-        return;
-      } catch {
-        // user cancelled or share failed → fall through to copy
-      }
+    const nav = navigator as Navigator & {
+      share?: (data: ShareData) => Promise<void>;
+    };
+    if (typeof nav.share !== "function") return;
+    try {
+      await nav.share({ title, url });
+      flashShared();
+    } catch {
+      // user cancelled — no fallback, copy-link button covers that case
     }
-    await copyLink();
   }
 
   function print() {
@@ -128,56 +140,71 @@
   }
 </script>
 
-<div class="inline-flex flex-wrap items-center gap-x-3 gap-y-1 {cls}">
+<!--
+  Post-actions toolbar. Each item is a rounded-full pill with a subtle
+  border so they read as visually equal "badges". Order:
+    [info badges]  |  [action buttons]
+  i.e. info-style items (count, reading time) stand left/right, the
+  three icon-only actions cluster in the middle.
+-->
+<div class="inline-flex flex-wrap items-center gap-2 {cls}">
   {#if commentPageId}
     <a
       href="#{commentTargetId}"
       onclick={onCommentClick}
       aria-label={t(T.comments_jump_to)}
-      class="no-underline! inline-flex items-center gap-1 text-xs font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
+      title={t(T.comments_jump_to)}
+      class="no-underline! inline-flex items-center gap-1 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700! hover:bg-zinc-50 hover:border-zinc-300 transition-colors"
     >
-      <Icon icon="mdi:comment-outline" class="size-4" />
+      <Icon icon="mdi:comment-outline" class="size-3.5" />
       <span class="tabular-nums">{commentCount ?? "…"}</span>
     </a>
   {/if}
 
-  <button
-    type="button"
-    onclick={share}
-    class="inline-flex items-center gap-1 text-xs font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
-    aria-label={t(T.post_action_share)}
-  >
-    <Icon icon={shared ? "mdi:check" : "mdi:share-variant-outline"} class="size-4" />
-    <span class="hidden sm:inline">{shared ? t(T.post_action_copied) : t(T.post_action_share)}</span>
-  </button>
-
-  <button
-    type="button"
-    onclick={copyLink}
-    class="inline-flex items-center gap-1 text-xs font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
-    aria-label={t(T.post_action_copy)}
-  >
-    <Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-4" />
-    <span class="hidden sm:inline">{copied ? t(T.post_action_copied) : t(T.post_action_copy)}</span>
-  </button>
-
-  <button
-    type="button"
-    onclick={print}
-    class="inline-flex items-center gap-1 text-xs font-medium text-zinc-600 hover:text-zinc-900 transition-colors print:hidden"
-    aria-label={t(T.post_action_print)}
-  >
-    <Icon icon="mdi:printer-outline" class="size-4" />
-    <span class="hidden sm:inline">{t(T.post_action_print)}</span>
-  </button>
+  <div class="inline-flex items-center rounded-full border border-zinc-200 bg-white overflow-hidden divide-x divide-zinc-200 print:hidden">
+    {#if canShare}
+      <button
+        type="button"
+        onclick={share}
+        class="inline-flex items-center px-2.5 py-1 text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
+        aria-label={t(T.post_action_share)}
+        title={t(T.post_action_share)}
+      >
+        <Icon
+          icon={shared ? "mdi:check" : "mdi:share-variant-outline"}
+          class="size-3.5"
+        />
+      </button>
+    {/if}
+    <button
+      type="button"
+      onclick={copyLink}
+      class="inline-flex items-center px-2.5 py-1 text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
+      aria-label={copied ? t(T.post_action_copied) : t(T.post_action_copy)}
+      title={copied ? t(T.post_action_copied) : t(T.post_action_copy)}
+    >
+      <Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
+    </button>
+    <button
+      type="button"
+      onclick={print}
+      class="inline-flex items-center px-2.5 py-1 text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
+      aria-label={t(T.post_action_print)}
+      title={t(T.post_action_print)}
+    >
+      <Icon icon="mdi:printer-outline" class="size-3.5" />
+    </button>
+  </div>
 
   {#if readingTimeMinutes != null && readingTimeMinutes > 0}
     <span
-      class="inline-flex items-center gap-1 text-xs text-zinc-500"
+      class="inline-flex items-center gap-1 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs text-zinc-500"
       title={t(T.post_action_reading_time, { minutes: readingTimeMinutes })}
     >
-      <Icon icon="mdi:clock-outline" class="size-4" />
-      <span class="tabular-nums">{t(T.post_action_reading_time, { minutes: readingTimeMinutes })}</span>
+      <Icon icon="mdi:clock-outline" class="size-3.5" />
+      <span class="tabular-nums"
+        >{t(T.post_action_reading_time, { minutes: readingTimeMinutes })}</span
+      >
     </span>
   {/if}
 </div>

src/routes/post/[slug]/+page.server.ts

@@ -237,10 +237,36 @@ export const load: PageServerLoad = async ({ params, locals, url, setHeaders })
   }
 
   // Reading-time estimate. ~200 words per minute for German non-fiction.
-  // Strips HTML tags, then counts whitespace-separated tokens. Includes only
-  // the prose body (headline + content); rows aren't part of the prose flow.
+  // Pulls text from headline + body markdown AND from referenced row blocks
+  // (Termin-Posts have an empty body; their text lives in row1Content
+  // markdown/text references). Walks the post tree once, collecting any
+  // `content` / `body` / `text` string fields below row*Content. HTML tags
+  // get stripped before the word count.
   const readingTimeMinutes = (() => {
-    const plain = (contentHeadlineHtml + " " + contentBodyHtml)
+    const parts: string[] = [contentHeadlineHtml, contentBodyHtml];
+    const collect = (node: unknown) => {
+      if (!node || typeof node !== "object") return;
+      if (Array.isArray(node)) {
+        for (const item of node) collect(item);
+        return;
+      }
+      const obj = node as Record<string, unknown>;
+      for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === "string") {
+          if (key === "content" || key === "body" || key === "text") {
+            parts.push(value);
+          }
+        } else {
+          collect(value);
+        }
+      }
+    };
+    collect((post as { row1Content?: unknown }).row1Content);
+    collect((post as { row2Content?: unknown }).row2Content);
+    collect((post as { row3Content?: unknown }).row3Content);
+
+    const plain = parts
+      .join(" ")
       .replace(/<[^>]+>/g, " ")
       .replace(/\s+/g, " ")
       .trim();

src/routes/post/[slug]/+page.svelte

@@ -24,10 +24,10 @@
   {/if}
 </svelte:head>
 
-<div class="md:flex gap-2 items-end">
+<div class="my-4 md:flex md:items-start md:gap-4">
   {#if data.rawPostImageUrl}
     <div
-      class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg aspect-square"
+      class="w-[150px] shrink-0 overflow-hidden border border-white ring-1 ring-black/50 shadow-lg aspect-square"
     >
       <RustyImage
         src={data.rawPostImageUrl}
@@ -44,7 +44,7 @@
     </div>
   {:else if data.postImageUrl}
     <div
-      class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg aspect-square"
+      class="w-[150px] shrink-0 overflow-hidden border border-white ring-1 ring-black/50 shadow-lg aspect-square"
     >
       <img
         src={data.postImageUrl}
@@ -57,34 +57,32 @@
       />
     </div>
   {/if}
-  <div class="mt-2 mb-4! md:mb-1 min-w-0 gap-2">
-    {#if data.postDate || data.commentPageId}
-      <div class="flex flex-nowrap gap-2 items-center shrink-0 mb-2">
-        {#if data.postDate}
-          <Tag label={data.postDate} variant="date" />
-        {/if}
+
+  <!-- Right column: stacked rows with consistent rhythm -->
+  <div class="mt-3 md:mt-0 min-w-0 flex flex-col gap-3">
+    {#if data.postDate}
+      <div class="flex flex-wrap items-center gap-2">
+        <Tag label={data.postDate} variant="date" />
       </div>
     {/if}
-    <div
-      class="flex flex-nowrap gap-2 items-center shrink-0 p-1 pb-4 -ml-1 overflow-x-auto overflow-y-hidden"
-    >
-      <Tags
-        tags={data.post.postTag ?? []}
-        variant="green"
-        tagBase="/posts/tag"
-      />
-    </div>
+    {#if (data.post.postTag ?? []).length > 0}
+      <div class="flex flex-wrap items-center gap-1.5 -ml-0.5">
+        <Tags
+          tags={data.post.postTag ?? []}
+          variant="green"
+          tagBase="/posts/tag"
+        />
+      </div>
+    {/if}
+    <PostActions
+      url={data.canonicalUrl}
+      title={data.seoTitle}
+      readingTimeMinutes={data.readingTimeMinutes}
+      commentPageId={data.commentPageId}
+      commentTargetId="comments-section"
+    />
   </div>
 </div>
-<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-zinc-600">
-  <PostActions
-    url={data.canonicalUrl}
-    title={data.seoTitle}
-    readingTimeMinutes={data.readingTimeMinutes}
-    commentPageId={data.commentPageId}
-    commentTargetId="comments-section"
-  />
-</div>
 
 <article
   class="mt-8 h-entry"