Add responsive mobile menu with burger icon and animations:

- **Mobile menu implementation**: Introduced a burger menu for smaller screens, enabling navigation toggle.
- **Responsive styles**: Added CSS adjustments for headers and navigation under `768px` and `480px` breakpoints.
- **Interactive behavior**: Implemented toggle functionality using JavaScript for mobile menu activation.
- **Styling updates**: Enhanced mobile and desktop navigation distinction with scoped CSS changes.

src/components/Header.astro

@@ -11,9 +11,9 @@ import "../styles/components/Header.css";
 		</a>
 	</div>
 
-	<!-- Hauptnavigation: immer Home, About, Contact -->
+	<!-- Desktop Navigation -->
 	<nav class="nav-main">
-		<div>
+		<div class="desktop-menu">
 			<a href="/#hero">Home</a>
 			<a href="/#events">Events</a>
 			<a href="/#gallery">Galerie</a>
@@ -23,6 +23,37 @@ import "../styles/components/Header.css";
 			<a href="/#contact">Contact</a>-->
 		</div>
 	</nav>
+
+	<!-- Mobile Burger Menu -->
+	<div class="burger-menu">
+		<div class="burger-icon">
+			<span></span>
+			<span></span>
+			<span></span>
+		</div>
+	</div>
+
+	<!-- Mobile Navigation Menu -->
+	<div class="mobile-menu">
+		<a href="/#hero">Home</a>
+		<a href="/#events">Events</a>
+		<a href="/#gallery">Galerie</a>
+		<a href="/#drinks">Drinks</a>
+		<a href="/#footer">Contact</a>
+	</div>
 </header>
 
 <div class="header-spacer"></div>
+
+<script>
+	// Toggle mobile menu when burger icon is clicked
+	document.addEventListener('DOMContentLoaded', () => {
+		const burgerIcon = document.querySelector('.burger-icon');
+		const mobileMenu = document.querySelector('.mobile-menu');
+		
+		burgerIcon.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu.classList.toggle('active');
+		});
+	});
+</script>