:root { --neon: #00ff41; --dark: #050505; }
body, html { margin: 0; padding: 0; background: var(--dark); color: var(--neon); font-family: monospace; height: 100vh; overflow: hidden; }

/* Login */
#login-overlay { position: fixed; inset: 0; background: #000; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.login-box { border: 2px solid var(--neon); padding: 20px; width: 280px; text-align: center; }

/* Desktop Sidebar Layout */
#main-container { display: flex; width: 100vw; height: 100vh; }
#map { flex: 1; height: 100%; }
#sidebar { width: 300px; background: #000; border-left: 2px solid var(--neon); display: flex; flex-direction: column; }

/* Mobile Menu (Swipe-Up Simulation) */
#mobile-menu {
    position: fixed; bottom: -100%; left: 0; width: 100%; height: 60%;
    background: #000; border-top: 3px solid var(--neon);
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5000; padding: 15px;
}
#mobile-menu.active { bottom: 0; }

/* Media Queries für echte Trennung */
@media (max-width: 899px) {
    #sidebar { display: none; } /* Sidebar am Handy weg */
    #map { height: 100vh; }
}

@media (min-width: 900px) {
    #mobile-trigger { display: none; } /* Swipe-Trigger am PC weg */
}

/* UI Elements */
.menu-btn { background: var(--neon); color: #000; border: none; padding: 10px; margin: 5px 0; font-weight: bold; width: 100%; }
#mobile-trigger { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--neon); color: #000; padding: 5px 20px; border-radius: 20px; z-index: 4000; }