/* ============================================
   LRA Esslingen – Corporate Design v2
   Gelb:    #FFED00
   Blau:    #0092D0
   Schwarz: #000000
   Grau:    #D9D9D9
   ============================================ */

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden !important;
}

/* --- Body --- */
body {
  background-color: #f4f4f4 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1a1a1a !important;
  border-top: 5px solid #FFED00 !important;
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body[style] {
  padding-bottom: 0 !important;
}

/* --- Navbar / Header --- */
.navbar {
  background-color: #000000 !important;
  border-bottom: 4px solid #FFED00 !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  color: #FFED00 !important;
  font-weight: bold !important;
}

.navbar-toggle {
  border-color: #FFED00 !important;
}

.navbar-toggle .icon-bar {
  background-color: #FFED00 !important;
}

/* --- Hauptinhalt --- */
#outerframeContainer {
  background-color: #ffffff !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
}

/* --- Main Container --- */
main#surveys-list-container,
#surveys-list-container {
  min-height: 0 !important;
  height: auto !important;
}

.container-md {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#dynamicReloadContainer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Umfrage Titel --- */
.ls-label-question,
.question-container .ls-label-question {
  color: #000000 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

/* --- Gruppen Titel --- */
.group-container .group-title {
  color: #000000 !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  border-bottom: 3px solid #FFED00 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* --- Links --- */
a,
a:visited {
  color: #0092D0 !important;
  text-decoration: none !important;
}

a:hover {
  color: #006fa3 !important;
  text-decoration: underline !important;
}

/* --- Buttons --- */
.btn {
  border-radius: 4px !important;
  font-weight: bold !important;
  padding: 10px 24px !important;
  font-size: 15px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  cursor: pointer !important;
}

.btn-primary,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary,
.btn-success,
button[type="submit"],
.token-page .btn-primary,
#token-form .btn-primary {
  background-color: #0092D0 !important;
  border: 2px solid #0092D0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover {
  background-color: #006fa3 !important;
  border-color: #006fa3 !important;
  color: #ffffff !important;
}

.btn-outline-secondary,
.btn-cancel,
.btn-default {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

.btn-outline-secondary:hover,
.btn-cancel:hover {
  background-color: #f0f0f0 !important;
  box-shadow: none !important;
}

/* --- Fortschrittsbalken --- */
.progress {
  background-color: #D9D9D9 !important;
  height: 6px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.progress-bar {
  background-color: #FFED00 !important;
  transition: width 0.4s ease !important;
}

/* --- Radio Buttons --- */
.radio-item label::before {
  border: 2px solid #888 !important;
  background-color: #ffffff !important;
}

.radio-item input[type=radio]:checked + label::before {
  border-color: #0092D0 !important;
  background-color: #ffffff !important;
}

.radio-item input[type=radio]:checked + label::after {
  background-color: #0092D0 !important;
  transform: scale(1, 1) !important;
}

.radio-item input[type=radio]:checked + label {
  color: #0092D0 !important;
}

body .answer-item label::after {
  background-color: #0092D0 !important;
}

/* --- Checkboxen --- */
.checkbox-item label::before {
  border: 2px solid #888 !important;
  background-color: #ffffff !important;
}

.checkbox-item input[type=checkbox]:checked + label::before {
  border-color: #0092D0 !important;
}

.checkbox-item input[type=checkbox]:checked + label::after {
  color: #0092D0 !important;
}

.checkbox-item input[type=checkbox]:checked + label {
  color: #0092D0 !important;
}

/* --- Formularfelder --- */
.form-control {
  border: 1.5px solid #cccccc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  transition: border-color 0.2s !important;
}

.form-control:focus {
  border-color: #0092D0 !important;
  box-shadow: 0 0 0 3px rgba(0, 146, 208, 0.15) !important;
  outline: none !important;
}

.form-select {
  border: 1.5px solid #cccccc !important;
  border-radius: 4px !important;
}

.form-select:focus {
  border-color: #0092D0 !important;
  box-shadow: 0 0 0 3px rgba(0, 146, 208, 0.15) !important;
}

/* --- Input Group / Icons --- */
.input-group-text,
label .input-group-text,
.input-group-append .btn,
.input-group-append .input-group-text {
  background-color: #0092D0 !important;
  border-color: #0092D0 !important;
  color: #ffffff !important;
}

/* --- Hinweise & Pflichtfeld --- */
.help-block,
.questionhelp,
.question-container .ls-question-message {
  color: #555555 !important;
  font-size: 14px !important;
}

.asterisk,
.mandatory_star {
  color: #cc0000 !important;
}

/* --- Info Box --- */
.alert-info,
div.alert.alert-info {
  background-color: #e8f5fb !important;
  border: 1px solid #0092D0 !important;
  border-left: 4px solid #0092D0 !important;
  color: #004d70 !important;
  border-radius: 4px !important;
}

/* --- Datepicker --- */
.tempus-dominus-widget .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-months div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-years div:not(.no-highlight).active,
.tempus-dominus-widget button {
  background-color: #0092D0 !important;
  border-color: #0092D0 !important;
  color: #ffffff !important;
}

/* --- Slider --- */
.slider-list .slider .slider-handle,
.slider-list .slider .slider-selection {
  background-color: #0092D0 !important;
}

.slider-list .slider .tooltip .tooltip-inner {
  color: #0092D0 !important;
}

/* --- Sprache --- */
.form-change-lang #language-changer-select {
  color: #0092D0 !important;
}

/* --- Startseite Logo ausblenden --- */
#surveys-list-jumbotron svg,
#surveys-list-jumbotron .ls-logo,
#surveys-list-jumbotron span.h3 {
  display: none !important;
}

/* --- Umfrageliste Buttons --- */
.surveys-list .btn,
.surveytitle,
a.surveytitle {
  background-color: #FFED00 !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
}

.surveys-list .btn:hover,
.surveytitle:hover {
  background-color: #e6d400 !important;
  color: #000000 !important;
}

ul.surveys-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

.surveys-list .btn-group {
  display: flex !important;
  align-items: stretch !important;
}

/* --- Danke-Seite --- */
.completed-wrapper .completed-heading {
  color: #000000 !important;
  border-bottom: 3px solid #FFED00 !important;
  padding-bottom: 8px !important;
}

/* --- Footer --- */
footer#surveyListFooter,
#surveyListFooter {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  position: relative !important;
  background-color: #000000 !important;
  border-top: 4px solid #FFED00 !important;
  padding: 16px 24px !important;
  margin-top: 100px !important;
  margin-bottom: 0 !important;
}

footer#surveyListFooter *,
#surveyListFooter * {
  color: #ffffff !important;
}

footer#surveyListFooter a,
#surveyListFooter a {
  color: #ffffff !important;
}

footer#surveyListFooter img,
#surveyListFooter img {
  filter: brightness(0) invert(1) !important;
}

/* --- Responsiv Mobile --- */
@media (max-width: 768px) {
  #outerframeContainer {
    padding: 16px 12px !important;
  }

  .btn {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  ul.surveys-list {
    flex-direction: column !important;
  }

  .surveys-list li.btn-group {
    width: 100% !important;
  }

  .group-container .group-title {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px !important;
  }

  .ls-label-question,
  .question-container .ls-label-question {
    font-size: 1.1rem !important;
  }
}

/* --- Footer Logo ausblenden --- */
footer#surveyListFooter img,
#surveyListFooter img,
#surveyListFooter .col-6.col-md-12 {
  display: none !important;
}

/* --- Beschreibungstext linksbündig --- */
.survey-name,
.survey-welcome,
#outerframeContainer .jumbotron,
#outerframeContainer p {
  text-align: left !important;
}

#outerframeContainer {
  max-width: 1800px !important;
}

/* --- Fragen-Labels schwarz statt blau --- */
.question-container label,
.ls-label-question,
.checkbox-item label,
td label {
  color: #000000 !important;
}

/* --- Schriftart Arial global --- */
* {
  font-family: Arial, Helvetica, sans-serif !important;
}