input,
select,
textarea {
  padding: 1em;
  border: 0px;
  font-family: var(--input-font-family);
  font-size: var(--button-font-size);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--default-border-radius);
  border-color: var(--header-grey-dark);
  box-sizing: border-box;
  outline: none;
  width: 100%;
}

input,
select {
  max-height: calc(var(--button-font-size) + 4px + 2em);
}

input:focus,
select:focus,
select:open,
textarea:focus {
  border-color: var(--theme-color);
  /* width: auto; */
  min-width: 50px;
}

fieldset {
  border: 0;
}

/* Keinen "spin-button" bei Zahleneingabefeldern anzeigen,
   wenn diese nicht mit dem "Control input number" dargestellt
   werden sollen */
input.not-spin-button::-webkit-outer-spin-button,
input.not-spin-button::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.carousel-wrapper {
  display: block;
}
.carousel-btn-left,
.carousel-btn-right {
  border-radius: 30px;
}
.carousel-btn-right {
  align-items: end;
}
input.not-spin-button[type=number] {
    -moz-appearance:textfield;
}

/* legacy
textarea:read-only,
input:read-only,
.readonly-input {
  background-color: var(--header-grey);
  color: var(--header-grey-dark);
  border: 2px solid var(--header-grey-dark);
  cursor: not-allowed;
}
 */
/* legacy
textarea:read-only,
input:read-only,
.readonly-input:focus {
  outline: none;
}
 */
button {
  padding: 1em;
  background-color: var(--header-grey-dark);
  color: #FFF; /* keine Variable verfügbar */
  border: 0px;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  border-radius: var(--default-border-radius);
  box-sizing: border-box;
  cursor: pointer;
}

button:hover {
  color: var(--theme-color-overlay);
  background-color: var(--theme-color-lighter);
}

button.important {
  background-color: var(--theme-color-darker);
  color: var(--theme-color-overlay);
}

button.important:hover {
  background-color: var(--theme-color-lighter);
}

/*
 * Formular Styles
 */

.formular {
  width: 100%;
  box-sizing: border-box;
  /*background-color: var(--theme-color-overlay);*/
  border-radius: var(--default-border-radius);
}

.formularZeile {
  display: flex;
  gap: 1rem;
}

.formularZeile:not(:last-child) {
  padding-bottom: 0.5rem;
}

.formularZelle {
  flex: 1;
  display: flex;
  align-items: baseline;
  align-self: self-end;
  box-sizing: border-box;
  width: 100%;
}
.formularZeileButton .formularZelle:last-child {
  width: unset;
}

.formularZelle.one2two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  text-align: right;
  gap: 0.5em;
}

.formularZelle.max200 {
  display: grid;
  grid-template-columns: 250px 200px;
  text-align: right;
  gap: 0.5em;
}

/* Variante: Label über Input */
.formularZelle.label-lf {
  flex-direction: column;
}
.formularZelle.label-50vw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: right;
  gap: 0.5em;
  padding-left: 15%;
  padding-right: 15%;
}

/* Variante: Label neben Input (Breite 150px) */
.formularZelle.label-150 label {
  flex: 0 0 auto;
  text-align: right;
}

/* Variante: Label neben Input (Breite 250px) */
.formularZelle.label-250 label {
  flex: 0 0 250px;
  text-align: right;
}

/* Variante: Label neben Input (Breite 400px) */
.formularZelle.label-400 label {
  flex: 0 0 400px;
  text-align: right;
}

/* Variante: Label neben Input (Breite flex) */
.formularZelle.label-flex label {
  flex: 0 0 auto;
  text-align: right;
}

.formularZelle[class*="label-"] label {
  margin-right: 0.5rem;
}

.formularZelle input {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
}

/* RSF! */
.formularZelle textarea.full-with,
.formularZelle select.full-with,
.formularZelle input.full-with {
  max-width: unset;
  width: 100%;
}

/* Feste Breite für einzelne Inputs */
.formularZelle select.fixed200,
.formularZelle input.fixed200 {
  max-width: 200px;
  width: 100%;
}


.formularZelle>*:first-child {
  margin-left: 0;
}

.formularZelle>*:last-child {
  margin-right: 0;
}

.formularZeileButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.5rem;
}

.formularZeileButton .formularZelle:not(:last-child) {
  margin-right: 1rem;
}

.formularZeileButton .formularZelle:last-child {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.formularZeileButton .formularZelle:only-child {
  width: 100%;
}

.formularZeileButton .formularZelle button:not(:last-child) {
  margin-right: 0.5rem;
}

@media (max-width: 512px) {
  .formularZeile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .formularZelle {
    flex-direction: column;
  }

  .formularZelle.label-50vw,
  .formularZelle.one2two,
  .formularZelle.max200 {
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }
  
  .formularZelle input.fixed200,
  .formularZelle.label-250 label,
  .formularZelle.label-400 label {
    flex: 0;
  }

  .formularZelle input, .formularZelle select {
    max-width: none;
  }

  .formularZeileButton {
    flex-direction: column;
  }

  .formularZeileButton .formularZelle:not(:last-child) {
    margin-right: 0;
    align-self: flex-start;
  }

  .formularZeileButton .formularZelle:last-child {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 0.5rem
  }

}

@media (max-width: 512px) {

  .formularZeileButton .formularZelle:last-child {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  
  }

  .formularZeileButton .formularZelle button,
  .formularZeileButton .formularZelle button:not(:last-child) {
    margin: 0px;
  }

}

/*
 * Control Checkbox/Radiobox
 */

fieldset {
  padding: 0;
}

fieldset.b-border {
  border-width: 2px;
  border-style: solid;
  border-radius: var(--default-border-radius);
  border-color: var(--theme-color);
  padding: 0.5em;
}

fieldset legend {
  padding: 0 0.5em;
}

/* Customize the label (the inputContainer) */
.inputContainer {
  display: flex;
  position: relative;
  padding-left: 35px;
  padding-right: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-size: var(--default-font-size);
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.inputContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
span[class|="inputElement"] {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgba(255, 255, 255, 0.8);
  border-width: 2px;
  border-style: solid;
  border-color: var(--header-grey-dark);
}

span.inputElement-radio {
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.inputContainer:hover input~span[class|="inputElement"] {
  background-color: var(--theme-color-lighter);
}

/* When the checkbox is checked, add a blue background */
.inputContainer input:checked~span[class|="inputElement"] {
  background-color: var(--theme-color);
}

/* Create the inputElement/indicator (hidden when not checked) */
span[class|="inputElement"]:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the inputElement when checked */
.inputContainer input:checked~span[class|="inputElement"]:after {
  display: block;
}

/* Style the inputElement/indicator */
.inputContainer span.inputElement-checkbox:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--theme-color-overlay);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inputContainer span.inputElement-radio:after {
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--theme-color-overlay);
}

/*
 * Control input number
 * https://nikitahl.com/number-input-with-custom-buttons
 */

.inputNumberContainer {
  display: flex;
  width: 100%;
}

button[class^="inputNumberB-"] {
  height: calc(var(--button-font-size) + 4px + 2em);
  width: 40px;
}

.inputNumberB-plus {
  border-radius: 0px 0px 0px 0px;
}

.inputNumber-input {
  border-radius: unset;
  width: calc(100% - 130px);
}

.inputNumber-input.small {
   max-width: 250px;
}
.inputNumber-input.smaller {
   max-width: 120px;
}

.inputNumberContainer.locked .inputNumber-input {
  pointer-events: none;
}

.inputNumber-input::-webkit-outer-spin-button,
.inputNumber-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inputNumber-input {
  -moz-appearance: textfield;
}

@media (max-width: 512px) {

  .inputNumber-input.small {
    max-width: unset;
  }
  .inputNumber-input.smaller {
    max-width: unset;
  }

}

/*
 * Control Select-Option
 * https://codepen.io/utilitybend/pen/xbGmBQr
 */

select {
  appearance: none;

  @supports (appearance: base-select) {
    @media (hover: hover) {

      &,
      &::picker(select) {
        appearance: base-select;
      }
    }
  }
}

select {
  width: 100%;
  max-width: 500px;

  color: var(--default-text-color);

  background-color: var(--default-background-color);
  background-image: url("../css-image/keyboard_arrow_down_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg");
  background-position: right 0.5em center;
  background-repeat: no-repeat;

  @media (hover: hover) {
    @supports (appearance: base-select) {
      padding-inline: 20px;
      background-image: none;

      &::picker-icon {
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("../css-image/keyboard_arrow_down_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg");
        transition: rotate 0.2s ease-out;
      }

      &:open::picker-icon {
        rotate: 180deg;
      }

      &::picker(select) {
        padding: 0;
        margin-top: 5px;

        border: 2px solid var(--header-grey-dark);
        border-radius: var(--default-border-radius);

      }

      &:open::picker(select) {

        overflow: auto;

        @starting-style {
          opacity: 0;
          height: 0;
        }
      }

      option {
        padding: 15px 20px;
        transition-property: color, background;
        transition-duration: 0.1s;
        transition-timing-function: ease-out;

        &:where(:hover, :focus, :active) {
          background: var(--theme-color-lighter);
          color: var(--theme-color-overlay);
        }

        &:checked {
          background: var(--theme-color-darker);
          color: var(--theme-color-overlay);
        }

        &::checkmark {
          display: none;
        }

        &:first-child {
          border: 0;
        }
      }
    }
  }
}

/*
 * Control Toggle-Checkbox
 * https://codepen.io/josfabre/pen/dyQbBdp
 */

form input[type="checkbox"] {
  display: none;

  /* toggle in the OFF state */
  ~label {
    position: relative;
    display: block;
    width: 50px;
    height: 30px;
    border-radius: 40px;
    border: 2px solid var(--header-grey-dark);
    transition: transform 200ms cubic-bezier(0.41, -0.01, 0.63, 1.09);
    transform: translateY(-2px);
    cursor: pointer;
    background-color: var(--default-background-color);
    padding-left: 46px;

    &::before,
    &::after {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 25px;
      height: 26px;
      border-radius: 20px;
      content: "";
      transition: all 220ms cubic-bezier(0.76, 0.01, 0.15, 0.97);
    }

    &::before {
      background-color: var(--theme-color-lighter);
    }

    &::after {
      background-color: var(--theme-color);
    }
  }

  /* toggle in the ON state */
  &:checked~label {
    border: 2px solid var(--header-grey-dark);
    background-color: var(--default-background-color);

    &::before {
      width: 46px;
    }

    &::after {
      transform: translateX(21px);
      background-color: var(--theme-color-darker);
    }
  }

}