/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
.row {
    justify-content: center;
}

a {
    color: #005980;
    font-size: inherit;
    text-decoration: underline;
}

a:hover{
    color: #005980;
}

/*
.question-title-container{
    display: flex;
    justify-content: center;
}
*/
.btn-primary{
    background-color: #005980;
    border-color: #005980;
}
.btn-primary:hover {
    background-color: #005980 !important;
    border-color: #005980 !important;
}

.space-col{
    margin-bottom: 0px;
}

.question-container{
    margin-top: 0px;
    margin-bottom: 0px;
}

#navigator-container{
    margin-top: 0px;
}


.tiles-fix .ls-answers.checkbox-list.answers-list.multiple-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.tiles-fix .ls-answers.checkbox-list.answers-list.multiple-list > ul.list-unstyled {
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  flex: unset !important;
  list-style: none !important;
}

.tiles-fix .ls-answers ul.list-unstyled {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

.tiles-fix .ls-answers li.question-item {
  margin: 0 !important;
}

.tiles-fix .ls-answers li.question-item > label {
  position: relative !important;
  box-sizing: border-box !important;

  border: 1px solid #dcdcdc !important;
  border-radius: 10px !important;
  background: #fff !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  padding: 14px 12px 12px 38px !important;
  min-height: 220px !important;
}

.tiles-fix .ls-answers li.question-item > label input[type="checkbox"],
.tiles-fix .ls-answers li.question-item > label input[type="radio"] {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  margin: 0 !important;
}

.tiles-fix .ls-answers li.question-item img {
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

.tiles-fix .ls-answers li.question-item > label img {
  width: min(140px, 100%) !important;
  height: auto !important;             /* key: prevents distortion */
  object-fit: contain !important;
  margin: 0 auto 10px auto !important;

  aspect-ratio: 1 / 1 !important;      /* change if your icons are not square */
}

.tiles-fix .ls-answers li.question-item > label .answertext,
.tiles-fix .ls-answers li.question-item > label .ls-label,
.tiles-fix .ls-answers li.question-item > label .control-label {
  text-align: center !important;
  line-height: 1.2 !important;

  min-height: 3.6em !important;

  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;

  margin-top: auto !important;
}

/*
.tiles-fix .ls-answers li.question-item > label .answertext {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
*/
/* Ändert das Design von Radio-Buttons (Einfachauswahl) und Checkboxen (Mehrfachauswahl) */
.form-check-input:checked {
    background-color: #005980 !important; /* Farbe des Hakens / Punktes */
    border-color: #005980 !important;
}
/* ===================================================
   1. BOOTSTRAP-SYSTEM VARIABLEN (ENTFERNT ALLES GRÜN)
   =================================================== */
:root, :host, body {
    --bs-primary: #005980 !important;
    --bs-primary-rgb: 0, 89, 128 !important;
    --bs-link-color: #005980 !important;
    --bs-link-hover-color: #004463 !important;
    --bs-component-active-bg: #005980 !important;
}
/* ===================================================
   2. SCHRIFTEN, LINKS & TEXTELEMENTE
   =================================================== */
body, p, span, label, .question-text, .answer-text {
    color: #1a202c !important; /* Haupttext dunkelgrau/schwarz */
}
/* Erzwingt Ihre Wunschfarbe für alle grünen Text-Links oder hervorgehobene Schrift */
a, .text-primary, .ls-answers label, label.control-label {
    color: #005980 !important;
}
/* ===================================================
   3. HAKEN & PUNKTE (EINGABEFELDER ERZWINGEN)
   =================================================== */
/* Radio-Buttons & Checkboxen bei Auswahl */
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #005980 !important;
    border-color: #005980 !important;
}
/* Weißer Punkt für Radio-Buttons */
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
/* Weißer Haken für Checkboxen */
.form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
/* ===================================================
   4. RAHMEN & FOKUS (EINGABEFELDER)
   =================================================== */
.form-control, input[type="text"], textarea, select {
    border: 2px solid #005980 !important;
}

.form-control:focus, .form-check-input:focus {
    border-color: #004463 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 89, 128, 0.25) !important;
}