/* ====================================================================
   1. ZENTRALE VARIABLEN (Fix für automatische Erkennung)
   ==================================================================== */

/* Grundwerte (Light Mode) */
:root {
    --hauptfarbe: #008FD5;      
    --hauptfarbe-hover: #0076B0; 
    
    --bg-body: #f4f4f4;
    --bg-container: #ffffff;
    --bg-info-box: #f0f8ff;
    --bg-input: #eeeeee;
    --text-haupt: #333333;
    --text-hell: #666666;
    --border-color: #cccccc;
    --ticker-bg: #ffc107;
    --ticker-text: #333333;
    --ticker-border: #e0a800;
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f1f1f1;
    --modal-bg: rgba(0,0,0,0.5);
    --header-badge-bg: #fff3cd;
    --header-badge-text: #856404;
    --header-badge-border: #ffeeba;
}

/* Dunkel-Farben */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-body: #121212;
        --bg-container: #1e1e1e;
        --bg-info-box: #252525;
        --bg-input: #2a2a2a;
        --text-haupt: #e0e0e0;
        --text-hell: #aaaaaa;
        --border-color: #444444;
        --ticker-bg: #856404;
        --ticker-text: #ffeeba;
        --ticker-border: #6b5103;
        --dropdown-bg: #2d2d2d;
        --dropdown-hover: #3d3d3d;
        --modal-bg: rgba(0,0,0,0.8);
        --header-badge-bg: #2b2510;
        --header-badge-text: #ffeeba;
        --header-badge-border: #856404;
    }
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-container: #1e1e1e;
    --bg-info-box: #252525;
    --bg-input: #2a2a2a;
    --text-haupt: #e0e0e0;
    --text-hell: #aaaaaa;
    --border-color: #444444;
    --ticker-bg: #856404;
    --ticker-text: #ffeeba;
    --ticker-border: #6b5103;
    --dropdown-bg: #2d2d2d;
    --dropdown-hover: #3d3d3d;
    --modal-bg: rgba(0,0,0,0.8);
    --header-badge-bg: #2b2510;
    --header-badge-text: #ffeeba;
    --header-badge-border: #856404;
}

/* ====================================================================
   2. GLOBALES LAYOUT & CONTAINER-LOGIK
   ==================================================================== */
* { box-sizing: border-box; }

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-haupt);
    padding-bottom: 80px;
    padding-top: 105px; /* Platz für den fixierten Header */
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 800px;
    width: 95%;
    margin: 0 auto 20px auto;
    background: var(--bg-container);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Nur echte sichtbare Info-Boxen erhalten einen Abstand zueinander */
.container .info-box + .info-box {
    margin-top: 20px;
}

/* Verhindert, dass am Ende des Containers durch leere Divs Lücken entstehen */
.container > *:last-child {
    margin-bottom: 0;
}

#export-list-container:empty, 
#fahrplan-ergebnisse:empty, 
.container > *:empty {
    display: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    height: 0 !important;
}

/* ====================================================================
   3. HEADER & LOGO (Systemweiter neuer Look)
   ==================================================================== */
#main-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 105px; /* Einheitliche Höhe für alle Seiten */
    
    /* Hintergrund auf transparent bzw. Seitenfarbe setzen */
    background-color: var(--bg-body) !important; 
    
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Inhalt oben halten */
    padding: 15px 15px 0 15px;
    
    z-index: 1100 !important;
    box-shadow: none; /* Entfernt den Schatten für den "schwebenden" Look */
}

#main-header h1 {
    margin: 0;
    font-size: 1.2em;
    color: var(--hauptfarbe) !important;
    line-height: 1.1;
    text-align: left;
    padding-top: 5px; 
}

.header-badge {
    display: inline-block;
    background-color: var(--header-badge-bg);
    color: var(--header-badge-text);
    border: 1px solid var(--header-badge-border);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-top: 22px; /* Bündig mit Menü-Button Unterkante */
    width: fit-content;
    white-space: pre-line;
    line-height: 1.2;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

/* ====================================================================
   4. INFO-BOXEN
   ==================================================================== */

.info-box {
    background-color: var(--bg-info-box); 
    border: 2px solid var(--hauptfarbe);
    padding: 15px; 
    border-radius: 8px; 
    text-align: center;
}

.info-box h3 { 
    color: var(--hauptfarbe); 
    margin-top: 0; 
    margin-bottom: 15px; 
    text-align: center; 
}

/* ====================================================================
   5. FORMULAR-ELEMENTE & BUTTONS
   ==================================================================== */

input[type="text"], 
input[type="password"], 
input[type="tel"], 
input[type="date"], 
select {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px;
    border: 1px solid var(--border-color); 
    border-radius: 4px;
    font-size: 1em; 
    background-color: var(--bg-input); 
    color: var(--text-haupt);
    appearance: none; 
    -webkit-appearance: none;
}

select, 
input[type="date"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; 
    background-position: right 12px center;
    background-size: 16px; 
    padding-right: 35px; 
    cursor: pointer; 
    position: relative;
}

button {
    background-color: var(--hauptfarbe); 
    color: white; 
    cursor: pointer;
    font-weight: bold; 
    padding: 15px; 
    border: none; 
    border-radius: 4px;
    transition: background-color 0.3s; 
    width: 100%;
}

button:hover { 
    background-color: var(--hauptfarbe-hover); 
}

/* ====================================================================
   6. TABELLEN
   ==================================================================== */
table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    margin: 15px auto;
    table-layout: fixed;
    font-size: 0.9em;
}

th, td {
    border: 1px solid var(--border-color);
    padding: 8px 4px;
    text-align: center;
    background-color: var(--bg-container);
    word-break: break-word;
    color: var(--text-haupt);
}

th {
    background-color: var(--hauptfarbe);
    color: white;
}

/* ====================================================================
   7. MENÜ-SYSTEM
   ==================================================================== */

/* Verhindert das Scrollen des Bodys, wenn Menü offen ist */
body.noscroll {
    overflow: hidden !important;
    height: 100vh !important;
}

.menu-container { 
    position: relative; 
    display: inline-block; 
}

.dropdown-menu {
    display: none; 
    position: absolute; 
    right: 0; 
    top: 100%;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5); 
    z-index: 1000;
    border-radius: 4px; 
    border: 1px solid var(--border-color);
    
    background: var(--dropdown-bg); /* Vereinfacht: Nur noch die Basisfarbe */
    
    max-height: 75vh;
    overflow-y: auto; /* Zeigt native Scrollbar nur bei Bedarf */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; 
}

.dropdown-menu.show { 
    display: block; 
}

.dropdown-menu a { 
    white-space: normal;
    word-wrap: break-word;
    color: var(--hauptfarbe); 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    border-bottom: 1px solid var(--border-color); 
    line-height: 1.3;
}

.dropdown-menu a:hover { 
    background-color: var(--dropdown-hover); 
}

/* --- Spezielle Menü-Einträge --- */

/* Admin-Hervorhebung */
.dropdown-menu a.menu-admin {
    background-color: var(--header-badge-bg) !important;
    color: var(--header-badge-text) !important;
    font-weight: bold;
    border-left: 4px solid var(--header-badge-border);
}

.dropdown-menu a.menu-admin.active-link {
    border-left: 4px solid var(--hauptfarbe) !important; /* Blauer Balken schlägt gelben Balken */
    background-color: var(--dropdown-hover) !important; /* Optional: Hintergrund etwas dunkler zur Verdeutlichung */
}

/* Logout-Hervorhebung */
.dropdown-menu a.menu-logout {
    color: #dc3545 !important;
    font-weight: bold;
    border-top: 1px solid var(--border-color);
    margin-top: 5px;
    border-bottom: none; /* Keine Linie nach unten beim letzten Punkt */
}

.dropdown-menu a.menu-logout:hover {
    background-color: rgba(220, 53, 69, 0.1); /* Nutzt 10% Transparenz vom Logout-Rot */
}

/* --- Aktiver Link (Allgemein) --- */
.dropdown-menu a.active-link {
    background-color: var(--dropdown-hover) !important;
    color: var(--hauptfarbe) !important;
    font-weight: bold !important;
    border-left: 4px solid var(--hauptfarbe) !important; /* Der blaue Balken */
}

/* --- Spezielle Menü-Einträge (Admin & Test) --- */

/* Admin-Hervorhebung */
.dropdown-menu a.menu-admin {
    background-color: var(--header-badge-bg) !important;
    color: var(--header-badge-text) !important;
    font-weight: bold;
    border-left: 4px solid var(--header-badge-border);
}

/* Test-Hervorhebung */
.dropdown-menu a.menu-test {
    color: #e67e22 !important;
    font-weight: bold;
    border-left: 4px solid #e67e22;
}

/* Spezialfall: Wenn Admin oder Test aktiv sind, überschreibt der blaue Balken die Farbe */
.dropdown-menu a.menu-admin.active-link,
.dropdown-menu a.menu-test.active-link {
    border-left: 4px solid var(--hauptfarbe) !important;
    background-color: var(--dropdown-hover) !important;
}

/* ====================================================================
   8. TICKER
   ==================================================================== */

.ticker-wrapper {
    max-width: 800px; 
    width: 95%; 
    margin: 0 auto 20px auto;
    background-color: var(--ticker-bg); 
    color: var(--ticker-text);
    font-weight: bold; 
    padding: 12px 0; 
    overflow: hidden; 
    white-space: nowrap;
    border-radius: 8px; 
    border: 2px solid var(--ticker-border);
}

.ticker-content { 
    display: inline-block; 
    white-space: nowrap; 
    animation: ticker-scroll 50s linear infinite; 
}

@keyframes ticker-scroll {
    0% { 
        transform: translateX(100vw); 
    }
    100% { 
        transform: translateX(-100%); 
    }
}

/* ====================================================================
   9. FOOTER & MODAL
   ==================================================================== */

#disclaimer-footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background-color: #1a1a1a; 
    color: #ccc; 
    text-align: center;
    padding: 10px 0; 
    font-size: 0.8em; 
    z-index: 1000;
}

.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--modal-bg); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 2100; /* Höher als Header */
}

.modal-content {
    background-color: var(--bg-container); 
    color: var(--text-haupt);
    max-width: 400px; 
    width: 90%; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    border-radius: 8px; 
    padding: 25px; 
    text-align: center;
}

/* ====================================================================
   10. MOBILE OPTIMIERUNG (Anti-Flash)
   ==================================================================== */

.termin-card, 
.delete-btn, 
button, 
a, 
[onclick], 
.menu-button {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.termin-card:active {
    background-color: var(--bg-container) !important;
    transform: none !important;
}