Update dependency vite to v8.0.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.specify/memory/ideen.md

@@ -84,31 +84,12 @@ Die folgenden Punkte wurden in Diskussionen bereits geklärt und sind verbindlic
 	* (derzeit keine offenen Architekturentscheidungen)
 
 ## Nicht umgesetzte Feature-Ideen (ehemals Specs 009–026)
-
-### 009 – Gästeliste
-Organisator sieht alle RSVPs (Name, Status) und kann einzelne Einträge löschen.
-* Nur mit gültigem Organizer-Token sichtbar
-* Gäste ohne Token sehen keine Gästeliste
-* Löschung serverseitig validiert
-
 ### 010 – Event bearbeiten
 Organisator kann Titel, Beschreibung, Datum, Ort und Ablaufdatum ändern.
 * Formular vorausgefüllt mit aktuellen Werten
 * Ablaufdatum muss in der Zukunft liegen
 * Ohne Organizer-Token kein Edit-UI sichtbar
 
-### 011 – Event merken/bookmarken
-Gäste können Events lokal merken, ohne RSVP abzugeben — rein clientseitig via localStorage.
-* Kein Serverkontakt nötig
-* Unabhängig vom RSVP-Status
-* Auch bei abgelaufenen Events möglich
-
-### 012 – Lokale Event-Übersicht
-Startseite (`/`) zeigt alle getrackten Events (erstellt, zugesagt, gemerkt) aus localStorage.
-* Zeigt Titel, Datum, Beziehungstyp (Organisator/Gast/Gemerkt)
-* Vergangene Events als "beendet" markiert
-* Einträge können entfernt werden
-
 ### 013 – Kalender-Export
 .ics-Download (RFC 5545) mit Event-Details, optional webcal:// für Live-Updates.
 * Stabile UID aus Event-Token (Re-Import aktualisiert statt dupliziert)
@@ -137,19 +118,6 @@ Badge/Indikator bei ungelesenen Organisator-Updates, rein clientseitig via local
 Event-Seite zeigt QR-Code mit der öffentlichen Event-URL.
 * Serverseitig generiert (kein externer QR-Service)
 * Download als SVG oder hochauflösendes PNG
-* Auch bei abgelaufenen Events verfügbar
-
-### 018 – Datenlöschung
-Automatische Löschung aller Event-Daten nach Ablaufdatum (Privacy-Garantie).
-* Scheduled Job oder Lazy Cleanup bei Zugriff
-* Löscht Event, RSVPs, Updates, Bilder, Metadaten
-* Idempotent, kein PII im Log
-
-### 019 – Instanz-Limit
-`MAX_ACTIVE_EVENTS` als Env-Variable begrenzt aktive Events für Self-Hoster.
-* Nur nicht-abgelaufene Events zählen
-* Unset/leer = unbegrenzt
-* Serverseitige Durchsetzung bei Event-Erstellung
 
 ### 020 – PWA
 Web App Manifest + Service Worker für Installierbarkeit und Offline-Caching.
@@ -169,27 +137,11 @@ Organisator sucht Headerbild über integrierte Unsplash-Suche.
 * Bild lokal gespeichert + Unsplash-Attribution
 * Feature deaktiviert wenn kein API-Key konfiguriert
 
-### 023 – Dark Mode
-App erkennt `prefers-color-scheme` und bietet manuellen Toggle.
-* Manuelle Auswahl in localStorage gespeichert
-* Gilt für globales App-Chrome, nicht Event-Farbthemen
-* Beide Modi WCAG AA konform
-
-### 024 – Event absagen
-Organisator kann Event absagen (mit optionaler Nachricht, Einweg-Transition).
-* RSVPs werden nach Absage abgelehnt
-* Absage-Nachricht nachträglich editierbar
-* Kann nicht rückgängig gemacht werden
-* Wenn Organisator Event auf der Eventlistenseite löscht, muss dabei das Event abgesagt werden (nicht nur lokal entfernen)
-
-### 025 – Event löschen
-Organisator löscht Event permanent und unwiderruflich.
-* Entfernt alle zugehörigen Daten sofort
-* localStorage-Eintrag wird entfernt, Redirect zu `/`
-* Funktioniert in jedem Event-Status
-
 ### 026 – 404-Seite
 Catch-all Route für ungültige Pfade mit "Seite nicht gefunden" und Link zur Startseite.
 * Folgt dem Design System (Electric Dusk + Sora)
 * WCAG AA konform
 * Verhindert leere Seiten bei Fehlnavigation
+
+### 027 - Update der EventListe
+* Irgendwie ein update der event liste, wenn man sie betritt oder wenn man mit touch die seite nach unten zieht (hier müssen wir noch überlegen, wie wir mit den verschiedenen update fällen umgehen und wie wir das update überhaupt requesten. Ich meine sowas wie: was ist, wenn das event nicht mehr gefunden wurde?)

frontend/e2e/cancel-event.spec.ts

@@ -64,12 +64,14 @@ test.describe('US1: Organizer cancels event with reason', () => {
     await page.addInitScript(seedEvents([organizerSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    // Cancel button visible for organizer
+    // Open kebab menu, then cancel event
-    const cancelBtn = page.getByRole('button', { name: /Cancel event/i })
+    const kebabBtn = page.getByRole('button', { name: /Event actions/i })
-    await expect(cancelBtn).toBeVisible()
+    await expect(kebabBtn).toBeVisible()
+    await kebabBtn.click()
 
-    // Open cancel bottom sheet
+    const cancelItem = page.getByRole('menuitem', { name: /Cancel event/i })
-    await cancelBtn.click()
+    await expect(cancelItem).toBeVisible()
+    await cancelItem.click()
 
     // Fill in reason
     const reasonField = page.getByLabel(/reason/i)
@@ -83,8 +85,8 @@ test.describe('US1: Organizer cancels event with reason', () => {
     await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
     await expect(page.getByText('Venue closed')).toBeVisible()
 
-    // Cancel button should be gone
+    // Kebab menu should be gone (event is cancelled)
-    await expect(cancelBtn).not.toBeVisible()
+    await expect(kebabBtn).not.toBeVisible()
   })
 })
 
@@ -118,7 +120,8 @@ test.describe('US1: Organizer cancels event without reason', () => {
     await page.addInitScript(seedEvents([organizerSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    await page.getByRole('button', { name: /Cancel event/i }).click()
+    await page.getByRole('button', { name: /Event actions/i }).click()
+    await page.getByRole('menuitem', { name: /Cancel event/i }).click()
 
     // Don't fill in reason, just confirm
     await page.getByRole('button', { name: /Confirm cancellation/i }).click()
@@ -150,7 +153,8 @@ test.describe('US1: Cancel API failure', () => {
     await page.addInitScript(seedEvents([organizerSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    await page.getByRole('button', { name: /Cancel event/i }).click()
+    await page.getByRole('button', { name: /Event actions/i }).click()
+    await page.getByRole('menuitem', { name: /Cancel event/i }).click()
     await page.getByRole('button', { name: /Confirm cancellation/i }).click()
 
     // Error message in bottom sheet

frontend/e2e/ical-download.spec.ts

@@ -0,0 +1,108 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Sommerfest am See',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-07-15T18:00:00+02:00',
+  timezone: 'Europe/Berlin',
+  location: 'Stadtpark Berlin',
+  attendeeCount: 12,
+  cancelled: false,
+}
+
+const cancelledEvent = {
+  ...fullEvent,
+  cancelled: true,
+  cancellationReason: 'Bad weather',
+}
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function rsvpSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    rsvpToken: 'd4e5f6a7-b8c9-0123-4567-890abcdef012',
+    rsvpName: 'Anna',
+  }
+}
+
+function organizerSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    organizerToken: 'org-token-1234',
+  }
+}
+
+test.describe('iCal download: calendar button visibility', () => {
+  test('calendar button visible for pre-RSVP visitor', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const calendarBtn = page.getByRole('button', { name: /add to calendar/i })
+    await expect(calendarBtn).toBeVisible()
+  })
+
+  test('calendar button visible for post-RSVP attendee', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const calendarBtn = page.getByRole('button', { name: /add to calendar/i })
+    await expect(calendarBtn).toBeVisible()
+  })
+
+  test('calendar button visible for organizer', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.get('*/api/events/:token/attendees*', () =>
+        HttpResponse.json({ attendees: [] }),
+      ),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const calendarBtn = page.getByRole('button', { name: /add to calendar/i })
+    await expect(calendarBtn).toBeVisible()
+  })
+
+  test('calendar button NOT visible for cancelled event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEvent)),
+    )
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const calendarBtn = page.getByRole('button', { name: /add to calendar/i })
+    await expect(calendarBtn).not.toBeVisible()
+  })
+})
+
+test.describe('iCal download: file generation', () => {
+  test('triggers download with correct filename', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Intercept the download by overriding the click-link mechanism
+    const downloadPromise = page.waitForEvent('download')
+    await page.getByRole('button', { name: /add to calendar/i }).click()
+    const download = await downloadPromise
+
+    expect(download.suggestedFilename()).toBe('sommerfest-am-see.ics')
+  })
+})

frontend/e2e/watch-event.spec.ts

@@ -56,7 +56,7 @@ test.describe('US1: Watch event from detail page', () => {
     )
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).toBeVisible()
     await expect(bookmark).toHaveAttribute('aria-label', 'Watch this event')
 
@@ -81,7 +81,7 @@ test.describe('US2: Un-watch event from detail page', () => {
     await page.addInitScript(seedEvents([watchSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
 
     await bookmark.click()
@@ -105,7 +105,7 @@ test.describe('US3: Bookmark reflects attending status', () => {
     await page.goto(`/events/${fullEvent.eventToken}`)
 
     // Bookmark not shown for attendees — RsvpBar shows status state
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).not.toBeVisible()
 
     // Navigate to list via back link
@@ -132,7 +132,7 @@ test.describe('US4: RSVP cancellation preserves watch status', () => {
     await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Bookmark reappears in CTA state, filled because event is still stored
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).toBeVisible()
     await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
 
@@ -151,7 +151,7 @@ test.describe('US5: No bookmark for attendees and organizers', () => {
     await page.addInitScript(seedEvents([rsvpSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).not.toBeVisible()
   })
 
@@ -162,7 +162,7 @@ test.describe('US5: No bookmark for attendees and organizers', () => {
     await page.addInitScript(seedEvents([organizerSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).not.toBeVisible()
   })
 })
@@ -197,7 +197,7 @@ test.describe('US7: Watcher upgrades to attendee', () => {
     await page.goto(`/events/${fullEvent.eventToken}`)
 
     // Verify watching state — bookmark visible
-    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    const bookmark = page.getByLabel(/watch.*this event/i)
     await expect(bookmark).toBeVisible()
     await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
 

frontend/src/App.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
     <header v-if="route.name !== 'home'" class="app-header">
       <BackLink />
+      <div id="header-actions"></div>
     </header>
     <RouterView />
   </div>
@@ -16,11 +17,19 @@ const route = useRoute()
 
 <style scoped>
 .app-header {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  z-index: 10;
+  z-index: 100;
-  padding-top: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg) var(--content-padding);
+  pointer-events: none;
+}
+
+.app-header :deep(*) {
+  pointer-events: auto;
 }
 </style>

frontend/src/assets/main.css

@@ -317,6 +317,72 @@ input[type="datetime-local"].form-field.glass::-webkit-datetime-edit-fields-wrap
   to { --glow-angle: 360deg; }
 }
 
+/* ── Fixed Bottom Bar Components ── */
+
+/* CTA wrapper (text button, e.g. "I'm attending!", "Post an update") */
+.bar-cta {
+  flex: 1;
+  min-width: 0;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.bar-cta:hover {
+  transform: scale(1.02);
+}
+
+.bar-cta:active {
+  transform: scale(0.98);
+}
+
+.bar-cta-btn {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+
+/* Icon wrapper (e.g. calendar, bookmark buttons) */
+.bar-icon {
+  flex-shrink: 0;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.bar-icon:hover {
+  transform: scale(1.02);
+}
+
+.bar-icon:active {
+  transform: scale(0.98);
+}
+
+.bar-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-md);
+  border-radius: calc(var(--radius-button) - 2px);
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-on-gradient);
+  line-height: 0;
+}
+
+.bar-icon-btn svg {
+  display: block;
+}
+
 /* Utility */
 .text-center {
   text-align: center;

frontend/src/components/RsvpBar.vue

@@ -3,20 +3,30 @@
     <div class="rsvp-bar__inner">
       <!-- Status state: already RSVPed -->
       <div v-if="hasRsvp" class="rsvp-bar__status-wrapper">
-        <div
+        <div class="rsvp-bar__status-row">
-          class="rsvp-bar__status"
+          <div
-          role="button"
+            class="rsvp-bar__status"
-          tabindex="0"
+            role="button"
-          :aria-expanded="expanded"
+            tabindex="0"
-          aria-label="You're attending. Tap to show cancel option."
+            :aria-expanded="expanded"
-          @click="expanded = !expanded"
+            aria-label="You're attending. Tap to show cancel option."
-          @keydown.enter.prevent="expanded = !expanded"
+            @click="expanded = !expanded"
-          @keydown.space.prevent="expanded = !expanded"
+            @keydown.enter.prevent="expanded = !expanded"
-          @keydown.escape="expanded = false"
+            @keydown.space.prevent="expanded = !expanded"
-        >
+            @keydown.escape="expanded = false"
-          <span class="rsvp-bar__check" aria-hidden="true">✓</span>
+          >
-          <span class="rsvp-bar__text">You're attending!</span>
+            <span class="rsvp-bar__check" aria-hidden="true">✓</span>
-          <span class="rsvp-bar__chevron" :class="{ 'rsvp-bar__chevron--open': expanded }" aria-hidden="true">›</span>
+            <span class="rsvp-bar__text">You're attending!</span>
+            <span class="rsvp-bar__chevron" :class="{ 'rsvp-bar__chevron--open': expanded }" aria-hidden="true">›</span>
+          </div>
+          <button
+            class="rsvp-bar__calendar-glass"
+            type="button"
+            aria-label="Add to calendar"
+            @click="$emit('calendar')"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          </button>
         </div>
         <Transition name="rsvp-bar-cancel">
           <button
@@ -32,14 +42,9 @@
 
       <!-- CTA state: no RSVP yet -->
       <div v-else class="rsvp-bar__row">
-        <div class="rsvp-bar__cta glow-border glow-border--animated">
+        <div class="bar-icon glow-border glow-border--animated">
-          <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
-            I'm attending!
-          </button>
-        </div>
-        <div class="rsvp-bar__bookmark glow-border glow-border--animated">
           <button
-            class="rsvp-bar__bookmark-inner glass-inner"
+            class="bar-icon-btn glass-inner"
             type="button"
             :aria-label="bookmarked ? 'Stop watching this event' : 'Watch this event'"
             @click="$emit('bookmark')"
@@ -47,6 +52,21 @@
             <svg width="20" height="20" viewBox="0 0 24 24" :fill="bookmarked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
           </button>
         </div>
+        <div class="bar-cta glow-border glow-border--animated">
+          <button class="bar-cta-btn glass-inner" type="button" @click="$emit('open')">
+            I'm attending!
+          </button>
+        </div>
+        <div class="bar-icon glow-border glow-border--animated">
+          <button
+            class="bar-icon-btn glass-inner"
+            type="button"
+            aria-label="Add to calendar"
+            @click="$emit('calendar')"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -64,6 +84,7 @@ defineEmits<{
   open: []
   cancel: []
   bookmark: []
+  calendar: []
 }>()
 
 const expanded = ref(false)
@@ -111,34 +132,6 @@ watch(expanded, (isExpanded) => {
   gap: var(--spacing-sm);
 }
 
-.rsvp-bar__cta {
-  flex: 1;
-  min-width: 0;
-  border-radius: var(--radius-button);
-  transition: transform 0.1s ease;
-}
-
-.rsvp-bar__cta:hover {
-  transform: scale(1.02);
-}
-
-.rsvp-bar__cta:active {
-  transform: scale(0.98);
-}
-
-.rsvp-bar__cta-inner {
-  display: block;
-  width: 100%;
-  padding: var(--spacing-md) var(--spacing-lg);
-  border-radius: calc(var(--radius-button) - 2px);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--color-text-on-gradient);
-  text-align: center;
-  border: none;
-  cursor: pointer;
-}
 
 .rsvp-bar__status-wrapper {
   display: flex;
@@ -146,7 +139,14 @@ watch(expanded, (isExpanded) => {
   gap: var(--spacing-xs);
 }
 
+.rsvp-bar__status-row {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
 .rsvp-bar__status {
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -225,35 +225,35 @@ watch(expanded, (isExpanded) => {
   transform: translateY(-4px);
 }
 
-.rsvp-bar__bookmark {
+
+/* Calendar button — glassmorphic variant (post-RSVP status row) */
+.rsvp-bar__calendar-glass {
   flex-shrink: 0;
-  border-radius: var(--radius-button);
-  transition: transform 0.1s ease;
-}
-
-.rsvp-bar__bookmark:hover {
-  transform: scale(1.02);
-}
-
-.rsvp-bar__bookmark:active {
-  transform: scale(0.98);
-}
-
-.rsvp-bar__bookmark-inner {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
   padding: var(--spacing-md);
-  border-radius: calc(var(--radius-button) - 2px);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
-  border: none;
+  border: 1px solid var(--color-glass-border);
-  cursor: pointer;
+  backdrop-filter: blur(16px);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
   color: var(--color-text-on-gradient);
+  cursor: pointer;
   line-height: 0;
+  transition: transform 0.1s ease, background 0.15s ease;
 }
 
-.rsvp-bar__bookmark-inner svg {
+.rsvp-bar__calendar-glass:hover {
+  transform: scale(1.02);
+  background: linear-gradient(135deg, var(--color-glass-hover) 0%, var(--color-glass-strong) 100%);
+}
+
+.rsvp-bar__calendar-glass:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__calendar-glass svg {
   display: block;
 }
 

frontend/src/components/__tests__/RsvpBar.spec.ts

@@ -5,8 +5,8 @@ import RsvpBar from '../RsvpBar.vue'
 describe('RsvpBar', () => {
   it('renders CTA button when hasRsvp is false', () => {
     const wrapper = mount(RsvpBar)
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
+    expect(wrapper.find('.bar-cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending!")
+    expect(wrapper.find('.bar-cta-btn').text()).toBe("I'm attending!")
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(false)
   })
 
@@ -14,17 +14,17 @@ describe('RsvpBar', () => {
     const wrapper = mount(RsvpBar, { props: { hasRsvp: true } })
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(true)
     expect(wrapper.find('.rsvp-bar__text').text()).toBe("You're attending!")
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
+    expect(wrapper.find('.bar-cta').exists()).toBe(false)
   })
 
   it('emits open when CTA button is clicked', async () => {
     const wrapper = mount(RsvpBar)
-    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    await wrapper.find('.bar-cta-btn').trigger('click')
     expect(wrapper.emitted('open')).toHaveLength(1)
   })
 
   it('does not render CTA button when hasRsvp is true', () => {
     const wrapper = mount(RsvpBar, { props: { hasRsvp: true } })
-    expect(wrapper.find('button').exists()).toBe(false)
+    expect(wrapper.find('.bar-cta-btn').exists()).toBe(false)
   })
 })

frontend/src/composables/__tests__/useIcalDownload.spec.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest'
+import { generateIcs } from '../useIcalDownload'
+
+describe('generateIcs', () => {
+  const baseEvent = {
+    eventToken: '550e8400-e29b-41d4-a716-446655440000',
+    title: 'Sommerfest am See',
+    dateTime: '2026-07-15T18:00:00+02:00',
+    location: 'Stadtpark Berlin',
+    description: 'Bring your own drinks',
+  }
+
+  it('generates valid VCALENDAR wrapper', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toMatch(/^BEGIN:VCALENDAR\r\n/)
+    expect(ics).toMatch(/\r\nEND:VCALENDAR\r\n$/)
+  })
+
+  it('includes VERSION and PRODID', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('VERSION:2.0\r\n')
+    expect(ics).toContain('PRODID:-//fete//EN\r\n')
+  })
+
+  it('generates valid VEVENT block', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('BEGIN:VEVENT\r\n')
+    expect(ics).toContain('END:VEVENT\r\n')
+  })
+
+  it('sets UID from eventToken', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('UID:550e8400-e29b-41d4-a716-446655440000@fete\r\n')
+  })
+
+  it('sets DTSTART in UTC format', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('DTSTART:20260715T160000Z\r\n')
+  })
+
+  it('does NOT include DTEND or DURATION', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).not.toContain('DTEND')
+    expect(ics).not.toContain('DURATION')
+  })
+
+  it('sets SUMMARY from title', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('SUMMARY:Sommerfest am See\r\n')
+  })
+
+  it('sets LOCATION when present', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('LOCATION:Stadtpark Berlin\r\n')
+  })
+
+  it('sets DESCRIPTION when present', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('DESCRIPTION:Bring your own drinks\r\n')
+  })
+
+  it('omits LOCATION when not provided', () => {
+    const { location: _location, ...noLocation } = baseEvent
+    const ics = generateIcs(noLocation)
+    expect(ics).not.toContain('LOCATION')
+  })
+
+  it('omits DESCRIPTION when not provided', () => {
+    const { description: _description, ...noDesc } = baseEvent
+    const ics = generateIcs(noDesc)
+    expect(ics).not.toContain('DESCRIPTION')
+  })
+
+  it('includes SEQUENCE:0', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toContain('SEQUENCE:0\r\n')
+  })
+
+  it('includes DTSTAMP in UTC format', () => {
+    const ics = generateIcs(baseEvent)
+    expect(ics).toMatch(/DTSTAMP:\d{8}T\d{6}Z\r\n/)
+  })
+
+  it('escapes commas in text fields', () => {
+    const ics = generateIcs({ ...baseEvent, title: 'Hello, World' })
+    expect(ics).toContain('SUMMARY:Hello\\, World\r\n')
+  })
+
+  it('escapes semicolons in text fields', () => {
+    const ics = generateIcs({ ...baseEvent, description: 'foo; bar' })
+    expect(ics).toContain('DESCRIPTION:foo\\; bar\r\n')
+  })
+
+  it('escapes backslashes in text fields', () => {
+    const ics = generateIcs({ ...baseEvent, title: 'path\\to' })
+    expect(ics).toContain('SUMMARY:path\\\\to\r\n')
+  })
+
+  it('escapes newlines in text fields', () => {
+    const ics = generateIcs({ ...baseEvent, description: 'line1\nline2' })
+    expect(ics).toContain('DESCRIPTION:line1\\nline2\r\n')
+  })
+
+  it('produces deterministic output for the same input', () => {
+    const ics1 = generateIcs(baseEvent)
+    const ics2 = generateIcs(baseEvent)
+    // DTSTAMP changes with time, so strip it for comparison
+    const strip = (s: string) => s.replace(/DTSTAMP:\d{8}T\d{6}Z\r\n/, '')
+    expect(strip(ics1)).toBe(strip(ics2))
+  })
+
+  it('uses CRLF line endings throughout', () => {
+    const ics = generateIcs(baseEvent)
+    const lines = ics.split('\r\n')
+    // Every "line" split by CRLF should not contain a bare LF
+    for (const line of lines) {
+      expect(line).not.toContain('\n')
+    }
+  })
+})

frontend/src/composables/useIcalDownload.ts

@@ -0,0 +1,71 @@
+import { slugify } from '@/utils/slugify'
+
+export interface IcalEvent {
+  eventToken: string
+  title: string
+  dateTime: string
+  location?: string
+  description?: string
+}
+
+function escapeText(value: string): string {
+  return value
+    .replace(/\\/g, '\\\\')
+    .replace(/;/g, '\\;')
+    .replace(/,/g, '\\,')
+    .replace(/\n/g, '\\n')
+}
+
+function toUtcString(isoDateTime: string): string {
+  const d = new Date(isoDateTime)
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return (
+    `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}` +
+    `T${pad(d.getUTCHours())}${pad(d.getUTCMinutes())}${pad(d.getUTCSeconds())}Z`
+  )
+}
+
+export function generateIcs(event: IcalEvent): string {
+  const lines: string[] = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//fete//EN',
+    'BEGIN:VEVENT',
+    `UID:${event.eventToken}@fete`,
+    `DTSTAMP:${toUtcString(new Date().toISOString())}`,
+    `DTSTART:${toUtcString(event.dateTime)}`,
+    `SUMMARY:${escapeText(event.title)}`,
+    'SEQUENCE:0',
+  ]
+
+  if (event.location) {
+    lines.push(`LOCATION:${escapeText(event.location)}`)
+  }
+
+  if (event.description) {
+    lines.push(`DESCRIPTION:${escapeText(event.description)}`)
+  }
+
+  lines.push('END:VEVENT', 'END:VCALENDAR', '')
+
+  return lines.join('\r\n')
+}
+
+export function useIcalDownload() {
+  function download(event: IcalEvent) {
+    const ics = generateIcs(event)
+    const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+
+    const filename = `${slugify(event.title) || 'event'}.ics`
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  return { download }
+}

frontend/src/utils/__tests__/slugify.spec.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest'
+import { slugify } from '../slugify'
+
+describe('slugify', () => {
+  it('converts to lowercase', () => {
+    expect(slugify('Hello World')).toBe('hello-world')
+  })
+
+  it('replaces spaces with hyphens', () => {
+    expect(slugify('foo bar baz')).toBe('foo-bar-baz')
+  })
+
+  it('transliterates German umlauts', () => {
+    expect(slugify('Ärger über Öl füßen')).toBe('aerger-ueber-oel-fuessen')
+  })
+
+  it('transliterates uppercase umlauts', () => {
+    expect(slugify('Ä Ö Ü')).toBe('ae-oe-ue')
+  })
+
+  it('transliterates ß', () => {
+    expect(slugify('Straße')).toBe('strasse')
+  })
+
+  it('removes non-ASCII characters after transliteration', () => {
+    expect(slugify('Café résumé')).toBe('caf-rsum')
+  })
+
+  it('replaces special characters with hyphens', () => {
+    expect(slugify('hello@world! #test')).toBe('hello-world-test')
+  })
+
+  it('collapses consecutive hyphens', () => {
+    expect(slugify('foo---bar')).toBe('foo-bar')
+  })
+
+  it('trims leading and trailing hyphens', () => {
+    expect(slugify('--hello--')).toBe('hello')
+  })
+
+  it('truncates to 60 characters', () => {
+    const long = 'a'.repeat(80)
+    expect(slugify(long).length).toBeLessThanOrEqual(60)
+  })
+
+  it('does not break mid-word when truncating', () => {
+    // 60 chars of 'a' should just be 60 a's (no word boundary issue)
+    const result = slugify('a'.repeat(65))
+    expect(result.length).toBe(60)
+    expect(result).toBe('a'.repeat(60))
+  })
+
+  it('handles empty string', () => {
+    expect(slugify('')).toBe('')
+  })
+
+  it('handles string that becomes empty after processing', () => {
+    expect(slugify('!@#$%')).toBe('')
+  })
+
+  it('handles emoji', () => {
+    const result = slugify('Party 🎉 time')
+    expect(result).toBe('party-time')
+  })
+
+  it('produces Sommerfest am See example from spec', () => {
+    expect(slugify('Sommerfest am See')).toBe('sommerfest-am-see')
+  })
+})

frontend/src/utils/slugify.ts

@@ -0,0 +1,28 @@
+const UMLAUT_MAP: Record<string, string> = {
+  ä: 'ae',
+  ö: 'oe',
+  ü: 'ue',
+  ß: 'ss',
+  Ä: 'Ae',
+  Ö: 'Oe',
+  Ü: 'Ue',
+}
+
+export function slugify(input: string): string {
+  return (
+    input
+      // Transliterate German umlauts
+      .replace(/[äöüßÄÖÜ]/g, (ch) => UMLAUT_MAP[ch] ?? ch)
+      .toLowerCase()
+      // Remove non-ASCII characters
+      .replace(/[^\x20-\x7E]/g, '')
+      // Replace non-alphanumeric characters with hyphens
+      .replace(/[^a-z0-9]+/g, '-')
+      // Collapse consecutive hyphens
+      .replace(/-{2,}/g, '-')
+      // Trim leading/trailing hyphens
+      .replace(/^-|-$/g, '')
+      // Truncate to 60 characters
+      .slice(0, 60)
+  )
+}

frontend/src/views/EventDetailView.vue

@@ -10,6 +10,33 @@
       <div class="detail__hero-overlay" />
     </div>
 
+    <!-- Kebab menu (teleported into app header) -->
+    <Teleport to="#header-actions">
+      <div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__kebab-wrapper">
+        <button
+          class="detail__kebab-btn"
+          type="button"
+          aria-label="Event actions"
+          :aria-expanded="kebabOpen"
+          @click="kebabOpen = !kebabOpen"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+        </button>
+        <Transition name="kebab-menu">
+          <div v-if="kebabOpen" class="detail__kebab-menu" role="menu">
+            <button
+              class="detail__kebab-item detail__kebab-item--danger"
+              type="button"
+              role="menuitem"
+              @click="kebabOpen = false; cancelSheetOpen = true"
+            >
+              Cancel event
+            </button>
+          </div>
+        </Transition>
+      </div>
+    </Teleport>
+
     <div class="detail__body">
       <!-- Loading state -->
       <div v-if="state === 'loading'" class="detail__content" aria-busy="true" aria-label="Loading event details">
@@ -72,11 +99,25 @@
       </div>
     </div>
 
-    <!-- Cancel event button (organizer only, not already cancelled) -->
+    <!-- Organizer bottom bar (not cancelled) -->
-    <div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__cancel-event">
+    <div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__organizer-bar">
-      <button class="detail__cancel-event-btn" type="button" @click="cancelSheetOpen = true">
+      <div class="detail__organizer-bar-inner">
-        Cancel event
+        <div class="bar-cta glow-border glow-border--animated">
-      </button>
+          <button class="bar-cta-btn glass-inner" type="button">
+            Post an update
+          </button>
+        </div>
+        <div class="bar-icon glow-border glow-border--animated">
+          <button
+            class="bar-icon-btn glass-inner"
+            type="button"
+            aria-label="Add to calendar"
+            @click="handleCalendarDownload"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Cancel event bottom sheet -->
@@ -120,6 +161,7 @@
       @open="sheetOpen = true"
       @cancel="confirmCancelOpen = true"
       @bookmark="handleBookmarkClick"
+      @calendar="handleCalendarDownload"
     />
 
     <!-- Cancel confirmation dialog -->
@@ -163,10 +205,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
+import { useIcalDownload } from '@/composables/useIcalDownload'
 import AttendeeList from '@/components/AttendeeList.vue'
 import BottomSheet from '@/components/BottomSheet.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
@@ -178,6 +221,7 @@ type State = 'loading' | 'loaded' | 'not-found' | 'error'
 
 const route = useRoute()
 const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken, saveWatch, isStored, removeEvent } = useEventStorage()
+const { download: downloadIcal } = useIcalDownload()
 
 const state = ref<State>('loading')
 const event = ref<GetEventResponse | null>(null)
@@ -194,6 +238,24 @@ const cancelError = ref('')
 const isOrganizer = ref(false)
 const attendeeNames = ref<string[] | null>(null)
 
+// Kebab menu state
+const kebabOpen = ref(false)
+
+function onKebabClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.detail__kebab-wrapper')) {
+    kebabOpen.value = false
+  }
+}
+
+watch(kebabOpen, (isOpen) => {
+  if (isOpen) {
+    document.addEventListener('click', onKebabClickOutside, { capture: true })
+  } else {
+    document.removeEventListener('click', onKebabClickOutside, { capture: true })
+  }
+})
+
 // Cancel event state
 const cancelSheetOpen = ref(false)
 const cancelReasonInput = ref('')
@@ -204,6 +266,17 @@ const eventToken = computed(() => route.params.eventToken as string)
 
 const eventIsStored = computed(() => isStored(eventToken.value))
 
+function handleCalendarDownload() {
+  if (!event.value) return
+  downloadIcal({
+    eventToken: event.value.eventToken,
+    title: event.value.title,
+    dateTime: event.value.dateTime,
+    location: event.value.location,
+    description: event.value.description,
+  })
+}
+
 function handleBookmarkClick() {
   if (!event.value) return
   if (isOrganizer.value || rsvpName.value) return
@@ -620,37 +693,97 @@ onMounted(fetchEvent)
   word-break: break-word;
 }
 
-/* Cancel event button */
+/* Kebab menu (teleported into app header) */
-.detail__cancel-event {
+.detail__kebab-wrapper {
+  position: relative;
+}
+
+.detail__kebab-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: none;
+  border: none;
+  color: var(--color-text-on-gradient);
+  cursor: pointer;
+  transition: background 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.detail__kebab-btn:hover {
+  background: var(--color-glass-hover);
+}
+
+.detail__kebab-menu {
+  position: absolute;
+  top: calc(100% + var(--spacing-xs));
+  right: 0;
+  min-width: 180px;
+  padding: var(--spacing-xs) 0;
+  border-radius: var(--radius-card);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow-card);
+}
+
+.detail__kebab-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-text-on-gradient);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+}
+
+.detail__kebab-item:hover {
+  background: var(--color-glass-hover);
+}
+
+.detail__kebab-item--danger {
+  color: var(--color-danger);
+}
+
+.kebab-menu-enter-active,
+.kebab-menu-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.kebab-menu-enter-from,
+.kebab-menu-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* Organizer bottom bar — mirrors RsvpBar layout */
+.detail__organizer-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: var(--spacing-md) var(--content-padding);
-  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
   display: flex;
   justify-content: center;
   z-index: 10;
+  padding: var(--spacing-md) var(--content-padding);
+  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
 }
 
-.detail__cancel-event-btn {
+.detail__organizer-bar-inner {
   width: 100%;
   max-width: var(--content-max-width);
-  padding: var(--spacing-md) var(--spacing-lg);
+  display: flex;
-  border-radius: var(--radius-button);
+  gap: var(--spacing-sm);
-  font-family: inherit;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-danger);
-  background: var(--color-danger-bg);
-  border: 1px solid var(--color-danger-border);
-  cursor: pointer;
-  transition: background 0.15s ease;
 }
 
-.detail__cancel-event-btn:hover {
-  background: var(--color-danger-bg-hover);
-}
 
 /* Cancel event form (inside bottom sheet) */
 .cancel-form__textarea {

frontend/src/views/__tests__/EventDetailView.spec.ts

@@ -77,6 +77,13 @@ beforeEach(() => {
   mockIsStored.mockReturnValue(false)
   mockSaveWatch.mockClear()
   mockRemoveEvent.mockClear()
+
+  // Provide Teleport target for kebab menu
+  if (!document.getElementById('header-actions')) {
+    const target = document.createElement('div')
+    target.id = 'header-actions'
+    document.body.appendChild(target)
+  }
 })
 
 describe('EventDetailView', () => {
@@ -197,8 +204,8 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
+    expect(wrapper.find('.bar-cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending!")
+    expect(wrapper.find('.bar-cta').text()).toBe("I'm attending!")
     wrapper.unmount()
   })
 
@@ -210,7 +217,6 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     expect(wrapper.find('.rsvp-bar').exists()).toBe(false)
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
     wrapper.unmount()
   })
 
@@ -223,7 +229,7 @@ describe('EventDetailView', () => {
 
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(true)
     expect(wrapper.find('.rsvp-bar__text').text()).toBe("You're attending!")
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
+    expect(wrapper.find('.bar-cta').exists()).toBe(false)
     wrapper.unmount()
   })
 
@@ -236,7 +242,7 @@ describe('EventDetailView', () => {
 
     expect(document.body.querySelector('[role="dialog"]')).toBeNull()
 
-    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    await wrapper.find('.bar-cta-btn').trigger('click')
     await flushPromises()
 
     expect(document.body.querySelector('[role="dialog"]')).not.toBeNull()
@@ -249,7 +255,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    await wrapper.find('.bar-cta-btn').trigger('click')
     await flushPromises()
 
     // Form is inside Teleport — find via document.body
@@ -274,7 +280,7 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     // Open sheet
-    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    await wrapper.find('.bar-cta-btn').trigger('click')
     await flushPromises()
 
     // Fill name via Teleported input
@@ -305,7 +311,7 @@ describe('EventDetailView', () => {
 
     // Verify UI switched to status
     expect(wrapper.find('.rsvp-bar__text').text()).toBe("You're attending!")
-    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
+    expect(wrapper.find('.bar-cta').exists()).toBe(false)
 
     // Verify attendee count incremented
     expect(wrapper.text()).toContain('13')
@@ -360,7 +366,7 @@ describe('EventDetailView', () => {
     const wrapper = await mountWithToken()
     await flushPromises()
 
-    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    await wrapper.find('.bar-cta-btn').trigger('click')
     await flushPromises()
 
     const input = document.body.querySelector('#rsvp-name')! as HTMLInputElement

specs/019-ical-download/checklists/requirements.md

@@ -0,0 +1,36 @@
+# Specification Quality Checklist: iCal Download
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-13
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec mentions "RFC 5545" and "Blob" which are standard/format references, not implementation details.
+- FR-004 (SEQUENCE number) depends on whether the backend exposes an update counter or timestamp — documented as assumption.
+- Spec is ready for `/speckit.clarify` or `/speckit.plan`.

specs/019-ical-download/plan.md

@@ -0,0 +1,95 @@
+# Implementation Plan: iCal Download
+
+**Branch**: `019-ical-download` | **Date**: 2026-03-13 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/019-ical-download/spec.md`
+
+## Summary
+
+Add a calendar download button to the event detail page that generates RFC 5545-compliant `.ics` files client-side. The button appears in the RsvpBar for all non-organizer users (not shown for cancelled events). No backend changes are required — all event data is already available in the frontend after fetching event details.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.x, Vue 3 (Composition API)
+**Primary Dependencies**: None new — uses existing Vue 3, openapi-fetch stack. iCal generation is hand-rolled (RFC 5545 is simple enough; no library needed).
+**Storage**: N/A (no persistence; generates file on demand)
+**Testing**: Vitest (unit tests for iCal generation + slug utility), Playwright + MSW (E2E for button behavior)
+**Target Platform**: PWA, mobile-first (320px–768px), all modern browsers
+**Project Type**: Web application (frontend-only change)
+**Performance Goals**: Instant download (< 50ms generation time, all client-side)
+**Constraints**: No external dependencies, no backend changes, UTF-8 encoded output
+**Scale/Scope**: 1 new composable, 1 utility, modifications to 2 existing components
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | ✅ PASS | Client-side only, no data sent to external services, no tracking |
+| II. Test-Driven Methodology | ✅ PLAN | Unit tests for iCal generation + slug utility, E2E for button UX |
+| III. API-First Development | ✅ N/A | No new API endpoints — uses existing `GetEventResponse` data |
+| IV. Simplicity & Quality | ✅ PLAN | Hand-rolled iCal (no library for ~40 lines of format code), minimal changes to existing components |
+| V. Dependency Discipline | ✅ PASS | Zero new dependencies |
+| VI. Accessibility | ✅ PLAN | Aria labels on calendar button, keyboard navigable, WCAG AA contrast |
+
+**Gate result**: PASS — no violations.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/019-ical-download/
+├── plan.md              # This file
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output
+├── quickstart.md        # Phase 1 output
+└── tasks.md             # Phase 2 output (via /speckit.tasks)
+```
+
+### Source Code (repository root)
+
+```text
+frontend/src/
+├── composables/
+│   └── useIcalDownload.ts       # NEW: iCal generation + download trigger
+├── utils/
+│   └── slugify.ts               # NEW: ASCII slug for filename
+├── components/
+│   └── RsvpBar.vue              # MODIFIED: add calendar button (2 visual states)
+└── views/
+    └── EventDetailView.vue      # MODIFIED: pass event data, handle calendar emit
+```
+
+**Structure Decision**: Frontend-only changes. New composable for iCal logic (consistent with project pattern: `useEventStorage`, `useRelativeTime`). Slug utility in `utils/` since it's a pure function with no Vue reactivity.
+
+## Key Design Decisions
+
+### D1: No iCal library
+
+**Decision**: Hand-roll iCal generation (~40 lines).
+
+**Rationale**: RFC 5545 VEVENT with 8–10 properties is trivial. Adding a library (e.g., `ical-generator`, `ics`) would violate Principle V (dependency discipline) — we'd use < 5% of its features.
+
+### D2: Calendar button visual states
+
+Per FR-006, the calendar button has 2 visual contexts:
+
+| State | Layout | Button Style |
+|-------|--------|-------------|
+| Before RSVP | Row: [bookmark] [CTA] [calendar] | glow-border + glass-inner (matches bookmark) |
+| After RSVP | Row: [status-bar (flex)] [calendar (fixed)] | glassmorphic bar style (matches status bar) |
+
+The button is not shown for cancelled events (RsvpBar remains hidden when `event.cancelled`).
+
+### D3: UID format
+
+**Decision**: `{eventToken}@fete` — stable across re-downloads, enables calendar deduplication per FR-003.
+
+### D4: SEQUENCE strategy
+
+**Decision**: Always `0`. Per FR-004, a proper version counter requires backend changes (future scope).
+
+## Complexity Tracking
+
+No constitution violations to justify.

specs/019-ical-download/spec.md

@@ -0,0 +1,80 @@
+# Feature Specification: iCal Download
+
+**Feature Branch**: `019-ical-download`
+**Created**: 2026-03-13
+**Status**: Draft
+**Input**: User description: "Add iCal (.ics) calendar download button to event detail page"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Download event as calendar file (Priority: P1)
+
+As a user viewing an event, I want to add it to my personal calendar so I don't forget the date and time.
+
+The user taps a calendar icon button in the bottom action bar. The browser downloads a `.ics` file containing the current event details. The user opens the file in their preferred calendar app (Apple Calendar, Google Calendar, Outlook, Thunderbird, etc.) and the event appears in their calendar.
+
+**Why this priority**: Core value of the feature — getting the event into the user's calendar.
+
+**Independent Test**: Can be fully tested by viewing an event, tapping the calendar button, and verifying the downloaded .ics file opens correctly in a calendar app.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user views an active event (as attendee, pre-RSVP visitor, or organizer), **When** they tap the calendar icon in the action bar, **Then** a valid `.ics` file is downloaded containing the event's title, date/time, location, and description.
+2. **Given** the event is cancelled, **When** the user views the event detail page, **Then** the calendar button is NOT shown.
+3. **Given** the downloaded `.ics` file, **When** opened in any major calendar app, **Then** the event is created without errors.
+4. **Given** the user downloads the `.ics` file multiple times, **Then** the generated file is identical each time (deterministic output from the same event data).
+
+---
+
+### Edge Cases
+
+- What happens when the event has no location set? The `.ics` file omits the location field.
+- What happens when the event has no description? The `.ics` file omits the description field.
+- What happens when event title or description contains special characters (umlauts, emoji, newlines)? The `.ics` file uses proper UTF-8 encoding and RFC 5545 text escaping.
+- What happens on a browser that blocks Blob downloads? The download should work via standard browser download mechanisms; no special fallback is needed since all modern browsers support Blob downloads.
+
+## Clarifications
+
+### Session 2026-03-13
+
+- Q: Event hat kein Endzeit-Feld — wie soll DTEND in der .ics gehandhabt werden? → A: Kein DTEND/DURATION — nur DTSTART (punktuelles Ereignis gemäß RFC 5545).
+- Q: Dateiname-Sanitierung bei Sonderzeichen, Umlauten, langen Titeln? → A: Slugify — ASCII-Transliteration (ä→ae etc.), Leerzeichen→Bindestrich, max 60 Zeichen.
+- Q: Gibt es ein Konzept von "aktualisierten" .ics-Dateien? → A: Nein. Jeder Download erzeugt die gleiche Datei aus den aktuellen Event-Daten. Kein Update-Mechanismus.
+- Q: Button bei abgesagten Events? → A: Nein, kein Button wenn Event cancelled.
+- Q: Nur für Attendees oder auch für Organisatoren? → A: Alle Rollen — Attendee, Besucher ohne RSVP, Organisator. Button an gleicher Position.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: System MUST generate a valid `.ics` file (RFC 5545 VEVENT) client-side without requiring backend changes.
+- **FR-002**: The `.ics` file MUST contain: UID, DTSTAMP, DTSTART, SUMMARY. DTEND and DURATION MUST NOT be included (the event has no end time; RFC 5545 treats a VEVENT with only DTSTART as a point-in-time event). It MUST include LOCATION and DESCRIPTION when those fields are present on the event.
+- **FR-003**: The UID MUST be derived from the event token (e.g. `{eventToken}@fete`) to produce a stable identifier for the calendar entry.
+- **FR-004**: The `.ics` file MUST include a SEQUENCE number of `0`.
+- **FR-006**: The calendar icon button MUST appear in the bottom action bar for all users (attendees, pre-RSVP visitors, and organizers), adapting its visual style to match the surrounding elements:
+  - **Before RSVP (attendee)**: Button order (left to right): bookmark, "I'm attending!" CTA, calendar. The calendar button MUST use the same glow-border + glass-inner style as the bookmark button.
+  - **After RSVP (attendee)**: The calendar button MUST appear to the right of the "You're attending!" status bar. It MUST use the same glassmorphic bar style (gradient background, glass border, backdrop blur) as the status bar — not the glow-border style. Layout: "You're attending!" status (flex), calendar icon button (fixed width).
+  - **Organizer**: The calendar button MUST appear in the same fixed bottom position. Styling TBD (consistent with existing organizer UI).
+- **FR-007**: The calendar button MUST NOT be shown when the event is cancelled.
+- **FR-008**: The downloaded file MUST use UTF-8 encoding and the `text/calendar` MIME type.
+- **FR-009**: The filename MUST be human-readable, derived from the event title using ASCII slugification (e.g. `Sommerfest am See` → `sommerfest-am-see.ics`). Rules: lowercase, umlauts transliterated (ä→ae, ü→ue, ö→oe, ß→ss), non-ASCII characters removed, spaces/special chars replaced with hyphens, consecutive hyphens collapsed, max 60 characters before `.ics` extension.
+
+### Key Entities
+
+- **iCal Event (VEVENT)**: A calendar entry generated from fete event data. Key attributes: UID (from event token), SUMMARY (title), DTSTART (date/time, no DTEND — point-in-time event), LOCATION, DESCRIPTION, SEQUENCE, DTSTAMP.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Any user (attendee, visitor, organizer) can download a calendar file with 1 tap.
+- **SC-002**: Downloaded `.ics` files import successfully into Apple Calendar, Google Calendar, and Outlook without errors.
+- **SC-003**: The calendar button does not disrupt the existing bottom bar layout or interaction patterns on devices from 320px to 768px width.
+
+## Assumptions
+
+- The `.ics` file generation is entirely client-side (no new backend endpoints needed), since all required event data is already available in the frontend after fetching event details.
+- The generated `.ics` file is deterministic: same event data always produces the same output. There is no concept of "updated" files — each download is a fresh snapshot of the current event data.
+- SEQUENCE is always `0`.
+- The calendar button is visible for all user roles (attendee, visitor, organizer) on active events. Not shown for cancelled events.
+- All date/time values in the `.ics` file use UTC format (Z suffix) since the event times are already stored in UTC.

specs/019-ical-download/tasks.md

@@ -0,0 +1,109 @@
+# Tasks: iCal Download
+
+**Input**: Design documents from `/specs/019-ical-download/`
+**Prerequisites**: plan.md, spec.md
+
+**Tests**: TDD is mandated by the project constitution. Tests are written first and must fail before implementation.
+
+**Organization**: Single user story (US1). Foundational phase covers the two pure utility modules; US1 phase covers component integration.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Foundational (Pure Utilities)
+
+**Purpose**: iCal generation and slug utility — pure functions with no UI dependencies
+
+### Tests (RED)
+
+- [x] T001 [P] Write unit tests for slugify (umlaut transliteration, special chars, max length, empty input) in `frontend/src/utils/__tests__/slugify.spec.ts`
+- [x] T002 [P] Write unit tests for iCal generation (required fields, optional LOCATION/DESCRIPTION omission, UTF-8 text escaping, UID format, deterministic output, DTSTAMP) in `frontend/src/composables/__tests__/useIcalDownload.spec.ts`
+
+### Implementation (GREEN)
+
+- [x] T003 Implement slugify utility in `frontend/src/utils/slugify.ts` — ASCII transliteration (ä→ae, ü→ue, ö→oe, ß→ss), lowercase, non-ASCII removal, hyphens for spaces/special chars, collapse consecutive hyphens, max 60 chars
+- [x] T004 Implement `generateIcs()` function and `useIcalDownload()` composable in `frontend/src/composables/useIcalDownload.ts` — RFC 5545 VEVENT with UID (`{eventToken}@fete`), DTSTAMP, DTSTART (UTC), SUMMARY, SEQUENCE:0, optional LOCATION/DESCRIPTION, Blob download with `text/calendar` MIME type, slugified filename
+
+**Checkpoint**: `npm run test:unit` passes — both utilities work in isolation
+
+---
+
+## Phase 2: User Story 1 — Download event as calendar file (Priority: P1) 🎯 MVP
+
+**Goal**: Calendar icon button in the bottom action bar for all user roles (attendee pre-RSVP, attendee post-RSVP, organizer). Tap triggers `.ics` download. Not shown for cancelled events.
+
+**Independent Test**: View any active event → tap calendar button → `.ics` file downloads → opens in calendar app.
+
+### Tests (RED)
+
+- [x] T005 Write E2E test for calendar download button in `frontend/e2e/ical-download.spec.ts` — verify button visible for pre-RSVP visitor, post-RSVP attendee, and organizer; verify button NOT visible for cancelled event; verify download triggers with correct filename
+
+### Implementation (GREEN)
+
+- [x] T006 [US1] Add calendar button and `calendar` emit to RsvpBar in `frontend/src/components/RsvpBar.vue` — pre-RSVP state: glow-border + glass-inner icon button after CTA; post-RSVP state: glassmorphic icon button right of status bar
+- [x] T007 [US1] Add calendar button for organizer view in `frontend/src/views/EventDetailView.vue` — fixed bottom position next to existing "Cancel event" button, consistent glassmorphic styling
+- [x] T008 [US1] Wire calendar download handler in `frontend/src/views/EventDetailView.vue` — import `useIcalDownload`, call on `@calendar` emit from RsvpBar and on organizer button click, pass event data
+
+**Checkpoint**: All acceptance scenarios pass — any user on an active event can download a valid `.ics` file with 1 tap
+
+---
+
+## Phase 3: Polish & Cross-Cutting Concerns
+
+- [ ] T009 Verify calendar button layout does not disrupt existing RsvpBar on 320px–768px viewports (visual check via `browser-interactive-testing` skill)
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Foundational (Phase 1)**: No dependencies — can start immediately
+- **US1 (Phase 2)**: Depends on Phase 1 completion (T003, T004 must be done)
+- **Polish (Phase 3)**: Depends on Phase 2 completion
+
+### Within Phases
+
+- T001 and T002 are parallel (different files)
+- T003 before T004 (`useIcalDownload` imports `slugify`)
+- T005 can be written before T006–T008 (TDD: test fails first)
+- T006 and T007 are parallel (different files)
+- T008 depends on T006 and T007 (wires them together)
+
+### Parallel Opportunities
+
+```text
+# Phase 1 tests (parallel):
+T001: slugify unit tests
+T002: iCal generation unit tests
+
+# Phase 2 implementation (parallel after T005):
+T006: RsvpBar calendar button
+T007: Organizer calendar button
+```
+
+---
+
+## Implementation Strategy
+
+### MVP (Single Pass)
+
+1. Complete Phase 1: Write tests → implement slugify → implement iCal generation
+2. Complete Phase 2: Write E2E → add buttons to RsvpBar + organizer view → wire handler
+3. Complete Phase 3: Visual verification
+4. **DONE**: Single user story, single deliverable
+
+---
+
+## Notes
+
+- No backend changes required — all client-side
+- Zero new dependencies — hand-rolled iCal generation
+- `generateIcs()` must be a pure function (deterministic, no side effects) for easy testing
+- `useIcalDownload()` wraps `generateIcs()` + Blob download trigger
+- Calendar SVG icon: use a calendar outline matching the existing date/time meta icon style