/* Startseiten-Kacheln – responsives Grid statt fixer Pixel-Positionen */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 16px;
}

/* Auf schmalen Bildschirmen (Smartphone) nur eine Spalte statt zwei */
@media (max-width: 480px) {
	.tiles { grid-template-columns: 1fr; }
}

.tile {
	position: relative;
	display: block;
	text-align: center;
}

.tile img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.tile .preview { display: none; }

/* Bild-Kacheln mit Textüberschrift: weisser Schriftzug immer links oben,
   mit dunklem Verlauf als Hintergrund, damit die Schrift auch auf hellen
   Fotos gut lesbar bleibt. Alle Bilder auf der Startseite sehen dadurch
   gleich aus: ein Foto, oben links ein Titel. */
.tile-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 14px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	border-radius: 4px 4px 0 0;
	color: #ffffff;
	font-family: VAGRoundedLTPro-Thin, sans-serif;
	/* "Fluid typography": die Schrift wächst/schrumpft stufenlos mit der
	   Fensterbreite mit (statt in zwei festen Sprüngen), und zwar in "rem"
	   (bezogen auf die feste Grundschrift von html, nicht auf die variable
	   Grundschrift von body). So kann sich dieser Wert nicht mehr mit der
	   Schriftgrössen-Anpassung für Smartphones (siehe styles.css) aufaddieren.
	   Wichtig: die Kacheln werden bei 3 Bildern nebeneinander (aktuelles Grid)
	   deutlich schmaler als bei nur 2 - darum wächst die Schrift hier bewusst
	   langsamer mit der Fensterbreite mit (3.2vw statt 6vw) und hat eine
	   niedrigere Obergrenze (3.2rem statt 3.6rem). Mit dieser Formel wurde
	   geprüft (Playwright, echte Schrift, 320-1400px in 20px-Schritten), dass
	   auch ein langes einzelnes Wort wie "Teekannen" in einer eigenen Zeile
	   nirgends zusätzlich umbricht. Falls später weitere Kacheln mit noch
	   längeren Wörtern hinzukommen, ggf. den mittleren Wert (vw) nochmals
	   reduzieren. clamp(Minimum, bevorzugter Wert, Maximum):
	   - nie kleiner als 1.1rem (kleinstes Smartphone)
	   - nie grösser als 3.2rem (Desktop)
	   - dazwischen 3.2% der Fensterbreite, stufenlos */
	font-size: clamp(1.1rem, 3.2vw, 3.2rem);
	line-height: 1.05;
	text-align: left;
	overflow-wrap: break-word;
}

/* Auf schmalen Bildschirmen (Smartphone, eine Spalte) etwas kompakteres
   Padding - die Schriftgrösse selbst regelt jetzt das clamp() oben stufenlos
   mit, ein zusätzlicher fester Sprung ist darum nicht mehr nötig. */
@media (max-width: 480px) {
	.tile-label { padding: 8px 10px; }
}

/* Vorschaubild nur auf Geräten mit echtem Hover einblenden (Desktop/Maus) */
@media (hover: hover) {
	.tile:hover .preview {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -12px);
		z-index: 20;
		background: #ffffff;
		padding: 4px;
		border: 1px solid #E9D7A0;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}
	.tile .preview img {
		width: 220px;
		max-width: 60vw;
		border-radius: 0;
	}
}