/* =========================================
   1. HIGH END UI - VARIABLES
   ========================================= */
:root {
    --bg-surface: #0b1015;    /* MeiitZ Dark */
    --bg-surface-light: #141a21;
    --primary: #00e5ff;       /* MeiitZ Cyan */
    
    /* Gradients */
    --gradient-critical: linear-gradient(135deg, #ff453a 0%, #b00020 100%);
    --gradient-warning: linear-gradient(135deg, #ff9f0a 0%, #b25000 100%);
    --gradient-active: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    --gradient-dark: linear-gradient(135deg, #1a2028 0%, #0b1015 100%);
    --gradient-primary: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%);
    
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-glow-active: 0 0 20px rgba(255,255,255,0.25);
    --shadow-glow-red: 0 0 15px rgba(255, 69, 58, 0.4);
    --shadow-glow-primary: 0 0 15px rgba(0, 229, 255, 0.3);
    
    --radius-m: 12px;
}

/* Global box-sizing fix – verhindert Content-Overflow durch Padding */
#ml-container *, #ml-container *::before, #ml-container *::after,
.ml-tab-page *, .ml-tab-page *::before, .ml-tab-page *::after {
    box-sizing: border-box;
}

/* =========================================
   2. LAYOUT & CONTAINER
   ========================================= */
#ml-container {
    display: flex; gap: 24px; flex-wrap: wrap;
    color: #fff !important;
    font-family: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Verhindert Text-Markierung bei langem Drücken */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS: Kein Popup bei langem Drücken */
}

#ml-left, #ml-right {
    background: var(--bg-surface);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-soft);
}

#ml-left { width: 32%; min-width: 280px; }
#ml-right { width: 63%; min-width: 300px; }

h3, h4 { color: #fff; margin-top: 0; }

/* GPS-Button: Meldungen in meiner Nähe */
.ml-gps-button {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(0, 229, 255, 0.03) 100%);
    color: #fff;
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ml-gps-button:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.06) 100%);
    border-color: rgba(0, 229, 255, 0.35);
}
.ml-gps-button:active {
    transform: scale(0.98);
}
.ml-gps-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}
.ml-gps-text {
    flex: 1;
    text-align: left;
}
.ml-gps-badge {
    background: rgba(0, 229, 255, 0.15);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Tabs */
#ml-tabs {
    display: inline-flex; gap: 8px; margin-bottom: 25px;
    background: rgba(255,255,255,0.05);
    padding: 6px; border-radius: 50px;
    backdrop-filter: blur(10px);
    transform: translate3d(0,0,0); /* Performance Fix */
}

#ml-tabs .ml-tab {
    background: transparent !important;
    color: #aaa !important; border: none !important;
    padding: 10px 24px; border-radius: 40px;
    cursor: pointer; font-size: 15px; font-weight: 600;
    transition: all 0.3s ease;
}

#ml-tabs .ml-tab.active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

.ml-tab-page { display: none; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ml-tab-page.active { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* SVG Tab Icons (plattformübergreifend einheitlich) */
.ml-tab-svg {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    pointer-events: none;
    transition: filter 0.3s ease;
}

/* Aktiver Tab: leichter Glow-Effekt */
#ml-tabs .ml-tab.active .ml-tab-svg {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.5));
}

/* Hilfe-Bereich: Plattform-Icons (Apple, Android) */
.ml-help-platform-svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
}

/* Hilfe-Bereich: Section-Icons (Glocke, Autobahn, Tankstelle) */
.ml-help-icon-svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
}

/* =========================================
   3. LIVE TAB BUTTONS (Starr & Kompakt)
   ========================================= */
#autobahnList h4 {
    color: #888; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 2px; margin: 30px 0 15px 0; border: none; clear: both;
}

#autobahnList > div { display: block !important; margin-bottom: 25px; }

#autobahnList button {
    display: inline-block !important;
    width: 55px !important; height: 45px;
    margin: 4px !important; padding: 0;
    line-height: 45px; text-align: center;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid transparent !important;
    color: #ddd !important;
    border-radius: var(--radius-m) !important;
    cursor: pointer; font-weight: 700; font-size: 0.95em;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#autobahnList button:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px);
}

#autobahnList button.active {
    background: var(--gradient-active) !important;
    color: #000 !important;
    box-shadow: var(--shadow-glow-active);
    transform: scale(1.1); z-index: 5;
}

#autobahnList button.warning {
    background: var(--gradient-warning) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 4px 10px rgba(255, 159, 10, 0.3);
}

#autobahnList button.critical {
    background: var(--gradient-critical) !important;
    color: #fff !important; border: none !important;
    box-shadow: var(--shadow-glow-red);
    animation: pulseCritical 3s infinite;
}

@keyframes pulseCritical {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(255, 69, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

/* =========================================
   4. PUSH TAB KACHELN (PREMIUM BLUE)
   ========================================= */

/* Basis-Kachel (Inaktiv) */
.ml-push-card {
    display: flex !important; 
    flex-direction: column;
    align-items: stretch; 
    justify-content: flex-start;
    width: 100% !important; 
    min-height: 70px;
    padding: 12px 10px;
    
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #888 !important;
    border-radius: var(--radius-m) !important;
    
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.ml-push-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ml-push-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #00e5ff;
    cursor: pointer;
}

.ml-push-card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

/* --- AKTIVIERTE KACHEL --- */
.ml-push-card.active {
    background: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #0b1015 !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
    z-index: 2;
}

.ml-push-card.active .ml-push-label {
    color: #0b1015 !important;
}

.ml-push-card.active .ml-push-dir-info {
    color: rgba(0,0,0,0.7) !important;
}

/* Das Label (A1, A2...) */
.ml-push-label {
    font-weight: 800; 
    font-size: 1.3rem; 
    line-height: 1;
}

/* Richtungs-Info unter dem Label */
.ml-push-dir-info {
    font-size: 0.75rem;
    margin-top: 4px;
    opacity: 0.8;
}

.ml-push-dir-info .dir-all {
    color: #aaa;
}

.ml-push-dir-info .dir-custom {
    color: #4CAF50;
    font-weight: 600;
}

.ml-push-card.active .ml-push-dir-info .dir-custom {
    color: #0b1015;
}

/* Richtungs-Button */
.ml-push-dir-btn {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-push-dir-btn:hover {
    background: rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.3);
}

/* =========================================
   RICHTUNGS-MODAL
   ========================================= */
.ml-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.ml-modal-content {
    background: linear-gradient(180deg, #1a2028 0%, #0b1015 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease;
}

.ml-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ml-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
}

.ml-modal-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}

.ml-modal-close:hover {
    color: #fff;
}

.ml-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.ml-dir-hint {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.ml-dir-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.ml-dir-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.ml-dir-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateX(4px);
}

.ml-dir-btn.active {
    background: linear-gradient(135deg, rgba(0,229,255,0.2) 0%, rgba(0,180,216,0.2) 100%);
    border-color: #00e5ff;
    box-shadow: 0 0 15px rgba(0,229,255,0.2);
}

.ml-dir-icon {
    font-size: 1.2rem;
    width: 30px;
    text-align: center;
}

.ml-dir-text {
    flex: 1;
    font-weight: 500;
}

.ml-dir-check {
    color: #00e5ff;
    font-weight: bold;
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* Alle Richtungen Button */
.ml-dir-all {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

.ml-dir-all.active {
    background: linear-gradient(135deg, rgba(76,175,80,0.3) 0%, rgba(56,142,60,0.3) 100%);
    border-color: #4CAF50;
    box-shadow: 0 0 15px rgba(76,175,80,0.2);
}

.ml-dir-all .ml-dir-check {
    color: #4CAF50;
}

/* Pair-Gruppe */
.ml-dir-pair-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ml-dir-pair {
    font-weight: 600;
}

.ml-dir-singles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
}

.ml-dir-single {
    padding: 10px 14px;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

.ml-dir-single .ml-dir-icon {
    font-size: 1rem;
    opacity: 0.7;
}

/* Leer-Zustand */
.ml-dir-empty {
    text-align: center;
    padding: 30px 20px;
    color: #666;
}

.ml-dir-empty p:first-child {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* Modal Footer */
.ml-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: flex-end;
}

.ml-btn-save {
    padding: 12px 24px;
    background: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%);
    border: none;
    border-radius: 10px;
    color: #0b1015;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,229,255,0.4);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================
   FAVORITEN STERN (ULTIMATE FIX)
   ========================================= */
/* Wir nutzen translate(0,0), um einen festen "Layer" zu erzwingen */

#autobahnList button.ml-fav-btn,
.ml-push-card.ml-fav-btn { 
    border: 2px solid #FFD700 !important; 
    
    /* DER TRICK: Erzeugt permanenten Stapel-Kontext */
    transform: translate(0, 0) !important; 
    z-index: 50 !important; 
    overflow: visible !important; /* Stern darf über den Rand ragen */
}

/* Der Stern selbst */
#autobahnList button.ml-fav-btn::after,
.ml-push-card.ml-fav-btn::after {
    content: "★"; 
    position: absolute; 
    top: -8px; 
    right: -8px;
    
    font-size: 11px; 
    font-weight: 900; /* Fetter Stern */
    color: #000; 
    background: #FFD700;
    
    border-radius: 50%; 
    width: 18px; 
    height: 18px; 
    line-height: 18px; /* Vertikal zentriert */
    text-align: center;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Kleiner Schatten für 3D Effekt */
    z-index: 51 !important; /* Muss höher sein als der Button */
    pointer-events: none; /* Klick geht durch den Stern durch auf den Button */
}

/* Hover-Effekt muss transform überschreiben, aber scale behalten */
#autobahnList button.ml-fav-btn:hover,
.ml-push-card.ml-fav-btn:hover {
    transform: scale(1.05) !important;
    z-index: 60 !important;
}


.ml-direction-filter::-webkit-scrollbar {
    display: none;
}

/* Für Firefox & Edge */
.ml-direction-filter {
    -ms-overflow-style: none;  /* IE und Edge */
    scrollbar-width: none;  /* Firefox */
    
    /* Optional: Ein bisschen mehr Luft unten für Schatten */
    padding-bottom: 8px !important; 
}

/* =========================================
   5. LIVE-VERKEHR (Meldungen & Share)
   ========================================= */

/* --- NEU: TIMELINE LAYOUT --- */
#ml-verkehr-output {
    position: relative;
    /* KEIN padding-left hier! Das verschiebt Barometer, Wetter, Prognose mit.
       Nur der Timeline-Wrapper bekommt das padding für die Fahrbahn-Linie. */
}

/* =========================================
   FIX: INTELLIGENTE TIMELINE (Fahrbahn-Look)
   ========================================= */

/* 1. Scrollbalken bei Buttons verstecken (Cleaner Look) */
.ml-direction-filter::-webkit-scrollbar { display: none; }
.ml-direction-filter { -ms-overflow-style: none; scrollbar-width: none; }

/* 2. Der neue Wrapper für die Linie */
.ml-timeline-wrapper {
    position: relative;
    padding-top: 10px;
    /* Kein padding-left nötig: Die Fahrbahn-Linie ist absolut positioniert (left:29px)
       und die Ticker-Items haben eigenes Layout mit Icon links. */
}

/* 3. Die Fahrbahn-Linie (Gestrichelt & Elegant) */
.ml-timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 29px; /* Exakt mittig durch die Icons */
    width: 0;   /* Keine Breite, wir nutzen Border */
    
    /* Der Fahrbahn-Look */
    border-left: 2px dashed rgba(255, 255, 255, 0.15); 
    
    /* Sanftes Ein/Ausblenden oben und unten */
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    
    z-index: 0;
}

/* 4. NEU: Der "Live"-Punkt oben (Pulsierend) */
.ml-timeline-wrapper::after {
    content: '';
    position: absolute;
    top: 15px;      /* Etwas unterhalb der Kante */
    left: 26px;     /* Zentriert auf der Linie (29px - halbe Breite) */
    width: 8px;
    height: 8px;
    background: #00e5ff; /* Dein iOS Blau */
    border-radius: 50%;
    box-shadow: 0 0 10px #00e5ff;
    z-index: 1;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { transform: scale(0.9); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); }
    70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
    100% { transform: scale(0.9); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

/* 5. Anpassung der Karten, damit sie perfekt sitzen */
.ticker-item {
    margin-left: 0 !important; /* Reset, da Wrapper nun positioniert */
    z-index: 1; /* Über der Linie */
}

/* Das Icon muss die Linie verdecken */
.ticker-icon {
    /* Hintergrund muss gesetzt sein, damit die gestrichelte Linie nicht "durch" das Icon geht */
    background: #0b1015; 
    position: relative;
    z-index: 2; /* Über der Linie */
    
    /* WICHTIG: Kleiner "Schutzrand" in Hintergrundfarbe, damit die Linie nicht am Icon klebt */
    box-shadow: 0 0 0 5px #0b1015; 
}

#ml-search {
    width: 100%; padding: 12px 15px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-m);
    color: #fff; font-size: 1rem; margin-bottom: 15px;
}

#ml-gps-btn {
    width: 100%; padding: 12px; margin-bottom: 20px;
    background: rgba(0, 229, 255, 0.15);
    color: var(--primary);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: var(--radius-m);
    font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
}
#ml-gps-btn:hover { background: var(--primary); color: #fff; }

/* KARTEN & ICONS UPDATE */
.ticker-item {
    position: relative;
    z-index: 1; /* Über der Linie liegen */
    background: rgba(255,255,255,0.03);
    padding: 18px;
    border-radius: var(--radius-m);
    margin-bottom: 16px;
    margin-left: 10px; /* Abstand zur Timeline-Linie */
    
    /* Farbige Border links bleibt erhalten (für die Karte selbst) */
    border-left: 4px solid #444; 
    
    display: grid;
    grid-template-columns: 40px 1fr 30px; 
    gap: 15px; align-items: start;
    transition: transform 0.2s, background 0.2s;
    transform: translate3d(0,0,0); /* Performance Fix */
}
.ticker-item:hover { transform: translateY(-2px); background: rgba(255,255,255,0.06); }

/* Das Icon als runder Knotenpunkt */
.ticker-icon {
    font-size: 20px; /* Kleiner als vorher, da jetzt im Kreis */
    line-height: 1;
    
    /* Kreis Design */
    background: #0b1015; /* Damit die Linie dahinter verschwindet */
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Farben für die Karten UND die Icons */
.alert-border { 
    border-left-color: #ff453a !important; 
    background: linear-gradient(90deg, rgba(255,69,58,0.05) 0%, transparent 100%); 
}
.alert-border .ticker-icon {
    border-color: #ff453a; 
    color: #ff453a; 
    box-shadow: 0 0 15px rgba(255, 69, 58, 0.2);
}

.warn-border { 
    border-left-color: #ff9f0a !important; 
    background: linear-gradient(90deg, rgba(255,159,10,0.05) 0%, transparent 100%); 
}
.warn-border .ticker-icon {
    border-color: #ff9f0a;
    color: #ff9f0a;
}

.info-border { border-left-color: #00e5ff !important; }
.info-border .ticker-icon { border-color: #00e5ff; color: #00e5ff; }


.ticker-content strong { display: block; font-size: 1.05rem; margin-bottom: 4px; color: #fff; font-weight: 600; }
.ticker-sub { font-size: 0.85rem; color: var(--primary); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
.ticker-desc { color: #ccc; font-size: 0.95rem; line-height: 1.5; }
.ticker-time { font-size: 0.8rem; color: #666; margin-top: 10px; display: block; font-style: italic;}

.ticker-share {
    background: transparent; border: none; color: #666; 
    cursor: pointer; font-size: 18px; padding: 5px;
    transition: color 0.2s;
}
.ticker-share:hover { color: #fff; }

/* UI Elemente */
.ml-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.ml-switch input { opacity: 0; width: 0; height: 0; }
.ml-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.ml-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .ml-slider { background-color: #4CAF50; }
input:checked + .ml-slider:before { transform: translateX(24px); }

/* Hilfe */
.ml-help-section {
    background: #2b2b30; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 20px; margin-bottom: 20px;
}
.ml-help-section h4 { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 10px; }
.ml-highlight { color: #4CAF50; font-weight: bold; }
.ml-warning-text { color: #ff9f0a; font-size: 0.9em; margin-top: 10px; border-left: 3px solid #ff9f0a; padding-left: 10px; }

/* Mobile */
@media (max-width: 900px) {
    #ml-container { flex-direction: column; gap: 15px; }
    #ml-left, #ml-right { width: 100%; padding: 15px; }
    #ml-tabs { width: 100%; overflow-x: auto; white-space: nowrap; justify-content: flex-start; }
    #autobahnList button { width: 100% !important; max-width: 60px; height: 50px; line-height: 50px; }
    #autobahnList > div { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
}

/* =========================================
   8. SMART BADGES (Visuelle Prognose)
   ========================================= */
.ticker-badges {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; margin-bottom: 4px;
}

.t-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 20px; /* Pill Shape */
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Zeitverlust (Rot) */
.tb-loss {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
    border: 1px solid rgba(255, 69, 58, 0.3);
}

/* Geschwindigkeit / Stau (Orange) */
.tb-speed {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
    border: 1px solid rgba(255, 159, 10, 0.3);
}

/* Vollsperrung (Dunkelrot/Lila) */
.tb-closed {
    background: linear-gradient(135deg, #ff453a 0%, #5e5ce6 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 10px rgba(255, 69, 58, 0.4);
}

/* =========================================
   9. NEU: VORLESE-FUNKTION & BAROMETER
   ========================================= */

/* Der Vorlese-Button (neben dem Share-Pfeil) */
.ticker-speak {
    background: transparent; 
    border: none; 
    color: #666; 
    cursor: pointer; 
    font-size: 18px; 
    padding: 5px;
    margin-right: 5px; /* Abstand zum Share-Button */
    transition: all 0.2s;
}
.ticker-speak:hover { 
    color: var(--primary); 
    transform: scale(1.2); 
}
.ticker-speak.speaking {
    color: #4CAF50; /* Grün wenn er spricht */
    animation: pulseSpeak 1s infinite;
}
@keyframes pulseSpeak {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Das Stau-Barometer (Status-Balken oben) */
.ml-barometer {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-m);
    color: #fff;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    animation: slideDown 0.3s ease-out;
}

/* Die 3 Stufen des Barometers */
.baro-green {
    background: linear-gradient(135deg, #30c759 0%, #1e8f3b 100%); /* iOS Grün */
    border: 1px solid rgba(48, 199, 89, 0.3);
}
.baro-yellow {
    background: linear-gradient(135deg, #ff9f0a 0%, #b25000 100%); /* iOS Orange */
    border: 1px solid rgba(255, 159, 10, 0.3);
    color: #fff;
}
.baro-red {
    background: linear-gradient(135deg, #ff453a 0%, #b00020 100%); /* iOS Rot */
    border: 1px solid rgba(255, 69, 58, 0.3);
    box-shadow: 0 0 15px rgba(255, 69, 58, 0.3);
}

/* Lade-Animation (Spinner) */
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}
.ml-spinner {
    display: inline-block;
    animation: spin 1s infinite linear;
    font-size: 24px;
}

/* Skeleton Animation */
@keyframes skeleton-loading {
    0% { background-color: rgba(255, 255, 255, 0.05); }
    50% { background-color: rgba(255, 255, 255, 0.1); }
    100% { background-color: rgba(255, 255, 255, 0.05); }
}

.ml-skeleton-item {
    background: rgba(255,255,255,0.02);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    border-left: 4px solid rgba(255,255,255,0.1);
}

.ml-skeleton-line {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

/* Wetter Widget */
.ml-weather-box {
    display: flex; align-items: center; gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px; /* Abstand zur Timeline */
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideDown 0.4s ease-out;
}

.ml-weather-crit {
    background: linear-gradient(90deg, rgba(255, 69, 58, 0.15) 0%, rgba(255,255,255,0.05) 100%);
    border-color: rgba(255, 69, 58, 0.4);
}

.ml-w-icon { font-size: 24px; }

.ml-w-content { display: flex; flex-direction: column; gap: 2px; }

.ml-w-main { font-weight: 700; color: #fff; font-size: 0.95rem; }

.ml-w-badges {
    font-size: 0.8rem; color: #ff9f0a; font-weight: 600; text-transform: uppercase;
}
.ml-weather-crit .ml-w-badges { color: #ff453a; }

/* --- SCROLL WETTER CONTAINER --- */
.ml-weather-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px; /* Platz für Scrollbar */
    margin-bottom: 20px;
    
    /* Scrollbar verstecken (Cleaner Look), aber scrollbar lassen */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    
    /* Weiches Scrollen */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Maske links/rechts damit es weich ausblendet */
    mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
}

.ml-weather-scroll-container::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

/* --- UNWETTER-WARNBANNER (DWD Severe Alerts) --- */

/* Wrapper: Ein einzelner kompakter Container für alle Warnungen */
.ml-severe-alert-wrap {
    border-radius: var(--radius-m);
    margin-bottom: 12px;
    animation: slideDown 0.4s ease-out;
    overflow: hidden;
}

.ml-severe-alert-wrap.ml-alert-minor {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
}

.ml-severe-alert-wrap.ml-alert-minor .ml-sa-summary {
    padding: 7px 14px;
}

.ml-severe-alert-wrap.ml-alert-minor .ml-sa-summary-text {
    font-weight: 600;
    font-size: 0.8em;
    opacity: 0.7;
}

.ml-severe-alert-wrap.ml-alert-moderate {
    background: rgba(255,159,10,0.08);
    border: 1px solid rgba(255,159,10,0.3);
}

.ml-severe-alert-wrap.ml-alert-severe {
    background: rgba(255,69,58,0.1);
    border: 1px solid rgba(255,69,58,0.35);
}

.ml-severe-alert-wrap.ml-alert-extreme {
    background: rgba(175,82,222,0.12);
    border: 1px solid rgba(175,82,222,0.45);
    animation: slideDown 0.4s ease-out, pulseAlertExtreme 3s infinite;
}

@keyframes pulseAlertExtreme {
    0%, 100% { box-shadow: 0 0 12px rgba(175,82,222,0.15); }
    50% { box-shadow: 0 0 20px rgba(175,82,222,0.3); }
}

/* Summary-Zeile: Immer sichtbar, klickbar */
.ml-sa-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s;
}

.ml-sa-summary:active {
    background: rgba(255,255,255,0.05);
}

.ml-sa-summary-text {
    flex: 1;
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ml-alert-minor .ml-sa-summary-text { color: #aaa; }
.ml-alert-moderate .ml-sa-summary-text { color: #ffb84d; }
.ml-alert-severe .ml-sa-summary-text { color: #ff6b6b; }
.ml-alert-extreme .ml-sa-summary-text { color: #bf7fff; }

.ml-sa-summary-chevron {
    font-size: 0.8em;
    opacity: 0.5;
    transition: transform 0.2s;
}

/* Aufklappbares Panel */
.ml-sa-panel {
    padding: 0 14px 10px;
}

/* Einzelne Warn-Zeile */
.ml-sa-item {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ml-sa-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ml-sa-item-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0;
    user-select: none;
    -webkit-user-select: none;
}

.ml-sa-item-row:active {
    opacity: 0.7;
}

.ml-sa-item-dot {
    font-size: 0.6em;
    flex-shrink: 0;
    margin-top: 3px;
}

.ml-sa-item-info {
    flex: 1;
    min-width: 0;
    font-size: 0.8em;
    color: rgba(255,255,255,0.9);
}

.ml-sa-item-info strong {
    font-weight: 700;
    display: block;
}

.ml-sa-item-cities {
    opacity: 0.7;
    font-weight: 400;
    font-size: 0.9em;
    margin-top: 3px;
}

.ml-sa-item-time {
    font-size: 0.85em;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

.ml-sa-item-chevron {
    font-size: 0.7em;
    opacity: 0.4;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Detail-Bereich einer einzelnen Warnung */
.ml-sa-item-detail {
    padding: 6px 0 8px 18px;
}

.ml-sa-item-desc {
    font-size: 0.78em;
    color: rgba(255,255,255,0.7);
    line-height: 1.45;
    white-space: pre-line;
}

.ml-sa-item-instr {
    font-size: 0.75em;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    margin-top: 5px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
}

/* --- SCHNELLCHECK UNWETTER-BADGE & BANNER --- */

/* Alert-Zähler in der Schnellcheck-Bar */
.ml-qc-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8em;
    font-weight: 700;
    color: #ffb84d;
    background: rgba(255,159,10,0.15);
    border: 1px solid rgba(255,159,10,0.3);
    border-radius: 8px;
    padding: 2px 7px 2px 5px;
    margin-left: 4px;
    white-space: nowrap;
}

/* Kompakter Unwetter-Streifen im Schnellcheck */
.ml-qc-alert-banner {
    margin: 6px 0 4px 0;
}

.ml-qc-alert-banner .ml-sa-summary {
    padding: 8px 12px;
}

.ml-qc-alert-banner .ml-sa-summary-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ml-qc-alert-banner .ml-sa-panel {
    padding: 0 12px 8px;
}

/* Autobahn-Gruppen im Schnellcheck-Unwetter-Panel */
.ml-qca-group {
    margin-bottom: 4px;
}

.ml-qca-group:last-child {
    margin-bottom: 0;
}

.ml-qca-group-header {
    font-size: 0.75em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    padding: 8px 0 2px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.ml-qca-group:first-child .ml-qca-group-header {
    border-top: none;
    padding-top: 4px;
}

/* Unwetter-Indikator auf Route-Chips */
.ml-chip-alert-icon {
    font-size: 0.75em;
    opacity: 0.85;
    flex-shrink: 0;
    animation: chipAlertPulse 2.5s ease-in-out infinite;
}

.ml-chip-alert-icon.ml-chip-alert-extreme {
    animation: chipAlertPulseExtreme 2s ease-in-out infinite;
}

.ml-chip-alert-icon.ml-chip-alert-minor {
    animation: none;
    opacity: 0.4;
    font-size: 1em;
    color: #888;
}

@keyframes chipAlertPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@keyframes chipAlertPulseExtreme {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; transform: scale(1.15); }
}

/* slideDown: Wird von Barometer, Wetter-Box und Alert-Banner genutzt */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- WETTER CARD --- */
.ml-weather-card {
    flex: 0 0 auto; /* Nicht schrumpfen! */
    width: 130px;   /* Feste Breite pro Stadt */
    padding: 10px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
    cursor: default;
}

.ml-weather-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.1) !important;
}

.ml-wc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ml-wc-bot {
    display: flex;
    flex-direction: column;
}

/* =========================================
   10. APP-MODE SPEZIAL-ANPASSUNGEN (KOMPAKT)
   ========================================= */
.ml-app-mode #ml-tabs {
    display: flex !important;
    width: 100%;
    gap: 5px !important; /* Weniger Abstand zwischen den Tabs */
    padding: 4px !important; /* Schlankerer Container */
    border-radius: 12px !important; /* Weniger rund, platzsparender */
    background: rgba(255,255,255,0.08) !important; /* Etwas heller für Kontrast */
    margin-bottom: 15px !important;
    
    /* Verhindert horizontales Scrollen im App-Mode -> Alles auf einen Blick */
    overflow-x: hidden !important; 
    white-space: normal !important; 
    justify-content: space-between !important; /* Tabs verteilen sich gleichmäßig */
}

.ml-app-mode #ml-tabs .ml-tab {
    flex: 1; /* Jeder Tab nimmt gleich viel Platz */
    text-align: center;
    padding: 8px 2px !important; /* Sehr kompakt, kaum Seitenabstand */
    font-size: 13px !important; /* Kleinere Schrift */
    font-weight: 600;
    border-radius: 8px !important; /* Eckiger */
    
    /* Damit Icons und Text untereinander passen */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    line-height: 1.1 !important;
}

/* Wir müssen die Emojis im App-Modus vom Text trennen */
.ml-app-mode .ml-tab-icon {
    font-size: 18px !important; /* Große Icons */
    display: block !important;
}
.ml-app-mode .ml-tab-icon .ml-tab-svg {
    width: 20px !important;
    height: 20px !important;
}
.ml-app-mode .ml-tab-text {
    display: block !important;
    font-size: 11px !important; /* Sehr kleiner Text darunter */
    opacity: 0.8;
}

.ml-app-mode #ml-tabs .ml-tab.active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 229, 255, 0.4) !important;
}

/* Andere Elemente im App-Modus kompakter machen */
.ml-app-mode h3, 
.ml-app-mode h4 {
    font-size: 1.1rem !important; /* Kleinere Überschriften */
    margin-bottom: 10px !important;
}

/* =========================================
   11. PUSH TROUBLESHOOTER (Modal)
   ========================================= */
.ml-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 9999;
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.ml-modal-box {
    background: #141a21; width: 90%; max-width: 400px;
    border-radius: 16px; padding: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    text-align: center; position: relative;
    animation: slideUpModal 0.3s ease-out;
}

.ml-modal-icon { font-size: 40px; margin-bottom: 15px; display: block; }
.ml-modal-title { color: #fff; font-size: 1.2rem; margin: 0 0 10px 0; font-weight: 700; }
.ml-modal-text { color: #ccc; font-size: 0.95rem; line-height: 1.5; margin-bottom: 20px; }

.ml-step-list { text-align: left; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.ml-step-item { display: flex; gap: 10px; margin-bottom: 10px; color: #ddd; font-size: 0.9rem; }
.ml-step-num { background: var(--primary); color: #fff; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; font-weight: bold; flex-shrink: 0; font-size: 0.8em; }

.ml-modal-btn {
    background: var(--primary); color: #fff; border: none;
    padding: 12px 24px; border-radius: 50px; font-weight: 600; font-size: 1rem;
    cursor: pointer; width: 100%; transition: transform 0.2s;
}
.ml-modal-btn:hover { transform: scale(1.02); background: #00e5ff; }
.ml-modal-close {
    position: absolute; top: 15px; right: 15px;
    background: transparent; border: none; color: #888; font-size: 24px; cursor: pointer;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUpModal { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* =========================================
   12. INLINE FEHLERBOX (Push)
   ========================================= */
#ml-push-warning {
    display: none; /* Standardmäßig aus */
    background: rgba(255, 69, 58, 0.15); /* Rot, transparent */
    border: 1px solid #ff453a;
    color: #ffb0b0;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
    animation: slideDownFade 0.3s ease-out;
}

#ml-push-warning strong {
    color: #ff453a;
    display: block;
    margin-bottom: 4px;
}

@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   13. REFRESH & STATUS BAR
   ========================================= */
.ml-status-bar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ml-status-time {
    font-size: 0.85rem; 
    color: #888;
}

.ml-refresh-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; 
    align-items: center; 
    gap: 6px;
    transition: all 0.2s;
}

.ml-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.ml-refresh-btn:active {
    transform: scale(0.95);
}

/* =========================================
   14. SETTINGS TAB STYLES
   ========================================= */
.ml-setting-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px; 
    background: rgba(255,255,255,0.04);
    border-radius: 12px; 
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.ml-setting-row strong {
    display: block; 
    color: #fff; 
    margin-bottom: 4px;
}

/* =========================================
   NEU: PUSH LEVEL SELECTOR (CARDS)
   ========================================= */
.push-selector-container {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.push-level-card {
    flex: 1;
    min-width: 140px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-m);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.push-level-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.push-level-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.push-level-card h4 {
    margin: 0 0 5px 0 !important;
    font-size: 1rem;
    color: #fff;
}

.push-level-card p {
    margin: 0;
    font-size: 0.75rem;
    color: #888;
    line-height: 1.3;
}

/* --- ACTIVE STATES --- */

/* Kritisch (Rot) */
.push-level-card[data-level="critical"].active {
    background: linear-gradient(135deg, rgba(176, 0, 32, 0.2) 0%, rgba(255, 69, 58, 0.1) 100%);
    border-color: #ff453a;
    box-shadow: 0 0 15px rgba(255, 69, 58, 0.2);
}
.push-level-card[data-level="critical"].active .push-level-icon { filter: grayscale(0); transform: scale(1.1); }

/* Pendler (Orange) */
.push-level-card[data-level="commuter"].active {
    background: linear-gradient(135deg, rgba(178, 80, 0, 0.2) 0%, rgba(255, 159, 10, 0.1) 100%);
    border-color: #ff9f0a;
    box-shadow: 0 0 15px rgba(255, 159, 10, 0.2);
}
.push-level-card[data-level="commuter"].active .push-level-icon { filter: grayscale(0); transform: scale(1.1); }

/* Alles (Grün/Blau - deine Primary) */
.push-level-card[data-level="all"].active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2) 0%, rgba(0, 86, 179, 0.1) 100%);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}
.push-level-card[data-level="all"].active .push-level-icon { filter: grayscale(0); transform: scale(1.1); }

/* Checkmark Badge */
.push-level-card.active::after {
    content: "✔";
    position: absolute;
    top: 8px; right: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

/* Mobile: Untereinander bei sehr kleinen Screens */
@media (max-width: 400px) {
    .push-selector-container { flex-direction: column; }
}

.ml-skeleton-line.short { width: 40%; }
.ml-skeleton-line.long { width: 90%; }

/* =========================================
   15. PWA INSTALL BANNER
   ========================================= */
#ml-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    animation: mlSlideUpBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#ml-install-banner.ml-install-hiding {
    animation: mlSlideDownBanner 0.3s ease-in forwards;
}

.ml-install-inner {
    background: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
}

.ml-install-hint {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    text-align: center;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.ml-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ml-install-icon {
    font-size: 2rem;
    line-height: 1;
}

.ml-install-icon-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
}

.ml-install-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ml-install-text strong {
    font-size: 1rem;
    font-weight: 700;
}

.ml-install-text span {
    font-size: 0.85rem;
    opacity: 0.9;
}

.ml-install-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.ml-install-btn-primary,
.ml-install-btn-secondary {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.ml-install-btn-primary {
    background: #fff;
    color: #00e5ff;
}

.ml-install-btn-primary:active {
    transform: scale(0.95);
    background: #e8e8e8;
}

.ml-install-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.ml-install-btn-secondary:active {
    background: rgba(255, 255, 255, 0.1);
}

@keyframes mlSlideUpBanner {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes mlSlideDownBanner {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

/* Mobile: Buttons untereinander */
@media (max-width: 400px) {
    .ml-install-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .ml-install-content {
        flex-direction: column;
    }
    
    .ml-install-buttons {
        width: 100%;
    }
    
    .ml-install-btn-primary,
    .ml-install-btn-secondary {
        flex: 1;
    }
}

/* =========================================
   16. OFFLINE & CACHED DATA BANNER
   ========================================= */
#ml-offline-banner,
.ml-cached-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-m);
    margin-bottom: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: mlFadeIn 0.3s ease-out;
}

#ml-offline-banner {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff6b6b;
}

.ml-cached-banner {
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.2);
    color: #ffb347;
}

@keyframes mlFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   17. STANDALONE MODE ADJUSTMENTS (Installed PWA)
   ========================================= */
@media (display-mode: standalone) {
    /* Mehr Platz oben für Status Bar */
    body {
        padding-top: env(safe-area-inset-top, 20px);
    }
    
    /* Install-Banner nie anzeigen wenn installiert */
    #ml-install-banner {
        display: none !important;
    }
    
    /* Etwas mehr Padding unten für Home-Indicator */
    .ml-app-legal-footer {
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }
}

/* =========================================
   18. PULL-TO-REFRESH INDICATOR (Optional)
   ========================================= */
.ml-ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--primary);
    color: #fff;
    padding: 8px 20px;
    border-radius: 0 0 20px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 9998;
    transition: transform 0.2s ease;
}

.ml-ptr-indicator.visible {
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   19. UPDATE AVAILABLE BANNER
   ========================================= */
#ml-update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    animation: mlSlideDownUpdate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ml-update-inner {
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* Safe Area für iPhone Notch */
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.ml-update-icon {
    font-size: 1.3rem;
    animation: mlSpin 1s linear infinite;
}

.ml-update-text {
    font-weight: 600;
    font-size: 0.95rem;
}

.ml-update-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-update-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

@keyframes mlSlideDownUpdate {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes mlSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================
   20. DIRECTION SELECTION MODAL
   ========================================= */
#ml-direction-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#ml-direction-modal.visible {
    opacity: 1;
}

.ml-dir-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ml-dir-modal-content {
    position: relative;
    background: #0b1015;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    /* Safe Area für iPhone */
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

#ml-direction-modal.visible .ml-dir-modal-content {
    transform: translateY(0);
}

.ml-dir-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 12px;
}

.ml-dir-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.ml-dir-counter {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: #00e5ff;
    font-weight: 600;
}

.ml-dir-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ml-dir-modal-close:active {
    background: rgba(255, 255, 255, 0.2);
}

.ml-dir-modal-subtitle {
    padding: 12px 20px 8px;
    margin: 0;
    color: #888;
    font-size: 0.9rem;
}

.ml-dir-options {
    overflow-y: auto;
    padding: 8px 12px;
    max-height: 50vh;
}

.ml-dir-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #ddd;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.ml-dir-option:active {
    transform: scale(0.98);
}

.ml-dir-option.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2) 0%, rgba(0, 86, 179, 0.1) 100%);
    border-color: #00e5ff;
    color: #fff;
}

.ml-dir-check {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    color: #555;
    transition: color 0.2s;
}

.ml-dir-option.active .ml-dir-check {
    color: #00e5ff;
}

.ml-dir-divider {
    padding: 12px 16px 8px;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ml-dir-option.ml-dir-single {
    padding-left: 32px;
    font-size: 0.9rem;
    color: #aaa;
}

.ml-dir-option.ml-dir-single.active {
    color: #fff;
}

.ml-dir-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.ml-dir-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-dir-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ml-dir-remove-btn {
    flex: 1;
    padding: 14px;
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: 12px;
    color: #ff6b6b;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-dir-remove-btn:active {
    background: rgba(255, 69, 58, 0.25);
    transform: scale(0.98);
}

.ml-dir-done-btn {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ml-dir-done-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* =========================================
   INFO-BANNER
   ========================================= */
.ml-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 2px 0;
    border-left: 3px solid #3b82f6;
    background: linear-gradient(135deg, #0a1e3d 0%, #0b1520 100%);
    color: #e0e8f0;
    font-size: 0.85rem;
    line-height: 1.4;
    animation: mlBannerSlideIn 0.3s ease-out;
}
@keyframes mlBannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.ml-info-banner.ml-banner-hidden {
    animation: mlBannerSlideOut 0.25s ease-in forwards;
}
@keyframes mlBannerSlideOut {
    from { transform: translateY(0); opacity: 1; max-height: 80px; padding: 12px 16px; margin-bottom: 2px; }
    to { transform: translateY(-10px); opacity: 0; max-height: 0; padding: 0 16px; margin-bottom: 0; }
}

.ml-banner-icon {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 1px;
}
.ml-banner-text {
    flex: 1;
    min-width: 0;
}
.ml-banner-text strong, .ml-banner-text b { font-weight: 700; }
.ml-banner-text em, .ml-banner-text i { font-style: italic; }
.ml-banner-text u { text-decoration: underline; }
.ml-banner-text s { text-decoration: line-through; opacity: 0.7; }
.ml-banner-text a { color: #00e5ff; text-decoration: underline; }
.ml-banner-text p { margin: 0; }
.ml-banner-close {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #888;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-top: -2px;
}
.ml-banner-close:active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Banner-Typen */
.ml-banner-info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #0a1e3d 0%, #0b1520 100%);
}
.ml-banner-warning {
    border-left-color: #ff9f0a;
    background: linear-gradient(135deg, #2d1a00 0%, #1a1208 100%);
    color: #f0d8b0;
}
.ml-banner-success {
    border-left-color: #30d158;
    background: linear-gradient(135deg, #0a2d1a 0%, #0b1a12 100%);
    color: #b0f0c8;
}
.ml-banner-update {
    border-left-color: #00e5ff;
    background: linear-gradient(135deg, #003344 0%, #0b1520 100%);
    color: #b0e8f0;
}

/* Klickbares Banner */
.ml-info-banner.has-detail {
    cursor: pointer;
    transition: all 0.2s;
}
.ml-info-banner.has-detail:active {
    transform: scale(0.99);
}
.ml-banner-more {
    color: #00e5ff;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 4px;
}
.ml-banner-warning .ml-banner-more { color: #ff9f0a; }
.ml-banner-success .ml-banner-more { color: #30d158; }
.ml-banner-info .ml-banner-more { color: #3b82f6; }

/* Detail-Modal */
.ml-banner-detail-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10003;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ml-banner-detail-modal.visible {
    opacity: 1;
}
.ml-banner-detail-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: #0b1015;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.ml-banner-detail-modal.visible .ml-banner-detail-content {
    transform: scale(1);
}

/* Detail-Header mit Typ-Farbe */
.ml-banner-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ml-banner-detail-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}
.ml-banner-detail-content.ml-banner-update .ml-banner-detail-header {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, transparent 100%);
}
.ml-banner-detail-content.ml-banner-info .ml-banner-detail-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
}
.ml-banner-detail-content.ml-banner-warning .ml-banner-detail-header {
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.08) 0%, transparent 100%);
}
.ml-banner-detail-content.ml-banner-success .ml-banner-detail-header {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.08) 0%, transparent 100%);
}

/* Detail-Body */
.ml-banner-detail-body {
    padding: 20px;
    overflow-y: auto;
    color: #d0d0d0;
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.25) transparent;
}
.ml-banner-detail-body::-webkit-scrollbar {
    width: 5px;
}
.ml-banner-detail-body::-webkit-scrollbar-track {
    background: transparent;
}
.ml-banner-detail-body::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.2);
    border-radius: 10px;
}
.ml-banner-detail-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.4);
}
.ml-banner-detail-body p { margin: 0 0 12px 0; }
.ml-banner-detail-body p:last-child { margin-bottom: 0; }
.ml-banner-detail-body strong, .ml-banner-detail-body b { color: #fff; font-weight: 700; }
.ml-banner-detail-body em, .ml-banner-detail-body i { font-style: italic; }
.ml-banner-detail-body u { text-decoration: underline; }
.ml-banner-detail-body a { color: #00e5ff; text-decoration: underline; }
.ml-banner-detail-body ul, .ml-banner-detail-body ol {
    margin: 8px 0 12px 0;
    padding-left: 20px;
}
.ml-banner-detail-body li { margin-bottom: 4px; }

/* Mobil: Modal von unten */
@media (max-width: 599px) {
    .ml-banner-detail-modal {
        align-items: flex-end;
    }
    .ml-banner-detail-content {
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    .ml-banner-detail-modal.visible .ml-banner-detail-content {
        transform: translateY(0);
    }
}

/* =========================================
   21. ROUTE CHIPS - SCROLLBAR VERSTECKEN
   ========================================= */
#ml-route-chips {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#ml-route-chips::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Desktop: Modal zentriert statt am unteren Rand */
@media (min-width: 600px) {
    #ml-direction-modal {
        align-items: center;
    }
    
    .ml-dir-modal-content {
        border-radius: 20px;
        max-height: 70vh;
        margin: 20px;
    }
}
/* =========================================
   APP-ANSICHT BUTTON (nur Mobile)
   ========================================= */
.ml-app-view-wrapper {
    display: none;
    text-align: right;
    margin-bottom: 10px;
}

.ml-app-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #141a21;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.ml-app-view-btn:hover {
    transform: scale(1.05);
    background: #1a2028;
    border-color: rgba(0, 229, 255, 0.5);
}

@media (max-width: 900px) {
    .ml-app-view-wrapper {
        display: block;
    }
}

/* ================================================
   STAU-PROGNOSE HEATMAP WIDGET
   ================================================ */
.ml-prognose-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease-out;
}

.ml-prognose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.ml-prognose-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ccc;
}

.ml-prognose-chevron {
    color: #666;
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.ml-prognose-chevron.open {
    transform: rotate(180deg);
}

.ml-prognose-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
    margin-top: 0;
}
.ml-prognose-body.open {
    max-height: 500px;
    opacity: 1;
    margin-top: 12px;
}

/* Wochentag-Tabs */
.ml-prognose-days {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ml-prognose-days::-webkit-scrollbar { display: none; }

.ml-prognose-day {
    flex: 1;
    min-width: 36px;
    padding: 6px 2px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #888;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ml-prognose-day:hover {
    background: rgba(255,255,255,0.08);
    color: #bbb;
}
.ml-prognose-day.active {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.3);
    color: #00e5ff;
}
.ml-prognose-day.today {
    position: relative;
}
.ml-prognose-day.today::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00e5ff;
}

/* Heatmap Grid */
.ml-prognose-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    margin-bottom: 8px;
    overflow: hidden;
    min-width: 0;
}

.ml-prognose-cell {
    border-radius: 3px;
    height: 28px;
    min-width: 0;
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s;
}
.ml-prognose-cell:hover {
    transform: scale(1.4);
    z-index: 2;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* Severity-Farben */
.ml-prog-s0 { background: rgba(48, 199, 89, 0.25); }    /* Frei – Grün */
.ml-prog-s1 { background: rgba(48, 199, 89, 0.6); }     /* Sehr gut */
.ml-prog-s2 { background: rgba(255, 214, 10, 0.5); }    /* Leicht */
.ml-prog-s3 { background: rgba(255, 159, 10, 0.6); }    /* Moderat */
.ml-prog-s4 { background: rgba(255, 69, 58, 0.5); }     /* Stark */
.ml-prog-s5 { background: rgba(255, 69, 58, 0.8); }     /* Sehr stark */

/* Aktuelle-Stunde Marker */
.ml-prognose-cell.now {
    outline: 2px solid #00e5ff;
    outline-offset: -1px;
    border-radius: 3px;
}

/* Stunden-Labels */
.ml-prognose-hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
}
.ml-prognose-hour-label {
    text-align: center;
    font-size: 0.6rem;
    color: #555;
    line-height: 1;
}

/* Tooltip */
.ml-prognose-tooltip {
    position: fixed;
    background: #2c2c2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #ddd;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.15s;
}
.ml-prognose-tooltip.visible {
    opacity: 1;
}

/* Legende */
.ml-prognose-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}
.ml-prognose-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: #666;
}
.ml-prognose-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Zusammenfassung */
.ml-prognose-summary {
    font-size: 0.82rem;
    color: #aaa;
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ml-prognose-summary strong {
    color: #ddd;
}

/* No-Data State */
.ml-prognose-nodata {
    text-align: center;
    padding: 15px;
    color: #666;
    font-size: 0.85rem;
}

/* ================================================
   BAUSTELLENKALENDER
   ================================================ */

/* Trigger Button */
.ml-construction-trigger {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 159, 10, 0.08);
    border: 1px solid rgba(255, 159, 10, 0.2);
    border-radius: 12px;
    color: #ff9f0a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ml-construction-trigger:hover {
    background: rgba(255, 159, 10, 0.15);
    border-color: rgba(255, 159, 10, 0.35);
}
.ml-construction-trigger:active {
    transform: scale(0.98);
}

/* Modal Overlay */
.ml-construction-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ml-construction-modal.visible {
    opacity: 1;
}
.ml-con-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ml-con-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 92vh;
    background: #0b1015;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
.ml-construction-modal.visible .ml-con-content {
    transform: translateY(0);
}

/* Desktop: Zentriert statt am unteren Rand */
@media (min-width: 600px) {
    .ml-construction-modal {
        align-items: center;
    }
    .ml-con-content {
        border-radius: 20px;
        max-height: 80vh;
    }
}

.ml-con-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.ml-con-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}
.ml-con-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #aaa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ml-con-close:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.ml-con-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.25) transparent;
}
.ml-con-body::-webkit-scrollbar {
    width: 5px;
}
.ml-con-body::-webkit-scrollbar-track {
    background: transparent;
}
.ml-con-body::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.2);
    border-radius: 10px;
}
.ml-con-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.4);
}

/* Zusammenfassung */
.ml-con-summary {
    color: #888;
    font-size: 0.82rem;
    margin-bottom: 12px;
    text-align: center;
}

/* Section-Label (Deine Autobahnen) */
.ml-con-section-label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ml-con-fav-section {
    margin-bottom: 12px;
}

/* Suchleiste */
.ml-con-search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.ml-con-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}
.ml-con-search:focus {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.04);
}
.ml-con-search::placeholder {
    color: #666;
}

/* Suchergebnis-Dropdown */
.ml-con-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #101820;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-top: 4px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ml-con-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.1s;
}
.ml-con-search-item:last-child { border-bottom: none; }
.ml-con-search-item:hover,
.ml-con-search-item:active { background: rgba(0, 229, 255, 0.08); }
.ml-con-search-item.has-closure { background: rgba(255, 59, 48, 0.06); }
.ml-con-search-aid {
    font-weight: 700;
    color: #00e5ff;
    min-width: 50px;
}
.ml-con-search-info {
    font-size: 0.78rem;
    color: #888;
}
.ml-con-search-empty {
    padding: 12px 14px;
    color: #666;
    font-size: 0.82rem;
    text-align: center;
}

/* Aktiv/Geplant Tabs */
.ml-con-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 3px;
}
.ml-con-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #888;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ml-con-tab.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 86, 179, 0.1) 100%);
    color: #00e5ff;
}
.ml-con-tab-count {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* Autobahn Chips */
.ml-con-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ml-con-chip {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #bbb;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ml-con-chip:active {
    transform: scale(0.96);
}
.ml-con-chip.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2) 0%, rgba(0, 86, 179, 0.1) 100%);
    border-color: #00e5ff;
    color: #fff;
}
.ml-con-chip.fav {
    border-color: rgba(255, 215, 0, 0.25);
}
.ml-con-chip.has-closure {
    border-color: rgba(255, 69, 58, 0.3);
}
.ml-con-chip-count {
    background: rgba(255,255,255,0.1);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    color: #999;
}
.ml-con-chip.active .ml-con-chip-count {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
}

/* Baustellen-Einträge */
.ml-con-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ml-con-entry {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 3px solid rgba(255, 159, 10, 0.4);
    transition: all 0.2s;
}
.ml-con-entry.ml-con-closure {
    border-left-color: #ff453a;
    background: rgba(255, 69, 58, 0.05);
}
.ml-con-entry.ml-con-narrowed {
    border-left-color: #ff9f0a;
}
.ml-con-entry.ml-con-longterm {
    border-left-color: #636366;
}
.ml-con-entry.ml-con-construction {
    border-left-color: #ff9f0a;
}

.ml-con-entry-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ml-con-impact {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.ml-con-entry-main {
    flex: 1;
    min-width: 0;
}
.ml-con-entry-title {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}
.ml-con-aid {
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 4px;
}
.ml-con-direction {
    color: #888;
    font-size: 0.78rem;
    margin-top: 2px;
}
.ml-con-impact-label {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ml-con-closure-label {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}
.ml-con-narrowed-label {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
}
.ml-con-longterm-label {
    background: rgba(142, 142, 147, 0.15);
    color: #8e8e93;
}
.ml-con-info-label {
    background: rgba(255, 214, 10, 0.12);
    color: #ffd60a;
}
.ml-con-construction-label {
    background: rgba(255, 159, 10, 0.15);
    color: #ff9f0a;
}

/* Zeitraum */
.ml-con-time {
    color: #999;
    font-size: 0.8rem;
    margin-top: 6px;
    padding-left: 30px;
}

/* Restzeit-Badges */
.ml-con-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: #aaa;
    margin-left: 4px;
}
.ml-con-badge.soon {
    background: rgba(48, 199, 89, 0.15);
    color: #30c759;
}
.ml-con-badge.ended {
    background: rgba(142, 142, 147, 0.15);
    color: #8e8e93;
    text-decoration: line-through;
}
.ml-con-badge.future {
    background: rgba(100, 160, 255, 0.15);
    color: #64a0ff;
}

/* Geplant-Marker */
.ml-con-future-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(100, 160, 255, 0.15);
    color: #64a0ff;
    vertical-align: middle;
    margin-left: 4px;
}
.ml-con-entry.ml-con-future {
    opacity: 0.8;
    border-style: dashed;
}

/* Beschreibung */
.ml-con-desc {
    margin-top: 6px;
    padding-left: 30px;
}
.ml-con-desc-line {
    color: #777;
    font-size: 0.78rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}