body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px; /* Fügt Außenabstand hinzu, verhindert Kleben am Rand */
	/* Entfernt: display: flex, justify-content, align-items, height */
	background: linear-gradient(135deg, #444, #222);
	min-height: 100vh; /* Stellt sicher, dass der Hintergrund immer voll ist */
	box-sizing: border-box; /* Padding wird in die Gesamtgröße einberechnet */
}

.container {
	background: #222;
	/* padding: 20px; -> Geändert */
	padding: 0 20px 20px 20px; /* Oben kein Padding, Rest 20px */
	border-radius: 10px;
	box-shadow: 0 6px 12px rgba(250, 250, 250, 0.1);
	max-width: 400px;
	width: 100%;
	margin: 0px auto; /* Zentriert horizontal, fügt vertikalen Abstand hinzu */
	box-sizing: border-box;
	text-align: center; /* Zentriert Inline-Inhalt (Text, Bilder) */
	overflow: hidden; /* Verhindert, dass Banner über runde Ecken hinausragt */
}

/* NEU: Banner Styling */
.profile-banner {
	height: 150px; /* Höhe des Banners - anpassen nach Wunsch */
	/* Ersetze 'pfad/zum/banner.jpg' mit deinem Bildpfad */
	background-image: url('banner.webp');
	background-color: #c3cfe2; /* Fallback-Farbe, falls Bild nicht lädt */
	background-size: cover;
	background-position: center center;
	/* Wichtig: Keine unteren runden Ecken */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
	/* NEU: Negativer Margin, um das Container-Padding auszugleichen */
	margin-left: -20px;
	margin-right: -20px;
}

/* Profilbild Container Anpassung */
.profile {
	margin-top: -75px; /* Verschiebt das Bild nach oben (Hälfte der Bildhöhe) */
	position: relative; /* Notwendig für z-index, falls benötigt */
	z-index: 2; /* Stellt sicher, dass es über Elementen im Banner liegt */
	margin-bottom: 10px; /* Kleiner Abstand nach unten */
}

/* Profilbild Styling Anpassung */
.profile img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	/* Rand auf Weiß geändert für besseren Kontrast über Banner */
	border: 5px solid white;
	/* Hintergrund entfernt, da Rand jetzt sichtbar ist */
	/* background: linear-gradient(135deg, #f03350, #fc5c65); */
	/* Padding entfernt, da Rand jetzt den Abstand gibt */
	/* padding: 4px; */
	display: block; /* Verhindert extra Leerraum unter dem Bild */
	margin-left: auto; /* Stellt Zentrierung sicher */
	margin-right: auto; /* Stellt Zentrierung sicher */
	background-color: white; /* Hintergrund für transparente Bildteile */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Leichter Schatten */
}

h1 {
	/* margin: 10px 0; -> Geändert */
	color: #fff;
	margin: 15px 0 10px 0; /* Etwas mehr Abstand nach oben wegen des verschobenen Bildes */
	font-size: 24px;
}

p {
	color: #999;
	margin-bottom: 20px;
}

.links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn {
	text-decoration: none;
	background: #7C481D;
	color: white;
	padding: 10px;
	border-radius: 5px;
	transition: background 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.btn svg {
    height: 1em; /* Macht das SVG so hoch wie die Schrift */
    margin-right: 8px; /* Abstand zwischen Icon und Text */
    vertical-align: -0.125em; /* Vertikale Ausrichtung an der Textgrundlinie */
    fill: currentColor; /* Sorgt dafür, dass das SVG die Textfarbe des Buttons erbt */
}

.btn:hover {
	background: #3A1B00;
}

footer {
	margin-top: 20px;
	font-size: 12px;
	color: #999;
}

footer a {
	color: #7C481D;
	text-decoration: none;
}

.poweredby img{
	width: 180px;
}