/* Oberfläche der Technik.
 *
 * Eine Werkstatt, kein Produkt: dicht, ruhig, und die Zahlen lesbar aus
 * einem Meter Abstand. Farbe trägt Bedeutung und sonst nichts – grün heißt
 * online, bernstein heißt auffällig, rot heißt Fehler. Alles andere ist grau.
 */

:root {
    color-scheme: light dark;

    --grund:      #f4f3f0;
    --flaeche:    #ffffff;
    --flaeche-2:  #eceae5;
    --rand:       #d8d5cd;
    --schrift:    #1c1b19;
    --gedaempft:  #6b6862;

    --gut:        #2f7d4f;
    --gut-grund:  #e3f0e6;
    --warn:       #9a6206;
    --warn-grund: #f8ecd8;
    --fehler:     #a32b21;
    --fehler-grund:#f7e3e0;
    --betont:     #1f5673;

    --radius: 6px;
    --schmal: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:      #16181a;
        --flaeche:    #1e2124;
        --flaeche-2:  #262a2e;
        --rand:       #343a3f;
        --schrift:    #e6e4e0;
        --gedaempft:  #9a9791;

        --gut:        #63b884;
        --gut-grund:  #1c2f24;
        --warn:       #d9a441;
        --warn-grund: #322818;
        --fehler:     #e2766a;
        --fehler-grund:#331e1c;
        --betont:     #6fa8c7;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--schrift);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--betont); }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

header.oben {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}
header.oben .marke { font-weight: 650; letter-spacing: -0.01em; }
header.oben .marke span { color: var(--gedaempft); font-weight: 400; }
header.oben nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
header.oben nav a { text-decoration: none; color: var(--gedaempft); }
header.oben nav a.hier, header.oben nav a:hover { color: var(--schrift); }
header.oben .wer { color: var(--gedaempft); font-size: var(--schmal); }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

h1 { font-size: 1.35rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1rem; margin: 2rem 0 0.75rem; letter-spacing: -0.005em; }
h2:first-of-type { margin-top: 0; }
h2 .zahl { color: var(--gedaempft); font-weight: 400; }

/* ── Flächen ───────────────────────────────────────────────────────────── */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
}
.karte + .karte { margin-top: 0.75rem; }

.leer {
    color: var(--gedaempft);
    padding: 1.25rem;
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
    text-align: center;
}

/* ── Zustand ───────────────────────────────────────────────────────────── */

.marke-zustand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--schmal); font-weight: 550;
    padding: 0.15rem 0.5rem; border-radius: 99px;
}
.marke-zustand::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.online  { color: var(--gut);    background: var(--gut-grund); }
.offline { color: var(--gedaempft); background: var(--flaeche-2); }
.warnt   { color: var(--warn);   background: var(--warn-grund); }
.stoerung{ color: var(--fehler); background: var(--fehler-grund); }

/* ── Messwerte ─────────────────────────────────────────────────────────── */

.messwerte {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    background: var(--rand);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
}
.messwert { background: var(--flaeche); padding: 0.7rem 0.85rem; }
.messwert .name { font-size: var(--schmal); color: var(--gedaempft); }
.messwert .wert {
    font-size: 1.45rem; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    margin-top: 0.1rem;
}
.messwert .wert .einheit {
    font-size: 0.8rem; font-weight: 400; color: var(--gedaempft); margin-left: 0.15rem;
}
.messwert .nummer { font-size: 0.7rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.messwert.auffaellig { background: var(--warn-grund); }
.messwert.auffaellig .wert { color: var(--warn); }
.messwert.fehlt .wert { color: var(--gedaempft); font-weight: 400; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
th, td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rand); }
th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gedaempft); font-weight: 600; background: var(--flaeche-2);
}
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.dick { font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--schmal); }

/* ── Angaben ───────────────────────────────────────────────────────────── */

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.angaben dt { color: var(--gedaempft); font-size: var(--schmal); }
dl.angaben dd { margin: 0; }

/* ── Bedienung ─────────────────────────────────────────────────────────── */

.knopf {
    display: inline-block; cursor: pointer;
    font: inherit; font-size: var(--schmal); font-weight: 550;
    padding: 0.4rem 0.85rem; border-radius: var(--radius);
    border: 1px solid var(--rand); background: var(--flaeche-2);
    color: var(--schrift); text-decoration: none;
}
.knopf:hover { border-color: var(--gedaempft); }
.knopf.haupt { background: var(--betont); border-color: var(--betont); color: #fff; }
.knopf.gefahr { color: var(--fehler); border-color: var(--fehler); background: transparent; }
.knopf-reihe { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

input[type=text], input[type=email], input[type=password], input[type=number] {
    font: inherit; padding: 0.45rem 0.6rem;
    border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--grund); color: var(--schrift);
}
input:focus-visible, .knopf:focus-visible, a:focus-visible {
    outline: 2px solid var(--betont); outline-offset: 2px;
}
label { display: block; font-size: var(--schmal); color: var(--gedaempft); margin-bottom: 0.2rem; }

/* ── Meldungen ─────────────────────────────────────────────────────────── */

.meldung {
    padding: 0.7rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--rand); margin-bottom: 1rem;
}
.meldung.gut      { background: var(--gut-grund);   border-color: var(--gut);   color: var(--gut); }
.meldung.schlecht { background: var(--fehler-grund);border-color: var(--fehler);color: var(--fehler); }
.meldung.code {
    background: var(--flaeche); border-color: var(--betont);
    color: var(--schrift);
}
.meldung.code strong {
    display: block; font-family: ui-monospace, monospace;
    font-size: 1.5rem; letter-spacing: 0.08em; margin: 0.3rem 0;
}

/* ── Anmelden ──────────────────────────────────────────────────────────── */

.anmelden { max-width: 340px; margin: 12vh auto; }
.anmelden .karte > * + * { margin-top: 0.9rem; }
.anmelden input { width: 100%; }

/* ── Verlauf ───────────────────────────────────────────────────────────── */

.verlauf { width: 100%; height: 90px; display: block; }

@media (max-width: 600px) {
    dl.angaben { grid-template-columns: 1fr; gap: 0 0; }
    dl.angaben dd { margin-bottom: 0.5rem; }
    header.oben { gap: 0.75rem; }
}