feat(quote-carousel): add QuoteCarouselBlock component and related types

- Introduced a new QuoteCarouselBlock component for displaying rotating quotes.
- Added QuoteCarouselBlockData interface to define the structure of the quote carousel data.
- Updated existing components and types to integrate the new quote carousel functionality.
- Enhanced blog-utils to support filtering posts by tags more effectively.
- Made various UI improvements in the Footer and PostCard components for better user experience.

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+  import { getBlockLayoutClasses } from "$lib/block-layout";
+  import type { QuoteCarouselBlockData } from "$lib/block-types";
+
+  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" };
+
+  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,
+    ),
+  );
+  const autoRotate = $derived(block.autoRotate !== false);
+  const intervalMs = $derived(
+    Math.max(2, block.intervalSeconds ?? 6) * 1000,
+  );
+
+  let index = $state(0);
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let paused = $state(false);
+
+  const current = $derived(quotes[index] ?? null);
+  const variantClass = $derived(
+    current?.variant === "right" ? "text-right" : "text-left",
+  );
+
+  function prev() {
+    if (quotes.length === 0) return;
+    index = (index - 1 + quotes.length) % quotes.length;
+  }
+  function next() {
+    if (quotes.length === 0) return;
+    index = (index + 1) % quotes.length;
+  }
+  function goTo(i: number) {
+    index = i;
+  }
+
+  function startTimer() {
+    stopTimer();
+    if (!autoRotate || paused || quotes.length < 2) return;
+    timer = setInterval(() => {
+      index = (index + 1) % quotes.length;
+    }, intervalMs);
+  }
+  function stopTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  $effect(() => {
+    void autoRotate;
+    void intervalMs;
+    void paused;
+    void quotes.length;
+    startTimer();
+    return stopTimer;
+  });
+
+  onMount(() => startTimer());
+  onDestroy(() => stopTimer());
+</script>
+
+<div
+  class="quote-carousel {layoutClasses}"
+  data-block-type="quote_carousel"
+  data-block-slug={block._slug}
+  onmouseenter={() => (paused = true)}
+  onmouseleave={() => (paused = false)}
+  role="region"
+  aria-roledescription="carousel"
+  aria-label={block.headline ?? "Zitat-Karussell"}
+>
+  {#if block.headline}
+    <h3 class="mb-8 text-lg font-semibold">{block.headline}</h3>
+  {/if}
+
+  {#if quotes.length === 0}
+    <p class="text-sm text-zinc-500 italic">Keine Zitate vorhanden.</p>
+  {:else}
+    <div class="flex items-center gap-2 sm:gap-4">
+      {#if quotes.length > 1}
+        <button
+          type="button"
+          onclick={prev}
+          aria-label="Vorheriges Zitat"
+          class="shrink-0 inline-flex items-center justify-center size-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+        >
+          <Icon icon="mdi:chevron-left" class="size-5" aria-hidden="true" />
+        </button>
+      {/if}
+
+      <div class="relative flex-1 min-h-[6rem]">
+        {#key index}
+          <blockquote
+            in:fade={{ duration: 300 }}
+            class="absolute inset-0 border-l-4 border-green-700 pl-6 py-2 {variantClass}"
+          >
+            <p class="text-lg italic text-zinc-700">"{current?.quote ?? ""}"</p>
+            {#if current?.author}
+              <cite class="mt-2 block not-italic text-sm text-zinc-500">
+                — {current.author}
+              </cite>
+            {/if}
+          </blockquote>
+        {/key}
+      </div>
+
+      {#if quotes.length > 1}
+        <button
+          type="button"
+          onclick={next}
+          aria-label="Nächstes Zitat"
+          class="shrink-0 inline-flex items-center justify-center size-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+        >
+          <Icon icon="mdi:chevron-right" class="size-5" aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+
+    {#if quotes.length > 1}
+      <div class="mt-4 flex justify-center gap-1.5" role="tablist">
+        {#each quotes as _, i}
+          <button
+            type="button"
+            role="tab"
+            aria-selected={i === index}
+            aria-label={`Zitat ${i + 1}`}
+            onclick={() => goTo(i)}
+            class="size-2 rounded-full transition-colors {i === index
+              ? 'bg-green-700'
+              : 'bg-zinc-300 hover:bg-zinc-400'}"
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>