/* Allgemeine Einstellungen für den Body */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url('img/bg.gif') repeat fixed;
    background-size: auto;
    color: #000000;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Inhalt unter dem Header */
    align-items: center; /* Zentriert den gesamten Inhalt */
}

/* Header */
#main-header {
    width: 100%; /* Header nimmt die gesamte Breite des Bildschirms ein */
    max-width: 770px; /* Maximale Breite des Headers */
    height: auto; /* Höhe passt sich an den Inhalt an */
    background-color: #772b1d; /* Hintergrundfarbe */
    display: flex;
    justify-content: center; /* Der Headerbereich wird mittig ausgerichtet */
    align-items: center; /* Zentriert den Inhalt vertikal */
    position: relative;
    top: 0;
}

/* Container für das Bild */
.header-container {
    width: 100%;
    max-width: 770px; /* Maximal 770px Breite */
    height: 100%; /* Nimmt die gesamte Höhe des Headers ein */
    display: flex;
    justify-content: flex-start; /* Bild wird links ausgerichtet */
    align-items: center; /* Zentriert den Inhalt vertikal */
}

/* Bild innerhalb des Headers */
#header-img {
    height: 100%; /* Bild passt sich der Höhe des Containers an */
    max-height: 147px; /* Bild darf nicht höher als 147px sein */
    width: auto; /* Breite passt sich proportional zur Höhe an */
    display: block; /* Entfernt zusätzliche Leerzeichen um das Bild */
}

/* Navigation */
#main-nav {
    width: 100%;
    max-width: 770px;
    margin: 0 auto;
    height: 30px;
    background-color: #772b1d;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin: 0;
}

.nav-links img {
    height: 30px; /* Höhe der Bilder auf 30px beschränkt */
    width: auto; /* Breite wird proportional angepasst */
    transition: all 0.3s ease;
}

/* Menu Button (für Mobile) */
.menu-button {
    display: none;
}

@media (max-width: 770px) {
    /* Wenn die Breite kleiner als 770px ist */
    .nav-links {
        display: none; /* Versteckt die Links */
    }

    .menu-button {
        display: block; /* Zeigt den Menü-Button */
        position: relative;
        width: 770px;
        height: 30px;
        background-color: #d6ae69;
        cursor: pointer;
        margin: 0 auto; /* Zentriere den Button */
    }

    .menu-button img {
        width: 30px;
        height: auto;
    }

    /* Vertikales Menü (wenn Menü-Button geklickt wird) */
    .nav-links.active {
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert die Navigation */
        position: absolute;
        top: 30px;
        width: 100%;
        max-height: 80vh; /* Begrenze die Höhe auf 80% des Viewports */
        background-color: #d6ae69;
        z-index: 999;
        overflow-y: auto; /* Scroll-Funktion aktivieren */
    }

    .nav-links img {
        height: 30px; /* Bilder sind weiterhin maximal 30px hoch */
        width: auto; /* Breite wird automatisch angepasst */
    }
}

/* Navigation wieder anzeigen bei größeren Bildschirmen (Querformat) */
@media (min-width: 770px) {
    .nav-links {
        display: flex !important; /* Stellt sicher, dass die Links immer sichtbar sind */
    }

    .menu-button {
        display: none !important; /* Versteckt den Menü-Button bei größeren Bildschirmen */
    }
}




/* Hauptinhalt */
#content {
    flex: 1; /* Hauptinhalt füllt den verfügbaren Raum */
    width: 100%; /* Nimmt die gesamte Breite des Bildschirms ein */
    max-width: 770px; /* Begrenzung auf die maximale Breite */
    padding: 20px; /* Abstand um den Inhalt herum */
    text-align: left; /* Text linksbündig im Inhalt */
    margin-top: 0px; /* Abstand zum Header */
    background-color: #FFE4B6;
    box-sizing: border-box; /* Padding wird innerhalb der Breite berücksichtigt */
}

/* Funktion für responsives Verhalten */
@media screen and (max-width: 770px) {
    #main-header {
        width: 100%; /* Header bleibt responsiv und passt sich der Bildschirmbreite an */
    }
}

@media screen and (max-width: 480px) {
    #header-img {
        height: auto; /* Bild passt sich an kleine Bildschirme an */
        width: 100%; /* Bild nimmt die volle Breite des Containers ein */
    }
}

footer {
    width: 100%; /* Deckt die gesamte Seitenbreite ab */
    max-width: 770px; /* Maximale Breite */
    height: auto; /* Höhe wird an den Inhalt angepasst */
    background-color: #762C1C; /* Die gewünschte Farbe */
    text-align: center; /* Zentriert den Text im Footer */
    padding: 4px 0; /* Etwas Abstand oben und unten */
    margin: 0 auto; /* Zentriert den Footer auf der Seite */
    margin-top: -16px;
    font-size: 13px; /* Schriftgröße anpassen */
}

/* Überschriften */
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: #762C1C;
    margin-left: 0px;
    margin-top: 7px;
    margin-bottom: 14px;
}

@media only screen and (max-width: 500px) {
h1 {
        font-size: 27px;
        line-height: 1.5;
    }
}

@media only screen and (max-width: 770px) {
h1 {
        font-size: 27px;
        line-height: 1.5;
    }
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #762C1C;
    margin-bottom: 5px;
    margin-top: -5px;
    font-weight: bold;
}

@media only screen and (max-width: 500px) {
h2 {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media only screen and (max-width: 770px) {
h2 {
        font-size: 16px;
        line-height: 1.5;
    }
}


h3 {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    margin-bottom: 2px;
    margin-top: 7px;
    font-weight: bold;
}

@media only screen and (max-width: 500px) {
h3 {
        font-size: 14px;
        line-height: 1.5;
    }
}

h4 {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13pt;
    color: #000000;
    margin-bottom: 1px;
    margin-top: 0px;
    font-weight: bold;
}

/* Absatz-Text */
p, ol, div, td, th, address, nobr, blockquote, tt, li, ul {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.5;
}

/* Kleine Schrift */
small {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.2;
}

.kleinschrift p {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    font-weight: normal;
    margin: 0;
    line-height: 1.4;
}

/* Für kleine Bildschirme */
@media screen and (max-width: 770px) {
    .kleinschrift p {
        font-size: 13px;
        line-height: 1.5;
    }
}


@media screen and (max-width: 770px) {
p, ol, div, td, th, address, nobr, blockquote, tt, li, ul {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media only screen and (max-width: 500px) {
p, ol, div, td, th, address, nobr, blockquote, tt, li, ul {
        font-size: 13px;
        line-height: 1.5;
    }
}

/* Fett markierter Text */
b, strong {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    font-weight: bold;
    line-height: 1.5;
}

@media screen and (max-width: 770px) {
b, strong {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media only screen and (max-width: 500px) {
b, strong {
        font-size: 13px;
        line-height: 1.5;
    }
}

blockquote {
    font-family: Verdana, Helvetica, sans-serif; /* Schriftart */
    font-size: 13px; /* Schriftgröße */
    font-weight: normal; /* Normale Schriftstärke */
    color: #000000; /* Textfarbe */
    margin: 20px 0; /* Abstand oben und unten */
    quotes: "“" "”" "‘" "’"; /* Definiert die Gänsefüßchen */
}

blockquote::before {
            content: open-quote; /* Setzt das öffnende Gänsefüßchen */
}

blockquote::after {
            content: close-quote; /* Setzt das schließende Gänsefüßchen */
}

@media screen and (max-width: 770px){
blockquote {
    font-family: Verdana, Helvetica, sans-serif; /* Schriftart */
    font-size: 13px; /* Schriftgröße */
    font-weight: normal; /* Normale Schriftstärke */
    color: #000000; /* Textfarbe */
    margin: 20px 0; /* Abstand oben und unten */
    quotes: "“" "”" "‘" "’"; /* Definiert die Gänsefüßchen */
}

}

@media screen and (max-width: 500px){
blockquote {
    font-family: Verdana, Helvetica, sans-serif; /* Schriftart */
    font-size: 13px; /* Schriftgröße */
    font-weight: normal; /* Normale Schriftstärke */
    color: #000000; /* Textfarbe */
    margin: 20px 0; /* Abstand oben und unten */
    quotes: "“" "”" "‘" "’"; /* Definiert die Gänsefüßchen */
}

}


/* Spacer */
.spacer {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 1px;
    color: #BC150F;
}

/* Footer */
.footer {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
}

footer p {
    color: #FFFFFF; /* Setzt die Textfarbe auf Weiß */
}

footer a {
    color: #FFFFFF !important; /* Setzt die Textfarbe der Links auf Weiß */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
}

footer a:hover {
    text-decoration: underline; /* Fügt eine Unterstreichung beim Hover hinzu */
    color: #d6ae69; /* Optional: Farbe beim Hover */
}


/* Bildunterschrift */
.bildunterschrift {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #414A06;
}

/* Subnavi-Border */
.subnaviborder {
    border: 1px dashed darkgreen;
}

/* Subnavigation */
.subnavi {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color: #cc6C3C;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: -1px;
}

/* Links */
a:link, a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    text-decoration: none;
    font-weight: bold;
}

a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #990000;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #660000;
    text-decoration: underline;
    font-weight: bold;
}

/* Subnavigation Links */
.sub:link, .sub:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #762C1C;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0px;
}

.sub:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ffffee;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0px;
}

.sub:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #cc6C3C;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0px;
}

@media screen and (max-width: 770px) {
    a:link,
    a:visited,
    a:active,
    a:hover,
    .sub:link,
    .sub:visited,
    .sub:active,
    .sub:hover {
        font-size: 16px;
        font-weight: bold;
    }
}


#language-selection-container {
    background-color: #FFE4B6;
    width: 100%;
    max-width: 770px;
    display: flex;
    justify-content: space-between; /* Home-Button links, Flaggen rechts */
    align-items: center;
    padding: 10px 21px 0px 21px;
    box-sizing: border-box;
}

/* Home-Button links */
#home-button {
    display: flex;
    align-items: center;
}

#home-button img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

/* Sprachwahl rechts */
#language-selection {
    display: flex;
    align-items: center; /* Vertikale Ausrichtung */
    gap: 10px; /* Einheitlicher Abstand zwischen den Flaggen */
}

/* Einheitliche Bilddarstellung */
#language-selection a,
#language-selection .no-link-wrapper {
    display: flex; /* Sorgt dafür, dass sich die Flaggen einheitlich verhalten */
    align-items: center;
}

/* Alle Flaggen */
#language-selection img {
    width: 26px;
    height: 17px;
    object-fit: contain;
}

/* Flagge ohne Link in Wrapper setzen */
.no-link-wrapper {
    display: flex;
    align-items: center;
}

/* Ersetze/ergänze dein bestehendes CSS mit diesen Regeln */
.audio-player {
    display: flex;
    align-items: center;      /* Buttons und Progressbar auf einer Linie */
    gap: 8px;                 /* Abstand zwischen Buttons und Progressbar */
    margin-top: 10px;
    flex-wrap: nowrap;        /* verhindert Umbruch auf nächste Zeile */
}

.play-btn {
    background: url('img/play.png') no-repeat center center;
    background-size: contain;
}

.pause-btn {
    background: url('img/pause.png') no-repeat center center;
    background-size: contain;
}

.stop-btn {
    background: url('img/stop.png') no-repeat center center;
    background-size: contain;
}

.play-btn,
.pause-btn,
.stop-btn {
    width: 12px;              /* Größe der Buttons (anpassen nach Bedarf) */
    height: 12px;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;           /* Buttons behalten feste Größe */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0px; /* Abstand zum Fortschrittsbalken */
    margin-left: 0px;
    margin-bottom: 10px
}

/* Falls du Bilder in den Buttons benutzt */
.play-btn img,
.pause-btn img,
.stop-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.progress-container {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;              /* Große Klickfläche */
    background-color: transparent;  /* transparent für Klickfläche */
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 7px;
}

/* Dünne graue Hintergrund-Leiste */
.progress-background {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2.5px;               /* dünn */
    background-color: #d6ae69; /* Hintergrundfarbe des Fortschritts */
    border-radius: 2px;
    transform: translateY(-50%);
    pointer-events: none;      /* damit Klicks durchgehen */
    z-index: 1;
}

.progress-bar {
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;               /* gleiche Höhe wie Hintergrund */
    width: 0%;
    background-color: #762c1c; /* Fortschrittsfarbe */
    border-radius: 2px;
    transform: translateY(-50%);
    transition: width 0.08s linear;
    z-index: 2;                /* über dem Hintergrund */
}


.song-item {
  display: flex;
  align-items: center; /* Titel und Player in einer Reihe */
  gap: 10px;
  margin-bottom: 10px;
}

.song-title {
  flex-shrink: 0;
  /* z.B. feste Breite oder max-width, falls nötig */
}

.audio-player {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Playlist-Style */
#my-song-list {
    list-style: none;      /* keine Punkte */
    padding: 0;
    margin: 10px 0 0 0;
}

#my-song-list li {
    cursor: pointer;
    color: #762c1c;
    text-decoration: none;
    padding: 1px 0;
    transition: color 0.2s ease;
    font-size: 11px; /* etwas kleiner */
}

#my-song-list li:hover {
    color: #d6ae69;        /* Hover-Farbe */
}


#my-song-list li.active {
    font-weight: bold;
    color: #d6ae69;         /* Gleiche Farbe wie Hover */
    text-decoration: none;  /* Keine Unterstreichung bei aktivem Song */
}

/* --- Audio player responsive sizing: Variablen --- */
:root{
  --audio-btn-size: 12px;              /* Default (desktop) */
  --audio-icon-fit: 100%;              /* background-size default */
  --progress-container-height: 20px;   /* Default klickfläche */
  --progress-bg-height: 2.5px;         /* sichtbare dünne bg */
  --progress-bar-height: 3px;          /* sichtbare fortschritt */
  --touch-target-min: 44px;            /* empfohlene Touch-Größe */
}

/* Nutze die Variablen in deinen existierenden Regeln (falls noch nicht): */
.play-btn, .pause-btn, .stop-btn {
  width: var(--audio-btn-size);
  height: var(--audio-btn-size);
  background-size: var(--audio-icon-fit);
}

/* progress container uses variable height */
.progress-container {
  height: var(--progress-container-height);
}
.progress-background {
  height: var(--progress-bg-height);
}
.progress-bar {
  height: var(--progress-bar-height);
}

/* --- Mobile / Touch override --- */
/* Greift auf schmalen Displays und auf Devices mit grobem Zeiger */
@media (max-width: 770px), (pointer: coarse) {
  :root{
    --audio-btn-size: 20px;             /* große Buttons auf Mobil */
    --audio-icon-fit: 70%;              /* Icon kleiner innerhalb Button */
    --progress-container-height: 30px;  /* große Klickfläche (sichtbar bleibt dünn) */
    --progress-bg-height: 4px;          /* größere sichtbare Leiste */
    --progress-bar-height: 5px;
  }

  /* Buttons sichtbar zentrieren / Abstand anpassen */
  .play-btn, .pause-btn, .stop-btn {
    width: var(--audio-btn-size);
    height: var(--audio-btn-size);
    border-radius: 6px;        /* optional: runde Buttons */
    margin-bottom: 0;
    margin-right: 6px;         /* etwas Abstand rechts */
    background-size: var(--audio-icon-fit);
  }

  /* Erhöhe die Progresscontainer Höhe weiter, die sichtbare Leiste bleibt dünn, zentriert */
  .progress-container {
    height: var(--progress-container-height);
    border-radius: 8px;
    margin-bottom: 5px;
  }
  .progress-background {
    height: var(--progress-bg-height);
    top: 50%;
    transform: translateY(-50%);
  }
  .progress-bar {
    height: var(--progress-bar-height);
    top: 50%;
    transform: translateY(-50%);
  }

  /* Vergrössere Schrift evtl. für Playlist */
  #my-song-list li {
    font-size: 13px;
    padding: 2px 0;
  }
}

/* mobile overrides nur für den Player mit der Playlist */
@media (max-width: 600px), (pointer: coarse) {
  /* gezielt den Player mit der ID ansprechen */
  #my-player .progress-container {
    margin-bottom: 0px !important;   /* !important nur als letzte Instanz */
    height: 44px !important;
    border-radius: 8px !important;
  }
}



.colored-section {
    position: relative; /* Füge relative Positionierung zum Container hinzu */
}

.colored-section::before {
    content: '';
    display: block;
    position: absolute; /* Absolut positioniert, um die Breite zu kontrollieren */
    width: 100%;
    left: 0; /* Links auf 0 setzen */
    right: 0; /* Rechts auf 0 setzen */
    height: 2px; /* Höhe der Linie */
    background-color: #d6ae69; /* Farbe der Linie */
    margin-top: -15px; /* Abstand zum unteren Rand des farbigen Bereichs */
    margin-bottom: 25px; /* Abstand zum nächsten Element */
}