feat: add nutrition/food logging to fitness section

Daily food log with calorie and macro tracking against configurable diet
goals (presets: WHO balanced, cut, bulk, keto, etc.). Includes USDA/BLS
food search with portion-based units, favorite ingredients, custom
reusable meals, per-food micronutrient detail pages, and recipe-to-log
integration via AddToFoodLogButton. Extends FitnessGoal with nutrition
targets and adds birth year to user profile for BMR calculation.

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

@@ -281,7 +281,6 @@ h2{
 @keyframes slide-down {
 	to { transform: translateY(var(--title-slide, 100vh)); }
 }
-
 </style>
 <svelte:head>
 	<title>{data.strippedName} - {labels.title}</title>

src/routes/api/fitness/custom-meals/+server.ts

@@ -0,0 +1,32 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { CustomMeal } from '$models/CustomMeal';
+
+export const GET: RequestHandler = async ({ locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const meals = await CustomMeal.find({ createdBy: user.nickname }).sort({ updatedAt: -1 }).lean();
+	return json({ meals });
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const body = await request.json();
+	const { name, ingredients } = body;
+
+	if (!name?.trim()) throw error(400, 'name is required');
+	if (!Array.isArray(ingredients) || ingredients.length === 0) throw error(400, 'At least one ingredient is required');
+
+	const meal = await CustomMeal.create({
+		name: name.trim(),
+		ingredients,
+		createdBy: user.nickname,
+	});
+
+	return json(meal.toObject(), { status: 201 });
+};

src/routes/api/fitness/custom-meals/[id]/+server.ts

@@ -0,0 +1,39 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { CustomMeal } from '$models/CustomMeal';
+
+export const PUT: RequestHandler = async ({ params, request, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const meal = await CustomMeal.findById(params.id);
+	if (!meal) throw error(404, 'Meal not found');
+	if (meal.createdBy !== user.nickname) throw error(403, 'Not authorized');
+
+	const body = await request.json();
+	if (body.name !== undefined) {
+		if (!body.name?.trim()) throw error(400, 'name cannot be empty');
+		meal.name = body.name.trim();
+	}
+	if (body.ingredients !== undefined) {
+		if (!Array.isArray(body.ingredients) || body.ingredients.length === 0) throw error(400, 'At least one ingredient is required');
+		meal.ingredients = body.ingredients;
+	}
+
+	await meal.save();
+	return json(meal.toObject());
+};
+
+export const DELETE: RequestHandler = async ({ params, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const deleted = await CustomMeal.findOneAndDelete({
+		_id: params.id,
+		createdBy: user.nickname,
+	});
+	if (!deleted) throw error(404, 'Meal not found');
+	return json({ ok: true });
+};

src/routes/api/fitness/favorite-ingredients/+server.ts

@@ -0,0 +1,54 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { FavoriteIngredient } from '$models/FavoriteIngredient';
+
+export const GET: RequestHandler = async ({ locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const favorites = await FavoriteIngredient.find({ createdBy: user.nickname }).lean();
+	return json({ favorites });
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const user = await requireAuth(locals);
+	const { source, sourceId, name } = await request.json();
+
+	if (!source || !sourceId || !name) {
+		return json({ error: 'source, sourceId, and name are required' }, { status: 400 });
+	}
+	if (source !== 'bls' && source !== 'usda') {
+		return json({ error: 'source must be "bls" or "usda"' }, { status: 400 });
+	}
+
+	await dbConnect();
+
+	await FavoriteIngredient.findOneAndUpdate(
+		{ createdBy: user.nickname, source, sourceId: String(sourceId) },
+		{ createdBy: user.nickname, source, sourceId: String(sourceId), name },
+		{ upsert: true, new: true }
+	);
+
+	return json({ ok: true }, { status: 201 });
+};
+
+export const DELETE: RequestHandler = async ({ request, locals }) => {
+	const user = await requireAuth(locals);
+	const { source, sourceId } = await request.json();
+
+	if (!source || !sourceId) {
+		return json({ error: 'source and sourceId are required' }, { status: 400 });
+	}
+
+	await dbConnect();
+
+	await FavoriteIngredient.deleteOne({
+		createdBy: user.nickname,
+		source,
+		sourceId: String(sourceId),
+	});
+
+	return json({ ok: true });
+};

src/routes/api/fitness/food-log/+server.ts

@@ -0,0 +1,62 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { FoodLogEntry } from '$models/FoodLogEntry';
+
+const VALID_MEALS = ['breakfast', 'lunch', 'dinner', 'snack'];
+
+export const GET: RequestHandler = async ({ locals, url }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const dateParam = url.searchParams.get('date');
+	const from = url.searchParams.get('from');
+	const to = url.searchParams.get('to');
+
+	const query: Record<string, any> = { createdBy: user.nickname };
+
+	if (dateParam) {
+		const d = new Date(dateParam + 'T00:00:00.000Z');
+		const next = new Date(d);
+		next.setUTCDate(next.getUTCDate() + 1);
+		query.date = { $gte: d, $lt: next };
+	} else if (from || to) {
+		query.date = {};
+		if (from) query.date.$gte = new Date(from + 'T00:00:00.000Z');
+		if (to) {
+			const t = new Date(to + 'T00:00:00.000Z');
+			t.setUTCDate(t.getUTCDate() + 1);
+			query.date.$lt = t;
+		}
+	}
+
+	const entries = await FoodLogEntry.find(query).sort({ date: -1, mealType: 1 }).lean();
+	return json({ entries });
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const body = await request.json();
+	const { date, mealType, name, source, sourceId, amountGrams, per100g } = body;
+
+	if (!date || !name?.trim()) throw error(400, 'date and name are required');
+	if (!VALID_MEALS.includes(mealType)) throw error(400, 'Invalid mealType');
+	if (typeof amountGrams !== 'number' || amountGrams <= 0) throw error(400, 'amountGrams must be positive');
+	if (!per100g || typeof per100g.calories !== 'number') throw error(400, 'per100g with calories is required');
+
+	const entry = await FoodLogEntry.create({
+		date: new Date(date + 'T00:00:00.000Z'),
+		mealType,
+		name: name.trim(),
+		source: source || 'custom',
+		sourceId,
+		amountGrams,
+		per100g,
+		createdBy: user.nickname,
+	});
+
+	return json(entry.toObject(), { status: 201 });
+};

src/routes/api/fitness/food-log/[id]/+server.ts

@@ -0,0 +1,35 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { FoodLogEntry } from '$models/FoodLogEntry';
+
+export const PUT: RequestHandler = async ({ params, request, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const entry = await FoodLogEntry.findById(params.id);
+	if (!entry) throw error(404, 'Entry not found');
+	if (entry.createdBy !== user.nickname) throw error(403, 'Not authorized');
+
+	const body = await request.json();
+	const allowed = ['amountGrams', 'mealType', 'name'] as const;
+	for (const key of allowed) {
+		if (body[key] !== undefined) (entry as any)[key] = body[key];
+	}
+
+	await entry.save();
+	return json(entry.toObject());
+};
+
+export const DELETE: RequestHandler = async ({ params, locals }) => {
+	const user = await requireAuth(locals);
+	await dbConnect();
+
+	const deleted = await FoodLogEntry.findOneAndDelete({
+		_id: params.id,
+		createdBy: user.nickname,
+	});
+	if (!deleted) throw error(404, 'Entry not found');
+	return json({ ok: true });
+};

src/routes/api/fitness/goal/+server.ts

@@ -12,13 +12,22 @@ export const GET: RequestHandler = async ({ locals }) => {
 	const goal = await FitnessGoal.findOne({ username: user.nickname }).lean() as any;
 	const weeklyWorkouts = goal?.weeklyWorkouts ?? null;
 
+	const nutritionGoals = {
+		activityLevel: goal?.activityLevel ?? 'light',
+		dailyCalories: goal?.dailyCalories ?? null,
+		proteinMode: goal?.proteinMode ?? null,
+		proteinTarget: goal?.proteinTarget ?? null,
+		fatPercent: goal?.fatPercent ?? null,
+		carbPercent: goal?.carbPercent ?? null,
+	};
+
 	// If no goal set, return early
 	if (weeklyWorkouts === null) {
-		return json({ weeklyWorkouts: null, streak: 0, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
+		return json({ weeklyWorkouts: null, streak: 0, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null, ...nutritionGoals });
 	}
 
 	const streak = await computeStreak(user.nickname, weeklyWorkouts);
-	return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
+	return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null, ...nutritionGoals });
 };
 
 export const PUT: RequestHandler = async ({ request, locals }) => {
@@ -33,6 +42,14 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 	const update: Record<string, unknown> = { weeklyWorkouts };
 	if (sex === 'male' || sex === 'female') update.sex = sex;
 	if (typeof heightCm === 'number' && heightCm >= 100 && heightCm <= 250) update.heightCm = heightCm;
+	if (typeof body.birthYear === 'number' && body.birthYear >= 1900 && body.birthYear <= 2020) update.birthYear = body.birthYear;
+	const validActivity = ['sedentary', 'light', 'moderate', 'very_active'];
+	if (validActivity.includes(body.activityLevel)) update.activityLevel = body.activityLevel;
+	if (typeof body.dailyCalories === 'number' && body.dailyCalories >= 500 && body.dailyCalories <= 10000) update.dailyCalories = body.dailyCalories;
+	if (body.proteinMode === 'fixed' || body.proteinMode === 'per_kg') update.proteinMode = body.proteinMode;
+	if (typeof body.proteinTarget === 'number' && body.proteinTarget >= 0) update.proteinTarget = body.proteinTarget;
+	if (typeof body.fatPercent === 'number' && body.fatPercent >= 0 && body.fatPercent <= 100) update.fatPercent = body.fatPercent;
+	if (typeof body.carbPercent === 'number' && body.carbPercent >= 0 && body.carbPercent <= 100) update.carbPercent = body.carbPercent;
 
 	await dbConnect();
 
@@ -43,7 +60,16 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 	).lean() as any;
 
 	const streak = await computeStreak(user.nickname, weeklyWorkouts);
-	return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
+	return json({
+		weeklyWorkouts, streak,
+		sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null,
+		activityLevel: goal?.activityLevel ?? 'light',
+		dailyCalories: goal?.dailyCalories ?? null,
+		proteinMode: goal?.proteinMode ?? null,
+		proteinTarget: goal?.proteinTarget ?? null,
+		fatPercent: goal?.fatPercent ?? null,
+		carbPercent: goal?.carbPercent ?? null,
+	});
 };
 
 async function computeStreak(username: string, weeklyGoal: number): Promise<number> {

src/routes/api/nutrition/search/+server.ts

@@ -2,13 +2,73 @@ import { json, type RequestHandler } from '@sveltejs/kit';
 import { NUTRITION_DB } from '$lib/data/nutritionDb';
 import { BLS_DB } from '$lib/data/blsDb';
 import { fuzzyScore } from '$lib/js/fuzzy';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { FavoriteIngredient } from '$models/FavoriteIngredient';
+
+type SearchResult = { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number; favorited?: boolean; per100g?: any; portions?: any[] };
+
+function lookupBls(blsCode: string, full: boolean): SearchResult | null {
+	const entry = BLS_DB.find(e => e.blsCode === blsCode);
+	if (!entry) return null;
+	return {
+		source: 'bls',
+		id: entry.blsCode,
+		name: `${entry.nameDe}${entry.nameEn ? ` (${entry.nameEn})` : ''}`,
+		category: entry.category,
+		calories: entry.per100g.calories,
+		...(full && { per100g: entry.per100g }),
+	};
+}
+
+function lookupUsda(fdcId: string, full: boolean): SearchResult | null {
+	const entry = NUTRITION_DB.find(e => String(e.fdcId) === fdcId);
+	if (!entry) return null;
+	return {
+		source: 'usda',
+		id: String(entry.fdcId),
+		name: entry.name,
+		category: entry.category,
+		calories: entry.per100g.calories,
+		...(full && { per100g: entry.per100g, portions: entry.portions }),
+	};
+}
 
 /** GET: Search BLS + USDA nutrition databases by fuzzy name match */
-export const GET: RequestHandler = async ({ url }) => {
+export const GET: RequestHandler = async ({ url, locals }) => {
 	const q = (url.searchParams.get('q') || '').toLowerCase().trim();
 	if (q.length < 2) return json([]);
 
-	const scored: { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number; score: number }[] = [];
+	const full = url.searchParams.get('full') === 'true';
+	const wantFavorites = url.searchParams.get('favorites') === 'true';
+
+	// Optionally load user favorites
+	let favResults: SearchResult[] = [];
+	let favKeys = new Set<string>();
+
+	if (wantFavorites) {
+		try {
+			const user = await requireAuth(locals);
+			await dbConnect();
+			const favDocs = await FavoriteIngredient.find({ createdBy: user.nickname }).lean();
+
+			for (const fav of favDocs) {
+				const key = `${fav.source}:${fav.sourceId}`;
+				const result = fav.source === 'bls'
+					? lookupBls(fav.sourceId, full)
+					: lookupUsda(fav.sourceId, full);
+				if (result) {
+					result.favorited = true;
+					favResults.push(result);
+					favKeys.add(key);
+				}
+			}
+		} catch {
+			// Not authenticated or DB error — ignore, just return normal results
+		}
+	}
+
+	const scored: (SearchResult & { score: number })[] = [];
 
 	// Search BLS (primary)
 	for (const entry of BLS_DB) {
@@ -23,6 +83,8 @@ export const GET: RequestHandler = async ({ url }) => {
 				category: entry.category,
 				calories: entry.per100g.calories,
 				score: best,
+				...(full && { per100g: entry.per100g }),
+				...(favKeys.has(`bls:${entry.blsCode}`) && { favorited: true }),
 			});
 		}
 	}
@@ -38,11 +100,22 @@ export const GET: RequestHandler = async ({ url }) => {
 				category: entry.category,
 				calories: entry.per100g.calories,
 				score: s,
+				...(full && { per100g: entry.per100g, portions: entry.portions }),
+				...(favKeys.has(`usda:${entry.fdcId}`) && { favorited: true }),
 			});
 		}
 	}
 
 	// Sort by score descending, return top 30 (without score field)
 	scored.sort((a, b) => b.score - a.score);
-	return json(scored.slice(0, 30).map(({ score, ...rest }) => rest));
+	const searchResults = scored.slice(0, 30).map(({ score, ...rest }) => rest);
+
+	// Prepend favorites, deduplicating
+	if (favResults.length > 0) {
+		const searchKeys = new Set(searchResults.map(r => `${r.source}:${r.id}`));
+		const uniqueFavs = favResults.filter(f => !searchKeys.has(`${f.source}:${f.id}`));
+		return json([...uniqueFavs, ...searchResults]);
+	}
+
+	return json(searchResults);
 };

src/routes/fitness/+layout.svelte

@@ -4,7 +4,7 @@
 	import Header from '$lib/components/Header.svelte';
 	import UserHeader from '$lib/components/UserHeader.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { BarChart3, Clock, Dumbbell, ListChecks, Ruler } from 'lucide-svelte';
+	import { BarChart3, Clock, Dumbbell, ListChecks, Ruler, UtensilsCrossed } from 'lucide-svelte';
 	import { getWorkout } from '$lib/js/workout.svelte';
 	import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
 	import WorkoutFab from '$lib/components/fitness/WorkoutFab.svelte';
@@ -27,7 +27,8 @@
 		const slugs = [
 			'workout', 'training', 'workout/active', 'training/aktiv',
 			'exercises', 'uebungen', 'stats', 'statistik',
-			'history', 'verlauf', 'measure', 'messen'
+			'history', 'verlauf', 'measure', 'messen',
+			'nutrition', 'ernaehrung'
 		];
 		const urls = slugs.map((s) => `/fitness/${s}`);
 		navigator.serviceWorker.controller.postMessage({ type: 'CACHE_PAGES', urls });
@@ -79,6 +80,7 @@
 			<li style="--active-fill: var(--nord8)"><a href="/fitness/{s.workout}" class:active={isActive(`/fitness/${s.workout}`)}><Dumbbell size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.workout}</span></a></li>
 			<li style="--active-fill: var(--nord14)"><a href="/fitness/{s.exercises}" class:active={isActive(`/fitness/${s.exercises}`)}><ListChecks size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.exercises}</span></a></li>
 			<li style="--active-fill: var(--nord12)"><a href="/fitness/{s.measure}" class:active={isActive(`/fitness/${s.measure}`)}><Ruler size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.measure}</span></a></li>
+			<li style="--active-fill: var(--nord15)"><a href="/fitness/{s.nutrition}" class:active={isActive(`/fitness/${s.nutrition}`)}><UtensilsCrossed size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.nutrition}</span></a></li>
 		</ul>
 	{/snippet}
 

src/routes/fitness/[measure=fitnessMeasure]/+page.svelte

@@ -15,14 +15,16 @@
 	let latest = $state(data.latest ? { ...data.latest } : {});
 	let measurements = $state(data.measurements?.measurements ? [...data.measurements.measurements] : []);
 
-	// Profile fields (sex, height) — stored in FitnessGoal
+	// Profile fields (sex, height, birth year) — stored in FitnessGoal
 	let showProfile = $state(false);
 	let profileSex = $state(data.profile?.sex ?? 'male');
 	let profileHeight = $state(data.profile?.heightCm != null ? String(data.profile.heightCm) : '');
+	let profileBirthYear = $state(data.profile?.birthYear != null ? String(data.profile.birthYear) : '');
 	let profileSaving = $state(false);
 	let profileDirty = $derived(
 		profileSex !== (data.profile?.sex ?? 'male') ||
-		profileHeight !== (data.profile?.heightCm != null ? String(data.profile.heightCm) : '')
+		profileHeight !== (data.profile?.heightCm != null ? String(data.profile.heightCm) : '') ||
+		profileBirthYear !== (data.profile?.birthYear != null ? String(data.profile.birthYear) : '')
 	);
 
 	async function saveProfile() {
@@ -35,6 +37,8 @@
 			};
 			const h = Number(profileHeight);
 			if (h >= 100 && h <= 250) body.heightCm = h;
+			const by = Number(profileBirthYear);
+			if (by >= 1900 && by <= 2020) body.birthYear = by;
 			const res = await fetch('/api/fitness/goal', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
@@ -123,6 +127,10 @@
 					<label for="p-height">{t('height', lang)}</label>
 					<input id="p-height" type="number" min="100" max="250" placeholder="175" bind:value={profileHeight} />
 				</div>
+				<div class="form-group">
+					<label for="p-birthyear">{t('birth_year', lang)}</label>
+					<input id="p-birthyear" type="number" min="1900" max="2020" placeholder="1990" bind:value={profileBirthYear} />
+				</div>
 				{#if profileDirty}
 					<button class="profile-save-btn" onclick={saveProfile} disabled={profileSaving}>
 						{profileSaving ? t('saving', lang) : t('save', lang)}

src/routes/fitness/[nutrition=fitnessNutrition]/+page.server.ts

@@ -0,0 +1,67 @@
+import type { PageServerLoad } from './$types';
+import { requireAuth } from '$lib/server/middleware/auth';
+import { dbConnect } from '$utils/db';
+import { WorkoutSession } from '$models/WorkoutSession';
+import { Recipe } from '$models/Recipe';
+import mongoose from 'mongoose';
+
+export const load: PageServerLoad = async ({ fetch, url, locals }) => {
+	const dateParam = url.searchParams.get('date') || new Date().toISOString().slice(0, 10);
+
+	const [foodRes, goalRes, weightRes] = await Promise.all([
+		fetch(`/api/fitness/food-log?date=${dateParam}`),
+		fetch('/api/fitness/goal'),
+		fetch('/api/fitness/measurements/latest')
+	]);
+
+	// Fetch today's workout kcal burned
+	let exerciseKcal = 0;
+	try {
+		const user = await requireAuth(locals);
+		await dbConnect();
+		const dayStart = new Date(dateParam + 'T00:00:00.000Z');
+		const dayEnd = new Date(dateParam + 'T23:59:59.999Z');
+		const sessions = await WorkoutSession.find({
+			createdBy: user.nickname,
+			startTime: { $gte: dayStart, $lte: dayEnd }
+		}).select('kcalEstimate').lean();
+
+		for (const s of sessions) {
+			if (s.kcalEstimate?.kcal) exerciseKcal += s.kcalEstimate.kcal;
+		}
+	} catch {}
+
+	const foodLog = foodRes.ok ? await foodRes.json() : { entries: [] };
+
+	// Resolve recipe images for entries with source=recipe
+	const recipeImages: Record<string, string> = {};
+	const recipeIds = foodLog.entries
+		?.filter((e: any) => e.source === 'recipe' && e.sourceId)
+		.map((e: any) => e.sourceId)
+		.filter((id: string) => mongoose.Types.ObjectId.isValid(id));
+
+	if (recipeIds?.length > 0) {
+		try {
+			await dbConnect();
+			const recipes = await Recipe.find(
+				{ _id: { $in: [...new Set(recipeIds)] } },
+				{ _id: 1, short_name: 1, 'images.mediapath': 1 }
+			).lean();
+			for (const r of recipes as any[]) {
+				const mediapath = r.images?.[0]?.mediapath;
+				if (mediapath) {
+					recipeImages[String(r._id)] = `https://bocken.org/static/rezepte/thumb/${mediapath}`;
+				}
+			}
+		} catch {}
+	}
+
+	return {
+		date: dateParam,
+		foodLog,
+		goal: goalRes.ok ? await goalRes.json() : {},
+		latestWeight: weightRes.ok ? await weightRes.json() : {},
+		exerciseKcal: Math.round(exerciseKcal),
+		recipeImages,
+	};
+};

src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.server.ts

@@ -0,0 +1,46 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { NUTRITION_DB } from '$lib/data/nutritionDb';
+import { BLS_DB } from '$lib/data/blsDb';
+import { DRI_MALE } from '$lib/data/dailyReferenceIntake';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const { source, id } = params;
+
+	if (source !== 'bls' && source !== 'usda') {
+		throw error(404, 'Invalid source');
+	}
+
+	if (source === 'bls') {
+		const entry = BLS_DB.find(e => e.blsCode === id);
+		if (!entry) throw error(404, 'Food not found');
+		return {
+			food: {
+				source: 'bls' as const,
+				id: entry.blsCode,
+				name: `${entry.nameDe}${entry.nameEn ? ` (${entry.nameEn})` : ''}`,
+				nameDe: entry.nameDe,
+				nameEn: entry.nameEn,
+				category: entry.category,
+				per100g: entry.per100g,
+			},
+			dri: DRI_MALE,
+		};
+	}
+
+	// USDA
+	const fdcId = Number(id);
+	const entry = NUTRITION_DB.find(e => e.fdcId === fdcId);
+	if (!entry) throw error(404, 'Food not found');
+	return {
+		food: {
+			source: 'usda' as const,
+			id: String(entry.fdcId),
+			name: entry.name,
+			category: entry.category,
+			per100g: entry.per100g,
+			portions: entry.portions,
+		},
+		dri: DRI_MALE,
+	};
+};

src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.svelte

@@ -0,0 +1,658 @@
+<script>
+	import { page } from '$app/stores';
+	import { ChevronLeft, ChevronDown } from 'lucide-svelte';
+	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
+	import { NUTRIENT_META } from '$lib/data/dailyReferenceIntake';
+
+	let { data } = $props();
+
+	const lang = $derived(detectFitnessLang($page.url.pathname));
+	const s = $derived(fitnessSlugs(lang));
+	const isEn = $derived(lang === 'en');
+
+	const food = $derived(data.food);
+	const dri = $derived(data.dri);
+	const n = $derived(food.per100g);
+
+	// --- Portion selector (USDA only) ---
+	let selectedPortionIdx = $state(-1); // -1 = per 100g
+	const portions = $derived(food.portions ?? []);
+	const portionMultiplier = $derived(
+		selectedPortionIdx >= 0 && portions[selectedPortionIdx]
+			? portions[selectedPortionIdx].grams / 100
+			: 1
+	);
+	const portionLabel = $derived(
+		selectedPortionIdx >= 0 && portions[selectedPortionIdx]
+			? `${portions[selectedPortionIdx].description} (${portions[selectedPortionIdx].grams}g)`
+			: isEn ? 'per 100 g' : 'pro 100 g'
+	);
+
+	/** Scale a nutrient value by the selected portion */
+	function scaled(val) {
+		return (val ?? 0) * portionMultiplier;
+	}
+
+	// --- Macro calorie percentages ---
+	const macroPercent = $derived.by(() => {
+		const proteinCal = n.protein * 4;
+		const fatCal = n.fat * 9;
+		const carbsCal = n.carbs * 4;
+		const total = proteinCal + fatCal + carbsCal;
+		if (total === 0) return { protein: 0, fat: 0, carbs: 0 };
+		return {
+			protein: Math.round(proteinCal / total * 100),
+			fat: Math.round(fatCal / total * 100),
+			carbs: 100 - Math.round(proteinCal / total * 100) - Math.round(fatCal / total * 100),
+		};
+	});
+
+	// --- SVG ring constants (same as NutritionSummary) ---
+	const RADIUS = 28;
+	const ARC_DEGREES = 300;
+	const ARC_LENGTH = (ARC_DEGREES / 360) * 2 * Math.PI * RADIUS;
+	const ARC_ROTATE = 120;
+
+	function strokeOffset(percent) {
+		return ARC_LENGTH - (percent / 100) * ARC_LENGTH;
+	}
+
+	// --- Formatting ---
+	function fmt(v) {
+		if (v == null || isNaN(v)) return '0';
+		if (v >= 100) return Math.round(v).toString();
+		if (v >= 10) return v.toFixed(1);
+		return v.toFixed(1);
+	}
+
+	// --- Micronutrient sections ---
+	const mineralKeys = ['calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc'];
+	const vitaminKeys = ['vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK', 'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate'];
+	const otherKeys = ['cholesterol'];
+
+	function mkMicroRows(keys) {
+		return keys.map(k => {
+			const meta = NUTRIENT_META[k];
+			const value = scaled(n[k]);
+			const goal = dri[k] ?? 0;
+			const pct = goal > 0 ? Math.round(value / goal * 100) : 0;
+			return { key: k, label: isEn ? meta.label : meta.labelDe, unit: meta.unit, value, goal, pct, isMax: meta.isMax };
+		});
+	}
+
+	const microSections = $derived([
+		{ title: isEn ? 'Minerals' : 'Mineralstoffe', rows: mkMicroRows(mineralKeys) },
+		{ title: isEn ? 'Vitamins' : 'Vitamine', rows: mkMicroRows(vitaminKeys) },
+		{ title: isEn ? 'Other' : 'Sonstiges', rows: mkMicroRows(otherKeys) },
+	]);
+
+	// --- Amino acids ---
+	const AMINO_META = {
+		leucine:       { en: 'Leucine',       de: 'Leucin' },
+		isoleucine:    { en: 'Isoleucine',    de: 'Isoleucin' },
+		valine:        { en: 'Valine',         de: 'Valin' },
+		lysine:        { en: 'Lysine',         de: 'Lysin' },
+		methionine:    { en: 'Methionine',     de: 'Methionin' },
+		phenylalanine: { en: 'Phenylalanine',  de: 'Phenylalanin' },
+		threonine:     { en: 'Threonine',      de: 'Threonin' },
+		tryptophan:    { en: 'Tryptophan',     de: 'Tryptophan' },
+		histidine:     { en: 'Histidine',      de: 'Histidin' },
+		alanine:       { en: 'Alanine',        de: 'Alanin' },
+		arginine:      { en: 'Arginine',       de: 'Arginin' },
+		asparticAcid:  { en: 'Aspartic Acid',  de: 'Asparaginsäure' },
+		cysteine:      { en: 'Cysteine',       de: 'Cystein' },
+		glutamicAcid:  { en: 'Glutamic Acid',  de: 'Glutaminsäure' },
+		glycine:       { en: 'Glycine',        de: 'Glycin' },
+		proline:       { en: 'Proline',        de: 'Prolin' },
+		serine:        { en: 'Serine',         de: 'Serin' },
+		tyrosine:      { en: 'Tyrosine',       de: 'Tyrosin' },
+	};
+
+	const essentialOrder = ['leucine', 'isoleucine', 'valine', 'lysine', 'methionine', 'phenylalanine', 'threonine', 'tryptophan', 'histidine'];
+	const nonEssentialOrder = ['alanine', 'arginine', 'asparticAcid', 'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];
+
+	const hasAminos = $derived.by(() => {
+		return essentialOrder.some(k => (n[k] ?? 0) > 0) || nonEssentialOrder.some(k => (n[k] ?? 0) > 0);
+	});
+
+	const aminoRows = $derived(
+		[...essentialOrder, ...nonEssentialOrder]
+			.filter(k => (n[k] ?? 0) > 0)
+			.map(k => ({
+				key: k,
+				label: isEn ? AMINO_META[k].en : AMINO_META[k].de,
+				value: scaled(n[k]),
+				essential: essentialOrder.includes(k),
+			}))
+	);
+
+	// --- Expand toggles ---
+	let showMicros = $state(true);
+	let showAminos = $state(false);
+</script>
+
+<svelte:head>
+	<title>{food.name} | {isEn ? 'Nutrition' : 'Ernährung'}</title>
+</svelte:head>
+
+<div class="food-detail">
+	<!-- Back link -->
+	<a class="back-link" href="/fitness/{s.nutrition}">
+		<ChevronLeft size={16} />
+		{t('nutrition_title', lang)}
+	</a>
+
+	<!-- Header -->
+	<header class="food-header">
+		<h1>{food.nameDe ?? food.name}</h1>
+		{#if food.nameEn && food.nameDe}
+			<p class="name-alt">{food.nameEn}</p>
+		{/if}
+		<div class="badges">
+			<span class="badge badge-source">{food.source === 'bls' ? 'BLS' : 'USDA'}</span>
+			<span class="badge badge-category">{food.category}</span>
+		</div>
+	</header>
+
+	<!-- Portion selector (USDA only) -->
+	{#if portions.length > 0}
+		<div class="portion-selector">
+			<label for="portion-select">{isEn ? 'Serving size' : 'Portionsgröße'}</label>
+			<select id="portion-select" bind:value={selectedPortionIdx}>
+				<option value={-1}>{isEn ? 'Per 100 g' : 'Pro 100 g'}</option>
+				{#each portions as portion, i}
+					<option value={i}>{portion.description} ({portion.grams}g)</option>
+				{/each}
+			</select>
+		</div>
+	{/if}
+
+	<!-- Calorie headline -->
+	<div class="calorie-headline">
+		<span class="cal-number">{Math.round(scaled(n.calories))}</span>
+		<span class="cal-unit">kcal</span>
+		<span class="cal-basis">{portionLabel}</span>
+	</div>
+
+	<!-- Macro rings -->
+	<div class="macro-rings">
+		{#each [
+			{ pct: macroPercent.protein, label: isEn ? 'Protein' : 'Eiweiß', cls: 'ring-protein', grams: scaled(n.protein) },
+			{ pct: macroPercent.fat, label: isEn ? 'Fat' : 'Fett', cls: 'ring-fat', grams: scaled(n.fat) },
+			{ pct: macroPercent.carbs, label: isEn ? 'Carbs' : 'Kohlenh.', cls: 'ring-carbs', grams: scaled(n.carbs) },
+		] as macro}
+			<div class="macro-ring">
+				<svg width="90" height="90" viewBox="0 0 70 70">
+					<circle
+						class="ring-bg"
+						cx="35" cy="35" r={RADIUS}
+						stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
+						transform="rotate({ARC_ROTATE} 35 35)"
+					/>
+					<circle
+						class="ring-fill {macro.cls}"
+						cx="35" cy="35" r={RADIUS}
+						stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
+						stroke-dashoffset={strokeOffset(macro.pct)}
+						transform="rotate({ARC_ROTATE} 35 35)"
+					/>
+					<text class="ring-text" x="35" y="35">{macro.pct}%</text>
+				</svg>
+				<span class="macro-label">{macro.label}</span>
+				<span class="macro-grams">{fmt(macro.grams)}g</span>
+			</div>
+		{/each}
+	</div>
+
+	<!-- Macro detail grid -->
+	<div class="macro-detail-card">
+		<div class="detail-row">
+			<span class="detail-name">{isEn ? 'Protein' : 'Eiweiß'}</span>
+			<span class="detail-val">{fmt(scaled(n.protein))} g</span>
+		</div>
+		<div class="detail-row">
+			<span class="detail-name">{isEn ? 'Fat' : 'Fett'}</span>
+			<span class="detail-val">{fmt(scaled(n.fat))} g</span>
+		</div>
+		<div class="detail-row sub">
+			<span class="detail-name">{isEn ? 'Saturated Fat' : 'Ges. Fettsäuren'}</span>
+			<span class="detail-val">{fmt(scaled(n.saturatedFat))} g</span>
+		</div>
+		<div class="detail-row">
+			<span class="detail-name">{isEn ? 'Carbohydrates' : 'Kohlenhydrate'}</span>
+			<span class="detail-val">{fmt(scaled(n.carbs))} g</span>
+		</div>
+		<div class="detail-row sub">
+			<span class="detail-name">{isEn ? 'Sugars' : 'Zucker'}</span>
+			<span class="detail-val">{fmt(scaled(n.sugars))} g</span>
+		</div>
+		<div class="detail-row">
+			<span class="detail-name">{isEn ? 'Fiber' : 'Ballaststoffe'}</span>
+			<span class="detail-val">{fmt(scaled(n.fiber))} g</span>
+		</div>
+	</div>
+
+	<!-- Micronutrients -->
+	<div class="section-card">
+		<button class="section-toggle" onclick={() => showMicros = !showMicros}>
+			<h2>{isEn ? 'Micronutrients' : 'Mikronährstoffe'}</h2>
+			<ChevronDown size={18} style={showMicros ? 'transform: rotate(180deg)' : ''} />
+		</button>
+
+		{#if showMicros}
+			<div class="micro-details">
+				{#each microSections as section}
+					<div class="micro-section">
+						<h4>{section.title}</h4>
+						{#each section.rows as row}
+							<div class="micro-row">
+								<span class="micro-label">{row.label}</span>
+								<div class="micro-bar-wrap">
+									<div class="micro-bar" class:is-max={row.isMax} style="width: {Math.min(row.pct, 100)}%"></div>
+								</div>
+								<span class="micro-value">{fmt(row.value)} {row.unit}</span>
+								<span class="micro-pct">{row.pct}%</span>
+							</div>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Amino Acids -->
+	{#if hasAminos}
+		<div class="section-card">
+			<button class="section-toggle" onclick={() => showAminos = !showAminos}>
+				<h2>{isEn ? 'Amino Acids' : 'Aminosäuren'}</h2>
+				<ChevronDown size={18} style={showAminos ? 'transform: rotate(180deg)' : ''} />
+			</button>
+
+			{#if showAminos}
+				<div class="amino-list">
+					{#each aminoRows as row}
+						<div class="amino-row" class:essential={row.essential}>
+							<span class="amino-label">{row.label}</span>
+							<span class="amino-value">{fmt(row.value)} g</span>
+							{#if row.essential}
+								<span class="amino-badge">{isEn ? 'essential' : 'essenziell'}</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Portions table (USDA only) -->
+	{#if portions.length > 0}
+		<div class="section-card">
+			<h2>{isEn ? 'Common Serving Sizes' : 'Übliche Portionsgrößen'}</h2>
+			<div class="portions-table">
+				<div class="portions-header">
+					<span>{isEn ? 'Serving' : 'Portion'}</span>
+					<span>kcal</span>
+					<span>{isEn ? 'Protein' : 'Eiweiß'}</span>
+					<span>{isEn ? 'Fat' : 'Fett'}</span>
+					<span>{isEn ? 'Carbs' : 'KH'}</span>
+				</div>
+				{#each portions as portion}
+					{@const m = portion.grams / 100}
+					<div class="portions-row">
+						<span class="portion-desc">{portion.description} <small>({portion.grams}g)</small></span>
+						<span>{Math.round(n.calories * m)}</span>
+						<span>{fmt(n.protein * m)}g</span>
+						<span>{fmt(n.fat * m)}g</span>
+						<span>{fmt(n.carbs * m)}g</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.food-detail {
+		max-width: 600px;
+		margin: 0 auto;
+		padding: 1rem;
+	}
+
+	.back-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--color-text-secondary);
+		text-decoration: none;
+		font-size: 0.85rem;
+		margin-bottom: 0.75rem;
+	}
+	.back-link:hover {
+		color: var(--color-text-primary);
+	}
+
+	/* Header */
+	.food-header {
+		margin-bottom: 1rem;
+	}
+	.food-header h1 {
+		font-size: 1.4rem;
+		margin: 0 0 0.25rem;
+		color: var(--color-text-primary);
+		line-height: 1.3;
+	}
+	.name-alt {
+		margin: 0 0 0.5rem;
+		font-size: 0.9rem;
+		color: var(--color-text-tertiary);
+	}
+	.badges {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+	.badge {
+		display: inline-block;
+		padding: 0.15rem 0.5rem;
+		border-radius: 4px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+	.badge-source {
+		background: var(--nord10);
+		color: #fff;
+	}
+	.badge-category {
+		background: var(--color-bg-tertiary);
+		color: var(--color-text-secondary);
+		border: 1px solid var(--color-border);
+	}
+
+	/* Portion selector */
+	.portion-selector {
+		margin-bottom: 1rem;
+	}
+	.portion-selector label {
+		display: block;
+		font-size: 0.8rem;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.25rem;
+	}
+	.portion-selector select {
+		width: 100%;
+		padding: 0.4rem 0.5rem;
+		border-radius: 6px;
+		border: 1px solid var(--color-border);
+		background: var(--color-bg-tertiary);
+		color: var(--color-text-primary);
+		font-size: 0.9rem;
+	}
+
+	/* Calorie headline */
+	.calorie-headline {
+		text-align: center;
+		margin-bottom: 1rem;
+	}
+	.cal-number {
+		font-size: 2.8rem;
+		font-weight: 800;
+		color: var(--color-text-primary);
+		line-height: 1;
+	}
+	.cal-unit {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		margin-left: 0.25rem;
+	}
+	.cal-basis {
+		display: block;
+		font-size: 0.8rem;
+		color: var(--color-text-tertiary);
+		margin-top: 0.15rem;
+	}
+
+	/* Macro rings */
+	.macro-rings {
+		display: flex;
+		justify-content: space-around;
+		margin: 0 0 1.25rem;
+	}
+	.macro-ring {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.15rem;
+		flex: 1;
+	}
+	.ring-bg {
+		fill: none;
+		stroke: var(--color-border);
+		stroke-width: 5;
+		stroke-linecap: round;
+	}
+	.ring-fill {
+		fill: none;
+		stroke-width: 5;
+		stroke-linecap: round;
+		transition: stroke-dashoffset 0.4s ease;
+	}
+	.ring-text {
+		font-size: 14px;
+		font-weight: 700;
+		fill: currentColor;
+		text-anchor: middle;
+		dominant-baseline: central;
+	}
+	.ring-protein { stroke: var(--nord14); }
+	.ring-fat { stroke: var(--nord12); }
+	.ring-carbs { stroke: var(--nord9); }
+
+	.macro-label {
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+		text-align: center;
+	}
+	.macro-grams {
+		font-size: 0.78rem;
+		color: var(--color-text-tertiary);
+	}
+
+	/* Macro detail card */
+	.macro-detail-card {
+		background: var(--color-surface);
+		border-radius: 10px;
+		padding: 0.75rem 1rem;
+		margin-bottom: 1rem;
+		border: 1px solid var(--color-border);
+	}
+	.detail-row {
+		display: flex;
+		justify-content: space-between;
+		padding: 0.35rem 0;
+		border-bottom: 1px solid var(--color-border);
+	}
+	.detail-row:last-child {
+		border-bottom: none;
+	}
+	.detail-row.sub .detail-name {
+		padding-left: 1rem;
+		color: var(--color-text-tertiary);
+		font-size: 0.85rem;
+	}
+	.detail-name {
+		color: var(--color-text-primary);
+		font-weight: 500;
+	}
+	.detail-val {
+		color: var(--color-text-secondary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Section cards */
+	.section-card {
+		background: var(--color-surface);
+		border-radius: 10px;
+		padding: 0.75rem 1rem;
+		margin-bottom: 1rem;
+		border: 1px solid var(--color-border);
+	}
+	.section-card h2 {
+		font-size: 1rem;
+		margin: 0;
+		color: var(--color-text-primary);
+	}
+	.section-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		color: var(--color-text-primary);
+	}
+
+	/* Micro details */
+	.micro-details {
+		margin-top: 0.75rem;
+	}
+	.micro-section {
+		margin-bottom: 0.75rem;
+	}
+	.micro-section h4 {
+		margin: 0 0 0.4rem;
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--color-text-secondary);
+	}
+	.micro-row {
+		display: grid;
+		grid-template-columns: 7rem 1fr 4rem 2.5rem;
+		gap: 0.5rem;
+		align-items: center;
+		padding: 0.2rem 0;
+		font-size: 0.78rem;
+	}
+	.micro-label {
+		color: var(--color-text-primary);
+		font-weight: 500;
+	}
+	.micro-bar-wrap {
+		height: 5px;
+		background: var(--color-bg-tertiary);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.micro-bar {
+		height: 100%;
+		background: var(--nord14);
+		border-radius: 3px;
+		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	.micro-bar.is-max {
+		background: var(--nord12);
+	}
+	.micro-value {
+		text-align: right;
+		color: var(--color-text-tertiary);
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+	.micro-pct {
+		text-align: right;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-text-secondary);
+	}
+
+	/* Amino acids */
+	.amino-list {
+		margin-top: 0.75rem;
+	}
+	.amino-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3rem 0;
+		border-bottom: 1px solid var(--color-border);
+		font-size: 0.85rem;
+	}
+	.amino-row:last-child {
+		border-bottom: none;
+	}
+	.amino-label {
+		flex: 1;
+		color: var(--color-text-primary);
+	}
+	.amino-value {
+		color: var(--color-text-secondary);
+		font-variant-numeric: tabular-nums;
+	}
+	.amino-badge {
+		font-size: 0.65rem;
+		padding: 0.1rem 0.35rem;
+		border-radius: 3px;
+		background: var(--nord14);
+		color: #fff;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+
+	/* Portions table */
+	.portions-table {
+		margin-top: 0.5rem;
+		font-size: 0.82rem;
+	}
+	.portions-header, .portions-row {
+		display: grid;
+		grid-template-columns: 1fr 3.5rem 3.5rem 3.5rem 3.5rem;
+		gap: 0.25rem;
+		padding: 0.35rem 0;
+	}
+	.portions-header {
+		font-weight: 700;
+		font-size: 0.72rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--color-text-secondary);
+		border-bottom: 2px solid var(--color-border);
+	}
+	.portions-row {
+		border-bottom: 1px solid var(--color-border);
+		color: var(--color-text-primary);
+	}
+	.portions-row:last-child {
+		border-bottom: none;
+	}
+	.portions-row span:not(.portion-desc) {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+	}
+	.portion-desc {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.portion-desc small {
+		color: var(--color-text-tertiary);
+	}
+
+	@media (max-width: 500px) {
+		.micro-row {
+			grid-template-columns: 5.5rem 1fr 3.5rem 2.2rem;
+			gap: 0.3rem;
+			font-size: 0.72rem;
+		}
+		.portions-header, .portions-row {
+			grid-template-columns: 1fr 3rem 3rem 3rem 3rem;
+			font-size: 0.72rem;
+		}
+	}
+</style>

src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte

@@ -0,0 +1,726 @@
+<script>
+	import { page } from '$app/stores';
+	import { untrack } from 'svelte';
+	import { ChevronLeft, Plus, Trash2, Pencil, UtensilsCrossed, X } from 'lucide-svelte';
+	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
+	import { toast } from '$lib/js/toast.svelte';
+	import FoodSearch from '$lib/components/fitness/FoodSearch.svelte';
+
+	const lang = $derived(detectFitnessLang($page.url.pathname));
+	const s = $derived(fitnessSlugs(lang));
+	const isEn = $derived(lang === 'en');
+
+	// --- Meals state ---
+	let meals = $state([]);
+	let loading = $state(true);
+
+	// --- Form state ---
+	let editing = $state(false);
+	let editingId = $state(null);
+	let mealName = $state('');
+	let ingredients = $state([]);
+	let saving = $state(false);
+
+	let showSearch = $state(false);
+
+	// --- Load meals ---
+	async function loadMeals() {
+		loading = true;
+		try {
+			const res = await fetch('/api/fitness/custom-meals');
+			if (res.ok) {
+				const data = await res.json();
+				meals = data.meals ?? [];
+			}
+		} catch {
+			toast.error(isEn ? 'Failed to load meals' : 'Fehler beim Laden');
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		untrack(() => loadMeals());
+	});
+
+	// --- Computed ---
+	function mealTotalCal(meal) {
+		return meal.ingredients.reduce((sum, ing) => sum + (ing.per100g?.calories ?? 0) * ing.amountGrams / 100, 0);
+	}
+
+	function ingredientsTotalNutrition(ings) {
+		let calories = 0, protein = 0, fat = 0, carbs = 0;
+		for (const ing of ings) {
+			const f = ing.amountGrams / 100;
+			calories += (ing.per100g?.calories ?? 0) * f;
+			protein += (ing.per100g?.protein ?? 0) * f;
+			fat += (ing.per100g?.fat ?? 0) * f;
+			carbs += (ing.per100g?.carbs ?? 0) * f;
+		}
+		return { calories, protein, fat, carbs };
+	}
+
+	const formTotals = $derived(ingredientsTotalNutrition(ingredients));
+
+	function addIngredient(food) {
+		ingredients = [...ingredients, food];
+		showSearch = false;
+	}
+
+	function removeIngredient(index) {
+		ingredients = ingredients.filter((_, i) => i !== index);
+	}
+
+	// --- CRUD ---
+	function startCreate() {
+		editing = true;
+		editingId = null;
+		mealName = '';
+		ingredients = [];
+		showSearch = false;
+	}
+
+	function startEdit(meal) {
+		editing = true;
+		editingId = meal._id;
+		mealName = meal.name;
+		ingredients = meal.ingredients.map(i => ({ ...i }));
+		showSearch = false;
+	}
+
+	function cancelEdit() {
+		editing = false;
+		editingId = null;
+		mealName = '';
+		ingredients = [];
+		showSearch = false;
+	}
+
+	async function saveMeal() {
+		if (!mealName.trim() || ingredients.length === 0) return;
+		saving = true;
+		try {
+			const body = { name: mealName.trim(), ingredients };
+			const url = editingId
+				? `/api/fitness/custom-meals/${editingId}`
+				: '/api/fitness/custom-meals';
+			const method = editingId ? 'PUT' : 'POST';
+
+			const res = await fetch(url, {
+				method,
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(body)
+			});
+
+			if (res.ok) {
+				toast.success(isEn ? 'Meal saved' : 'Mahlzeit gespeichert');
+				cancelEdit();
+				await loadMeals();
+			} else {
+				toast.error(isEn ? 'Failed to save' : 'Speichern fehlgeschlagen');
+			}
+		} catch {
+			toast.error(isEn ? 'Failed to save' : 'Speichern fehlgeschlagen');
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function deleteMeal(meal) {
+		if (!confirm(t('delete_meal_confirm', lang))) return;
+		try {
+			const res = await fetch(`/api/fitness/custom-meals/${meal._id}`, { method: 'DELETE' });
+			if (res.ok) {
+				meals = meals.filter(m => m._id !== meal._id);
+				toast.success(isEn ? 'Meal deleted' : 'Mahlzeit gelöscht');
+			}
+		} catch {
+			toast.error(isEn ? 'Failed to delete' : 'Löschen fehlgeschlagen');
+		}
+	}
+
+	function fmt(v) {
+		return v >= 100 ? Math.round(v).toString() : v.toFixed(1);
+	}
+</script>
+
+<svelte:head>
+	<title>{t('custom_meals', lang)} — Fitness</title>
+</svelte:head>
+
+<div class="meals-page">
+	<!-- Header -->
+	<div class="header">
+		<a href="/fitness/{s.nutrition}" class="back-link">
+			<ChevronLeft size={20} />
+			<span>{t('custom_meals', lang)}</span>
+		</a>
+		{#if !editing}
+			<button class="create-btn" onclick={startCreate}>
+				<Plus size={18} />
+				<span>{t('new_meal', lang)}</span>
+			</button>
+		{/if}
+	</div>
+
+	{#if loading}
+		<div class="loading-state">
+			<p>{t('loading', lang)}</p>
+		</div>
+	{:else if editing}
+		<!-- Create/Edit Form -->
+		<div class="form-card">
+			<h2 class="form-title">{editingId ? t('edit', lang) : t('new_meal', lang)}</h2>
+
+			<label class="field-label">{t('meal_name', lang)}</label>
+			<input
+				type="text"
+				class="text-input"
+				bind:value={mealName}
+				placeholder={t('meal_name', lang)}
+			/>
+
+			<!-- Ingredients list -->
+			<label class="field-label">{t('ingredients', lang)} ({ingredients.length})</label>
+			{#if ingredients.length > 0}
+				<div class="ingredients-list">
+					{#each ingredients as ing, i}
+						{@const sp = ing.selectedPortion}
+						{@const displayQty = sp ? Math.round((ing.amountGrams / sp.grams) * 10) / 10 : ing.amountGrams}
+						{@const displayUnit = sp ? sp.description : 'g'}
+						<div class="ingredient-row">
+							<div class="ingredient-info">
+								<div class="ingredient-name-row">
+									<span class="ingredient-name">{ing.name}</span>
+									{#if ing.source !== 'custom'}
+										<span class="source-tag">{ing.source === 'bls' ? 'BLS' : 'USDA'}</span>
+									{/if}
+								</div>
+								<div class="ingredient-edit-row">
+									<input
+										type="number"
+										class="inline-amount"
+										value={displayQty}
+										min="0.1"
+										step={sp ? '0.5' : '1'}
+										onchange={(e) => {
+											const qty = Number(e.target.value) || 1;
+											ingredients[i].amountGrams = sp ? Math.round(qty * sp.grams) : qty;
+											ingredients = [...ingredients];
+										}}
+									/>
+									{#if ing.portions?.length > 0}
+										<select class="inline-portion" value={sp ? ing.portions.findIndex(p => p.description === sp.description) : -1} onchange={(e) => {
+											const idx = Number(e.target.value);
+											const oldGrams = ing.amountGrams;
+											if (idx >= 0) {
+												const portion = ing.portions[idx];
+												ingredients[i].selectedPortion = portion;
+												// Convert current grams to new unit, round to nearest 0.5
+												const qty = Math.round((oldGrams / portion.grams) * 2) / 2 || 1;
+												ingredients[i].amountGrams = Math.round(qty * portion.grams);
+											} else {
+												ingredients[i].selectedPortion = undefined;
+											}
+											ingredients = [...ingredients];
+										}}>
+											<option value={-1}>g</option>
+											{#each ing.portions as p, pi}
+												<option value={pi}>{p.description} ({Math.round(p.grams)}g)</option>
+											{/each}
+										</select>
+									{:else}
+										<span class="ingredient-unit">{displayUnit}</span>
+									{/if}
+									<span class="ingredient-cal">
+										{#if sp}<span class="ingredient-grams">{ing.amountGrams}g ·</span>{/if}
+										{fmt((ing.per100g?.calories ?? 0) * ing.amountGrams / 100)} {t('kcal', lang)}
+									</span>
+								</div>
+							</div>
+							<button class="icon-btn danger" onclick={() => removeIngredient(i)} aria-label="Remove">
+								<X size={16} />
+							</button>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			<!-- Totals -->
+			{#if ingredients.length > 0}
+				<div class="totals-bar">
+					<span class="total-label">{t('total', lang)}</span>
+					<span class="total-macro">{Math.round(formTotals.calories)} {t('kcal', lang)}</span>
+					<span class="total-macro protein">{fmt(formTotals.protein)}g P</span>
+					<span class="total-macro fat">{fmt(formTotals.fat)}g F</span>
+					<span class="total-macro carbs">{fmt(formTotals.carbs)}g C</span>
+				</div>
+			{/if}
+
+			<!-- Add ingredient -->
+			{#if !showSearch}
+				<button class="add-ingredient-btn" onclick={() => { showSearch = true; }}>
+					<Plus size={16} />
+					<span>{t('add_ingredient', lang)}</span>
+				</button>
+			{:else}
+				<div class="search-section">
+					<FoodSearch
+						onselect={addIngredient}
+						oncancel={() => { showSearch = false; }}
+						showDetailLinks={false}
+						confirmLabel={t('add_ingredient', lang)}
+					/>
+				</div>
+			{/if}
+
+			<!-- Actions -->
+			<div class="form-actions">
+				<button class="btn secondary" onclick={cancelEdit}>{t('cancel', lang)}</button>
+				<button
+					class="btn primary"
+					onclick={saveMeal}
+					disabled={saving || !mealName.trim() || ingredients.length === 0}
+				>
+					{saving ? t('loading', lang) : t('save_meal', lang)}
+				</button>
+			</div>
+		</div>
+	{:else if meals.length === 0}
+		<!-- Empty state -->
+		<div class="empty-state">
+			<UtensilsCrossed size={48} strokeWidth={1.2} />
+			<p class="empty-title">{t('no_custom_meals', lang)}</p>
+			<p class="empty-hint">{t('create_meal_hint', lang)}</p>
+		</div>
+	{:else}
+		<!-- Meal cards -->
+		<div class="meals-list">
+			{#each meals as meal, i}
+				<div class="meal-card" style="animation-delay: {i * 50}ms">
+					<div class="meal-header">
+						<div class="meal-info">
+							<h3 class="meal-name">{meal.name}</h3>
+							<span class="meal-meta">
+								{meal.ingredients.length} {t('ingredients', lang)} — {Math.round(mealTotalCal(meal))} {t('kcal', lang)}
+							</span>
+						</div>
+						<div class="meal-actions">
+							<button class="icon-btn" onclick={() => startEdit(meal)} aria-label={t('edit', lang)}>
+								<Pencil size={16} />
+							</button>
+							<button class="icon-btn danger" onclick={() => deleteMeal(meal)} aria-label={t('delete_', lang)}>
+								<Trash2 size={16} />
+							</button>
+						</div>
+					</div>
+					<div class="meal-ingredients">
+						{#each meal.ingredients as ing}
+							<span class="ing-chip">{ing.name} ({ing.amountGrams}g)</span>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.meals-page {
+		max-width: 600px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding-bottom: 2rem;
+	}
+
+	@keyframes fade-up {
+		from { opacity: 0; transform: translateY(8px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+
+	/* ── Header ── */
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		animation: fade-up 0.3s ease both;
+	}
+
+	.back-link {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--color-text-primary);
+		text-decoration: none;
+		font-size: 1.1rem;
+		font-weight: 700;
+		padding: 0.35rem 0;
+		transition: color 0.15s;
+	}
+	.back-link:hover {
+		color: var(--nord8);
+	}
+
+	.create-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		background: var(--nord8);
+		color: #fff;
+		border: none;
+		border-radius: 8px;
+		padding: 0.5rem 0.85rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+	.create-btn:hover {
+		background: var(--nord10);
+	}
+
+	/* ── Loading ── */
+	.loading-state {
+		text-align: center;
+		padding: 3rem 1rem;
+		color: var(--color-text-secondary);
+		animation: fade-up 0.3s ease both;
+	}
+
+	/* ── Empty state ── */
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 3rem 1rem;
+		color: var(--color-text-tertiary);
+		animation: fade-up 0.35s ease both;
+	}
+	.empty-title {
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		margin: 0;
+	}
+	.empty-hint {
+		font-size: 0.85rem;
+		margin: 0;
+	}
+
+	/* ── Meal cards ── */
+	.meals-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.meal-card {
+		background: var(--color-surface);
+		border-radius: 12px;
+		padding: 1rem 1.1rem;
+		box-shadow: var(--shadow-sm);
+		animation: fade-up 0.35s ease both;
+	}
+
+	.meal-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.meal-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.meal-name {
+		font-size: 1rem;
+		font-weight: 700;
+		color: var(--color-text-primary);
+		margin: 0;
+		line-height: 1.3;
+	}
+
+	.meal-meta {
+		font-size: 0.78rem;
+		color: var(--color-text-secondary);
+	}
+
+	.meal-actions {
+		display: flex;
+		gap: 0.25rem;
+		flex-shrink: 0;
+	}
+
+	.meal-ingredients {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		margin-top: 0.6rem;
+	}
+
+	.ing-chip {
+		font-size: 0.72rem;
+		background: var(--color-bg-tertiary);
+		color: var(--color-text-secondary);
+		padding: 0.2rem 0.5rem;
+		border-radius: 6px;
+		white-space: nowrap;
+	}
+
+	/* ── Icon button ── */
+	.icon-btn {
+		background: none;
+		border: none;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		padding: 0.4rem;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		transition: color 0.15s, background 0.15s;
+	}
+	.icon-btn:hover {
+		background: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+	}
+	.icon-btn.danger:hover {
+		color: var(--nord11);
+		background: color-mix(in srgb, var(--nord11) 10%, transparent);
+	}
+
+	/* ── Form card ── */
+	.form-card {
+		background: var(--color-surface);
+		border-radius: 12px;
+		padding: 1.25rem;
+		box-shadow: var(--shadow-sm);
+		animation: fade-up 0.35s ease both;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.form-title {
+		font-size: 1.05rem;
+		font-weight: 700;
+		color: var(--color-text-primary);
+		margin: 0;
+	}
+
+	.field-label {
+		font-size: 0.78rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		margin: 0;
+	}
+
+	.text-input {
+		width: 100%;
+		background: var(--color-bg-tertiary);
+		border: 1px solid var(--color-border);
+		border-radius: 8px;
+		padding: 0.55rem 0.75rem;
+		font-size: 0.9rem;
+		color: var(--color-text-primary);
+		outline: none;
+		transition: border-color 0.15s;
+		box-sizing: border-box;
+	}
+	.text-input:focus {
+		border-color: var(--nord8);
+	}
+
+	/* ── Ingredients in form ── */
+	.ingredients-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+
+	.ingredient-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		background: var(--color-bg-tertiary);
+		padding: 0.5rem 0.65rem;
+		border-radius: 8px;
+	}
+
+	.ingredient-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.ingredient-name {
+		display: block;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.ingredient-name-row {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+	.source-tag {
+		font-size: 0.58rem;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		color: var(--color-text-tertiary);
+		background: var(--color-bg-elevated);
+		padding: 0.05rem 0.3rem;
+		border-radius: 3px;
+		flex-shrink: 0;
+	}
+	.ingredient-edit-row {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-top: 0.15rem;
+		flex-wrap: wrap;
+	}
+	.inline-amount {
+		width: 3.5rem;
+		padding: 0.2rem 0.35rem;
+		background: var(--color-bg-elevated);
+		border: 1px solid var(--color-border);
+		border-radius: 5px;
+		color: var(--color-text-primary);
+		font-size: 0.78rem;
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+		box-sizing: border-box;
+	}
+	.inline-amount:focus {
+		outline: none;
+		border-color: var(--nord8);
+	}
+	.inline-portion {
+		padding: 0.2rem 0.3rem;
+		background: var(--color-bg-elevated);
+		border: 1px solid var(--color-border);
+		border-radius: 5px;
+		color: var(--color-text-secondary);
+		font-size: 0.72rem;
+		max-width: 9rem;
+	}
+	.inline-portion:focus {
+		outline: none;
+		border-color: var(--nord8);
+	}
+	.ingredient-unit {
+		font-size: 0.72rem;
+		color: var(--color-text-tertiary);
+	}
+	.ingredient-cal {
+		font-size: 0.72rem;
+		color: var(--color-text-secondary);
+		margin-left: auto;
+	}
+
+	/* ── Totals bar ── */
+	.totals-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		background: color-mix(in srgb, var(--nord8) 8%, transparent);
+		padding: 0.55rem 0.75rem;
+		border-radius: 8px;
+		font-size: 0.78rem;
+		font-weight: 600;
+	}
+
+	.total-label {
+		color: var(--color-text-secondary);
+		margin-right: auto;
+	}
+
+	.total-macro {
+		color: var(--color-text-primary);
+	}
+	.total-macro.protein { color: var(--nord14); }
+	.total-macro.fat { color: var(--nord12); }
+	.total-macro.carbs { color: var(--nord9); }
+
+	/* ── Add ingredient button ── */
+	.add-ingredient-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		background: none;
+		border: 1.5px dashed var(--color-border);
+		border-radius: 8px;
+		padding: 0.55rem 0.75rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		transition: color 0.15s, border-color 0.15s;
+		justify-content: center;
+	}
+	.add-ingredient-btn:hover {
+		color: var(--nord8);
+		border-color: var(--nord8);
+	}
+
+	/* ── Search section ── */
+	.search-section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.ingredient-grams {
+		color: var(--color-text-tertiary);
+		font-size: 0.65rem;
+	}
+
+	/* ── Form actions ── */
+	.form-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+
+	.btn {
+		border: none;
+		border-radius: 8px;
+		padding: 0.55rem 1.1rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: background 0.15s, opacity 0.15s;
+	}
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	.btn.primary {
+		background: var(--nord8);
+		color: #fff;
+	}
+	.btn.primary:hover:not(:disabled) {
+		background: var(--nord10);
+	}
+	.btn.secondary {
+		background: var(--color-bg-tertiary);
+		color: var(--color-text-secondary);
+	}
+	.btn.secondary:hover {
+		background: var(--color-bg-elevated);
+		color: var(--color-text-primary);
+	}
+</style>

src/routes/fitness/[stats=fitnessStats]/+page.svelte

@@ -40,7 +40,7 @@
 	let goalInput = $state(4);
 	let goalSaving = $state(false);
 
-	const hasDemographics = $derived(data.goal?.sex != null && data.goal?.heightCm != null);
+	const hasDemographics = $derived(data.goal?.sex != null && data.goal?.heightCm != null && data.goal?.birthYear != null);
 
 	function startGoalEdit() {
 		goalInput = goalWeekly ?? 4;