fix(calendar): EventDateBox simpler flex-center Layout (Safari-fest)

Grid/calc/leading-Experimente raus. Schlichtes flex justify/items-center
mit innerem text-center-Block (Wochentag/Tag/Monat) — rendert auf iOS
Safari zuverlässig. wald-Farbschema + rounded-br-4xl + shadow.

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

src/lib/components/blocks/EventDateBox.svelte

@@ -20,7 +20,8 @@
 
     const weekday = (d: Date) =>
         d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
-  const month = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" });
+    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) =>
@@ -35,35 +36,28 @@
         });
 
     const ariaLabel = $derived(
-    isRange && end ? `${fullDate(start)} bis ${fullDate(end)}` : fullDate(start),
+        isRange && end
+            ? `${fullDate(start)} bis ${fullDate(end)}`
+            : fullDate(start),
     );
 </script>
 
 <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
+    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"
-    {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}
-    <span class="text-base sm:text-lg font-bold leading-none tracking-tight whitespace-nowrap">
-      {start.getDate()}–{end.getDate()}
-    </span>
-  {:else}
-    <span class="text-2xl sm:text-3xl font-bold leading-none">{start.getDate()}</span>
-  {/if}
-
-  <span
-    class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300"
 >
+    <div class="text-center font-black leading-normal">
+        <div class="text-[10px] uppercase tracking-wider">
+            {#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(
+                    start,
+                )}{/if}
+        </div>
+        <div class="text-[20px] leading-5">
+            {#if isRange && end}{start.getDate()}–{end.getDate()}{:else}{start.getDate()}{/if}
+        </div>
+        <div class="text-[10px] uppercase tracking-wider">
             {month(start)}
-  </span>
+        </div>
+    </div>
 </time>