From 389500c1ddf6a20c864a83197fdced8340b57229 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 10 Apr 2026 11:31:06 +0200
Subject: [PATCH] fix(planner): transliterate German umlauts in protein
 gradient CSS key
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

'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 | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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)';
 	})());