h2 .small-text {
  color: #bcbcbc;
}

.mainForm {
  padding-left: 2rem;
}

  .small-text {
    color: #bcbcbc !important;
  }

.close-button,
.close-button-mobile {
  background: transparent;
  font-size: 6.9375rem;
  font-weight: 100;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: transform 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 1rem;
}

#close-membership {
  position: absolute;
  top: 0;
  right: 0;
}

.close-button.close-button-mobile:hover {
  transform: rotate(-90deg);
}

input,
textarea {
  width: 100%;
  height: 2.375rem;
  padding: 0.8rem;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  color: black;
}

input::placeholder,
textarea::placeholder {
  font-size: 1.0625rem;
  font-style: normal;
  color: black;
}

.radio input[type="radio"] {
  margin: 0;
  width: 1.8125rem;
}

.inputAndLabel label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #bcbcbc;
}
.inputAndLabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem; /* Abstand zwischen Checkbox und Text */
  margin-bottom: 1rem; /* Abstand zwischen den Zeilen */
}
.inputAndLabel input[type="checkbox"] {
  flex-shrink: 0; /* verhindert Zusammendrücken */
  margin: 0;
  width: 1.8125rem;
}
.border-bottom {
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid #bcbcbc;
}

.form-grid-two-fields-one-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 32rem;
}
.one-row {
  max-width: 32rem;
}
.part-one {
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.honeypot {
  position: absolute;
  left: -9999px;
}
.field {
  padding: 0.2rem;
}

label {
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 535;
  line-height: 1.4375rem; /* 135.294% */
}

.invalid {
  border: 2px solid #f00;
  background: #ffc3c3;
}

.success-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 42.0625rem;
  height: 100%;
  background: rgba(72, 142, 255, 0.5);
  backdrop-filter: blur(7px);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  overflow-y: auto;
  z-index: 19999;
}

.success-overlay.active {
  transform: translateX(0);
}

.overlay-event {
  position: fixed;
  background: rgba(151, 71, 255, 0.51);
}

.success-text {
  padding-top: 10rem;
  font-size: 2.75rem;
  color: white !important;
}

.alert {
  color: #ffc3c3;
  font-size: 1.0625rem;
  padding: 1rem 0;
}

.form-padding-top {
  padding-top: 4rem;
}

.form-padding-bottom {
  padding-bottom: 4rem;
}

.closing-cross:hover {
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

/*checkbox and radiobutton style*/
.custom-checkbox,
.custom-radio {
  position: relative;
  display: inline-block;
  padding-left: 3rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark,
.radiomark {
  position: absolute;
  font-family: var(--font-family);
  left: 0;
  top: 0;
  width: 1.8125rem;
  height: 1.8125rem;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%; /* rund */
}

.radiomark.invalid,
.checkmark.invalid {
  border: 2px solid #f00;
  background: #ffc3c3;
}

.custom-checkbox input:checked + .checkmark {
  background-color: black;
}

.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio input[type="radio"]:checked ~ .radiomark {
  background-color: black;
}

.submit-button {
  margin-top: 1rem;
  padding-bottom: 2.5rem !important;
}

#remarks {
  width: 100%;
  height: 10rem;
  resize: none;
  color: black;
}
/* Standardmäßig verstecken */
.close-button-mobile-wrapper {
  display: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
	/* Remove the default styling of the input fields */
  input, textarea {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  border-radius: 0;
  }

  .mainForm {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .form-grid-two-fields-one-row {
    display: block;
    max-width: 100%;
    margin: 0 auto;
  }

  .form-grid-two-fields-one-row > * {
    width: 100%;
  }

  .one-row {
    max-width: 100%;
  }

  input,
  textarea {
    height: auto; /* flexible Höhe */
    min-height: 2.5rem;
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }

  .inputAndLabel {
    flex-wrap: wrap; /* Checkbox und Label können umbrechen */
    gap: 0.5rem;
  }

  #remarks {
    height: 100px;
  }

  /* Mobile-spezifisch: Nur mobiler Close-Button sichtbar */
  .close-button-mobile-wrapper {
    display: block;
    width: 100%;
    text-align: right;
  }

  .close-button-mobile {
    background: transparent;
    border: none;
    font-size: 4rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  .close-button {
    display: none; /* Desktop-Button verstecken */
  }

}