/* Grundlegende Stile */
body {
    background-color: #0d1117;
    color: #c9d1d9;
    font-family: 'Consolas', 'Courier New', monospace;
    margin: 0;
    padding: 10px;
    overflow: hidden;
}

/* Das Hauptgitter für unser Layout */
.geheimdienst-interface {
    display: grid;
    /* NEUE SPALTENAUFTEILUNG: 4 Teile für die Videos, 1 Teil für das Portrait */
    grid-template-columns: 2fr 2fr 1fr; 
    grid-template-rows: auto 1fr 1fr; /* Höhe der 1. Reihe passt sich an */
    gap: 10px;
    height: calc(100vh - 20px);
}

/* Allgemeine Stile für alle Fenster */
.fenster {
    border: 1px solid #30363d;
    background-color: #010409a8;
    backdrop-filter: blur(2px);
    padding: 10px;
    overflow: hidden;
    position: relative;
}

/* --- NEUE LAYOUT-REGELN --- */

/* Der Video-Wrapper nimmt die ersten beiden (breiteren) Spalten ein */
.video-wrapper {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.video-container {
    flex: 1;
    padding: 0;
    position: relative;
    aspect-ratio: 16 / 9; /* Behält das Videoformat bei */
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.6) contrast(1.3);
}

/* Das Portrait-Fenster nimmt die letzte (schmale) Spalte ein */
.portrait-container {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

/* Das Bild im Portrait-Fenster wird komplett angezeigt (unverändert) */
.portrait-container img {
    width: 100%;
    height: calc(100% - 60px); 
    /* NEU: 'contain' stellt sicher, dass das Bild komplett reinpasst und sein Seitenverhältnis behält */
    object-fit: contain; 
    border: 1px solid #30363d;
}

/* Neuaufteilung der unteren Fenster */
.hacker-fenster {
    grid-column: 1 / 2; /* Erste Spalte */
    grid-row: 2 / 4;
}
.karten-fenster {
    grid-column: 2 / 3; /* Zweite Spalte */
    grid-row: 2 / 4;
}
.system-status {
    grid-column: 3 / 4; /* Dritte (schmale) Spalte */
    grid-row: 2 / 4;
}
/* --- ENDE DER LAYOUT-ÄNDERUNGEN --- */

.text-overlay {
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
}

.fenster h3 {
    margin-top: 0;
    color: #58a6ff;
    font-size: 0.9em;
    border-bottom: 1px solid #30363d;
    padding-bottom: 5px;
}

.warnung {
    color: #ff4d4d;
    font-weight: bold;
    animation: blink-animation 1.5s infinite;
}

@keyframes blink-animation {
    50% { opacity: 0.3; }
}

.scrolling-text {
    height: 90%;
    overflow-y: auto;
    font-size: 0.9em;
    line-height: 1.5;
    color: #00ff00;
}
.scrolling-text::-webkit-scrollbar { width: 5px; }
.scrolling-text::-webkit-scrollbar-track { background: #0d1117; }
.scrolling-text::-webkit-scrollbar-thumb { background: #30363d; }

#map {
    padding: 0;
    border: 1px solid #30363d;
}
.leaflet-control-attribution {
    background: #010409a8 !important;
    color: #c9d1d9 !important;
}