Refactor Hero component styles and move inline styles to CSS file

This commit centralizes Hero component styles by moving previously inline styles in `Hero.astro` to `Hero.css`. Additionally, it introduces a `.hero-overlay` class with improved background styling, removes unused component-specific background settings, and aligns spacing for better maintainability and consistency.
Introduce CSS variables for consistent theming
2025-07-19 16:56:07 +02:00 · 2025-07-19 16:45:51 +02:00 · 2025-07-19 16:26:01 +02:00
14 changed files with 449 additions and 171 deletions
--- a/Gallus_Pub_v1/package-lock.json
+++ b/Gallus_Pub_v1/package-lock.json
@ -8,7 +8,7 @@
      "name": "gallus-pub-v1",
      "version": "0.0.1",
      "dependencies": {
-        "astro": "^5.11.0"
+        "astro": "^5.12.0"
      }
    },
    "node_modules/@astrojs/compiler": {
@ -24,9 +24,9 @@
      "license": "MIT"
    },
    "node_modules/@astrojs/markdown-remark": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.2.tgz",
-      "integrity": "sha512-bO35JbWpVvyKRl7cmSJD822e8YA8ThR/YbUsciWNA7yTcqpIAL2hJDToWP5KcZBWxGT6IOdOkHSXARSNZc4l/Q==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.3.tgz",
+      "integrity": "sha512-DDRtD1sPvAuA7ms2btc9A7/7DApKqgLMNrE6kh5tmkfy8utD0Z738gqd3p5aViYYdUtHIyEJ1X4mCMxfCfu15w==",
      "license": "MIT",
      "dependencies": {
        "@astrojs/internal-helpers": "0.6.1",
@ -44,7 +44,7 @@
        "remark-rehype": "^11.1.2",
        "remark-smartypants": "^3.0.2",
        "shiki": "^3.2.1",
-        "smol-toml": "^1.3.1",
+        "smol-toml": "^1.3.4",
        "unified": "^11.0.5",
        "unist-util-remove-position": "^5.0.0",
        "unist-util-visit": "^5.0.0",
@ -1227,60 +1227,60 @@
      ]
    },
    "node_modules/@shikijs/core": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.7.0.tgz",
-      "integrity": "sha512-yilc0S9HvTPyahHpcum8eonYrQtmGTU0lbtwxhA6jHv4Bm1cAdlPFRCJX4AHebkCm75aKTjjRAW+DezqD1b/cg==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.8.1.tgz",
+      "integrity": "sha512-uTSXzUBQ/IgFcUa6gmGShCHr4tMdR3pxUiiWKDm8pd42UKJdYhkAYsAmHX5mTwybQ5VyGDgTjW4qKSsRvGSang==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "3.7.0",
+        "@shikijs/types": "3.8.1",
        "@shikijs/vscode-textmate": "^10.0.2",
        "@types/hast": "^3.0.4",
        "hast-util-to-html": "^9.0.5"
      }
    },
    "node_modules/@shikijs/engine-javascript": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.7.0.tgz",
-      "integrity": "sha512-0t17s03Cbv+ZcUvv+y33GtX75WBLQELgNdVghnsdhTgU3hVcWcMsoP6Lb0nDTl95ZJfbP1mVMO0p3byVh3uuzA==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.8.1.tgz",
+      "integrity": "sha512-rZRp3BM1llrHkuBPAdYAzjlF7OqlM0rm/7EWASeCcY7cRYZIrOnGIHE9qsLz5TCjGefxBFnwgIECzBs2vmOyKA==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "3.7.0",
+        "@shikijs/types": "3.8.1",
        "@shikijs/vscode-textmate": "^10.0.2",
        "oniguruma-to-es": "^4.3.3"
      }
    },
    "node_modules/@shikijs/engine-oniguruma": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.7.0.tgz",
-      "integrity": "sha512-5BxcD6LjVWsGu4xyaBC5bu8LdNgPCVBnAkWTtOCs/CZxcB22L8rcoWfv7Hh/3WooVjBZmFtyxhgvkQFedPGnFw==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.8.1.tgz",
+      "integrity": "sha512-KGQJZHlNY7c656qPFEQpIoqOuC4LrxjyNndRdzk5WKB/Ie87+NJCF1xo9KkOUxwxylk7rT6nhlZyTGTC4fCe1g==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "3.7.0",
+        "@shikijs/types": "3.8.1",
        "@shikijs/vscode-textmate": "^10.0.2"
      }
    },
    "node_modules/@shikijs/langs": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.7.0.tgz",
-      "integrity": "sha512-1zYtdfXLr9xDKLTGy5kb7O0zDQsxXiIsw1iIBcNOO8Yi5/Y1qDbJ+0VsFoqTlzdmneO8Ij35g7QKF8kcLyznCQ==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.8.1.tgz",
+      "integrity": "sha512-TjOFg2Wp1w07oKnXjs0AUMb4kJvujML+fJ1C5cmEj45lhjbUXtziT1x2bPQb9Db6kmPhkG5NI2tgYW1/DzhUuQ==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "3.7.0"
+        "@shikijs/types": "3.8.1"
      }
    },
    "node_modules/@shikijs/themes": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.7.0.tgz",
-      "integrity": "sha512-VJx8497iZPy5zLiiCTSIaOChIcKQwR0FebwE9S3rcN0+J/GTWwQ1v/bqhTbpbY3zybPKeO8wdammqkpXc4NVjQ==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.8.1.tgz",
+      "integrity": "sha512-Vu3t3BBLifc0GB0UPg2Pox1naTemrrvyZv2lkiSw3QayVV60me1ujFQwPZGgUTmwXl1yhCPW8Lieesm0CYruLQ==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "3.7.0"
+        "@shikijs/types": "3.8.1"
      }
    },
    "node_modules/@shikijs/types": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.7.0.tgz",
-      "integrity": "sha512-MGaLeaRlSWpnP0XSAum3kP3a8vtcTsITqoEPYdt3lQG3YCdQH4DnEhodkYcNMcU0uW0RffhoD1O3e0vG5eSBBg==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.8.1.tgz",
+      "integrity": "sha512-5C39Q8/8r1I26suLh+5TPk1DTrbY/kn3IdWA5HdizR0FhlhD05zx5nKCqhzSfDHH3p4S0ZefxWd77DLV+8FhGg==",
      "license": "MIT",
      "dependencies": {
        "@shikijs/vscode-textmate": "^10.0.2",
@ -1517,14 +1517,14 @@
      }
    },
    "node_modules/astro": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.11.0.tgz",
-      "integrity": "sha512-MEICntERthUxJPSSDsDiZuwiCMrsaYy3fnDhp4c6ScUfldCB8RBnB/myYdpTFXpwYBy6SgVsHQ1H4MuuA7ro/Q==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-5.12.0.tgz",
+      "integrity": "sha512-Oov5JsMFHuUmuO+Nx6plfv3nQNK1Xl/8CgLvR8lBhZTjYnraxhuPX5COVAzbom+YLgwaDfK7KBd8zOEopRf9mg==",
      "license": "MIT",
      "dependencies": {
        "@astrojs/compiler": "^2.12.2",
        "@astrojs/internal-helpers": "0.6.1",
-        "@astrojs/markdown-remark": "6.3.2",
+        "@astrojs/markdown-remark": "6.3.3",
        "@astrojs/telemetry": "3.3.0",
        "@capsizecss/unpack": "^2.4.0",
        "@oslojs/encoding": "^1.1.0",
@ -1567,6 +1567,7 @@
        "rehype": "^13.0.2",
        "semver": "^7.7.1",
        "shiki": "^3.2.1",
+        "smol-toml": "^1.3.4",
        "tinyexec": "^0.3.2",
        "tinyglobby": "^0.2.12",
        "tsconfck": "^3.1.5",
@ -4075,17 +4076,17 @@
      }
    },
    "node_modules/shiki": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.7.0.tgz",
-      "integrity": "sha512-ZcI4UT9n6N2pDuM2n3Jbk0sR4Swzq43nLPgS/4h0E3B/NrFn2HKElrDtceSf8Zx/OWYOo7G1SAtBLypCp+YXqg==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.8.1.tgz",
+      "integrity": "sha512-+MYIyjwGPCaegbpBeFN9+oOifI8CKiKG3awI/6h3JeT85c//H2wDW/xCJEGuQ5jPqtbboKNqNy+JyX9PYpGwNg==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/core": "3.7.0",
-        "@shikijs/engine-javascript": "3.7.0",
-        "@shikijs/engine-oniguruma": "3.7.0",
-        "@shikijs/langs": "3.7.0",
-        "@shikijs/themes": "3.7.0",
-        "@shikijs/types": "3.7.0",
+        "@shikijs/core": "3.8.1",
+        "@shikijs/engine-javascript": "3.8.1",
+        "@shikijs/engine-oniguruma": "3.8.1",
+        "@shikijs/langs": "3.8.1",
+        "@shikijs/themes": "3.8.1",
+        "@shikijs/types": "3.8.1",
        "@shikijs/vscode-textmate": "^10.0.2",
        "@types/hast": "^3.0.4"
      }
--- a/Gallus_Pub_v1/package.json
+++ b/Gallus_Pub_v1/package.json
@ -9,6 +9,6 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^5.11.0"
+    "astro": "^5.12.0"
  }
 }
--- a/Gallus_Pub_v1/src/components/Drinks.astro
+++ b/Gallus_Pub_v1/src/components/Drinks.astro
@ -1,25 +1,33 @@
 ---
 import "../../styles/components/Drinks.css"
 ---
-<div class="Drinks">
-    <div class="title">Drinks</div>
+<section class="Drinks">
+    <h2 class="title">Drinks</h2>

    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>

-    <div class="monats-hit">Monats Hit</div>
+    <h3 class="monats-hit">Monats Hit</h3>

    <div class="mate-vodka">
-        <div class="circle"></div>
+        <div class="circle" title="Mate Vodka">
+            <span class="circle-label">Mate Vodka</span>
+        </div>
        <div>Mate Vodka</div>
    </div>

    <div class="circle-row">
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
+        <div class="circle" title="Bier">
+            <span class="circle-label">Bier</span>
+        </div>
+        <div class="circle" title="Wein">
+            <span class="circle-label">Wein</span>
+        </div>
+        <div class="circle" title="Cocktails">
+            <span class="circle-label">Cocktails</span>
+        </div>
    </div>

-    <div class="note">
-        Wir bieten eine Auswahl...
-    </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>
--- a/Gallus_Pub_v1/src/components/EventsGrid.astro
+++ b/Gallus_Pub_v1/src/components/EventsGrid.astro
@ -1,27 +1,27 @@
 ---
 // src/components/EventsGrid.astro
+
+import HoverCard from "./HoverCard.astro";
 interface Event {
+    image: string;
  title: string;
  date: Date;
  description: string;
 }
 const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
-import '/styles/components/EventsGrid.css';
+import '../../styles/components/EventsGrid.css';
 ---

 <section class="events-gird container">

 	{events.map((event: Event)  => (

-		<article class="event-card">
-
-			<h3>{event.title}</h3>
-
-			<p class="date">{event.date}</p>
-			<p class="description">{event.description}</p>
-
-		</article>
-
-	))}
+            <HoverCard
+                    title={event.title}
+                    date={event.date}
+                    description={event.description}
+                    image={event.image}
+            />
+    ))}

 </section>
--- a/Gallus_Pub_v1/src/components/Hero.astro
+++ b/Gallus_Pub_v1/src/components/Hero.astro
@ -11,7 +11,7 @@ import "../../styles/components/Hero.css"

 			<h1>Dein Irish Pub</h1>

-			<p>Dein Irish Pub</p>
+			<p>Im Herzen von St.Gallen</p>

 			<a href="#" class="button">Aktuelles ↓</a>
 		</div>
@ -21,16 +21,5 @@ import "../../styles/components/Hero.css"
 </section>

 <style>
-	.hero-overlay {
-		background-image: url('/images/Background.png');
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-		margin-top: 2em;
-	}

-	h1 {
-		padding-top: 2em;
-	}
 </style>
-
--- a/Gallus_Pub_v1/src/components/HoverCard.astro
+++ b/Gallus_Pub_v1/src/components/HoverCard.astro
@ -1,21 +1,21 @@
 ---
 // src/components/HoverCard.astro
-const { title, description, image, link } = Astro.props;
+import "../../styles/components/HoverCard.css"
+const { title, description, image = "", date} = Astro.props;
 ---

 <article class="hover-card">
+	<div class="image-container">
+		<img class="card-image" src={image} alt={title} />
+	</div>

-	<a href={link}>
-
-		<img src={image} alt={title} />
-
-		<div class="info">
-
-			<h3>{title}</h3>
+	<h3 class="card-title">{title}</h3>
+	<h4 class="card_date">{date}</h4>

+	<div class="hover-text">
+		<div>
 			<p>{description}</p>
-
 		</div>
-	</a>
-	
+	</div>
 </article>
+
--- a/Gallus_Pub_v1/src/components/Layout.astro
+++ b/Gallus_Pub_v1/src/components/Layout.astro
@ -13,8 +13,8 @@ import Footer from "./Footer.astro";
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Gallus Pub</title>
-		<link rel="stylesheet" href="/Gallus_Pub_v1/styles/index.css" />
-
+		<link rel="stylesheet" href="/styles/variables.css" />
+		<link rel="stylesheet" href="/styles/index.css" />
 	</head>

 	<body>
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@ -1,6 +1,5 @@
 ---
 // src/pages/index.astro
-import "../../styles/index.css"
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
@ -8,10 +7,10 @@ import EventsGrid from '../components/EventsGrid.astro';
 import Drinks from "../components/Drinks.astro";

 const events = [
-  { 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' },
-  { 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' },
-  { title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
-  { 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' }
+  {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: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
+  {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' }
 ];
 ---

--- a/Gallus_Pub_v1/styles/components/Drinks.css
+++ b/Gallus_Pub_v1/styles/components/Drinks.css
@ -1,57 +1,195 @@
 .Drinks {
-    font-family: sans-serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 2rem;
-    text-align: center;
-    background-color: #fff;
-    color: #ceb39b;
-    padding: 2rem;
-    width: 100%;
+  font-family: var(--font-family-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+  text-align: center;
+  background-color: var(--color-accent-green);
+  color: var(--color-accent-beige);
+  padding: 2rem;
+  width: 100%;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
 }

 .title {
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
+  font-size: var(--font-size-large);
+  margin-bottom: 1.5rem;
+  font-weight: bold;
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }

 .card-link {
-    border: 1px solid #000;
-    padding: 0.5rem 1rem;
-    margin-bottom: 2rem;
-    color: #fff;
-    background: linear-gradient(45deg, #ffa500, #ff7f00);
+  border: 2px solid var(--color-accent-beige);
+  padding: 0.75rem 1.5rem;
+  margin-bottom: 2.5rem;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  text-decoration: none;
+  border-radius: var(--border-radius);
+  font-weight: bold;
+  transition: all var(--transition-standard);
+  display: inline-block;
+}
+
+.card-link:hover {
+  background-color: var(--color-accent-beige);
+  color: var(--color-accent-green);
+  transform: translateY(-3px);
+  box-shadow: var(--box-shadow);
 }

 .monats-hit {
-    margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: var(--font-size-medium);
+  color: var(--color-text);
+  font-weight: bold;
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+.monats-hit::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 2px;
+  background-color: var(--color-accent-beige);
 }

 .mate-vodka {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.mate-vodka div:not(.circle) {
+  margin-top: 0.5rem;
+  font-weight: bold;
+  color: var(--color-accent-beige);
 }

 .circle {
-    height: 6em;
-    width: 6em;
-    border: 2px solid #000;
-    border-radius: 50%;
-    margin: 1rem;
+  height: 6em;
+  width: 6em;
+  border: 2px solid var(--color-accent-beige);
+  border-radius: 50%;
+  margin: 0.5rem;
+  background: radial-gradient(circle at 30% 30%, rgba(206, 179, 155, 0.2), transparent 70%);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  transition: all var(--transition-standard);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.circle:hover {
+  transform: scale(1.05);
+  border-color: var(--color-text);
+}
+
+.circle-label {
+  opacity: 0;
+  color: var(--color-text);
+  font-weight: bold;
+  font-size: 0.8rem;
+  text-align: center;
+  transition: opacity var(--transition-standard);
+  position: absolute;
+}
+
+.circle:hover .circle-label {
+  opacity: 1;
 }

 .circle-row {
-    display: flex;
-    justify-content: center;
-    gap: 2rem;
-    margin: 1rem 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
 }

 .note {
-    margin-top: 2rem;
-    font-style: italic;
-    text-align: center;
+  margin-top: 2rem;
+  font-style: italic;
+  text-align: center;
+  color: var(--color-text);
+  max-width: 80%;
+  line-height: 1.6;
+  padding: 1rem;
+  border-top: 1px solid rgba(206, 179, 155, 0.3);
+  border-bottom: 1px solid rgba(206, 179, 155, 0.3);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .Drinks {
+    padding: 1.5rem;
+  }
+
+  .title {
+    font-size: calc(var(--font-size-medium) + 0.2rem);
+  }
+
+  .mate-vodka {
+    width: 90%;
+  }
+
+  .circle {
+    height: 5em;
+    width: 5em;
+  }
+
+  .circle-label {
+    font-size: 0.7rem;
+  }
+
+  /* Make labels always visible on touch devices */
+  .circle-label {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 2px 5px;
+    border-radius: 3px;
+  }
+
+  .circle-row {
+    gap: 1rem;
+  }
+
+  .note {
+    max-width: 95%;
+  }
+}
+
+@media (max-width: 480px) {
+  .circle-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-link {
+    padding: 0.5rem 1rem;
+  }
+
+  .circle {
+    margin: 1rem 0;
+  }
+
+  .mate-vodka {
+    padding: 0.8rem;
+  }
 }
--- a/Gallus_Pub_v1/styles/components/EventsGrid.css
+++ b/Gallus_Pub_v1/styles/components/EventsGrid.css
@ -1,32 +1,20 @@
-article {
-    margin-bottom: 1em;
+.events-gird {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--gap-standard);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  width: 100%;
 }

-.events-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: 2rem;
-    margin: 3rem 0;
+@media (min-width: 1600px) {
+  .events-gird {
+    justify-content: space-between;
+  }
 }
-.event-card {
-    background-color: #2a2a2a;
-    padding: 1.5rem;
-    border-radius: 8px;
-    transition: transform 0.2s;
-}
-.event-card:hover {
-    transform: translateY(-5px);
-}
-.event-card h3 {
-    margin-bottom: 0.5rem;
-    color: #ffa500;
-}
-.event-card .date {
-    font-size: 0.9rem;
-    color: #ccc;
-    margin-bottom: 1rem;
-}
-.event-card .description {
-    font-size: 1rem;
-    color: #eee;
+
+@media (max-width: 1599px) {
+  .events-gird {
+    justify-content: space-around;
+  }
 }
--- a/Gallus_Pub_v1/styles/components/Hero.css
+++ b/Gallus_Pub_v1/styles/components/Hero.css
@ -8,6 +8,19 @@
    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;
@ -76,7 +89,7 @@
    left: 0;
    right: 0;
    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
+    /* Background is set in the component */
 }

 .hero-content {
--- a/Gallus_Pub_v1/styles/components/HoverCard.css
+++ b/Gallus_Pub_v1/styles/components/HoverCard.css
@ -0,0 +1,112 @@
+.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;
+  }
+}
--- a/Gallus_Pub_v1/styles/index.css
+++ b/Gallus_Pub_v1/styles/index.css
@ -6,15 +6,15 @@
 }

 body {
-	font-family: 'Georgia', serif;
-	background-color: #1f1414;
-	color: #f5f5f5;
-	line-height: 1.6;
+	font-family: var(--font-family-primary);
+	background-color: var(--color-background);
+	color: var(--color-text);
+	line-height: var(--line-height);
 }

 /* === Container für zentralen Content === */
 .container {
-	max-width: 1140px;
+	max-width: var(--container-max-width);
+	width: var(--container-width);
 	margin: 0 auto;
-	padding: 0 1rem;
 }
--- a/Gallus_Pub_v1/styles/variables.css
+++ b/Gallus_Pub_v1/styles/variables.css
@ -0,0 +1,30 @@
+: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;
+}