/* Grundlegendes Layout-Fix */
html, body {
	margin: 0;
	padding: 0;
	height: 100%; /* Wichtig für den Hintergrund */
}

body { 
	font-family: 'Segoe UI', Tahoma, sans-serif; 
	background-color: #f0f2f5; 
	display: flex; 
	flex-direction: column; 
	align-items: center; /* Horizontal zentrieren */
	/* Kein justify-content: center mehr, damit oben nichts abgeschnitten wird */
	min-height: 100vh;
	overflow-y: auto; /* Scrollbar erlauben */
}

/* Zentrierung für die Login-Seite (index.php) beibehalten */
body.login-body {
	justify-content: center;
}

/* Hauptcontainer auf 1280px begrenzen */
.container.wide-container { 
	background: white; 
	padding: 2.5rem; 
	border-radius: 12px; 
	box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
	width: 95%;
	max-width: 1280px; /* Deine gewünschte Breite */
	margin: 40px auto; /* Oben/Unten Abstand, Rechts/Links zentriert */
	box-sizing: border-box;
}

/* Login-Container bleibt kompakt */
.container:not(.wide-container) {
	background: white; 
	padding: 2.5rem; 
	border-radius: 12px; 
	box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
	width: 100%;
	max-width: 400px;
	margin: auto; /* Zentriert im login-body */
}

/* Der weiße Kasten */
.container { 
	background: #f8fbfc; 
	padding: 2.5rem; 
	border-radius: 12px; 
	box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
	width: 100%; 
	max-width: 350px; /* Kompakte Breite für Login */
	box-sizing: border-box;
}

.container img {
	width: 100%;
	height: auto;
}

/* Dashboard & Admin dürfen breiter sein */
.wide-container { 
	max-width: 850px; 
	margin: 20px;
}

h2 { margin-bottom: 1.5rem; text-align: center; color: #1a1a1a; }

/* Formulare */
input[type="text"], input[type="password"] { 
	width: 100%; 
	padding: 12px; 
	margin: 8px 0 20px 0; 
	border: 1px solid #ddd; 
	border-radius: 6px; 
	box-sizing: border-box; 
	font-size: 14px;
}

.btn { 
	display: inline-block;
	width: 100%; 
	padding: 12px; 
	border: none; 
	border-radius: 6px; 
	cursor: pointer; 
	font-size: 16px; 
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s;
}

.btn-primary { background-color: #f05019; color: white; width: 93%;}
.btn-primary:hover { background-color: #c23100; }

.btn-logout { background-color: #dc3545; color: white; margin-top: 20px; }

/* Layout für die Export-Seite (Zweispaltig) */
.layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items: start;
}

.box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	overflow-x: auto; /* Falls Tabellen zu breit werden */
}

/* Footer fixieren */
footer {
	margin-top: auto;
	padding: 20px;
	color: #888;
	font-size: 0.8rem;
	text-align: center;
	width: 100%;
}

.error { color: #d9534f; background: #f2dede; padding: 10px; border-radius: 4px; margin-bottom: 15px; text-align: center; border: 1px solid #ebccd1; }

/* Layout für die Export-Seite */
.layout {
	display: grid;
	grid-template-columns: 2fr 1fr; /* Links 2 Anteile, Rechts 1 Anteil */
	gap: 20px;
	align-items: start;
	margin-top: 20px;
}

.box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Tabellen-Anpassung innerhalb der Boxen */
table {
border-collapse: collapse;
width: 100%;
background:#fff;
}
th, td {
border: 1px solid #999;
padding: 8px;
}
th {
background: #FFB935;
}

.box table {
	width: 100%;
	font-size: 13px;
	border-collapse: collapse;
}

.box th {
	background: #FFB935;
	color: #333;
}

.small {
	font-size: 12px;
	color: #666;
	margin: 10px 0;
}

/* Responsive: Auf Handys untereinander anzeigen */
@media (max-width: 800px) {
	.layout {
		grid-template-columns: 1fr;
	}
}