/* Basis-Utility-Klassen (SECURITY_FEATURES.md Abschnitt 8.1 - kein style="" Attribut, damit CSP ohne unsafe-inline funktioniert) */

* { box-sizing: border-box; }
body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: #f4f6f8;
    color: #222;
}
.d-flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.text-muted { color: #7f8c8d; }
.fs-13 { font-size: 13px; }
.fw-bold { font-weight: 600; }
.hidden-offscreen { position: absolute; left: -9999px; top: -9999px; }

.app-header {
    background: #1c2b36;
    color: #fff;
    padding: 14px 24px;
}
.app-header a { color: #fff; text-decoration: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

.card {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.kpi-box { border-left: 4px solid #999; padding: 12px 16px; background: #fff; border-radius: 4px; }
.kpi-box--info { border-left-color: #00ACC1; }
.kpi-box--warn { border-left-color: #ffd600; }
.kpi-box--danger { border-left-color: #D81B60; }
.kpi-box--ok { border-left-color: #427323; }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}
.btn-primary { background: #1c2b36; color: #fff; }
.btn-secondary { background: #e0e0e0; color: #222; }
.btn-danger { background: #c0392b; color: #fff; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; }
.alert-error { background: #fdecea; color: #611a15; border: 1px solid #f5c6cb; }
.alert-success { background: #eafaf1; color: #14532d; border: 1px solid #b7e4c7; }
.alert-warn { background: #fff8e1; color: #7a5c00; border: 1px solid #ffe082; }

table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; }
table th { font-size: 12px; text-transform: uppercase; color: #7f8c8d; }

/* Sidebar-Banner-Pattern (Abschnitt 18) - stapelbar, Offset wird per dynamischem nonce-Style gesetzt */
.sidebar-banner {
    position: fixed;
    left: 0; right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    z-index: 1000;
}
.sidebar-banner--staging { background: #ffd600; color: #222; }
.sidebar-banner--impersonation { background: #c0392b; color: #fff; }

/* Auth-Seiten (Login, Passwort vergessen/zuruecksetzen, Formularbreiten in mein_konto.php) */
.auth-page { display: flex; align-items: center; min-height: 70vh; }
.auth-card { max-width: 400px; margin: auto; width: 100%; }
.auth-card--narrow { max-width: 380px; }
.form-narrow { max-width: 400px; }
.form-narrow--tight { max-width: 300px; }