From 24c3ea722f0418264b1fffb60185b95df3f19839 Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Sun, 5 Jul 2026 14:10:30 +0200
Subject: [PATCH 01/11] feat: event grid

---
 src/components/events/EventsGrid.astro | 38 ++++++++++++++++++++++++++
 src/components/events/NextEvents.astro |  9 +++---
 src/pages/events.astro                 |  5 ----
 3 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 src/components/events/EventsGrid.astro

diff --git a/src/components/events/EventsGrid.astro b/src/components/events/EventsGrid.astro
new file mode 100644
index 00000000..e2af9991
--- /dev/null
+++ b/src/components/events/EventsGrid.astro
@@ -0,0 +1,38 @@
+---
+import type { EventCalendarEntry } from '@data';
+
+interface Props {
+  events: EventCalendarEntry[];
+}
+const { events } = Astro.props;
+
+const TODAY = new Date();
+
+function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
+  if (date < TODAY) {
+    return 'Vorbei';
+  }
+  return 'Demnächst';
+}
+---
+
+<div class="mx-auto grid max-w-[80rem] grid-cols-1 gap-4 px-4 lg:grid-cols-3 lg:px-20">
+  {
+    events.map((event) => (
+      <a class="rounded-lg bg-yellow-500/50 flex flex-col" href={event.link}>
+        <img
+          alt={event.image.alt}
+          class="h-80 rounded-t-lg object-cover"
+          src={event.image.src.src}
+          srcset={event.image.src.srcSet.attribute}
+          {...event.image.src.attributes}
+        />
+        <div class="flex-1 flex flex-col h-fit justify-between p-4">
+          <h3 class="font-serif text-2xl font-bold">{event.title}</h3>
+          <p>{event.description}</p>
+          <span class="font-serif pt-2 text-2xl font-bold">{event.date.getDate()}. {event.date.toLocaleString('de-DE', { month: 'short' })} {event.date.getFullYear()}</span>
+        </div>
+      </a>
+    ))
+  }
+</div>
diff --git a/src/components/events/NextEvents.astro b/src/components/events/NextEvents.astro
index ddbc2b6c..db0862be 100644
--- a/src/components/events/NextEvents.astro
+++ b/src/components/events/NextEvents.astro
@@ -1,18 +1,18 @@
 ---
 import ProjectBackground1 from '@assets/events/projects-bg-lg-1.jpg';
 import ProjectBackground2 from '@assets/events/projects-bg-lg-2.jpg';
-import Calendar from '@components/Calendar.svelte';
 import { eventData } from '@data';
 import { Image } from 'astro:assets';
 
+import EventsGrid from './EventsGrid.astro';
+
 const events = await eventData.get3CalendarEntries();
 ---
 
-<section class="relative mt-14">
+<section class="relative my-14">
   <div class="not-sr-only absolute -z-10 mt-16">
     <Image alt="" src={ProjectBackground1} />
   </div>
-</section>
 <div class="mx-auto mb-10 max-w-[80rem] px-4 lg:mb-16 lg:px-20">
   <h2 class="font-serif text-2xl font-bold">Unsere nächsten Veranstaltungen</h2>
   <p class="mt-3 max-w-prose lg:mt-6">
@@ -26,4 +26,5 @@ const events = await eventData.get3CalendarEntries();
   <Image alt="" src={ProjectBackground2} />
 </div>
 
-<Calendar client:visible events={events} />
+<EventsGrid events={events}/>
+</section>
diff --git a/src/pages/events.astro b/src/pages/events.astro
index 15fd8915..66c5d368 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -1,15 +1,10 @@
 ---
 import Hero from '@components/events/Hero.astro';
 import NextEvents from '@components/events/NextEvents.astro';
-import YearlyEvents from '@components/events/YearlyEvents.svelte';
-import { eventData } from '@data';
 import Layout from '@layouts/Layout.astro';
-
-const yearlyEvents = await eventData.getAllYearlyEvents();
 ---
 
 <Layout title="Events">
   <Hero />
   <NextEvents />
-  <YearlyEvents client:load events={yearlyEvents} />
 </Layout>

From 723df6407dc8ac5bd0e35ed8398c8fb026ea5f2d Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:24:06 +0200
Subject: [PATCH 02/11] feat: grayscale if event is in the past

---
 src/components/events/EventsGrid.astro | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/events/EventsGrid.astro b/src/components/events/EventsGrid.astro
index e2af9991..922b706c 100644
--- a/src/components/events/EventsGrid.astro
+++ b/src/components/events/EventsGrid.astro
@@ -19,18 +19,27 @@ function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
 <div class="mx-auto grid max-w-[80rem] grid-cols-1 gap-4 px-4 lg:grid-cols-3 lg:px-20">
   {
     events.map((event) => (
-      <a class="rounded-lg bg-yellow-500/50 flex flex-col" href={event.link}>
+      <a
+        class={`flex flex-col rounded-lg bg-yellow-700 ${event.date < TODAY && 'grayscale-90'}`}
+        href={event.link}
+      >
         <img
           alt={event.image.alt}
-          class="h-80 rounded-t-lg object-cover"
+          class={`h-80 rounded-t-lg object-cover`}
           src={event.image.src.src}
           srcset={event.image.src.srcSet.attribute}
           {...event.image.src.attributes}
         />
-        <div class="flex-1 flex flex-col h-fit justify-between p-4">
+        <div class="flex h-fit flex-1 flex-col justify-between p-4">
           <h3 class="font-serif text-2xl font-bold">{event.title}</h3>
           <p>{event.description}</p>
-          <span class="font-serif pt-2 text-2xl font-bold">{event.date.getDate()}. {event.date.toLocaleString('de-DE', { month: 'short' })} {event.date.getFullYear()}</span>
+          <span class="pt-2 flex justify-between items-end">
+            <div class="font-serif text-2xl font-bold ">
+              {event.date.getDate()}. {event.date.toLocaleString('de-DE', { month: 'short' })}{' '}
+              {event.date.getFullYear()}
+            </div>
+            {event.link && <div class="hover:underline">Mehr Infos &gt;</div>}
+          </span>
         </div>
       </a>
     ))

From 1d2b1aaba7018e6314fe70858b5f0130ae8907a7 Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:31:52 +0200
Subject: [PATCH 03/11] feat: display end and start date

---
 src/components/events/EventsGrid.astro | 36 ++++++++++++++++++++++++--
 src/data/index.ts                      |  1 +
 src/data/real/events.ts                |  1 +
 src/data/test/events.ts                |  3 +++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/events/EventsGrid.astro b/src/components/events/EventsGrid.astro
index 922b706c..22fdd8a7 100644
--- a/src/components/events/EventsGrid.astro
+++ b/src/components/events/EventsGrid.astro
@@ -7,6 +7,7 @@ interface Props {
 const { events } = Astro.props;
 
 const TODAY = new Date();
+const CURRENT_YEAR = TODAY.getFullYear();
 
 function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
   if (date < TODAY) {
@@ -14,6 +15,38 @@ function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
   }
   return 'Demnächst';
 }
+
+function formatRange(start: Date, end?: Date): string {
+  const startDay = start.getDate();
+  const startMonth = start.toLocaleString('de-DE', { month: 'short' });
+  const startYearStr = String(start.getFullYear()).slice(-2);
+
+  // No end date (or same day): show a single date.
+  if (!end || end.toDateString() === start.toDateString()) {
+    const suffix = start.getFullYear() !== CURRENT_YEAR ? ` ${startYearStr}` : '';
+    return `${startDay}. ${startMonth}${suffix}`;
+  }
+
+  const endDay = end.getDate();
+  const endMonth = end.toLocaleString('de-DE', { month: 'short' });
+  const endYearStr = String(end.getFullYear()).slice(-2);
+
+  const sameYear = start.getFullYear() === end.getFullYear();
+  const showYear = sameYear ? start.getFullYear() !== CURRENT_YEAR : true;
+
+  if (startMonth === endMonth && sameYear) {
+    // 2. - 5. Jun
+    return `${startDay}. - ${endDay}. ${endMonth}${showYear ? ` ${endYearStr}` : ''}`;
+  }
+
+  if (sameYear) {
+    // 30. Mai - 3. Jun [YY]
+    return `${startDay}. ${startMonth} - ${endDay}. ${endMonth}${showYear ? ` ${endYearStr}` : ''}`;
+  }
+
+  // Spans multiple years: include both years.
+  return `${startDay}. ${startMonth} ${startYearStr} - ${endDay}. ${endMonth} ${endYearStr}`;
+}
 ---
 
 <div class="mx-auto grid max-w-[80rem] grid-cols-1 gap-4 px-4 lg:grid-cols-3 lg:px-20">
@@ -35,8 +68,7 @@ function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
           <p>{event.description}</p>
           <span class="pt-2 flex justify-between items-end">
             <div class="font-serif text-2xl font-bold ">
-              {event.date.getDate()}. {event.date.toLocaleString('de-DE', { month: 'short' })}{' '}
-              {event.date.getFullYear()}
+              {formatRange(event.date, event.end)}
             </div>
             {event.link && <div class="hover:underline">Mehr Infos &gt;</div>}
           </span>
diff --git a/src/data/index.ts b/src/data/index.ts
index 3c752caa..90800fce 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -9,6 +9,7 @@ import { testInstagramData } from './test/instagram.ts';
 
 export interface EventCalendarEntry {
   date: Date;
+  end?: Date;
   description: string;
   image: { alt: string; src: GetImageResult };
   link?: string;
diff --git a/src/data/real/events.ts b/src/data/real/events.ts
index ada1d48d..dcf51429 100644
--- a/src/data/real/events.ts
+++ b/src/data/real/events.ts
@@ -76,6 +76,7 @@ export async function get3CalendarEntries(): Promise<
   }
   const optimizedEvents = events.map(async (event) => ({
     date: new Date(event.start),
+    end: new Date(event.end),
     description: event.shortDescription,
     image: await getEventImage(event.calendarCover.value).then(async (r) => ({
       alt: r!.alt,
diff --git a/src/data/test/events.ts b/src/data/test/events.ts
index 28238628..f5374a5f 100644
--- a/src/data/test/events.ts
+++ b/src/data/test/events.ts
@@ -35,6 +35,7 @@ export async function get3CalendarEntries(): Promise<
   return [
     {
       date: new Date(1999, 6, 10),
+      end: new Date(1999, 6, 13),
       description: 'This event covers the test case for past events',
       image: {
         alt: '',
@@ -45,6 +46,7 @@ export async function get3CalendarEntries(): Promise<
     },
     {
       date: new Date(2999, 10, 2),
+      end: new Date(2999, 10, 5),
       description: 'This event will always (until the year 2999) be in the future.',
       image: {
         alt: '',
@@ -55,6 +57,7 @@ export async function get3CalendarEntries(): Promise<
     },
     {
       date: new Date(3024, 0, 28),
+      end: new Date(3024, 1, 3),
       description: 'This is test data. Test 1 2 3. Test test.',
       image: {
         alt: '',

From bb53c67c0d8b7428111f14e0ca3d17f9460b64ee Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 20:40:56 +0200
Subject: [PATCH 04/11] chore: lint

---
 src/components/events/EventsGrid.astro | 13 ++-----------
 src/components/events/NextEvents.astro | 26 +++++++++++++-------------
 src/components/footer/Footer.svelte    |  2 +-
 src/data/index.ts                      |  2 +-
 src/data/real/events.ts                |  2 +-
 src/data/test/events.ts                |  6 +++---
 6 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/components/events/EventsGrid.astro b/src/components/events/EventsGrid.astro
index 22fdd8a7..8eaa76a8 100644
--- a/src/components/events/EventsGrid.astro
+++ b/src/components/events/EventsGrid.astro
@@ -9,13 +9,6 @@ const { events } = Astro.props;
 const TODAY = new Date();
 const CURRENT_YEAR = TODAY.getFullYear();
 
-function relativeDate(date: Date): 'Demnächst' | 'Vorbei' {
-  if (date < TODAY) {
-    return 'Vorbei';
-  }
-  return 'Demnächst';
-}
-
 function formatRange(start: Date, end?: Date): string {
   const startDay = start.getDate();
   const startMonth = start.toLocaleString('de-DE', { month: 'short' });
@@ -66,10 +59,8 @@ function formatRange(start: Date, end?: Date): string {
         <div class="flex h-fit flex-1 flex-col justify-between p-4">
           <h3 class="font-serif text-2xl font-bold">{event.title}</h3>
           <p>{event.description}</p>
-          <span class="pt-2 flex justify-between items-end">
-            <div class="font-serif text-2xl font-bold ">
-              {formatRange(event.date, event.end)}
-            </div>
+          <span class="flex items-end justify-between pt-2">
+            <div class="font-serif text-2xl font-bold">{formatRange(event.date, event.end)}</div>
             {event.link && <div class="hover:underline">Mehr Infos &gt;</div>}
           </span>
         </div>
diff --git a/src/components/events/NextEvents.astro b/src/components/events/NextEvents.astro
index db0862be..5f6649a9 100644
--- a/src/components/events/NextEvents.astro
+++ b/src/components/events/NextEvents.astro
@@ -13,18 +13,18 @@ const events = await eventData.get3CalendarEntries();
   <div class="not-sr-only absolute -z-10 mt-16">
     <Image alt="" src={ProjectBackground1} />
   </div>
-<div class="mx-auto mb-10 max-w-[80rem] px-4 lg:mb-16 lg:px-20">
-  <h2 class="font-serif text-2xl font-bold">Unsere nächsten Veranstaltungen</h2>
-  <p class="mt-3 max-w-prose lg:mt-6">
-    Trau dich! Wir wissen, es ist nicht so leicht, an Orte zu kommen, wo du niemanden kennst. Aber
-    auch, wenn du bisher noch keinen Kontakt mit YoungVision hattest, bist du ganz herzlich
-    eingeladen, zu kommen wie du bist. Du kannst dir sicher sein, wir fangen dich auf und halten den
-    Raum für dich und deinen Prozess.
-  </p>
-</div>
-<div class="not-sr-only absolute right-0 -bottom-52 -z-20">
-  <Image alt="" src={ProjectBackground2} />
-</div>
+  <div class="mx-auto mb-10 max-w-[80rem] px-4 lg:mb-16 lg:px-20">
+    <h2 class="font-serif text-2xl font-bold">Unsere nächsten Veranstaltungen</h2>
+    <p class="mt-3 max-w-prose lg:mt-6">
+      Trau dich! Wir wissen, es ist nicht so leicht, an Orte zu kommen, wo du niemanden kennst. Aber
+      auch, wenn du bisher noch keinen Kontakt mit YoungVision hattest, bist du ganz herzlich
+      eingeladen, zu kommen wie du bist. Du kannst dir sicher sein, wir fangen dich auf und halten
+      den Raum für dich und deinen Prozess.
+    </p>
+  </div>
+  <div class="not-sr-only absolute right-0 -bottom-52 -z-20">
+    <Image alt="" src={ProjectBackground2} />
+  </div>
 
-<EventsGrid events={events}/>
+  <EventsGrid events={events} />
 </section>
diff --git a/src/components/footer/Footer.svelte b/src/components/footer/Footer.svelte
index 4dcb480a..570d28e9 100644
--- a/src/components/footer/Footer.svelte
+++ b/src/components/footer/Footer.svelte
@@ -36,7 +36,7 @@
                 name="email"
                 id="email"
                 autocomplete="email"
-                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
+                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
                 placeholder="you@example.com"
               />
               <div class="absolute inset-y-0 right-0 flex items-center pr-3">
diff --git a/src/data/index.ts b/src/data/index.ts
index 90800fce..b06c16fb 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -9,8 +9,8 @@ import { testInstagramData } from './test/instagram.ts';
 
 export interface EventCalendarEntry {
   date: Date;
-  end?: Date;
   description: string;
+  end?: Date;
   image: { alt: string; src: GetImageResult };
   link?: string;
   title: string;
diff --git a/src/data/real/events.ts b/src/data/real/events.ts
index dcf51429..48504555 100644
--- a/src/data/real/events.ts
+++ b/src/data/real/events.ts
@@ -76,8 +76,8 @@ export async function get3CalendarEntries(): Promise<
   }
   const optimizedEvents = events.map(async (event) => ({
     date: new Date(event.start),
-    end: new Date(event.end),
     description: event.shortDescription,
+    end: new Date(event.end),
     image: await getEventImage(event.calendarCover.value).then(async (r) => ({
       alt: r!.alt,
       src: await getImage({
diff --git a/src/data/test/events.ts b/src/data/test/events.ts
index f5374a5f..6a2b373b 100644
--- a/src/data/test/events.ts
+++ b/src/data/test/events.ts
@@ -35,8 +35,8 @@ export async function get3CalendarEntries(): Promise<
   return [
     {
       date: new Date(1999, 6, 10),
-      end: new Date(1999, 6, 13),
       description: 'This event covers the test case for past events',
+      end: new Date(1999, 6, 13),
       image: {
         alt: '',
         src: await getImage({ src: thirdEventImage }),
@@ -46,8 +46,8 @@ export async function get3CalendarEntries(): Promise<
     },
     {
       date: new Date(2999, 10, 2),
-      end: new Date(2999, 10, 5),
       description: 'This event will always (until the year 2999) be in the future.',
+      end: new Date(2999, 10, 5),
       image: {
         alt: '',
         src: await getImage({ src: calendarCoverImage }),
@@ -57,8 +57,8 @@ export async function get3CalendarEntries(): Promise<
     },
     {
       date: new Date(3024, 0, 28),
-      end: new Date(3024, 1, 3),
       description: 'This is test data. Test 1 2 3. Test test.',
+      end: new Date(3024, 1, 3),
       image: {
         alt: '',
         src: await getImage({ src: pastEvent }),

From c1ea2ad1c67881b73d92b66a12b38f189c7d42ec Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 20:45:14 +0200
Subject: [PATCH 05/11] feat: better layout for impressum, datenschutz

---
 src/pages/datenschutz.astro | 2 +-
 src/pages/impressum.astro   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro
index 682eccb3..16c7dbb1 100644
--- a/src/pages/datenschutz.astro
+++ b/src/pages/datenschutz.astro
@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Datenschutz">
-  <div class="max-w-[80rem] py-8 lg:px-24 lg:py-12">
+  <div class="max-w-[80rem] mx-auto py-8 lg:px-24 lg:py-12">
     <article>
       <h1>Datenschutz&shy;erkl&auml;rung</h1>
       <h2>1. Datenschutz auf einen Blick</h2>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
index d86b2628..bd65e160 100644
--- a/src/pages/impressum.astro
+++ b/src/pages/impressum.astro
@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Impressum">
-  <div class="max-w-prose px-4 py-8 lg:px-24 lg:py-12">
+  <div class="max-w-[80rem] mx-auto px-4 py-8 lg:px-24 lg:py-12">
     <h1>Impressum</h1>
     <h2>Angaben gemäß § 5 TMG:</h2>
     <address>YoungVision e.V. Am bhf 4, 16307 Mescherin Deutschland</address>

From 46c0aeb696f2bb603dfa29b8a3f0f16c876621ee Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 20:45:28 +0200
Subject: [PATCH 06/11] chore: update impressum

---
 src/pages/datenschutz.astro | 2 +-
 src/pages/impressum.astro   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro
index 16c7dbb1..a890dfd0 100644
--- a/src/pages/datenschutz.astro
+++ b/src/pages/datenschutz.astro
@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Datenschutz">
-  <div class="max-w-[80rem] mx-auto py-8 lg:px-24 lg:py-12">
+  <div class="mx-auto max-w-[80rem] py-8 lg:px-24 lg:py-12">
     <article>
       <h1>Datenschutz&shy;erkl&auml;rung</h1>
       <h2>1. Datenschutz auf einen Blick</h2>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
index bd65e160..9a30c0b6 100644
--- a/src/pages/impressum.astro
+++ b/src/pages/impressum.astro
@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Impressum">
-  <div class="max-w-[80rem] mx-auto px-4 py-8 lg:px-24 lg:py-12">
+  <div class="mx-auto max-w-[80rem] px-4 py-8 lg:px-24 lg:py-12">
     <h1>Impressum</h1>
     <h2>Angaben gemäß § 5 TMG:</h2>
     <address>YoungVision e.V. Am bhf 4, 16307 Mescherin Deutschland</address>
@@ -31,7 +31,7 @@ import Layout from '@layouts/Layout.astro';
       </dd>
     </dl>
     <h2>Registereintrag</h2>
-    <p>Registergericht: Amtsgericht Charlottenburg Registernummer: VR 32815 B</p>
+    <p>Registergericht: Amtsgericht Neuruppin <br /> Registernummer: VR 5579 NP</p>
     <a
       class="text-gray-800 underline"
       download="YoungVision_Satzung_2023.pdf"

From 3c17cc48c53b64b237cbae246f786e293589156a Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 20:50:45 +0200
Subject: [PATCH 07/11] feat: use new EventGrid on main page

---
 src/components/index/Events.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/index/Events.astro b/src/components/index/Events.astro
index 45d26b50..102252e5 100644
--- a/src/components/index/Events.astro
+++ b/src/components/index/Events.astro
@@ -1,6 +1,6 @@
 ---
 import Button from '@components/Button.astro';
-import Calendar from '@components/Calendar.svelte';
+import EventsGrid from '@components/events/EventsGrid.astro';
 import { eventData } from '@data';
 const events = await eventData.get3CalendarEntries();
 ---
@@ -10,7 +10,7 @@ const events = await eventData.get3CalendarEntries();
     <h2 class="font-serif text-3xl font-bold lg:text-4xl">Unsere Events</h2>
   </div>
   <div class="mt-6 lg:mt-14">
-    <Calendar client:load events={events} />
+    <EventsGrid events={events} />
     <div class="mx-auto mt-10 max-w-[80rem] px-5 lg:mt-12 lg:px-20">
       <div class="justify-between gap-x-10 lg:flex">
         <p class="text-justify">

From 17e2eaf1c9ccec8ac362c1f3abf735214a813f36 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 13 Jul 2026 19:10:13 +0000
Subject: [PATCH 08/11] [autofix.ci] apply automated fixes

---
 src/components/footer/Footer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/footer/Footer.svelte b/src/components/footer/Footer.svelte
index 570d28e9..4dcb480a 100644
--- a/src/components/footer/Footer.svelte
+++ b/src/components/footer/Footer.svelte
@@ -36,7 +36,7 @@
                 name="email"
                 id="email"
                 autocomplete="email"
-                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
+                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
                 placeholder="you@example.com"
               />
               <div class="absolute inset-y-0 right-0 flex items-center pr-3">

From a679391d8f3a5317abbdde173b925b3d073e40b9 Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 23:22:23 +0200
Subject: [PATCH 09/11] fix: fetching draft events

---
 src/components/events/EventsGrid.astro |  2 +-
 src/components/footer/Footer.svelte    |  2 +-
 src/data/real/events.ts                | 12 ++++++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/events/EventsGrid.astro b/src/components/events/EventsGrid.astro
index 8eaa76a8..c36dd3e3 100644
--- a/src/components/events/EventsGrid.astro
+++ b/src/components/events/EventsGrid.astro
@@ -59,7 +59,7 @@ function formatRange(start: Date, end?: Date): string {
         <div class="flex h-fit flex-1 flex-col justify-between p-4">
           <h3 class="font-serif text-2xl font-bold">{event.title}</h3>
           <p>{event.description}</p>
-          <span class="flex items-end justify-between pt-2">
+          <span class="flex flex-wrap items-center justify-between pt-2">
             <div class="font-serif text-2xl font-bold">{formatRange(event.date, event.end)}</div>
             {event.link && <div class="hover:underline">Mehr Infos &gt;</div>}
           </span>
diff --git a/src/components/footer/Footer.svelte b/src/components/footer/Footer.svelte
index 4dcb480a..570d28e9 100644
--- a/src/components/footer/Footer.svelte
+++ b/src/components/footer/Footer.svelte
@@ -36,7 +36,7 @@
                 name="email"
                 id="email"
                 autocomplete="email"
-                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
+                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
                 placeholder="you@example.com"
               />
               <div class="absolute inset-y-0 right-0 flex items-center pr-3">
diff --git a/src/data/real/events.ts b/src/data/real/events.ts
index 48504555..2d497692 100644
--- a/src/data/real/events.ts
+++ b/src/data/real/events.ts
@@ -25,8 +25,10 @@ type EventRequest = {
   sort?: `-${keyof EventCMS}` | keyof EventCMS;
   where: {
     [key in keyof EventCMS]?: {
+      equals?: EventCMS[key];
       greater_than?: EventCMS[key];
       less_than?: EventCMS[key];
+      not_equals?: EventCMS[key];
     };
   };
 };
@@ -48,6 +50,11 @@ export async function get3CalendarEntries(): Promise<
       },
     },
   };
+  if (!DRAFT) {
+    request.where._status = {
+      equals: 'published',
+    };
+  }
   console.log(request);
   console.log(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
   const response = await fetch(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
@@ -65,6 +72,11 @@ export async function get3CalendarEntries(): Promise<
         },
       },
     };
+    if (!DRAFT) {
+      request2.where._status = {
+        equals: 'published',
+      };
+    }
     const pastEventsResponse = await fetch(
       `${process.env.CMS_URL}/api/events?${qs.stringify(request2)}`,
     );

From ed11836ae3f604bdb3e15551ed0e5c8ce8063d85 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 13 Jul 2026 21:30:13 +0000
Subject: [PATCH 10/11] [autofix.ci] apply automated fixes

---
 src/components/footer/Footer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/footer/Footer.svelte b/src/components/footer/Footer.svelte
index 570d28e9..4dcb480a 100644
--- a/src/components/footer/Footer.svelte
+++ b/src/components/footer/Footer.svelte
@@ -36,7 +36,7 @@
                 name="email"
                 id="email"
                 autocomplete="email"
-                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
+                class="block w-full rounded-md border-0 bg-white px-2 py-1.5 text-lg text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6"
                 placeholder="you@example.com"
               />
               <div class="absolute inset-y-0 right-0 flex items-center pr-3">

From 09a5fb8fb3b4ce5c19b83f9c6403b23a22d630d3 Mon Sep 17 00:00:00 2001
From: Han2-Ro <127860003+Han2-Ro@users.noreply.github.com>
Date: Mon, 13 Jul 2026 23:50:01 +0200
Subject: [PATCH 11/11] fix: for real

---
 src/data/real/events.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/data/real/events.ts b/src/data/real/events.ts
index 2d497692..8421168c 100644
--- a/src/data/real/events.ts
+++ b/src/data/real/events.ts
@@ -26,6 +26,7 @@ type EventRequest = {
   where: {
     [key in keyof EventCMS]?: {
       equals?: EventCMS[key];
+      exists?: boolean;
       greater_than?: EventCMS[key];
       less_than?: EventCMS[key];
       not_equals?: EventCMS[key];
@@ -104,11 +105,23 @@ export async function get3CalendarEntries(): Promise<
 }
 
 export async function getAllPages(): Promise<EventPage[]> {
-  const response = await fetch(`${process.env.CMS_URL}/api/events?draft=${DRAFT}`);
+  const request: EventRequest = {
+    draft: DRAFT,
+    where: {
+      slug: {
+        exists: true,
+      },
+    },
+  };
+  if (!DRAFT) {
+    request.where._status = {
+      equals: 'published',
+    };
+  }
+  const response = await fetch(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
   const data = await response.json();
   const events = data.docs as EventCMS[];
-  const eventsWithSlug = events.filter((event) => event.slug);
-  const promises = eventsWithSlug.map(async (event) => ({
+  const promises = events.map(async (event) => ({
     ...event,
     end: new Date(event.end),
     heroImage: await getEventImage(event.heroImage?.value),