body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    /* Removed display: flex, justify-content, align-items, min-height from body */
    /* to allow header and content to flow naturally,
    and added flex to .content for centering its text */

    /* Hintergrundbildeinstellungen */
    background-image: url('../images/background.png'); /* Ersetzen Sie 'your-image.jpg' durch den tatsächlichen Dateinamen Ihres Hintergrundbildes */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* -- Header, Menü und allgemeine Container -- */
.main-header {
    text-align: center;
    padding: 20px var(--content-padding-x) 0;
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.header-image {
    max-width: 80%; /* Das Bild soll maximal 90% der Breite des Elternelements einnehmen */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu erhalten */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    margin: 0 auto; /* Zentriert das Bild horizontal, wenn max-width < 100% */
}

.content {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 10px;
    text-align: center; /* Zentriert den Text innerhalb des Inhaltsbereichs */
    max-width: 80%;
    margin: 20px auto; /* Zentriert den Inhaltsblock horizontal und gibt etwas Abstand zum Header */
}

.content-image {
    max-width: 60%; /* Skalierung auf 60% der Breite des Elternelements (.content) */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu erhalten */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    margin: 0 auto; /* Zentriert das Bild horizontal innerhalb des .content-Containers */
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #00bcd4; /* Beispiel: Cyberpunk-Blau */
}

p {
    font-size: 1.2em;
    line-height: 1.6;
}



.events-section {
    display: flex; /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert die Inhalte horizontal */
    align-items: flex-start; /* Elemente oben ausrichten */
    gap: 20px; /* Abstand zwischen Karussell und Text */
    margin: 20px auto; /* Abstand oben/unten und horizontal zentriert */
    max-width: 90%; /* Maximale Breite für die Sektion */
}


.events-section .content {
    margin: 0; /* Entfernt den automatischen margin von content, da events-section das regelt */
    flex: 1; /* Lässt beide content-Elemente den verfügbaren Platz teilen */
    max-width: 45%; /* Begrenzt die individuelle Breite */
    box-sizing: border-box; /* Padding wird in die Breite eingerechnet */
}

.events-text-container {
    text-align: left; /* Text in diesem Container links ausrichten */
}



.events-text-container h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #00bcd4; /* Beispiel: Cyberpunk-Blau */
}

.events-text-container ul {
    list-style: none; /* Entfernt die Standard-Listenpunkte */
    padding: 0;
    margin: 0;
}

.events-text-container li {
    background-color: rgba(255, 255, 255, 0.1); /* Leichter Hintergrund für Listenelemente */
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.1em;
}


.band-profile {
    display: flex; /* Flexbox für nebeneinanderliegendes Bild und Info */
    flex-direction: row; /* Standard: Bild und Text nebeneinander */
    align-items: flex-start; /* Oben ausrichten */
    gap: 30px; /* Abstand zwischen Bild und Info */
    margin-bottom: 40px; /* Abstand zwischen DJ-Profilen */
    background-color: rgba(0, 0, 0, 0.6); /* Hintergrund wie Content-Boxen */
    padding: 30px;
    border-radius: 10px;
    max-width: var(--content-max-width); /* Richtet sich nach der Content-Breite */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: left; /* Text linksbündig */
}

.band-image {
    max-width: 300px; /* Maximale Breite des Bildes auf Desktops */
    height: auto; /* WICHTIG: Erhält das Seitenverhältnis */
    border-radius: 5px; /* Leichte Abrundung */
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft, bevor es muss */
}

.band-info {
    flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */
}

.band-info h2 {
    font-size: 2em;
    color: #00bcd4;
    margin-top: 0;
}

.band-info p {
    margin-bottom: 1em;
}

.social-links-dj {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon-small {
    width: 25px; /* Kleinere Icons für DJs */
    height: 25px;
}






.carousel-container {
    position: relative; /* Wichtig für die Positionierung der Pfeile */
    display: flex; /* Um Bild und Buttons nebeneinander zu zentrieren */
    align-items: center; /* Vertikale Zentrierung der Buttons */
    justify-content: center; /* Horizontale Zentrierung des gesamten Karussells */
}

.carousel-image {
    max-width: 80%; /* Skalierung des Bildes */
    height: auto;
    display: block;
    cursor: pointer; /* Zeigt an, dass das Bild klickbar ist */
}

.carousel-button {
    background-color: rgba(255, 255, 255, 0.3); /* Leicht transparenter Button */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 2em;
    cursor: pointer;
    position: absolute; /* Positioniert die Buttons relativ zum .carousel-container */
    top: 50%;
    transform: translateY(-50%); /* Korrigiert die vertikale Zentrierung */
    user-select: none; /* Verhindert Textauswahl */
    border-radius: 5px;
    z-index: 10; /* Stellt sicher, dass die Buttons über dem Bild liegen */
}

.prev-button {
    left: 10px; /* Abstand vom linken Rand des Containers */
}

.next-button {
    right: 10px; /* Abstand vom rechten Rand des Containers */
}

.carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Hintergrund beim Hover heller */
}

.main-header {
    text-align: center;
	6padding: 20px;
    border-radius: 10px;
    /* Da das nav jetzt im header ist, können wir den padding-bottom für den header anpassen
       und den margin-top des ersten .content-Blocks evtl. entfernen,
       damit das Menü näher am Inhalt ist. */
    margin: 20px auto; /* Zentriert den Inhaltsblock horizontal und gibt etwas Abstand zum Header */
}

.main-nav {
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px var(--content-padding-x);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.main-nav li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.2em; /* Leicht verkleinert für bessere Proportionen */
    padding: 10px 15px;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.main-nav li a:hover {
    color: #00bcd4;
    background-color: rgba(255, 255, 255, 0.1);
}
	
/* Schriftgrößen für Überschriften und Text */
h1 {
    font-size: 2.5rem; /* rem ist eine gute Einheit für responsive Schrift */
}

h2 {
    font-size: 2rem;
}

p, li {
    font-size: 1rem;
    line-height: 1.6; /* Verbessert die Lesbarkeit */
}


/* ############################################### */
/* ###      RESPONSIVE ANPASSUNGEN (NEU)       ### */
/* ############################################### */

@media (max-width: 768px) {

    /* -- Schriftgrößen anpassen -- */
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    p, li, .main-nav li a {
        font-size: 0.9rem; /* Kleinere Basisschrift */
    }

    /* -- Layout-Container untereinander stapeln -- */
    .events-section,
    .split-content {
        flex-direction: column; /* WICHTIG: Spalten werden zu Zeilen */
        align-items: center;
        gap: 20px;
    }

    /* Container sollen volle Breite nutzen */
    .content.carousel-container,
    .content.events-text-container,
    .split-content-left,
    .split-content-right {
        max-width: 100%;
        min-width: unset; /* Mindestbreite aufheben */
    }

    /* -- Menü anpassen -- */
    .main-nav ul {
        flex-direction: column; /* Menüpunkte untereinander */
        gap: 10px;
    }

    /* -- Generelle Abstände verringern -- */
    :root {
        --content-padding-x: 15px; /* Weniger seitlicher Abstand */
    }

    .content,
    .split-content-left,
    .split-content-right {
        padding: 20px; /* Weniger Innenabstand in den Boxen */
    }
}