/* Der Betreiberbereich (WP-71). Bewusst schlicht: fünf Masken für zwei Leute. */
:root {
  --grund: #16181c;
  --flaeche: #1e2128;
  --schrift: #e9e6df;
  --leise: #9aa0a8;
  --linie: #313640;
  --marke: #c8892b;   /* ocker — nicht das Grün des Produkts */
  --warnung: #d2694a;
  --gut: #6fae7a;
}

* { box-sizing: border-box; }

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

header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.5rem;
  background: var(--flaeche);
  border-bottom: 3px solid var(--marke);
}

header nav { display: flex; gap: 1.25rem; }
header .rechts { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
header .wer { color: var(--leise); }

a { color: var(--marke); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }

table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--leise); font-weight: 600; }
td.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.punkt { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; }
.punkt.an { background: var(--gut); }
.punkt.aus { background: var(--leise); }
.punkt.weg { background: var(--warnung); }

form.reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .5rem 0 1.5rem; }
label { display: flex; flex-direction: column; gap: .25rem; color: var(--leise); font-size: .85rem; }

input, select, textarea {
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--linie); border-radius: 2px;
  padding: .4rem .5rem; font: inherit;
}
input:focus, select:focus, textarea:focus, button:focus { outline: 2px solid var(--marke); outline-offset: 1px; }

button {
  background: var(--marke); color: #16181c; border: 1px solid var(--marke);
  border-radius: 2px; padding: .45rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
}
button.leise { background: transparent; color: var(--leise); border-color: var(--linie); font-weight: 400; }
button.warnung { background: transparent; color: var(--warnung); border-color: var(--warnung); }

.meldung { border-left: 3px solid var(--gut); padding: .6rem .8rem; background: var(--flaeche); }
.fehler { border-left: 3px solid var(--warnung); padding: .6rem .8rem; background: var(--flaeche); }
.leisetext { color: var(--leise); }
code { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 2px; padding: 0 .25rem; font-size: .9em; }

pre.token {
  background: var(--flaeche); border: 1px solid var(--linie); padding: .8rem;
  white-space: pre-wrap; word-break: break-all; font-size: .8rem;
}

footer { color: var(--leise); text-align: center; padding: 2rem 1rem; font-size: .85rem; }

.anmeldung { max-width: 26rem; }
.anmeldung form { display: flex; flex-direction: column; gap: .75rem; }
.anmeldung label { font-size: .9rem; }
.anmeldung input { width: 100%; }

/* Die Haken für die Module (WP-72.1) — nebeneinander, weil es fünf sind. */
fieldset.haken { border: 1px solid var(--linie); border-radius: 2px; padding: .4rem .7rem .6rem; margin: 0; }
fieldset.haken legend { color: var(--leise); font-size: .85rem; padding: 0 .3rem; }
label.waagrecht { flex-direction: row; align-items: baseline; gap: .4rem; color: var(--schrift); font-size: .95rem; margin-right: .9rem; display: inline-flex; }
label.waagrecht input { margin: 0; }

/* --- Aufgeräumt (WP-74.3) ----------------------------------------------
   Der Bereich ist über sieben Seiten gewachsen, und jede trug dieselbe
   Dichte: Überschrift, Tabelle, Formular. Was fehlte, war der Satz, der
   sagt, wofür eine Seite da ist, und ein Unterschied zwischen dem, was man
   täglich tut, und dem, was man im Zwischenfall tut. */

.lead { color: var(--leise); margin: -.4rem 0 1.2rem; max-width: 70ch; }

header nav .trenner {
  width: 1px; align-self: stretch; background: var(--linie); margin: -.2rem .4rem;
}

h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; font-weight: 600; }
h3 .leisetext { font-weight: 400; font-size: .85rem; margin-left: .5rem; }

/* Eine Marke für einen Zustand, der eine gute Nachricht ist. */
.marke {
  display: inline-block; margin-left: .6rem; padding: .1rem .45rem;
  border: 1px solid var(--gut); border-radius: 2px;
  color: var(--gut); font-size: .75rem; font-weight: 600; vertical-align: middle;
}

/* Die Zahlen oben auf der Startseite. */
.ueberblick { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 1.5rem; }
.ueberblick div { display: flex; flex-direction: column; }
.ueberblick .zahl { font-size: 1.5rem; font-variant-numeric: tabular-nums; text-align: left; }
.ueberblick .was { color: var(--leise); font-size: .8rem; }

/* Der seltene Weg, zugeklappt (WP-74.4). */
details { margin: .2rem 0 1.5rem; }
details > summary {
  cursor: pointer; color: var(--leise); font-size: .9rem;
  padding: .3rem 0; list-style-position: inside;
}
details > summary:hover { color: var(--schrift); }
details[open] > summary { margin-bottom: .4rem; }