/*
 * Lizenzzentrale – Oberfläche. Nur Design-Tokens (--lz-*), keine externen
 * Quellen (CSP: keine Webfonts/CDNs). Systemschrift, helles und dunkles Schema.
 */
:root {
    --lz-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lz-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --lz-tinte: #1d2430;
    --lz-tinte-leise: #5b6576;
    --lz-flaeche: #f4f5f7;
    --lz-papier: #ffffff;
    --lz-linie: #dde1e7;
    --lz-primaer: #1f5fbf;
    --lz-primaer-text: #ffffff;
    --lz-gut: #1e7a46;
    --lz-warnung: #9a6200;
    --lz-schlecht: #b3261e;
    --lz-radius: 6px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --lz-tinte: #e6e9ee; --lz-tinte-leise: #a3acba; --lz-flaeche: #14171c; --lz-papier: #1c2027;
        --lz-linie: #2e343e; --lz-primaer: #6ea1f0; --lz-primaer-text: #0c1320;
        --lz-gut: #5cc48a; --lz-warnung: #e0a84a; --lz-schlecht: #f07a72;
    }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--lz-schrift); color: var(--lz-tinte); background: var(--lz-flaeche); font-variant-numeric: tabular-nums; }
a { color: var(--lz-primaer); }
:focus-visible { outline: 3px solid var(--lz-primaer); outline-offset: 2px; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
code, .mono { font-family: var(--lz-mono); font-size: .9em; }
.kopfleiste { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; padding: .6rem 1.25rem; background: var(--lz-papier); border-bottom: 1px solid var(--lz-linie); }
.marke { font-weight: 750; text-decoration: none; color: var(--lz-tinte); }
.navigation { display: flex; gap: .25rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; flex: 1; }
.navigation a { display: block; padding: .3rem .6rem; border-radius: var(--lz-radius); text-decoration: none; color: var(--lz-tinte-leise); }
.navigation a[aria-current="page"], .navigation a:hover { background: var(--lz-flaeche); color: var(--lz-tinte); }
main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.schmal { max-width: 560px; }
.karte { background: var(--lz-papier); border: 1px solid var(--lz-linie); border-radius: var(--lz-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kachel { background: var(--lz-papier); border: 1px solid var(--lz-linie); border-radius: var(--lz-radius); padding: .9rem 1rem; }
.kachel .zahl { font-size: 1.6rem; font-weight: 700; }
.kachel .text { color: var(--lz-tinte-leise); font-size: .85rem; }
.tabelle-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--lz-papier); }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--lz-linie); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lz-tinte-leise); font-weight: 600; }
tr:hover td { background: color-mix(in srgb, var(--lz-primaer) 4%, transparent); }
td.zahl, th.zahl { text-align: right; }
.marke-status { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .8rem; border: 1px solid currentColor; }
.status-aktiv, .status-bezahlt, .status-erledigt { color: var(--lz-gut); }
.status-test, .status-schonfrist, .status-gekuendigt, .status-offen { color: var(--lz-warnung); }
.status-gesperrt, .status-abgelaufen, .status-fehlgeschlagen { color: var(--lz-schlecht); }
form.reihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
label { display: block; font-size: .85rem; color: var(--lz-tinte-leise); margin-bottom: .2rem; }
.feld { margin-bottom: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
    width: 100%; padding: .45rem .55rem; font: inherit; color: var(--lz-tinte); background: var(--lz-papier);
    border: 1px solid var(--lz-linie); border-radius: var(--lz-radius);
}
form.reihe input, form.reihe select { width: auto; }
.auswahl { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.auswahl input { margin-top: .3rem; }
.auswahl label { color: var(--lz-tinte); font-size: .95rem; margin: 0; }
.knopf { display: inline-block; padding: .45rem .9rem; font: inherit; font-weight: 600; border-radius: var(--lz-radius); border: 1px solid var(--lz-primaer);
    background: var(--lz-primaer); color: var(--lz-primaer-text); cursor: pointer; text-decoration: none; }
.knopf-rand { background: transparent; color: var(--lz-primaer); }
.knopf-gefahr { background: transparent; color: var(--lz-schlecht); border-color: var(--lz-schlecht); }
.meldung { padding: .6rem .9rem; border-radius: var(--lz-radius); margin-bottom: 1rem; background: color-mix(in srgb, var(--lz-gut) 12%, var(--lz-papier)); border: 1px solid var(--lz-gut); }
.fehler { padding: .6rem .9rem; border-radius: var(--lz-radius); margin-bottom: 1rem; background: color-mix(in srgb, var(--lz-schlecht) 10%, var(--lz-papier)); border: 1px solid var(--lz-schlecht); }
.fehler ul { margin: 0; padding-left: 1.1rem; }
.token { font-family: var(--lz-mono); word-break: break-all; padding: .6rem; background: var(--lz-flaeche); border: 1px dashed var(--lz-linie); border-radius: var(--lz-radius); user-select: all; }
.leise { color: var(--lz-tinte-leise); font-size: .875rem; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
dl.angaben dt { color: var(--lz-tinte-leise); }
dl.angaben dd { margin: 0; }
pre.json { font-family: var(--lz-mono); font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; background: var(--lz-flaeche); padding: .75rem; border-radius: var(--lz-radius); }
nav[role=navigation] svg { width: 1rem; height: 1rem; }