/* ==================================
   SachsenWarn Lagezentrum
   Dark Green Theme
================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {

    background: #080c10;

    color: #e6edf3;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

}


/* ================================
   Header
================================ */


.top-header {

    background:
        linear-gradient(
            135deg,
            #111820,
            #0b0f14
        );

    border-bottom:
        1px solid #1f2933;

    padding: 22px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.brand h1 {

    font-size: 30px;

    color: #ffffff;

}


.brand span {

    color: #22c55e;

    font-size: 15px;

    letter-spacing: 1px;

}



.online-status {

    background: #0f2a18;

    color: #22c55e;

    border:
        1px solid #22c55e;

    padding:
        10px 18px;

    border-radius: 20px;

    font-weight: bold;

}



/* ================================
   Navigation
================================ */


.navigation {

    background: #111820;

    padding: 15px 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    border-bottom:
        1px solid #1f2933;

}



.navigation a {

    color: #c9d1d9;

    text-decoration: none;

    background: #151d26;

    border:
        1px solid #30363d;

    padding:
        10px 16px;

    border-radius: 10px;

    transition: .2s;

}



.navigation a:hover {

    color: white;

    border-color:
        #22c55e;

}



.navigation a.active {

    background:
        #166534;

    color:white;

    border-color:
        #22c55e;

}



/* ================================
   Container
================================ */


.container {

    max-width: 1500px;

    margin:auto;

    padding:25px;

}/* ================================
   Status Karten
================================ */


.status-grid {

    display:grid;

    grid-template-columns:
    repeat(4, 1fr);

    gap:15px;

    margin-bottom:25px;

}


.status-card {

    background:#111820;

    border:1px solid #26313c;

    border-radius:14px;

    padding:18px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}


.status-card span {

    display:block;

    color:#8b949e;

    font-size:14px;

    margin-bottom:8px;

}


.status-card strong {

    font-size:20px;

}


.green {

    color:#22c55e;

}


.orange {

    color:#f59e0b;

}



/* ================================
   Karte
================================ */


.map-section {

    background:#111820;

    border:1px solid #26313c;

    border-radius:16px;

    padding:15px;

    margin-bottom:25px;

}


.section-title {

    font-size:18px;

    font-weight:bold;

    margin-bottom:15px;

    color:#ffffff;

}


#map {

    width:100%;

    height:600px;

    border-radius:12px;

    overflow:hidden;

}



/* ================================
   Warnungen + Chat
================================ */


.main-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:20px;

}


.panel {

    background:#111820;

    border:

    1px solid #26313c;

    border-radius:16px;

    padding:20px;

}


.panel h2 {

    margin-bottom:15px;

    font-size:20px;

}



/* Warnkarten */


.warning-card {

    background:#171f29;

    border-left:

    4px solid #ef4444;

    padding:15px;

    margin-bottom:12px;

    border-radius:10px;

}



/* Info Box */


.info-box {

    background:#0f2a18;

    border:

    1px solid #22c55e;

    padding:15px;

    border-radius:10px;

    color:#22c55e;

}



/* Chat */


.chat-box {

    display:flex;

    flex-direction:column;

    gap:10px;

}


.chat-message {

    background:#151d26;

    border:

    1px solid #26313c;

    padding:14px;

    border-radius:10px;

}/* ================================
   Schnellzugriff Kacheln
================================ */


.quick-grid {

    display:grid;

    grid-template-columns:
    repeat(5, 1fr);

    gap:15px;

    margin-top:25px;

}


.quick-card {

    background:#111820;

    border:1px solid #26313c;

    border-radius:14px;

    padding:20px;

    text-align:center;

    transition:.2s;

}


.quick-card:hover {

    border-color:#22c55e;

    transform:translateY(-3px);

}


.quick-card h3 {

    color:#22c55e;

    margin-bottom:10px;

}


.quick-card p {

    color:#8b949e;

    font-size:14px;

}



/* ================================
   System Status unten
================================ */


.system-grid {

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:15px;

    margin-top:25px;

}



.system-card {

    background:#0d1319;

    border:1px solid #26313c;

    border-radius:12px;

    padding:15px;

    text-align:center;

}


.system-card span {

    color:#8b949e;

    font-size:13px;

}


.system-card strong {

    display:block;

    margin-top:8px;

    font-size:20px;

}



/* ================================
   Footer
================================ */


footer {

    margin-top:30px;

    padding:20px;

    text-align:center;

    color:#6b7280;

    border-top:

    1px solid #1f2933;

}



/* ================================
   Mobile
================================ */


@media(max-width:900px){


    .status-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


    .main-grid {

        grid-template-columns:
        1fr;

    }


    .quick-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


    .system-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


    #map {

        height:400px;

    }


}

/* ================================
   Lagezentrum Feinschliff
================================ */


.map-section {

    border-color:#22c55e;

    box-shadow:
    0 0 25px rgba(34,197,94,.08);

}


.panel {

    min-height:350px;

}


.panel h2 {

    color:#22c55e;

    border-bottom:
    1px solid #26313c;

    padding-bottom:10px;

}



/* Warnkarten schöner */

.warning-card {

    background:#1a222c;

    border-left-width:6px;

    transition:.2s;

}


.warning-card:hover {

    transform:translateX(4px);

}



/* Chat */

.chat-message {

    color:#d1d5db;

}


.chat-message:first-child {

    border-color:#22c55e;

}



/* Karte */

#map {

    height:650px;

}

/* ================================
   Lagebericht
================================ */


.lage-header {

    margin-bottom:25px;

}


.lage-status {

    margin-top:15px;

    background:#0f2a18;

    border:1px solid #22c55e;

    color:#22c55e;

    padding:15px;

    border-radius:12px;

    font-weight:bold;

}




.lage-stream {

    display:flex;

    flex-direction:column;

    gap:20px;

}




.lage-card {

    background:#111820;

    border:1px solid #26313c;

    border-radius:16px;

    padding:22px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.35);

}




.lage-card h3 {

    color:#ffffff;

    margin-bottom:15px;

}




.lage-card p {

    color:#c9d1d9;

    line-height:1.6;

}




.lage-time {

    color:#22c55e;

    font-size:14px;

    margin-bottom:10px;

}




/* Info */

.lage-card.info {

    border-left:

    5px solid #3b82f6;

}



/* Positiv */

.lage-card.success {

    border-left:

    5px solid #22c55e;

}



/* Beobachtung */

.lage-warning {

    margin-top:15px;

    background:#3b2a0a;

    color:#fbbf24;

    padding:12px;

    border-radius:10px;

    font-weight:bold;

}

/* ================================
   Lagebericht Prioritäten
================================ */


.lage-status {

    font-size:18px;
    font-weight:bold;
}


/* Normal */

.lage-status.info,
.lage-card.info {

    border-left:5px solid #22c55e;

}



/* Beobachtung */

.lage-status.beobachtung,
.lage-card.beobachtung {

    border-left:5px solid #eab308;

}




/* Achtung */

.lage-status.achtung,
.lage-card.achtung {

    border-left:5px solid #f97316;

}




/* Alarm */

.lage-status.alarm,
.lage-card.alarm {

    border-left:5px solid #ef4444;

}



/* Statusflächen */


.lage-status.info {

    background:#0f2a18;
    color:#22c55e;

}



.lage-status.beobachtung {

    background:#332a05;
    color:#eab308;

}



.lage-status.achtung {

    background:#3a1d05;
    color:#f97316;

}



.lage-status.alarm {

    background:#3a0b0b;
    color:#ef4444;

}



/* Karten etwas stärker hervorheben */

.lage-card {

    transition:.2s;

}



.lage-card:hover {

    transform:translateX(5px);

}

/* ================================
   Logs
================================ */


.log-container {

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:20px;

}



.log-entry {

    background:#151d26;

    border-left:4px solid #22c55e;

    padding:14px;

    border-radius:10px;

    color:#c9d1d9;

    font-family:monospace;

}



.log-entry:hover {

    border-color:#16a34a;

}

/* LOGS */

.log-container {

display:flex;
flex-direction:column;
gap:10px;

}


.log-entry {

background:#151b23;
border-left:4px solid #22c55e;
padding:12px;
border-radius:10px;
font-family:monospace;
color:#d1d5db;

}


.log-entry.warning {

border-color:#eab308;

}


.log-entry.error {

border-color:#ef4444;

}


.log-entry.success {

border-color:#22c55e;

}