:root{
  --vl-page-max: 1260px;
  --vl-page-pad: 20px;

  --vl-col-width: 66.6666666667%;
  --vl-col-offset: 8.3333333333%;

  --vl-content-max: 980px;
  --vl-gutter: 56px;

  --vl-bg: #ffffff;
  --vl-footer-bg: #f5f5f7;

  --vl-text: #1d1d1f;
  --vl-muted: #6e6e73;

  --vl-border: #d2d2d7;
  --vl-border-strong: #c7c7cc;

  --vl-blue: #0071e3;
  --vl-green: #008009;

  --vl-radius-card: 12px;
  --vl-radius-page: 18px;
  --vl-radius-btn: 10px;

  --vl-align-indent: 57px; /* 43px + 14px */
}

/* ================= BASE ================= */
html, body{
  background: var(--vl-bg);
  color: var(--vl-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove Bootstrap "Card Look" */
.panel, .card, .ls-panel,
.question-wrapper, .ls-question{
  background: transparent;
  box-shadow: none;
  border: 0;
}

.text-primary{ color: var(--vl-text); }

/* ================= OUTER WRAPPER ================= */
.space-col,
.col-centered{
  max-width: var(--vl-page-max) !important;
  margin: 0 auto !important;
  padding-left: var(--vl-page-pad) !important;
  padding-right: var(--vl-page-pad) !important;
}

/* Neutralize nested containers */
.container,
.survey-main,
.navigator{
  max-width: 100%;
}

/* ================= CONTENT COLUMN ================= */
#lime-survey-container{
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--vl-content-max);
  margin: 0 auto !important;
  padding: 40px 0;
}

@media (max-width: 1024px){
  #lime-survey-container{
    max-width: 100%;
    padding: 24px 0;
  }
}

/* ================= PAGE BOX ================= */
.survey-page{
  background: var(--vl-bg);
  border-radius: var(--vl-radius-page);
  padding: 48px;
  box-shadow: none !important;
  border: 0;
}

@media (max-width: 640px){
  .survey-page{
    padding: 28px 20px;
    border-radius: 16px;
  }
}

/* ================= HEADER ================= */
.survey-header{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vl-border);
}

.survey-logo{
  width: 48px;
  height: 48px;
  background: #f5f5f7;
  border-radius: var(--vl-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.survey-logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.survey-logo:empty::before{
  content: "";
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--vl-blue) 0%, #00a2ff 100%);
  border-radius: 8px;
  display: block;
}

.survey-title-wrapper{
  flex: 1;
  min-width: 0;
}

.survey-title{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--vl-text);
}

.survey-description{
  font-size: 17px;
  color: var(--vl-muted);
  margin-top: 8px;
}

.vilion-brand-header{
  padding: 0 0 14px;
  margin: 0 0 18px;
}

.vilion-brand-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

.vilion-brand-logo{
  width: 43px;
  height: 43px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.vilion-brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vilion-brand-title{
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0;
  color: var(--vl-text);
}

.vilion-brand-subtitle{
  margin: 10px 0 0;
  font-size: 17px;
  color: var(--vl-muted);
}

.vilion-brand-divider{
  height: 1px;
  background: var(--vl-border);
  margin-top: 14px;
}

/* Navbar brand logo */
.navbar-brand{ padding: 0; }
.vilion-site-logo{ height: 30px; width: auto; display: block; }

@media (max-width: 768px){
  .survey-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .survey-title{ font-size: 28px; }
}

/* ================= PROGRESS ================= */
.progress{
  height: 8px;
  border-radius: 999px;
  margin: 18px 0 26px;
  overflow: hidden;
  background: #e5e5e5;
}

.progress-bar{
  background: var(--vl-green);
  border-radius: 20px;
  font-size: 0;
}

/* ================= QUESTIONS ================= */
.vilion-question-meta{
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
}

.group-title{
  font-size: 17px;
  font-weight: 600;
  margin: 6px 0 16px;
  color: var(--vl-text);
}

.question-title,
.ls-question-text,
.question-text,
.question-container h3{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 22px;
  letter-spacing: -0.3px;
  color: var(--vl-text);
}

.question-title::before,
.ls-question-text::before,
.question-text::before{
  content: none !important;
}

.question-container{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  margin-bottom: 2em;
}

.question-container .question-title-container,
.question-container .question-content,
.question-container .question-help-container{
  background: transparent !important;
}

.asterisk,
.required-indicator{
  color: #ff3b30;
  font-weight: 600;
  margin-left: 4px;
}

.question-help,
.text-info,
.help-block{
  display: none;
}

/* ================= TEXT INPUTS ================= */
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
.form-control{
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--vl-radius-card);
  border: 2px solid var(--vl-border-strong);
  background: #fff;
  font-size: 17px;
  font-family: inherit;
  color: var(--vl-text);
  transition: all 0.2s ease;
  outline: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
textarea:hover,
.form-control:hover{
  border-color: #b4b4b8;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
.form-control:focus{
  border-color: var(--vl-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.10);
}

textarea{
  min-height: 120px;
  resize: vertical;
}

/* ================= ANSWERS ================= */
ul.answers-list,
ul.list-unstyled,
.question ul,
.question .answers-list,
.answer-list,
.answer-list ul,
ul[role="list"],
li.answer-item{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

li.answer-item::marker{
  content: "" !important;
}

.ls-answers input[type="radio"],
.ls-answers input[type="checkbox"],
.answer-item input[type="radio"],
.answer-item input[type="checkbox"],
.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

li.answer-item{
  position: relative;
  background: #fff;
  border: 1px solid #949494;
  border-radius: var(--vl-radius-card);
  margin: 12px 0;
  box-shadow: none !important;
  transform: none !important;
}

.ls-answers label,
.answer-container label,
.answer-item label,
.radio-item label,
.checkbox-item label,
.answer-item .control-label{
  display: block !important;
  width: 100% !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  color: var(--vl-text);
  background: transparent;
  border: 0 !important;
  border-radius: var(--vl-radius-card);
}

li.answer-item:hover{
  border-color: var(--vl-blue) !important;
  box-shadow: none !important;
  transform: none !important;
  border-width: 2px;
}

li.answer-item:has(input:checked){
  border-color: var(--vl-blue) !important;
  box-shadow: none !important;
  border-width: 2px;
}

.answer-item label::after,
.answer-item .control-label::after,
.answer-item label::before,
.answer-item .control-label::before,
.answer-item .checkmark,
.answer-item .fa-check,
.answer-item .icon-check,
.answer-item .ls-choice-check{
  content: none !important;
  display: none !important;
}

.noanswer-item{
  display: none !important;
}

/* ================= MATRIX ================= */
.ls-answers.table,
table.ls-answers{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: 24px;
}

.ls-answers thead th,
table.ls-answers thead th{
  font-size: 14px;
  font-weight: 600;
  color: var(--vl-muted);
  text-align: center;
  padding: 12px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ls-answers tbody tr,
table.ls-answers tbody tr{
  background: #f5f5f7;
  border-radius: var(--vl-radius-card);
}

.ls-answers tbody td,
table.ls-answers tbody td{
  padding: 16px 12px;
  text-align: center;
}

.ls-answers tbody td:first-child,
table.ls-answers tbody td:first-child{
  font-weight: 500;
  text-align: left;
  padding-left: 20px;
}

/* ================= NAVIGATION BUTTONS ================= */
.button-container,
.survey-navigation,
.navigator .ls-move-buttons{
  display: flex;
  gap: 16px;
  justify-content: left;
  margin-top: 32px;
  padding-top: 20px;
}

.navigator .btn,
.survey-navigation .btn,
.button-container .btn{
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--vl-radius-btn);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: -0.2px;
  outline: none;
  min-width: 240px;
  text-align: center;
}

.navigator .btn-primary,
.survey-navigation .btn-primary,
.button-container .btn-primary{
  background: var(--vl-blue);
  border: 2px solid var(--vl-blue);
  color: #fff;
}

.navigator .btn-primary:hover,
.survey-navigation .btn-primary:hover,
.button-container .btn-primary:hover{
  background: #0077ed;
}

.navigator .btn-secondary,
.survey-navigation .btn-secondary,
.button-container .btn-secondary{
  background: #fff;
  border: 1px solid var(--vl-blue);
  color: var(--vl-blue);
}

.navigator .btn-secondary:hover,
.survey-navigation .btn-secondary:hover,
.button-container .btn-secondary:hover{
  background: #f5f8ff;
}

@media (max-width: 640px){
  .button-container,
  .survey-navigation,
  .navigator .ls-move-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  .navigator .btn,
  .survey-navigation .btn,
  .button-container .btn{
    min-width: 0;
    width: 100%;
  }
}

/* ================= BOOTSTRAP ALERT MODAL ================= */
#bootstrap-alert-box-modal .modal-content{
  border-radius: 14px;
  border: 1px solid var(--vl-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

#bootstrap-alert-box-modal .modal-header{
  border-bottom: 1px solid #e5e5e5;
}

#bootstrap-alert-box-modal .modal-footer{
  border-top: 1px solid #e5e5e5;
}

/* ================= FOOTER ================= */
.vilion-footer{
  background: var(--vl-footer-bg);
  margin-top: 60px;
  padding: 28px 0 34px;
}

.vilion-footer-inner{
  max-width: var(--vl-page-max);
  margin: 0 auto;
  padding: 0 var(--vl-page-pad);
  text-align: left;
  color: var(--vl-muted);
  font-size: 12px;
  line-height: 1.2;
}

.vilion-footer-note{ margin: 0 0 18px; }

.vilion-footer-divider{
  height: 1px;
  background: #e5e5e5;
  margin: 16px 0 18px;
}

.vilion-footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.vilion-footer-links a{
  color: var(--vl-muted);
  text-decoration: none;
}

.vilion-footer-links a:hover{ text-decoration: underline; }

.vilion-footer-sep{
  margin: 0 8px;
  color: #c7c7cc;
}

/* ================= SMALL FIXES ================= */
.text-center{ text-align: left; }

#surveyListFooter{ display: none; }

/* ================= ALIGNMENT OVERRIDES ================= */
#lime-survey-container > .survey-header,
#lime-survey-container > .survey-page,
#lime-survey-container > .survey-welcome,
#lime-survey-container > .survey-navigation,
#lime-survey-container .survey-content,
#lime-survey-container .group-container,
#lime-survey-container .question-container{
  padding-left: var(--vl-gutter) !important;
  padding-right: var(--vl-gutter) !important;
}

#lime-survey-container .vilion-brand-header{
  padding-left: var(--vl-gutter) !important;
  padding-right: var(--vl-gutter) !important;
}

#lime-survey-container .progress,
#lime-survey-container .group-container,
#lime-survey-container .question-container,
#lime-survey-container .survey-navigation{
  padding-left: calc(var(--vl-gutter) + var(--vl-align-indent)) !important;
  padding-right: var(--vl-gutter) !important;
}

#lime-survey-container .progress{
  max-width: 420px !important;
  height: 6px !important;
  margin: 14px 0 22px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 768px){
  :root{ --vl-gutter: 20px; }

  #lime-survey-container .progress,
  #lime-survey-container .group-container,
  #lime-survey-container .question-container,
  #lime-survey-container .survey-navigation{
    padding-left: var(--vl-gutter) !important;
    padding-right: var(--vl-gutter) !important;
  }
}

.vilion-progress{
  display: flex;
  flex-direction: column;
  gap: 10px;             /* Abstand Text -> Bar */
  margin: 0 0 18px;      /* Abstand nach unten */
}

.vilion-progress-text{
  font-size: 14px;
  color: var(--vl-muted);
  line-height: 1.2;
}

/* ================= FINAL ALIGNMENT (LOGO EDGE) ================= */

/* 1) Die “Logo-Kante” definieren wir über #lime-survey-container */
#lime-survey-container{
  padding-left: var(--vl-gutter) !important;
  padding-right: var(--vl-gutter) !important;
}

/* Mobile bleibt wie bei dir */
@media (max-width: 768px){
  #lime-survey-container{
    padding-left: var(--vl-gutter) !important;
    padding-right: var(--vl-gutter) !important;
  }
}

/* 2) Alle inneren Container, die du vorher gepaddet hast, neutralisieren */
#lime-survey-container > .survey-header,
#lime-survey-container > .survey-page,
#lime-survey-container > .survey-welcome,
#lime-survey-container > .survey-navigation,
#lime-survey-container .survey-content,
#lime-survey-container .group-container,
#lime-survey-container .question-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Progress-Block: Text + Balken sauber links und kompakt */
#lime-survey-container .vilion-progress{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

#lime-survey-container .vilion-progress-text{
  font-size: 14px;
  color: var(--vl-muted);
  line-height: 1.2;
}

#lime-survey-container .progress{
  max-width: 420px;
  height: 6px;
  margin: 0;
}

/* 4) Bootstrap “row” kann dir links/rechts reinpfuschen */
#lime-survey-container .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5) Buttons: linksbündig auf derselben Kante */
#lime-survey-container .survey-navigation,
#lime-survey-container .button-container,
#lime-survey-container .navigator .ls-move-buttons{
  justify-content: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}