feat: enhance interactive rosary with mobile support and counters

- Add weekday-based mystery auto-selection with luminous mysteries toggle
- Implement iOS-style toggle for including/excluding luminous mysteries
- Add mystery selector buttons with visual feedback
- Create CounterButton component for tracking Ave Maria progress
- Add orange bead highlighting for prayer counting
- Implement auto-scroll to next section after completing decade
- Optimize mobile layout with responsive sidebar (20px-80px width)
- Scale rosary visualization 3.5x on mobile for better visibility
- Fix scroll synchronization accounting for CSS transform scale
- Increase cross size for better visibility
- Extract BenedictusMedal as reusable component
- Add smooth scroll polyfills for better browser compatibility
- Improve SVG interaction with click handlers and scroll locking

src/lib/components/CounterButton.svelte

@@ -0,0 +1,62 @@
+<script>
+export let onClick;
+</script>
+
+<button class="counter-button" on:click={onClick} aria-label="Nächstes Ave Maria">
+	<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path d="M12 4V2.21c0-.45-.54-.67-.85-.35l-2.8 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.32.31.86.09.86-.36V6c3.31 0 6 2.69 6 6 0 .79-.15 1.56-.44 2.25-.15.36-.04.77.23 1.04.51.51 1.37.33 1.64-.34.37-.91.57-1.91.57-2.95 0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-.79.15-1.56.44-2.25.15-.36.04-.77-.23-1.04-.51-.51-1.37-.33-1.64.34C4.2 9.96 4 10.96 4 12c0 4.42 3.58 8 8 8v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V18z"/>
+	</svg>
+</button>
+
+<style>
+.counter-button {
+	position: absolute;
+	bottom: 0.5rem;
+	right: 0.5rem;
+	width: 3rem;
+	height: 3rem;
+	border-radius: 50%;
+	background: var(--nord1);
+	border: 2px solid var(--nord9);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s ease;
+}
+
+@media(prefers-color-scheme: light) {
+	.counter-button {
+		background: var(--nord5);
+		border-color: var(--nord10);
+	}
+}
+
+.counter-button:hover {
+	background: var(--nord2);
+	transform: scale(1.1);
+}
+
+@media(prefers-color-scheme: light) {
+	.counter-button:hover {
+		background: var(--nord4);
+	}
+}
+
+.counter-button svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	fill: var(--nord9);
+	transition: transform 0.3s ease;
+}
+
+@media(prefers-color-scheme: light) {
+	.counter-button svg {
+		fill: var(--nord10);
+	}
+}
+
+.counter-button:hover svg {
+	transform: rotate(180deg);
+}
+</style>