/* ==========================================================================
   HEADER, NAVIGATION & NINJA-EFFECTS
   ========================================================================== */

.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 0; 
    border-bottom: 1px solid #333; 
    position: relative; 
}

/* --- LOGO STYLING --- */
.header .logo a { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    text-decoration: none; 
}

.menu-toggle { display: none !important; }
.logo-img { width: 60px; height: 60px; display: block; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 0.9; }
.logo-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; margin-bottom: 2px; }
.logo-main { 
    font-size: 20px; 
    font-weight: 800; 
    color: #D40000; 
    letter-spacing: 0.5px; 
    text-shadow: 0 0 5px rgba(212, 0, 0, 0.3); 
}

/* --- NINJA HOVER EFFECTS (Wackeln & Matrix-Flackern) --- */
@keyframes glitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes digital-flicker {
    0%, 100% { color: #D40000; text-shadow: 0 0 5px #D40000; } /* Start Rot */
    50% { color: #00FF00; text-shadow: 0 0 15px #00FF00; }    /* Matrix Grün */
    55% { color: #D40000; text-shadow: none; }               /* Kurzer Rückfall */
}

.header .logo a:hover .logo-main {
    animation: digital-flicker 0.15s infinite, glitch 0.3s infinite;
}

/* --- NAVIGATION --- */
.nav { display: flex; align-items: center; gap: 25px; }
.nav a, .nav .dropbtn { color: #ffffff; text-decoration: none; font-size: 16px; padding: 10px 0; position: relative; transition: color 0.3s ease; display: inline-block; }
.nav a:hover, .dropbtn:hover { color: #D40000 !important; }

.nav a::after, .dropbtn::after { 
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; 
    background-color: #D40000; transition: all 0.3s ease; 
}
.nav a:hover::after, .nav .dropdown:hover .dropbtn::after { width: 100%; }

/* --- DROPDOWN --- */
.nav .dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1a1a1a;
    min-width: 180px;
    border: 1px solid #D40000;
    z-index: 1000;
    padding-top: 10px;
}
.dropdown-content a { display: block; padding: 10px 15px; color: #ffffff; text-decoration: none; }
.dropdown-content a:hover { background-color: #333; color: #00FF00; }
.nav .dropdown:hover .dropdown-content { display: block; }

/* --- SYSTEM STATUS --- */
.system-status { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 8px; font-family: monospace; font-size: 0.8rem; color: #00FF00 !important; }
.status-dot { width: 8px; height: 8px; background-color: #00FF00 !important; border-radius: 50%; box-shadow: 0 0 5px #00FF00; animation: pulse 2s infinite; }

/* --- RESPONSIVE HEADER --- */
@media (max-width: 900px) {
    .menu-toggle { display: block !important; order: 3; font-size: 30px; cursor: pointer; color: white; }
    .logo { order: 1; }
    #mainNav {
        position: absolute !important;
        top: 100px !important; 
        left: 0 !important;
        width: 100% !important;
        background-color: #000000 !important;
        z-index: 9999 !important;
        flex-direction: column;
        display: none;
    }
    #mainNav.active { display: flex !important; }
    .system-status { position: relative; width: 100%; justify-content: center; margin-top: 15px; order: 3; top: auto; right: auto; }
}