feat: update project assets and components with new images and improve image handling

Reviewed-on: #3

.woodpecker.yml

@@ -1,26 +1,16 @@
-pipeline:
+steps:
-  build:
-    image: node:20-alpine
-    commands:
-      - npm ci
-      - npm run build
-    when:
-      branch: main
-      event: [push, pull_request]
   deploy:
-    depends_on: [build]
+    image: node:20
-    image: flyio/flyctl:latest
+    environment:
-    secrets: [fly_api_token]
+      FLY_API_TOKEN:
+        from_secret: FLY_API_TOKEN
     commands:
-      - flyctl deploy --remote-only
+      - curl -L https://fly.io/install.sh | sh
-    when:
+      - export PATH="$HOME/.fly/bin:$PATH"
-      branch: main
+      - flyctl deploy --config fly.toml --app gallus-pub
-      event: push
 
-branches:
+when:
-  include: [main, dev]
+  branch:
-
+    - main
-cache:
+  event:
-  mount:
+    - push
-    - node_modules
-    - .npm

Dockerfile

@@ -1,25 +1,22 @@
 FROM node:20-alpine AS build
 
 WORKDIR /app
-
 COPY package*.json ./
 RUN npm ci
-
+COPY . .
-COPY ../backup/backup .
+# Ensure CSS variables are present
-
+RUN mkdir -p public/styles
+RUN cp -r styles/* public/styles/ || true
 RUN npm run build
 
 FROM node:20-alpine AS production
 
 WORKDIR /app
-
 RUN npm install -g serve
-
+COPY --from=build /app/dist ./dist
-COPY --from=build /app/dist /app
 
 EXPOSE 3000
-
+CMD ["serve", "-s", "dist", "-l", "3000"]
-CMD ["serve", "-s", ".", "-l", "3000"]
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost:3000/ || exit 1

fly.toml

@@ -1,5 +1,5 @@
 app = "gallus-pub"
-primary_region = "fra" # Frankfurt region, change if needed
+primary_region = "fra"
 kill_signal = "SIGINT"
 kill_timeout = 5
 
@@ -26,7 +26,7 @@ kill_timeout = 5
   [[http_service.checks]]
     interval = "30s"
     timeout = "5s"
-    grace_period = "10s"
+    grace_period = "30s"
     method = "GET"
     path = "/"
     protocol = "http"

package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "Gallus_Pub",
+  "name": "Gallus Pub Site",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "Gallus Pub Site",
       "version": "0.0.1",
       "dependencies": {
         "astro": "^5.12.0"
@@ -3988,6 +3989,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.45.1.tgz",
       "integrity": "sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4625,6 +4627,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -4839,6 +4842,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "Gallus Pub Site",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

src/components/Contact.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../components/Layout.astro";
-import "../../styles/components/ContactForm.css";
+import "../styles/components/ContactForm.css";
 ---
 
 <Layout>

src/components/Drinks.astro

@@ -1,35 +1,49 @@
 ---
-import "../../styles/components/Drinks.css"
+import { Image } from "astro:assets";
+import "../styles/components/Drinks.css"
+import MonthlyHit from "../assets/images/MonthlyHit.png";
+import Whiskey1 from "../assets/images/whiskey/Whiskey1.png";
+import Whiskey2 from "../assets/images/whiskey/Whiskey2.png";
+import Whiskey3 from "../assets/images/whiskey/Whiskey3.png";
 
 const { id } = Astro.props;
 ---
 <section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
-    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
+    <p class="note">
+        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
+    </p>
+
+    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
 
     <h3 class="monats-hit">Monats Hit</h3>
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <span class="circle-label">Mate Vodka</span>
+            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
+    <p class="note">
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+    </p>
+
     <div class="circle-row">
-        <div class="circle" title="Bier">
+        <div class="circle whiskey-circle" title="Whiskey 1">
-            <span class="circle-label">Bier</span>
+            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Wein">
+        <div class="circle whiskey-circle" title="Whiskey 2">
-            <span class="circle-label">Wein</span>
+            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Cocktails">
+        <div class="circle whiskey-circle" title="Whiskey 3">
-            <span class="circle-label">Cocktails</span>
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
     </div>
-
-    <p class="note">
-        Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
-    </p>
 </section>

src/components/EventsGrid.astro

@@ -2,27 +2,31 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
+
 interface Event {
-    image: string;
+	image: ImageMetadata;
-  title: string;
+	title: string;
-  date: Date;
+	date: string;
-  description: string;
+	description: string;
 }
-const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
+const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
-import '../../styles/components/EventsGrid.css';
+	events?: Event[];
+	id?: string;
+};
+import "../styles/components/EventsGrid.css";
 ---
 
 <h2 class="section-title">Events</h2>
 <section id={id} class="events-gird container">
-
+	{
-	{events.map((event: Event)  => (
+		events.map((event: Event) => (
-
+			<HoverCard
-            <HoverCard
+				title={event.title}
-                    title={event.title}
+				date={event.date}
-                    date={event.date}
+				description={event.description}
-                    description={event.description}
+				image={event.image}
-                    image={event.image}
+			/>
-            />
+		))
-    ))}
+	}
-
 </section>

src/components/Footer.astro

@@ -1,14 +1,12 @@
 ---
 // src/components/Footer.astro
-import "/styles/components/Footer.css"
+import "../styles/components/Footer.css"
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="footer">
+<footer class="footer" id="footer">
 	<div class="footer-content">
-		<div class="copyright">
+
-			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
-		</div>
 
 		<div class="footer-sections">
 			<div class="footer-section">
@@ -24,8 +22,8 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</p>
-				<p>Reservierungen via Whatsapp</p>
 				<p><a href="tel:0772322770">077 232 27 70</a></p>
+				<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
 			</div>
 
 			<div class="footer-section">
@@ -33,12 +31,12 @@ const currentYear = new Date().getFullYear();
 				<p>Du planst einen Event?</p>
 				<p>Der "St.Gallerruum" im 2.OG</p>
 				<p>kann gemietet werden.</p>
-				<br/>
+				<p>Reservierungen via Whatsapp</p>
-				<p>Gerne öffnen wir auf Anfrage</p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
 			</div>
 		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
+		</div>
 	</div>
 </footer>
 

src/components/Header.astro

@@ -1,44 +1,83 @@
 ---
 // src/components/Header.astro
+import { Image } from "astro:assets";
+import Logo from "../assets/images/Logo.png";
 const { url } = Astro;
-import "../../styles/components/Header.css"
+import "../styles/components/Header.css";
 ---
 
 <header class="header">
+	<!-- Desktop Layout -->
+	<div class="desktop-layout">
+		<div class="logo-container">
+			<a href="/">
+				<Image src={Logo} alt="Logo" class="logo" />
+			</a>
+		</div>
 
-	<div class="logo-container">
+		<nav class="nav-main">
-		<a href="/">
+			<div class="desktop-menu">
-			<img src="/images/Logo.png" alt="Logo" class="logo">
-		</a>
-	</div>
-
-	<!-- Hauptnavigation: immer Home, About, Contact -->
-	<nav class="nav-main">
-
-		<div class="dropdown">
-
-			<a href="/" class="dropdbtn">Home</a>
-
-			<div class="dropdown-content">
-				<!-- Section navigation links -->
 				<a href="/#hero">Home</a>
-				<a href="/#welcome">Willkommen</a>
 				<a href="/#events">Events</a>
 				<a href="/#gallery">Galerie</a>
 				<a href="/#drinks">Drinks</a>
-				
+				<a href="/#footer">Contact</a>
-				<!-- Page navigation links -->
+				<!--<a href="/#about">About</a>
-				<a href="/events">Events Page</a>
+				<a href="/#contact">Contact</a>-->
-				<a href="/gallery">Gallery Page</a>
-				<a href="/openings">Openings</a>
 			</div>
+		</nav>
+	</div>
 
+	<!-- Mobile Layout -->
+	<div class="mobile-layout">
+		<!-- Centered Logo -->
+		<div class="mobile-logo-container">
+			<a href="/">
+				<Image src={Logo} alt="Logo" class="logo" />
+			</a>
 		</div>
 
-		<a href="/About">About</a>
+		<!-- Burger Menu Below Logo -->
-		<a href="/Contact">Contact</a>
+		<div class="burger-menu">
-
+			<div class="burger-icon">
-	</nav>
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
 
+		<!-- Mobile Navigation Menu (Dropdown) -->
+		<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>
+	</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');
+		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
+		
+		// Toggle menu when burger icon is clicked
+		burgerIcon?.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu?.classList.toggle('active');
+		});
+		
+		// Close menu when a navigation link is clicked
+		mobileMenuLinks.forEach(link => {
+			link.addEventListener('click', () => {
+				burgerIcon?.classList.remove('active');
+				mobileMenu?.classList.remove('active');
+			});
+		});
+	});
+</script>

src/components/Hero.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Hero.astro
-import "../../styles/components/Hero.css"
+import "../styles/components/Hero.css"
 
 const { id } = Astro.props;
 ---
@@ -15,7 +15,7 @@ const { id } = Astro.props;
 
 			<p>Im Herzen von St.Gallen</p>
 
-			<a href="#" class="button">Aktuelles ↓</a>
+			<a href="#welcome" class="button">Aktuelles ↓</a>
 		</div>
 
 	</div>

src/components/HoverCard.astro

@@ -1,21 +1,55 @@
 ---
-// src/components/HoverCard.astro
+import { Image } from "astro:assets";
-import "../../styles/components/HoverCard.css"
+import type { ImageMetadata } from "astro";
-const { title, description, image = "", date} = Astro.props;
+import "../styles/components/HoverCard.css";
+const {title, description, image, date} = Astro.props as {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	date: string;
+};
 ---
 
 <article class="hover-card">
 	<div class="image-container">
-		<img class="card-image" src={image} alt={title} />
+		<Image class="card-image" src={image} alt={title} />
 	</div>
 
-	<h3 class="card-title">{title}</h3>
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
 		<div>
-			<p>{description}</p>
+			<p set:html={description} />
 		</div>
 	</div>
 </article>
 
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			card.addEventListener('click', (e) => {
+				// Only toggle on mobile devices
+				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
+					card.classList.toggle('active');
+				}
+			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
+					card.classList.remove('active');
+				}
+			});
+		});
+	});
+</script>

src/components/ImageCarousel.astro

@@ -1,13 +1,15 @@
 ---
 // src/components/ImageCarousel.astro
-import "../../styles/components/ImageCarousel.css";
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import "../styles/components/ImageCarousel.css";
 
-interface Image {
+interface ImageData {
-  src: string;
+  src: ImageMetadata;
   alt: string;
 }
 
-const { images = [], id } = Astro.props as { images: Image[], id?: string };
+const { images = [], id } = Astro.props as { images: ImageData[], id?: string };
 ---
 
 <section id={id} class="image-carousel-container">
@@ -21,7 +23,7 @@ const { images = [], id } = Astro.props as { images: Image[], id?: string };
       <div class="carousel-track">
         {images.map((image, index) => (
           <div class="carousel-slide" data-index={index}>
-            <img src={image.src} alt={image.alt} class="carousel-image" />
+            <Image src={image.src} alt={image.alt} class="carousel-image" />
           </div>
         ))}
       </div>

src/components/Layout.astro

@@ -2,7 +2,9 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
-import "../../styles/components/Layout.css"
+import "../styles/components/Layout.css"
+import "../styles/variables.css"
+import "../styles/index.css"
 ---
 
 <!doctype html>
@@ -14,8 +16,6 @@ import "../../styles/components/Layout.css"
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Gallus Pub</title>
-		<link rel="stylesheet" href="/styles/variables.css" />
-		<link rel="stylesheet" href="/styles/index.css" />
 	</head>
 
 	<body>

src/components/Welcome.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Welcome.astro
-import "../../styles/components/Welcome.css"
+import { Image } from "astro:assets";
+import "../styles/components/Welcome.css"
+import WelcomeImg from "../assets/images/Welcome.png";
 
 const { id } = Astro.props;
 ---
@@ -9,7 +11,8 @@ const { id } = Astro.props;
 
 	<div class="welcome-text">
 
-		<h2>Herzlich willkommen im Gallus Pub!</h2>
+		<h2>Herzlich willkommen im</h2>
+		<h2>Gallus Pub!</h2>
 
 		<p>
 			Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
@@ -51,7 +54,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome backgrount image" />
+		<Image src={WelcomeImg} alt="Welcome background image" />
 	</div>
 
 </section>

src/pages/index.astro

@@ -1,36 +1,101 @@
 ---
-// src/pages/index.astro
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
-import EventsGrid from '../components/EventsGrid.astro';
+import EventsGrid from "../components/EventsGrid.astro";
 import Drinks from "../components/Drinks.astro";
 import ImageCarousel from "../components/ImageCarousel.astro";
 
+// Import event images
+import eventKaraoke from "../assets/images/events/event_karaoke.jpg";
+import eventPubQuiz from "../assets/images/events/event_pub-quiz.jpg";
+import eventSchlager from "../assets/images/events/event_schlager-karaoke.jpeg";
+import eventAdvent from "../assets/images/events/event_advents-kalender.jpeg";
+import eventFerien from "../assets/images/events/event_ferien.jpeg";
+import eventNeujahr from "../assets/images/events/event_neujahrs-apero.jpeg";
+
+// Import gallery images
+import Gallery1 from "../assets/images/gallery/Gallery1.png";
+import Gallery2 from "../assets/images/gallery/Gallery2.png";
+import Gallery3 from "../assets/images/gallery/Gallery3.png";
+import Gallery4 from "../assets/images/gallery/Gallery4.png";
+import Gallery5 from "../assets/images/gallery/Gallery5.png";
+import Gallery6 from "../assets/images/gallery/Gallery6.png";
+import Gallery7 from "../assets/images/gallery/Gallery7.png";
+import Gallery8 from "../assets/images/gallery/Gallery8.png";
+import Gallery9 from "../assets/images/gallery/Gallery9.png";
+
 const events = [
-  {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+		{
-  {image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+		image: eventKaraoke,
-  {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
+		title: "Karaoke",
-  {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
+		date: "Mittwoch - Samstag",
+		description: `
+			Bei uns gibt es Karaoke Mi-Sa!! <br>
+			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
+			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+	},
+	{
+		image: eventPubQuiz,
+		title: "Pub Quiz",
+		date: "Jeden Freitag",
+		description: `
+			Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
+			Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
+			Auch Einzelpersonen sind herzlich willkommen! <br>
+			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
+		`,
+	},
+		{
+		image: eventSchlager,
+		title: "Schlager Hüttenzauber Karaoke",
+		date: "27. November - 19:00 Uhr",
+		description: `
+			Ab 19:00 Uhr Eintritt ist Frei! Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+	},
+			{
+		image: eventAdvent,
+		title: "Adventskalender",
+		date: "03. Dezember - 20. Dezember 2025",
+		description: `
+			Jeden Tag neue Überraschungen! Check unsere Social Media Stories!
+		`,
+	},
+	{
+		image: eventFerien,
+		title: "Weihnachtsferien",
+		date: "21. Dezember 2025 - 01. Januar 2026",
+		description: `
+			Wir sind ab 02.01.2026 wieder wie gewohnt für euch da! 🍀. <br> Für Anfragen WA <a href="tel:+41772322770">077 232 27 70</a> Antwort innerhalb 48h
+		`,
+	},
+	{
+		image: eventNeujahr,
+		title: "Neujahrs-Apero",
+		date: "02. Januar 2026 - 18:00-20:00 Uhr",
+		description: `
+			
+		`,
+	},
+
 ];
 
 const images = [
-	{ src: '/images/Logo.png', alt: 'Erstes Bild' },
+	{ src: Gallery7, alt: "Siebtes Bild" },
-	{ src: '/images/Logo.png', alt: 'Zweites Bild' },
+	{ src: Gallery8, alt: "Achtes Bild" },
-	{ src: '/images/Logo.png', alt: 'Drittes Bild' },
+	{ src: Gallery9, alt: "Neuntes Bild" },
-	{ src: '/images/Logo.png', alt: 'Viertes Bild' },
+	{ src: Gallery6, alt: "Sechstes Bild" },
-	{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
+	{ src: Gallery1, alt: "Erstes Bild" },
-	{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
+	{ src: Gallery2, alt: "Zweites Bild" },
-	{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
+	{ src: Gallery3, alt: "Drittes Bild" },
-	{ src: '/images/Logo.png', alt: 'Achtes Bild' },
+	{ src: Gallery4, alt: "Viertes Bild" },
-	{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
+	{ src: Gallery5, alt: "Fünftes Bild" },
-	{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
 ];
-
 ---
 
 <Layout>
-
 	<Hero id="hero" />
 	<Welcome id="welcome" />
 	<EventsGrid id="events" events={events} />

src/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/styles/components/ContactForm.css

@@ -1,5 +1,3 @@
-/* styles/components/ContactForm.css */
-
 .contact-container {
   max-width: 800px;
   margin: 2rem auto;

src/styles/components/Drinks.css

@@ -15,7 +15,7 @@
 
 .title {
   font-size: var(--font-size-large);
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
   font-weight: bold;
   color: var(--color-text);
   text-transform: uppercase;
@@ -25,6 +25,7 @@
 .card-link {
   border: 2px solid var(--color-accent-beige);
   padding: 0.75rem 1.5rem;
+  margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -68,7 +69,6 @@
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   width: 80%;
   max-width: 300px;
@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 6em;
+  height: 35vh;
-  width: 6em;
+  width: 35vh;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +94,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +110,25 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
+  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
+.circle-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -149,10 +163,6 @@
     width: 90%;
   }
 
-  .circle {
-    height: 5em;
-    width: 5em;
-  }
 
   .circle-label {
     font-size: 0.7rem;

src/styles/components/Footer.css

@@ -13,9 +13,9 @@
 
 .copyright {
     text-align: center;
-    margin-bottom: 2rem;
+    margin-top: 2rem;
-    padding-bottom: 1rem;
+    padding-top: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-sections {

src/styles/components/Header.css

@@ -0,0 +1,190 @@
+.header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #0e0c0c;
+	z-index: 1000;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(5px);
+	width: 100%;
+	border-bottom: 1px solid #444;
+}
+
+.header-spacer {
+	height: 70px;
+	/* Should match the header height */
+}
+
+/* Desktop Layout */
+.desktop-layout {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 2rem;
+	height: 70px;
+}
+
+.logo-container {
+	display: flex;
+	align-items: center;
+}
+
+.logo {
+	margin-left: 2em;
+	height: 4em;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo:hover {
+	transform: scale(1.05);
+}
+
+.nav-main {
+	display: flex;
+	align-items: center;
+}
+
+.nav-main a {
+	margin: 0 1rem;
+	color: white;
+	text-decoration: none;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.nav-main a:hover {
+	color: #ffa500;
+}
+
+/* Mobile Layout */
+.mobile-layout {
+	display: none;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+}
+
+.mobile-logo-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+
+.mobile-logo-container .logo {
+	margin: 0;
+	height: 3.5em;
+}
+
+/* Burger Menu Styles */
+.burger-menu {
+	display: flex;
+	justify-content: center;
+	cursor: pointer;
+	margin: 0.5rem 0;
+}
+
+.burger-icon {
+	width: 30px;
+	height: 24px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.burger-icon span {
+	display: block;
+	height: 3px;
+	width: 100%;
+	background-color: white;
+	border-radius: 3px;
+	transition: all 0.3s ease;
+}
+
+.burger-icon.active span:nth-child(1) {
+	transform: translateY(10.5px) rotate(45deg);
+}
+
+.burger-icon.active span:nth-child(2) {
+	opacity: 0;
+}
+
+.burger-icon.active span:nth-child(3) {
+	transform: translateY(-10.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+	display: none;
+	width: 100%;
+	background-color: #0e0c0c;
+	flex-direction: column;
+	align-items: center;
+	padding: 0;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	z-index: 999;
+}
+
+.mobile-menu.active {
+	max-height: 300px; /* Adjust based on content */
+	padding: 0.5rem 0;
+}
+
+.mobile-menu a {
+	margin: 0.5rem 0;
+	color: white;
+	text-decoration: none;
+	font-size: 1.2rem;
+	text-align: center;
+	width: 100%;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid #333;
+}
+
+.mobile-menu a:last-child {
+	border-bottom: none;
+}
+
+.mobile-menu a:hover {
+	color: #ffa500;
+}
+
+@media (max-width: 768px) {
+	.header-spacer {
+		height: 120px; /* Adjusted for the taller mobile header */
+	}
+
+	/* Hide desktop layout, show mobile layout */
+	.desktop-layout {
+		display: none;
+	}
+
+	.mobile-layout {
+		display: flex;
+	}
+
+	/* Show mobile menu when active */
+	.mobile-menu.active {
+		display: flex;
+	}
+}
+
+@media (max-width: 480px) {
+	.header-spacer {
+		height: 110px; /* Slightly smaller for very small screens */
+	}
+
+	.mobile-logo-container .logo {
+		height: 3em;
+	}
+
+	.burger-icon {
+		width: 25px;
+		height: 20px;
+	}
+}

src/styles/components/Hero.css

@@ -0,0 +1,65 @@
+.hero-overlay {
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	margin-top: 2em;
+}
+
+h1 {
+	padding-top: 2em;
+}
+
+.hero {
+	position: relative;
+	height: 70vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	margin-bottom: 2rem;
+}
+
+.hero-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	/* Background is set in the component */
+}
+
+.hero-content {
+	position: relative;
+	text-align: center;
+	z-index: 1;
+}
+
+.hero-content h1 {
+	font-size: 4rem;
+	font-weight: bold;
+}
+
+.hero-content p {
+	margin: 0.5rem 0 1rem 0;
+	font-size: 1.2rem;
+}
+
+.button {
+	margin-top: 2rem;
+	padding: 0.8rem 2rem;
+	background: linear-gradient(45deg, #ffa500, #ff7f00);
+	color: white;
+	border: none;
+	border-radius: 30px;
+	font-size: 1rem;
+	font-weight: bold;
+	text-decoration: none;
+	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+	transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.button:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}

src/styles/components/HoverCard.css

@@ -0,0 +1,155 @@
+.hover-card {
+	position: relative;
+	width: 25rem;
+	height: 25rem;
+	border-radius: var(--border-radius);
+	background-color: var(--color-accent-green);
+	box-shadow: var(--box-shadow);
+	transition: transform var(--transition-standard);
+	overflow: hidden;
+	margin: var(--margin-standard);
+	display: flex;
+	flex-direction: column;
+}
+
+/* Hover effects only for devices that support hover */
+@media (hover: hover) and (pointer: fine) {
+	.hover-card:hover {
+		transform: translateY(-5px);
+	}
+
+	.hover-card:hover .hover-text {
+		opacity: 1;
+	}
+
+	.hover-card:hover .card-image {
+		opacity: 0.1;
+	}
+}
+
+.card-title {
+	padding: 15px 15px 5px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-medium);
+	text-align: center;
+	order: -2;
+}
+
+.card_date {
+	padding: 0 15px 15px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-small);
+	text-align: center;
+	font-style: italic;
+	order: -1;
+}
+
+.image-container {
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.card-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: opacity 0.3s ease;
+}
+
+.hover-text {
+	font-size: var(--font-size-small-medium);
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-accent-green-transparent);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	opacity: 0;
+	transition: opacity var(--transition-standard);
+}
+
+.hover-text div {
+	color: var(--color-accent-beige);
+	text-align: center;
+	max-height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	padding-right: 5px;
+}
+
+.hover-text div::-webkit-scrollbar {
+	width: 5px;
+}
+
+.hover-text div::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+}
+
+.hover-text div::-webkit-scrollbar-thumb {
+	background: var(--color-accent-beige);
+	border-radius: 10px;
+}
+
+.hover-text div {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
+}
+
+/* Active state for mobile tap functionality */
+.hover-card.active .hover-text {
+	opacity: 1;
+}
+
+.hover-card.active .card-image {
+	opacity: 0.1;
+}
+
+.hover-text p {
+	margin: 0;
+	padding: 0;
+}
+
+@media (max-width: 768px) {
+	.hover-card {
+		width: 100%;
+		max-width: 350px;
+		/* Maintain square aspect ratio */
+		aspect-ratio: 1 / 1;
+		height: auto;
+		/* Add cursor pointer to indicate it's clickable */
+		cursor: pointer;
+	}
+
+	/* Add visual feedback for tap */
+	.hover-card:active {
+		transform: scale(0.98);
+	}
+
+	.hover-card::after {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: var(--color-accent-beige);
+		font-size: 0.7rem;
+		padding: 4px 8px;
+		border-radius: 12px;
+		opacity: 0.8;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Hide the hint when card is active */
+	.hover-card.active::after {
+		display: none;
+	}
+}

src/styles/index.css

@@ -12,7 +12,8 @@ html {
 
 body {
 	font-family: var(--font-family-primary), serif;
-	background-color: var(--color-background);
+	background-color: var(--color-background, #000000);
+	background: #000000;
 	color: var(--color-text);
 	line-height: var(--line-height);
 }
@@ -23,3 +24,12 @@ body {
 	width: var(--container-width);
 	margin: 0 auto;
 }
+
+
+a {
+	color: #ffa500;
+}
+
+a:hover {
+	text-decoration: none;
+}

src/styles/variables.css

@@ -0,0 +1,34 @@
+:root {
+	/* Colors */
+	--color-background: #000000 !important;
+	--color-text: #f5f5f5;
+	--color-accent-green: #213b28;
+	--color-accent-beige: #ceb39b;
+	--color-accent-green-transparent: rgba(33, 59, 40, 0.95);
+	--color-shadow: rgba(0, 0, 0, 0.2);
+	--color-orange1: #ffa500;
+
+	/* Font Sizes */
+	--font-family-primary: 'Georgia', serif;
+	--font-size-small: 1rem;
+	--font-size-small-medium: 1.2rem;
+	--font-size-medium: 1.5rem;
+	--font-size-large: 2rem;
+	--line-height: 1.6;
+
+
+	--container-width: 100%;
+	--container-max-width: 1600px;
+	--padding-vertical: 2rem;
+	--padding-horizontal: 0;
+	--margin-standard: 1rem;
+	--gap-standard: 30px;
+
+	--border-radius: 8px;
+	--box-shadow: 0 4px 8px var(--color-shadow);
+	--transition-standard: 0.3s ease;
+
+
+	--breakpoint-mobile: 768px;
+	--breakpoint-desktop: 1600px;
+}

styles/components/Header.css

@@ -1,131 +0,0 @@
-.header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(26, 26, 26, 0.95);
-    z-index: 1000;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    height: 70px;
-}
-
-
-.header-spacer {
-    height: 70px; /* Should match the header height */
-}
-
-
-.logo-container {
-    display: flex;
-    align-items: center;
-}
-
-.logo {
-    margin-left: 2em;
-    height: 4em;
-    width: auto;
-    transition: transform 0.3s ease;
-}
-
-.logo:hover {
-    transform: scale(1.05);
-}
-
-.nav-main {
-    display: flex;
-    align-items: center;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 200px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-@media (max-width: 768px) {
-    .header {
-        height: 65px;
-    }
-    
-    .logo {
-        margin-left: 1em;
-        height: 3em;
-    }
-    
-    .dropdown-content {
-        right: 0;
-    }
-    
-    .header-spacer {
-        height: 65px;
-    }
-}
-
-@media (max-width: 480px) {
-    .header {
-        padding: 0.5rem;
-        height: 60px;
-    }
-    
-    .logo {
-        margin-left: 0.5em;
-        height: 2.5em;
-    }
-    
-    .nav-main a,
-    .dropdbtn {
-        margin: 0 0.5rem;
-        font-size: 0.9rem;
-    }
-    
-    .header-spacer {
-        height: 60px;
-    }
-}

styles/components/Hero.css

@@ -1,128 +0,0 @@
-/* === Header & Nav === */
-.header {
-    background-color: #0e0c0c;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    border-bottom: 1px solid #444;
-}
-
-
-.hero-overlay {
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-top: 2em;
-}
-
-h1 {
-    padding-top: 2em;
-}
-
-.nav-main {
-    display: flex;
-    align-items: center;
-    margin-right: 377px;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 160px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-.hero {
-    position: relative;
-    height: 70vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    margin-bottom: 2rem;
-}
-
-.hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* Background is set in the component */
-}
-
-.hero-content {
-    position: relative;
-    text-align: center;
-    z-index: 1;
-}
-
-.hero-content h1 {
-    font-size: 4rem;
-    font-weight: bold;
-}
-
-.hero-content p {
-    margin: 0.5rem 0 1rem 0;
-    font-size: 1.2rem;
-}
-
-.button {
-    margin-top: 2rem;
-    padding: 0.8rem 2rem;
-    background: linear-gradient(45deg, #ffa500, #ff7f00);
-    color: white;
-    border: none;
-    border-radius: 30px;
-    font-size: 1rem;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}

styles/components/HoverCard.css

@@ -1,112 +0,0 @@
-.hover-card {
-  position: relative;
-  width: 350px;
-  height: 400px;
-  border-radius: var(--border-radius);
-  background-color: var(--color-accent-green);
-  box-shadow: var(--box-shadow);
-  transition: transform var(--transition-standard);
-  overflow: hidden;
-  margin: var(--margin-standard);
-  display: flex;
-  flex-direction: column;
-}
-
-.hover-card:hover {
-  transform: translateY(-5px);
-}
-
-.card-title {
-  padding: 15px 15px 5px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-medium);
-  text-align: center;
-  order: -2;
-}
-
-.card_date {
-  padding: 0 15px 15px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-small);
-  text-align: center;
-  font-style: italic;
-  order: -1;
-}
-
-.image-container {
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.card-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity 0.3s ease;
-}
-
-.hover-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-accent-green-transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  opacity: 0;
-  transition: opacity var(--transition-standard);
-}
-
-.hover-text div {
-  color: var(--color-accent-beige);
-  text-align: center;
-  max-height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  padding-right: 5px;
-}
-
-.hover-text div::-webkit-scrollbar {
-  width: 5px;
-}
-
-.hover-text div::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.hover-text div::-webkit-scrollbar-thumb {
-  background: var(--color-accent-beige);
-  border-radius: 10px;
-}
-
-.hover-text div {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
-}
-
-.hover-card:hover .hover-text {
-  opacity: 1;
-}
-
-.hover-card:hover .card-image {
-  opacity: 0.1;
-}
-
-.hover-text p {
-  margin: 0;
-  padding: 0;
-}
-
-@media (max-width: 768px) {
-  .hover-card {
-    width: 100%;
-    max-width: 350px;
-  }
-}

styles/variables.css

@@ -1,30 +0,0 @@
-:root {
-  /* Colors */
-  --color-background: #000;
-  --color-text: #f5f5f5;
-  --color-accent-green: #213b28;
-  --color-accent-beige: #ceb39b;
-  --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
-  --color-shadow: rgba(0, 0, 0, 0.2);
-
-  --font-family-primary: 'Georgia', serif;
-  --font-size-small: 1rem;
-  --font-size-medium: 1.5rem;
-  --font-size-large: 2rem;
-  --line-height: 1.6;
-
-  --container-width: 100%;
-  --container-max-width: 1600px;
-  --padding-vertical: 2rem;
-  --padding-horizontal: 0;
-  --margin-standard: 1rem;
-  --gap-standard: 30px;
-
-  --border-radius: 8px;
-  --box-shadow: 0 4px 8px var(--color-shadow);
-  --transition-standard: 0.3s ease;
-
-
-  --breakpoint-mobile: 768px;
-  --breakpoint-desktop: 1600px;
-}