/* ZeitWerk – by IMMO-MEDIA · Design-Tokens & Grundlagen */

:root {
    /* Farben */
    --bg:        #101418;
    --bg-raise:  #171c22;
    --card:      #1a2028;
    --card-edge: #232a34;
    --line:      #2a313b;
    --ink:       #f2efe8;
    --ink-dim:   #8a93a0;
    --ink-faint: #5b6472;
    /* IMMO-MEDIA-Blau (immo-media.de): heller fürs Lesen auf dunklem Grund,
       kräftig für Flächen/Buttons */
    --brand:        #5b96f7;
    --brand-strong: #1863dc;

    /* Status */
    --ok:        #3ecf6e;
    --ok-soft:   rgba(62, 207, 110, .13);
    --pause:     #f5b62e;
    --pause-soft:rgba(245, 182, 46, .13);
    --off:       #525c68;
    --off-soft:  rgba(82, 92, 104, .16);
    --danger:    #e5484d;

    /* Typografie */
    --font-ui:   'Archivo', system-ui, -apple-system, sans-serif;
    --font-num:  'Azeret Mono', ui-monospace, 'Cascadia Mono', monospace;

    --topbar-bg: rgba(16, 20, 24, .85);
    color-scheme: dark;
}

/* Helles Theme – wird nur auf den öffentlichen Seiten per data-theme gesetzt.
   Terminal und Verwaltung bleiben bewusst dunkel. */
:root[data-theme="light"] {
    --bg:        #f2f0ea;
    --bg-raise:  #faf9f5;
    --card:      #ffffff;
    --card-edge: #e6e2d8;
    --line:      #e2ddd2;
    --ink:       #191e25;
    --ink-dim:   #59616c;
    --ink-faint: #8a919c;
    --brand:        #1863dc;
    --brand-strong: #1863dc;

    --ok:        #1d9e54;
    --ok-soft:   rgba(29, 158, 84, .12);
    --pause:     #b97e10;
    --pause-soft:rgba(185, 126, 16, .14);
    --off:       #9aa2ad;
    --off-soft:  rgba(90, 100, 112, .12);
    --danger:    #d33338;

    --topbar-bg: rgba(250, 249, 245, .85);
    color-scheme: light;
}

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

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Impersonation-Banner (Betreiber als Firma angemeldet) */
.imp-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-strong);
    position: relative;
    z-index: 60;
}

.imp-banner a { color: #fff; text-decoration: underline; white-space: nowrap; }

/* Terminal (feste Vollbildhöhe): Platz für das Banner reservieren */
body.terminal.impersonating .layout {
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
}

/* Betreiber-Bereich: Seitenleisten-Layout siehe admin.css (.betreiber-shell/.side) */