feat: consolidate admin features into centralized administration page

- Created administration page at /{recipeLang}/administration accessible only to rezepte_users
- Moved alt-text generator from /admin to /{recipeLang}/admin/alt-text-generator
- Added "Administration" link to user profile dropdown for rezepte_users
- Removed "Unübersetzt" link from main navigation (now accessed via administration page)
- Administration page provides card-based UI with links to:
  - Untranslated Recipes management
  - AI Alt-Text Generator
- Both features now integrated into recipe language routing structure
- Added server-side authentication to all admin routes

src/lib/components/UserHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	let { user } = $props();
+	let { user, recipeLang = 'rezepte', lang = 'de' } = $props();
 
 	function toggle_options(){
 		const el = document.querySelector("#options")
@@ -141,6 +141,9 @@ h2 + p{
 			<h2>{user.name}</h2>
 			<p>({user.nickname})</p>
 			<ul>
+				{#if user.groups?.includes('rezepte_users')}
+					<li><a href="/{recipeLang}/administration">Administration</a></li>
+				{/if}
 				<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
 				<li><a href="/logout" >Log Out</a></li>
 			</ul>

src/routes/[recipeLang=recipeLang]/+layout.svelte

@@ -51,7 +51,7 @@ function isActive(path) {
 	{/snippet}
 
 	{#snippet right_side()}
-		<UserHeader {user}></UserHeader>
+		<UserHeader {user} recipeLang={data.recipeLang} lang={data.lang}></UserHeader>
 	{/snippet}
 
 	{@render children()}

src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, url }) => {
+	const session = await locals.auth();
+
+	// Redirect to login if not authenticated
+	if (!session?.user?.nickname) {
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
+	}
+
+	// Check user group permission
+	if (!session.user.groups?.includes('rezepte_users')) {
+		throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
+	}
+
+	return {
+		user: session.user
+	};
+};

src/routes/[recipeLang=recipeLang]/administration/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, params, url }) => {
+	const session = await locals.auth();
+
+	// Redirect to login if not authenticated
+	if (!session?.user?.nickname) {
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
+	}
+
+	// Check user group permission
+	if (!session.user.groups?.includes('rezepte_users')) {
+		throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
+	}
+
+	return {
+		user: session.user
+	};
+};

src/routes/[recipeLang=recipeLang]/administration/+page.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import '$lib/css/nordtheme.css';
+
+	let { data }: { data: PageData } = $props();
+
+	const isEnglish = data.lang === 'en';
+	const pageTitle = isEnglish ? 'Administration' : 'Administration';
+	const pageDescription = isEnglish
+		? 'Manage recipes and content'
+		: 'Rezepte und Inhalte verwalten';
+
+	const links = [
+		{
+			title: isEnglish ? 'Untranslated Recipes' : 'Unübersetzte Rezepte',
+			description: isEnglish
+				? 'View and manage recipes that need translation'
+				: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
+			href: '/rezepte/untranslated',
+			icon: '🌐'
+		},
+		{
+			title: isEnglish ? 'Alt-Text Generator' : 'Alt-Text Generator',
+			description: isEnglish
+				? 'Generate alternative text for recipe images using AI'
+				: 'Alternativtext für Rezeptbilder mit KI generieren',
+			href: `/${data.recipeLang}/admin/alt-text-generator`,
+			icon: '🖼️'
+		}
+	];
+</script>
+
+<style>
+h1 {
+	text-align: center;
+	margin-bottom: 0;
+	font-size: 4rem;
+}
+.subheading {
+	text-align: center;
+	margin-top: 0;
+	font-size: 1.5rem;
+	color: var(--nord3);
+}
+.admin-container {
+	max-width: 1000px;
+	margin: 2rem auto;
+	padding: 1.5rem;
+}
+.admin-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-top: 2rem;
+}
+.admin-card {
+	background: var(--nord1);
+	border-radius: 8px;
+	padding: 2rem;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	transition: transform 200ms, box-shadow 200ms;
+	text-decoration: none;
+	color: inherit;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+.admin-card:hover,
+.admin-card:focus {
+	transform: translateY(-4px);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	background: hsl(from var(--nord1) h calc(s * 1.1) calc(l * 1.05));
+}
+.admin-card-icon {
+	font-size: 3rem;
+	text-align: center;
+}
+.admin-card-title {
+	font-size: 1.5rem;
+	font-weight: bold;
+	margin: 0;
+	text-align: center;
+}
+.admin-card-description {
+	font-size: 1rem;
+	color: var(--nord4);
+	text-align: center;
+	margin: 0;
+}
+@media(prefers-color-scheme: light) {
+	.admin-card {
+		background: var(--nord6);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+	.admin-card:hover,
+	.admin-card:focus {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
+	}
+	.admin-card-description {
+		color: var(--nord2);
+	}
+	.subheading {
+		color: var(--nord2);
+	}
+}
+</style>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>
+
+<h1>{pageTitle}</h1>
+<p class="subheading">{pageDescription}</p>
+
+<div class="admin-container">
+	<div class="admin-grid">
+		{#each links as link (link.href)}
+			<a href={link.href} class="admin-card">
+				<div class="admin-card-icon">{link.icon}</div>
+				<h2 class="admin-card-title">{link.title}</h2>
+				<p class="admin-card-description">{link.description}</p>
+			</a>
+		{/each}
+	</div>
+</div>

src/routes/rezepte/+layout.svelte

@@ -24,9 +24,6 @@
 			<li><a href="/rezepte/category" class:active={isActive('/rezepte/category')}>Kategorie</a></li>
 			<li><a href="/rezepte/icon" class:active={isActive('/rezepte/icon')}>Icon</a></li>
 			<li><a href="/rezepte/tag" class:active={isActive('/rezepte/tag')}>Tags</a></li>
-			{#if user?.groups?.includes('rezepte_users')}
-				<li><a href="/rezepte/untranslated" class:active={isActive('/rezepte/untranslated')}>Unübersetzt</a></li>
-			{/if}
 		</ul>
 	{/snippet}
 
@@ -39,7 +36,7 @@
 	{/snippet}
 
 	{#snippet right_side()}
-		<UserHeader {user}></UserHeader>
+		<UserHeader {user} recipeLang="rezepte" lang="de"></UserHeader>
 	{/snippet}
 
 	{@render children()}