:root {
  --grund: #f6f7f9;
  --karte: #ffffff;
  --rand: #dfe3e8;
  --text: #1b1f24;
  --gedimmt: #626d7a;
  --akzent: #1d64c4;
  --akzent-text: #ffffff;
  --gut: #1a7f45;
  --gut-flaeche: #e6f4ec;
  --offen: #8a6100;
  --offen-flaeche: #fdf3dc;
  --warn: #a3341f;
  --warn-flaeche: #fbeae6;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14171b;
    --karte: #1d2126;
    --rand: #2f353d;
    --text: #e8eaed;
    --gedimmt: #9aa4b0;
    --akzent: #5b9bf0;
    --akzent-text: #0f1419;
    --gut: #5fce8f;
    --gut-flaeche: #16301f;
    --offen: #e0b357;
    --offen-flaeche: #322813;
    --warn: #f08b74;
    --warn-flaeche: #351913;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

.rahmen { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }

/* --- Kopfbereich --- */
header.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
}
.kopf-inhalt {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.marke { font-weight: 650; letter-spacing: -.01em; margin-right: auto; }
.marke small { display: block; font-weight: 400; font-size: 12px; color: var(--gedimmt); }

/* --- Kennzahlen --- */
.kennzahlen { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.kennzahl {
  flex: 1 1 130px; background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--schatten);
}
.kennzahl b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kennzahl span { font-size: 12px; color: var(--gedimmt); }
.kennzahl.gut b { color: var(--gut); }
.kennzahl.offen b { color: var(--offen); }

.fortschritt { height: 8px; background: var(--rand); border-radius: 99px; overflow: hidden; margin: 4px 0 16px; }
.fortschritt i { display: block; height: 100%; background: var(--gut); transition: width .25s; }

/* --- Bedienelemente --- */
button, .knopf {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 9px 14px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .knopf:hover { border-color: var(--akzent); }
button.haupt, .knopf.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button:disabled { opacity: .5; cursor: default; }
button.still { border-color: transparent; background: transparent; color: var(--gedimmt); padding: 4px 8px; }
button.still:hover { color: var(--warn); }
/* Nur der Lichtknopf -- eine allgemeine Regel wuerde auch die Filterreiter
   treffen und denen einen Rahmen verpassen. */
#lampe-knopf[aria-pressed=true] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

input[type=text], input[type=search], input[type=password], select {
  font: inherit; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}

.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter .suche { flex: 1 1 240px; }
.reiter { display: flex; gap: 4px; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 3px; }
.reiter button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: 14px; }
.reiter button[aria-pressed=true] { background: var(--akzent); color: var(--akzent-text); }

/* --- Liste --- */
.liste { display: flex; flex-direction: column; gap: 6px; }
.zeile {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 10px 12px 10px 0; overflow: hidden;
}
.zeile .balken { align-self: stretch; background: var(--offen); }
.zeile.ist-gescannt .balken { background: var(--gut); }
.zeile .titel { font-weight: 550; }
.zeile .meta { font-size: 13px; color: var(--gedimmt); }
.zeile .nr { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.zeile .rechts { text-align: right; font-size: 13px; color: var(--gedimmt); white-space: nowrap; }

.plakette { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid transparent; }
.plakette.gut { background: var(--gut-flaeche); color: var(--gut); }
.plakette.offen { background: var(--offen-flaeche); color: var(--offen); }
.plakette.warn { background: var(--warn-flaeche); color: var(--warn); }

.leer { text-align: center; color: var(--gedimmt); padding: 48px 16px; }

.hinweisleiste {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--offen-flaeche); border: 1px solid var(--offen);
  color: var(--offen); border-radius: var(--radius);
  padding: 10px 14px; margin: 16px 0 0; font-size: 14px;
}
.hinweisleiste span { margin-right: auto; }
.hinweisleiste button { padding: 5px 10px; font-size: 13px; }

/* --- Scannen --- */
.scanflaeche {
  background: #000; border-radius: var(--radius); overflow: hidden;
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.scanflaeche video { width: 100%; height: 100%; object-fit: cover; }
.scanflaeche .hinweis { position: absolute; color: #fff; opacity: .8; font-size: 14px; padding: 16px; text-align: center; }
/* Kleine Statuszeile im Kamerabild: tatsaechliche Aufloesung und wie oft die
   Erkennung wirklich laeuft. Macht aus "geht nicht" eine Diagnose. */
.diagnose {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #fff; background: rgba(0, 0, 0, .55);
  padding: 3px 7px; border-radius: 5px;
}

.zielrahmen {
  position: absolute; inset: 18% 12%; border: 2px solid rgba(255,255,255,.85);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.28);
}

.rueckmeldung {
  border-radius: var(--radius); padding: 14px 16px; margin: 12px 0;
  border: 1px solid var(--rand); background: var(--karte); min-height: 68px;
}
.rueckmeldung.gut { background: var(--gut-flaeche); border-color: var(--gut); }
.rueckmeldung.offen { background: var(--offen-flaeche); border-color: var(--offen); }
.rueckmeldung.warn { background: var(--warn-flaeche); border-color: var(--warn); }
.rueckmeldung .kopfzeile { font-weight: 600; }
.rueckmeldung .nr { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* --- Dialog --- */
dialog {
  border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); color: var(--text);
  padding: 20px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 4px; font-size: 18px; }
dialog p.erklaerung { margin: 0 0 16px; color: var(--gedimmt); font-size: 14px; }
.feld { margin-bottom: 14px; }
.feld label { display: block; font-size: 13px; color: var(--gedimmt); margin-bottom: 4px; }
.dialog-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* Eigene Vorschlagsliste statt <datalist>: die laesst sich auf Mobilgeraeten
   nicht zuverlaessig bedienen und zeigt keine Mehrfachtreffer an.
   Die Liste steht im Textfluss, nicht als Overlay -- sonst ragt sie auf dem
   Handy aus dem Dialog heraus und laesst sich nicht scrollen. */
.vorschlaege {
  margin-top: 4px;
  background: var(--grund); border: 1px solid var(--rand); border-radius: 8px;
  max-height: 200px; overflow-y: auto; padding: 4px;
}
.vorschlaege:empty { display: none; }
.vorschlaege button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 6px; font-size: 14px;
}
.vorschlaege button:hover, .vorschlaege button.aktiv { background: var(--karte); }

.anmeldung { max-width: 360px; margin: 12vh auto; }
.anmeldung .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 24px; box-shadow: var(--schatten); }
.fehler { color: var(--warn); font-size: 14px; min-height: 20px; }

.verborgen { display: none !important; }

/* Faengt die Tastatureingabe eines Handscanners ab. Muss fokussierbar bleiben,
   darf aber nichts einnehmen -- deshalb fixiert und ausserhalb des Flusses.
   Der Selektor ist bewusst so spezifisch wie die input-Regeln weiter oben. */
input.nur-lesegeraet {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}

@media (max-width: 600px) {
  .zeile { grid-template-columns: 6px 1fr; }
  .zeile .rechts { grid-column: 2; text-align: left; }
}