body {
    background: rgba(19, 19, 19);
    color: #f0f0f0;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
	min-height: 100vh;
}

/* Hauptcontainer */
.main-container {
	max-width: 680px;
	min-width: 320px;
	margin: 60px auto 0 auto;
	padding: 40px 32px;
	background: rgba(42,50,73,0.18);
	border-radius: 24px;
	box-shadow: 0 8px 32px rgba(40,40,40,0.18);
}

/* Eingabefelder */
.input-field {
	width: 100%;
	margin-bottom: 18px;
	padding: 12px;
	border-radius: 8px;
	border: none;
	background: rgba(66,69,76,0.18);
	color: #f0f0f0;
	font-size: 1.1rem;
}

/* Buttons */
.btn-login, .btn-register {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	background: #ff00007a;
	color: #fff;
	font-size: 1.1rem;
	border: none;
	margin-bottom: 18px;
}
.btn-logout {
	width: auto;
	padding: 12px 32px;
	border-radius: 8px;
	background: #ff00007a;
	color: #fff;
	font-size: 1.1rem;
	border: none;
	margin-bottom: 0;
}

/* Fehlerbox */
.reg-error {
	color: #ff4444;
	text-align: center;
	margin-bottom: 12px;
	display: none;
}

/* Links */
.link-register, .link-login, .link-datenschutz {
	color: #ff00007a;
	text-decoration: underline;
	cursor: pointer;
}

/* Datenschutz Info Box */
.datenschutz-info {
	display: none;
	background: rgba(66,69,76,0.18);
	color: #f0f0f0;
	padding: 18px;
	border-radius: 12px;
	margin-bottom: 18px;
	text-align: left;
	max-width: 420px;
	margin: 0 auto 18px auto;
	font-size: 1rem;
}

/* Zentrierter Text */
.center-text {
	text-align: center;
	margin-bottom: 0;
}

/* User Panel */
.user-panel {
	display: none;
	text-align: center;
	margin-top: 32px;
}
.welcome-text {
	margin-bottom: 18px;
}

/* Avatar Vorschau */
.avatar-preview {
	display: block;
	margin: 0 auto 18px auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	background: #222;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Avatar Bereich */
.avatar-section {
	background: rgba(66,69,76,0.12);
	padding: 18px 12px;
	border-radius: 16px;
	margin-bottom: 18px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(40,40,40,0.08);
}
.avatar-section label {
	font-weight: 600;
	color: #ff00007a;
	margin-bottom: 8px;
	display: block;
	font-size: 1.1rem;
}
.avatar-section input[type="file"] {
	margin: 0 auto 12px auto;
	width: 90%;
	background: #222;
	color: #f0f0f0;
	border-radius: 8px;
	padding: 8px;
	border: 1px solid #ff00007a;
}
.avatar-section .avatar-preview {
	margin-top: 8px;
	margin-bottom: 8px;
}