/* ============================================
   1. Font import (Poppins, Google Fonts)
   ============================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap'); */

/* ============================================
   2. Card container
   ============================================ */
.lb-contact-form {
  background: #ffffff;
  border: 1px solid #00AECC;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  max-width: 970px;
  margin: 40px auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* ============================================
   3. Field labels -> green
   ============================================ */
.lb-contact-form .ff-el-input--label label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #278956;
  margin-bottom: 8px;
}

/* ============================================
   4. Input fields + placeholder (all input types,
   including the Kommune searchable dropdown, which
   uses its own internal class from the Choices.js
   library and does not inherit .ff-el-form-control)
   ============================================ */
.lb-contact-form .ff-el-form-control {
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #334155;
  transition: all 0.2s ease-in-out;
}
.lb-contact-form .ff-el-form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}
.lb-contact-form ::placeholder,
.lb-contact-form .ff-el-form-control::placeholder,
.lb-contact-form .choices__input,
.lb-contact-form .choices__input::placeholder,
.lb-contact-form .choices__placeholder {
  color: #94a3b8 !important;
  opacity: 1;
  font-weight: 600;
}

/* ============================================
   5. Radio & Checkbox options
   ============================================ */
.lb-contact-form .ff-el-form-check {
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.lb-contact-form .ff-el-form-check:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
/* Make the whole option box clickable: the label (the actual
   click target) fills the entire card instead of only the text */
.lb-contact-form .ff-el-form-check-label {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}

/* Decision-tree steps ONLY (Steps 1-4, all steps except the last):
   answer option text is black and not bold. Real step-wrapper
   class is ".fluentform-step" (not ".ff-step-1/2/3/4/5").
   :not(:last-of-type) = "every step except the last one". */
.lb-contact-form .fluentform-step:not(:last-of-type) .ff-el-form-check label,
.lb-contact-form .fluentform-step:not(:last-of-type) .ff-el-form-check-label {
  color: #000000 !important;
  font-weight: 400 !important;
}

/* Final step (Kontaktformular) Ja/Nein-style options: neutral
   input-text color instead of the default link-blue */
.lb-contact-form .fluentform-step:last-of-type .ff-el-form-check label,
.lb-contact-form .fluentform-step:last-of-type .ff-el-form-check-label {
  color: #334155 !important;
  font-weight: 400 !important;
}

/* ============================================
   6. Buttons — Previous/Next (teal) and Submit (pink)
   ============================================ */
.lb-contact-form .ff-btn-next,
.lb-contact-form .ff-btn-prev {
  padding: 10px 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background-color: #00AECC !important;
  color: #ffffff !important;
  border-color: #00AECC !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 50px !important;
  transition: all 0.2s;
}
.lb-contact-form .ff-btn-next:hover,
.lb-contact-form .ff-btn-prev:hover {
  background-color: #0090A8 !important;
  border-color: #0090A8 !important;
}
.lb-contact-form .fluentform-step:not(:last-of-type) .ff-btn-next,
.lb-contact-form .fluentform-step:not(:last-of-type) .ff-btn-prev {
  margin-top: 24px !important;
}

.lb-contact-form .ff-btn-submit,
.fluentform-widget-wrapper .lb-contact-form .ff-el-group .ff-btn-submit
{
  padding: 10px 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background-color: #DA2768 !important;
  color: #ffffff !important;
  border-color: #DA2768 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 50px !important;
  transition: all 0.2s;
}
.lb-contact-form .ff-btn-submit:hover {
  background-color: #B81F57 !important;
  border-color: #B81F57 !important;
}

/* ============================================
   7. Steps use automatic height (no fixed height)
   ============================================ */
.lb-contact-form .fluentform-step {
  height: auto;
  min-height: 0;
}

/* ============================================
   8. Spacing
   ============================================ */
.lb-contact-form .fluentform-step:not(:last-of-type) .ff-el-group {
  margin-bottom: 50px !important;
}
.lb-contact-form .ff-step-header--progress {
  margin-bottom: 40px !important;
}
/* Article links: ">" arrow, underline only on hover/focus */
.lb-contact-form .ff-custom_html a:not(.eh-home-btn) {
  display: inline-block;
  margin-top: 30px !important;
  text-decoration: none !important;
}
.lb-contact-form .ff-custom_html a:not(.eh-home-btn):hover,
.lb-contact-form .ff-custom_html a:not(.eh-home-btn):focus-visible {
  text-decoration: underline !important;
}
/* Arrow: inline-block keeps it out of the underline; size/position tunable */
.lb-contact-form .ff-custom_html a:not(.eh-home-btn)::after {
  content: ">";
  display: inline-block;
  margin-left: 0.35em;
  font-size: 1.25em;
  line-height: 1;
  position: relative;
  top: 0.1em;
}

/* ============================================
   9. Home button "zurück zur Startseite" (Nein path, step 5)
   ============================================ */
.eh-success-wrap {
  text-align: center;
}

/* Same look as the submit button; vertical padding matches
   the other buttons (10px), horizontal 30px, text 16px */
.eh-home-btn {
  display: inline-block;
  padding: 10px 30px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  background-color: #DA2768 !important;
  color: #ffffff !important;
  border: 1px solid #DA2768 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.2s;
  white-space: nowrap;   /* keep the label on one line; width follows the text */
}
.eh-home-btn:hover {
  background-color: #B81F57 !important;
  border-color: #B81F57 !important;
  color: #ffffff !important;
}

/* ============================================
   10. Progress bar + step title text
   ============================================ */
.lb-contact-form .ff-el-progress-status {
  font-size: 13px !important;
  color: #000000 !important;
  font-weight: 400 !important;
}
/* Progress fill uses the brand teal */
.lb-contact-form .ff-el-progress-bar {
  background-color: #00AECC !important;
}
.lb-contact-form .ff-el-progress-bar span {
  color: white !important;
}

/* ============================================
   11. Artikel path + "Nein": last step shows only
   the progress bar and a centered home button
   (no captcha, no Zurück, no Senden -> no submission, no email)
   ============================================ */
.lb-contact-form.eh-no-further-questions .fluentform-step:last-of-type .step-nav,
.lb-contact-form.eh-no-further-questions .fluentform-step:last-of-type .ff-btn-prev,
.lb-contact-form.eh-no-further-questions .ff_submit_btn_wrapper,
.lb-contact-form.eh-no-further-questions .ff-btn-submit,
.lb-contact-form.eh-no-further-questions .frc-captcha {
  display: none !important;
}

/* Center the home button horizontally and vertically in the step */
.lb-contact-form .eh-nein-end {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}