/* Layout, Typografie und Bedienelemente verwenden global.css. */
.ean13-applet {
  width: fit-content;
  gap: 20px;
}

/* Auf schmalen Bildschirmen bleibt der Barcode in Originalgröße scrollbar. */
.ean13-applet .barcode-viewport {
  width: fit-content;
  overflow-x: auto;
  max-width: 100%;
  padding-inline-start: 2px;
}

.ean13-applet #barcodeContainer {
  position: relative;
  width: 900px;
  height: 300px;
  margin-block: 0;
  margin-inline: auto;
}

.ean13-applet #barcode {
  display: block;
}

/* Dieselben Positionen wie bisher, jetzt ohne vom JS erzeugte Inline-Styles. */
.ean13-applet .digit-input {
  position: absolute;
  top: 244px;
  width: 55.8947368421px;
  height: 40px;
  padding: 1px 2px;
  box-sizing: content-box;
  font-size: 24px;
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: white;
}

.ean13-applet #d1 {
  left: -1.8947368421px;
  background-color: #e0f7ff;
}

.ean13-applet #d2 { left: 86.5263157895px; }
.ean13-applet #d3 { left: 148.4210526316px; }
.ean13-applet #d4 { left: 210.3157894737px; }
.ean13-applet #d5 { left: 272.2105263158px; }
.ean13-applet #d6 { left: 334.1052631579px; }
.ean13-applet #d7 { left: 396px; }
.ean13-applet #d8 { left: 502.1052631579px; }
.ean13-applet #d9 { left: 564px; }
.ean13-applet #d10 { left: 625.8947368421px; }
.ean13-applet #d11 { left: 687.7894736842px; }
.ean13-applet #d12 { left: 749.6842105263px; }
.ean13-applet #d13 {
  left: 811.5789473684px;
  background-color: #e0ffe0;
}

.ean13-applet .digit-input[readonly]::-webkit-outer-spin-button,
.ean13-applet .digit-input[readonly]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ean13-applet .digit-input[readonly] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ean13-applet #controls {
  display: block;
  text-align: center;
}

.ean13-applet #controls label {
  display: inline;
  min-height: 0;
  margin-right: 20px;
}

.ean13-applet #exportPNG {
  margin: 0;
}

.ean13-applet #calculation {
  max-width: 100%;
  line-height: 1.8;
  text-align: center;
}

.ean13-applet .barcode-viewport:focus-visible,
.ean13-applet .digit-input:focus-visible {
  outline: 2px solid var(--color-buchner);
  outline-offset: 2px;
}