/* --- Sticky Top Navigation --- */
.red-top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 48px;
    background-color: #b91c1c; /* Ein starkes, professionelles Rot (Kein grelles Signalrot) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    padding: 0 1rem;
    display: flex;
    align-items: center; /* Zentriert die Icons vertikal */
}

/* Pico's Standard-Abstände in der Nav überschreiben, um die 48px zu erzwingen */
.red-top-nav ul { margin: 0; padding: 0; display: flex; align-items: center; height: 100%; }
.red-top-nav li { padding: 0; display: flex; align-items: center; height: 100%; margin: 0 5px; }

/* Icons und Logos anpassen */
.nav-icon {
    color: white; /* Falls Sie Text-Icons nutzen */
    font-size: 24px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
}
.nav-icon img { height: 24px; width: auto; filter: brightness(0) invert(1); /* Macht schwarze Icons weiß */ }
.nav-logo { height: 28px; width: auto; margin-left: 10px; }

/* --- Side Drawers (Die seitlichen Menüs) --- */
.side-drawer {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 280px;
    background-color: var(--pico-background-color);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* Startpositionen außerhalb des Bildschirms */
.drawer-left { left: 0; transform: translateX(-100%); }
.drawer-right { right: 0; transform: translateX(100%); }

/* Klassen, die per JavaScript hinzugefügt werden, um sie zu öffnen */
.drawer-left.open { transform: translateX(0); }
.drawer-right.open { transform: translateX(0); }

/* Innere Formatierung der Drawers */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--pico-muted-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.close-btn { color: var(--pico-color); text-decoration: none; font-size: 20px; font-weight: bold; }
.close-btn:hover { color: #b91c1c; }

.drawer-content { padding: 20px; overflow-y: auto; }
.drawer-title { margin-top: 15px; margin-bottom: 5px; color: var(--pico-muted-color); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.drawer-content ul { list-style: none; padding: 0; margin: 0; }
.drawer-content li { margin-bottom: 10px; }
.drawer-content a { color: var(--pico-color); text-decoration: none; font-weight: 500; display: block; padding: 5px 0;}
.drawer-content a:hover { color: #b91c1c; }

/* --- Overlay (Der abgedunkelte Hintergrund) --- */
#drawer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
#drawer-overlay.active { opacity: 1; pointer-events: auto; }