* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  /* Verhindert Überscrolling und Gummibandeffekt */
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 140px; /* Platz für den Barcode */
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  color: #003399;
}

.section {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #003399;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-bottom: 10px;
}

.button:hover {
  background-color: #002266;
}

.button.secondary {
  background-color: #666;
}

.button.secondary:hover {
  background-color: #555;
}

.button.cancel {
  background-color: #cc0000;
  margin-top: 10px;
}

.button.cancel:hover {
  background-color: #aa0000;
}

.video-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 10px;
}

#preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scanner-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 100px;
  border: 2px solid rgba(0, 255, 0, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.scan-status-container {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  text-align: center;
}

#scanStatus {
  margin: 0;
  font-size: 14px;
}

#scannerContainer {
  position: relative;
  margin-top: 15px;
}

#barcodeInfo {
  text-align: center;
  margin-bottom: 15px;
}

#barcodeWrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  text-align: center;
  padding: 0; /* Kein Padding */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#barcodeDisplay {
  max-width: 100%;
  height: 120px;
  display: block; /* Wichtig für die korrekte Positionierung */
  margin: 0 auto; /* Zentriert den Barcode */
}

/* Versteckt den Text unter dem Barcode */
#barcodeDisplay text {
  display: none;
}

.hidden {
  display: none;
}

/* Stile für manuelle Eingabe */
.or-divider {
  text-align: center;
  margin: 20px 0;
  position: relative;
}

.or-divider:before,
.or-divider:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background-color: #ddd;
}

.or-divider:before {
  left: 0;
}

.or-divider:after {
  right: 0;
}

.or-divider span {
  display: inline-block;
  padding: 0 10px;
  background-color: white;
  position: relative;
  z-index: 1;
  color: #888;
  font-size: 14px;
}

#manualInputContainer {
  margin-top: 20px;
}

.text-input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.text-input:focus {
  border-color: #003399;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 51, 153, 0.2);
}

/* Standalone-Modus (Vollbild) */
.standalone-mode {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Für iOS-Geräte mit Notch */
@supports (padding-top: env(safe-area-inset-top)) {
  #barcodeWrapper {
    padding-bottom: env(safe-area-inset-bottom);
  }
}