body {background-color: black;color: #a2ded0;font-family: 'Courier New', Courier, monospace;margin: 5px 0 0 10px;padding: 0;text-align: left;}
a {color: #92a8d1;text-decoration: underline;}
a:hover {color: #ccd1d1;}
.wrapper {width: 1300px;display: flex;flex-direction: column;}
header {width: 1300px;height: 256px;display: flex;flex-direction: row;}
.logo {width: 256px;height: 256px;background-image: url('../gfx/logo_set2.jpg');background-repeat: no-repeat;}
.banner {width: 1044px;height: 256px;background-image: url('../gfx/topbanner_set2.jpg');background-repeat: no-repeat;}

nav {width: 1300px;height: 20px;margin: 0;padding: 5px 0;border-top: 1px solid #7488A3;border-left: 1px solid #7488A3;border-right: 1px solid #7488A3;border-bottom: 1px solid #333;font-size: 14px;background-color: #050505;}

main {width: 1300px;min-height: 929px;background-image: url('../gfx/mainframe_set2.jpg');background-repeat: no-repeat;position: relative;}
main2 {width: 1300px;min-height: 929px;}

/* Exakt justiertes Babylon-Fenster */
#radar-viewport {position: absolute;top: 300px;left: 15px;width: 1000px;height: 750px;background-color: #000;overflow: hidden;}
canvas {width: 100%;height: 100%;display: block;outline: none;}
.separator {margin-top: 5px;border: none;border-top: 1px solid #555;width: 1300px;}
footer {width: 1300px;height: 80px;display: flex;align-items: center;justify-content: flex-start;color: #888;font-size: 13px;}

/* ========================================================= */
/* --- RADAR STATUS & HOLOGRAFISCHES CLUSTER-HUD (OVERLAY) - */
/* ========================================================= */

/* Status-Anzeige oben rechts im Radar */
#radar-status-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    color: #666;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border: 1px solid #333;
    pointer-events: none;
    z-index: 10;
}
#radar-status-badge.badge-active {color: #00ffcc;border-color: #00ffcc;box-shadow: 0 0 5px rgba(0,255,204,0.4);}

/* Haupt-Overlay Container für das 3x3x3 Raster */
#cluster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 8, 12, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 15px;
    box-sizing: border-box;
    z-index: 20;
    transition: opacity 0.25s ease-in-out;
}
#cluster-overlay.hud-hidden {opacity: 0;pointer-events: none;}

/* HUD Header & Footer */
.hud-header {border-bottom: 1px solid #00ffcc;padding-bottom: 4px;}
#hud-cluster-title {font-size: 16px;font-weight: bold;color: #00ffcc;text-shadow: 0 0 6px rgba(0,255,204,0.6);}
#hud-cluster-type {font-size: 11px;color: #88a8a0;margin-top: 2px;}

.hud-footer {border-top: 1px solid #334;padding-top: 4px;display: flex;justify-content: space-between;font-size: 11px;}
#hud-layer-name {color: #00ffcc;font-weight: bold;}
.hud-controls {color: #778899;}

/* 3x3x3 Gitter-Schichten Container */
#cluster-grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-grow: 1;
}

/* Inaktive Ebenen (Kompakte Miniatur-Vorschau) */
.cluster-layer {
    display: grid;
    grid-template-columns: repeat(3, 70px);
    grid-template-rows: repeat(3, 20px);
    gap: 3px;
    padding: 3px;
    border: 1px dashed #223333;
    opacity: 0.25;
    transition: all 0.25s ease-in-out;
    pointer-events: none;
}

/* AKTIWE EBENE (Groß & Dominant im Fokus) */
.cluster-layer.layer-active {
    grid-template-columns: repeat(3, 115px);
    grid-template-rows: repeat(3, 34px);
    gap: 5px;
    padding: 6px;
    opacity: 1.0;
    border: 1px solid #00ffcc;
    background: rgba(0, 255, 204, 0.05);
    box-shadow: 0 0 15px rgba(0,255,204,0.25);
    pointer-events: auto;
}

/* Sektor-Kacheln (Standard / Inaktiv) */
.sector-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    text-align: center;
    border: 1px solid #223333;
    background: rgba(0, 0, 0, 0.6);
}
.sector-cell.cell-active {border-color: #a2ded0;color: #a2ded0;background: rgba(162, 222, 208, 0.15);}
.sector-cell.cell-uncharted {border: 1px dashed #444;color: #555;}
.cell-title {font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 65px;}
.cell-sub {font-size: 7px;color: #667777;}

/* Sektor-Kacheln in der AKTIVEN Ebene (Größere Schrift) */
.layer-active .sector-cell {font-size: 10px;}
.layer-active .cell-title {max-width: 105px;font-size: 10px;}
.layer-active .cell-sub {font-size: 8px;margin-top: 1px;}