:root {
    --grund: #fbfbfa;
    --karte: #fff;
    --linie: #e3e3e0;
    --text: #1c1c1a;
    --gedaempft: #6b6b66;
    --akzent: #2b5c3f;
    --warn: #8a4b12;
    --warn-grund: #fdf3e7;
    --fehler: #9b2c2c;
    --hinweis-grund: #eef2f7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1rem 4rem;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 46rem; margin: 0 auto; }

.topbar {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 0 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--linie);
}

h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .6rem; font-weight: 600; }

section {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .3rem; border-bottom: 1px solid var(--linie); }
tfoot td { border-bottom: none; font-weight: 600; }
th { font-weight: 600; color: var(--gedaempft); font-size: .85rem; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.hervor td { font-weight: 600; }

.muted { color: var(--gedaempft); }
.klein { font-size: .82rem; }
.ok { color: var(--akzent); }
.fehler { color: var(--fehler); }

.warnung, .hinweis {
    border-radius: .5rem;
    padding: .8rem 1rem;
    margin: 1.25rem 0 0;
}
.warnung { background: var(--warn-grund); border: 1px solid #e8c9a0; color: var(--warn); }
.hinweis { background: var(--hinweis-grund); border: 1px solid #d3dce8; }

code { font-size: .88em; background: #00000010; padding: .1em .35em; border-radius: .25rem; }

button.link {
    background: none; border: none; padding: 0;
    color: var(--gedaempft); text-decoration: underline; cursor: pointer; font-size: .9rem;
}

/* Ein Formular, das mitten im Satz stehen soll - der Knopf ist dort ein Wort. */
.einzeilig { display: inline; }

.login {
    max-width: 21rem;
    margin: 6rem auto 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: .5rem;
    padding: 1.75rem;
}
.login h1 { margin-bottom: .2rem; }
.login label { display: block; margin: 1.25rem 0 .3rem; font-size: .9rem; }
.login input {
    width: 100%; padding: .55rem .6rem;
    border: 1px solid var(--linie); border-radius: .35rem; font-size: 1rem;
}
.login button[type=submit] {
    width: 100%; margin-top: 1rem; padding: .6rem;
    background: var(--akzent); color: #fff;
    border: none; border-radius: .35rem; font-size: 1rem; cursor: pointer;
}
.error { color: var(--fehler); margin: 1rem 0 0; font-size: .9rem; }

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #161614; --karte: #1e1e1c; --linie: #34342f;
        --text: #e8e8e4; --gedaempft: #a0a099; --akzent: #7fbf9a;
        --warn: #e0b080; --warn-grund: #2a2118;
        --fehler: #e08a8a; --hinweis-grund: #1b2028;
    }
    .warnung { border-color: #4a3a24; }
    .hinweis { border-color: #2a3340; }
    .login input { background: #161614; color: var(--text); }
    .login button[type=submit] { color: #14201a; }
    code { background: #ffffff14; }
}

/* --- App-Einstellungen --- */
.topbar nav { display: flex; align-items: baseline; gap: 1rem; }
.topbar nav a { color: var(--gedaempft); font-size: .9rem; }
.topbar nav a.aktiv { color: var(--text); font-weight: 600; }

.marke {
    font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
    background: #00000010; color: var(--gedaempft);
    padding: .15em .5em; border-radius: .25rem; vertical-align: middle;
}
.marke.warn { background: var(--warn-grund); color: var(--warn); }

/* Zu welcher App eine Rezension gehört - überall gleich, damit man es beim
   Durchblättern nicht suchen muss. */
.app {
    font-size: .8rem; font-weight: 600;
    background: #00000010; color: var(--text);
    padding: .15em .5em; border-radius: .25rem; vertical-align: middle;
}

section label { display: block; margin: 1rem 0 .3rem; font-size: .85rem; color: var(--gedaempft); }
section textarea, section input[type=text] {
    width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
    border: 1px solid var(--linie); border-radius: .35rem;
    background: var(--grund); color: var(--text);
}
section textarea { resize: vertical; }
.schalter label { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .95rem; }
.schalter input { margin: 0; }

section button[type=submit] {
    margin-top: 1rem; padding: .45rem 1rem;
    background: var(--akzent); color: #fff;
    border: none; border-radius: .35rem; font-size: .95rem; cursor: pointer;
}

.fuss { margin-top: 1.5rem; text-align: center; }

@media (prefers-color-scheme: dark) {
    .marke, .app { background: #ffffff14; }
    section button[type=submit] { color: #14201a; }
}

/* --- Warteschlange und Einzelansicht --- */
.kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 .7rem; }

.sterne { color: #c9820a; letter-spacing: .06em; font-size: 1rem; }
.sterne .leer { color: var(--linie); }

blockquote {
    margin: 0; padding: .7rem .9rem;
    background: var(--grund); border-left: 3px solid var(--linie);
    border-radius: 0 .35rem .35rem 0;
    font-size: .95rem;
}

.entwurf {
    margin: .9rem 0 0; padding: .7rem .9rem;
    background: var(--karte); border: 1px solid var(--akzent);
    border-radius: .35rem; font-size: .95rem;
}
/* Die deutsche Fassung steht unter dem Original und ordnet sich ihm
   erkennbar unter - gesendet wird das Original. */
.uebersetzung {
    margin: .4rem 0 0; padding: .5rem .9rem;
    border-left: 2px solid var(--linie);
    font-size: .92rem; color: var(--gedaempft);
}
.uebersetzung .marke { margin-right: .4rem; }

.entwurf.gesendet { border-color: var(--linie); }
.entwurf.alt { border-color: var(--linie); opacity: .65; }

section.heikel { border-left: 3px solid var(--warn); }
section.stillgelegt { opacity: .6; }

.aktionen { margin: 1rem 0 0; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.nebenaktionen { margin-top: .9rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }

a.knopf, section button[type=submit] {
    display: inline-block;
    padding: .45rem 1rem;
    background: var(--akzent); color: #fff;
    border: none; border-radius: .35rem;
    font-size: .95rem; text-decoration: none; cursor: pointer;
}
button.zweitrangig {
    background: transparent !important; color: var(--gedaempft) !important;
    border: 1px solid var(--linie) !important;
}

.zaehler { margin: .35rem 0 0; }
.zaehler.zuviel { color: var(--fehler); font-weight: 600; }

.regeln { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.regeln li { margin-bottom: .35rem; }

.regelzeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.regelzeile select, .filter select {
    padding: .35rem .5rem; font: inherit; font-size: .9rem;
    border: 1px solid var(--linie); border-radius: .35rem;
    background: var(--grund); color: var(--text);
}

.filter { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* In der Filterzeile steht der Knopf neben dem Feld, nicht darunter. */
.filter button[type=submit] { margin-top: 0; padding: .35rem .8rem; font-size: .9rem; }

/* Für Beschriftungen, die nur Screenreader brauchen. */
.visuell-versteckt {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.blaettern { display: flex; justify-content: center; gap: 1.25rem; align-items: baseline; margin-top: 1.25rem; }

@media (prefers-color-scheme: dark) {
    .sterne { color: #d9a441; }
    a.knopf, section button[type=submit] { color: #14201a; }
}

/* --- Einrichtungsprüfung --- */
.pruefungen td { vertical-align: top; padding: .5rem .3rem; }
.pruefungen .zeichen { width: 1.6rem; text-align: center; font-weight: 700; }
.pruefungen tr.p-ok .zeichen { color: var(--akzent); }
.pruefungen tr.p-warnung .zeichen { color: var(--warn); }
.pruefungen tr.p-fehler .zeichen { color: var(--fehler); }

.hinweistext {
    margin-top: .35rem; padding: .5rem .7rem;
    background: var(--grund); border-radius: .35rem;
    font-size: .85rem; color: var(--gedaempft);
}