/* Betriebskonsole — Modus B „Olive Matte“ des specificon-UI-Standards
   (~/Projects/moneypenny-vault/standards/specificon-ui-system.md): Admin, Einstellungen,
   Kontrolle. Die Farbwerte sind aus register/entscheidungen.vorlage.html übernommen,
   nicht nachempfunden — 3M hat dieses Muster am 11.09.2026 bestätigt. */

:root {
  --grund: #F0F2EB;
  --flaeche: #F7F8F4;
  --flaeche-2: #E8EBE0;
  --kopf: #3A4428;
  --kopf-tief: #2C3520;
  --kopf-text: #F5F6F0;
  --kopf-leise: #C9D0B8;
  --text: #1E2416;
  --leise: #56604A;
  --linie: #BFC8AE;
  --linie-leise: #D6DCCB;
  --akzent: #7A9B5C;
  --akzent-tief: #5E7C43;
  --akzent-text: #FFFFFF;
  --akzent-hauch: #E3EAD8;
  --kritisch: #B42318;
  --kritisch-hauch: #F8E4E1;
  --warn: #8A5A00;
  --warn-hauch: #F5EBD3;
  --fokus: #5E7C43;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #171C11;
    --flaeche: #20271A;
    --flaeche-2: #2A3222;
    --kopf: #2C3520;
    --kopf-tief: #1E2416;
    --kopf-text: #F5F6F0;
    --kopf-leise: #AEB79C;
    --text: #E9ECE1;
    --leise: #A6AF97;
    --linie: #46503A;
    --linie-leise: #353E2B;
    --akzent: #8FB06F;
    --akzent-tief: #A7C68A;
    --akzent-text: #171C11;
    --akzent-hauch: #2E3A24;
    --kritisch: #F08A7E;
    --kritisch-hauch: #3A1F1B;
    --warn: #E2B45A;
    --warn-hauch: #352B16;
    --fokus: #A7C68A;
  }
}
:root[data-theme="dark"] {
  --grund: #171C11;
  --flaeche: #20271A;
  --flaeche-2: #2A3222;
  --kopf: #2C3520;
  --kopf-tief: #1E2416;
  --kopf-text: #F5F6F0;
  --kopf-leise: #AEB79C;
  --text: #E9ECE1;
  --leise: #A6AF97;
  --linie: #46503A;
  --linie-leise: #353E2B;
  --akzent: #8FB06F;
  --akzent-tief: #A7C68A;
  --akzent-text: #171C11;
  --akzent-hauch: #2E3A24;
  --kritisch: #F08A7E;
  --kritisch-hauch: #3A1F1B;
  --warn: #E2B45A;
  --warn-hauch: #352B16;
  --fokus: #A7C68A;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 14px/1.5 var(--schrift); -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 900px; margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
button { font: inherit; }

/* ── Kopf ──────────────────────────────────────────── */
.kopf { background: var(--kopf); color: var(--kopf-text); border-bottom: 1px solid var(--kopf-tief); }
.kopf .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: flex-end; justify-content: space-between; padding-block: 22px 18px; }
.kopf .label { color: var(--kopf-leise); }
.kopf h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.kopf h1 a { text-decoration: none; }
.kopf .lead { margin: 6px 0 0; max-width: 62ch; color: var(--kopf-leise); font-size: 13.5px; }
.zaehler { display: flex; gap: 24px; margin: 0; }
.zaehler div { display: grid; gap: 2px; }
.zaehler dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kopf-leise); }
.zaehler dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

main { padding-block: 24px 64px; }
section + section { margin-top: 32px; }
section > h2 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 10px; }

/* ── Karten in der Liste ───────────────────────────── */
.karte {
  display: block; text-decoration: none; background: var(--flaeche);
  border: 1px solid var(--linie-leise); border-left: 3px solid var(--linie);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px;
}
.karte:hover { border-color: var(--linie); background: var(--flaeche-2); }
.karte.kritisch { border-left-color: var(--kritisch); }
.karte.entscheidung { border-left-color: var(--warn); }
.karte.info { border-left-color: var(--akzent); }
.karte.entwarnung { border-left-color: var(--akzent); }
.karte .zeile { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; justify-content: space-between; }
.karte .titel { font-weight: 600; font-size: 15px; }
.karte .unter { color: var(--leise); font-size: 12.5px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.leer { color: var(--leise); padding: 14px; border: 1px dashed var(--linie); border-radius: var(--r); }

.merker {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: var(--flaeche-2); color: var(--leise);
  border: 1px solid var(--linie-leise); white-space: nowrap;
}
.merker.kritisch { background: var(--kritisch-hauch); color: var(--kritisch); border-color: transparent; }
.merker.entscheidung { background: var(--warn-hauch); color: var(--warn); border-color: transparent; }
.merker.auftrag { background: var(--warn-hauch); color: var(--warn); border-color: transparent; }
.merker.info, .merker.entwarnung { background: var(--akzent-hauch); color: var(--akzent-tief); border-color: transparent; }

/* ── Kartenblatt ───────────────────────────────────── */
.blatt { background: var(--flaeche); border: 1px solid var(--linie-leise); border-radius: var(--r); padding: 20px; }
.blatt + .blatt { margin-top: 16px; }
.blatt h2 { font-size: 17px; margin-bottom: 10px; }
.befund { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; background: var(--flaeche-2); border-radius: var(--r); padding: 12px; margin: 0; overflow-x: auto; }
dl.paare { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
dl.paare dt { color: var(--leise); font-size: 12.5px; }
dl.paare dd { margin: 0; font-size: 13.5px; }

.optionen { display: grid; gap: 10px; margin-top: 4px; }
.option { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; border: 1px solid var(--linie-leise); border-radius: var(--r); padding: 12px 14px; background: var(--grund); }
.option.vorbelegt { border-color: var(--akzent); background: var(--akzent-hauch); }
.option .wirkung { grid-column: 1; color: var(--leise); font-size: 12.5px; }
.option strong { font-size: 14px; }
.option button { grid-column: 2; grid-row: 1 / span 2; border: 1px solid var(--akzent-tief); background: var(--akzent); color: var(--akzent-text); border-radius: var(--r); padding: 8px 16px; font-weight: 600; cursor: pointer; }
.option button:hover { background: var(--akzent-tief); }
.option.gelb button { background: var(--warn); border-color: var(--warn); color: #fff; }
textarea, input[type=password] {
  width: 100%; font: inherit; color: var(--text); background: var(--grund);
  border: 1px solid var(--linie); border-radius: var(--r); padding: 9px 10px;
}
textarea { min-height: 64px; resize: vertical; }

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--linie-leise); }
.verlauf li:first-child { border-top: 0; }
.verlauf time { color: var(--leise); font-family: var(--mono); font-size: 12px; }
.verlauf .art { color: var(--leise); }
.verlauf li.misslungen .art { color: var(--kritisch); }
.verlauf li.gegenprobe .art { color: var(--akzent-tief); }

details > summary { cursor: pointer; color: var(--leise); font-size: 13px; padding: 6px 0; }
.fuss { color: var(--leise); font-size: 12.5px; margin-top: 40px; border-top: 1px solid var(--linie-leise); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }

@media (max-width: 600px) {
  .option { grid-template-columns: 1fr; }
  .option button { grid-column: 1; grid-row: auto; }
  .verlauf li { grid-template-columns: 1fr; gap: 2px; }
}