/* --- VARIABLEN & THEMES --- */
:root {
    --bg: #f6f8fa;
    --border: #d0d7de;
    --text: #24292f;
    --muted: #656d76;
    --primary: #0969da;
    --card-bg: #ffffff;
    --details-bg: #fafafa;
    --svc-border: #eeeeee;
    --nav-hover: #ebf0f4;

    /* Status Farben Light */
    --color-ok-bg: #dafbe1; --color-ok-text: #1a7f37;
    --color-warn-bg: #fff8c5; --color-warn-text: #9a6700;
    --color-crit-bg: #ffebe9; --color-crit-text: #cf222e;
    --color-maint-bg: #ddf4ff; --color-maint-text: #0969da;
    --color-upd-bg: #f1f1f1; --color-upd-text: #666;
    --color-pend-bg: #eeeeee; --color-pend-text: #888;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117;
        --border: #30363d;
        --text: #c9d1d9;
        --muted: #8b949e;
        --primary: #58a6ff;
        --card-bg: #161b22;
        --details-bg: #0d1117;
        --svc-border: #21262d;
        --nav-hover: #21262d;

        --color-ok-bg: #0e4429; --color-ok-text: #3fb950;
        --color-warn-bg: #4d3d00; --color-warn-text: #d29922;
        --color-crit-bg: #490202; --color-crit-text: #f85149;
        --color-maint-bg: #0c2d6b; --color-maint-text: #58a6ff;
        --color-upd-bg: #21262d; --color-upd-text: #8b949e;
    }
}

/* --- BASIS LAYOUT --- */
html, body { min-height: 100vh; margin: 0; }
body { 
    font-family: -apple-system, system-ui, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    display: flex; 
    flex-direction: column; 
    -webkit-font-smoothing: antialiased; 
}
.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    width: 100%; 
    padding: 10px 15px; 
    flex: 1; 
    box-sizing: border-box; 
}

header h1 { font-size: 1.5rem; margin: 15px 0; text-align: center; }

nav { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    margin: 10px 0 20px 0; 
    border-bottom: 1px solid var(--border); 
    padding-bottom: 15px; 
}
nav a { 
    cursor: pointer; 
    color: var(--muted); 
    text-decoration: none; 
    font-size: 14px; 
    padding: 6px 12px; 
    font-weight: 500; 
    border-radius: 6px; 
    transition: all 0.2s ease; 
}
nav a:hover { background-color: var(--nav-hover); color: var(--text); }
nav a.active { color: var(--primary); font-weight: 600; background-color: var(--nav-hover); }

/* --- GRID & CARDS --- */
.grid { 
    display: grid; 
    gap: 12px; 
    grid-template-columns: 1fr;
    align-items: start; /* WICHTIG: Verhindert das Strecken der Karten auf Mac/Safari */
}
@media (min-width: 768px) { 
    .grid { 
        gap: 20px; 
        grid-template-columns: repeat(var(--cols, 2), 1fr); 
    } 
}

.card { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    height: fit-content; /* Karte soll nur so hoch wie ihr Inhalt sein */
}
.header-card { 
    padding: 12px 16px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
}

/* --- STATUS PILLS --- */
.pill { padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.operational, .ok, .up { background: var(--color-ok-bg); color: var(--color-ok-text); }
.impaired, .warning { background: var(--color-warn-bg); color: var(--color-warn-text); }
.critical, .down { background: var(--color-crit-bg); color: var(--color-crit-text); }
.maintenance { background: var(--color-maint-bg); color: var(--color-maint-text); }
.updating { background: var(--color-upd-bg); color: var(--color-upd-text); }
.pending { background: var(--color-pend-bg); color: var(--color-pend-text); }

/* Animation */
.details { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: var(--details-bg); }
.card.open .details { max-height: 1000px; border-top: 1px solid var(--border); }
.svc-row { padding: 10px 16px; border-bottom: 1px solid var(--svc-border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }

/* --- MAINTENANCE & CHANGELOG --- */
.maint-section, .change-section { margin-bottom: 20px; }
.maint-section h3, .change-section h3 { font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 12px; color: var(--muted); }

.maint-card { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    padding: 12px; 
    margin-bottom: 10px; 
    border-left: 4px solid var(--primary); 
}
.maint-card.past { border-left-color: var(--border); opacity: 0.7; }

.change-card { border-left: 4px solid var(--muted); height: fit-content; }
.change-card .version-tag { float: right; background: var(--border); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; color: var(--text); }
.change-card .change-id { color: var(--primary); font-weight: bold; margin-right: 5px; }
.change-card li { margin-bottom: 8px; font-size: 13px; line-height: 1.4; }

footer { text-align: center; padding: 20px 15px; color: var(--muted); font-size: 11px; }