style(comments): move count badge under image, drop underline

Repositions the CommentCountBadge out of the date row into its own
container below the post image. Removes hover colour-change + the
prose underline (`no-underline\!`) so the badge sits flat with the
post chrome.

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

src/lib/components/CommentCountBadge.svelte

@@ -55,7 +55,7 @@
   href="#{targetId}"
   onclick={onClick}
   aria-label="Zu Kommentaren springen"
-  class="inline-flex items-center gap-1 text-sm text-zinc-600 hover:text-zinc-900 transition-colors {cls}"
+  class="no-underline! inline-flex items-center gap-1 text-xs font-medium transition-colors {cls}"
 >
   <Icon icon="mdi:comment-outline" class="size-4" />
   <span class="tabular-nums">{count ?? "…"}</span>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import ContentRows from '$lib/components/ContentRows.svelte';
+  import ContentRows from "$lib/components/ContentRows.svelte";
-  import Tag from '$lib/components/Tag.svelte';
+  import Tag from "$lib/components/Tag.svelte";
-  import Tags from '$lib/components/Tags.svelte';
+  import Tags from "$lib/components/Tags.svelte";
-  import EventBadges from '$lib/components/EventBadges.svelte';
+  import EventBadges from "$lib/components/EventBadges.svelte";
-  import EventMap from '$lib/components/EventMap.svelte';
+  import EventMap from "$lib/components/EventMap.svelte";
-  import Accordion from '$lib/components/Accordion.svelte';
+  import Accordion from "$lib/components/Accordion.svelte";
-  import CommentCountBadge from '$lib/components/CommentCountBadge.svelte';
+  import CommentCountBadge from "$lib/components/CommentCountBadge.svelte";
-  import Comments from '$lib/components/Comments.svelte';
+  import Comments from "$lib/components/Comments.svelte";
-  import RustyImage from '$lib/components/RustyImage.svelte';
+  import RustyImage from "$lib/components/RustyImage.svelte";
-  import { t, T } from '$lib/translations';
+  import { t, T } from "$lib/translations";
-  import type { PageData } from './$types';
+  import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
 </script>
@@ -26,7 +26,9 @@
 
 <div class="md:flex gap-2 items-end">
   {#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">
+    <div
+      class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg aspect-square"
+    >
       <RustyImage
         src={data.rawPostImageUrl}
         focal={data.postImageFocal}
@@ -41,7 +43,9 @@
       />
     </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">
+    <div
+      class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg aspect-square"
+    >
       <img
         src={data.postImageUrl}
         alt=""
@@ -59,29 +63,40 @@
         {#if data.postDate}
           <Tag label={data.postDate} variant="date" />
         {/if}
-        {#if data.commentPageId}
-          <CommentCountBadge pageId={data.commentPageId} targetId="comments-section" />
-        {/if}
       </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">
+    <div
-      <Tags tags={data.post.postTag ?? []} variant="green" tagBase="/posts/tag" />
+      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>
   </div>
 </div>
+<div>
+  {#if data.commentPageId}
+    <CommentCountBadge
+      pageId={data.commentPageId}
+      targetId="comments-section"
+    />
+  {/if}
+</div>
 
 <article
   class="mt-8 h-entry"
   itemscope
-  itemtype={data.isEvent ? 'https://schema.org/Event' : 'https://schema.org/BlogPosting'}
+  itemtype={data.isEvent
+    ? "https://schema.org/Event"
+    : "https://schema.org/BlogPosting"}
 >
   <a class="u-url" href="#" aria-hidden="true" hidden></a>
   {#if data.post.created}
-    <time
+    <time class="dt-published" datetime={String(data.post.created)} hidden
-      class="dt-published"
+      >{data.post.created}</time
-      datetime={String(data.post.created)}
+    >
-      hidden
-    >{data.post.created}</time>
   {/if}
   {#if data.contentHeadlineHtml}
     <div class="content markdown max-w-none prose prose-zinc p-name">
@@ -105,7 +120,9 @@
       <EventBadges
         eventDate={data.eventDateRaw}
         locationText={data.eventLocationText}
-        locationHref={(data.mapEmbedUrl || data.mapLinkUrl) ? '#map-section' : null}
+        locationHref={data.mapEmbedUrl || data.mapLinkUrl
+          ? "#map-section"
+          : null}
       />
     </div>
   {/if}
@@ -119,11 +136,11 @@
   {/if}
   {#if (data.post.postTag ?? []).length > 0}
     <div hidden>
-      {#each (data.post.postTag ?? []) as tag}
+      {#each data.post.postTag ?? [] as tag}
         {@const tagName =
-          tag && typeof tag === 'object'
+          tag && typeof tag === "object"
-            ? ((tag as { name?: string }).name ?? '')
+            ? ((tag as { name?: string }).name ?? "")
-            : ''}
+            : ""}
         {#if tagName}
           <span class="p-category">{tagName}</span>
         {/if}
@@ -131,7 +148,10 @@
     </div>
   {/if}
   <div class="p-author h-card" hidden>
-    <span class="p-name">{(data.post as { author?: string }).author ?? 'Bürgerinitiative Vachdorf'}</span>
+    <span class="p-name"
+      >{(data.post as { author?: string }).author ??
+        "Bürgerinitiative Vachdorf"}</span
+    >
   </div>
 </article>
 
@@ -146,7 +166,12 @@
 {/if}
 
 {#if data.commentPageId}
-  <Accordion id="comments-section" label={t(data.translations, T.post_comments)} lazy class="mt-6">
+  <Accordion
+    id="comments-section"
+    label={t(data.translations, T.post_comments)}
+    lazy
+    class="mt-6"
+  >
     <div class="p-8 border border-zinc-200 rounded-lg">
       <Comments pageId={data.commentPageId} />
     </div>