/* Grundlegende Stile für Body und HTML (unverändert) */
html {
	height: 100%;
}

body {
	position: relative;
	min-height: 100%;
	margin: 0;
	font-family: sans-serif;
	background-color: #f0f2f5;
	padding-bottom: 60px; 
	box-sizing: border-box;
}

/* CSS-Variablen für einfache Wartung */
:root {
	--kachel-breite: 200px;
	--gap: 20px;
}

/* Container für die Kacheln - JETZT MIT SYMMETRIE-LOGIK */
.kachel-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	display: flex;
	flex-wrap: wrap; /* Umbruch ist weiterhin aktiv */
	gap: var(--gap);
	justify-content: center;
	
	/* Wichtig: Die Breite wird durch die Hilfsklassen gesteuert */
	/* Standardbreite, falls keine Klasse gesetzt ist */
	max-width: 90%;
}

/* --- HIER KOMMT DIE NEUE LOGIK --- */

/* Bei 2, 3 oder 4 Kacheln -> max. 2 Kacheln pro Reihe */
.kachel-container.anzahl-2,
.kachel-container.anzahl-3,
.kachel-container.anzahl-4 {
	/* Breite für 2 Kacheln + 1 Lücke */
	max-width: calc(2 * var(--kachel-breite) + 1 * var(--gap));
}

/* Bei 5 Kacheln -> Alle 5 nebeneinander */
.kachel-container.anzahl-5 {
	/* Breite für 5 Kacheln + 4 Lücken */
	max-width: calc(5 * var(--kachel-breite) + 4 * var(--gap));
}

/* Bei 6 bis 9 Kacheln -> max. 3 Kacheln pro Reihe */
.kachel-container.anzahl-6,
.kachel-container.anzahl-7,
.kachel-container.anzahl-8,
.kachel-container.anzahl-9 {
	/* Breite für 3 Kacheln + 2 Lücken */
	max-width: calc(3 * var(--kachel-breite) + 2 * var(--gap));
}


/* Stil für die einzelnen Kacheln (Links) - Unverändert */
.kachel {
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	color: #333;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	width: var(--kachel-breite); /* Nutzt jetzt die CSS-Variable */
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kachel:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.kachel h3 { margin-top: 0; }
.kachel p { font-size: 0.9em; color: #666; }

/* Dezenter Footer (unverändert) */
footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 20px 0;
	color: #888;
}

footer p { margin: 0; font-size: 0.8em; }