/* Bewusst wenig: eine Konfigurationsoberfläche für einige wenige Seiten
   braucht kein Framework. Hell und dunkel folgen der Einstellung des Geräts. */

:root {
  --grund: #f6f7f9;
  --karte: #ffffff;
  --text: #1c2024;
  --leise: #5f6b76;
  --linie: #d9dee3;
  --akzent: #1f5fa8;
  --akzent-text: #ffffff;
  --gut: #1b6b3a;
  --gut-grund: #e6f4ec;
  --warn: #8a5a00;
  --warn-grund: #fdf3e0;
  --schlecht: #a32b2b;
  --schlecht-grund: #fbeaea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #15181c;
    --karte: #1e2227;
    --text: #e7eaee;
    --leise: #9aa4b0;
    --linie: #333a42;
    --akzent: #6aa9f0;
    --akzent-text: #10141a;
    --gut: #7bd39c;
    --gut-grund: #16301f;
    --warn: #e0b25f;
    --warn-grund: #33280f;
    --schlecht: #f0918d;
    --schlecht-grund: #351a1a;
  }
}

* { box-sizing: border-box; }

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

header {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
}

nav a { color: var(--leise); text-decoration: none; }
nav a:hover { color: var(--text); }
nav .marke { font-weight: 600; color: var(--text); margin-right: 0.5rem; }
nav .rechts { margin-left: auto; }

main { max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
main.schmal { max-width: 26rem; padding-top: 4rem; }

a { color: var(--akzent); }
main a:hover { color: var(--text); }

h1 { font-size: 1.6rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
p.einleitung { color: var(--leise); margin: 0 0 1.75rem; }

section, .karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
section > h2:first-child, .karte > h2:first-child { margin-top: 0; }

/* --- Formulare --------------------------------------------------------- */

.feld { margin: 0 0 1.1rem; }
.feld label { display: block; font-weight: 500; margin-bottom: 0.3rem; }
.feld.haken label { font-weight: 400; }
.feld small { display: block; color: var(--leise); font-size: 0.85rem; margin-top: 0.3rem; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], textarea, select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
input[type=checkbox] { width: auto; margin-right: 0.4rem; }
textarea { resize: vertical; }
textarea.fest { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9rem; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 40rem) { .zweispaltig { grid-template-columns: 1fr; } }

button, .knopf {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.schlicht, .knopf.schlicht {
  background: transparent;
  color: var(--leise);
  border-color: var(--linie);
}
button.schlicht:hover { color: var(--text); }
button.gefahr { background: transparent; color: var(--schlecht); border-color: var(--schlecht); }

/* --- Meldungen --------------------------------------------------------- */

.meldung { padding: 0.7rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.meldung.ok { background: var(--gut-grund); color: var(--gut); }
.meldung.warnung { background: var(--warn-grund); color: var(--warn); }
.meldung.fehler { background: var(--schlecht-grund); color: var(--schlecht); }

/* --- Schalter und Listen ------------------------------------------------ */

.schalterzeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}
.schalterzeile:last-child { border-bottom: 0; }
.schalterzeile > div:first-child { flex: 1 1 22rem; min-width: 0; }
.schalterzeile .titel { font-weight: 500; }
.schalterzeile .beschreibung { color: var(--leise); font-size: 0.9rem; }
.schalterzeile .platz { margin-left: auto; }
.schalterzeile form { margin: 0; }

.marker {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}
.marker.an { background: var(--gut-grund); color: var(--gut); }
.marker.aus { background: var(--schlecht-grund); color: var(--schlecht); }
.marker.neutral { background: var(--grund); color: var(--leise); border: 1px solid var(--linie); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--linie); }
th { color: var(--leise); font-weight: 500; }
td.rechts, th.rechts { text-align: right; }

pre.vorschau {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9rem;
}

code.geheim {
  display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.05em;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 0.3rem 0.6rem;
  margin: 0.2rem 0.3rem 0.2rem 0;
}
.qr { background: #fff; padding: 0.75rem; border-radius: 8px; display: inline-block; }
.qr svg { display: block; width: 190px; height: 190px; }

.werkzeugleiste { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }