/* Truhe — Gestaltung.
   Bedient wird das mit kalten Fingern vor einer offenen Truhe: grosse Flächen,
   viel Abstand, dunkler Grund, damit es nachts im Keller nicht blendet. */

:root {
  --grund:     #0d1520;
  --flaeche:   #16212f;
  --flaeche-2: #1d2b3d;
  --rand:      #26374d;
  --text:      #e8f0f7;
  --gedaempft: #8ba3bd;
  --akzent:    #4fc3f7;
  --akzent-tief: #0b4a68;
  --gut:       #66bb6a;
  --warn:      #ffb74d;
  --alarm:     #ef5350;
  --radius:    14px;
  --tippziel:  52px;   /* nichts Anklickbares darf kleiner sein */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Kein Gummiband-Scrollen über die Ränder hinaus — fühlt sich sonst nach Webseite an. */
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* Die Randbereiche des iPhones aussparen (Notch, Home-Balken). */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
}

.verborgen { display: none !important; }

/* ---------- Kopf ---------- */

header {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 20;
  background: rgba(13, 21, 32, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
  padding: 12px 16px 10px;
}

.kopfzeile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kopfzeile h1 {
  font-size: 19px;
  margin: 0;
  flex: 1;
  font-weight: 600;
  letter-spacing: .2px;
}

.zaehler {
  font-size: 13px;
  color: var(--gedaempft);
  white-space: nowrap;
}

/* ---------- Suche und Filter ---------- */

.suchzeile {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

input[type="search"], input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, .15);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ba3bd' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.filterzeile {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filterzeile::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: 14px;
  cursor: pointer;
}
.chip.aktiv {
  background: var(--akzent-tief);
  border-color: var(--akzent);
  color: var(--text);
}

/* ---------- Liste ---------- */

main {
  padding: 12px 16px 100px;
}

.gruppe-titel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gedaempft);
  margin: 20px 0 8px;
}
.gruppe-titel:first-child { margin-top: 4px; }

.artikel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.artikel.abgelaufen { border-color: rgba(239, 83, 80, .5); }
.artikel.bald       { border-color: rgba(255, 183, 77, .4); }

.artikel-text {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.artikel-name {
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artikel-zeile2 {
  font-size: 13px;
  color: var(--gedaempft);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mhd-rot    { color: var(--alarm); font-weight: 600; }
.mhd-gelb   { color: var(--warn); }
.mhd-gruen  { color: var(--gedaempft); }

.menge {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--gedaempft);
  white-space: nowrap;
}

.raus {
  flex: 0 0 auto;
  min-width: var(--tippziel);
  min-height: var(--tippziel);
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  color: var(--akzent);
  font-size: 22px;
  cursor: pointer;
}
.raus:active { background: var(--akzent-tief); }

.leer {
  text-align: center;
  color: var(--gedaempft);
  padding: 60px 20px;
  line-height: 1.7;
}

/* ---------- Knöpfe ---------- */

button {
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tippziel);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-weight: 500;
}

.knopf.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #06202e;
  font-weight: 600;
}
.knopf.gefahr { color: var(--alarm); }
.knopf:active { opacity: .8; }
.knopf:disabled { opacity: .45; cursor: default; }

.knopf-symbol {
  min-width: var(--tippziel);
  min-height: var(--tippziel);
  width: var(--tippziel);
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol-scan { color: var(--akzent); }

/* Der Erfassen-Knopf schwebt über der Liste, immer erreichbar. */
.schwebeleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--grund) 35%);
}
.schwebeleiste .knopf { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }

/* ---------- Blätter (Formulare von unten) ---------- */

.blatt-grund {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: flex-end;
}

.blatt {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--grund);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-top: 1px solid var(--rand);
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
}

.blatt-griff {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--rand);
  margin: 8px auto 14px;
}

.blatt h2 {
  font-size: 20px;
  margin: 0 0 16px;
}

.feld { margin-bottom: 14px; }

.feld label {
  display: block;
  font-size: 13px;
  color: var(--gedaempft);
  margin-bottom: 6px;
}

.feld-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hinweis {
  font-size: 13px;
  color: var(--gedaempft);
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- Scanner ---------- */

/* Senkrechtes Flex-Layout statt absoluter Pixelwerte: die Buehne nimmt den Rest,
   der Fuss so viel er braucht. Mit festen Abstaenden vom unteren Rand lag die
   Diagnosezeile auf manchen Geraeten hinter der Knopfleiste. */
.scanner-grund {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: flex;
  flex-direction: column;
}

.scanner-buehne {
  position: relative;
  flex: 1;
  min-height: 0;      /* ohne das waechst die Buehne ueber den Bildschirm hinaus */
  overflow: hidden;
}

#kamera {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Die Hoehe muss zu Scanner.STREIFEN in scanner.js passen (25 %): der Rahmen
   soll genau das zeigen, was auch dekodiert wird. Links und rechts bewusst nur
   wenig Rand, damit die Ruhezone des Codes mit im Bild landet. */
.scanner-rahmen {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 25%;
  min-height: 130px;
  transform: translateY(-50%);
  border: 2px solid var(--akzent);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
  pointer-events: none;
}

.scanner-text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(62.5% + 14px);   /* knapp unter den Rahmen (50 % + halbe 25 %) */
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 4px #000;
  padding: 0 24px;
  margin: 0;
  pointer-events: none;
}

.scanner-fuss {
  flex: 0 0 auto;
  background: #000;
  padding: 12px calc(16px + env(safe-area-inset-left))
           calc(16px + env(safe-area-inset-bottom));
}

.scanner-tipp {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .7);
}

/* Auflösung, Zahl geprüfter Bilder und Fassung. Sieht nach Entwicklerkram aus,
   ist aber das Einzige, womit sich ein stummer Scanner aus der Ferne einkreisen
   lässt: bleiben die Bilder bei 0, arbeitet der Leser gar nicht. */
.scanner-diagnose {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--akzent);
  min-height: 16px;
}

.scanner-leiste {
  display: flex;
  gap: 10px;
}

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

.melder {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 70;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  transition: opacity .2s, transform .2s;
}
.melder.weg {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.melder.fehler { border-color: var(--alarm); }
.melder.gut    { border-color: var(--gut); }

/* Streifen für den Offline-Zustand. */
.offline-streifen {
  background: var(--warn);
  color: #2a1a00;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
}

/* ---------- Anmeldung ---------- */

.anmelden {
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
}

.anmelden .logo {
  text-align: center;
  font-size: 46px;
  margin-bottom: 8px;
}

.anmelden h1 {
  text-align: center;
  font-size: 24px;
  margin: 0 0 4px;
}

.anmelden .untertitel {
  text-align: center;
  color: var(--gedaempft);
  font-size: 14px;
  margin-bottom: 28px;
}

.reiter {
  display: flex;
  gap: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 22px;
}

.reiter button {
  flex: 1;
  min-height: 42px;
  border: none;
  background: transparent;
  color: var(--gedaempft);
  border-radius: 10px;
  font-size: 14px;
}
.reiter button.aktiv {
  background: var(--akzent-tief);
  color: var(--text);
}

/* ---------- Einstellungen ---------- */

.reihe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rand);
}
.reihe:last-child { border-bottom: none; }
.reihe .wachsend { flex: 1; min-width: 0; }

.code-anzeige {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 26px;
  letter-spacing: 4px;
  text-align: center;
  background: var(--flaeche);
  border: 1px dashed var(--akzent);
  border-radius: var(--radius);
  padding: 18px;
  margin: 8px 0;
  color: var(--akzent);
}

.verlauf-eintrag {
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
  color: var(--gedaempft);
}
.verlauf-eintrag b { color: var(--text); font-weight: 600; }