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

.container {
	background: white;
	padding: 0 20px 20px 20px; /* Oben kein Padding, Rest 20px */
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 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 */
	background-image: url('banner.webp');
	background-color: #c3cfe2; /* Fallback-Farbe, falls Bild nicht lädt */
	background-size: cover;
	background-position: center center;
	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%;
	border: 5px solid white;
	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 */
}

.link-ids h2 {
	margin: 45px 0 5px 0;
	font-size: 1.5em;
}

/* Einzelen Links */
.single-link {
	display: flex;
    gap: 20px;
    max-width: 360px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    flex-direction: row;
}

/* Profilbild Container Anpassung */
.link-profile {
	flex-grow: 1;
	width: 90px;
	position: relative; /* Notwendig für z-index, falls benötigt */
	z-index: 2; /* Stellt sicher, dass es über Elementen im Banner liegt */
	padding: 3px 0px 3px 3px;
}

.link-profile img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 5px solid white;
	display: block; /* Entfernt möglichen zusätzlichen Platz unter dem Bild */
	background-color: white; /* Hintergrund für transparente Bildteile */
	box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.3)
}

.single-link a.link-ids {
    display: flex; /* Macht den Link-Container zum Flex-Container */
    align-items: center; /* Zentriert die Elemente vertikal */
    text-decoration: none; /* Entfernt die Standard-Unterstreichung bei Links */
    color: inherit; /* Vererbt die Textfarbe vom Elternelement */
    gap: 15px; /* Fügt einen Abstand zwischen den Flex-Items (den divs) hinzu */
    padding: 10px 0; /* Fügt etwas Innenabstand hinzu */
}

.single-link .link-profile {
    flex-shrink: 0; /* Verhindert, dass dieser Container schrumpft */
    border-radius: 50%; /* Macht den Container rund, wenn Höhe und Breite gleich sind */
}

.single-link .link-profile img {
    display: block; /* Entfernt möglichen zusätzlichen Platz unter dem Bild */
    width: 100%; /* Stellt sicher, dass das Bild die Breite des Containers ausfüllt */
    height: 100%; /* Stellt sicher, dass das Bild die Höhe des Containers ausfüllt */
    object-fit: cover; /* Skaliert das Bild so, dass es den Container ausfüllt, ohne das Seitenverhältnis zu verzerren */
}

.single-link .link-name {
    flex-grow: 1; /* Lässt diesen Container den restlichen verfügbaren Platz einnehmen */
}

.single-link .link-name h3 {
    margin: 0; /* Entfernt den Standard-Margin des h2 */
    font-size: 1.2em; /* Beispiel Schriftgröße */
    text-align: left;
}

.single-link .link-name p {
    margin: 0; /* Entfernt den Standard-Margin des p */
    font-size: 0.9em;
    color: #666;
	text-align: left;
}

h1 {
	margin: 15px 0 10px 0; /* Etwas mehr Abstand nach oben wegen des verschobenen Bildes */
	font-size: 24px;
}

h3 {
	margin: 15px 0 0 0;
}

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

/* Styling für die Links mit Bildern (links2) */
.links2 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

.links2 .btn {
    text-decoration: none;
    background: #009F1C;
    color: white;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 105px;
    padding-right: 10px;
    text-align: left;
    height: 85px;
}

.links2 .btn img.button-icon {
    width: 85px;
    height: 85px;
    object-fit: cover;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.links2 .btn:hover {
	background: #006B13;
}

/* Styling für die Links mit SVG Icons (links) */
.links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

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

.links .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 */
}

.links .btn:hover {
	background: #006B13;
}

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

footer a {
	color: #009F1C;
	text-decoration: none;
}

.poweredby img{
	width: 180px;
}