* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Avenir', sans-serif;
	height: 100vh; /* 100% der Höhe des Viewports */
	display: flex;
	flex-direction: column; /* Stapele die Inhalte vertikal */
	background-color: white; /* Hintergrundfarbe der gesamten Seite */
}

.container {
	display: flex;
	flex-direction: column; /* Vertikale Anordnung */
	justify-content: center; /* Vertikale Zentrierung */
	align-items: center; /* Horizontale Zentrierung */
	flex: 1; /* Nimmt den verbleibenden Platz ein */
	width: 100%; /* Über die gesamte Breite */
	max-width: 1000px; /* Maximale Breite für den Container */
	margin: auto; /* Zentriere den Container horizontal */
}

.text-area {
	flex: 1; /* Nimmt den linken Bereich ein */
	padding: 100px; /* Abstand für den Textbereich */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Vertikale Zentrierung */
	align-items: flex-start; /* Linksbündig */
	background-color: white; /* Hintergrundfarbe für den Textbereich */
}

.logo {
	font-size: 60px; /* Größe des Logos */
	font-weight: bold;
	margin-bottom: 150px; /* Vergrößere den Abstand zwischen Logo und Text */
	margin-top: 80px; /* Vergrößere den Abstand zwischen Logo und Text */
}

.scrollable-text {
	overflow-y: auto; /* Scrollen bei Überlauf */
	flex: 1; /* Nimmt den verbleibenden Platz ein */
	padding-top: 130px;
	font-size: 22px; /* Schriftgröße des Fließtextes */
}

.scrollable-text p {
	margin-bottom: 20px; /* Abstand zwischen den <p>-Abschnitten */
	line-height: 1.6; /* Vergrößere den Zeilenabstand */
	padding-top: 20px; /* Füge Padding zu den Absätzen hinzu */
	padding-bottom: 60px; /* Füge Padding zu den Absätzen hinzu */
	background-color: rgba(255, 255, 255, 0.9); /* Optional: Hintergrundfarbe für bessere Lesbarkeit */
}

/* Stil für Links */
a {
	color: #333; /* Dunkelgrau */
	text-decoration: none; /* Unterstreichung entfernen */
}

a:hover {
	text-decoration: underline; /* Unterstreichung bei Hover hinzufügen */
}

.sources {
	margin-top: 40px; /* Abstand über den Quellen, um Platz zu schaffen */
	padding-bottom: 80px; /* Füge Padding am unteren Ende hinzu (Höhe des Players) */
}

.image-area {
	position: fixed; /* Fixiere das Bild im Viewport */
	right: 0; /* Positioniere es an der rechten Seite */
	top: 0; /* Positioniere es am oberen Rand */
	width: 50%; /* Breite der Bildfläche */
	height: 100vh; /* Höhe der Bildfläche entspricht der Viewport-Höhe */
	background-image: url('https://852hz.de/neuronal.jpg'); /* Hintergrundbild */
	background-size: cover; /* Bild füllt den gesamten Bereich */
	background-position: center; /* Bild zentrieren */
	z-index: -1; /* Stelle sicher, dass es hinter dem Text bleibt */
}

.cover-image {
	width: 150px; /* Breite des Coverbildes auf 150px ändern */
	height: 150px; /* Höhe des Coverbildes auf 150px ändern */
	background-image: url('/neuronal.jpg'); /* URL zum Coverbild */
	background-size: cover; /* Bild füllt den gesamten Bereich */
	background-position: center; /* Bild zentrieren */
	margin-right: 15px; /* Abstand zwischen Coverbild und Steuerelementen */
	border-radius: 5px; /* Abgerundete Ecken */
}

.time-display {
	font-size: 18px; /* Schriftgröße für die Zeit-Anzeige */
	margin-right: 15px; /* Abstand zwischen Zeit-Anzeige und Steuerelementen */
	flex-shrink: 0; /* Verhindert das Schrumpfen der Zeit-Anzeige */
}

.audio-player {
	position: relative; 
	bottom: 0; 
	left: 0; 
	width: 100%; 
	background-color: #f1f1f1; 
	padding: 15px;
	display: flex;
	align-items: center; /* Zentriert die Inhalte vertikal */
	border-radius: 10px; /* Fügt abgerundete Ecken hinzu */
}

.volume-slider {
	margin-left: auto; /* Abstand zu den Buttons */
	cursor: pointer; /* Zeiger bei Hover */
	width: 150px; /* Breite des Reglers auf 150px setzen */
	-webkit-appearance: none; /* Entferne Standard-Stil */
	height: 10px; /* Höhe des Reglers */
	background: #ccc; /* Hintergrund des Reglers */
	border-radius: 5px; /* Abgerundete Ecken */
}

.controls {
	display: flex; /* Flex-Layout für die Steuerelemente */
	width: 100%; /* Über die gesamte Breite */
	align-items: center; /* Vertikale Zentrierung */
}

.audio-player button {
	background-color: #07e; /* Grauer Hintergrund */
	color: rgb(255, 255, 255); /* Schwarz für den Text */
	border: none;
	border-radius: 5px; /* Abgerundete Ecken für den Button */
	padding: 20px 20px; /* Größerer Innenabstand für den Button */
	cursor: pointer; /* Zeiger bei Hover */
	font-size: 18px; /* Größere Schriftgröße */
	margin-right: 10px; /* Abstand zwischen den Buttons */
	transition: background-color 0.3s; /* Übergangseffekt */
	flex: 0 0 auto; /* Button-Größe beibehalten */
}

.audio-player button:hover {
	background-color: #048; /* Dunkleres Grau bei Hover */
}

.audio-player input[type="range"] {
	margin-left: auto; /* Abstand zu den Buttons */
	cursor: pointer; /* Zeiger bei Hover */
	width: 100%; /* Über die gesamte Breite */
	-webkit-appearance: none; /* Entferne Standard-Stil */
	height: 10px; /* Höhe des Reglers */
	background: #ccc; /* Hintergrund des Reglers */
	border-radius: 5px; /* Abgerundete Ecken */
}

.audio-player input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; /* Entferne Standard-Stil */
	appearance: none; /* Für andere Browser */
	width: 24px; /* Breite des Daumens */
	height: 24px; /* Höhe des Daumens */
	background: #07e; /* Hintergrundfarbe des Daumens */
	border-radius: 50%; /* Runde Form */
	cursor: pointer; /* Zeiger bei Hover */
}

.audio-player input[type="range"]::-moz-range-thumb {
	width: 24px; /* Breite des Daumens */
	height: 24px; /* Höhe des Daumens */
	background: #07e; /* Hintergrundfarbe des Daumens */
	border-radius: 50%; /* Runde Form */
	cursor: pointer; /* Zeiger bei Hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
	.container {
		flex-direction: column; /* Vertikale Anordnung auf mobilen Geräten */
		padding: 20px; /* Padding für den Container anpassen */
	}
	.image-area {
		display: block; /* Bildbereich sichtbar machen */
		height: 40vh; /* Bild nimmt 40% der Viewport-Höhe ein */
		position: relative; /* Stelle sicher, dass es relativ ist */
		width: 100%; /* Über die gesamte Breite auf mobilen Geräten */
	}
	.text-area {
		padding: 20px; /* Weniger Padding auf mobilen Geräten */
	}
	.logo {
		font-size: 36px; /* Kleinere Logo-Größe auf mobilen Geräten */
		margin-bottom: 60px; /* Weniger Abstand zwischen Logo und Text */
	}
	.scrollable-text {
		padding-top: 60px; /* Weniger Padding oben */
		font-size: 16px; /* Kleinere Schriftgröße für den Fließtext */
	}
	.scrollable-text p {
		padding: 10,0,10,0; /* Weniger Padding für Absätze */
	}
	.audio-player {
		padding: 10px; /* Weniger Padding für den Player auf mobilen Geräten */
	}
	.audio-player button {
		padding: 10px; /* Weniger Padding für Buttons */
		font-size: 16px; /* Kleinere Schriftgröße für Buttons */
	}
	.volume-slider {
		width: 100%; /* Breite des Reglers anpassen */
	}
}