/* 1. GRUNDLAYOUT & FARBEN (Dark Theme) */
body {
    background-color: #121212; /* Sehr dunkler Hintergrund für die ganze Seite */
    color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.slider-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    max-width: 1300px;
    margin: 5px auto 20px auto;
}

/* 2. GEMEINSAME BOX-STYLES (Side-Panel & Main-Viewer) */
.side-panel, .main-viewer {
    background-color: #1e1e1e; /* Dunkelgraue Boxen */
    color: #ffffff;
    border: 12px solid #333;
    box-shadow: 0 1px 15px rgba(0,0,0,0.5);
    border-radius: 8px;
    overflow: hidden;
}

/* 3. SEITEN-BOXEN (Accordion Bereich) */
.side-panel {
    flex: 0 0 300px; 
    min-height: 485px;
    padding: 10px; /* Reduziert von 30px - das ist der Hauptgrund für den Platzverlust */
}

/* 4. HAUPTBEREICH (BILD & TEXT) */
.main-viewer {
    flex: 1 1 650px; /* Wächst und schrumpft flexibel */
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

#main-img {
    width: 100%;
    height: 650px;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    transition: opacity 0.4s ease-in-out;
    border-radius: 4px;
}

/* 5. DIE BESCHREIBUNGS-BOX (Hier war dein Problem) */
.description-box {
    width: 90%;
    margin-top: 20px;
    padding: 15px;
    background: #2a2a2a; /* Etwas heller als die Box */
    border-left: 4px solid #ffc107; /* Goldener Akzent-Streifen */
    text-align: center;
    font-size: 1.1rem;
    color: #ffffff !important; /* Erzwingt Weiß */
    font-style: italic;
    min-height: 20px;
    display: block; /* Stellt sicher, dass es sichtbar ist */
}

/* 6. NAVIGATION & BUTTONS */
.controls {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.nav-btn { background: #444; color: white; }
.nav-btn:hover { background: #555; }

#pause-btn { background: #333; color: #ffc107; border: 1px solid #ffc107; }
#pause-btn:hover { background: #ffc107; color: black; }

.btn-download { background: #ffc107; color: black; }
.btn-download:hover { background: #e0a800; }

/* 7. ACCORDION (MENÜ) */
.accordion {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #444;
    font-weight: bold;
}

.active, .accordion:hover {
    background-color: #444;
    color: #ffc107;
}

.panel {
    background-color: #252525;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.panel a {
    display: block;
    padding: 1px 15px;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.panel a:hover { 
    color: #ffc107; 
    background: #333;
}

/* 8. LINKS GLOBAL */
a:visited, a:active { color: #ffffff; }
a:hover { color: #ffc107; text-decoration: underline; }

/* 9. MOBILE ANPASSUNG */
@media (max-width: 850px) {
    .slider-wrapper { flex-direction: column; align-items: center; }
    .side-panel, .main-viewer { width: 100%; flex: none; }
    .side-panel { order: 2; min-height: auto; }
    .main-viewer { order: 1; }
}
      /* Der Home-Link im speziellen */
.main-viewer a, #home-link { 
    color: #ffc107 !important; /* Goldgelb erzwingen */
    text-decoration: none !important;
    font-weight: bold;
    transition: 0.3s;
}

/* Wenn man mit der Maus drüberfährt */
.main-viewer a:hover, #home-link:hover {
    color: #ffffff !important; /* Wird Weiß beim Hover */
    text-decoration: underline !important;
}

/* Verhindert das "Violett" nach dem Klicken */
.main-viewer a:visited {
    color: #ffc107 !important;
}