/* Globale Stile und Schriften */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: white;
    /* Zentriert das Hauptlayout auf dem Bildschirm */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    /* Der Hintergrund wird weiterhin durch JS gesetzt */
    background-size: cover;
    background-position: center;
}

/* Neuer Wrapper, um die Navigation und den Inhalt zu zentrieren und zu positionieren */
.center-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Haupt-Wrapper für das neue Layout */
.main-layout {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Linke Navigationsleiste */
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.menu-buttons button {
    background-color: rgba(25, 25, 25, 0.8);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.25rem 1.5rem; /* Padding erhöht für größere Buttons */
    cursor: url('../assets/cursor/cursor.png'), auto;
    text-align: center; /* Text zentriert */
    font-size: 1.1rem; /* Schriftgröße leicht erhöht */
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.1s;
    width: 200px; /* Breite angepasst */
}

/* Hover-Effekt nur für nicht-aktive Buttons */
.menu-buttons button:not(.active):hover {
    background-color: rgba(50, 50, 50, 1);
    border-color: rgba(255, 255, 255, 0.5);
}

.menu-buttons button:not(.active):active {
    transform: scale(0.97);
}

/* Stil für den aktiven/ausgewählten Button */
.menu-buttons button.active {
    background-color: rgba(80, 120, 220, 0.9);
    border-color: rgba(120, 160, 255, 0.7);
    cursor: default;
}

/* Rechter Container für den Inhalt */
.content-container {
    position: relative;
    width: 650px; /* Breite leicht angepasst wegen des größeren Abstands */
    height: 450px;
}

/* Einzelne Inhalts-Panels */
.menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.85);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    line-height: 1.6;
}

.menu-panel.hidden {
    opacity: 0;
    visibility: hidden;
}

.menu-panel h2 {
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* --- Song-Anzeige oben rechts --- */
#track-display {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
    color: white;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 300px; /* Verhindert, dass es zu breit wird */
}

#track-icon {
    font-size: 1.5rem; /* 24px */
}

.track-text {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert Überlauf */
}

#track-title {
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden; /* WICHTIG: Der Container kürzt den Inhalt */
    text-overflow: ellipsis; 
}

#track-artist {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden; /* WICHTIG: Der Container kürzt den Inhalt */
    text-overflow: ellipsis;
}


/* --- ÜBERARBEITET: Marquee/Scroll-Animation für langen Text --- */

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Diese Variable wird per JavaScript gesetzt, z.B. auf -512px.
          Sie repräsentiert die exakte Breite des Textes + Lücke.
        */
        transform: translateX(var(--marquee-scroll-width));
    }
}

/* Diese Klasse wird per JS hinzugefügt, wenn Text überläuft */
#track-title.scrolling,
#track-artist.scrolling {
    text-overflow: clip; 
}

/* Der Wrapper, der die Animation erhält */
.marquee-wrapper {
    display: flex; /* Richtet die Spans nebeneinander aus */
    
    /* Die Lücke muss mit dem Wert im JS (25px) übereinstimmen */
    gap: 25px;
    
    /* Die Dauer (animation-duration) wird per JS gesetzt.
      Die Verzögerung (1.5s) bleibt.
    */
    animation: scroll-left 10s linear 3.0s infinite;
    /* (10s ist nur ein Fallback, falls JS die Dauer nicht setzt) */
}

/* Die inneren <span>-Elemente, die den Text enthalten */
.marquee-wrapper span {
    /* NEU: 
      'width: 100%' und 'overflow: hidden' werden ENTFERNT.
      Der Span ist jetzt so breit wie sein Inhalt.
    */
    width: auto; /* oder 'max-content' */
    flex-shrink: 0; /* Verhindert das Schrumpfen */
    white-space: nowrap;
}

/* Animation pausieren, wenn man mit der Maus darüber fährt */
#track-title.scrolling:hover .marquee-wrapper,
#track-artist.scrolling:hover .marquee-wrapper {
    animation-play-state: paused;
}