/* Grundlegende Stildefinitionen */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a; /* Dunkler Hintergrund */
    color: #f0f0f0; /* Helle Textfarbe */
}

/* Header-Bereich */
.main-header {
    background-color: #333; /* Dunkelgrauer Hintergrund für den Header, falls das Bild nicht voll deckt */
    position: relative; /* Wichtig für die Positionierung des Bildes */
    width: 100%;
    overflow: hidden; /* Verhindert Überlauf, falls Bild größer ist */
}

.header-image-container {
    width: 100%;
    max-height: 400px; /* Maximale Höhe für das Header-Bild, anpassen wenn nötig */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Hintergrundfarbe, wenn das Bild nicht die volle Breite oder Höhe ausfüllt */
}

.header-image {
    width: 100%; /* Bild soll die volle Breite des Containers einnehmen */
    height: auto; /* Höhe automatisch anpassen, um Proportionen zu bewahren */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
}

/* Hauptnavigation */
.main-nav {
    background-color: #e74c3c; /* Rot wie im Bild für die Navigationsleiste */
    padding: 10px 0;
    text-align: center;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative; /* Wichtig für die Positionierung der Dropdowns */
    z-index: 999; /* Stellt sicher, dass das Dropdown über anderen Inhalten liegt */
}

.main-nav li {
    margin: 0 15px;
    position: relative; /* Wichtig für die Positionierung des Dropdowns zum Elternelement */
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px; /* Etwas mehr Padding für bessere Klickflächen */
    display: block; /* Wichtig, damit das gesamte Padding klickbar ist */
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei längeren Menüpunkten */
}

.main-nav a:hover,
.main-nav a:focus {
    background-color: #c0392b;
    border-radius: 4px;
}

/* Dropdown-Container */
.dropdown-content {
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    background-color: #333; /* Hintergrundfarbe des Dropdowns */
    min-width: 180px; /* Mindestbreite des Dropdowns */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1; /* Muss über dem Elternelement liegen, aber unter dem main-nav z-index */
    top: 100%; /* Platziert das Dropdown direkt unter dem übergeordneten Menüpunkt */
    left: 0; /* Links an das Elternelement anpassen */
    border-radius: 0 0 4px 4px; /* Abgerundete Ecken unten */
    overflow: hidden; /* Für den Fall, dass die Inhalte überlaufen */
}

/* Links innerhalb des Dropdowns */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left; /* Text linksbündig ausrichten */
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: normal; /* Normaler Schriftschnitt für Dropdown-Links */
}

/* Hover-Effekt für Dropdown-Links */
.dropdown-content a:hover {
    background-color: #555; /* Hintergrund beim Hover im Dropdown */
    color: #f39c12; /* Akzentfarbe für Text beim Hover */
}

/* Anzeige des Dropdowns beim Hover über dem Elternelement */
.main-nav li.dropdown:hover > .dropdown-content {
    display: block; /* Zeigt das Dropdown an */
}

/* Hauptinhaltsbereich */
main {
    padding: 20px;
    max-width: 1200px; /* Maximale Breite für den Inhalt */
    margin: 20px auto; /* Zentriert den Inhalt und gibt etwas Abstand */
    background-color: #2a2a2a; /* Etwas hellerer Hintergrund für den Inhaltsbereich */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.content-section {
    margin-bottom: 40px;
    padding: 20px;
    border-bottom: 1px solid #444; /* Trennlinie zwischen Abschnitten */
}

.content-section:last-child {
    border-bottom: none; /* Keine Trennlinie unter dem letzten Abschnitt */
}

h1, h2 {
    color: #e74c3c; /* Rote Überschriften, passend zur Navigation */
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    color: #f39c12; /* Akzentfarbe für Sub-Überschriften (z.B. Songtitel) */
}

p {
    line-height: 1.6;
}

/* Links im Inhalt */
a {
    color: #f39c12; /* Akzentfarbe für Links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    background-color: #333;
    color: #bbb;
    border-top: 1px solid #444;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    background-color: #3a3a3a; /* Dunkelgrauer Hintergrund */
    padding: 10px 20px;
    border-bottom: 1px solid #4a4a4a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Ermöglicht Umbruch bei vielen Elementen */
}

.breadcrumb li {
    font-size: 0.9em;
    color: #bbb; /* Helle Textfarbe für Trenner und nicht-aktives Element */
    display: flex;
    align-items: center;
}

.breadcrumb li + li::before {
    content: '»'; /* Trennzeichen zwischen den Elementen */
    margin: 0 8px;
    color: #777; /* Etwas dunkler für den Trenner */
}

.breadcrumb a {
    color: #f39c12; /* Akzentfarbe für Breadcrumb-Links */
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #e74c3c; /* Hover-Farbe passend zur Navigationsleiste */
    text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
    color: #e74c3c; /* Rote Farbe für das aktive Element */
    font-weight: bold;
}

/* Styles für Alben und Singles */
.album-item, .single-item {
    background-color: #333;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-align: center;
}

.album-item h3, .single-item h3 {
    color: #f39c12;
    margin-top: 0;
    margin-bottom: 15px;
}

.album-item img {
    max-width: 250px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #e74c3c;
}

.album-links a, .single-item a {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    margin: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.album-links a:hover, .single-item a:hover {
    background-color: #c0392b;
    text-decoration: none;
}

/* Zusätzliche Styles für Biografien (person-bio) */
.person-bio {
    background-color: #333;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.person-bio h3 {
    color: #f39c12; /* Akzentfarbe für Namen */
    margin-top: 0;
    text-align: left;
}

.person-bio img {
    max-width: 200px; /* Größe des Profilbildes */
    height: auto;
    border-radius: 50%; /* Rundes Bild */
    float: left; /* Bild links vom Text */
    margin-right: 20px;
    margin-bottom: 10px;
    border: 3px solid #e74c3c; /* Roter Rand */
}

.person-bio::after { /* Clearfix für float */
    content: "";
    display: table;
    clear: both;
}

/* Kontaktseite und News/Blog (social-links, contact-form, news-post) */
.social-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.social-links li a {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.social-links li a:hover {
    background-color: #c0392b;
    text-decoration: none;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    background-color: #333;
    border-radius: 8px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #f0f0f0;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    padding: 10px;
    border: 1px solid #555;
    background-color: #444;
    color: #f0f0f0;
    border-radius: 44px; /* Korrektur hier, sollte 4px sein */
    font-size: 1em;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #f39c12;
    box-shadow: 0 0 5px rgba(243, 156, 18, 0.5);
}

.contact-form button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #c0392b;
}

.news-post {
    background-color: #333;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.news-post h3 {
    color: #f39c12;
    margin-top: 0;
    text-align: left;
}

.news-post .post-meta {
    font-size: 0.8em;
    color: #aaa;
    margin-bottom: 15px;
}

.news-post p {
    margin-bottom: 10px;
}

.news-post a {
    font-weight: bold;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column; /* Links untereinander auf kleinen Bildschirmen */
        align-items: center;
    }

    .main-nav li {
        width: 100%; /* Menüpunkte nehmen volle Breite ein */
        text-align: center;
        margin: 5px 0; /* Anpassung des Margins */
    }

    .dropdown-content {
        position: static; /* Dropdown wird im Fluss des Dokuments angezeigt */
        width: 100%; /* Volle Breite auf Mobile */
        box-shadow: none; /* Kein Schatten auf Mobile */
        border-radius: 0;
        background-color: #444; /* Etwas hellerer Hintergrund für Dropdowns auf Mobile */
        border-top: 1px solid #555; /* Trennlinie für Dropdown auf Mobile */
    }

    .dropdown-content a {
        padding-left: 30px; /* Einrückung für Unterpunkte auf Mobile */
        text-align: center; /* Textzentrierung auch für Unterpunkte */
    }

    .breadcrumb-nav {
        padding: 8px 15px;
    }

    .breadcrumb li {
        font-size: 0.8em;
    }

    .person-bio img {
        float: none; /* Bild nicht mehr floaten */
        display: block; /* Bild als Blockelement */
        margin: 0 auto 15px auto; /* Zentrieren und Abstand unten */
    }
    .person-bio h3 {
        text-align: center;
    }
}

/* Styling für das Album-Highlight auf der Startseite */
.album-highlight {
    text-align: center;
    margin-top: 50px; /* Abstand nach oben */
    padding: 30px;
    background-color: #2a2a2a; /* Hintergrund passend zum main-Bereich */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Leichter Schatten */
    border: 1px solid #444; /* Dezenter Rahmen */
}

.album-highlight h2 {
    color: #e74c3c; /* Rote Überschrift */
    font-size: 2em;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Leichter Textschatten */
}

.album-highlight a {
    display: inline-block; /* Damit das Bild zentriert wird und der Text darunter bleibt */
    text-decoration: none; /* Unterstreichung des Links entfernen */
    color: #f0f0f0; /* Textfarbe für den Link-Text */
    transition: transform 0.3s ease-in-out; /* Übergang für den Hover-Effekt */
}

.album-highlight a:hover {
    transform: scale(1.02); /* Leichtes Zoomen beim Hover */
}

.album-highlight img {
    max-width: 350px; /* Maximale Breite des Covers */
    height: auto;
    border-radius: 10px; /* Abgerundete Ecken für das Cover */
    border: 3px solid #f39c12; /* Akzentfarbiger Rahmen um das Cover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Starker Schatten für Pop-Out-Effekt */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Übergang für Hover */
}

.album-highlight a:hover img {
    border-color: #e74c3c; /* Roter Rahmen beim Hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 1); /* Stärkerer Schatten beim Hover */
}


.album-highlight-text {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: #f39c12; /* Textfarbe passend zur Akzentfarbe */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.album-highlight a:hover .album-highlight-text {
    color: #e74c3c; /* Rote Textfarbe beim Hover */
}


/* Responsive Anpassungen für das Album-Highlight */
@media (max-width: 600px) {
    .album-highlight {
        padding: 20px;
        margin-top: 30px;
    }
    .album-highlight h2 {
        font-size: 1.6em;
    }
    .album-highlight img {
        max-width: 80%; /* Bild auf kleineren Bildschirmen proportional verkleinern */
    }
    .album-highlight-text {
        font-size: 1em;
    }
}