diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte
index 4e35c51..d701ffa 100644
--- a/frontend/src/lib/planner/DesktopDayTile.svelte
+++ b/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)';
 	})());