/* === Grundlayout für Fragen === */
/* .form {
  padding: 3rem 0 1rem;
  min-height: 100vh;
} */
#evc-form {
  position: relative;
  border-radius: 1.5rem;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  max-width: 460px;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  margin-left: auto;
  z-index: 2;
}

main #evc-form {
  margin: 0 auto 3rem;
  padding: 1rem .5rem;
  max-width: 100%;
}

.evc-form-title {
  color: var(--bs-secondary);
  font-weight: 700;
}
.evc-form-subtitle {
  color: var(--bs-primary);
  border-bottom: 1px solid var(--bs-primary);
  padding-bottom: 0.5rem;
}

/* .evc-form-btn {
  color: var(--color-white);
  background-color: var(--bs-warning);
} */
.evc-form-btn {
  color: var(--color-white);
  display: inline-block;
  min-width: 50%;
  text-transform: uppercase;

  border-radius: 0.5rem;
  border: 2px solid var(--bs-warning);
  background: var(--gradient-btn-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.evc-form-btn:active,
.evc-form-btn:hover,
.evc-form-btn:focus {
  color: var(--bs-warning);
  border: 2px solid var(--bs-warning);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background: var(--color-white);
}

.evc-form-btn:disabled {
  color: var(--color-text-light);
  pointer-events: none;
  background: var(--color-gray);
  border-color: var(--color-gray-darker);
}

.evc-form-btn:disabled .fa {
  color: var(--color-gray-darker);
}

/* progress bar */
#evc-form-progress {
  height: 0.5rem;
  background-color: var(--bs-primary);
  overflow: hidden;
}

#evc-form-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--bs-secondary);
  transition: width 0.3s ease;
}

.evc-form-block-title {
  font-size: 1.1rem;
  line-height: 1.4rem;
}

.form-block {
  opacity: 1;
  margin-bottom: 0.5rem;
  transition: opacity 0.4s ease;
}
.form-block.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;

  padding: 0;
  margin: 0;
  overflow: hidden;
}
.form-block.visible {
  opacity: 1;
  pointer-events: auto;
  height: auto;
}
.form-block-info {
  font-size: 85%;
  margin-top: 0.25rem;
}

.input-wrapper {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.input-wrapper.radio span.label,
.input-wrapper.text label,
.input-wrapper.textarea label {
  font-size: 0.9rem;
}

/* Grundstil: grauer Rand, weiß innen */
.form-check-input[type='radio'],
.form-check-input[type='checkbox'] {
  margin-left: 0.5rem !important;
  margin-top: 0 !important;
  border: 1px solid var(--color-gray-darker) !important;
  background-color: var(--color-white) !important;
}

/* Checked: grauer Punkt in der Mitte */
.form-check-input:checked[type='radio'] {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-gray-darker) !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8' %3E%3Ccircle r='2' fill='%23c0c0c0'/%3E%3C/svg%3E");
}

.form-check-input:checked[type='checkbox'] {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-gray-darker) !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' %3E%3Cpath fill='none' stroke='%23c0c0c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
textarea,
.form-check {
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border: none;
  border-bottom: 2px solid var(--color-gray);
  background-color: var(--color-gray-light);
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.5rem;
  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.form-select {
  font-size: 0.9rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--color-gray);
  background-color: var(--color-gray-light);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
/* .form-check {
  padding: 0.5rem;
} */

input[type='text']:hover,
input[type='email']:hover,
input[type='tel']:hover,
input[type='number']:hover,
textarea:hover,
.form-select:hover,
.form-check:hover {
  cursor: pointer;
  border-bottom: 2px solid var(--color-gray-darker);
}

.form-check label:hover {
  cursor: pointer;
}

/* invalid */
.input-wrapper.is-invalid input,
.input-wrapper.is-invalid textarea,
.input-wrapper.is-invalid select,
.input-wrapper.is-invalid .form-check {
  border-bottom: 2px solid var(--bs-danger);
  color: var(--bs-danger);
}

.input-wrapper.is-invalid input:focus,
.input-wrapper.is-invalid textarea:focus {
  border-bottom: 2px solid var(--bs-danger);
}

/* valid */
.input-wrapper.is-valid input,
.input-wrapper.is-valid textarea,
.input-wrapper.is-valid select,
.form-check.active {
  border-bottom: 2px solid var(--bs-success);
}

/* Styling für die Form-Controls wie Radio und Checkbox */
.form-check {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0;
}
.form-check input {
  flex-shrink: 0;
}
.form-check label {
  display: inline-block;
  flex-grow: 1;
  font-size: 0.9rem;
  line-height: 1rem;
  padding: 0.5rem;
}
.form-check label small {
  font-size: 0.75rem;
}

.input-wrapper.radio .text-center .form-check-label,
.input-wrapper.checkbox .text-center .form-check-label,
.text-center input {
  text-align: center;
}

/* slider */

input[type='range'] {
  -webkit-appearance: none; /* Standard-Styling reset */
  appearance: none;
  width: 100%;
  height: 14px; /* Höhe des Balkens */
  background: var(--color-gray);
  border-radius: 4px;
  outline: none;
}

/* Track (Chrome/Edge/Safari) */
input[type='range']::-webkit-slider-runnable-track {
  height: 14px; /* Höhe des Balkens */
  background: var(--color-gray);
  border-radius: 4px;
}

/* Thumb (Schieber) */
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-btn-primary); /* Farbe des Thumb */
  border: 2px solid var(--bs-warning); /* optionaler Rand */
  cursor: pointer;
  margin-top: -5px;
}

/* Optional: beim Fokussieren */
input[type='range']:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.3);
}

/* opt-in */
.input-wrapper.checkbox.opt-in {
  margin-top: 0.5rem;
}
.input-wrapper.checkbox .form-check,
.input-wrapper.radio .form-check,
.input-wrapper.checkbox.opt-in .form-check {
  text-align: left;
}
.input-wrapper.checkbox.opt-in .form-check {
  align-items: normal;
}
.input-wrapper.checkbox.opt-in .form-check input {
  display: inline-block;
  margin-left: 0;
  margin-top: 0.7rem !important;
}
.input-wrapper.checkbox.opt-in .form-check label {
  font-size: 0.9rem;
  white-space: normal;
  line-height: normal;
}

.evc-form-modal-link {
  color: var(--color-text);
}

/* focus style weg. */
input:focus,
select:focus,
textarea:focus,
.form-check-input:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--color-gray-darker);
}