fix(variety): remove unused total, add warning border, fix abbreviation, aria

- EffortBar: remove unused \`total\` derived variable
- VarietyWarningCards: add border border-[var(--yellow-light)] to cards
- variety page: protein abbreviation uses split(' ')[0].slice(0,3).toUpperCase()
- variety page: breadcrumb separator span gets aria-hidden="true"

Addresses Kai blocker: unused total. Atlas blockers: yellow-light border,
protein abbreviation, breadcrumb aria.

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

frontend/src/lib/planner/EffortBar.svelte

@@ -9,7 +9,7 @@
 		hard: number;
 	} = $props();
 
-	let total = $derived(easy + medium + hard);
+
 </script>
 
 <!-- Labels below the bar -->

frontend/src/lib/planner/VarietyWarningCards.svelte

@@ -10,7 +10,7 @@
 {#each warnings as warning}
 	<div
 		data-testid="warning-card"
-		class="rounded-[var(--radius-lg)] bg-[var(--yellow-tint)] px-4 py-3"
+		class="rounded-[var(--radius-lg)] border border-[var(--yellow-light)] bg-[var(--yellow-tint)] px-4 py-3"
 	>
 		<p class="font-[var(--font-sans)] text-[13px] font-medium text-[var(--yellow-text)]">
 			{warning.title}

frontend/src/routes/(app)/planner/variety/+page.svelte

@@ -129,7 +129,7 @@
 		>
 			Planer
 		</a>
-		<span class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">/</span>
+		<span aria-hidden="true" class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">/</span>
 		<h1 class="font-[var(--font-display)] text-[20px] font-[300] text-[var(--color-text)]">
 			Abwechslungs-Analyse
 		</h1>
@@ -191,7 +191,7 @@
 													: 'bg-[var(--color-subtle)] text-[var(--color-text-muted)]'}
 												{isRepeated ? 'ring-2 ring-[var(--yellow)]' : ''}"
 										>
-											{protein ? protein.slice(0, 3) : '—'}
+											{protein ? protein.split(' ')[0].slice(0, 3).toUpperCase() : '—'}
 										</div>
 									</div>
 								{/each}