fix(planner): transliterate German umlauts in protein gradient CSS key

'Hähnchen'.toLowerCase() → 'hähnchen' which never matched the CSS var
--gradient-protein-haehnchen. Add toCssKey() to replace ä→ae, ö→oe,
ü→ue, ß→ss so gradient fallbacks actually resolve.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/planner/DesktopDayTile.svelte

@@ -72,12 +72,17 @@
 		}
 	}
 
+	const umlautMap: Record<string, string> = { ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss' };
+	function toCssKey(name: string): string {
+		return name.toLowerCase().replace(/[äöüß]/g, (c) => umlautMap[c] ?? c);
+	}
+
 	const gradientBackground = $derived((() => {
 		if (!slot.recipe) return 'var(--color-surface)';
 		if (slot.recipe.heroImageUrl) return `url(${slot.recipe.heroImageUrl})`;
 		const proteinTag = slot.recipe.tags?.find((t) => t.tagType === 'protein');
 		if (proteinTag?.name) {
-			return `var(--gradient-protein-${proteinTag.name.toLowerCase()})`;
+			return `var(--gradient-protein-${toCssKey(proteinTag.name)})`;
 		}
 		return 'var(--color-surface)';
 	})());