/* Einheiten-Rechner */
.einheiten_rechner_wrapper {
  max-width: 980px;
  margin: 0 auto;
}

.einheiten_rechner_wrapper .berechnung {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: var(--cd-shadow-blue);
}

.einheiten_rechner_wrapper .berechnung fieldset {
  border: 1px solid var(--cd-color-blue);
  padding: 1.25rem;
  display: grid;
  gap: 0.5rem;
  background:  var(--cd-background-light-blue);
}

.einheiten_rechner_wrapper .berechnung legend {
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--cd-color-blue);
  font-size: 1.55rem;
}

.einheiten_rechner_wrapper .berechnung label {
  font-weight: 600;
  margin-top: 1rem;
  color: var(--cd-font-black);
  font-size: 1rem;
}

.einheiten_rechner_wrapper .berechnung label:nth-child(2) {
    margin-top: 0;
}

.einheiten_rechner_wrapper .berechnung input[type="text"],
.einheiten_rechner_wrapper .berechnung select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  font-family: var(--cd-font-main);
  font-size: 1rem;
  color: var(--cd-font-black);
  outline: 0;
  background: #fff;
}

.einheiten_rechner_wrapper .berechnung select {
    border: 1px solid var(--cd-color-blue);
}

.einheiten_rechner_wrapper .berechnung input[type="text"]:focus,
.einheiten_rechner_wrapper .berechnung select:focus {
  box-shadow: 0 0 0 1px var(--cd-color-blue);
}

.einheiten_rechner_wrapper .berechnung #stellen,
.einheiten_rechner_wrapper .berechnung #einstellungen {
  background: #fff;
  border: none;
  padding: 0;
}

.einheiten_rechner_wrapper .berechnung #einstellungen {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.einheiten_rechner_wrapper .berechnung input[type="button"]#zurueck {
  background: none;
  padding: 1rem 2.5rem;
  color: var(--cd-color-blue);
  border: 1px solid var(--cd-color-blue);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .3s ease;
}

.einheiten_rechner_wrapper .berechnung input[type="button"]#zurueck:hover {
  opacity: 1;
}

/* Responsive */
@media (width < 64rem) {
    .einheiten_rechner_wrapper .berechnung {
    padding: 1rem;
  }
}

@media (width < 48rem) {
    .einheiten_rechner_wrapper .berechnung {
    gap: 1rem;
  }

  .einheiten_rechner_wrapper .berechnung fieldset {
    padding: 1rem;
  }
}