/* style.css*/
    img[src=""], img:not([src]) { display: none; }
    /* Versteckt kaputte Bilder */
    img { onerror: none; }
    
/* --- CSS VARIABLEN & NACHTMODUS --- */
    :root {
        /* TAG (Standard) */
        --bg-body: linear-gradient(135deg, #e40e0e 0%, #7FD0F9 100%);
        --bg-player: #ffffff;
        --bg-visual: #eeeeee;
        --bg-controls: #ffffff;
        --text-main: #333333;
        --text-sec: #555555;
        --list-bg: rgba(129, 236, 236, 0.6);
        --list-item-bg: rgba(255,255,255,0.8);
        --list-item-txt: #2f3d73;
        --shadow-col: rgba(0,0,0,0.3);
        --input-border: #2F5FDD;
        --input-bg: #ffffff;
    }

    
    
    
    
    @media (orientation: landscape){
    .visual-area { width: 50%; }
}
    /* NACHTMODUS EINSTELLUNGEN */
    body.dark-mode {
        --bg-body: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); /* Tiefes Nachthimmel-Blau */
        --bg-player: #2d3436;
        --bg-visual: #1e272e;
        --bg-controls: #2d3436;
        --text-main: #dfe6e9; /* Fast Weiß */
        --text-sec: #b2bec3;
        --list-bg: rgba(30, 39, 46, 0.9);
        --list-item-bg: rgba(60, 60, 60, 0.8);
        --list-item-txt: #dfe6e9;
        --shadow-col: rgba(0,0,0,0.8); 
        --input-border: #555;
        --input-bg: #444;
    }

    /* --- CSS BASIS --- */
    * { box-sizing: border-box; }
    
    body {
        font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
        background: var(--bg-body); 
        margin: 0; padding: 0;
        height: 100vh; width: 100vw;
        display: flex; flex-direction: column;
        user-select: none; -webkit-tap-highlight-color: transparent;
        transition: background 0.5s ease;
    }

    /* --- SKALIERUNGS-CONTAINER --- */
    #player_div {
        position: fixed;
        top: 50%; left: 50%;
        width: 800px; height: 500px;
        background: var(--bg-player); /* VARIABLE */
        border-radius: 25px;
        box-shadow: 0 10px 40px var(--shadow-col); /* VARIABLE */
        display: flex;
        overflow: hidden;
        transform-origin: center center;
        transition: transform 0.2s ease-out, background 0.3s, box-shadow 0.3s;
        color: var(--text-main); /* VARIABLE */
    }

    /* Hochkant-Modus Anpassung */
    #player_div.portrait {
        width: 500px; height: 800px;
        flex-direction: column;
    }

    /* --- BEREICHE --- */
    .visual-area {      
        flex: 1; position: relative;
        background-color: var(--bg-visual); /* VARIABLE */
        display: flex; flex-direction: column;
        justify-content: flex-end; align-items: center;
        transition: background 0.3s;
    }

    #cover-art {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-size: cover; background-position: center;
        background-color: #81ecec;
        transition: background-image 0.5s ease;
    }

    /* Titelliste */
    #titles {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: var(--list-bg); /* VARIABLE */
        overflow-y: auto; padding: 10px; padding-bottom: 240px;
        z-index: 5; list-style: none; margin: 0;
    }
    #titles li {
        padding: 8px 12px; margin-bottom: 5px;
        background: var(--list-item-bg); /* VARIABLE */
        border-radius: 10px; font-size: 14px; cursor: pointer;
        color: var(--list-item-txt); /* VARIABLE */
        border: 1px solid rgba(0,0,0,0.1);
    }
    #titles li.active { background: #fa3abd; color: white; border-color: #fff; }

    #alt_title-display {
        z-index: 10; 
        background: var(--bg-controls); /* VARIABLE */
        padding: 10px 20px; border-radius: 20px;
        font-size: 1.2rem; font-weight: bold; 
        color: var(--text-main); /* VARIABLE */
        margin-bottom: 15px; text-align: center;
        box-shadow: 0 4px 15px var(--shadow-col);
        max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    
#title-display {
        z-index: 20; 
        background: var(--bg-controls);
        padding: 10px 30px; border-radius: 20px;
        font-size: 1.2rem; font-weight: bold; 
        color: var(--text-main);
        margin-bottom: 15px; text-align: center;
        box-shadow: 0 4px 15px var(--shadow-col);
        max-width: 85%; 
        
        /* WICHTIG: Der Kasten bleibt stehen und schneidet alles ab, was rausguckt */
        overflow: hidden;
        white-space: nowrap;
        position: relative; 
    }

    /* Der Text darin */
    #title-content {
        display: inline-block;
        vertical-align: middle;
    }

    /* Die Klasse für die Bewegung (wird per JS aktiviert) */
    .scrolling-text {
        animation: marquee 10s linear infinite;
        padding-left: 100%; /* Startet ganz rechts außerhalb */
    }

    @keyframes marquee {
        0%   { transform: translate(0, 0); }
        100% { transform: translate(-100%, 0); }
    }


    .controls-area {
        flex: 1; padding: 20px;
        display: flex; flex-direction: column;
        justify-content: space-evenly; align-items: center;
        background: var(--bg-controls); /* VARIABLE */
        transition: background 0.3s;
    }

    /* --- UI ELEMENTE --- */
    #progressbar-container {
        width: 100%; height: 25px; background: #e0e0e0;
        border-radius: 12px; overflow: hidden;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); cursor: pointer;
    }
    #progress {
        width: 0%; height: 100%;
        background: linear-gradient(90deg, #FF9A9E 0%, #FA3ABD 100%);
        transition: width 0.2s linear;
    }

    .row { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; }

    .kid-btn {
        border: none; outline: none; cursor: pointer;
        display: flex; justify-content: center; align-items: center;
        box-shadow: 0 8px 0 rgba(0,0,0,0.2);
        transition: all 0.1s; position: relative; top: 0;
    }
    .kid-btn:active { top: 6px; box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

    .btn-play { width: 100px; height: 100px; border-radius: 50%; background: #2AB7CA; color: white; font-size: 45px; }
    .btn-play.playing { background: #FF6B6B; animation: pulse 2s infinite; }
    .btn-nav { width: 70px; height: 70px; border-radius: 50%; background: #FFD93D; font-size: 30px; }
    .btn-small { width: 60px; height: 50px; border-radius: 15px; background: #95a5a6; color: white; font-size: 18px; }

    .toggle-btn {
        flex: 1; padding: 10px; border-radius: 15px; background: #eee; 
        font-weight: bold; color: #777; border: 2px solid #ddd;
    }
    .toggle-btn.active { background: #a8e6cf; border-color: #2ecc71; color: #006400; }

    input[type=range] { width: 90%; height: 30px; }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
        70% { box-shadow: 0 0 0 20px rgba(255, 107, 107, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }
    
    .login-wrapper {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        z-index: 200;
        background: rgba(0,0,0,0.4); 
    }
    .login-box { font-size: 24px; padding: 15px; border-radius: 15px; border: 2px solid #ccc; text-align: center; }
    
    .musiklistebutton {
        border: groove;
        position: relative; z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        padding: 10px 20px; border-radius: 20px;
        font-size: 1.2rem; font-weight: bold;
        color: #333; margin-bottom: 15px;
        text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    
    /* --- Styles für das Dropdown --- */
    .folder-select-trigger {
        font-size: 1.2rem; font-weight: bold;
        padding: 10px 15px; width: 100%;
        border-radius: 15px; 
        border: 3px solid var(--input-border); /* VARIABLE */
        background: var(--input-bg); /* VARIABLE */
        color: var(--text-main); /* VARIABLE */
        cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .custom-options {
        position: absolute;
        top: 60px; left: 0; right: 0; margin: auto;
        width: 98%; 
        background: var(--input-bg); /* VARIABLE */
        border-radius: 15px; 
        border: 3px solid var(--input-border); /* VARIABLE */
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        max-height: 315px; overflow-y: auto;
        display: none; z-index: 200;
        color: var(--text-main);
    }
    .custom-options.show { display: block; }

    .folder-option {
        padding: 10px; 
        border-bottom: 1px solid var(--text-sec); 
        display: flex; align-items: center; cursor: pointer;
    }
    .folder-option:hover { background: rgba(0,0,0,0.1); }
    .folder-option:active { background: #d0ebff; }

    .folder-thumb {
        width: 50px; height: 50px; border-radius: 50%;
        object-fit: cover; margin-right: 15px;
        border: 1px solid #ccc; background: #eee;
    }
    .folder-icon { 
        width: 50px; height: 50px; display: flex; align-items: center; 
        justify-content: center; font-size: 24px; margin-right: 15px;
        background: #f0f0f0; border-radius: 50%;
    }

    #time-display {
        width: 100%; text-align: center;
        font-size: 16px; font-weight: bold;
        color: var(--text-sec); /* VARIABLE */
        margin-top: 8px; font-family: monospace;
    }
    /* EQ STYLES */
    .eq-band {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 14px; color: var(--text-sec); font-weight: bold;
    }
    .eq-band label { width: 50px; }
    .eq-band input { flex: 1; }