/* Kamera-Overlay (LagrexCamera) — GETEILT von Scanner-PWA und Desk (Retouren-Foto, ADR 0003 P3).
   Liegt in einer eigenen Datei, weil scanner.css das Desk-Layout umstylen würde; beide Bases
   laden nur dieses kleine Overlay-Stylesheet. Bewusst immer dunkel (Kamera-UX); Akzente via Tokens. */
.scan-cam {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: #000; color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.scan-cam[hidden] { display: none; }
.scan-cam-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem; font-weight: 700; background: rgba(0, 0, 0, 0.6);
}
.scan-cam-x {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem;
}
.scan-cam-buehne { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.scan-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Quadrat: der Decoder schneidet ein zentrales Quadrat aus und prüft 0°+90° → der Rahmen
   zeigt den echten Scan-Bereich (Code formatneutral mittig halten, egal ob quer oder hoch).
   Im Foto-Modus (P3) ist das Reticle ausgeblendet. */
.scan-cam-reticle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(72vw, 320px); height: min(72vw, 320px);
  border: 3px solid var(--orange); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); pointer-events: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.scan-cam-reticle.treffer { border-color: var(--gruen); box-shadow: 0 0 0 100vmax rgba(43, 138, 62, 0.25); }
.scan-cam-fehler {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 80%; text-align: center; background: var(--rot); color: #fff;
  padding: 0.9rem 1.1rem; border-radius: 12px; font-weight: 600;
}
.scan-cam-status { text-align: center; padding: 0.5rem 1rem; font-size: 0.9rem; min-height: 1.5rem; opacity: 0.9; }
.scan-cam-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.8rem 1rem 1.1rem; }
.scan-cam-knopf {
  min-height: 48px; min-width: 48px; padding: 0 1rem;
  font-size: 1.2rem; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
}
.scan-cam-knopf.weit { font-size: 1rem; font-weight: 600; }
.scan-cam-knopf.an { background: var(--orange); border-color: var(--orange); }
.scan-cam-knopf svg { width: 22px; height: 22px; display: block; }
.scan-cam-ausloeser {
  width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 4px solid rgba(255, 255, 255, 0.5);
}
.scan-cam-ausloeser:active { transform: scale(0.94); }