:root {
  --akzent: #6157f2;
  --akzent-hell: #b0b7ff;
  --grund: #f8f8fb;
  --karte: #ffffff;
  --text: #1a1a24;
  --grau: #64647a;
  --linie: #e0e0ea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14141c;
    --karte: #1d1d28;
    --text: #edecf4;
    --grau: #9b9bb0;
    --linie: #2f2f3e;
  }
}

/* Im Scan wird nicht beschnitten: nur bei contain deckt sich der sichtbare Rahmen
   mit dem, was der Leser aus dem Videobild ausschneidet (design.md 7.2). */
.sucher.scan video { object-fit: contain; }

.leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  /* Die untere Safe-Area haengt hier, nicht am body: sonst zaehlt sie doppelt. */
  padding: 4px 0 calc(8px + var(--sicher-unten));
}

/* --- Overlay im Sucher (nur noch der Barcode-Bildschirm) -------------------- */

/* Auf dem Kamera-Bildschirm liegt nichts mehr im Sucher, dort traegt die Kopfzeile
   das Zahnrad und die Leiste Licht und Barcode. Der Scan hat keine Leiste, seine
   beiden Knoepfe muessen also im Bild bleiben. */
.ueber {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  pointer-events: none;
}

.ueber > *, .ueber .rechts { pointer-events: auto; }
.ueber .rechts { display: flex; gap: 8px; }

.ueber button {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(6px);
}

.ueber button.licht.an { background: #f6c344; border-color: #f6c344; color: #3a2c05; }

/* --- Statuszeile, Leiste, Zaehler ------------------------------------------ */

.standzeile:empty { display: none; }

.wartet.schlimm {
  background: color-mix(in srgb, #d92d20 10%, var(--karte));
  border-color: color-mix(in srgb, #d92d20 35%, var(--linie));
  color: #b42318;
}

.wartet.gut {
  background: color-mix(in srgb, #12855a 10%, var(--karte));
  border-color: color-mix(in srgb, #12855a 35%, var(--linie));
  color: #0b6b47;
}

.wartet .knoepfe { display: flex; gap: 8px; flex: 0 0 auto; }
.wartet button.warnung { color: #b42318; border-color: color-mix(in srgb, #d92d20 35%, var(--linie)); }

button.flach { border-color: transparent; background: transparent; padding: 10px 12px; }
button.flach.stark { font-weight: 650; color: var(--akzent); }
button.flach.hell { color: #fff; background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.25); }

.zaehler {
  flex: 0 0 auto;
  text-align: center;
  font-size: 14px;
  color: var(--grau);
}

label.ersatz { align-items: center; gap: 10px; cursor: pointer; }
label.ersatz input[type="file"] { font-size: 15px; }

/* --- Uebersicht ------------------------------------------------------------ */

.fotoliste { display: flex; flex-direction: column; gap: 12px; }

.fotozeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}

.fotozeile img {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
  background: var(--grund);
}

.fotozeile input { flex: 1 1 auto; min-width: 0; }

button.weg { flex: 0 0 auto; color: #b42318; border-color: color-mix(in srgb, #d92d20 30%, var(--linie)); }

/* --- Barcode --------------------------------------------------------------- */

.scanseite { gap: 14px; }

/* Der Sucherkasten bekommt das Seitenverhaeltnis des Videobildes (gesetzt in app.js).
   Damit hat contain nichts zu umranden, und der Rahmen deckt sich mit dem, was der
   Leser wirklich ausschneidet. */
.sucher.scan {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.rahmen {
  position: absolute;
  border: 2px solid var(--akzent-hell);
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  pointer-events: none;
  /* Bis app.js die echten Werte kennt, steht der Rahmen an der Stelle aus design.md. */
  left: 8%;
  top: 32%;
  width: 84%;
  height: 36%;
}

.handeingabe { display: flex; gap: 8px; align-items: stretch; }
.handeingabe input { flex: 1 1 auto; min-width: 0; }
.handeingabe button { flex: 0 0 auto; }

.scannotiz { gap: 0; }

.produkt {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}

.produkt dt { color: var(--grau); font-size: 15px; }
.produkt dd { margin: 0; font-weight: 600; }

/* --- Scan: Kopfzeile, wenn der Sucher weg ist ------------------------------ */

.scankopf { display: flex; }

.trefferkarte { display: flex; gap: 14px; align-items: flex-start; }
.trefferkarte .produkt { flex: 1 1 auto; min-width: 0; }

.produktbild {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--linie);
}

/* --- Produkt-Bildschirm ---------------------------------------------------- */

.produktseite { gap: 12px; }

.produktseite h2 {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--grau);
  letter-spacing: 0.01em;
}

.produktbild.gross {
  width: 100%;
  height: 200px;
  align-self: center;
  object-fit: contain;
  padding: 10px;
}

.noten { display: flex; flex-wrap: wrap; gap: 8px; }

.note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--karte);
  font-size: 14px;
  color: var(--grau);
}

.note b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

/* Die Farben des Nutri-Score, wie man sie von der Packung kennt. */
.nutri-a b { background: #038141; }
.nutri-b b { background: #85bb2f; color: #1b2a06; }
.nutri-c b { background: #fecb02; color: #3a2c05; }
.nutri-d b { background: #ee8100; }
.nutri-e b { background: #e63e11; }

.nova-1 b { background: #038141; }
.nova-2 b { background: #85bb2f; color: #1b2a06; }
.nova-3 b { background: #ee8100; }
.nova-4 b { background: #e63e11; }

/* Tabelle scrollt notfalls fuer sich, statt die ganze Seite breit zu machen. */
.naehrwerte {
  width: 100%;
  border-collapse: collapse;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}

.naehrwerte th, .naehrwerte td { padding: 9px 12px; text-align: right; }
.naehrwerte tbody th { text-align: left; font-weight: 400; color: var(--grau); }
.naehrwerte thead th { font-size: 13px; color: var(--grau); font-weight: 600; }
.naehrwerte tbody tr + tr th, .naehrwerte tbody tr + tr td { border-top: 1px solid var(--linie); }
.naehrwerte td { font-variant-numeric: tabular-nums; }

.ampel { display: flex; flex-direction: column; gap: 6px; }

.stufe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--karte);
  font-size: 15px;
}

.stufe b { padding: 3px 10px; border-radius: 999px; font-size: 14px; }
.stufe.low b { background: #038141; color: #fff; }
.stufe.moderate b { background: #fecb02; color: #3a2c05; }
.stufe.high b { background: #e63e11; color: #fff; }

.zutaten {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Sitzungszeile unter der Leiste ---------------------------------------- */

/* Dieselben drei Spalten wie die Leiste, damit Abbrechen und Fertig genau unter
   Licht und Barcode stehen. */
.sitzungszeile {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
}

.sitzungszeile button { font-size: 16px; }