Rename Menu.pdf to Getraenke_Gallus_2025.pdf in the public/pdf directory.

src/components/HoverCard.astro

@@ -1,5 +1,4 @@
 ---
-// src/components/HoverCard.astro
 import "../styles/components/HoverCard.css";
 const {title, description, image = "", date} = Astro.props;
 ---
@@ -21,12 +20,29 @@ const {title, description, image = "", date} = Astro.props;
 		const hoverCards = document.querySelectorAll('.hover-card');
 		
 		hoverCards.forEach(card => {
-			card.addEventListener('click', () => {
+			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)) {
+					card.classList.remove('active');
+				}
+			});
 		});
 	});
-</script>
+</script>

src/styles/components/HoverCard.css

@@ -12,8 +12,19 @@
 	flex-direction: column;
 }
 
-.hover-card:hover {
+/* Hover effects only for devices that support hover */
-	transform: translateY(-5px);
+@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 {
@@ -93,15 +104,7 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
+/* Active state for mobile tap functionality */
-	opacity: 1;
-}
-
-.hover-card:hover .card-image {
-	opacity: 0.1;
-}
-
-/* Active state for mobile click functionality */
 .hover-card.active .hover-text {
 	opacity: 1;
 }
@@ -122,5 +125,33 @@
 		/* 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);
+	}
+
+	/* Optional: Add a subtle hint that cards are tappable */
+	.hover-card::after {
+		content: "👆 Tap to view details";
+		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;
 	}
 }