:root {
--bg-black: #050505;
--panel-bg: #000;
--cyan: #00e5ff;
--glow: rgba(0, 229, 255, 0.4);
--dragon-gold: #ffcc00;
--archive-blue: #007bff;
}

body {
background-color: #000;
color: #eee;
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}

.scanlines {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
background-size: 100% 3px, 3px 100%;
pointer-events: none;
z-index: 100;
}

.main-frame {
width: 100%;
max-width: 1200px;
background: var(--panel-bg);
border: 1px solid #1a1a1a;
box-shadow: 0 0 50px rgba(0,0,0,1);
position: relative;
}

.banner-header {
background: #000;
padding: 40px;
border-bottom: 2px solid #111;
}

.main-title {
margin: 0;
font-size: 3rem;
letter-spacing: 5px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 15px var(--glow);
}

.banner-overlay {
font-size: 0.8rem;
color: var(--dragon-gold);
letter-spacing: 2px;
}

.content-area {
display: grid;
grid-template-columns: 1fr 320px;
gap: 30px;
padding: 30px;
}

.hacker-title-main {
color: #0f0;
border-bottom: 2px solid #0f0;
padding-bottom: 10px;
text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

.hacker-border {
border: 1px solid #222;
padding: 20px;
margin-bottom: 20px;
}

.green-glow-box {
box-shadow: inset 0 0 15px rgba(0,255,0,0.1);
border-color: #0f0 !important;
}

.status-box-mini {
background: #000;
padding: 15px;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.6;
}

.avatar-container {
width: 100%;
text-align: center;
margin-bottom: 20px;
}

.main-logo-scaled {
max-width: 180px;
width: 100%;
height: auto;
border: 1px solid #1a1a1a;
transition: all 0.4s ease;
}

.main-logo-scaled:hover {
box-shadow: 0 0 30px var(--glow);
filter: brightness(1.1);
}

.legacy-logo-img {
max-width: 100%;
max-height: 80px;
display: block;
margin: 0 auto;
opacity: 0.7;
filter: grayscale(1);
transition: 0.3s ease;
}

.old-logo-link:hover .legacy-logo-img {
opacity: 1;
filter: grayscale(0) drop-shadow(0 0 15px #fff);
transform: scale(1.03);
}

.status-box-mini a img {
transition: all 0.3s ease;
filter: brightness(0.7);
}

.status-box-mini a:hover img {
filter: brightness(1.1);
}

.system-footer {
background: #000;
padding: 20px 30px;
border-top: 1px solid #111;
}

.status-led {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
}

.led-green { background: #0f0; box-shadow: 0 0 5px #0f0; }
.led-blue { background: var(--archive-blue); box-shadow: 0 0 8px var(--archive-blue); }
.led-red { background: #f00; box-shadow: 0 0 8px #f00; }

.footer-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 0.75rem;
line-height: 1.8;
}

.step {
padding: 15px;
border-left: 3px solid #0f0;
background: rgba(0, 255, 0, 0.02);
margin-bottom: 15px;
}

.admin-section {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
margin-top: 20px;
}

.admin-sig-img {
height: 50px;
filter: grayscale(1) invert(1) brightness(1.5);
opacity: 0.8;
}

.copyright {
text-align: center;
font-size: 0.7rem;
color: #333;
margin-top: 20px;
}

.uptime-timer { color: var(--dragon-gold); }

/* Der Shake-Effekt für das Flame Easter Egg */
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
}

@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}

body {
    margin: 0;
    padding: 20px;
    background-color: #000;
    overflow-y: auto; /* Erlaubt vertikales Scrollen für den Inhalt */
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

#matrix-canvas {
    position: fixed; /* Fixiert die Matrix im Hintergrund, auch beim Scrollen */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Hinter dem Inhalt */
    pointer-events: none; /* Stellt sicher, dass Klicks durch das Canvas gehen */
}

.main-frame {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    /* Hier bleibt dein restliches Design erhalten */
    background: rgba(0, 0, 0, 0.8) !important; 
    backdrop-filter: blur(3px);
}
/* --- MOBILE OPTIMIERUNG (Nichts am Rest verändert) --- */

@media (max-width: 900px) {
    body {
        padding: 10px; /* Weniger Rand auf kleinen Bildschirmen */
    }

    .content-area {
        grid-template-columns: 1fr; /* Stapelt Sidebar unter den Content */
        gap: 20px;
        padding: 15px;
    }

    .main-title {
        font-size: 1.8rem; /* Titel verkleinern, damit er nicht bricht */
        letter-spacing: 2px;
    }

    .banner-header {
        padding: 20px;
        text-align: center;
    }

    .footer-info-grid {
        grid-template-columns: 1fr; /* Footer-Infos untereinander */
        text-align: left !important;
        gap: 20px;
    }

    .footer-info-grid div:last-child {
        text-align: left !important; /* Rechtsbündig sieht mobil oft falsch aus */
    }

    .sidebar {
        order: 2; /* Sidebar nach unten */
    }
    
    .timeline-section {
        order: 1; /* Hauptinhalt nach oben */
    }

    .admin-section {
        justify-content: center; /* Signatur zentrieren */
        flex-direction: column;
    }
}