:root { color-scheme: light dark; }

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
}

main { max-width: 55rem; margin: 0 auto; padding: 1.5rem; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.5rem;
    border-bottom: 1px solid #ccc;
}

.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar form { margin: 0; }

a { color: inherit; }

button, .button {
    display: inline-block;
    padding: .5rem .9rem;
    border: 1px solid #666;
    border-radius: .25rem;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

button.link { border: 0; padding: 0; text-decoration: underline; }

.cards { display: flex; gap: 1rem; flex-wrap: wrap; }

.card {
    flex: 1 1 15rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    text-decoration: none;
}

.card h2 { margin-top: 0; }

fieldset { margin: 0 0 1rem; border: 1px solid #ccc; border-radius: .25rem; }
fieldset label { display: block; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: .4rem .6rem; text-align: left; vertical-align: top; }

.state { font-weight: bold; }
.state-connected { color: #1a7f37; }
.state-missing { color: #b26a00; }
.state-closed { color: #666; }

.hint { color: #666; font-size: .9rem; }
.error { color: #b3261e; }
.ok { color: #1a7f37; }

/* Lockdown-Status auf dem Aufsicht-Dashboard. */
.lockdown-active { color: #1a7f37; }
.lockdown-degraded { color: #b26a00; }
.lockdown-inactive { color: #b3261e; font-weight: bold; }