/*
 * radio.css - Überarbeitete Styles für Playcard Audio Server
 *
 * Basierend auf den bereitgestellten Styles, optimiert für Konsistenz und Responsivität.
 */

/* --- Allgemeine Body-Styles --- */
html {
    margin: 0;
    padding: 0;
    /* Hintergrundfarbe, die durch das Bild abgedeckt wird oder als Fallback dient */
    background-color: #1a2a3a; /* Ein dunkles Blau/Grau als Basis */
}

body {
    max-width: 900px; /* Erhöht, um mehr Platz für den Inhalt zu lassen */
    margin: 0 auto; /* Zentriert den Inhalt */
    padding: 0 1em; /* Innenabstand links und rechts */
    font-family: Verdana, Helvetica, sans-serif;
    /* Hintergrundbild und seine Eigenschaften */
    background-image: url("https://jaquearnoux.de/radio.png");
    background-size: cover; /* Bild deckt den gesamten Hintergrund ab */
    background-position: center center; /* Bild zentrieren */
    background-attachment: fixed; /* Bild bleibt beim Scrollen fixiert */
    background-repeat: no-repeat; /* Bild nicht wiederholen, da es abgedeckt wird */
    
    background-color: #1a2a3a; /* Fallback für Hintergrundfarbe */
    color: #b6b6b6; /* Haupttextfarbe (hellgrau für dunklen Hintergrund) */
    font-size: 18px; /* Etwas kleinere Schriftgröße für bessere Lesbarkeit auf Desktop und Mobil */
    text-align: center;
    line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
}

/* --- Links --- */
a {
    color: #C0C0C0; /* Helles Silber für Links */
    text-decoration: none;
    border-bottom: 1px dotted #C0C0C0; /* Gepunkteter Unterstrich in Silber */
    transition: color 0.2s, border-bottom 0.2s; /* Sanfter Übergang */
}

a:hover {
    color: #f8ef64; /* Gelb beim Hover */
    border-bottom: 1px solid #f8ef64; /* Voller Unterstrich in Gelb beim Hover */
}

/* --- Überschriften --- */
h1 {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 2.8em; /* Etwas kleiner als 3em, aber immer noch prominent */
    color: #D3D3D3; /* Helles Silber für H1, ähnlich dem gewünschten Look */
    margin-top: 15px;
    margin-bottom: 25px; /* Etwas mehr Abstand nach der Überschrift */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Leichter Schatten für bessere Sichtbarkeit */
}

h3 {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.2em; /* Relativ zur Basis-Schriftgröße */
    color: #f8ef64; /* Gelb für H3 */
    margin-top: 15px;
    margin-bottom: 10px;
}

h1#header {
    padding: 10px 0px 10px 80px;
    background: transparent url(/icecast.png) no-repeat scroll left center;
    background-size: auto 80%; /* Skaliert das Bild passend */
    min-height: 60px; /* Mindesthöhe für das Bild */
    box-sizing: border-box; /* Padding in die Größe einbeziehen */
}

h3 small {
    color: #fff;
    font-size: 0.7em; /* Relativ zur h3-Größe */
    padding-left: 15px;
}

/* --- Formulare --- */
form {
    margin-bottom: 20px;
}

form.alignedform label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}

form.alignedform input,
form input[type="text"] { /* Allgemeine Inputs */
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #C0C0C0; /* Silberner Rand */
    background-color: #333;
    color: #f8ef64; /* Gelbe Eingabe-Farbe */
    padding: 8px 12px; /* Etwas mehr Padding */
    border-radius: 5px; /* Abgerundete Ecken */
    box-sizing: border-box; /* Padding in die Größe einbeziehen */
    width: auto; /* Standardbreite beibehalten */
    max-width: 90%; /* Verhindert Überlauf auf kleinen Bildschirmen */
}

form button[type="submit"] {
    background-color: #f8ef64;
    color: #333;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

form button[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}


/* --- Navigation (Menu) --- */
#menu {
    border-top: 3px solid #7B96C6;
    border-bottom: 3px solid #7B96C6;
    text-align: center;
    margin-bottom: 35px;
    padding: 10px 0; /* Padding für bessere Optik */
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* Flexbox für bessere horizontale Ausrichtung */
    justify-content: center; /* Zentriert die Elemente */
    flex-wrap: wrap; /* Ermöglicht Umbruch auf kleinen Bildschirmen */
}

#menu ul li {
    padding: 0 15px; /* Einheitlicher Abstand */
    margin: 5px 0; /* Vertikaler Abstand für Umbruch */
}

#menu ul li a {
    font-family: Verdana, sans-serif;
    text-decoration: none;
    color: #fff; /* Weiße Farbe für Menü-Links */
    font-size: 1em; /* Relativ zur Basis-Schriftgröße */
    border: none;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Linktext */
}

#menu ul li a:hover {
    color: #f8ef64;
}

/* --- Container-Elemente --- */
.roundbox {
    width: 90%; /* Relative Breite */
    max-width: 600px; /* Maximale Breite, um zu breit werden zu verhindern */
    background-color: rgba(101, 101, 101, 0.8); /* Etwas transparenter Hintergrund */
    border-radius: 10px;
    padding: 15px 20px;
    margin: 0 auto 35px auto; /* Zentriert und Abstand nach unten */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
}

.roundbox h3 {
    margin-bottom: 10px;
    border-bottom: 1px groove #ACACAC;
    padding-bottom: 5px; /* Abstand zur Linie */
}

.roundbox table.yellowkeys tr td:last-child {
    color: #f8ef64;
}

.right {
    float: right;
}

/* --- Mount-spezifische Styles --- */
.mounthead h3 {
    float: left;
    margin-bottom: 0px;
    border-bottom: none;
}

.mountcont {
    border-top: 1px groove #ACACAC;
    clear: both;
    padding-top: 10px; /* Abstand nach oben */
}

ul.mountlist {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.mountlist li {
    display: inline-block; /* Inline-Block für bessere Kontrolle */
    margin-left: 15px; /* Abstand zwischen Listenelementen */
}

a.play {
    padding-left: 22px;
    margin-left: 15px; /* Etwas weniger Margin */
    border: none;
    background: transparent url(/tunein.png) no-repeat scroll left center;
    background-size: auto 100%;
}

a.auth {
    padding-left: 22px;
    margin-left: 15px; /* Etwas weniger Margin */
    border: none;
    background: transparent url(/key.png) no-repeat scroll left top;
    background-size: auto 100%;
}

/* --- Admin Navigation --- */
ul.nav {
    margin: 0;
    padding: 5px 0 10px 0;
    clear: both;
    list-style: none;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

ul.nav li {
    display: inline-block;
    margin: 5px 10px; /* Etwas mehr Abstand */
}

ul.nav li a {
    border: none;
    display: inline-block;
    padding: .5em 1em; /* Mehr Padding für Klickbereich */
    background-color: #333;
    color: #fff;
    white-space: nowrap;
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.2s, color 0.2s;
}

ul.nav li a:hover {
    background-color: #555;
    color: #f8ef64; /* Gelblich beim Hover */
}

/* --- Tabellen (Colortable) --- */
table.colortable {
    border-collapse: collapse;
    padding: 20px 0;
    margin: 20px auto; /* Zentriert mit mehr Abstand */
    width: 100%; /* Volle Breite */
    max-width: 800px; /* Maximale Breite */
}

table.colortable td {
    border: 1px solid #000;
    text-align: center;
    padding: 8px; /* Mehr Padding */
    background-color: rgba(51, 51, 51, 0.7); /* Leicht transparentes Dunkelgrau */
    color: #fff;
}

table.colortable thead tr td {
    color: #333; /* Dunklerer Text */
    background: #f8ef64; /* Gelbliche Kopfzeile */
    border-color: white;
    font-weight: bold;
}

.roundbox table.yellowkeys tr td {
    padding: 5px 5px 0 0;
    word-wrap: break-word;
    word-break: break-all;
}

/* --- Footer --- */
#footer {
    border-top: 1px groove #ACACAC;
    margin-top: 40px; /* Mehr Abstand zum Inhalt */
    padding-top: 15px; /* Padding nach oben */
    font-size: 0.8em; /* Relativ zur Basis-Schriftgröße */
    color: #888; /* Dunklerer Text */
}

/* --- Spezielle Klassen --- */
.fehler {
    background-color: #b6b6b6;
    color: #8b0000;
    font-size: 1em;
    font-weight: 900;
    letter-spacing: 2px; /* Etwas weniger Letter-Spacing */
    padding: 5px 10px; /* Mehr Padding */
    border-radius: 5px;
    margin: 15px 0; /* Abstand nach oben und unten */
    display: inline-block; /* Für korrekten Padding/Margin */
}

.klein {
    background-color: #000000;
    color: #888888;
    font-size: 0.8em;
}

.kontent {
    font-size: 0.9em;
    color: #b6b6b6;
    text-align: justify;
    padding: 0 10px; /* Leichtes Padding für Textfluss */
}

.menu { /* Diese Klasse wird durch #menu überschrieben, hier nur für den Fall der Nutzung */
    /* #background-color:#000000; */
    color: red;
    font-size: 0.9em;
    letter-spacing: 3px;
}

/* --- Player-Container und Player selbst --- */
.player-container {
    max-width: 680px; /* Maximale Breite für den Player und Cover */
    margin: 20px auto; /* Zentriert */
    background-color: rgba(0, 0, 0, 0.7); /* Leichte Transparenz für den Player-Hintergrund */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Tieferer Schatten */
}

.player-container audio,
.player-container video {
    width: 100%; /* Audio/Video-Element füllt den Container */
    max-width: 640px; /* Maximale Breite wie Iframe */
    display: block; /* Verhindert zusätzlichen Leerraum */
    margin: 20px auto; /* Zentriert das Element */
    background-color: #000; /* Hintergrund für Player-Elemente */
    border-radius: 5px; /* Leicht abgerundete Ecken */
}

/* --- Iframe-Fix: Dies ist der Kern der Lösung für das zersprengte Layout --- */
iframe {
    display: block;
    background: #000;
    border: none;
    width: 100%; /* 100% der Elternelement-Breite */
    max-width: 640px; /* Maximale Breite für Iframes (passend zu YouTube Embeds) */
    height: 360px; /* Feste Höhe, die typischerweise für 16:9 Videos passt (640 / 16 * 9 = 360) */
    margin: 20px auto; /* Zentriert den Iframe */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.player-container img {
    max-width: 300px; /* Max. Breite für Cover-Bilder */
    height: auto; /* Höhe proportional anpassen */
    display: block; /* Bild als Blockelement, um es zu zentrieren */
    margin: 15px auto; /* Zentriert das Bild */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Kleiner Schatten */
}


/* --- Radio Now Playing Sektion --- */
.radio-now-playing {
    background-color: rgba(51, 51, 51, 0.7); /* Dunkler, leicht transparenter Hintergrund */
    padding: 15px;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 600px;
    text-align: left; /* Text linksbündig für bessere Lesbarkeit */
    border: 1px solid #333;
}

.radio-now-playing h3 {
    color: #f8ef64; /* Überschriftfarbe */
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.radio-now-playing p {
    color: #FFFFFF; /* Text der Radioanzeige bleibt weiß */
    font-size: 0.9em;
    margin-bottom: 5px;
}

.radio-now-playing a {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #f8ef64;
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    border-bottom: none; /* Kein Unterstrich für diesen spezifischen Button-Link */
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.radio-now-playing a:hover {
    background-color: #fff;
    color: #000;
}


/* --- Listen (Song-Listen) --- */
.song-list {
    list-style: none; /* Keine Standardpunkte */
    padding: 0;
    margin: 0;
    text-align: left; /* Links ausgerichtet für Lesbarkeit */
}

.song-list li {
    background-color: rgba(30, 30, 30, 0.7); /* Dunkler, transparenter Hintergrund */
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.song-list li:hover {
    background-color: rgba(50, 50, 50, 0.8); /* Etwas heller beim Hover */
}

.song-list li a {
    color: #D3D3D3; /* Helleres Silber für Songtitel-Links */
    border-bottom: 1px solid #D3D3D3; /* Voller Unterstrich in Silber */
    display: block; /* Ganzen Bereich klickbar machen */
}

.song-list li a:hover {
    color: #f8ef64; /* Gelblich beim Hover */
    border-bottom-color: #f8ef64; /* Unterstrich auch gelb beim Hover */
}

/* --- Ordner-Struktur (bei structured view) --- */
.folder {
    margin-bottom: 30px;
    background-color: rgba(40, 40, 40, 0.7);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.folder h2 {
    color: #f8ef64; /* Gelblich für Ordner-Titel */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    text-align: left;
}

/* --- Themen --- */
.dark-theme {
    /* Bereits als Standard gesetzt, kann hier überschrieben werden,
       wenn ein JS-Schalter verwendet wird */
    background-color: #000000;
    color: #FFFFFF;
}

.normal-theme {
    background-color: #B8FFF7;
    color: #C53131;
}

.light-theme {
    background-color: #FFFFFF;
    color: #000000;
}


/* --- Responsive Anpassungen --- */
@media (max-width: 800px) {

    body {
        font-size: 16px;
        padding: 0 10px;
        background-size: contain; /* Bild wird skaliert, damit es komplett sichtbar ist */
        background-position: center top; /* Bild oben zentrieren */
        background-repeat: no-repeat; /* Wichtig, damit es sich nicht wiederholt und Leerräume füllt */
        background-attachment: scroll; /* Auf Mobilgeräten scrollt das Bild mit */
    }

    h1 {
        font-size: 2.2em;
    }

    .roundbox, .player-container, .radio-now-playing, .folder {
        width: auto; /* Volle Breite, kein max-width */
        border-radius: 0; /* Keine Abrundungen an den Rändern des Bildschirms */
        padding: 10px; /* Weniger Padding */
        margin-left: 0;
        margin-right: 0;
    }

    .roundbox table.yellowkeys tr td {
        display: block; /* Zellen untereinander */
        padding: 5px 0; /* Vertikaler Abstand */
    }

    .roundbox table.yellowkeys tr td:last-child {
        margin-bottom: 5px;
        margin-left: 0;
    }

    .scrolltable {
        overflow-x: auto; /* Ermöglicht horizontales Scrollen für Tabellen */
        -webkit-overflow-scrolling: touch; /* Flüssigeres Scrollen auf Mobilgeräten */
    }

    /* Navigation (Menü und Admin-Nav) wird zu Stapel */
    ul.nav, #menu ul {
        display: block; /* Jedes Element in einer neuen Zeile */
        text-align: center;
    }

    ul.nav li, #menu ul li {
        float: none;
        padding: 5px 0; /* Vertikaler Abstand */
        width: 100%; /* Volle Breite für Listenelemente */
        box-sizing: border-box;
    }

    ul.nav li a, #menu ul li a {
        display: block; /* Füllt das Listenelement aus */
        border-radius: 0; /* Keine Abrundungen bei Full-Width-Links */
        border-bottom: 1px solid #444; /* Trennlinie zwischen Links */
    }
    ul.nav li:last-child a, #menu ul li:last-child a {
        border-bottom: none; /* Letzter Link ohne Trennlinie */
    }


    a.play, a.auth {
        margin-left: 0; /* Kein zusätzlicher linker Margin */
        background-position: left center; /* Bild links zentriert */
    }

    /* Formularanpassungen für Mobil */
    form.alignedform label {
        display: block; /* Label über dem Input */
        text-align: left;
        width: auto;
        margin-bottom: 5px;
    }
    form.alignedform input,
    form input[type="text"] {
        width: 100%; /* Inputs füllen die Breite */
        max-width: 100%;
    }
}