feat: Social-Bild-Generator auch für Posts (Endpoint, Modal, PostActions-Button)

Neuer Endpoint /api/social/post/[slug] mit gleichem Pattern wie für
Termine: Logo, Tag-Pill aus Title/Tags-Keywords (Presse, Demo,
Rückblick, Interview, Studie, Rechtlich, Meinung etc.), Datum,
Headline mit dynamischer Fontsize, Subheadline/Excerpt-Snippet, QR
zum Beitrag, Footer. 3 Formate × 3 Themes wie Kalender.

SocialImageModal in eigene wiederverwendbare Komponente extrahiert
und sowohl im PostActions als auch im CalendarBlock eingebunden.
PostActions akzeptiert socialSlug-Prop und blendet bei vorhandenem
Slug einen Modal-Trigger-Button neben den anderen Aktions-Icons ein.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/components/PostActions.svelte

@@ -5,6 +5,8 @@
   import { useTranslate, T } from "$lib/translations";
   import QrButton from "$lib/components/QrButton.svelte";
 
+  import SocialImageModal from "$lib/components/SocialImageModal.svelte";
+
   let {
     url,
     title,
@@ -12,6 +14,7 @@
     commentPageId = null,
     commentEnvironment,
     commentTargetId = "comments-section",
+    socialSlug = null,
     class: cls = "",
   }: {
     /** Absolute URL of the page being shared. */
@@ -26,9 +29,13 @@
     commentEnvironment?: string;
     /** DOM id of the comment accordion (used by the count-badge click). */
     commentTargetId?: string;
+    /** Wenn gesetzt: zeigt Social-Bild-Button, der Modal öffnet. */
+    socialSlug?: string | null;
     class?: string;
   } = $props();
 
+  let socialModalOpen = $state(false);
+
   const t = useTranslate();
 
   // ── Comment count fetch (only when commentPageId is set) ────────────────
@@ -195,6 +202,17 @@
     >
       <Icon icon="mdi:printer-outline" class="size-3.5" />
     </button>
+    {#if socialSlug}
+      <button
+        type="button"
+        onclick={() => (socialModalOpen = true)}
+        class="inline-flex items-center px-2.5 py-1 text-stein-600 hover:bg-stein-50 hover:text-stein-900 transition-colors"
+        aria-label="Social-Bild Vorschau"
+        title="Social-Bild Vorschau (für Instagram, Facebook, WhatsApp)"
+      >
+        <Icon icon="mdi:image-outline" class="size-3.5" />
+      </button>
+    {/if}
     <QrButton
       value={url}
       label={title}
@@ -203,6 +221,17 @@
     />
   </div>
 
+  {#if socialSlug}
+    <SocialImageModal
+      open={socialModalOpen}
+      title={title}
+      slug={socialSlug}
+      endpointBase="/api/social/post"
+      downloadPrefix="beitrag"
+      onclose={() => (socialModalOpen = false)}
+    />
+  {/if}
+
   {#if readingTimeMinutes != null && readingTimeMinutes > 0}
     <span
       class="inline-flex items-center gap-1 rounded-full border border-stein-200 bg-white px-2.5 py-1 text-xs text-stein-500"