/* =========================================================
   LimeSurvey (Fruity/Bootstrap) – Button-Antworten FINAL
   - kein Overlap / kein "zusammenkleben"
   - sauberer Abstand
   - gute Lesbarkeit (keine schmalen Wort-Türme)
   ========================================================= */

/* 0) Bootstrap btn-group deaktivieren (das verursacht das Überlappen) */
.ls-answers .btn-group,
.ls-answers .btn-group-vertical {
  display: contents !important;
}

/* 1) Antwortbereich als flex-container mit Umbruch + Abstand */
.ls-answers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* 2) Falls LimeSurvey UL/LI rendert: neutralisieren */
.ls-answers ul,
.ls-answers li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* 3) Buttons (Label + Button) als eigenständige "Kacheln" */
.ls-answers label.btn,
.ls-answers .btn {
  display: block !important;
  position: relative !important;
  z-index: 0 !important;

  /* Abstand/Optik */
  margin: 0 !important;                 /* killt margin-left:-1px */
  border-radius: 8px !important;
  box-shadow: none !important;

  /* Text */
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 12px 18px !important;
  text-align: center !important;

  /* Layout: nie zu schmal -> verhindert Wort-Türme
     300px ist ein guter Wert; du kannst 280–340 testen. */
  min-width: 300px !important;
  flex: 1 1 300px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  /* Keine Silbentrennung mitten im Wort */
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* 4) Wenn Button aktiv/checked ist: NICHT nach vorne springen */
.ls-answers .btn.active,
.ls-answers label.btn.active,
.ls-answers .btn-check:checked + .btn,
.ls-answers input[type="radio"]:checked + label.btn,
.ls-answers input[type="checkbox"]:checked + label.btn {
  z-index: 0 !important;
}

/* 5) Du nutzt <p> im Buttontext -> Default-Margins entfernen */
.ls-answers label.btn p,
.ls-answers .btn p {
  margin: 0 !important;
}
/* ===== Buttons immer untereinander (1 pro Zeile) ===== */

/* btn-group darf nicht "kleben" */
.ls-answers .btn-group,
.ls-answers .btn-group-vertical {
  display: block !important;
}

/* Container: vertikal stapeln */
.ls-answers {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Jeder Button volle Breite */
.ls-answers label.btn,
.ls-answers .btn {
  display: block !important;
  width: 100% !important;
  max-width: 520px;              /* optional: begrenzt die Breite, damit es schöner wirkt */
  text-align: center !important;
  padding: 12px 18px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* <p>-Margins entfernen (weil du <p> nutzt) */
.ls-answers label.btn p,
.ls-answers .btn p {
  margin: 0 !important;
}