Refactor styles and imports for consistency and maintainability:

- **CSS restructuring**: Moved `styles` folder into `src` for better organization.
- **Updated imports**: Adjusted component CSS imports to reflect new paths.
- **Component tweaks**:
  - Increased HoverCard width from `350px` to `400px` for better visual balance.
  - Adjusted Footer layout: reorganized copyright and added email link.
  - Modified Drinks circle dimensions (from `6em` to `9em`) for improved design.
- **Footer styles**: Changed copyright section's layout with top spacing and border adjustments.

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,5 +1,5 @@
 ---
-import "../../styles/components/Drinks.css"
+import "../styles/components/Drinks.css"
 
 const { id } = Astro.props;
 ---

src/components/EventsGrid.astro

@@ -13,7 +13,7 @@ const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
 	events?: Event[];
 	id?: string;
 };
-import "../../styles/components/EventsGrid.css";
+import "../styles/components/EventsGrid.css";
 ---
 
 <h2 class="section-title">Events</h2>

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">
 	<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>Gerne öffnen wir auf Anfrage</p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
+				<p>Reservierungen via Whatsapp</p>
 			</div>
 		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
+		</div>
 	</div>
 </footer>
 

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
 // src/components/Header.astro
 const { url } = Astro;
-import "../../styles/components/Header.css";
+import "../styles/components/Header.css";
 ---
 
 <header class="header">

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;
 ---

src/components/HoverCard.astro

@@ -1,7 +1,7 @@
 ---
 // src/components/HoverCard.astro
-import "../../styles/components/HoverCard.css";
-const { title, description, image = "", date } = Astro.props;
+import "../styles/components/HoverCard.css";
+const {title, description, image = ""} = Astro.props;
 ---
 
 <article class="hover-card">
@@ -9,9 +9,6 @@ const { title, description, image = "", date } = Astro.props;
 		<img class="card-image" src={image} alt={title} />
 	</div>
 
-	<h3 class="card-title" set:html={title} />
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
 		<p set:html={description} />
 	</div>

src/components/ImageCarousel.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/ImageCarousel.astro
-import "../../styles/components/ImageCarousel.css";
+import "../styles/components/ImageCarousel.css";
 
 interface Image {
   src: string;

src/components/Layout.astro

@@ -2,9 +2,9 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
-import "../../styles/components/Layout.css"
-import "../../styles/variables.css"
-import "../../styles/index.css"
+import "../styles/components/Layout.css"
+import "../styles/variables.css"
+import "../styles/index.css"
 ---
 
 <!doctype html>

src/components/Welcome.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Welcome.astro
-import "../../styles/components/Welcome.css"
+import "../styles/components/Welcome.css"
 
 const { id } = Astro.props;
 ---

src/styles/components/Drinks.css

@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 6em;
-  width: 6em;
+  height: 9em;
+  width: 9em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;

src/styles/components/Footer.css

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

src/styles/components/HoverCard.css

@@ -1,6 +1,6 @@
 .hover-card {
 	position: relative;
-	width: 350px;
+	width: 400px;
 	height: 400px;
 	border-radius: var(--border-radius);
 	background-color: var(--color-accent-green);