feat(modal): route-targeted content modals on navigation

Add a global modal/popup system driven entirely from the CMS. A new
`modal` config collection self-targets routes via a glob/regex urlPattern
(optional time window), and its `content` array of block references renders
through the existing BlockRenderer — so markdown, HTML and YouTube blocks
work exactly like a page row. A `modals` list collection holds the active
set behind an enable flag (analogous to `campaigns`).

- modal-match.ts: glob (`*`/`**`) + `~regex` pathname matcher, time window
  and modal selection helpers (+ unit tests)
- ContentModal.svelte: immediate/delay/scroll/exit_intent triggers, session
  vs. permanent dismiss (sessionStorage + localStorage, keyed by slug+version)
- +layout.server.ts: load `modals-global` in the bootstrap batch, resolve
  block images server-side
- +layout.svelte: mount on non-embed routes, match against the current path

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

src/lib/components/ContentModal.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+  import BlockRenderer from "./BlockRenderer.svelte";
+  import type { Translations } from "$lib/translations";
+  import type { ResolvedBlock } from "$lib/block-types";
+  import {
+    selectModal,
+    dismissKey,
+    type ModalLike,
+  } from "$lib/modal-match";
+
+  interface ModalEntry extends ModalLike {
+    trigger?: "immediate" | "delay" | "scroll" | "exit_intent";
+    delaySeconds?: number;
+    scrollPercent?: number;
+    content?: unknown[];
+    dismissible?: boolean;
+    size?: "sm" | "md" | "lg";
+  }
+
+  let {
+    modals = [],
+    pathname,
+    translations = {},
+  }: {
+    modals?: ModalEntry[];
+    pathname: string;
+    translations?: Translations | null;
+  } = $props();
+
+  let active = $state<ModalEntry | null>(null);
+  let open = $state(false);
+  let dontShowAgain = $state(false);
+
+  /** Nur diese Session ausgeblendet (X/Escape/Backdrop). */
+  function sessionKey(m: ModalEntry): string {
+    return `modal-session:${m.slug ?? m._slug ?? "unknown"}:${m.version ?? ""}`;
+  }
+
+  function isDismissed(m: ModalEntry): boolean {
+    try {
+      if (localStorage.getItem(dismissKey(m))) return true;
+      if (sessionStorage.getItem(sessionKey(m))) return true;
+    } catch {
+      /* Storage gesperrt (Private Mode) → nicht als dismissed werten. */
+    }
+    return false;
+  }
+
+  function close(permanent: boolean) {
+    const m = active;
+    open = false;
+    if (!m) return;
+    try {
+      if (permanent && m.dismissible !== false) {
+        localStorage.setItem(dismissKey(m), "1");
+      } else {
+        sessionStorage.setItem(sessionKey(m), "1");
+      }
+    } catch {
+      /* Storage gesperrt → Modal kommt beim nächsten Load wieder. */
+    }
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape" && open) close(dontShowAgain);
+  }
+
+  const sizeClass = $derived(
+    active?.size === "sm"
+      ? "max-w-md"
+      : active?.size === "lg"
+        ? "max-w-3xl"
+        : "max-w-xl",
+  );
+
+  // Kandidat je Route neu wählen und Trigger scharfschalten. Cleanup läuft vor
+  // jedem Re-Run (Navigation) und beim Destroy — entfernt Timer/Listener.
+  $effect(() => {
+    if (!browser) return;
+    const path = pathname;
+    const list = modals ?? [];
+
+    open = false;
+    dontShowAgain = false;
+    const m = selectModal<ModalEntry>(list, path, Date.now(), isDismissed);
+    active = m;
+    if (!m) return;
+
+    const show = () => {
+      open = true;
+    };
+    let removeScroll: (() => void) | null = null;
+    let removeExit: (() => void) | null = null;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    switch (m.trigger ?? "delay") {
+      case "immediate":
+        show();
+        break;
+      case "delay":
+        timer = setTimeout(show, Math.max(0, m.delaySeconds ?? 3) * 1000);
+        break;
+      case "scroll": {
+        const pct = Math.min(100, Math.max(1, m.scrollPercent ?? 30));
+        const onScroll = () => {
+          const h =
+            document.documentElement.scrollHeight - window.innerHeight;
+          const scrolled = h > 0 ? (window.scrollY / h) * 100 : 100;
+          if (scrolled >= pct) {
+            show();
+            removeScroll?.();
+            removeScroll = null;
+          }
+        };
+        window.addEventListener("scroll", onScroll, { passive: true });
+        removeScroll = () =>
+          window.removeEventListener("scroll", onScroll);
+        onScroll(); // Fall: Seite kürzer als Trigger → sofort
+        break;
+      }
+      case "exit_intent": {
+        // Nur Desktop (feiner Zeiger) — Touch hat kein Exit-Intent.
+        if (window.matchMedia("(pointer: fine)").matches) {
+          const onOut = (e: MouseEvent) => {
+            if (e.clientY <= 0) show();
+          };
+          document.addEventListener("mouseout", onOut);
+          removeExit = () =>
+            document.removeEventListener("mouseout", onOut);
+        }
+        break;
+      }
+    }
+
+    return () => {
+      if (timer) clearTimeout(timer);
+      removeScroll?.();
+      removeExit?.();
+    };
+  });
+
+  const blocks = $derived((active?.content ?? []) as ResolvedBlock[]);
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+{#if open && active}
+  <div
+    class="fixed inset-0 z-[9998] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
+    role="presentation"
+    onclick={() => close(dontShowAgain)}
+  >
+    <div
+      class="relative w-full {sizeClass} max-h-[90vh] overflow-y-auto rounded-sm bg-white p-6 shadow-2xl md:p-8"
+      role="dialog"
+      aria-modal="true"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <button
+        type="button"
+        onclick={() => close(dontShowAgain)}
+        class="absolute top-3 right-3 rounded-full p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+        aria-label="Schließen"
+      >
+        <Icon icon="lucide:x" class="size-5" aria-hidden="true" />
+      </button>
+
+      <div class="content-modal-body">
+        {#each blocks as block (block)}
+          <BlockRenderer {block} {translations} />
+        {/each}
+      </div>
+
+      {#if active.dismissible !== false}
+        <div class="mt-6 flex items-center justify-between gap-4 border-t border-gray-200 pt-4">
+          <label class="flex cursor-pointer items-center gap-2 text-sm text-gray-600">
+            <input
+              type="checkbox"
+              class="size-4 accent-wald-700"
+              bind:checked={dontShowAgain}
+            />
+            <span>Dauerhaft nicht mehr anzeigen</span>
+          </label>
+          <button
+            type="button"
+            class="rounded-sm bg-wald-700 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-wald-800"
+            onclick={() => close(dontShowAgain)}
+          >
+            Schließen
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}