From e434ee36206502beca9d6fbe8cc964bc1cc8c367 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 23 Jun 2026 10:35:15 +0200
Subject: [PATCH] feat(termin): Termin-Detail unter /kalender/termin/<slug>,
 302 von alt

Route /termin/[slug] -> /kalender/termin/[slug] verschoben, alte URL
302-redirect (QR-Codes/geteilte Links bleiben gueltig). Breadcrumb 3-stufig
(Start > Kalender > Titel). QR-/Detail-/OG-Links auf neuen Pfad.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/blocks/CalendarBlock.svelte    |   6 +-
 src/lib/components/blocks/EventDateBox.svelte |   2 +-
 .../api/social/calendar/[slug]/+server.ts     |   6 +-
 .../kalender/termin/[slug]/+page.server.ts    | 189 ++++++++++++++++++
 .../{ => kalender}/termin/[slug]/+page.svelte |   0
 src/routes/termin/[slug]/+page.server.ts      | 188 +----------------
 6 files changed, 201 insertions(+), 190 deletions(-)
 create mode 100644 src/routes/kalender/termin/[slug]/+page.server.ts
 rename src/routes/{ => kalender}/termin/[slug]/+page.svelte (100%)

diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index da24356..e72d0f8 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -461,13 +461,13 @@
     }
 
     // QR-Code zum direkten Ausgeben/Scannen (Aushang, Infostand). Nutzt die
-    // canonical /termin/<slug>-URL (hat OG-Tags + Redirect), Fallback = Hash-
+    // canonical /kalender/termin/<slug>-URL (hat OG-Tags), Fallback = Hash-
     // Anchor im Kalender wenn kein Slug.
     let qrModal = $state<{ value: string; label: string } | null>(null);
 
     function openQr(item: EventCardItem) {
         const url = item._slug
-            ? `${window.location.origin}/termin/${encodeURIComponent(item._slug)}/`
+            ? `${window.location.origin}/kalender/termin/${encodeURIComponent(item._slug)}/`
             : `${window.location.origin}${window.location.pathname}#${eventId(item)}`;
         qrModal = { value: url, label: item.title || "Termin" };
     }
@@ -753,7 +753,7 @@
                             <div class="flex flex-wrap gap-2">
                                 {#if item._slug}
                                     <a
-                                        href={`/termin/${encodeURIComponent(item._slug)}/`}
+                                        href={`/kalender/termin/${encodeURIComponent(item._slug)}/`}
                                         class="btn-tertiary btn-sm"
                                     >
                                         Details
diff --git a/src/lib/components/blocks/EventDateBox.svelte b/src/lib/components/blocks/EventDateBox.svelte
index fd296c5..3235bc2 100644
--- a/src/lib/components/blocks/EventDateBox.svelte
+++ b/src/lib/components/blocks/EventDateBox.svelte
@@ -45,7 +45,7 @@
 <time
     datetime={isoDate(start)}
     aria-label={ariaLabel}
-    class="shrink-0 select-none aspect-square size-20 rounded-sm rounded-br-4xl bg-wald-200 text-wald-500 flex justify-center items-center shadow"
+    class="shrink-0 select-none aspect-square size-18 rounded-sm rounded-br-4xl bg-wald-200 text-wald-500 flex justify-center items-center shadow"
 >
     <div class="text-center font-black leading-normal">
         <div class="text-[10px] uppercase tracking-wider">
diff --git a/src/routes/api/social/calendar/[slug]/+server.ts b/src/routes/api/social/calendar/[slug]/+server.ts
index 9e75af0..c6e12f6 100644
--- a/src/routes/api/social/calendar/[slug]/+server.ts
+++ b/src/routes/api/social/calendar/[slug]/+server.ts
@@ -245,9 +245,9 @@ export const GET: RequestHandler = async ({ params, url, setHeaders }) => {
   }
 
   const siteUrl = (env.PUBLIC_SITE_URL || "https://windwiderstand.de").replace(/\/$/, "");
-  // /termin/[slug] hat eigene OG-Meta-Tags + leitet zu /kalender/#event-<slug>
-  // weiter. Damit greifen Link-Previews (FB/WhatsApp/Twitter).
-  const eventUrl = `${siteUrl}/termin/${encodeURIComponent(slug)}`;
+  // /kalender/termin/[slug] hat eigene OG-Meta-Tags. Damit greifen
+  // Link-Previews (FB/WhatsApp/Twitter).
+  const eventUrl = `${siteUrl}/kalender/termin/${encodeURIComponent(slug)}`;
   // Theme-Palette: drei Varianten — Wald (full-bleed), transparent-dark
   // (für helle Hintergründe, dunkler Text), transparent-light (für dunkle).
   const isTransparent = themeParam !== "wald";
diff --git a/src/routes/kalender/termin/[slug]/+page.server.ts b/src/routes/kalender/termin/[slug]/+page.server.ts
new file mode 100644
index 0000000..39a1ac9
--- /dev/null
+++ b/src/routes/kalender/termin/[slug]/+page.server.ts
@@ -0,0 +1,189 @@
+import type { PageServerLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+import { getCalendarItemBySlug } from "$lib/cms";
+import { marked } from "$lib/markdown-safe";
+import { env } from "$env/dynamic/public";
+
+/**
+ * Eigenständige Detail-Seite pro Termin: alle Infos + Aktionen ungekürzt,
+ * eigene OG-Tags (Link-Previews FB/WhatsApp/Twitter) und ein Link zum
+ * Kalender (KEIN Redirect mehr — die Seite ist das Ziel des QR-/Direktlinks).
+ *
+ * terminZeit ist mit Offset gespeichert (z. B. 10:00+02:00). Labels müssen in
+ * Europe/Berlin gerendert werden, sonst zeigt der SSR-Prozess (Server-TZ=UTC)
+ * 2h zu früh.
+ */
+const TZ = "Europe/Berlin";
+
+export const load: PageServerLoad = async ({ params, setHeaders }) => {
+  const slug = params.slug;
+  const rawItem = await getCalendarItemBySlug(slug, { locale: "de" });
+  if (!rawItem) throw error(404, "Termin nicht gefunden");
+  const item = rawItem as typeof rawItem & {
+    location?: unknown;
+    description?: string;
+    terminEnde?: string;
+    tags?: string[];
+    image?: unknown;
+    attachment?: { src?: string; label?: string };
+    link?: unknown;
+  };
+
+  const siteBaseUrl = (env.PUBLIC_SITE_URL || "").replace(/\/$/, "");
+  const title = (item.title ?? "Termin").trim();
+  const terminZeit = item.terminZeit;
+  const terminEnde = item.terminEnde ?? null;
+  const hasTime = !!terminZeit && !/T00:00:00/.test(terminZeit);
+
+  const weekdayLabel = terminZeit
+    ? new Date(terminZeit).toLocaleDateString("de-DE", { weekday: "long", timeZone: TZ })
+    : "";
+  const dateLabel = terminZeit
+    ? new Date(terminZeit).toLocaleDateString("de-DE", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+        timeZone: TZ,
+      })
+    : "";
+  const timeLabel = hasTime
+    ? new Date(terminZeit).toLocaleTimeString("de-DE", {
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: TZ,
+      }) + " Uhr"
+    : "";
+  const endDateLabel =
+    terminEnde && !/T00:00:00/.test(terminEnde)
+      ? new Date(terminEnde).toLocaleDateString("de-DE", {
+          day: "2-digit",
+          month: "long",
+          year: "numeric",
+          timeZone: TZ,
+        })
+      : "";
+
+  const locObj =
+    typeof item.location === "object" && item.location !== null
+      ? (item.location as { text?: string; lat?: number; lng?: number })
+      : null;
+  const locationText = locObj
+    ? (locObj.text ?? "").trim() || null
+    : typeof item.location === "string"
+      ? item.location.trim() || null
+      : null;
+  const hasCoords =
+    !!locObj && typeof locObj.lat === "number" && typeof locObj.lng === "number";
+
+  // Externer Link / Post-Link
+  let externalLink: string | null = null;
+  const link = item.link as { url?: string; _slug?: string } | string | undefined;
+  if (typeof link === "string" && link) externalLink = link;
+  else if (link && typeof link === "object") {
+    if (link.url) externalLink = link.url;
+    else if (link._slug) externalLink = `/post/${encodeURIComponent(link._slug)}`;
+  }
+
+  const descriptionHtml = item.description
+    ? (marked.parse(item.description) as string)
+    : "";
+  const descriptionPlain = descriptionHtml
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  const tags = Array.isArray(item.tags) ? item.tags.filter((t) => typeof t === "string") : [];
+
+  const seoDescription = [
+    dateLabel + (timeLabel ? `, ${timeLabel}` : ""),
+    locationText,
+    descriptionPlain ? descriptionPlain.slice(0, 200) : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  const socialImage = `${siteBaseUrl}/api/social/calendar/${encodeURIComponent(slug)}?format=og`;
+  const calendarUrl = `/kalender/#event-${slug}`;
+  const canonical = `${siteBaseUrl}/kalender/termin/${encodeURIComponent(slug)}/`;
+
+  // schema.org Event — Rich-Result/SEO für Termine (Datum, Ort, Veranstalter).
+  const jsonLd = terminZeit
+    ? [
+        {
+          "@context": "https://schema.org",
+          "@type": "Event",
+          name: title,
+          startDate: terminZeit,
+          ...(terminEnde ? { endDate: terminEnde } : {}),
+          eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
+          eventStatus: "https://schema.org/EventScheduled",
+          ...(siteBaseUrl ? { url: canonical } : {}),
+          inLanguage: "de-DE",
+          ...(descriptionPlain ? { description: descriptionPlain.slice(0, 500) } : {}),
+          image: socialImage,
+          organizer: {
+            "@type": "Organization",
+            name: "Windwiderstand Thüringen",
+            ...(siteBaseUrl ? { url: siteBaseUrl } : {}),
+          },
+          ...(locationText
+            ? {
+                location: {
+                  "@type": "Place",
+                  name: locationText,
+                  ...(hasCoords
+                    ? {
+                        geo: {
+                          "@type": "GeoCoordinates",
+                          latitude: locObj!.lat,
+                          longitude: locObj!.lng,
+                        },
+                      }
+                    : {}),
+                },
+              }
+            : {}),
+        },
+      ]
+    : [];
+
+  const breadcrumbItems = [
+    { label: "Start", href: "/" },
+    { label: "Kalender", href: "/kalender/" },
+    { label: title },
+  ];
+
+  setHeaders({
+    "cache-control": "public, s-maxage=300, stale-while-revalidate=3600",
+  });
+
+  return {
+    seoTitle: `${title} – Windwiderstand Thüringen`,
+    seoDescription,
+    socialImage,
+    ogType: "article" as const,
+    jsonLd,
+    breadcrumbItems,
+    calendarUrl,
+    item: {
+      slug,
+      title,
+      terminZeit: terminZeit ?? null,
+      terminEnde,
+      hasTime,
+      weekdayLabel,
+      dateLabel,
+      timeLabel,
+      endDateLabel,
+      locationText,
+      descriptionHtml,
+      tags,
+      image: item.image ?? null,
+      attachment:
+        item.attachment && item.attachment.src
+          ? { src: item.attachment.src, label: item.attachment.label ?? "Anhang" }
+          : null,
+      externalLink,
+    },
+  };
+};
diff --git a/src/routes/termin/[slug]/+page.svelte b/src/routes/kalender/termin/[slug]/+page.svelte
similarity index 100%
rename from src/routes/termin/[slug]/+page.svelte
rename to src/routes/kalender/termin/[slug]/+page.svelte
diff --git a/src/routes/termin/[slug]/+page.server.ts b/src/routes/termin/[slug]/+page.server.ts
index 2d8ff86..78b65e3 100644
--- a/src/routes/termin/[slug]/+page.server.ts
+++ b/src/routes/termin/[slug]/+page.server.ts
@@ -1,188 +1,10 @@
 import type { PageServerLoad } from "./$types";
-import { error } from "@sveltejs/kit";
-import { getCalendarItemBySlug } from "$lib/cms";
-import { marked } from "$lib/markdown-safe";
-import { env } from "$env/dynamic/public";
+import { redirect } from "@sveltejs/kit";
 
 /**
- * Eigenständige Detail-Seite pro Termin: alle Infos + Aktionen ungekürzt,
- * eigene OG-Tags (Link-Previews FB/WhatsApp/Twitter) und ein Link zum
- * Kalender (KEIN Redirect mehr — die Seite ist das Ziel des QR-/Direktlinks).
- *
- * terminZeit ist mit Offset gespeichert (z. B. 10:00+02:00). Labels müssen in
- * Europe/Berlin gerendert werden, sonst zeigt der SSR-Prozess (Server-TZ=UTC)
- * 2h zu früh.
+ * Alt-URL: Termin-Detailseiten leben jetzt unter /kalender/termin/<slug>/.
+ * 302 erhält bestehende QR-Codes, geteilte Links und Lesezeichen.
  */
-const TZ = "Europe/Berlin";
-
-export const load: PageServerLoad = async ({ params, setHeaders }) => {
-  const slug = params.slug;
-  const rawItem = await getCalendarItemBySlug(slug, { locale: "de" });
-  if (!rawItem) throw error(404, "Termin nicht gefunden");
-  const item = rawItem as typeof rawItem & {
-    location?: unknown;
-    description?: string;
-    terminEnde?: string;
-    tags?: string[];
-    image?: unknown;
-    attachment?: { src?: string; label?: string };
-    link?: unknown;
-  };
-
-  const siteBaseUrl = (env.PUBLIC_SITE_URL || "").replace(/\/$/, "");
-  const title = (item.title ?? "Termin").trim();
-  const terminZeit = item.terminZeit;
-  const terminEnde = item.terminEnde ?? null;
-  const hasTime = !!terminZeit && !/T00:00:00/.test(terminZeit);
-
-  const weekdayLabel = terminZeit
-    ? new Date(terminZeit).toLocaleDateString("de-DE", { weekday: "long", timeZone: TZ })
-    : "";
-  const dateLabel = terminZeit
-    ? new Date(terminZeit).toLocaleDateString("de-DE", {
-        day: "2-digit",
-        month: "long",
-        year: "numeric",
-        timeZone: TZ,
-      })
-    : "";
-  const timeLabel = hasTime
-    ? new Date(terminZeit).toLocaleTimeString("de-DE", {
-        hour: "2-digit",
-        minute: "2-digit",
-        timeZone: TZ,
-      }) + " Uhr"
-    : "";
-  const endDateLabel =
-    terminEnde && !/T00:00:00/.test(terminEnde)
-      ? new Date(terminEnde).toLocaleDateString("de-DE", {
-          day: "2-digit",
-          month: "long",
-          year: "numeric",
-          timeZone: TZ,
-        })
-      : "";
-
-  const locObj =
-    typeof item.location === "object" && item.location !== null
-      ? (item.location as { text?: string; lat?: number; lng?: number })
-      : null;
-  const locationText = locObj
-    ? (locObj.text ?? "").trim() || null
-    : typeof item.location === "string"
-      ? item.location.trim() || null
-      : null;
-  const hasCoords =
-    !!locObj && typeof locObj.lat === "number" && typeof locObj.lng === "number";
-
-  // Externer Link / Post-Link
-  let externalLink: string | null = null;
-  const link = item.link as { url?: string; _slug?: string } | string | undefined;
-  if (typeof link === "string" && link) externalLink = link;
-  else if (link && typeof link === "object") {
-    if (link.url) externalLink = link.url;
-    else if (link._slug) externalLink = `/post/${encodeURIComponent(link._slug)}`;
-  }
-
-  const descriptionHtml = item.description
-    ? (marked.parse(item.description) as string)
-    : "";
-  const descriptionPlain = descriptionHtml
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-
-  const tags = Array.isArray(item.tags) ? item.tags.filter((t) => typeof t === "string") : [];
-
-  const seoDescription = [
-    dateLabel + (timeLabel ? `, ${timeLabel}` : ""),
-    locationText,
-    descriptionPlain ? descriptionPlain.slice(0, 200) : null,
-  ]
-    .filter(Boolean)
-    .join(" · ");
-
-  const socialImage = `${siteBaseUrl}/api/social/calendar/${encodeURIComponent(slug)}?format=og`;
-  const calendarUrl = `/kalender/#event-${slug}`;
-  const canonical = `${siteBaseUrl}/termin/${encodeURIComponent(slug)}/`;
-
-  // schema.org Event — Rich-Result/SEO für Termine (Datum, Ort, Veranstalter).
-  const jsonLd = terminZeit
-    ? [
-        {
-          "@context": "https://schema.org",
-          "@type": "Event",
-          name: title,
-          startDate: terminZeit,
-          ...(terminEnde ? { endDate: terminEnde } : {}),
-          eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
-          eventStatus: "https://schema.org/EventScheduled",
-          ...(siteBaseUrl ? { url: canonical } : {}),
-          inLanguage: "de-DE",
-          ...(descriptionPlain ? { description: descriptionPlain.slice(0, 500) } : {}),
-          image: socialImage,
-          organizer: {
-            "@type": "Organization",
-            name: "Windwiderstand Thüringen",
-            ...(siteBaseUrl ? { url: siteBaseUrl } : {}),
-          },
-          ...(locationText
-            ? {
-                location: {
-                  "@type": "Place",
-                  name: locationText,
-                  ...(hasCoords
-                    ? {
-                        geo: {
-                          "@type": "GeoCoordinates",
-                          latitude: locObj!.lat,
-                          longitude: locObj!.lng,
-                        },
-                      }
-                    : {}),
-                },
-              }
-            : {}),
-        },
-      ]
-    : [];
-
-  const breadcrumbItems = [
-    { label: "Kalender", href: "/kalender/" },
-    { label: title },
-  ];
-
-  setHeaders({
-    "cache-control": "public, s-maxage=300, stale-while-revalidate=3600",
-  });
-
-  return {
-    seoTitle: `${title} – Windwiderstand Thüringen`,
-    seoDescription,
-    socialImage,
-    ogType: "article" as const,
-    jsonLd,
-    breadcrumbItems,
-    calendarUrl,
-    item: {
-      slug,
-      title,
-      terminZeit: terminZeit ?? null,
-      terminEnde,
-      hasTime,
-      weekdayLabel,
-      dateLabel,
-      timeLabel,
-      endDateLabel,
-      locationText,
-      descriptionHtml,
-      tags,
-      image: item.image ?? null,
-      attachment:
-        item.attachment && item.attachment.src
-          ? { src: item.attachment.src, label: item.attachment.label ?? "Anhang" }
-          : null,
-      externalLink,
-    },
-  };
+export const load: PageServerLoad = ({ params }) => {
+  redirect(302, `/kalender/termin/${encodeURIComponent(params.slug)}/`);
 };