/* styles.css */
/* Grundlegende Stile für den Body */
body {
    font-family: Arial, sans-serif; /* Schriftart für den gesamten Body festlegen */
    margin: 0; /* Entfernt Standard-Margin des Browsers */
    padding: 0; /* Entfernt Standard-Padding des Browsers */
    background-image: url('background.png'); /* Hintergrundbild setzen */
    background-position: center center; /* Hintergrundbild zentrieren */
    background-repeat: repeat; /* Wiederholung des Hintergrundbilds */
    background-size: cover; /* Hintergrundbild skalieren, um den gesamten Bildschirm zu bedecken */
}

body::before {
    content: ""; /* Leeres Pseudo-Element erstellen */
    position: fixed; /* Fixiert das Pseudo-Element, sodass es den gesamten Bildschirm bedeckt */
    top: 0; /* Setzt das Pseudo-Element an den oberen Rand des Bildschirms */
    left: 0; /* Setzt das Pseudo-Element an den linken Rand des Bildschirms */
    width: 100%; /* Breite auf 100% des Bildschirms setzen */
    height: 100%; /* Höhe auf 100% des Bildschirms setzen */
    background-image: url('background.png'); /* Hintergrundbild setzen */
    z-index: -1; /* Hinter den gesamten Inhalt legen */
    pointer-events: none; /* Verhindert, dass das Pseudo-Element interaktiv ist */
}

* {
    box-sizing: border-box;
}

/* Grundlegende Stile für Links */
a {
    color: #80FF00; /* Standard-Link-Farbe */
    text-decoration: none; /* Keine Unterstreichung für Links */
}

/* Grundlegende Stile für den Header */
header {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    display: flex; /* Flexbox-Layout */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal (falls nötig) */
    padding: 10px; /* Abstand um das Bild herum */
    position: relative; /* Positionierung relativ */
    z-index: 2; /* Stellt sicher, dass der Header über dem Hintergrundbild liegt */
}

header img {
    max-width: 1000px; /* Maximale Breite des Bildes */
    width: 100%; /* Bildbreite auf 100% des Containers setzen */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

/* Navigation */
nav ul {
    list-style-type: none; /* Entfernt die Aufzählungszeichen von Listen */
    padding: 0; /* Entfernt das Standard-Padding der Liste */
    text-align: center; /* Zentriert den Text in der Liste */
}

nav ul li {
    display: inline; /* Listenelemente nebeneinander anordnen */
    margin: 0 10px; /* Abstand nach rechts und links */
}

nav ul li a {
    color: #ffff00; /* Link-Farbe */
    text-decoration: none; /* Keine Unterstreichung für Links */
    font-size: 130%; /* Schriftgröße für Links */
    font-weight: bold; /* Fettdruck für Links */
}

nav ul li a:hover {
    text-decoration: underline overline #FF0000; /* Unterstreichen und Überstreichen bei Hover mit roter Farbe */
}

/* Main Content */
main {
    max-width: 1000px; /* Maximale Breite für main */
    margin: 0 auto; /* Zentriert den Inhalt */
    background: transparent; /* Transparenter Hintergrund für main */
    position: relative; /* Positionierung relativ */
    z-index: 2; /* Stellt sicher, dass der Hauptinhalt über dem Hintergrundbild liegt */
}

#artist-section h1 {
    color: #ffffff; /* Weiß */
	text-align: center; /* Zentriert den Text */
	font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 20px; /* Abstand nach unten */
}

#artist-section h2 {
    color: #ffffff; /* Weiß */
	text-align: center; /* Zentriert den Text */   
	font-size: 2em; /* Größere Schriftgröße für Hervorhebungen */
}

#artist-section p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
}

#introduction {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    color: #ffffff; /* Weißer Text */
    text-align: center; /* Zentriert den Text innerhalb der Section */
}

#introduction .content {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: center;
}

#introduction h1 {
    font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 20px; /* Abstand nach unten */
}

#introduction p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
}

#introduction .highlight {
    color: #80FF00; /* Grün für hervorgehobenen Text */
}

#introduction a.highlight {
    color: #80FF00; /* Grün für den Link */
    text-decoration: none; /* Unterstreichen entfernen */
}

#introduction a.highlight:hover {
    text-decoration: none; /* Unterstreichen beim Hover-Effekt */
}

/* Carousel */
#release-section {
    position: relative; /* Positionierung relativ */
    width: 100%; /* Breite auf 100% setzen, damit die Buttons auf der gesamten Breite funktionieren */
    overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Containers angezeigt werden */
}

#release-carousel {
    display: flex; /* Flexbox-Layout für das Carousel */
    transition: transform 0.5s ease-in-out; /* Weicher Übergang für das Carousel */
}

.release {
    min-width: 100%; /* Minimale Breite für jedes Slide auf 100% setzen */
    background-color: #000; /* Schwarzer Hintergrund für das Slide */
    border: 2px solid #ffff00; /* Gelber Rand um das Slide */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten für einen leichten 3D-Effekt */
}

.release img {
    max-width: 100%; /* Maximale Breite des Bildes */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu wahren */
}

.release img[alt*="Front Cover"],
.release img[alt*="Back Cover"] {
    width: 400px; /* Breite auf 300px festlegen */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu wahren */
	border: 1px solid #80ff00; /* Rahmen für Front- und Backcover-Bilder */
}
.release h2, 
.release h3 { 
    color: #80ff00; /* Farbe für h2 und h3 */
}

#prev-btn, #next-btn {
    position: absolute; /* Absolute Positionierung für die Buttons */
    top: 50%; /* Vertikale Mitte des Containers */
    transform: translateY(-50%); /* Vertikale Mitte korrekt setzen */
    background-color: #80ff00; /* Hintergrundfarbe für die Buttons */
    color: #000; /* Textfarbe für die Buttons */
    border: none; /* Kein Rahmen um die Buttons */
    padding: 7px; /* Innenabstand der Buttons */
    cursor: pointer; /* Mauszeiger als Zeiger anzeigen */
    font-size: 20px; /* Schriftgröße für die Buttons */
}

#prev-btn:hover, #next-btn:hover {
    color: #ff0000; /* Textfarbe beim Hover-Effekt */
}

#prev-btn {
    left: 10px; /* Position des Buttons auf der linken Seite */
    border-radius: 1rem; /* Abgerundete Ecken des Buttons */
}

#next-btn {
    right: 10px; /* Position des Buttons auf der rechten Seite */
    border-radius: 1rem; /* Abgerundete Ecken des Buttons */
}

/* Epilog */
#epilog {
    background-color: transparent; /* Transparenter Hintergrund für die Section */
	max-width: 1000px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Inhalt innerhalb des Containers */
    justify-content: center; /* Zentriert den Inhalt horizontal */
}

#epilog p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 20px; /* Abstand zwischen Absätzen */
}

.content {
    max-width: 1000px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Inhalt innerhalb des Containers */
    text-align: center; /* Zentriert den Text innerhalb des Containers */
    white-space: normal; /* Ermöglicht Zeilenumbruch */
    word-wrap: break-word; /* Bricht lange Wörter um */
    overflow-wrap: break-word; /* Bricht lange Wörter um */
}

.content h2 {
    color: #ffffff; /* Weißer Text */
    font-size: 1.5em; /* Größere Schriftgröße für Hervorhebungen */
}

.info {
    color: #ffffff; /* Weißer Text */
    font-size: 1em; /* Normale Schriftgröße für Informationstexte */
	text-align: center;
}

.info a {
    color: #80FF00; /* Link-Farbe */
}

.links-and-contact {
    display: flex; /* Flexbox-Layout */
	justify-content: space-around; /* Verteilt den Platz zwischen Links und Kontakt */
    flex-wrap: wrap; /* Ermöglicht Zeilenumbruch für kleinere Bildschirme */
    text-align: center; /* Zentriert den Text */
	color: white;
	align-items: stretch; /* Stellt sicher, dass alle Items die gleiche Höhe haben */
    
}

.links-and-contact img {
	border-radius: 0.5rem;
}

.links-and-contact img:hover {
	border-radius: 0.5rem;
	box-shadow: 0px 0px 20px -2px yellow;
}

.links-and-contact > .links {
	display: flex;
	justify-content: flex-end;
	width: 49%;
}

.links-and-contact > .trennung {
	width: 2%;
}

.links-and-contact > .contact {
	display: flex;
	justify-content: start;
	width: 49%;
}

.links-and-contact > .impdat {
	width: 100%;
	order: 1; /* Stellt sicher, dass dieser Container immer zuletzt kommt */
}

.elements1 {
	width: 50%;
}

.elements2 {
	width: 50%;
}

.social-links {
    margin: 10px 0; /* Abstand zwischen Icons */
}

.contact-links {
    margin: 10px 0; /* Abstand zwischen Icons */
}

.social-img {
    width: 72px; /* Feste Breite für die Social Media Icons */
    height: 72px; /* Feste Höhe für die Social Media Icons */
    margin: 0 10px; /* Abstand zwischen den Icons */
}

.button-img {
    width: 140px; /* Feste Breite für den Button */
    height: auto; /* Höhe automatisch anpassen */
    transition: opacity 0.3s ease; /* Weicher Übergang für den Hover-Effekt */
	margin: 5px 5px 15px 5px;
}

.button2-img {
    width: 140px; /* Feste Breite für den Button */
    height: auto; /* Höhe automatisch anpassen */
    transition: opacity 0.3s ease; /* Weicher Übergang für den Hover-Effekt */
	margin: 5px 5px 15px 5px;
}

.button-link:hover .button-img {
    content: url('button1a.png'); /* Ändert die Grafik bei Hover */
}

.button2-link:hover .button2-img {
    content: url('button2a.png'); /* Ändert die Grafik bei Hover */
}

.audio {
	margin-top: 20px;
}

.abstand {
    margin-top: 8px;
}

/* Footer */
footer {
    background-color: #000000; /* Schwarzer Hintergrund */
    padding: 10px 0; /* Innenabstand oben und unten */
    width: 100%; /* Breite des Footers auf 100% setzen */
    position: relative; /* Fixiert den Footer am Bildschirmrand */
    bottom: 0; /* Positioniert den Footer am unteren Rand des Viewports */
    left: 0; /* Sorgt dafür, dass der Footer am linken Bildschirmrand beginnt */
    z-index: 2; /* Stellt sicher, dass der Footer über dem Hintergrundbild liegt */
    text-align: center; /* Zentriert den Text im Footer */
	border-top: 2px solid #ffff00; /* Gelber Rand oben im Footer */
}

.footer-content {
    max-width: 1000px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriert den Inhalt horizontal */
    color: #ffffff; /* Weißer Text */
    text-align: center; /* Zentriert den Text */
    font-size: 1em; /* Schriftgröße anpassen */
    box-sizing: border-box; /* Stellt sicher, dass Padding zur Gesamtbreite beiträgt */
}

/* Media Queries */
@media (max-width: 900px) { /* Media Query für Bildschirmgrößen bis 768px */
	.links-and-contact {
        flex-direction: column; /* Wechselt auf vertikale Anordnung */
		align-items: center; /* Zentriert die Rubriken horizontal */
		width: 100%;
    }

    .links-and-contact .links {
        width: 100% !important;
		order: -3;
    }

	.links-and-contact .trennung {
		order: -2;
		height: 1px;
	}

    .links-and-contact .contact {
        width: 100% !important;
		order: -1; /* Kontakt wandert unter die Links */
        margin-top: 20px; /* Abstand nach oben, um die Sektionen zu trennen */
    }
		
	.elements1 {
	width: 100% !important;
	}
	
	.elements2 {
	width: 100% !important;
	}

.release img[alt*="Front Cover"],
.release img[alt*="Back Cover"] {
    width: 250px; /* Breite auf 300px festlegen */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu wahren */
	border: 1px solid #80ff00; /* Rahmen für Front- und Backcover-Bilder */
	}

}

/* Stil für die line-container */
.line-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 40px; /* Stellt sicher, dass der Container mindestens so hoch ist wie die Linie */
}

.responsive-line {
    width: 80%; /* Breite der Linie */
    max-width: 600px; /* Maximale Breite */
    height: 2px; /* Exakte Höhe der Linie */
    overflow: hidden; /* Verhindert Überlauf des Bildes */
}

.responsive-line img {
    display: block;
    width: 100%; /* Füllt die Breite des Elternelements */
    height: 2px; /* Exakte Höhe des Bildes */
    object-fit: cover; /* Behält das Seitenverhältnis bei und schneidet ggf. ab */
    object-position: center; /* Zentriert das Bild vertikal */
}