feat(auth): add password strength indicator and magic links

Password strength (zxcvbn-ts):
- PasswordStrength component with 4-segment color bar and German feedback
- Lazy-loaded with 150ms debounce to avoid SSR/bundle issues
- Integrated into RegisterPage and ChangePassword components

Magic Links (passwordless email):
- Better Auth magicLink plugin (10-minute expiry)
- sendMagicLinkEmail() in email service (German template)
- Passthrough route for /magic-link/* endpoints
- sendMagicLink() in shared-auth client
- "Login-Link per E-Mail senden" button on all 20 login pages
- All 21 auth stores have sendMagicLink() method

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/shared-auth-ui/src/components/ChangePassword.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Eye, EyeSlash } from '@manacore/shared-icons';
+	import PasswordStrength from './PasswordStrength.svelte';
 
 	interface Props {
 		onChangePassword: (
@@ -138,6 +139,8 @@
 			{/if}
 		</div>
 
+		<PasswordStrength password={newPassword} {primaryColor} />
+
 		<div class="input-group">
 			<label for="confirm-password" class="input-label">Neues Passwort bestätigen</label>
 			<div class="input-wrapper">

packages/shared-auth-ui/src/components/PasswordStrength.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	let initialized = false;
+	let zxcvbnFn: any = null;
+
+	interface Props {
+		password: string;
+		primaryColor?: string;
+	}
+
+	let { password, primaryColor = '#6366f1' }: Props = $props();
+
+	let score = $state(0);
+	let feedback = $state('');
+	let debounceTimer: ReturnType<typeof setTimeout>;
+
+	async function initZxcvbn() {
+		if (initialized) return;
+		const [{ zxcvbn, zxcvbnOptions }, common, de] = await Promise.all([
+			import('@zxcvbn-ts/core'),
+			import('@zxcvbn-ts/language-common'),
+			import('@zxcvbn-ts/language-de'),
+		]);
+		zxcvbnOptions.setOptions({
+			translations: de.translations,
+			graphs: common.adjacencyGraphs,
+			dictionary: { ...common.dictionary, ...de.dictionary },
+		});
+		zxcvbnFn = zxcvbn;
+		initialized = true;
+	}
+
+	const labels = ['Sehr schwach', 'Schwach', 'OK', 'Stark', 'Sehr stark'];
+	const colors = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e'];
+
+	$effect(() => {
+		if (!password) {
+			score = 0;
+			feedback = '';
+			return;
+		}
+
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(async () => {
+			await initZxcvbn();
+			if (zxcvbnFn && password) {
+				const result = zxcvbnFn(password);
+				score = result.score;
+				const suggestions = result.feedback.suggestions || [];
+				const warning = result.feedback.warning || '';
+				feedback = warning || suggestions[0] || '';
+			}
+		}, 150);
+	});
+</script>
+
+{#if password}
+	<div class="strength-container">
+		<div class="strength-bar">
+			{#each [0, 1, 2, 3] as i}
+				<div
+					class="strength-segment"
+					style:background-color={i <= score - 1 ? colors[score] : 'rgba(128,128,128,0.2)'}
+				></div>
+			{/each}
+		</div>
+		<span class="strength-label" style:color={colors[score]}>{labels[score]}</span>
+		{#if feedback}
+			<p class="strength-feedback">{feedback}</p>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.strength-container {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.strength-bar {
+		display: flex;
+		gap: 4px;
+		height: 4px;
+		margin-bottom: 0.375rem;
+	}
+
+	.strength-segment {
+		flex: 1;
+		border-radius: 2px;
+		transition: background-color 0.3s;
+	}
+
+	.strength-label {
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+
+	.strength-feedback {
+		font-size: 0.75rem;
+		color: rgba(156, 163, 175, 0.8);
+		margin-top: 0.25rem;
+	}
+</style>