diff --git a/COMMANDS.md b/COMMANDS.md
index 349a90584..79edfa683 100644
--- a/COMMANDS.md
+++ b/COMMANDS.md
@@ -9,6 +9,7 @@ pnpm docker:down
 
 pnpm dev:chat:app
 pnpm dev:contacts:app
+pnpm dev:storage:app
 pnpm dev:calendar:app
 pnpm dev:picture:app
 pnpm dev:manacore:app
diff --git a/apps/calendar/apps/backend/src/calendar/calendar.controller.ts b/apps/calendar/apps/backend/src/calendar/calendar.controller.ts
index 54f19297d..18d3489ec 100644
--- a/apps/calendar/apps/backend/src/calendar/calendar.controller.ts
+++ b/apps/calendar/apps/backend/src/calendar/calendar.controller.ts
@@ -19,7 +19,14 @@ export class CalendarController {
 
 	@Get()
 	async findAll(@CurrentUser() user: CurrentUserData) {
-		const calendars = await this.calendarService.findAll(user.userId);
+		let calendars = await this.calendarService.findAll(user.userId);
+
+		// Lazy creation: if no calendars exist, create a default one
+		if (calendars.length === 0) {
+			const defaultCalendar = await this.calendarService.getOrCreateDefaultCalendar(user.userId);
+			calendars = [defaultCalendar];
+		}
+
 		return { calendars };
 	}
 
diff --git a/apps/calendar/apps/backend/src/calendar/calendar.service.ts b/apps/calendar/apps/backend/src/calendar/calendar.service.ts
index a7ae8cbd2..44ba6de0e 100644
--- a/apps/calendar/apps/backend/src/calendar/calendar.service.ts
+++ b/apps/calendar/apps/backend/src/calendar/calendar.service.ts
@@ -116,7 +116,7 @@ export class CalendarService {
 
 		// Create a new default calendar
 		return this.create(userId, {
-			name: 'My Calendar',
+			name: 'Mein Kalender',
 			isDefault: true,
 			color: '#3B82F6',
 		});
diff --git a/apps/calendar/apps/web/src/app.css b/apps/calendar/apps/web/src/app.css
index f654d8e99..31d956b21 100644
--- a/apps/calendar/apps/web/src/app.css
+++ b/apps/calendar/apps/web/src/app.css
@@ -40,18 +40,18 @@
 /* Hour slot in day/week view */
 .hour-slot {
 	height: var(--hour-height);
-	border-bottom: 1px solid hsl(var(--border) / 0.5);
+	border-bottom: 1px solid hsl(var(--color-border) / 0.5);
 	position: relative;
 }
 
 .hour-slot:hover {
-	background-color: hsl(var(--muted) / 0.3);
+	background-color: hsl(var(--color-muted) / 0.3);
 }
 
 /* Event card in calendar */
 .event-card {
-	background-color: hsl(var(--primary));
-	color: hsl(var(--primary-foreground));
+	background-color: hsl(var(--color-primary));
+	color: hsl(var(--color-primary-foreground));
 	border-radius: var(--radius-sm);
 	padding: 2px 6px;
 	font-size: 0.75rem;
@@ -68,17 +68,17 @@
 /* Day cell in month view */
 .day-cell {
 	min-height: 100px;
-	border: 1px solid hsl(var(--border));
+	border: 1px solid hsl(var(--color-border));
 	padding: var(--spacing-xs);
 	transition: background-color var(--transition-fast);
 }
 
 .day-cell:hover {
-	background-color: hsl(var(--muted) / 0.3);
+	background-color: hsl(var(--color-muted) / 0.3);
 }
 
 .day-cell.today {
-	background-color: hsl(var(--primary) / 0.1);
+	background-color: hsl(var(--color-primary) / 0.1);
 }
 
 .day-cell.other-month {
@@ -91,7 +91,7 @@
 	left: 0;
 	right: 0;
 	height: 2px;
-	background-color: hsl(var(--destructive));
+	background-color: hsl(var(--color-error));
 	z-index: 10;
 }
 
@@ -103,7 +103,7 @@
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
-	background-color: hsl(var(--destructive));
+	background-color: hsl(var(--color-error));
 }
 
 /* Mini calendar */
@@ -123,24 +123,24 @@
 }
 
 .mini-calendar .day:hover {
-	background-color: hsl(var(--muted));
+	background-color: hsl(var(--color-muted));
 }
 
 .mini-calendar .day.today {
-	background-color: hsl(var(--primary));
-	color: hsl(var(--primary-foreground));
+	background-color: hsl(var(--color-primary));
+	color: hsl(var(--color-primary-foreground));
 }
 
 .mini-calendar .day.selected {
-	border: 2px solid hsl(var(--primary));
+	border: 2px solid hsl(var(--color-primary));
 }
 
 /* Card styles */
 .card {
-	background-color: hsl(var(--card));
+	background-color: hsl(var(--color-surface));
 	border-radius: var(--radius-lg);
 	padding: var(--spacing-lg);
-	border: 1px solid hsl(var(--border));
+	border: 1px solid hsl(var(--color-border));
 }
 
 /* Button styles */
@@ -159,12 +159,12 @@
 }
 
 .btn-primary {
-	background: hsl(var(--primary));
-	color: hsl(var(--primary-foreground));
+	background: hsl(var(--color-primary));
+	color: hsl(var(--color-primary-foreground));
 }
 
 .btn-primary:hover {
-	background: hsl(var(--primary) / 0.9);
+	background: hsl(var(--color-primary) / 0.9);
 }
 
 .btn-primary:disabled {
@@ -173,21 +173,21 @@
 }
 
 .btn-secondary {
-	background: hsl(var(--secondary));
-	color: hsl(var(--secondary-foreground));
+	background: hsl(var(--color-secondary));
+	color: hsl(var(--color-secondary-foreground));
 }
 
 .btn-secondary:hover {
-	background: hsl(var(--secondary) / 0.8);
+	background: hsl(var(--color-secondary) / 0.8);
 }
 
 .btn-ghost {
 	background: transparent;
-	color: hsl(var(--foreground));
+	color: hsl(var(--color-foreground));
 }
 
 .btn-ghost:hover {
-	background: hsl(var(--muted));
+	background: hsl(var(--color-muted));
 }
 
 .btn-icon {
@@ -204,21 +204,21 @@
 	display: block;
 	width: 100%;
 	padding: 0.5rem 0.75rem;
-	border: 2px solid hsl(var(--border));
+	border: 2px solid hsl(var(--color-border));
 	border-radius: var(--radius-md);
-	background-color: hsl(var(--background));
-	color: hsl(var(--foreground));
+	background-color: hsl(var(--color-background));
+	color: hsl(var(--color-foreground));
 	font-size: 0.875rem;
 	transition: border-color var(--transition-fast);
 }
 
 .input:focus {
 	outline: none;
-	border-color: hsl(var(--primary));
+	border-color: hsl(var(--color-primary));
 }
 
 .input::placeholder {
-	color: hsl(var(--muted-foreground));
+	color: hsl(var(--color-muted-foreground));
 }
 
 /* Select styling */
@@ -233,7 +233,7 @@ select.input {
 
 /* Text colors */
 .text-destructive {
-	color: hsl(var(--destructive));
+	color: hsl(var(--color-error));
 }
 
 /* Scrollbar styling */
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarHeader.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarHeader.svelte
index 92b511c70..a3c930b3f 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarHeader.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarHeader.svelte
@@ -85,8 +85,8 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 1rem 1.5rem;
-		border-bottom: 1px solid hsl(var(--border));
-		background: hsl(var(--card));
+		border-bottom: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-surface));
 	}
 
 	.header-left {
@@ -103,7 +103,7 @@
 	.header-title {
 		font-size: 1.25rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
@@ -115,7 +115,7 @@
 
 	.view-selector {
 		display: flex;
-		background: hsl(var(--muted));
+		background: hsl(var(--color-muted));
 		border-radius: var(--radius-md);
 		padding: 0.25rem;
 	}
@@ -127,18 +127,18 @@
 		border-radius: var(--radius-sm);
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 150ms ease;
 	}
 
 	.view-btn:hover {
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.view-btn.active {
-		background: hsl(var(--background));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-background));
+		color: hsl(var(--color-foreground));
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 	}
 
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarSidebar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarSidebar.svelte
index 0cef56601..bffdc81ff 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarSidebar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarSidebar.svelte
@@ -43,9 +43,9 @@
 
 <style>
 	.calendar-sidebar-section {
-		background: hsl(var(--card));
+		background: hsl(var(--color-surface));
 		border-radius: var(--radius-lg);
-		border: 1px solid hsl(var(--border));
+		border: 1px solid hsl(var(--color-border));
 		padding: 1rem;
 	}
 
@@ -59,7 +59,7 @@
 	.section-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
@@ -69,12 +69,12 @@
 		background: transparent;
 		border-radius: var(--radius-sm);
 		cursor: pointer;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.add-btn:hover {
-		background: hsl(var(--muted));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.calendar-list {
@@ -93,7 +93,7 @@
 	}
 
 	.calendar-item:hover {
-		background: hsl(var(--muted) / 0.5);
+		background: hsl(var(--color-muted) / 0.5);
 	}
 
 	.calendar-item input {
@@ -110,12 +110,12 @@
 
 	.calendar-name {
 		font-size: 0.875rem;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.empty-message {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 		padding: 1rem;
 	}
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
index d3bf3f48a..b3b36225a 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
@@ -137,13 +137,13 @@
 
 	.all-day-section {
 		display: flex;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 		padding: 0.5rem 0;
 	}
 
 	.all-day-label {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.all-day-events {
@@ -179,7 +179,7 @@
 		padding-right: 0.5rem;
 		text-align: right;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		position: relative;
 		top: -0.5em;
 	}
@@ -194,11 +194,11 @@
 	.day-column {
 		flex: 1;
 		position: relative;
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.day-column.today {
-		background: hsl(var(--primary) / 0.05);
+		background: hsl(var(--color-primary) / 0.05);
 	}
 
 	.event-card {
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MiniCalendar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MiniCalendar.svelte
index f302905f9..beaf970c0 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MiniCalendar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MiniCalendar.svelte
@@ -103,12 +103,12 @@
 		background: transparent;
 		border-radius: var(--radius-sm);
 		cursor: pointer;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.nav-btn:hover {
-		background: hsl(var(--muted));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.weekday-row {
@@ -120,7 +120,7 @@
 	.weekday {
 		text-align: center;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		font-weight: 500;
 	}
 
@@ -141,25 +141,25 @@
 		font-size: 0.75rem;
 		border: none;
 		background: transparent;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		transition: all var(--transition-fast);
 	}
 
 	.day:hover {
-		background: hsl(var(--muted));
+		background: hsl(var(--color-muted));
 	}
 
 	.day.other-month {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		opacity: 0.5;
 	}
 
 	.day.today {
-		background: hsl(var(--primary));
-		color: hsl(var(--primary-foreground));
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.day.selected {
-		border: 2px solid hsl(var(--primary));
+		border: 2px solid hsl(var(--color-primary));
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
index d71928f6e..9eb145b29 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
@@ -126,7 +126,7 @@
 	.weekday-headers {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.weekday-header {
@@ -134,7 +134,7 @@
 		text-align: center;
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 	}
 
@@ -152,7 +152,7 @@
 	}
 
 	.day-cell {
-		border: 1px solid hsl(var(--border));
+		border: 1px solid hsl(var(--color-border));
 		border-top: none;
 		border-left: none;
 		padding: var(--spacing-xs);
@@ -165,15 +165,15 @@
 	}
 
 	.day-cell:first-child {
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.day-cell:hover {
-		background-color: hsl(var(--muted) / 0.3);
+		background-color: hsl(var(--color-muted) / 0.3);
 	}
 
 	.day-cell.today {
-		background-color: hsl(var(--primary) / 0.1);
+		background-color: hsl(var(--color-primary) / 0.1);
 	}
 
 	.day-cell.other-month {
@@ -193,8 +193,8 @@
 	}
 
 	.day-number.today {
-		background: hsl(var(--primary));
-		color: hsl(var(--primary-foreground));
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.day-events {
@@ -232,7 +232,7 @@
 
 	.more-events {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		background: transparent;
 		border: none;
 		cursor: pointer;
@@ -241,6 +241,6 @@
 	}
 
 	.more-events:hover {
-		color: hsl(var(--primary));
+		color: hsl(var(--color-primary));
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
index 7f9aedb14..55153fcbe 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
@@ -162,7 +162,7 @@
 
 	.all-day-row {
 		display: flex;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 		min-height: 32px;
 	}
 
@@ -172,7 +172,7 @@
 		flex-wrap: wrap;
 		gap: 2px;
 		padding: 4px;
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.all-day-event {
@@ -189,7 +189,7 @@
 
 	.day-headers {
 		display: flex;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.time-gutter {
@@ -203,12 +203,12 @@
 		flex-direction: column;
 		align-items: center;
 		padding: 0.5rem;
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.day-name {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 	}
 
@@ -224,8 +224,8 @@
 	}
 
 	.day-number.today {
-		background: hsl(var(--primary));
-		color: hsl(var(--primary-foreground));
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 	}
 
 	.time-grid {
@@ -244,7 +244,7 @@
 		padding-right: 0.5rem;
 		text-align: right;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		position: relative;
 		top: -0.5em;
 	}
@@ -257,11 +257,11 @@
 	.day-column {
 		flex: 1;
 		position: relative;
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.day-column.today {
-		background: hsl(var(--primary) / 0.05);
+		background: hsl(var(--color-primary) / 0.05);
 	}
 
 	.event-card {
diff --git a/apps/calendar/apps/web/src/lib/components/event/EventForm.svelte b/apps/calendar/apps/web/src/lib/components/event/EventForm.svelte
index 6a2d07e10..59c3d2711 100644
--- a/apps/calendar/apps/web/src/lib/components/event/EventForm.svelte
+++ b/apps/calendar/apps/web/src/lib/components/event/EventForm.svelte
@@ -18,7 +18,14 @@
 	let description = $state(event?.description || '');
 	let location = $state(event?.location || '');
 	let isAllDay = $state(event?.isAllDay || false);
-	let calendarId = $state(event?.calendarId || calendarsStore.defaultCalendar?.id || '');
+	let calendarId = $state(event?.calendarId || '');
+
+	// Set default calendar when calendars are loaded
+	$effect(() => {
+		if (!calendarId && calendarsStore.defaultCalendar?.id) {
+			calendarId = calendarsStore.defaultCalendar.id;
+		}
+	});
 
 	// Date/time handling
 	let startDate = $state('');
@@ -58,6 +65,7 @@
 		e.preventDefault();
 
 		if (!title.trim()) return;
+		if (!calendarId) return;
 
 		const startDateTime = new Date(`${startDate}T${isAllDay ? '00:00' : startTime}`);
 		const endDateTime = new Date(`${endDate}T${isAllDay ? '23:59' : endTime}`);
@@ -158,7 +166,7 @@
 		<button type="button" class="px-4 py-2 rounded-lg font-medium text-foreground bg-transparent hover:bg-muted transition-colors" onclick={onCancel}>
 			Abbrechen
 		</button>
-		<button type="submit" class="px-4 py-2 rounded-lg font-medium text-primary-foreground bg-primary hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" disabled={submitting || !title.trim()}>
+		<button type="submit" class="px-4 py-2 rounded-lg font-medium text-primary-foreground bg-primary hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" disabled={submitting || !title.trim() || !calendarId}>
 			{mode === 'create' ? 'Erstellen' : 'Speichern'}
 		</button>
 	</div>
diff --git a/apps/calendar/apps/web/src/lib/stores/calendars.svelte.ts b/apps/calendar/apps/web/src/lib/stores/calendars.svelte.ts
index 665f3910d..c2e366be1 100644
--- a/apps/calendar/apps/web/src/lib/stores/calendars.svelte.ts
+++ b/apps/calendar/apps/web/src/lib/stores/calendars.svelte.ts
@@ -56,7 +56,9 @@ export const calendarsStore = {
 			error = result.error.message;
 			calendars = [];
 		} else {
-			calendars = result.data || [];
+			// API returns { calendars: [...] }
+			const data = result.data as { calendars: Calendar[] } | null;
+			calendars = data?.calendars || [];
 		}
 
 		loading = false;
@@ -70,7 +72,9 @@ export const calendarsStore = {
 		const result = await api.createCalendar(data);
 
 		if (result.data) {
-			calendars = [...calendars, result.data];
+			// API returns { calendar: {...} }
+			const responseData = result.data as { calendar: Calendar };
+			calendars = [...calendars, responseData.calendar];
 		}
 
 		return result;
@@ -83,7 +87,9 @@ export const calendarsStore = {
 		const result = await api.updateCalendar(id, data);
 
 		if (result.data) {
-			calendars = getCalendarsArray().map((c) => (c.id === id ? result.data! : c));
+			// API returns { calendar: {...} }
+			const responseData = result.data as { calendar: Calendar };
+			calendars = getCalendarsArray().map((c) => (c.id === id ? responseData.calendar : c));
 		}
 
 		return result;
diff --git a/apps/calendar/apps/web/src/lib/stores/events.svelte.ts b/apps/calendar/apps/web/src/lib/stores/events.svelte.ts
index 69776c8c9..1bb8544d8 100644
--- a/apps/calendar/apps/web/src/lib/stores/events.svelte.ts
+++ b/apps/calendar/apps/web/src/lib/stores/events.svelte.ts
@@ -13,9 +13,9 @@ let error = $state<string | null>(null);
 let loadedRange = $state<{ start: Date; end: Date } | null>(null);
 
 export const eventsStore = {
-	// Getters
+	// Getters - always return safe values
 	get events() {
-		return events;
+		return events ?? [];
 	},
 	get loading() {
 		return loading;
@@ -40,7 +40,9 @@ export const eventsStore = {
 		if (result.error) {
 			error = result.error.message;
 		} else {
-			events = result.data || [];
+			// API returns { events: [...] }
+			const data = result.data as { events: CalendarEvent[] } | null;
+			events = data?.events || [];
 			loadedRange = { start: startDate, end: endDate };
 		}
 
@@ -94,7 +96,9 @@ export const eventsStore = {
 		const result = await api.createEvent(data);
 
 		if (result.data) {
-			events = [...events, result.data];
+			// API returns { event: {...} }
+			const responseData = result.data as { event: CalendarEvent };
+			events = [...events, responseData.event];
 		}
 
 		return result;
@@ -107,7 +111,9 @@ export const eventsStore = {
 		const result = await api.updateEvent(id, data);
 
 		if (result.data) {
-			events = events.map((e) => (e.id === id ? result.data! : e));
+			// API returns { event: {...} }
+			const responseData = result.data as { event: CalendarEvent };
+			events = events.map((e) => (e.id === id ? responseData.event : e));
 		}
 
 		return result;
diff --git a/apps/calendar/apps/web/src/routes/+layout.svelte b/apps/calendar/apps/web/src/routes/+layout.svelte
index 13293128b..c9535d247 100644
--- a/apps/calendar/apps/web/src/routes/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/+layout.svelte
@@ -77,7 +77,7 @@
 	const navItems: PillNavItem[] = [
 		{ href: '/', label: 'Kalender', icon: 'calendar' },
 		{ href: '/agenda', label: 'Agenda', icon: 'list' },
-		{ href: '/calendars', label: 'Meine Kalender', icon: 'document' },
+		{ href: '/calendars', label: 'Meine Kalender', icon: 'folder' },
 		{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
 		{ href: '/feedback', label: 'Feedback', icon: 'chat' },
 	];
diff --git a/apps/calendar/apps/web/src/routes/+page.svelte b/apps/calendar/apps/web/src/routes/+page.svelte
index aac980ca4..218311c9e 100644
--- a/apps/calendar/apps/web/src/routes/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/+page.svelte
@@ -107,9 +107,9 @@
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
-		background: hsl(var(--card));
+		background: hsl(var(--color-surface));
 		border-radius: var(--radius-lg);
-		border: 1px solid hsl(var(--border));
+		border: 1px solid hsl(var(--color-border));
 		overflow: hidden;
 	}
 
diff --git a/apps/calendar/apps/web/src/routes/agenda/+page.svelte b/apps/calendar/apps/web/src/routes/agenda/+page.svelte
index 29f2acf9c..ebcb1d3e5 100644
--- a/apps/calendar/apps/web/src/routes/agenda/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/agenda/+page.svelte
@@ -11,9 +11,13 @@
 
 	// Group events by date
 	let groupedEvents = $derived.by(() => {
-		const groups: Map<string, typeof eventsStore.events> = new Map();
+		// Safety check: ensure events is an array
+		const currentEvents = eventsStore.events ?? [];
+		if (!Array.isArray(currentEvents)) return [];
 
-		for (const event of eventsStore.events) {
+		const groups: Map<string, typeof currentEvents> = new Map();
+
+		for (const event of currentEvents) {
 			const start = typeof event.startTime === 'string' ? parseISO(event.startTime) : event.startTime;
 			const dateKey = format(start, 'yyyy-MM-dd');
 
@@ -132,19 +136,19 @@
 	.page-header h1 {
 		font-size: 1.75rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 0.25rem 0;
 	}
 
 	.subtitle {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
 	.loading {
 		text-align: center;
 		padding: 2rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.empty-state {
@@ -153,7 +157,7 @@
 	}
 
 	.empty-state p {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin-bottom: 1rem;
 	}
 
@@ -172,7 +176,7 @@
 	.date-header {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		margin: 0;
@@ -180,7 +184,7 @@
 	}
 
 	.date-header.today {
-		color: hsl(var(--primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.event-item {
@@ -211,13 +215,13 @@
 
 	.event-time {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin-bottom: 0.25rem;
 	}
 
 	.event-title {
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -225,7 +229,7 @@
 
 	.event-location {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin-top: 0.25rem;
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/calendars/+page.svelte b/apps/calendar/apps/web/src/routes/calendars/+page.svelte
index ffcfaae77..16b5294b3 100644
--- a/apps/calendar/apps/web/src/routes/calendars/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/calendars/+page.svelte
@@ -220,7 +220,7 @@
 		width: 48px;
 		height: 42px;
 		padding: 4px;
-		border: 2px solid hsl(var(--border));
+		border: 2px solid hsl(var(--color-border));
 		border-radius: var(--radius-md);
 		cursor: pointer;
 	}
@@ -263,9 +263,9 @@
 	.badge {
 		font-size: 0.75rem;
 		padding: 0.125rem 0.5rem;
-		background: hsl(var(--muted));
+		background: hsl(var(--color-muted));
 		border-radius: var(--radius-sm);
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.calendar-actions {
@@ -279,12 +279,12 @@
 	}
 
 	.text-destructive {
-		color: hsl(var(--destructive));
+		color: hsl(var(--color-error));
 	}
 
 	.empty-state {
 		text-align: center;
 		padding: 2rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/event/[id]/+page.svelte b/apps/calendar/apps/web/src/routes/event/[id]/+page.svelte
index 1125b4bde..ac22ecc3c 100644
--- a/apps/calendar/apps/web/src/routes/event/[id]/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/event/[id]/+page.svelte
@@ -159,7 +159,7 @@
 	.page-title {
 		font-size: 1.5rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
@@ -171,7 +171,7 @@
 	.loading {
 		text-align: center;
 		padding: 2rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.event-details {
@@ -189,15 +189,15 @@
 	.label {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.value {
 		font-size: 1rem;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.text-destructive {
-		color: hsl(var(--destructive));
+		color: hsl(var(--color-error));
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/event/new/+page.svelte b/apps/calendar/apps/web/src/routes/event/new/+page.svelte
index bc8f5f7aa..bf7f0e3f5 100644
--- a/apps/calendar/apps/web/src/routes/event/new/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/event/new/+page.svelte
@@ -68,6 +68,6 @@
 		font-size: 1.5rem;
 		font-weight: 600;
 		margin-bottom: 1.5rem;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/settings/+page.svelte b/apps/calendar/apps/web/src/routes/settings/+page.svelte
index fb2409bd6..7f73eeee1 100644
--- a/apps/calendar/apps/web/src/routes/settings/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/settings/+page.svelte
@@ -134,12 +134,12 @@
 		font-weight: 600;
 		margin: 0 0 1rem 0;
 		padding-bottom: 0.75rem;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.setting-item {
 		padding: 1rem 0;
-		border-bottom: 1px solid hsl(var(--border) / 0.5);
+		border-bottom: 1px solid hsl(var(--color-border) / 0.5);
 	}
 
 	.setting-item:last-child {
@@ -156,17 +156,17 @@
 
 	.setting-label {
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.setting-description {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.setting-value {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.theme-options {
@@ -179,22 +179,22 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 1rem;
-		border: 2px solid hsl(var(--border));
+		border: 2px solid hsl(var(--color-border));
 		border-radius: var(--radius-md);
 		background: transparent;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: all 150ms ease;
 	}
 
 	.theme-option:hover {
-		border-color: hsl(var(--primary) / 0.5);
+		border-color: hsl(var(--color-primary) / 0.5);
 	}
 
 	.theme-option.active {
-		border-color: hsl(var(--primary));
-		background: hsl(var(--primary) / 0.1);
+		border-color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
 	}
 
 	.variant-grid {
@@ -209,7 +209,7 @@
 		align-items: center;
 		gap: 0.25rem;
 		padding: 0.75rem;
-		border: 2px solid hsl(var(--border));
+		border: 2px solid hsl(var(--color-border));
 		border-radius: var(--radius-md);
 		background: transparent;
 		cursor: pointer;
@@ -217,12 +217,12 @@
 	}
 
 	.variant-option:hover {
-		border-color: hsl(var(--primary) / 0.5);
+		border-color: hsl(var(--color-primary) / 0.5);
 	}
 
 	.variant-option.active {
-		border-color: hsl(var(--primary));
-		background: hsl(var(--primary) / 0.1);
+		border-color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
 	}
 
 	.variant-icon {
@@ -231,10 +231,10 @@
 
 	.variant-label {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.text-destructive {
-		color: hsl(var(--destructive));
+		color: hsl(var(--color-error));
 	}
 </style>
diff --git a/packages/shared-theme-ui/src/components/A11yQuickToggles.svelte b/packages/shared-theme-ui/src/components/A11yQuickToggles.svelte
new file mode 100644
index 000000000..df387ddb5
--- /dev/null
+++ b/packages/shared-theme-ui/src/components/A11yQuickToggles.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { A11yStore } from '@manacore/shared-theme';
+
+	interface Props {
+		/** A11y store instance */
+		store: A11yStore;
+		/** Contrast toggle title */
+		contrastTitle?: string;
+		/** Motion toggle title */
+		motionTitle?: string;
+	}
+
+	let {
+		store,
+		contrastTitle = 'Hoher Kontrast',
+		motionTitle = 'Animationen reduzieren',
+	}: Props = $props();
+</script>
+
+<div class="a11y-quick-toggles">
+	<!-- Contrast Toggle -->
+	<button
+		type="button"
+		onclick={() => store.setContrast(store.contrast === 'high' ? 'normal' : 'high')}
+		class="a11y-btn"
+		class:active={store.contrast === 'high'}
+		title={contrastTitle}
+		aria-pressed={store.contrast === 'high'}
+	>
+		<svg class="a11y-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<circle cx="12" cy="12" r="10" />
+			<path d="M12 2v20M12 2a10 10 0 0 1 0 20" fill="currentColor" />
+		</svg>
+	</button>
+
+	<!-- Reduce Motion Toggle -->
+	<button
+		type="button"
+		onclick={() => store.setReduceMotion(!store.reduceMotion)}
+		class="a11y-btn"
+		class:active={store.reduceMotion}
+		title={motionTitle}
+		aria-pressed={store.reduceMotion}
+	>
+		<svg class="a11y-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			{#if store.reduceMotion}
+				<!-- Pause icon when motion is reduced -->
+				<rect x="6" y="4" width="4" height="16" rx="1" />
+				<rect x="14" y="4" width="4" height="16" rx="1" />
+			{:else}
+				<!-- Play/motion icon -->
+				<polygon points="5 3 19 12 5 21 5 3" />
+			{/if}
+		</svg>
+	</button>
+</div>
+
+<style>
+	.a11y-quick-toggles {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.25rem;
+		border-radius: 9999px;
+		background: rgba(245, 245, 245, 0.95);
+		border: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .a11y-quick-toggles {
+		background: rgba(40, 40, 40, 0.95);
+		border: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
+	.a11y-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		border: none;
+		background: transparent;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: #6b7280;
+		transition: all 0.15s;
+	}
+
+	:global(.dark) .a11y-btn {
+		color: #9ca3af;
+	}
+
+	.a11y-btn:hover:not(.active) {
+		background: rgba(0, 0, 0, 0.05);
+		color: #374151;
+	}
+
+	:global(.dark) .a11y-btn:hover:not(.active) {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	.a11y-btn.active {
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
+	}
+
+	:global(.dark) .a11y-btn.active {
+		background: hsl(var(--color-primary) / 0.3);
+	}
+
+	.a11y-icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>
diff --git a/packages/shared-theme-ui/src/components/A11ySettings.svelte b/packages/shared-theme-ui/src/components/A11ySettings.svelte
new file mode 100644
index 000000000..b120e039c
--- /dev/null
+++ b/packages/shared-theme-ui/src/components/A11ySettings.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { A11yStore, ContrastLevel, ColorblindMode } from '@manacore/shared-theme';
+	import { COLORBLIND_OPTIONS, CONTRAST_OPTIONS } from '@manacore/shared-theme';
+	import type { A11yTranslations } from '../types';
+	import { defaultA11yTranslations } from '../types';
+
+	interface Props {
+		/** A11y store instance */
+		store: A11yStore;
+		/** Custom translations */
+		translations?: Partial<A11yTranslations>;
+		/** Show reset button */
+		showReset?: boolean;
+	}
+
+	let { store, translations = {}, showReset = true }: Props = $props();
+
+	// Merge translations with defaults
+	const t = $derived({ ...defaultA11yTranslations, ...translations });
+
+	// Colorblind mode labels mapped to translations
+	const colorblindLabels: Record<ColorblindMode, string> = $derived({
+		none: t.colorblindNone,
+		deuteranopia: t.colorblindDeuteranopia,
+		protanopia: t.colorblindProtanopia,
+		monochrome: t.colorblindMonochrome,
+	});
+</script>
+
+<div class="a11y-settings space-y-6">
+	<!-- Contrast Setting -->
+	<div class="setting-group">
+		<span class="setting-label">{t.contrastLabel}</span>
+		<div class="inline-flex rounded-lg bg-muted p-1" role="group" aria-label={t.contrastLabel}>
+			{#each CONTRAST_OPTIONS as option}
+				<button
+					type="button"
+					onclick={() => store.setContrast(option.value)}
+					class="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors
+						{store.contrast === option.value
+						? 'bg-surface text-foreground shadow-sm'
+						: 'text-muted-foreground hover:text-foreground'}"
+					title={option.description}
+				>
+					{option.value === 'normal' ? t.contrastNormal : t.contrastHigh}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Colorblind Mode -->
+	<div class="setting-group">
+		<label for="colorblind-select" class="setting-label">{t.colorblindLabel}</label>
+		<select
+			id="colorblind-select"
+			class="select-input"
+			value={store.colorblind}
+			onchange={(e) => store.setColorblind(e.currentTarget.value as ColorblindMode)}
+		>
+			{#each COLORBLIND_OPTIONS as option}
+				<option value={option.value}>
+					{colorblindLabels[option.value]}
+				</option>
+			{/each}
+		</select>
+	</div>
+
+	<!-- Reduce Motion -->
+	<div class="setting-group">
+		<div class="flex items-center justify-between">
+			<div>
+				<label for="reduce-motion" class="setting-label mb-0">{t.reduceMotionLabel}</label>
+				<p class="text-sm text-muted-foreground">{t.reduceMotionDescription}</p>
+			</div>
+			<div class="flex items-center gap-2">
+				{#if store.reduceMotionExplicit}
+					<button
+						type="button"
+						onclick={() => store.resetReduceMotion()}
+						class="text-xs text-muted-foreground hover:text-foreground underline"
+					>
+						{t.systemDefault}
+					</button>
+				{/if}
+				<button
+					id="reduce-motion"
+					type="button"
+					role="switch"
+					aria-checked={store.reduceMotion}
+					aria-label={t.reduceMotionLabel}
+					onclick={() => store.setReduceMotion(!store.reduceMotion)}
+					class="toggle-switch"
+					class:active={store.reduceMotion}
+				>
+					<span class="toggle-thumb" class:active={store.reduceMotion}></span>
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Reset Button -->
+	{#if showReset}
+		<div class="pt-2 border-t border-border">
+			<button
+				type="button"
+				onclick={() => store.resetAll()}
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+			>
+				{t.reset}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.a11y-settings {
+		width: 100%;
+	}
+
+	.setting-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.setting-label {
+		display: block;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: hsl(var(--color-muted-foreground));
+		margin-bottom: 0.25rem;
+	}
+
+	.select-input {
+		width: 100%;
+		max-width: 20rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		border-radius: 0.5rem;
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-input));
+		color: hsl(var(--color-foreground));
+		cursor: pointer;
+		transition: border-color 0.2s;
+	}
+
+	.select-input:hover {
+		border-color: hsl(var(--color-border-strong));
+	}
+
+	.select-input:focus {
+		outline: none;
+		border-color: hsl(var(--color-ring));
+		box-shadow: 0 0 0 2px hsl(var(--color-ring) / 0.2);
+	}
+
+	.toggle-switch {
+		position: relative;
+		width: 2.75rem;
+		height: 1.5rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-muted));
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+	}
+
+	.toggle-switch.active {
+		background: hsl(var(--color-primary));
+	}
+
+	.toggle-thumb {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.125rem;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 9999px;
+		background: white;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		transition: transform 0.2s;
+	}
+
+	.toggle-thumb.active {
+		transform: translateX(1.25rem);
+	}
+</style>
diff --git a/packages/shared-theme-ui/src/index.ts b/packages/shared-theme-ui/src/index.ts
index 932837aa2..546dd0e6d 100644
--- a/packages/shared-theme-ui/src/index.ts
+++ b/packages/shared-theme-ui/src/index.ts
@@ -3,14 +3,24 @@ export { default as ThemeToggle } from './ThemeToggle.svelte';
 export { default as ThemeSelector } from './ThemeSelector.svelte';
 export { default as ThemeModeSelector } from './ThemeModeSelector.svelte';
 
-// New Components
+// Theme Components
 export { default as ThemeColorPreview } from './components/ThemeColorPreview.svelte';
 export { default as ThemeCard } from './components/ThemeCard.svelte';
 export { default as ThemeGrid } from './components/ThemeGrid.svelte';
 
+// A11y Components
+export { default as A11ySettings } from './components/A11ySettings.svelte';
+export { default as A11yQuickToggles } from './components/A11yQuickToggles.svelte';
+
 // Pages
 export { default as ThemePage } from './pages/ThemePage.svelte';
 
 // Types
-export type { ThemeStatus, ThemeCardData, ThemePageProps, ThemePageTranslations } from './types';
-export { defaultTranslations } from './types';
+export type {
+	ThemeStatus,
+	ThemeCardData,
+	ThemePageProps,
+	ThemePageTranslations,
+	A11yTranslations,
+} from './types';
+export { defaultTranslations, defaultA11yTranslations } from './types';
diff --git a/packages/shared-theme-ui/src/pages/ThemePage.svelte b/packages/shared-theme-ui/src/pages/ThemePage.svelte
index caca77d11..0b7ec550a 100644
--- a/packages/shared-theme-ui/src/pages/ThemePage.svelte
+++ b/packages/shared-theme-ui/src/pages/ThemePage.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { ThemeVariant, ThemeMode } from '@manacore/shared-theme';
+	import type { ThemeVariant, ThemeMode, A11yStore } from '@manacore/shared-theme';
 	import { ArrowLeft, Sun, Moon, Desktop } from '@manacore/shared-icons';
-	import type { ThemeCardData, ThemePageTranslations } from '../types';
-	import { defaultTranslations } from '../types';
+	import type { ThemeCardData, ThemePageTranslations, A11yTranslations } from '../types';
+	import { defaultTranslations, defaultA11yTranslations } from '../types';
 	import ThemeGrid from '../components/ThemeGrid.svelte';
+	import A11ySettings from '../components/A11ySettings.svelte';
 
 	interface Props {
 		// Theme Store Integration
@@ -30,6 +31,11 @@
 
 		// Translations
 		translations?: Partial<ThemePageTranslations>;
+
+		// A11y Settings
+		a11yStore?: A11yStore;
+		showA11ySettings?: boolean;
+		a11yTranslations?: Partial<A11yTranslations>;
 	}
 
 	let {
@@ -46,10 +52,14 @@
 		showLockedThemes = true,
 		onUnlockTheme,
 		translations = {},
+		a11yStore,
+		showA11ySettings = false,
+		a11yTranslations = {},
 	}: Props = $props();
 
 	// Merge translations with defaults
 	const t = $derived({ ...defaultTranslations, ...translations });
+	const a11yT = $derived({ ...defaultA11yTranslations, ...a11yTranslations });
 
 	const modes: { mode: ThemeMode; icon: typeof Sun; label: string }[] = $derived([
 		{ mode: 'light', icon: Sun, label: t.lightMode },
@@ -121,5 +131,15 @@
 				{translations}
 			/>
 		</section>
+
+		<!-- A11y Settings -->
+		{#if showA11ySettings && a11yStore}
+			<section class="mt-8 pt-8 border-t border-border">
+				<h2 class="text-sm font-medium text-muted-foreground mb-4">
+					{a11yT.a11yTitle}
+				</h2>
+				<A11ySettings store={a11yStore} translations={a11yTranslations} />
+			</section>
+		{/if}
 	</div>
 </div>
diff --git a/packages/shared-theme-ui/src/types.ts b/packages/shared-theme-ui/src/types.ts
index 145df9a32..31f9f78c1 100644
--- a/packages/shared-theme-ui/src/types.ts
+++ b/packages/shared-theme-ui/src/types.ts
@@ -85,3 +85,58 @@ export const defaultTranslations: ThemePageTranslations = {
 	lightPreview: 'Hell',
 	darkPreview: 'Dunkel',
 };
+
+// ============================================================================
+// A11y (Accessibility) Types
+// ============================================================================
+
+/**
+ * Translations for A11y settings
+ */
+export interface A11yTranslations {
+	/** Section title */
+	a11yTitle: string;
+	/** Contrast setting label */
+	contrastLabel: string;
+	/** Normal contrast option */
+	contrastNormal: string;
+	/** High contrast option */
+	contrastHigh: string;
+	/** Colorblind setting label */
+	colorblindLabel: string;
+	/** No colorblind adaptation */
+	colorblindNone: string;
+	/** Deuteranopia option */
+	colorblindDeuteranopia: string;
+	/** Protanopia option */
+	colorblindProtanopia: string;
+	/** Monochrome option */
+	colorblindMonochrome: string;
+	/** Reduce motion label */
+	reduceMotionLabel: string;
+	/** Reduce motion description */
+	reduceMotionDescription: string;
+	/** System default label */
+	systemDefault: string;
+	/** Reset button */
+	reset: string;
+}
+
+/**
+ * Default German A11y translations
+ */
+export const defaultA11yTranslations: A11yTranslations = {
+	a11yTitle: 'Barrierefreiheit',
+	contrastLabel: 'Kontrast',
+	contrastNormal: 'Normal',
+	contrastHigh: 'Hoch',
+	colorblindLabel: 'Farbsehschwäche',
+	colorblindNone: 'Keine',
+	colorblindDeuteranopia: 'Rot-Grün (Deuteranopie)',
+	colorblindProtanopia: 'Rot-Blindheit (Protanopie)',
+	colorblindMonochrome: 'Monochrom',
+	reduceMotionLabel: 'Animationen reduzieren',
+	reduceMotionDescription: 'Deaktiviert Animationen und Übergänge',
+	systemDefault: 'System',
+	reset: 'Zurücksetzen',
+};
diff --git a/packages/shared-theme/src/a11y-constants.ts b/packages/shared-theme/src/a11y-constants.ts
new file mode 100644
index 000000000..8c1c4f347
--- /dev/null
+++ b/packages/shared-theme/src/a11y-constants.ts
@@ -0,0 +1,132 @@
+import type { A11ySettings, ContrastLevel, ColorblindMode } from './types';
+
+/**
+ * localStorage key suffix for A11y settings
+ */
+export const A11Y_STORAGE_KEY_SUFFIX = '-a11y';
+
+/**
+ * Default A11y settings
+ */
+export const DEFAULT_A11Y_SETTINGS: A11ySettings = {
+	contrast: 'normal',
+	colorblind: 'none',
+	reduceMotion: false,
+};
+
+/**
+ * Colorblind mode options for UI
+ */
+export const COLORBLIND_OPTIONS: readonly {
+	value: ColorblindMode;
+	label: string;
+	description: string;
+}[] = [
+	{
+		value: 'none',
+		label: 'Keine',
+		description: 'Standardfarben',
+	},
+	{
+		value: 'deuteranopia',
+		label: 'Deuteranopie',
+		description: 'Rot-Grün-Schwäche (häufigste Form)',
+	},
+	{
+		value: 'protanopia',
+		label: 'Protanopie',
+		description: 'Rot-Blindheit',
+	},
+	{
+		value: 'monochrome',
+		label: 'Monochrom',
+		description: 'Graustufen',
+	},
+] as const;
+
+/**
+ * Contrast level options for UI
+ */
+export const CONTRAST_OPTIONS: readonly {
+	value: ContrastLevel;
+	label: string;
+	description: string;
+}[] = [
+	{
+		value: 'normal',
+		label: 'Normal',
+		description: 'Standard-Kontrast (WCAG AA)',
+	},
+	{
+		value: 'high',
+		label: 'Hoch',
+		description: 'Erhöhter Kontrast (WCAG AAA)',
+	},
+] as const;
+
+/**
+ * High contrast transformation config
+ * Adjusts lightness values to achieve WCAG AAA (7:1) contrast ratios
+ */
+export const HIGH_CONTRAST_CONFIG = {
+	light: {
+		/** Minimum lightness for backgrounds (push towards white) */
+		backgroundLightnessMin: 95,
+		/** Maximum lightness for foregrounds (push towards black) */
+		foregroundLightnessMax: 15,
+		/** How much to darken borders */
+		borderDarken: 15,
+		/** Minimum saturation boost for primary colors */
+		primarySaturationMin: 70,
+	},
+	dark: {
+		/** Maximum lightness for backgrounds (push towards black) */
+		backgroundLightnessMax: 8,
+		/** Minimum lightness for foregrounds (push towards white) */
+		foregroundLightnessMin: 90,
+		/** How much to lighten borders */
+		borderLighten: 15,
+		/** Minimum saturation boost for primary colors */
+		primarySaturationMin: 70,
+	},
+} as const;
+
+/**
+ * Colorblind transformation configs
+ * Hue shifts to make colors more distinguishable for each condition
+ */
+export const COLORBLIND_TRANSFORMS = {
+	deuteranopia: {
+		/** Shift problematic green hues towards blue */
+		hueRangeStart: 80,
+		hueRangeEnd: 160,
+		hueShift: 60,
+		saturationScale: 0.85,
+	},
+	protanopia: {
+		/** Shift problematic red hues towards yellow */
+		hueRangeStart: 0,
+		hueRangeEnd: 30,
+		hueShift: 30,
+		/** Also handle wrap-around (330-360) */
+		hueRangeStart2: 330,
+		hueRangeEnd2: 360,
+		saturationScale: 0.85,
+	},
+	monochrome: {
+		/** Remove all saturation */
+		saturationScale: 0,
+	},
+} as const;
+
+/**
+ * Default animation/transition durations
+ */
+export const MOTION_DEFAULTS = {
+	/** Default animation duration in ms */
+	animationDuration: 300,
+	/** Default transition duration in ms */
+	transitionDuration: 200,
+	/** Reduced (0) for prefers-reduced-motion */
+	reducedDuration: 0,
+} as const;
diff --git a/packages/shared-theme/src/a11y-store.svelte.ts b/packages/shared-theme/src/a11y-store.svelte.ts
new file mode 100644
index 000000000..1a1e818e5
--- /dev/null
+++ b/packages/shared-theme/src/a11y-store.svelte.ts
@@ -0,0 +1,192 @@
+import type { A11yStore, A11yStoreConfig, ContrastLevel, ColorblindMode } from './types';
+import { DEFAULT_A11Y_SETTINGS, A11Y_STORAGE_KEY_SUFFIX } from './a11y-constants';
+import {
+	getSystemReducedMotion,
+	createReducedMotionListener,
+	applyA11yAttributes,
+	loadA11yFromStorage,
+	saveA11yToStorage,
+} from './a11y-utils';
+import { isBrowser } from './utils';
+
+/**
+ * Create an A11y store for your app
+ *
+ * @example
+ * ```typescript
+ * import { createA11yStore } from '@manacore/shared-theme';
+ *
+ * export const a11y = createA11yStore({ appId: 'myapp' });
+ *
+ * // In +layout.svelte
+ * onMount(() => {
+ *   const cleanup = a11y.initialize();
+ *   return cleanup;
+ * });
+ * ```
+ */
+export function createA11yStore(config: A11yStoreConfig): A11yStore {
+	const { appId, defaults = {} } = config;
+	const storageKey = `${appId}${A11Y_STORAGE_KEY_SUFFIX}`;
+
+	// Merge defaults
+	const defaultSettings = { ...DEFAULT_A11Y_SETTINGS, ...defaults };
+
+	// Svelte 5 runes state
+	let contrast = $state<ContrastLevel>(defaultSettings.contrast);
+	let colorblind = $state<ColorblindMode>(defaultSettings.colorblind);
+	let userReduceMotion = $state<boolean | null>(null); // null = use system
+	let systemReduceMotion = $state<boolean>(false);
+
+	// Derived: effective reduce motion
+	const reduceMotion = $derived(userReduceMotion !== null ? userReduceMotion : systemReduceMotion);
+
+	// Derived: whether user has explicitly set reduce motion
+	const reduceMotionExplicit = $derived(userReduceMotion !== null);
+
+	/**
+	 * Apply current A11y settings to document
+	 */
+	function applySettings(): void {
+		applyA11yAttributes({
+			contrast,
+			colorblind,
+			reduceMotion,
+		});
+		saveSettings();
+	}
+
+	/**
+	 * Save settings to localStorage
+	 */
+	function saveSettings(): void {
+		saveA11yToStorage(storageKey, {
+			contrast,
+			colorblind,
+			reduceMotion: userReduceMotion !== null ? userReduceMotion : false,
+		});
+	}
+
+	/**
+	 * Set contrast level
+	 */
+	function setContrast(level: ContrastLevel): void {
+		if (level === contrast) return;
+		if (level !== 'normal' && level !== 'high') {
+			console.warn(`Invalid contrast level: ${level}`);
+			return;
+		}
+		contrast = level;
+		applySettings();
+	}
+
+	/**
+	 * Set colorblind mode
+	 */
+	function setColorblind(mode: ColorblindMode): void {
+		if (mode === colorblind) return;
+		const validModes: ColorblindMode[] = ['none', 'deuteranopia', 'protanopia', 'monochrome'];
+		if (!validModes.includes(mode)) {
+			console.warn(`Invalid colorblind mode: ${mode}`);
+			return;
+		}
+		colorblind = mode;
+		applySettings();
+	}
+
+	/**
+	 * Set reduce motion preference
+	 */
+	function setReduceMotion(reduce: boolean): void {
+		userReduceMotion = reduce;
+		applySettings();
+	}
+
+	/**
+	 * Reset reduce motion to system default
+	 */
+	function resetReduceMotion(): void {
+		userReduceMotion = null;
+		applySettings();
+	}
+
+	/**
+	 * Reset all A11y settings to defaults
+	 */
+	function resetAll(): void {
+		contrast = defaultSettings.contrast;
+		colorblind = defaultSettings.colorblind;
+		userReduceMotion = null;
+		applySettings();
+	}
+
+	/**
+	 * Initialize A11y store
+	 * - Loads saved preferences from localStorage
+	 * - Sets up reduced motion listener
+	 * - Applies initial settings
+	 *
+	 * @returns Cleanup function to remove listeners
+	 */
+	function initialize(): () => void {
+		if (!isBrowser()) {
+			return () => {};
+		}
+
+		// Get system reduced motion preference
+		systemReduceMotion = getSystemReducedMotion();
+
+		// Load saved preferences
+		const saved = loadA11yFromStorage(storageKey);
+		if (saved) {
+			if (saved.contrast && (saved.contrast === 'normal' || saved.contrast === 'high')) {
+				contrast = saved.contrast;
+			}
+			if (saved.colorblind) {
+				const validModes: ColorblindMode[] = ['none', 'deuteranopia', 'protanopia', 'monochrome'];
+				if (validModes.includes(saved.colorblind as ColorblindMode)) {
+					colorblind = saved.colorblind as ColorblindMode;
+				}
+			}
+			if (typeof saved.reduceMotion === 'boolean') {
+				userReduceMotion = saved.reduceMotion;
+			}
+		}
+
+		// Apply initial settings
+		applySettings();
+
+		// Listen for system reduced motion changes
+		const cleanup = createReducedMotionListener((reduces) => {
+			systemReduceMotion = reduces;
+			// Only re-apply if user hasn't explicitly set a preference
+			if (userReduceMotion === null) {
+				applySettings();
+			}
+		});
+
+		return cleanup;
+	}
+
+	return {
+		get contrast() {
+			return contrast;
+		},
+		get colorblind() {
+			return colorblind;
+		},
+		get reduceMotion() {
+			return reduceMotion;
+		},
+		get reduceMotionExplicit() {
+			return reduceMotionExplicit;
+		},
+
+		setContrast,
+		setColorblind,
+		setReduceMotion,
+		resetReduceMotion,
+		resetAll,
+		initialize,
+	};
+}
diff --git a/packages/shared-theme/src/a11y-utils.ts b/packages/shared-theme/src/a11y-utils.ts
new file mode 100644
index 000000000..db985c014
--- /dev/null
+++ b/packages/shared-theme/src/a11y-utils.ts
@@ -0,0 +1,312 @@
+import type {
+	ThemeColors,
+	EffectiveMode,
+	HSLValue,
+	ContrastLevel,
+	ColorblindMode,
+	A11ySettings,
+} from './types';
+import { parseHSL, createHSL, isBrowser } from './utils';
+import { HIGH_CONTRAST_CONFIG, COLORBLIND_TRANSFORMS, MOTION_DEFAULTS } from './a11y-constants';
+
+// ============================================================================
+// Reduced Motion
+// ============================================================================
+
+/**
+ * Check if system prefers reduced motion
+ */
+export function getSystemReducedMotion(): boolean {
+	if (!isBrowser()) return false;
+	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Create a media query listener for reduced motion preference changes
+ */
+export function createReducedMotionListener(callback: (reduces: boolean) => void): () => void {
+	if (!isBrowser()) return () => {};
+
+	const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+	const handler = (e: MediaQueryListEvent) => callback(e.matches);
+
+	if (mediaQuery.addEventListener) {
+		mediaQuery.addEventListener('change', handler);
+		return () => mediaQuery.removeEventListener('change', handler);
+	}
+
+	mediaQuery.addListener(handler);
+	return () => mediaQuery.removeListener(handler);
+}
+
+/**
+ * Apply motion settings to document
+ */
+export function applyMotionSettings(reduceMotion: boolean): void {
+	if (!isBrowser()) return;
+
+	const root = document.documentElement;
+
+	if (reduceMotion) {
+		root.setAttribute('data-reduce-motion', 'true');
+		root.style.setProperty('--animation-duration', `${MOTION_DEFAULTS.reducedDuration}ms`);
+		root.style.setProperty('--transition-duration', `${MOTION_DEFAULTS.reducedDuration}ms`);
+	} else {
+		root.removeAttribute('data-reduce-motion');
+		root.style.setProperty('--animation-duration', `${MOTION_DEFAULTS.animationDuration}ms`);
+		root.style.setProperty('--transition-duration', `${MOTION_DEFAULTS.transitionDuration}ms`);
+	}
+}
+
+// ============================================================================
+// High Contrast Transformations
+// ============================================================================
+
+/**
+ * Color role classification for contrast adjustments
+ */
+type ColorRole = 'background' | 'foreground' | 'border' | 'primary' | 'semantic' | 'other';
+
+/**
+ * Get the role of a color based on its key
+ */
+function getColorRole(colorKey: keyof ThemeColors): ColorRole {
+	const backgrounds = ['background', 'surface', 'surfaceHover', 'surfaceElevated', 'muted', 'input'];
+	const foregrounds = ['foreground', 'primaryForeground', 'secondaryForeground', 'mutedForeground'];
+	const borders = ['border', 'borderStrong', 'ring'];
+	const primaries = ['primary', 'secondary'];
+	const semantics = ['error', 'success', 'warning'];
+
+	if (backgrounds.includes(colorKey)) return 'background';
+	if (foregrounds.includes(colorKey)) return 'foreground';
+	if (borders.includes(colorKey)) return 'border';
+	if (primaries.includes(colorKey)) return 'primary';
+	if (semantics.includes(colorKey)) return 'semantic';
+	return 'other';
+}
+
+/**
+ * Apply high contrast transformation to a single color
+ */
+function applyHighContrastToColor(
+	hsl: HSLValue,
+	colorKey: keyof ThemeColors,
+	mode: EffectiveMode
+): HSLValue {
+	const { h, s, l } = parseHSL(hsl);
+	const role = getColorRole(colorKey);
+
+	let newL = l;
+	let newS = s;
+
+	if (mode === 'light') {
+		const config = HIGH_CONTRAST_CONFIG.light;
+		switch (role) {
+			case 'background':
+				newL = Math.max(l, config.backgroundLightnessMin);
+				break;
+			case 'foreground':
+				newL = Math.min(l, config.foregroundLightnessMax);
+				break;
+			case 'border':
+				newL = Math.max(0, l - config.borderDarken);
+				break;
+			case 'primary':
+			case 'semantic':
+				newS = Math.max(s, config.primarySaturationMin);
+				newL = Math.min(l, 45);
+				break;
+		}
+	} else {
+		const config = HIGH_CONTRAST_CONFIG.dark;
+		switch (role) {
+			case 'background':
+				newL = Math.min(l, config.backgroundLightnessMax);
+				break;
+			case 'foreground':
+				newL = Math.max(l, config.foregroundLightnessMin);
+				break;
+			case 'border':
+				newL = Math.min(100, l + config.borderLighten);
+				break;
+			case 'primary':
+			case 'semantic':
+				newS = Math.max(s, config.primarySaturationMin);
+				newL = Math.max(l, 55);
+				break;
+		}
+	}
+
+	return createHSL(h, newS, newL);
+}
+
+/**
+ * Apply high contrast transformations to all theme colors
+ */
+export function applyHighContrast(colors: ThemeColors, mode: EffectiveMode): ThemeColors {
+	const result = { ...colors };
+
+	for (const key of Object.keys(colors) as (keyof ThemeColors)[]) {
+		result[key] = applyHighContrastToColor(colors[key], key, mode);
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Colorblind Transformations
+// ============================================================================
+
+/**
+ * Shift hue within a range
+ */
+function shiftHueInRange(
+	h: number,
+	rangeStart: number,
+	rangeEnd: number,
+	shift: number
+): number {
+	if (h >= rangeStart && h <= rangeEnd) {
+		return (h + shift) % 360;
+	}
+	return h;
+}
+
+/**
+ * Apply colorblind transformation to a single color
+ */
+function applyColorblindToColor(hsl: HSLValue, mode: ColorblindMode): HSLValue {
+	if (mode === 'none') return hsl;
+
+	const { h, s, l } = parseHSL(hsl);
+
+	if (mode === 'monochrome') {
+		// Full grayscale - remove all saturation
+		return createHSL(h, 0, l);
+	}
+
+	if (mode === 'deuteranopia') {
+		const config = COLORBLIND_TRANSFORMS.deuteranopia;
+		const newH = shiftHueInRange(h, config.hueRangeStart, config.hueRangeEnd, config.hueShift);
+		const newS = s * config.saturationScale;
+		return createHSL(newH, newS, l);
+	}
+
+	if (mode === 'protanopia') {
+		const config = COLORBLIND_TRANSFORMS.protanopia;
+		let newH = shiftHueInRange(h, config.hueRangeStart, config.hueRangeEnd, config.hueShift);
+		// Also handle wrap-around reds (330-360)
+		newH = shiftHueInRange(newH, config.hueRangeStart2, config.hueRangeEnd2, config.hueShift);
+		const newS = s * config.saturationScale;
+		return createHSL(newH, newS, l);
+	}
+
+	return hsl;
+}
+
+/**
+ * Apply colorblind transformations to all theme colors
+ */
+export function applyColorblindTransform(
+	colors: ThemeColors,
+	mode: ColorblindMode
+): ThemeColors {
+	if (mode === 'none') return colors;
+
+	const result = { ...colors };
+
+	for (const key of Object.keys(colors) as (keyof ThemeColors)[]) {
+		result[key] = applyColorblindToColor(colors[key], mode);
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Combined A11y Application
+// ============================================================================
+
+/**
+ * Apply all A11y transformations to theme colors
+ */
+export function applyA11yTransformations(
+	colors: ThemeColors,
+	mode: EffectiveMode,
+	a11ySettings: A11ySettings
+): ThemeColors {
+	let result = { ...colors };
+
+	// Apply high contrast first (if enabled)
+	if (a11ySettings.contrast === 'high') {
+		result = applyHighContrast(result, mode);
+	}
+
+	// Apply colorblind transformation
+	if (a11ySettings.colorblind !== 'none') {
+		result = applyColorblindTransform(result, a11ySettings.colorblind);
+	}
+
+	return result;
+}
+
+/**
+ * Apply A11y data attributes to document
+ */
+export function applyA11yAttributes(a11ySettings: A11ySettings): void {
+	if (!isBrowser()) return;
+
+	const root = document.documentElement;
+
+	// Contrast level
+	if (a11ySettings.contrast === 'high') {
+		root.setAttribute('data-contrast', 'high');
+	} else {
+		root.removeAttribute('data-contrast');
+	}
+
+	// Colorblind mode
+	if (a11ySettings.colorblind !== 'none') {
+		root.setAttribute('data-colorblind', a11ySettings.colorblind);
+	} else {
+		root.removeAttribute('data-colorblind');
+	}
+
+	// Motion settings
+	applyMotionSettings(a11ySettings.reduceMotion);
+}
+
+// ============================================================================
+// Storage
+// ============================================================================
+
+/**
+ * Load A11y settings from localStorage
+ */
+export function loadA11yFromStorage(storageKey: string): Partial<A11ySettings> | null {
+	if (!isBrowser()) return null;
+
+	try {
+		const stored = localStorage.getItem(storageKey);
+		if (stored) {
+			return JSON.parse(stored);
+		}
+	} catch (e) {
+		console.warn('Failed to load A11y settings from storage:', e);
+	}
+
+	return null;
+}
+
+/**
+ * Save A11y settings to localStorage
+ */
+export function saveA11yToStorage(storageKey: string, settings: A11ySettings): void {
+	if (!isBrowser()) return;
+
+	try {
+		localStorage.setItem(storageKey, JSON.stringify(settings));
+	} catch (e) {
+		console.warn('Failed to save A11y settings to storage:', e);
+	}
+}
diff --git a/packages/shared-theme/src/index.ts b/packages/shared-theme/src/index.ts
index 5972ab504..3082935f2 100644
--- a/packages/shared-theme/src/index.ts
+++ b/packages/shared-theme/src/index.ts
@@ -9,6 +9,12 @@ export type {
 	AppThemeConfig,
 	ThemeStore,
 	HSLValue,
+	// A11y Types
+	ContrastLevel,
+	ColorblindMode,
+	A11ySettings,
+	A11yStore,
+	A11yStoreConfig,
 } from './types';
 
 // Constants
@@ -21,9 +27,23 @@ export {
 	STORAGE_KEY_SUFFIX,
 } from './constants';
 
+// A11y Constants
+export {
+	A11Y_STORAGE_KEY_SUFFIX,
+	DEFAULT_A11Y_SETTINGS,
+	COLORBLIND_OPTIONS,
+	CONTRAST_OPTIONS,
+	HIGH_CONTRAST_CONFIG,
+	COLORBLIND_TRANSFORMS,
+	MOTION_DEFAULTS,
+} from './a11y-constants';
+
 // Store
 export { createThemeStore, APP_THEME_CONFIGS } from './store.svelte';
 
+// A11y Store
+export { createA11yStore } from './a11y-store.svelte';
+
 // Utils
 export {
 	isBrowser,
@@ -41,3 +61,16 @@ export {
 	getContrastColor,
 	generateThemeCSS,
 } from './utils';
+
+// A11y Utils
+export {
+	getSystemReducedMotion,
+	createReducedMotionListener,
+	applyMotionSettings,
+	applyHighContrast,
+	applyColorblindTransform,
+	applyA11yTransformations,
+	applyA11yAttributes,
+	loadA11yFromStorage,
+	saveA11yToStorage,
+} from './a11y-utils';
diff --git a/packages/shared-theme/src/types.ts b/packages/shared-theme/src/types.ts
index 5b13d8846..1664405ee 100644
--- a/packages/shared-theme/src/types.ts
+++ b/packages/shared-theme/src/types.ts
@@ -134,3 +134,72 @@ export interface ThemeStore {
 	/** Initialize theme (call on mount) */
 	initialize: () => () => void;
 }
+
+// ============================================================================
+// Accessibility (A11y) Types
+// ============================================================================
+
+/**
+ * Contrast level for accessibility
+ * - 'normal': Default contrast (WCAG AA 4.5:1 minimum)
+ * - 'high': Enhanced contrast (WCAG AAA 7:1 minimum)
+ */
+export type ContrastLevel = 'normal' | 'high';
+
+/**
+ * Colorblind mode simulation/adaptation
+ * - 'none': No colorblind adaptation
+ * - 'deuteranopia': Green-blind (most common, ~6% of males)
+ * - 'protanopia': Red-blind (~1% of males)
+ * - 'monochrome': Full grayscale (achromatopsia)
+ */
+export type ColorblindMode = 'none' | 'deuteranopia' | 'protanopia' | 'monochrome';
+
+/**
+ * A11y settings state
+ */
+export interface A11ySettings {
+	/** Contrast level */
+	contrast: ContrastLevel;
+	/** Colorblind adaptation mode */
+	colorblind: ColorblindMode;
+	/** Reduce motion preference */
+	reduceMotion: boolean;
+}
+
+/**
+ * A11y store interface (separate from ThemeStore)
+ */
+export interface A11yStore {
+	/** Current contrast level */
+	readonly contrast: ContrastLevel;
+	/** Current colorblind mode */
+	readonly colorblind: ColorblindMode;
+	/** Effective reduce motion (user setting OR system preference) */
+	readonly reduceMotion: boolean;
+	/** Whether user has explicitly set reduce motion (vs system default) */
+	readonly reduceMotionExplicit: boolean;
+
+	/** Set contrast level */
+	setContrast: (level: ContrastLevel) => void;
+	/** Set colorblind mode */
+	setColorblind: (mode: ColorblindMode) => void;
+	/** Set reduce motion preference */
+	setReduceMotion: (reduce: boolean) => void;
+	/** Reset to system default for reduce motion */
+	resetReduceMotion: () => void;
+	/** Reset all A11y settings to defaults */
+	resetAll: () => void;
+	/** Initialize (call on mount) */
+	initialize: () => () => void;
+}
+
+/**
+ * A11y store configuration
+ */
+export interface A11yStoreConfig {
+	/** App identifier for localStorage key */
+	appId: string;
+	/** Default settings override */
+	defaults?: Partial<A11ySettings>;
+}
diff --git a/packages/shared-theme/src/utils.ts b/packages/shared-theme/src/utils.ts
index 3acddf2a2..6fb006686 100644
--- a/packages/shared-theme/src/utils.ts
+++ b/packages/shared-theme/src/utils.ts
@@ -1,5 +1,6 @@
-import type { ThemeColors, ThemeVariant, EffectiveMode, HSLValue } from './types';
+import type { ThemeColors, ThemeVariant, EffectiveMode, HSLValue, A11ySettings } from './types';
 import { THEME_DEFINITIONS, CSS_VAR_PREFIX } from './constants';
+import { applyA11yTransformations, applyA11yAttributes } from './a11y-utils';
 
 /**
  * Check if code is running in browser
@@ -90,12 +91,20 @@ export function colorsToCssVars(colors: ThemeColors): Record<string, string> {
 export function applyThemeToDocument(
 	variant: ThemeVariant,
 	effectiveMode: EffectiveMode,
-	primaryOverride?: { light: HSLValue; dark: HSLValue }
+	primaryOverride?: { light: HSLValue; dark: HSLValue },
+	a11ySettings?: A11ySettings
 ): void {
 	if (!isBrowser()) return;
 
 	const root = document.documentElement;
-	const colors = getThemeColors(variant, effectiveMode, primaryOverride);
+	let colors = getThemeColors(variant, effectiveMode, primaryOverride);
+
+	// Apply A11y transformations if provided
+	if (a11ySettings) {
+		colors = applyA11yTransformations(colors, effectiveMode, a11ySettings);
+		applyA11yAttributes(a11ySettings);
+	}
+
 	const cssVars = colorsToCssVars(colors);
 
 	// Set CSS variables
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 21c0a722a..4f584cd59 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -11,6 +11,8 @@
 		onToggle?: (open: boolean) => void;
 		/** Optional header content (e.g., mode selector) */
 		header?: Snippet;
+		/** Optional footer content (e.g., a11y toggles) */
+		footer?: Snippet;
 	}
 
 	let {
@@ -21,6 +23,7 @@
 		isOpen = false,
 		onToggle,
 		header,
+		footer,
 	}: Props = $props();
 
 	let internalOpen = $state(false);
@@ -248,6 +251,13 @@
 					{/if}
 				{/if}
 			{/each}
+
+			<!-- Optional footer (e.g., a11y toggles) -->
+			{#if footer}
+				<div class="dropdown-footer">
+					{@render footer()}
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -487,4 +497,34 @@
 		flex: 1;
 		text-align: left;
 	}
+
+	/* Footer for custom content (e.g., a11y toggles) */
+	.dropdown-footer {
+		animation: fanIn 0.15s ease-out forwards;
+		opacity: 0;
+		transform: translateY(10px);
+		position: relative;
+		z-index: 1;
+		margin-top: 0.25rem;
+		padding-top: 0.5rem;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .dropdown-footer {
+		border-top-color: rgba(255, 255, 255, 0.15);
+	}
+
+	.fan-up .dropdown-footer {
+		transform: translateY(-10px);
+		margin-top: 0;
+		margin-bottom: 0.25rem;
+		padding-top: 0;
+		padding-bottom: 0.5rem;
+		border-top: none;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.dark) .fan-up .dropdown-footer {
+		border-bottom-color: rgba(255, 255, 255, 0.15);
+	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index e62ace379..9b3339ccb 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -120,6 +120,17 @@
 		allAppsHref?: string;
 		/** All Apps label (default: "Alle Apps") */
 		allAppsLabel?: string;
+		// A11y Settings
+		/** A11y contrast level */
+		a11yContrast?: 'normal' | 'high';
+		/** Called when a11y contrast changes */
+		onA11yContrastChange?: (contrast: 'normal' | 'high') => void;
+		/** A11y reduce motion setting */
+		a11yReduceMotion?: boolean;
+		/** Called when a11y reduce motion changes */
+		onA11yReduceMotionChange?: (reduce: boolean) => void;
+		/** Show a11y quick toggles in theme dropdown */
+		showA11yQuickToggles?: boolean;
 	}
 
 	let {
@@ -156,6 +167,11 @@
 		loginHref,
 		allAppsHref,
 		allAppsLabel = 'Alle Apps',
+		a11yContrast = 'normal',
+		onA11yContrastChange,
+		a11yReduceMotion = false,
+		onA11yReduceMotionChange,
+		showA11yQuickToggles = false,
 	}: Props = $props();
 
 	// Type guards for elements
@@ -241,6 +257,10 @@
 	// Icon SVG paths
 	const icons: Record<string, string> = {
 		mic: 'M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z',
+		calendar:
+			'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+		folder:
+			'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z',
 		archive: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4',
 		upload: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12',
 		music:
@@ -447,6 +467,44 @@
 							</button>
 						</div>
 					{/snippet}
+					{#snippet footer()}
+						{#if showA11yQuickToggles}
+							<div class="a11y-quick-toggles glass-pill">
+								<!-- Contrast Toggle -->
+								<button
+									type="button"
+									onclick={() => onA11yContrastChange?.(a11yContrast === 'high' ? 'normal' : 'high')}
+									class="a11y-btn"
+									class:active={a11yContrast === 'high'}
+									title="Hoher Kontrast"
+									aria-pressed={a11yContrast === 'high'}
+								>
+									<svg class="a11y-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<circle cx="12" cy="12" r="10" />
+										<path d="M12 2v20M12 2a10 10 0 0 1 0 20" fill="currentColor" />
+									</svg>
+								</button>
+								<!-- Reduce Motion Toggle -->
+								<button
+									type="button"
+									onclick={() => onA11yReduceMotionChange?.(!a11yReduceMotion)}
+									class="a11y-btn"
+									class:active={a11yReduceMotion}
+									title="Animationen reduzieren"
+									aria-pressed={a11yReduceMotion}
+								>
+									<svg class="a11y-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										{#if a11yReduceMotion}
+											<rect x="6" y="4" width="4" height="16" rx="1" />
+											<rect x="14" y="4" width="4" height="16" rx="1" />
+										{:else}
+											<polygon points="5 3 19 12 5 21 5 3" />
+										{/if}
+									</svg>
+								</button>
+							</div>
+						{/if}
+					{/snippet}
 				</PillDropdown>
 			{/if}
 
@@ -1167,4 +1225,71 @@
 		width: 1rem;
 		height: 1rem;
 	}
+
+	/* A11y quick toggles in dropdown footer */
+	:global(.a11y-quick-toggles) {
+		display: flex !important;
+		align-items: center !important;
+		gap: 0.25rem !important;
+		padding: 0.25rem !important;
+		border-radius: 9999px !important;
+		background: rgba(245, 245, 245, 0.95) !important;
+		border: 1px solid rgba(0, 0, 0, 0.1) !important;
+		color: #374151 !important;
+	}
+
+	:global(.dark .a11y-quick-toggles) {
+		background: rgba(40, 40, 40, 0.95) !important;
+		border: 1px solid rgba(255, 255, 255, 0.15) !important;
+		color: #f3f4f6 !important;
+	}
+
+	:global(.a11y-btn) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem;
+		border: none;
+		background: transparent;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: #6b7280;
+		transition: all 0.15s;
+	}
+
+	:global(.dark .a11y-btn) {
+		color: #9ca3af;
+	}
+
+	:global(.a11y-btn:hover:not(.active)) {
+		background: rgba(0, 0, 0, 0.05);
+		color: #374151;
+	}
+
+	:global(.dark .a11y-btn:hover:not(.active)) {
+		background: rgba(255, 255, 255, 0.1);
+		color: #f3f4f6;
+	}
+
+	:global(.a11y-btn.active) {
+		background: color-mix(
+			in srgb,
+			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 20%,
+			white 80%
+		);
+		color: var(--pill-primary-color, var(--color-primary-500, #3b82f6));
+	}
+
+	:global(.dark .a11y-btn.active) {
+		background: color-mix(
+			in srgb,
+			var(--pill-primary-color, var(--color-primary-500, #3b82f6)) 30%,
+			transparent 70%
+		);
+	}
+
+	:global(.a11y-icon) {
+		width: 1rem;
+		height: 1rem;
+	}
 </style>