/* --- CSS Variablen für zentrales Themeing (Dark / Light Mode) --- */
:root {
    /* Dark Mode (Standard Map-Hintergrund, falls nicht Light-Mode aktiv) */
    --bg-panel: rgba(40, 45, 50, 0.95);
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --border-color: #555555;
    --btn-hover: #3a3f45;
}

body.light-mode {
    /* Light Mode (wird per JavaScript auf den body gesetzt) */
    --bg-panel: rgba(255, 255, 255, 0.95);
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #dddddd;
    --btn-hover: #f0f0f0;
}

/* --- Basis-Styling --- */
body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
    background-color: #111; 
    color: var(--text-main); 
}

#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}

.mapboxgl-popup-content { 
    border-radius: 8px; 
    font-size: 15px; 
    color: #333; /* Popups bleiben der Lesbarkeit halber immer dunkel auf hell */
}

/* --- Menü Links Oben (Hamburger & Dropdown) --- */
#top-left-controls { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    z-index: 1000; 
    display: flex; 
    gap: 10px; 
    align-items: flex-start; 
}

#hamburger-btn {
    background: var(--bg-panel); 
    border: 1px solid var(--border-color); 
    color: var(--text-main);
    width: 38px; 
    height: 38px; 
    border-radius: 5px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
    transition: all 0.2s;
}

#hamburger-btn.active { 
    background: #4a90e2; 
    color: #fff; 
    border-color: #4a90e2; 
}

#ui-menu {
    background: var(--bg-panel); 
    padding: 8px; 
    border-radius: 5px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.2s;
}

#ui-menu select { 
    font-size: 14px; 
    padding: 5px; 
    cursor: pointer; 
    background: transparent; 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
    border-radius: 3px; 
}

#ui-menu select option { 
    color: #333; /* Verhindert, dass unsichtbare weiße Schrift in weißen System-Dropdowns entsteht */
} 

/* --- Steuerzentrale Rechts Oben --- */
#map-controls {
    position: absolute; 
    top: 20px; 
    right: 20px; 
    z-index: 1000;
    background: var(--bg-panel); 
    border-radius: 5px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

#map-controls button {
    background: transparent; 
    border: none; 
    border-bottom: 1px solid var(--border-color);
    width: 36px; 
    height: 36px; 
    padding: 0; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--text-main); 
    transition: background 0.2s ease;
}

#map-controls button:last-child { 
    border-bottom: none; 
}

#map-controls button:hover { 
    background: var(--btn-hover); 
}

#map-controls button.active { 
    background: #4a90e2; 
    color: #fff; 
}

#compass-icon { 
    transition: transform 0.1s ease-out; 
}

/* --- Legende (Kompaktiert für kontinuierliche Daten) --- */
#legend-container {
    position: absolute; 
    bottom: 100px; 
    left: 20px; 
    z-index: 1000;
    background: var(--bg-panel); 
    padding: 10px; 
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
    width: 65px; 
    display: flex; 
    flex-direction: column;
}

.legend-header { 
    font-size: 12px; 
    font-weight: bold; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    text-align: center; 
}

#legend-content { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
}

.legend-row { 
    display: flex; 
    align-items: center; 
    height: 8px; /* Drastisch verkleinert für fließenden Übergang */
    width: 100%; 
} 

.legend-color-box { 
    width: 20px; 
    height: 100%; 
}

.legend-label { 
    font-size: 10px; 
    margin-left: 8px; 
    font-weight: bold; 
    line-height: 8px; 
    color: var(--text-main); 
}

/* --- Timeline Container & Model-Run Info --- */
#timeline-container {
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1000;
    background: var(--bg-panel); 
    padding: 10px 20px; 
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 80%; 
    max-width: 450px;
}

#model-run-info { 
    font-size: 13px; 
    font-weight: bold; 
    color: var(--text-muted); 
    text-align: center; 
    width: 100%; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 5px; 
}

.slider-row { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    width: 100%; 
}

#time-label { 
    font-weight: bold; 
    min-width: 75px; 
    text-align: center; 
    font-size: 14px; 
}

#timeline-container input { 
    flex-grow: 1; 
    cursor: pointer; 
}