From e78bafce7ed33d2e64192cd18e188d366e8f692f Mon Sep 17 00:00:00 2001
From: dne <daniel@5t.media>
Date: Tue, 24 Mar 2026 11:40:31 +0100
Subject: [PATCH] feat: Hero-Textschatten & Parallax, Speisekarte-Styling
 verbessern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero: goldener Glow-Schatteneffekt auf "Graffen"-Schriftzug
- Hero: Parallax-Effekt für Titel und Subtitle beim Scrollen
- Speisekarte: mehr Whitespace (py-28/py-36), größere Abstände
- Speisekarte: ornamentale Trennlinien mit Stern statt border-b
- Speisekarte: Allergene unter Beschreibung, Tooltip für vegan/vegetarisch
- Speisekarte: Allergen-Button mit sichtbarem Rahmen

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Hero.svelte | 28 +++++++++++++++++---
 src/lib/components/Menu.svelte | 47 +++++++++++++++++++++++++++-------
 2 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 8276c13..5cf4d99 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -2,8 +2,20 @@
 	import { onMount } from 'svelte';
 
 	let fogEl: HTMLDivElement;
+	let contentEl: HTMLDivElement;
+	let scrollY = 0;
+
+	function onScroll() {
+		scrollY = window.scrollY;
+		if (contentEl) {
+			contentEl.style.transform = `translateY(${scrollY * 0.4}px)`;
+			contentEl.style.opacity = `${Math.max(1 - scrollY / 600, 0)}`;
+		}
+	}
 
 	onMount(async () => {
+		window.addEventListener('scroll', onScroll, { passive: true });
+
 		const THREE = await import('three');
 		const FOG = (await import('vanta/dist/vanta.fog.min')).default;
 
@@ -24,7 +36,10 @@
 			zoom: 1.2
 		});
 
-		return () => effect.destroy();
+		return () => {
+			effect.destroy();
+			window.removeEventListener('scroll', onScroll);
+		};
 	});
 </script>
 
@@ -50,8 +65,8 @@
 	></div>
 
 	<!-- Content -->
-	<div class="relative z-10 text-center">
-		<h1 class="font-gothic text-7xl text-gold drop-shadow-lg md:text-9xl">Graffen</h1>
+	<div bind:this={contentEl} class="relative z-10 text-center will-change-transform">
+		<h1 class="hero-title font-gothic text-7xl text-gold md:text-9xl">Graffen</h1>
 		<p class="max-w-xs mx-auto mt-4 text-lg font-light tracking-wide text-cream/90 md:text-xl">
 			Rumänische Hausmannskost aus dem Foodtruck
 		</p>
@@ -131,6 +146,13 @@
 </section>
 
 <style>
+	.hero-title {
+		text-shadow:
+			0 0 10px rgba(139, 105, 20, 0.6),
+			0 0 30px rgba(139, 105, 20, 0.3),
+			0 4px 8px rgba(0, 0, 0, 0.5);
+	}
+
 	.scroll-indicator {
 		animation: float 2.5s ease-in-out infinite;
 	}
diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
index a1d4242..72469b3 100644
--- a/src/lib/components/Menu.svelte
+++ b/src/lib/components/Menu.svelte
@@ -8,7 +8,7 @@
 	let showAllergens = $state(false);
 </script>
 
-<section id="speisekarte" class="bg-cream py-20">
+<section id="speisekarte" class="bg-cream py-28 md:py-36">
 	<div class="mx-auto max-w-4xl px-6">
 		<h2 class="font-gothic mb-2 text-center text-5xl text-brown md:text-6xl">Speisekarte</h2>
 		<p class="mx-auto mb-10 max-w-2xl text-center text-sepia italic">
@@ -59,33 +59,40 @@
 				{#each menu.categories as category}
 					<div class="mb-14 last:mb-0">
 						<h3
-							class="mb-6 border-b border-gold/40 pb-2 text-center text-2xl font-bold tracking-wide text-brown"
+							class="mb-4 text-center text-2xl font-bold tracking-wide text-brown"
 						>
 							{category.title}
 						</h3>
+						<div class="mb-8 flex items-center justify-center gap-4">
+							<div class="h-px w-16 bg-gold/40"></div>
+							<span class="font-gothic text-2xl text-gold/60">&#10022;</span>
+							<div class="h-px w-16 bg-gold/40"></div>
+						</div>
 
-						<div class="grid gap-4 sm:grid-cols-2">
+						<div class="grid gap-5 sm:grid-cols-2">
 							{#each category.items as item}
 								<div class="rounded-lg border border-gold/15 bg-parchment/40 p-5">
 									<div class="flex items-center gap-2">
 										<span class="text-lg font-semibold text-brown">{item.name}</span>
 										{#if item.vegetarian}
-											<span class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#009036]" title="vegetarisch">
+											<span class="tooltip relative inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#009036]">
 												<Leaf size={14} color="#FEDD00" strokeWidth={2.5} />
+												<span class="tooltip-text">vegetarisch</span>
 											</span>
 										{/if}
 										{#if item.vegan}
-											<span class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#FEDD00]" title="vegan">
+											<span class="tooltip relative inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#FEDD00]">
 												<Leaf size={14} color="#009036" strokeWidth={2.5} />
+												<span class="tooltip-text">vegan</span>
 											</span>
 										{/if}
-										{#if item.allergens || item.additives}
-											<sup class="text-[10px] font-normal text-sepia/50">{item.allergens}{#if item.additives}, {item.additives}{/if}</sup>
-										{/if}
 									</div>
 									{#if item.description}
 										<p class="mt-2 text-sm leading-relaxed text-sepia">{item.description}</p>
 									{/if}
+									{#if item.allergens || item.additives}
+										<p class="mt-1.5 text-[11px] text-sepia/50">Allergene: {item.allergens}{#if item.additives} · Zusatzstoffe: {item.additives}{/if}</p>
+									{/if}
 								</div>
 							{/each}
 						</div>
@@ -97,7 +104,7 @@
 		<!-- Allergen Legend Trigger -->
 		<div class="mt-10 text-center">
 			<button
-				class="inline-flex items-center gap-2 text-sm text-sepia/60 transition-colors hover:text-gold"
+				class="inline-flex items-center gap-2 rounded-full border border-gold/30 px-5 py-2 text-sm text-sepia/70 transition-colors hover:border-gold/60 hover:text-gold"
 				onclick={() => (showAllergens = true)}
 			>
 				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -248,6 +255,28 @@
 {/if}
 
 <style>
+	.tooltip .tooltip-text {
+		visibility: hidden;
+		opacity: 0;
+		position: absolute;
+		bottom: calc(100% + 6px);
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+		font-size: 11px;
+		padding: 4px 10px;
+		border-radius: 6px;
+		background: var(--color-charcoal);
+		color: var(--color-cream);
+		pointer-events: none;
+		transition: opacity 0.15s ease;
+	}
+
+	.tooltip:hover .tooltip-text {
+		visibility: visible;
+		opacity: 1;
+	}
+
 	.ornate-modal {
 		animation: modal-in 0.25s ease-out;
 	}