/* Datei: Test/styles.css
   Nur applet-spezifische Klassen – alles andere kommt aus global.css */

/* Formular-Basis */
.input-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-row {
  display: flex;
  flex-wrap: nowrap;       
  align-items: center;
  justify-content: center;
  gap: 0.5rem;         /* Abstand zwischen Button–Input–Button */
  width: 100%;
}

/* Binär-Eingabefelder */
.binary-input {
  padding: 10px;
  font-size: var(--font-size-base);
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  min-width: 150px;
  flex: 1;
}

/* Adjust-Buttons für +/– */
.adjust-button {
  padding: 10px;
  font-size: var(--font-size-base);
  border: none;
  border-radius: 4px;
  background-color: var(--color-buchner);
  color: var(--color-text-inverse);
  cursor: pointer;
  width: 50px;
  height: 40px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}
.adjust-button:hover {
  background-color: var(--color-buchner-dark);
}

/* Ergebnis-Container */
.result {
  text-align: center;
  width: 100%;
}

/* Ausgabe der Berechnung */
.calculation-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 10px;
}
.calculation {
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  font-size: 1.25rem;
  padding: 20px;
  background-color: var(--color-text-inverse);
  border: 2px solid #ced4da;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: fit-content;
}
.calculation .carry {
  color: var(--color-buchner);
}
.calculation .carry span.zero {
  color: transparent;
}
.calculation .carry-line {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.calculation .line {
  border-bottom: 2px solid var(--color-text-primary);
  width: 100%;
}

.layout3 {
  max-width: 500px !important;
}

h2 {
  margin-top: 20px;
}