:root {
    --papier:        #f7f7f8;
    --papier-hell:   #ffffff;
    --raster:        #ececef;
    --tinte:         #1a1a1e;
    --tinte-schwach: #6b6b74;
    --linie:         #d8d8dd;
    --fokus:         #0047ab;
    --gruen:         #1e7a1e;
    --rot:           #b8202f;
    --grau:          #9a9aa2;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --papier:        #17171b;
        --papier-hell:   #202024;
        --raster:        #26262c;
        --tinte:         #eeeef0;
        --tinte-schwach: #a3a3ad;
        --linie:         #34343c;
        --gruen:         #5fc75f;
        --rot:           #ff7a7a;
        --grau:          #6b6b74;
    }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }

.kopf {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--linie);
    background: var(--papier-hell);
}
.marke { font-weight: 700; text-decoration: none; font-size: 16px; }
.marke span { font-weight: 400; color: var(--tinte-schwach); }
.kopf nav { display: flex; gap: 16px; margin-right: auto; }
.kopf nav a { text-decoration: none; color: var(--tinte-schwach); }
.kopf nav a:hover { color: var(--tinte); }
.kopf-rechts { display: flex; align-items: center; gap: 12px; }
.wer { color: var(--tinte-schwach); font-size: 13px; }

.inhalt { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.mitte.schmal { max-width: 460px; margin: 0 auto; }

.kopfzeile-seite { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.kopfzeile-seite h1 { margin: 0; }

.karte {
    background: var(--papier-hell);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.karte-schluessel { border-color: var(--gruen); }
.karte-gefahr { border-color: var(--rot); }

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }

.feld-label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 4px; }
.feld-label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--linie);
    border-radius: 5px;
    background: var(--papier);
    color: var(--tinte);
    font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: 1px; }
textarea { resize: vertical; }

.knopf-haupt, .knopf, .knopf-klein, .knopf-gefahr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--papier-hell);
    color: var(--tinte);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.knopf-haupt { margin-top: 18px; background: var(--tinte); color: var(--papier-hell); border-color: var(--tinte); }
.knopf-klein { min-height: 32px; padding: 5px 12px; font-weight: 500; font-size: 13px; }
.knopf-gefahr { color: var(--rot); border-color: var(--rot); }
.knopf-gefahr:hover { background: var(--rot); color: #fff; }

.zeile { display: inline-block; margin: 6px 10px 0 0; }

.hinweis { color: var(--tinte-schwach); font-size: 13px; }
.fein { color: var(--tinte-schwach); font-size: 12px; }

.meldung { padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.meldung-fehler { background: color-mix(in srgb, var(--rot) 15%, transparent); color: var(--rot); }
.meldung-erfolg { background: color-mix(in srgb, var(--gruen) 15%, transparent); color: var(--gruen); }

.schluessel-wert {
    display: block;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--raster);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    word-break: break-all;
    user-select: all;
}

table.liste, table.details { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td, table.details th, table.details td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linie);
}
table.liste th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-schwach); }
table.details th { width: 160px; color: var(--tinte-schwach); font-weight: 500; }

.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.punkt-gruen { background: var(--gruen); }
.punkt-grau  { background: var(--grau); }

.abzeichen { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--linie); }
.abzeichen-produktiv { border-color: var(--gruen); color: var(--gruen); }
.abzeichen-test      { border-color: var(--tinte-schwach); color: var(--tinte-schwach); }
.abzeichen-inaktiv   { border-color: var(--rot); color: var(--rot); }
.abzeichen-abgelaufen{ border-color: var(--rot); color: var(--rot); }

.kontrollkaestchen { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.kontrollkaestchen input { width: auto; }