:root {
    --cyb-bg-dark: #0f0f0f;
    --cyb-side-bg: #1e1e1e;
    --cyb-header-bg: #202020;
    --cyb-accent-red: #ff4444;
    --cyb-text-main: #ffffff;
    --cyb-text-dim: #aaaaaa;
    --cyb-modal-bg: #2a2a2a;
    --cyb-neon-green: #00ff41;
}


/* Schriftart NUR für deine spezifischen Komponenten */
.cyb-main-header, 
.cyb-sidebar, 
.cyb-modal-overlay,
.cyb-notif-dropdown { 
    font-family: 'Segoe UI', Roboto, sans-serif !important; 
    -webkit-font-smoothing: antialiased; /* Macht die Schrift auf vielen Browsern sauberer */
}

/* Optional: Falls du möchtest, dass Links in der Sidebar 
   immer die richtige Schrift haben, auch wenn global etwas anderes gilt */
.cyb-sidebar a {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Header --- */
.cyb-main-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 56px;
    background: var(--cyb-header-bg); display: flex; justify-content: space-between;
    align-items: center; padding: 0 15px; 
    z-index: 10000; /* Header Basis */
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.cyb-header-left, .cyb-header-right { 
    display: flex; align-items: center; gap: 15px; 
}

/* .cyb-cyber-clock Styling wurde entfernt */

.cyb-hamburger { 
    cursor: pointer; padding: 5px; 
}
.cyb-hamburger span { 
    display: block; width: 20px; height: 2px; background: white; margin: 4px 0; 
}

.cyb-logo {
    height: 32px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 5px var(--cyb-neon-green));
}

.cyb-logo-link { 
    display: flex; align-items: center; text-decoration: none; 
}
.cyb-logo-link:hover .cyb-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px var(--cyb-neon-green));
}

.cyb-icon-btn { 
    width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; transition: 0.2s; font-size: 18px;
}
.cyb-icon-btn:hover { 
    background: #444; color: var(--cyb-accent-red); 
}

/* --- Sidebar - Rechtsbündig erzwingen --- */
.cyb-sidebar {
    height: 100%; 
    width: 280px; 
    position: fixed; 
    z-index: 11000;
    
    top: 0; 
    right: -280px;      /* Startposition rechts außen */
    left: auto !important; /* WICHTIG: Überschreibt jede "links"-Regel, auch auf Mobile */
    
    background-color: var(--cyb-side-bg);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    overflow-y: auto;
    
    /* Schatten zeigt nach links */
    box-shadow: -5px 0 15px rgba(0,0,0,0.5); 
}

/* Geöffneter Zustand */
.cyb-sidebar.cyb-open { 
    right: 0; 
    left: auto !important; /* Sicherstellen, dass es nicht nach links springt */
}

/* OPTIONAL: Falls du auf dem Handy (unter 768px) das Menü Vollbild haben willst */
@media screen and (max-width: 768px) {
    .cyb-sidebar {
        width: 100%;    /* Volle Breite auf Handy */
        right: -100%;   /* Ganz raus schieben */
    }
    .cyb-sidebar.cyb-open {
        right: 0;
    }
}

.cyb-sidebar-header { 
    padding: 20px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #333; flex-direction: row-reverse; justify-content: space-between; 
}
.cyb-closebtn { 
    font-size: 30px; cursor: pointer; color: var(--cyb-text-dim); 
}
.cyb-sidebar-logo { 
    font-weight: bold; font-size: 18px; color: var(--cyb-accent-red); 
}

.cyb-menu-section { 
    padding: 10px 0; 
}
.cyb-section-label { 
    padding: 10px 20px; font-size: 11px; color: var(--cyb-text-dim); text-transform: uppercase; letter-spacing: 1.5px; 
}

.cyb-sidebar a {
    padding: 12px 20px; text-decoration: none; color: var(--cyb-text-main);
    display: flex; align-items: center; font-size: 14px; transition: 0.2s;
}
.cyb-sidebar a:hover { 
    background: #333; 
}
.cyb-sidebar a.cyb-active { 
    background: #383838; border-left: 4px solid var(--cyb-accent-red); color: var(--cyb-accent-red); 
}
.cyb-sidebar a span { 
    color: var(--cyb-text-dim); font-size: 10px; margin-left: auto; background: #111; padding: 2px 6px; border-radius: 4px; 
}
.cyb-menu-icon { 
    width: 22px; height: 22px; margin-right: 15px; object-fit: contain; 
}

/* --- Modal Design --- */
.cyb-modal-overlay {
    display: none; position: fixed; 
    z-index: 12000; /* Modal GANZ oben */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}

.cyb-modal-content {
    background-color: var(--cyb-modal-bg); padding: 0; border-radius: 12px;
    width: 90%; max-width: 450px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: cyb-fadeIn 0.3s ease; overflow: hidden;
}
.cyb-modal-header {
    background: #333; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
}
.cyb-modal-header h2 { 
    margin: 0; font-size: 18px; color: var(--cyb-accent-red); 
}
.cyb-close-modal { 
    font-size: 28px; cursor: pointer; color: var(--cyb-text-dim); 
}
.cyb-modal-body { 
    padding: 25px; line-height: 1.6; color: #eee; font-size: 15px; 
}

@keyframes cyb-fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Spezifische Korrekturen für Smartphones */
@media screen and (max-width: 480px) {
    .cyb-main-header {
        padding: 0 10px; /* Weniger Rand links/rechts */
    }

    .cyb-header-left, .cyb-header-right {
        gap: 8px; /* Kleinerer Abstand zwischen Logo und Hamburger */
    }

    .cyb-logo {
        height: 26px; /* Logo etwas verkleinern, damit es nicht quetscht */
    }

    .cyb-icon-btn {
        width: 40px; /* Größere Klickfläche für Daumen */
        height: 40px;
    }
    
    .cyb-sidebar {
        width: 100vw; /* Nutzt die exakte Viewport-Breite */
        right: -100vw;
    }
}

/* Verhindert das "Wackeln" der Seite, wenn die Sidebar öffnet */
body.cyb-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}