feat(home): Featured-Post-Layout, Termine-Look, Zitat-Sektion, Typo-Regelwerk

- PostOverview: neues design "featured" (1 großer Post links, Rest kompakt
  rechts als PostCardCompact – Bild links, Text rechts, keine Nested-Links)
- CalendarCompact: Termine als Liste mit Datum-Badge + Kicker-Headline
- QuoteCarousel: dunkle Full-Bleed-Sektion, Lora-Zitat mit «», Author-Split,
  Kicker mit Sektionsnummer, Pill-Pagination + Pfeile/Swipe
- Typo-Regelwerk: Lora statt Aleo (Zitate), Headings semibold (600),
  H2/H3-Skala, "Weiterlesen"-Link-Muster, docs/typography.md
- HeadlineBlock: \n → <br> für bewusste Umbrüche
- Layout: neues spaceTop-Feld (mt-*), analog spaceBottom
- OrganisationsBlock: CTA volle Breite, Button rechts

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/lib/components/PostCardCompact.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { PostEntry } from "$lib/cms";
+  import RustyImage from "./RustyImage.svelte";
+  import { formatPostDate } from "$lib/blog-utils";
+
+  type PostWithImage = PostEntry & {
+    _resolvedImageUrl?: string;
+    _rawImageUrl?: string;
+    _imageFocal?: { x: number; y: number } | null;
+  };
+
+  let {
+    post,
+    href,
+  }: {
+    post: PostWithImage;
+    href: string;
+  } = $props();
+
+  const rawImg = $derived(post._rawImageUrl);
+  const focal = $derived(post._imageFocal ?? null);
+  const fallbackImg = $derived(post._resolvedImageUrl);
+
+  const dateStr = $derived(formatPostDate(post.created ?? undefined));
+
+  // Alle Tags als schlichter Text (keine Links — die ganze Karte ist EIN <a>,
+  // ein innerer <a> würde die Verschachtelung brechen).
+  const tagNames = $derived(
+    (post.postTag ?? [])
+      .map((t) =>
+        typeof t === "string"
+          ? t
+          : ((t as { name?: string; _slug?: string })?.name ?? (t as { _slug?: string })?._slug ?? ""),
+      )
+      .filter(Boolean),
+  );
+</script>
+
+<a
+  {href}
+  class="group flex gap-3 overflow-hidden rounded-sm card-surface p-0 text-stein-900 no-underline transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-wald-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-500 focus-visible:ring-offset-2"
+>
+  <div class="relative w-28 shrink-0 self-stretch overflow-hidden bg-stein-100 sm:w-32">
+    {#if rawImg}
+      <RustyImage
+        src={rawImg}
+        focal={focal}
+        width={200}
+        aspect="1/1"
+        alt={post.headline ?? ""}
+        sizes="128px"
+        class="absolute inset-0 h-full w-full object-cover"
+        loading="lazy"
+      />
+    {:else if fallbackImg}
+      <img src={fallbackImg} alt={post.headline ?? ""} class="absolute inset-0 h-full w-full object-cover" loading="lazy" />
+    {:else}
+      <div class="flex h-full w-full items-center justify-center text-stein-300">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-8" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+        </svg>
+      </div>
+    {/if}
+  </div>
+  <div class="flex min-w-0 flex-col justify-center py-3 pr-3">
+    <div class="mb-1 text-xs text-stein-500">
+      {dateStr}{#if tagNames.length} · <span class="text-wald-700">{tagNames.join(", ")}</span>{/if}
+    </div>
+    <h5 class="mb-1 line-clamp-2 text-sm font-semibold leading-tight">
+      {post.headline ?? post.linkName ?? post.slug ?? post._slug}
+    </h5>
+    {#if post.excerpt}
+      <p class="line-clamp-2 text-xs font-light text-stein-500">{post.excerpt}</p>
+    {/if}
+  </div>
+</a>

src/lib/components/blocks/CalendarCompactBlock.svelte

@@ -41,7 +41,7 @@
     return d.toLocaleDateString("de-DE", {
       weekday: "short",
       day: "2-digit",
-      month: "short",
+      month: "long",
     });
   }
   function fmtTime(d: Date): string {
@@ -51,6 +51,18 @@
     return d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
   }
 
+  /** Titel + optional nachgestellte "(…)"-Klammer separat (Klammer gedimmt wie im Design). */
+  function splitTitle(raw: string): { main: string; paren: string } {
+    const m = raw.match(/^(.*?)\s*(\([^()]*\))\s*$/);
+    if (m) return { main: m[1], paren: m[2] };
+    return { main: raw, paren: "" };
+  }
+
+  function locationText(it: CalendarItemData): string {
+    if (!it.location) return "";
+    return typeof it.location === "string" ? it.location : ((it.location as { text?: string })?.text ?? "");
+  }
+
   const linkHref = $derived(() => {
     const lt = block.linkTo;
     if (!lt) return null;
@@ -62,50 +74,60 @@
 </script>
 
 <div
-  class="not-prose {layoutClasses} w-full min-w-0 card-surface overflow-hidden rounded-sm border border-stein-200 bg-gradient-to-br from-wald-50/60 via-white to-white"
+  class="not-prose {layoutClasses} w-full min-w-0"
   data-block="CalendarCompact"
   data-block-type="calendar"
   data-block-variant="compact"
   data-block-slug={block._slug}
 >
-  <header class="flex items-center gap-2 border-b border-stein-100 px-3 py-2">
-    <Icon icon="lucide:calendar" class="size-8 shrink-0 text-stein-900" aria-hidden="true" />
-    <h2 class="text-sm font-semibold leading-none text-stein-800">
-      {block.title ?? t(T.calendar_next_events)}
-    </h2>
-  </header>
+  <div class="mb-2 flex items-baseline justify-between gap-4">
+    <h3 class="mb-0">{block.title ?? t(T.calendar_next_events)}</h3>
+    {#if linkHref()}
+      <a
+        href={linkHref()}
+        class="inline-flex shrink-0 items-center gap-1 text-sm font-medium text-wald-700 no-underline hover:text-wald-800 hover:underline"
+      >
+        {t(T.calendar_all_upcoming)}
+        <span aria-hidden="true">→</span>
+      </a>
+    {/if}
+  </div>
 
   {#if upcoming.length === 0}
-    <p class="px-3 py-4 text-center text-xs text-stein-500">
+    <p class="rounded-sm border border-stein-200 px-3 py-6 text-center text-sm text-stein-500">
       {t(T.calendar_no_future_events)}
     </p>
   {:else}
-    <ul class="divide-y divide-stein-100">
+    <ul class="divide-y divide-stein-100 overflow-hidden rounded-sm border border-stein-200 bg-white">
       {#each upcoming as { it, start } (it._slug ?? it.title)}
         {@const timeStr = fmtTime(start)}
+        {@const loc = locationText(it)}
+        {@const title = splitTitle(it.title ?? t(T.calendar_untitled))}
         {@const base = linkHref()}
         {@const itemHref = base && it._slug ? `${base}#event-${it._slug}` : null}
         <li>
           <svelte:element
             this={itemHref ? "a" : "div"}
             href={itemHref ?? undefined}
-            class="flex items-start gap-2.5 px-3 py-2 {itemHref ? 'transition-colors hover:bg-wald-50/40' : ''}"
+            class="flex items-start gap-3 px-4 py-3 no-underline {itemHref ? 'transition-colors hover:bg-stein-50' : ''}"
           >
-            <div class="flex w-11 shrink-0 flex-col items-center rounded-sm bg-wald-50 px-1 py-1 text-wald-700">
-              <span class="text-[0.6rem] font-semibold uppercase leading-none">
+            <div class="flex w-12 shrink-0 flex-col items-center rounded-sm bg-stein-800 px-1 py-1.5 text-white">
+              <span class="text-[0.6rem] font-semibold uppercase leading-none tracking-wide">
                 {start.toLocaleDateString("de-DE", { month: "short" }).replace(".", "")}
               </span>
-              <span class="text-base font-bold tabular-nums leading-none mt-0.5">
+              <span class="mt-0.5 text-lg font-bold tabular-nums leading-none">
                 {start.getDate()}
               </span>
             </div>
             <div class="min-w-0 flex-1">
-              <p class="truncate text-xs font-semibold text-stein-800">{it.title ?? t(T.calendar_untitled)}</p>
-              <p class="mt-0.5 text-[0.7rem] text-stein-500">
-                {fmtDate(start)}{timeStr ? ` · ${timeStr}` : ""}
-                {#if it.location}
-                  <span class="ml-1">· {typeof it.location === "string" ? it.location : (it.location as { text?: string })?.text ?? ""}</span>
-                {/if}
+              <p class="text-sm font-semibold leading-snug text-stein-900">
+                {title.main}{#if title.paren}{" "}<span class="font-normal text-stein-400">{title.paren}</span>{/if}
+              </p>
+              <p class="mt-1 flex items-center gap-1.5 text-xs text-stein-500">
+                <Icon icon="lucide:clock" class="size-3.5 shrink-0" aria-hidden="true" />
+                <span class="min-w-0 truncate">
+                  {fmtDate(start)}{timeStr ? ` · ${timeStr}` : ""}{loc ? `  ·  ${loc}` : ""}
+                </span>
               </p>
             </div>
           </svelte:element>
@@ -113,14 +135,4 @@
       {/each}
     </ul>
   {/if}
-
-  {#if linkHref()}
-    <a
-      href={linkHref()}
-      class="flex items-center justify-center gap-1 border-t border-stein-100 bg-stein-50 px-3 py-1.5 text-xs font-medium text-wald-700 hover:bg-wald-50"
-    >
-      {t(T.calendar_all_upcoming)}
-      <Icon icon="lucide:arrow-right" class="size-3.5" aria-hidden="true" />
-    </a>
-  {/if}
 </div>

src/lib/components/blocks/HeadlineBlock.svelte

@@ -13,6 +13,10 @@
         : "text-left",
   );
   const Tag = $derived((block.tag || "h2") as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
+
+  // Zeilenumbrüche (\n im CMS-Text) → harte <br>. Erlaubt bewusste Umbrüche in
+  // Headlines, ohne HTML im Text-Feld zuzulassen.
+  const lines = $derived((block.text ?? "").split("\n"));
 </script>
 
 <div class={layoutClasses} data-block="Headline" data-block-type="headline" data-block-slug={block._slug}>
@@ -20,6 +24,6 @@
     this={Tag}
     class={alignClass}
   >
-    {block.text ?? ""}
+    {#each lines as line, i}{#if i > 0}<br />{/if}{line}{/each}
   </svelte:element>
 </div>

src/lib/components/blocks/OrganisationsBlock.svelte

@@ -141,16 +141,18 @@
     href={addOrganisationCtaLink?.url}
     target={addOrganisationCtaLink?.newTab ? "_blank" : undefined}
     rel={addOrganisationCtaLink?.newTab ? "noopener noreferrer" : undefined}
-    class="h-full w-full max-w-full md:max-w-md"
+    class="h-full w-full max-w-full md:flex-row md:items-center md:justify-between md:gap-4"
   >
-    {#if block.addOrganisationTitle}
-      <h5 class="text-xl font-semibold text-wald-800 leading-snug">{block.addOrganisationTitle}</h5>
-    {/if}
-    {#if ctaHtml}
-      <div class="markdown text-xs text-wald-700">{@html ctaHtml}</div>
-    {/if}
+    <div class="flex flex-col gap-1.5 min-w-0">
+      {#if block.addOrganisationTitle}
+        <h5 class="text-xl font-semibold text-wald-800 leading-snug">{block.addOrganisationTitle}</h5>
+      {/if}
+      {#if ctaHtml}
+        <div class="markdown text-xs text-wald-700">{@html ctaHtml}</div>
+      {/if}
+    </div>
     {#if addOrganisationCtaLink}
-      <div class="self-start">
+      <div class="self-start md:self-center md:shrink-0">
         <Button variant="primary" size="sm">
           {addOrganisationCtaLink.linkName}
         </Button>

src/lib/components/blocks/PostOverviewBlock.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { marked } from "$lib/markdown-safe";
   import PostCard from "../PostCard.svelte";
+  import PostCardCompact from "../PostCardCompact.svelte";
   import Icon from "@iconify/svelte";
   import "$lib/iconify-offline";
   import { getBlockLayoutClasses } from "$lib/block-layout";
@@ -81,6 +82,22 @@
         />
       {/each}
     </div>
+  {:else if design === "featured" && posts.length > 0}
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:items-start">
+      <PostCard
+        post={posts[0]}
+        href={postHref(posts[0])}
+        tagBase={tagBase}
+        commentCount={commentCounts[postSlugForComments(posts[0])] ?? null}
+      />
+      {#if posts.length > 1}
+        <div class="flex flex-col gap-4">
+          {#each posts.slice(1) as post}
+            <PostCardCompact post={post} href={postHref(post)} />
+          {/each}
+        </div>
+      {/if}
+    </div>
   {:else if design === "carousel" && posts.length > 0}
     <div class="relative">
       <div

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -1,46 +1,174 @@
 <script lang="ts">
   import { getBlockLayoutClasses } from "$lib/block-layout";
-  import type { QuoteBlockData, QuoteCarouselBlockData } from "$lib/block-types";
-  import QuoteBlock from "./QuoteBlock.svelte";
-  import Carousel from "$lib/components/Carousel.svelte";
+  import type { QuoteCarouselBlockData } from "$lib/block-types";
+  import { onMount, onDestroy } from "svelte";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
 
-  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" | "center" };
+  type QuoteItem = { quote?: string; author?: string };
 
   let { block }: { block: QuoteCarouselBlockData } = $props();
 
   const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
   const quotes = $derived(
     ((block.quotes ?? []) as unknown[]).filter(
-      (q): q is QuoteItem =>
-        typeof q === "object" && q !== null && "quote" in q,
+      (q): q is QuoteItem => typeof q === "object" && q !== null && "quote" in q,
     ),
   );
+
+  // Kicker: führende Zahl aus der headline ("04 Stimmen aus der Region") wird
+  // als Sektionsnummer separiert, Rest = Label.
+  const kicker = $derived.by(() => {
+    const h = (block.headline ?? "").trim();
+    const m = h.match(/^(\d+)\s+(.*)$/);
+    return m ? { num: m[1], label: m[2] } : { num: "", label: h };
+  });
+
+  // Author "Name, Rolle (Zusatz), Datum" → Hauptzeile + Meta (Zusatz · Datum).
+  function splitAuthor(a: string | undefined): { main: string; meta: string } {
+    if (!a) return { main: "", meta: "" };
+    const m = a.match(/^(.*?)\s*\(([^)]*)\)\s*(.*)$/);
+    if (m) {
+      const main = m[1].replace(/,\s*$/, "").trim();
+      const after = m[3].replace(/^,\s*/, "").trim();
+      const meta = [m[2].trim(), after].filter(Boolean).join(" · ");
+      return { main, meta };
+    }
+    return { main: a.trim(), meta: "" };
+  }
+
   const autoRotateMs = $derived(
     block.autoRotate !== false ? Math.max(2, block.intervalSeconds ?? 6) * 1000 : 0,
   );
+
+  let index = $state(0);
+  let paused = $state(false);
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let touchStartX = 0;
+
+  function go(i: number) {
+    const n = quotes.length;
+    if (n > 0) index = ((i % n) + n) % n;
+  }
+  function onTouchStart(e: TouchEvent) {
+    touchStartX = e.touches[0].clientX;
+  }
+  function onTouchEnd(e: TouchEvent) {
+    const dx = e.changedTouches[0].clientX - touchStartX;
+    if (Math.abs(dx) < 40) return;
+    go(index + (dx < 0 ? 1 : -1));
+  }
+
+  function startTimer() {
+    stopTimer();
+    if (!autoRotateMs || paused || quotes.length < 2) return;
+    timer = setInterval(() => go(index + 1), autoRotateMs);
+  }
+  function stopTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  $effect(() => {
+    void autoRotateMs;
+    void paused;
+    void quotes.length;
+    startTimer();
+    return stopTimer;
+  });
+  onMount(startTimer);
+  onDestroy(stopTimer);
 </script>
 
 <div
   class="quote-carousel {layoutClasses}"
-  data-block="QuoteCarousel" data-block-type="quote_carousel"
+  data-block="QuoteCarousel"
+  data-block-type="quote_carousel"
   data-block-slug={block._slug}
 >
-  {#if block.headline}
-    <h3 class="mb-8 text-lg font-semibold">{block.headline}</h3>
-  {/if}
-
   {#if quotes.length === 0}
-    <p class="text-sm text-stein-500 italic">Keine Zitate vorhanden.</p>
+    <p class="text-sm italic text-stein-500">Keine Zitate vorhanden.</p>
   {:else}
-    <Carousel
-      count={quotes.length}
-      ariaLabel={block.headline ?? "Zitat-Karussell"}
-      {autoRotateMs}
-      showArrows={block.showArrows === true}
-    >
-      {#snippet item(i)}
-        <QuoteBlock block={{ ...(quotes[i] as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
-      {/snippet}
-    </Carousel>
+    <!-- Full-Bleed dunkelgrüne Sektion -->
+    <div class="relative left-1/2 w-screen -translate-x-1/2 bg-wald-800">
+      <div
+        class="container-custom py-12 md:py-16"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label={kicker.label || "Zitate"}
+        onmouseenter={() => (paused = true)}
+        onmouseleave={() => (paused = false)}
+      >
+        {#if kicker.label}
+          <p class="mb-8 flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.14em] text-wald-300">
+            {#if kicker.num}<span class="tabular-nums">{kicker.num}</span>{/if}
+            <span class="inline-block h-px w-8 bg-wald-600"></span>
+            <span>{kicker.label}</span>
+          </p>
+        {/if}
+
+        <!-- Grid-Stack: alle Slides in derselben Zelle → Höhe = längstes Zitat,
+             kein Springen des nachfolgenden Contents beim Wechsel. -->
+        <div class="grid" role="group" ontouchstart={onTouchStart} ontouchend={onTouchEnd}>
+          {#each quotes as q, i (i)}
+            {@const a = splitAuthor(q.author)}
+            <blockquote
+              class="col-start-1 row-start-1 transition-opacity duration-500 {i === index
+                ? 'opacity-100'
+                : 'pointer-events-none opacity-0'}"
+              aria-hidden={i !== index}
+            >
+              <p class="relative font-serif text-[26px] leading-tight text-wald-50 md:text-[34px] lg:text-[38px]">
+                <span class="absolute right-full top-0 mr-1 text-[0.7em] text-wald-500" aria-hidden="true">«</span>{q.quote}<span class="align-top text-[0.7em] text-wald-500" aria-hidden="true">»</span>
+              </p>
+              {#if a.main || a.meta}
+                <footer class="mt-6 not-italic">
+                  {#if a.main}<div class="text-wald-100">{a.main}</div>{/if}
+                  {#if a.meta}<div class="mt-0.5 text-sm text-wald-300/80">{a.meta}</div>{/if}
+                </footer>
+              {/if}
+            </blockquote>
+          {/each}
+        </div>
+
+        {#if quotes.length > 1}
+          <div class="mt-8 flex items-center justify-between gap-4">
+            <div class="flex items-center gap-1.5" role="tablist">
+              {#each quotes as _, i (i)}
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={i === index}
+                  aria-label={`Zitat ${i + 1}`}
+                  onclick={() => go(i)}
+                  class="h-1.5 rounded-full transition-all duration-300 {i === index
+                    ? 'w-6 bg-wald-300'
+                    : 'w-1.5 bg-wald-600 hover:bg-wald-500'}"
+                ></button>
+              {/each}
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                onclick={() => go(index - 1)}
+                aria-label="Vorheriges Zitat"
+                class="inline-flex size-9 items-center justify-center rounded-full border border-wald-600 text-wald-200 transition hover:border-wald-300 hover:text-white"
+              >
+                <Icon icon="lucide:chevron-left" class="size-4" aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                onclick={() => go(index + 1)}
+                aria-label="Nächstes Zitat"
+                class="inline-flex size-9 items-center justify-center rounded-full border border-wald-600 text-wald-200 transition hover:border-wald-300 hover:text-white"
+              >
+                <Icon icon="lucide:chevron-right" class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
   {/if}
 </div>