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>

packages/shared-auth-ui/src/index.ts

@@ -12,6 +12,7 @@ export { default as PasskeyManager } from './components/PasskeyManager.svelte';
 export { default as TwoFactorSetup } from './components/TwoFactorSetup.svelte';
 export { default as SecurityOnboarding } from './components/SecurityOnboarding.svelte';
 export { default as ChangePassword } from './components/ChangePassword.svelte';
+export { default as PasswordStrength } from './components/PasswordStrength.svelte';
 export { default as AuditLog } from './components/AuditLog.svelte';
 
 // Utilities

packages/shared-auth-ui/src/pages/LoginPage.svelte

@@ -88,6 +88,7 @@
 		passkeyAvailable?: boolean;
 		onVerifyTwoFactor?: (code: string, trustDevice?: boolean) => Promise<AuthResult>;
 		onVerifyBackupCode?: (code: string) => Promise<AuthResult>;
+		onSendMagicLink?: (email: string) => Promise<AuthResult>;
 	}
 
 	let {
@@ -114,6 +115,7 @@
 		passkeyAvailable = false,
 		onVerifyTwoFactor,
 		onVerifyBackupCode,
+		onSendMagicLink,
 	}: Props = $props();
 
 	const t = $derived({ ...defaultTranslations, ...translations });
@@ -146,6 +148,8 @@
 	let useBackupCode = $state(false);
 	let trustDevice = $state(false);
 	let rateLimitCountdown = $state(0);
+	let magicLinkSent = $state(false);
+	let sendingMagicLink = $state(false);
 
 	$effect(() => {
 		if (rateLimitCountdown > 0) {
@@ -336,6 +340,26 @@
 		}
 	}
 
+	async function handleSendMagicLink() {
+		if (!onSendMagicLink || !email) return;
+		if (!isValidEmail(email)) {
+			setError(t.emailInvalid, 'email');
+			return;
+		}
+		sendingMagicLink = true;
+		clearError();
+		magicLinkSent = false;
+
+		const result = await onSendMagicLink(email);
+		sendingMagicLink = false;
+
+		if (result.success) {
+			magicLinkSent = true;
+		} else {
+			setError(result.error || t.signInFailed, 'general');
+		}
+	}
+
 	function skipToForm() {
 		if (emailInput) emailInput.focus();
 	}
@@ -702,6 +726,33 @@
 						</button>
 					</form>
 
+					{#if onSendMagicLink}
+						{#if magicLinkSent}
+							<div class="verified-banner" role="status" aria-live="polite">
+								<Check size={18} class="text-green-500 shrink-0" />
+								<p>Login-Link an {email} gesendet!</p>
+								<button
+									type="button"
+									class="verified-banner-close"
+									onclick={() => (magicLinkSent = false)}
+									aria-label="Close"
+								>
+									&times;
+								</button>
+							</div>
+						{:else}
+							<button
+								type="button"
+								onclick={handleSendMagicLink}
+								disabled={sendingMagicLink || !email}
+								class="magic-link-button"
+								style:color={primaryColor}
+							>
+								{sendingMagicLink ? 'Wird gesendet...' : 'Login-Link per E-Mail senden'}
+							</button>
+						{/if}
+					{/if}
+
 					<p class="register-link">
 						{t.noAccount}
 						<button type="button" onclick={() => goto(registerPath)} style:color={primaryColor}>
@@ -1203,6 +1254,27 @@
 		color: rgba(0, 0, 0, 0.5);
 	}
 
+	.magic-link-button {
+		width: 100%;
+		background: none;
+		border: none;
+		cursor: pointer;
+		font-weight: 500;
+		font-size: 0.875rem;
+		padding: 0.75rem;
+		text-align: center;
+		transition: opacity 0.2s;
+	}
+
+	.magic-link-button:hover:not(:disabled) {
+		opacity: 0.7;
+	}
+
+	.magic-link-button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
 	.register-link {
 		text-align: center;
 		font-size: 0.875rem;

packages/shared-auth-ui/src/pages/RegisterPage.svelte

@@ -2,6 +2,7 @@
 	import type { Component } from 'svelte';
 	import type { AuthResult } from '../types';
 	import { Eye, EyeSlash, UserPlus, ArrowLeft, Sun, Moon } from '@manacore/shared-icons';
+	import PasswordStrength from '../components/PasswordStrength.svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -505,6 +506,8 @@
 					</div>
 				</div>
 
+				<PasswordStrength {password} {primaryColor} />
+
 				<div>
 					<div class="relative">
 						<input