From 8a0d3280f929b55f751087e6a46b09c8e309999a Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 22 Jun 2026 22:14:39 +0200
Subject: [PATCH] =?UTF-8?q?fix(calendar):=20EventDateBox=20neu=20=E2=80=94?=
 =?UTF-8?q?=20feste=20rem-Gr=C3=B6=C3=9Fen,=20kein=20Range-Overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

EventDateBox von Grund auf neu: <time> mit a11y-Label, feste rem-Schriften
statt fluid/calc-Skalierung, size-16/sm:size-20. Range-Box: gleiche Höhe,
nur breiter; symmetrisches gap → Monat rutscht nicht mehr aus der Box.
Zusätzlich iOS-Safari Disclosure-Marker (dunkler Punkt) in CalendarBlock
ausgeblendet.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/blocks/CalendarBlock.svelte    |  8 ++
 src/lib/components/blocks/EventDateBox.svelte | 73 +++++++++++++------
 2 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index f26f225..c6bf8e7 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -1342,6 +1342,14 @@
      Zebra-Stripe ab dem zweiten Eintrag, deutlicher Separator
      zwischen Tagesgruppen. So lassen sich Termine optisch klar
      auseinanderhalten ohne komplette Kacheloptik. */
+    /* iOS Safari zeigt trotz list-style:none noch den Disclosure-Marker
+       (dunkler Punkt oben-links der Kachel) → explizit ausblenden. */
+    .calendar-block summary {
+        list-style: none;
+    }
+    .calendar-block summary::-webkit-details-marker {
+        display: none;
+    }
     .calendar-block .event-item {
         position: relative;
         border-left: 4px solid transparent;
diff --git a/src/lib/components/blocks/EventDateBox.svelte b/src/lib/components/blocks/EventDateBox.svelte
index 064e7d4..6460921 100644
--- a/src/lib/components/blocks/EventDateBox.svelte
+++ b/src/lib/components/blocks/EventDateBox.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
   /**
-   * Datum-Kachel für Kalender-Einträge: himmel-Box mit Wochentag/Tag/Monat.
-   * Einzeltermin → großer Tag. Mehrtägig → Wochentag- und Tag-Range (z. B.
-   * "Sa–So" / "27–28"). Beide Varianten haben dieselbe Höhe; die Box wächst
-   * für Ranges nur in der Breite (min-w-14 + px), bleibt also konsistent.
+   * Datums-Kachel für Kalender-Einträge.
+   *
+   * - Einzeltermin: Wochentag · großer Tag · Monat
+   * - Mehrtägig:    Wochentag-Range · Tag-Range · Monat
+   *                 (gleiche Höhe, Box wächst nur in der Breite)
+   *
+   * Bewusst feste rem-Schriftgrößen + `size-*` (mobil etwas kleiner als
+   * Desktop). Keine fluid/calc-Skalierung → kein Overflow, identisch
+   * berechenbar auf allen Geräten.
    */
   let {
     start,
@@ -11,28 +16,54 @@
     multiDay = false,
   }: { start: Date; end?: Date | null; multiDay?: boolean } = $props();
 
-  const wd = (d: Date) =>
-    d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
-  const mon = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" });
-
   const isRange = $derived(multiDay && !!end);
+
+  const weekday = (d: Date) =>
+    d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
+  const month = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" });
+
+  // YYYY-MM-DD aus lokalen Feldern (kein UTC-Shift) für <time datetime>.
+  const isoDate = (d: Date) =>
+    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+
+  const fullDate = (d: Date) =>
+    d.toLocaleDateString("de-DE", {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+
+  const ariaLabel = $derived(
+    isRange && end ? `${fullDate(start)} bis ${fullDate(end)}` : fullDate(start),
+  );
 </script>
 
-<!-- --s = Kantenlänge des Quadrats (responsive). Alle Innenmaße per calc()
-     davon abgeleitet → skalieren proportional mit der Box, nie Overflow.
-     Range-Box nur breiter; Schrift-Referenz bleibt --s (Höhe). -->
-<div
-  class="[--s:clamp(3.5rem,18vw,5rem)] shrink-0 flex flex-col items-center justify-center h-[var(--s)] min-w-[var(--s)] gap-[calc(var(--s)*0.05)] px-[calc(var(--s)*0.12)] overflow-hidden leading-none whitespace-nowrap bg-himmel-800 rounded-sm {isRange ? '' : 'w-[var(--s)]'}"
+<time
+  datetime={isoDate(start)}
+  aria-label={ariaLabel}
+  class="shrink-0 select-none flex flex-col items-center justify-center gap-0.5 leading-none tabular-nums rounded-sm bg-himmel-800 text-himmel-50
+    {isRange
+    ? 'h-16 sm:h-20 min-w-16 sm:min-w-20 px-2.5'
+    : 'size-16 sm:size-20'}"
 >
+  <span
+    class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300 whitespace-nowrap"
+  >
+    {#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(start)}{/if}
+  </span>
+
   {#if isRange && end}
-    <div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{wd(start)}–{wd(end)}</div>
-    <div class="text-[calc(var(--s)*0.23)] font-bold tracking-tight text-himmel-50 tabular-nums">
+    <span class="text-base sm:text-lg font-bold tracking-tight whitespace-nowrap">
       {start.getDate()}–{end.getDate()}
-    </div>
-    <div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{mon(start)}</div>
+    </span>
   {:else}
-    <div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{wd(start)}</div>
-    <div class="text-[calc(var(--s)*0.38)] font-bold text-himmel-50 tabular-nums">{start.getDate()}</div>
-    <div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{mon(start)}</div>
+    <span class="text-2xl sm:text-3xl font-bold">{start.getDate()}</span>
   {/if}
-</div>
+
+  <span
+    class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300"
+  >
+    {month(start)}
+  </span>
+</time>