fix: mobile Hero-Bild, Nav-Hintergrund bei offenem Menü, Padding

- Separates Hero-Hintergrundbild für Mobile (graffen-hero-mobile.png)
- Nav-Hintergrund erscheint sofort bei geöffnetem Mobile-Menü
- Symmetrisches Padding im mobilen Menü
- Scroll-Button kleiner auf Mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/components/Hero.svelte

@@ -29,9 +29,13 @@
 </script>
 
 <section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden">
-	<!-- Background Image -->
+	<!-- Background Image (mobile / desktop) -->
 	<div
-		class="absolute inset-0 bg-cover bg-center"
+		class="absolute inset-0 bg-cover bg-center md:hidden"
+		style="background-image: url('/graffen-hero-mobile.png');"
+	></div>
+	<div
+		class="absolute inset-0 hidden bg-cover bg-center md:block"
 		style="background-image: url('/graffen-hero.png');"
 	></div>
 
@@ -57,7 +61,7 @@
 	<div class="absolute bottom-20 z-10 flex w-full justify-center">
 		<a
 			href="#speisekarte"
-			class="scroll-indicator relative flex h-24 w-24 items-center justify-center rounded-full bg-charcoal/40 backdrop-blur-sm"
+			class="scroll-indicator relative flex max-md:h-14 max-md:w-14 h-24 w-24 items-center justify-center rounded-full bg-charcoal/40 backdrop-blur-sm"
 			aria-label="Nach unten scrollen"
 		>
 			<svg

src/lib/components/Nav.svelte

@@ -21,14 +21,14 @@
 <svelte:window onscroll={onScroll} />
 
 <nav
-	class="fixed top-0 left-0 z-50 w-full transition-all duration-300 {scrolled
+	class="fixed top-0 left-0 z-50 w-full {scrolled || mobileOpen
 		? 'bg-charcoal shadow-lg'
 		: 'bg-transparent'}"
 >
 	<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
 		<a
 			href="/"
-			class="font-gothic text-2xl transition-colors duration-300 {scrolled ? 'text-gold' : 'text-charcoal'}"
+			class="font-gothic text-2xl transition-colors duration-300 {scrolled || mobileOpen ? 'text-gold' : 'text-charcoal'}"
 			onclick={closeMobile}
 		>
 			Graffen
@@ -48,7 +48,7 @@
 
 		<!-- Mobile Toggle -->
 		<button
-			class="md:hidden {scrolled ? 'text-cream' : 'text-charcoal'}"
+			class="md:hidden {scrolled || mobileOpen ? 'text-cream' : 'text-charcoal'}"
 			onclick={() => (mobileOpen = !mobileOpen)}
 			aria-label="Menü"
 		>
@@ -74,7 +74,7 @@
 
 	<!-- Mobile Menu -->
 	{#if mobileOpen}
-		<div class="border-t border-gold/20 bg-charcoal/95 px-6 pb-4 md:hidden">
+		<div class="border-t border-gold/20 bg-charcoal/95 px-6 py-4 md:hidden">
 			{#each links as link}
 				<a
 					href={link.href}