.af-container-style-pane {
  padding: 2rem !important;
}

/* Auf schmalen Bildschirmen etwas weniger */
@media (max-width: 600px) {
  #bootstrap-theme .af-container-style-pane {
  padding: 1.25rem !important;
  }
}

/* === Einzeilige Eingabefelder === */
.crm-af-field input[type="text"],
.crm-af-field input[type="email"],
.crm-af-field input[type="tel"],
.crm-af-field input[type="number"],
.crm-af-field input[type="url"] {
  box-sizing: border-box !important;
  height: 46px !important;
  padding: 0 1.25rem !important;
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #1f2937 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.crm-af-field textarea {
  box-sizing: border-box !important;
  min-height: 120px !important;
  padding: 0.6rem 1.25rem !important;
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  color: #1f2937 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.crm-af-field input:focus,
.crm-af-field textarea:focus {
  border-color: #00468a !important;
  box-shadow: 0 0 0 3px rgba(0, 70, 138, 0.1) !important;
  outline: none !important;
}

.crm-af-field input::placeholder,
.crm-af-field textarea::placeholder {
  color: #737373 !important;
  opacity: 1 !important;
}

/* Platzhalter "Dropdown-Liste" optisch durch "auswählen" ersetzen */
.crm-af-field .select2-choice.select2-default .select2-chosen {
  font-size: 0 !important;
}
.crm-af-field .select2-choice.select2-default .select2-chosen::after {
  content: "auswählen";
  font-size: 1rem;
  color: #737373;   /* gleiche Platzhalterfarbe wie bei den Inputfeldern */
}

/* === Dropdown (Select2) === */
/* Äußeren Container entkleiden: kein eckiger Rahmen mehr */
.crm-af-field .select2-container,
.crm-af-field .select2-container.form-control {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Inneres Element als Pille, gleiche Höhe wie die anderen Felder */
.crm-af-field .select2-container .select2-choice {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
  padding: 0 1.25rem !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  color: #1f2937 !important;
  line-height: normal !important;
  box-shadow: none !important;
}
/* Pfeil rechts vertikal zentrieren, ohne Kasten */
.crm-af-field .select2-container .select2-choice .select2-arrow {
  top: 0 !important;
  right: 10px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.crm-af-field .select2-container.select2-dropdown-open .select2-choice,
.crm-af-field .select2-container-active .select2-choice {
  border-color: #00468a !important;
  box-shadow: 0 0 0 3px rgba(0, 70, 138, 0.1) !important;
}

/* === Abstände === */
#bootstrap-theme .af-layout-inline {
margin-bottom: 1.5rem !important;
}
#bootstrap-theme .crm-af-field-label {
display: inline-block !important;
margin-bottom: 0.4rem !important;
}

/* === Submit-Button === */
.af-button.btn.btn-primary {
  margin: 0.5rem 0 0.5rem 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 0 1.25rem !important;
  border: 2px solid #00468a !important;
  border-radius: 96px !important;
  background: #00468a !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color .1s ease-in-out, background-color .1s ease-in-out,
  border-color .1s ease-in-out, box-shadow .1s ease-in-out !important;
}

.af-button.btn.btn-primary:hover,
.af-button.btn.btn-primary:focus {
  background-color: #fff !important;
  border-color: #00468a !important;
  color: #00468a !important;
  box-shadow: 0 4px 6px -1px #0000001f, 0 2px 4px -2px #00000014,
  0 8px 12px -2px #0000000a, 0 0 0 1px #00000005 !important;
/* CSS-Klassen FormBuilder */
/* Checkbox-Listen im markierten Container nicht abschneiden */
#crm-container .checkbox-nicht-scrollen .crm-af-field,
#crm-container .checkbox-nicht-scrollen .crm-checkbox-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}
/* Optionen untereinander und mehrzeilige Labels erlauben */
#crm-container .checkbox-nicht-scrollen .crm-checkbox-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.4em !important;
  margin-bottom: 0.5em !important;
  list-style: none !important;
  white-space: normal !important;
  min-width: 0 !important;
}
/* Checkbox ausrichten */
#crm-container .checkbox-nicht-scrollen .crm-checkbox-list input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin-top: 0.2em !important;
}
/* Label-Text darf umbrechen, aber nicht mitten im Wort */
#crm-container .checkbox-nicht-scrollen .crm-checkbox-list label {
  white-space: normal !important;
  line-height: 1.4 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Optional: zweispaltige Anordnung Checkboxen – als CSS-Klasse am Container im FormBuilder setzen */
.checkbox-zweispaltig {
  display: flex !important;
  flex-wrap: wrap !important;
}
.checkbox-zweispaltig li {
  flex: 0 0 48% !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .checkbox-zweispaltig li {
    flex: 0 0 100% !important;
  }
}

/* Radiobuttonfeld: Parent auf normales Block-Layout setzen */
#crm-container .radio-untereinander .crm-af-field {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  column-count: auto !important;
  columns: auto !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* Jede Radio-Option als eigene Zeile */
#crm-container .radio-untereinander .crm-af-field label.radio-inline {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-left: 0 !important;
  margin-bottom: 0.5em !important;
  padding-left: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
/* Bootstrap-Abstand zwischen Inline-Radios entfernen */
#crm-container .radio-untereinander .crm-af-field label.radio-inline + label.radio-inline {
  margin-left: 0 !important;
}
/* Radio und Text ausrichten */
#crm-container .radio-untereinander .crm-af-field label.radio-inline input[type="radio"] {
  margin-right: 0.4em !important;
  position: static !important;
  vertical-align: middle !important;
}
/* Optional: zweispaltige Anordnung Radiobuttons – als CSS-Klasse am Container im FormBuilder setzen */
.radio-zweispaltig .crm-af-field {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
}
.radio-zweispaltig .crm-af-field label.radio-inline {
  flex: 0 0 48% !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .radio-zweispaltig .crm-af-field label.radio-inline {
    flex: 0 0 100% !important;
  }
}

/* Abstände FormBuilder f. Container */
.abstand-bottom-klein {
  margin-bottom: 0.5rem;
}
.abstand-bottom-mittel {
  margin-bottom: 1rem;
}
.abstand-bottom-gross {
  margin-bottom: 2rem;
}
.abstand-top-klein {
  margin-top: 0.5rem;
}
.abstand-top-mittel {
  margin-top: 1rem;
}
.abstand-top-gross {
  margin-top: 2rem;
}}