feat: add streak counter to rosary page

Track daily rosary prayer streaks using localStorage. Shows consecutive
days prayed and disables button if already prayed today.

src/lib/components/StreakCounter.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { browser } from '$app/environment';
+import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
+
+const streak = browser ? getRosaryStreak() : null;
+</script>
+
+<div class="streak-container">
+	<div class="streak-display">
+		<span class="streak-number">{streak?.length ?? 0}</span>
+		<span class="streak-label">Tage</span>
+	</div>
+	<button
+		class="streak-button"
+		onclick={() => streak?.recordPrayer()}
+		disabled={streak?.prayedToday}
+		aria-label="Gebet als gebetet markieren"
+	>
+		{#if streak?.prayedToday}
+			Heute gebetet
+		{:else}
+			Gebetet
+		{/if}
+	</button>
+</div>
+
+<style>
+.streak-container {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+	padding: 1rem 1.5rem;
+	background: var(--nord1);
+	border-radius: 12px;
+	width: fit-content;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-container {
+		background: var(--nord5);
+	}
+}
+
+.streak-display {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.streak-number {
+	font-size: 2.5rem;
+	font-weight: 700;
+	color: var(--nord13);
+	line-height: 1;
+}
+
+.streak-label {
+	font-size: 0.85rem;
+	color: var(--nord4);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-label {
+		color: var(--nord3);
+	}
+}
+
+.streak-button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 8px;
+	background: var(--nord10);
+	color: white;
+	font-size: 1rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.streak-button:hover:not(:disabled) {
+	background: var(--nord9);
+	transform: translateY(-2px);
+}
+
+.streak-button:disabled {
+	background: var(--nord3);
+	cursor: default;
+	opacity: 0.7;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-button:disabled {
+		background: var(--nord4);
+	}
+}
+</style>

src/lib/stores/rosaryStreak.svelte.ts

@@ -0,0 +1,101 @@
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'rosary_streak';
+
+interface StreakData {
+	length: number;
+	lastPrayed: string | null; // ISO date string (YYYY-MM-DD)
+}
+
+function getToday(): string {
+	return new Date().toISOString().split('T')[0];
+}
+
+function isYesterday(dateStr: string): boolean {
+	const yesterday = new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+	return dateStr === yesterday.toISOString().split('T')[0];
+}
+
+function loadFromStorage(): StreakData {
+	if (!browser) return { length: 0, lastPrayed: null };
+
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			return JSON.parse(stored);
+		}
+	} catch {
+		// Invalid data, return default
+	}
+	return { length: 0, lastPrayed: null };
+}
+
+function saveToStorage(data: StreakData): void {
+	if (!browser) return;
+	localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}
+
+class RosaryStreakStore {
+	#length = $state(0);
+	#lastPrayed = $state<string | null>(null);
+	#initialized = false;
+
+	constructor() {
+		if (browser) {
+			this.#init();
+		}
+	}
+
+	#init() {
+		if (this.#initialized) return;
+		const data = loadFromStorage();
+		this.#length = data.length;
+		this.#lastPrayed = data.lastPrayed;
+		this.#initialized = true;
+	}
+
+	get length() {
+		return this.#length;
+	}
+
+	get lastPrayed() {
+		return this.#lastPrayed;
+	}
+
+	get prayedToday(): boolean {
+		return this.#lastPrayed === getToday();
+	}
+
+	recordPrayer(): void {
+		const today = getToday();
+
+		// Already prayed today - no change
+		if (this.#lastPrayed === today) {
+			return;
+		}
+
+		// Determine new streak length
+		let newLength: number;
+		if (this.#lastPrayed && isYesterday(this.#lastPrayed)) {
+			// Continuing streak from yesterday
+			newLength = this.#length + 1;
+		} else {
+			// Starting new streak (either first time or gap > 1 day)
+			newLength = 1;
+		}
+
+		this.#length = newLength;
+		this.#lastPrayed = today;
+		saveToStorage({ length: newLength, lastPrayed: today });
+	}
+}
+
+let instance: RosaryStreakStore | null = null;
+
+export function getRosaryStreak(): RosaryStreakStore {
+	if (!instance) {
+		instance = new RosaryStreakStore();
+	}
+	return instance;
+}