diff --git a/src/lib/components/blocks/EventDateBox.svelte b/src/lib/components/blocks/EventDateBox.svelte
index 8ca158a..064e7d4 100644
--- a/src/lib/components/blocks/EventDateBox.svelte
+++ b/src/lib/components/blocks/EventDateBox.svelte
@@ -18,28 +18,21 @@
   const isRange = $derived(multiDay && !!end);
 </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="event-date-box shrink-0 h-20 min-w-20 px-2.5 flex flex-col items-center justify-center gap-1 overflow-hidden leading-none bg-himmel-800 rounded-sm"
+  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)]'}"
 >
   {#if isRange && end}
-    <div class="text-[11px] uppercase tracking-wide text-himmel-300 whitespace-nowrap">
-      {wd(start)}–{wd(end)}
-    </div>
-    <div class="text-lg font-bold tracking-tight text-himmel-50 tabular-nums whitespace-nowrap">
+    <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">
       {start.getDate()}–{end.getDate()}
     </div>
-    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
-      {mon(start)}
-    </div>
+    <div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{mon(start)}</div>
   {:else}
-    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
-      {wd(start)}
-    </div>
-    <div class="text-3xl font-bold text-himmel-50 tabular-nums">
-      {start.getDate()}
-    </div>
-    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
-      {mon(start)}
-    </div>
+    <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>
   {/if}
 </div>