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

/* Wrapper passt sich der Bildschirmhöhe an */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  font-family: "Orbitron", sans-serif;
  font-weight: 300;
  color: rgb(20, 20, 20);
  background: radial-gradient(black 3%, transparent 16%) 0px 0px,
    radial-gradient(rgba(255, 255, 255, 0.1) 8%, transparent 6%) 1px 1px;
  background-color: #222;
  background-size: 16px 16px;
}

h1 {
  color: #aaa;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 -20px 44px 3px rgb(0, 255, 42);
  background-color: #222;
  padding: 8px 12px;
  border-top: 1px solid #000000;
  border-bottom: 0px solid #666;
  border-radius: 0px;
  width: 100%;
}

#binaryClock {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  border: 1px solid #838383;
  border-radius: 8px;
  background-color: #ddd; /* heller Hintergrund für den "Ausschnitt" */
  padding: 20px;

  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8),
    /* Innerer Schatten für Vertiefung */ 0 0 16px rgba(255, 255, 255, 0.2); /* Äußerer Schatten für Tiefeneffekt */
  margin-top: 20px;
}

.binary-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: flex-start;
}

.label {
  width: 80px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 0 3px #6b6b6b;
}

.binary-container {
  display: grid;
  grid-template-columns: repeat(6, 20px); /* 6 Spalten für 6 Bits */
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.bit-values {
  display: contents; /* Ermöglicht, dass die inneren Divs die Gridstruktur nutzen */
  font-size: 0.7em;
  color: #aaa;
  text-align: center;
}

.binary-digits {
  display: contents;
}

.bit {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #444; /* Farbe für ausgeschaltete Lämpchen */
  transition: background-color 0.5s, box-shadow 0.5s;
  border: 1px solid #333; /* dunkler Rahmen für Lämpchen-Optik */
}

.on {
  background-color: limegreen;
  border: 1px solid rgb(239, 239, 239);

  /* Innerer Schatten und aeusserer Leuchteffekt */
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5),
    0 0 16px 3px rgba(0, 255, 0, 0.2);

  /* Lichtquelle in der Mitte */
  background: radial-gradient(
    circle at center,
    #bbeabb,
    limegreen 60%,
    #104510
  );
}

.off {
  background-color: #02310c;
  border: 1px solid #d1d1d1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5), 0 0 3px 2px rgba(0, 0, 0, 0.1);
}

.total {
  width: 50px;
  font-weight: 400;
  text-align: right;
  text-shadow: 0 0 3px #6b6b6b;
}

.total,
.bit-values {
  visibility: hidden; /* Standardmäßig ausgeblendet */
}

.toggle-decimal {
  display: flex;
  align-items: center;
  font-size: 1em;
  color: white;
  margin-top: 15px; /* Abstand nach oben */
}

.toggle-decimal input[type="checkbox"] {
  appearance: none;
  background-color: #444;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
}

.toggle-decimal input[type="checkbox"]:checked {
  background-color: limegreen;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

.toggle-decimal input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background-color: #222;
  border-radius: 2px;
}