/* Farben wie die EMS-Website (web/style.css im Repository ems3000) */
:root {
  --bg: #eef1ed; --karte: #ffffff; --text: #1c211e; --leise: #6b746e; --rand: #dfe5e0; --feld: #f3f5f2;
  --akzent: #2e7d4f; --akzent-text: #ffffff; --fehler: #b42318; --ok: #2e7d4f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1311; --karte: #1a1f1c; --text: #e6ece8; --leise: #9aa59e; --rand: #2b332e; --feld: #222924;
    --akzent: #5cbf86; --akzent-text: #08140d; --fehler: #f87171; --ok: #2e7d4f; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display: none !important; }
a { color: var(--akzent); }
.kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: var(--bg); }
.kopf .titel { flex: 1; min-width: 0; }
.kopf h1 { margin: 0; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .unter { color: var(--leise); font-size: .85rem; }
.zurueck, .plus { border: 0; background: none; color: var(--akzent); cursor: pointer; line-height: 1; }
.zurueck { font-size: 2rem; padding: 0 8px 4px 0; }
.plus { font-size: 1.9rem; width: 44px; height: 44px; border-radius: 50%; background: var(--karte); }
main { max-width: 560px; margin: 0 auto; padding: 4px 16px calc(40px + env(safe-area-inset-bottom)); }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.karte.anlage { display: flex; align-items: stretch; padding: 0; }
.karte.anlage .oeffnen { flex: 1; padding: 18px 16px; color: inherit; text-decoration: none; }
.karte.anlage .oeffnen b { font-size: 1.1rem; }
.karte.anlage .mehr { display: flex; align-items: center; padding: 0 18px; font-size: 1.4rem; color: var(--leise);
  text-decoration: none; border-left: 1px solid var(--rand); }
.chip { display: inline-block; font-size: .78rem; margin: 6px 6px 0 0; padding: 2px 9px; border-radius: 99px;
  background: var(--feld); color: var(--leise); }
.leer, .hinweis { color: var(--leise); font-size: .92rem; }
.leer-gross { text-align: center; padding: 10vh 8px; color: var(--leise); }
.leer-gross b { color: var(--text); font-size: 1.1rem; }
.leer-gross .knopf { margin-top: 12px; }
.wahl { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 18px 16px; border-radius: 18px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
.wahl b { display: block; font-size: 1.05rem; }
.wahl span { color: var(--leise); font-size: .88rem; }
label { display: block; margin: 0 0 12px; font-size: .9rem; color: var(--leise); }
input, select { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; color: var(--text);
  background: var(--feld); border: 1px solid var(--rand); border-radius: 12px; }
button, .knopf { font: inherit; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { opacity: .5; cursor: default; }
.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }
form .primaer { width: 100%; }
.gefahr { color: var(--fehler); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.verbinde { text-align: center; padding: 18vh 0; color: var(--leise); }
.kreis { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid var(--rand);
  border-top-color: var(--akzent); animation: dreh 0.9s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.meldung { position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); max-width: 528px;
  margin: 0 auto; padding: 12px 14px; border-radius: 12px; color: #fff; background: var(--fehler); z-index: 5; }
.meldung.ok { background: var(--ok); }
.scanner { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; align-items: center; justify-content: center; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .rahmen { position: absolute; width: 64vmin; height: 64vmin; border: 3px solid #fff; border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.scanner button { position: absolute; bottom: calc(30px + env(safe-area-inset-bottom)); }
.karte h2 { margin: 0 0 6px; font-size: 1.1rem; }
label.check { display: flex; gap: 10px; align-items: center; color: var(--text); }
label.check input { width: auto; margin: 0; }