/******************
    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
*/

/* General Layout */
/* TSD_2026: Google-Fonts-Einbindungen (Open Sans, Lato) entfernt, Schrift kommt vom eigenen Server */



@font-face {
  font-family: 'FFDINWebProRegular';
  font-weight: 300;
  font-style: normal;
  src: url(/upload/themes/survey/TSD/css/FFDIN/FFDINWebProRegular.woff2)  format('woff2');
}
@font-face {
  font-family: 'FFDINWebProBold';
  font-weight: 300;
  font-style: normal;
   src: url(/upload/themes/survey/TSD/css/FFDIN/FFDINWebProBold.woff2) format('woff2');
}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

.font-noto{
    font-family: 'Open Sans';
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'FFDINWebProRegular';
}

.btn {
    font-family: 'FFDINWebProBold';
}

body {
    font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #444;
    background-color: #D0D0D0;
    margin: 0 !important;
    padding: 0 !important;
  }
  #outerwrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    float: none;
    clear: both;
    background-color: #FFF;
  }
  #outerwrapper #outerwrapper,
  #outerwrapper #outerwrapper .container {
    padding: 0;
    width: auto;
  }
  #outerframeContainer {
    padding: 0;
    width: auto;
  }
  #dynamicReloadContainer {
      padding: 0;
  }
  @media only screen and (max-width: 768px) {
    #outerwrapper {
      margin-top: 0;
      margin-bottom: 0;
    }  
  }
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  @media (min-width: 992px) {
    .container {
      /*width: 970px;*/
      width: 998px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
      /*width: 998px;*/
    }
  }
  hr {
    margin: 10px 0;
  }
  a,
  a:link {
    color: #888;
    text-decoration: none;
  }
  a:hover,
  a:focus {
    color: #b01632;
    text-decoration: underline;
  }
  img {
      max-width: 100%;
  }
  
  /* Navbar */
  .header-wrapper {
    margin-bottom: 15px;
  }
  .navbar-toggle {
      float: none;
    margin-right: 0;
  }
  .navbar-collapse {
      padding: 0;
  }
  .navbar {
      min-height: 0;
      margin: 0;
      text-align: center;
  }
  .navbar-header {
    float: none !important;
    padding: 15px 0;
  }
  .navbar-brand {
    padding: 15px 0;
    min-height: initial;
  }
  h1.surveyname {
    text-align: center;
    font-weight: 700;
    height: auto;
    line-height: 130%;
    font-size: 23px;
    margin: 0;
  }
  @media only screen and (max-width: 768px) {
    .logo-wrapper,
    h1.surveyname {
      margin-bottom: 15px;
    }
  }
  .navbar-nav {
      float: none;
  }
  .navbar-default {
      background-color: transparent;
      border: none;
  }
  .navbar-action-link {
      padding: 0;
  }
  .navbar-collapse.in {
      overflow-y: visible;
  }
  .navbar-item-left {
      text-align: left;
      padding-left: 0;
  }
  .navbar-item-middle {
      text-align: center;
  }
  .navbar-item-right {
      text-align: right;
      padding-right: 0;
  }
  .navbar-logo-left {
    padding-left: 0;
  }
  .navbar-logo-middle {
    padding-right: 0;
    text-align: center;
  }
  .navbar-logo-right {
    padding-right: 0;
    text-align: right;
  }
  .logo-bar {
    margin-top: 0;
    padding: 15px 0;
  }
  .navbar-banner {
    text-align: center;
  }
  
  @media only screen and (max-width: 768px) {
      .navbar-collapse {
          padding: 0 15px;
      }
    .navbar-logo-left {
      padding: 0;
      text-align: center;
    }
    .navbar-logo-middle {
      text-align: center;
      padding: 0;
      margin-top: 15px;
    }
    .navbar-logo-right {
      text-align: center;
      padding: 0;
      margin-top: 15px;
    }
    .navbar-item-left {
      text-align: center;
      margin: 6px 0;
      padding: 0;
    }
    .navbar-item-middle {
      text-align: center;
      margin: 6px 0;
      padding: 0;
    }
    .navbar-item-right {
      text-align: center;
      margin: 6px 0;
      padding: 0;
    }
      .navbar-banner {
      padding: 0;
      }
  }
  
  /* Language Changer */
  .language-wrapper {
    margin: 15px 0;
    text-align: right;
  }
  .languagechanger {
      margin: 15px 0;
      display: block;
  }
  a.languagechanger,
  a:link.languagechanger {
      color: #888;
      text-decoration: none;
  }
  a:hover.languagechanger,
  a:focus.languagechanger {
      color: #888;
      text-decoration: none;
  }
  #langs-container {
      height: auto;
  }
  .form-change-lang {
      text-align: center;
  }
  ul#langs-container {
      margin-left: 42%;
      overflow: initial !important;
  }
  
  /* Progress bar */
  .progress-wrapper {
    padding: 0;
  }
  .progress {
    margin-bottom: 0;
  }
  .progress-bar {
    background-color: #b01632;
  }
  
  /* Welcome Page */
  .text-info {
    color: #333;
  }
  .survey-welcome {
    margin-top: 15px;
  }
  .question-count-text {
    margin-top: 15px;
  }
  
  /* Privacy */
  .privacy {
    margin-top: 15px;
    padding: 15px 0;
    margin: 15px 1px;
    border: 1px solid #eee;
    background-color: #eee;
  }
  p.ls-privacy-body {
    margin: 15px 0 0 0;
    font-style: italic;
  }
  
  /* Privacy policy */
  .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    background-color: transparent;
  }
  .panel-primary {
      border-color: transparent;
  }
  .panel-primary > .panel-heading {
      color: #000;
      background-color: transparent;
      border-color: transparent;
      padding: 15px 0;
  }
  .panel-body {
      padding: 5px 0;
  }
  .panel-footer {
      padding: 10px 0;
      background-color: transparent;
      border-top: transparent;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
  }
  input#datasecurity_accepted {
    vertical-align: top;
  }
  
  /* Group layout */
  .group-outer-container {
      display: block;
  }
  .group-title {
    text-align: center;
    font-weight: normal;
    font-size: 140%;
    margin-top: 0;
    margin-bottom: 15px;
  }
  .group-description {
    margin-top: 0;
    text-align: center;
  }
  
  /* Question layout */
  .question-number, .question-code {
      float: none;
      margin: 0;
  }
  .question-container {
      background-color: #fff;
      margin-bottom: 30px;
      margin-top: 15px;
      padding-bottom: 15px;
      border: 1px solid #aaa;
  }
  
  .question-text {
      font-size: 120%;
  }
  
  .input-error.question-container {
      border: 1px solid #a94442;
  }
  .question-title-container {
      padding: 8px 15px;
      background-color: #eee;
      /* color: #333; */
      margin-bottom: 15px;
  }
  
  .question-valid-container {
    padding-left: 0;
    padding-right: 0;
    font-size: 90%;
    margin-top: 5px;
  }
  .question-number,
  .question-code {
    font-weight: normal;
  }
  .ls-answers tbody .answertext {
    text-align: left;
  }
  tr.ls-odd,
  .array-flexible-column tr.answers-list:nth-child(even) {
    background-color: #f0f0f0;
  }
  .table-hover > tbody > tr:hover,
  tr.answers-list:hover,
  .array-flexible-column tr.answers-list:hover {
      background-color: #ddd;
  }
  .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border: 0;
    padding: 4px 8px;
  }
  .table-bordered {
    border: 0;
  }
  .asterisk {
    margin-right: 5px;
    font-size: 90% !important;
    vertical-align: top;
  }
  .asterisk small {
    font-size: 90% !important;
    vertical-align: top;  
  }
  .save-form .asterisk,
  .save-survey-form .asterisk {
    float: none !important;
  }
  .input-error .asterisk {
    font-size: 90% !important;
    margin-top: 0;  
  }
  .question-help-container {
    font-size: 90%;
    margin-top: 10px;
    color: #888;
  }
  .numeric-multi input.numeric,
  .multiple-short-txt input.form-control,
  .multiple-short-txt textarea.form-control {
    margin-bottom: 15px;
  }
  .ls-input-group-extra {
    vertical-align: top;
    padding: 1rem 1.2rem;
  }
  .array-flexible-row .ls-answers .answertextright {
    text-align: right;
  }
  
  /* Navigator */
  #navigator-container {
    margin-bottom: 15px;
    padding-bottom: 0;
    margin-top: 30px;
  }
  .btn {
    font-size: 110%;
    border-radius: 4px;
  }
  a.btn-primary {
    color: #fff;
  }
  .btn-primary {
    color: #ffffff;
    background-color: #333;
    border-color: #333;
  }
  .btn-primary:hover {
    color: #ffffff;
    background-color: #111;
    border-color: #111; 
  }
  .btn-primary:active,
  .btn-primary.active,
  .open > .dropdown-toggle.btn-primary,
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:active:hover,
  .btn-primary.active:hover,
  .open > .dropdown-toggle.btn-primary:hover,
  .btn-primary:active:focus,
  .btn-primary.active:focus,
  .open > .dropdown-toggle.btn-primary:focus,
  .btn-primary:active.focus,
  .btn-primary.active.focus,
  .open > .dropdown-toggle.btn-primary.focus {
    color: #ffffff;
    background-color: #111;
    border-color: #111;
  }
  .input-group-addon.btn-primary {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .btn-default {
      border-color: #adadad;
  }
  
  /* Radios and checkboxes */
  
  /* radio buttons */
  .radio-item label::before {
    border: 1px solid #aaa;
    background-color: #FFF;
  }
  .radio-item label::after {
    background-color: #b01632;
  }
  /* checkboxes */
  .checkbox-item label::before {
    border: 1px solid #aaa;
    background-color: #FFF;
  }
  .checkbox-item label::after {
    color: #b01632;
    background-color: transparent;
    width: 17px;
    height: 17px;
    left: -1px;
    top: 0px;
    font-size: 12px;
  }
  
  
  /* Ranking question */
  .sortable-choice {
    padding: 5px;
  }
  .sortable-choice .ls-choice.sortable-item {
    background-color: #ddd;
    border: 1px solid #ddd;
    margin-bottom: 5px;
  }
  .sortable-rank {
    padding: 5px;
  }
  .sortable-rank .ls-choice.sortable-item {
    background-color: #333;
    border: 1px solid #333;
    margin-bottom: 5px;
    color: #fff;
  }
  
  /* Boilerplate question */
  /* 2019-04-04 No paddings for boilerplate */
  .boilerplate {
      padding-bottom: 0;
  }
  .boilerplate .answer-container {
      display: none !important;
  }
  .boilerplate .question-title-container {
      margin-bottom: 0;
  }
  
  /* Equation question */
  /* 2020-09-07 No paddings for equations */
  .equation {
      padding-bottom: 0;
  }
  .equation .answer-container {
      display: none !important;
  }
  .equation .question-title-container {
      margin-bottom: 0;
  }
  
  /* Gender question */
  /* Yes/no question */
  /* Bootstrap buttons layout */
  .gender-button .btn-primary,
  .yes-no .btn-primary,
  .bootstrap-buttons-div .button-item {
    color: #333;
    background-color: #eee;
    border: 2px solid #FFF;
    border-radius: 6px;
  }
  .gender-button .btn-primary:active,
  .gender-button .btn-primary.active:hover,
  .gender-button .btn-primary:focus,
  .gender-button .btn-primary.active,
  .gender-button .btn-primary.active:focus,
  .yes-no .btn-primary:focus,
  .yes-no .btn-primary.active,
  .yes-no .btn-primary.active:hover,
  .yes-no .btn-primary.active:focus,
  .bootstrap-buttons-div .button-item:focus,
  .bootstrap-buttons-div .button-item.active,
  .bootstrap-buttons-div .button-item:focus {
    color: #FFF;
    background-color: #777;
    border: 2px solid #fff;
    opacity: 1;
    filter: alpha(opacity=1);
    background-image: none;
    transition: 0.125s ease-in-out;
  }
  .gender-button .btn-primary:hover,
  .yes-no .btn-primary:hover,
  .bootstrap-buttons-div .button-item:hover {
    color: #FFF;
    background-color: #777;
    border: 2px solid #fff;
    opacity: 0.75;
    filter: alpha(opacity=75);
    background-image: none;
    transition: 0.125s ease-in-out; 
  }
  
  /* Bootstrap buttons layout */
  /* 2019-04-05 Marcel: New CSS for bootstrap button layout */
  .bootstrap-buttons-div
  {
      padding: 0 5px;
  }
  .bootstrap-buttons-div .button-item {
      word-break: break-all;	/* remove this to not break words (wastes quite some space) */
      white-space: normal;
      padding: 0.5em 0.5em;
  }
  
  /* 5pt choice */
  .choice-5-pt-radio li.radio-item {
    margin-right: 15px;
  }
  
  /* Slider question */
  .slider-handle {
      background-color: #333;
      background-image: -webkit-linear-gradient(top, #555 0%, #222 100%);
      background-image: -o-linear-gradient(top, #555 0%, #222 100%);
      background-image: linear-gradient(to bottom, #555 0%, #222 100%);
  }
  .tooltip-inner {
    background-color: #333;
  }
  .tooltip.top .tooltip-arrow {
       border-top-color: #333;
  }
  .slider-selection {
      background-image: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
      background-image: -o-linear-gradient(top, #eee 0%, #ccc 100%);
      background-image: linear-gradient(to bottom, #eee 0%, #ccc 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
  }
  
  .numeric-multi .ls-group-remaining .suffix-text.suffix {
      display: inline;
      margin-left: -15px;
  }
  
  
  /* Text questions */
  
  /* Highlight text fields with main template color */
  .form-control:focus {
      border-color: #000;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6) !important;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,0,0, .6) !important;
  }
  
  /* Print Page */
  .url-wrapper-survey-print {
    margin: 15px 0;
  }
  .question-container-printanswers {
    border-bottom: 1px solid #ccc;
  }
  
  /* Footer */
  footer .copyright {
      text-align: center;
    margin: 20px 0;
    font-size: 90%;
  }
  
  div.yes-no .btn-group label,
  .gender .btn-group label {
      padding-top: 10px;
  }
  
  .completed-wrapper {
    margin-bottom: 45px;
    min-height: 200px;
   }
  
   /* Datepicker */
  
   .datepicker .active,
   .datepicker .today {
    background-color: #333 !important;
    background: #333 !important;
    color: #FFF !important;
   }
  
  /* Index */
  .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    background-color: #333;
    color: #FFF;
  }
  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #ccc;
  }
  
  .dropdown-menu > li > a {
    background-color: #fff;
    color: #000;
  }
  
  /* Startpage */
  .survey-list-heading,
  .survey-list,
  .survey-contact {
    text-align: center;
  }
  #surveys-list-container {
    background-color: #fff;
    padding: 45px 0;
  }
  
  /* Fix array alignment */
  td.answer-item.radio-item {
      vertical-align: middle;
  }
  
  /* 2018-12-02 Marcel: Fix captcha width */
  .captcha-image
  {
      width: auto;
  }
  
  /* 2019-02-10 Marcel: Additional language changer adjustments */
  #main-col form div.form-change-lang.form-inline
  {
      display: none;
  }
  
  
  /* 2019-02-11 Marcel: Hide progress bar from certain screens */
  .printanswers .header-wrapper .progress-wrapper,
  .listsurveys .header-wrapper .progress-wrapper
  {
      display: none;
  }
  
  /* 2019-03-11 Marcel: adjust margin to not show scroll bar at list survey page */
  .listsurveys
  {
      margin-right: 15px;
      margin-left: 15px;
  }
  
  /* 2019-02-11 Marcel: Remove background color from print version (PDF) */
  body.printlayout
  {
      background-color: #fff;
      padding: 10px !important;
  }
  
  
  
  /* START 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */
  .listsurveys
  {
      border-bottom: 1px solid #000;
  }
  
  .listsurveys .header-wrapper
  {
      margin-bottom: 0px;
  }
  
  .listsurveys .header-wrapper .navbar-brand
  {
      display: none;
  }
  
  #surveys-list-container 
  {
      padding: 0 0 45px 0;
      margin-top: 0px;
  }
  
  #surveyListFooter
  {
      margin: 0px;
      padding: 0px;
      height: 0px;
  }
  
  .surveys-list .btn-group {
      margin: 0 auto;
      float: none;
  }
  
  .survey-contact.col-xs-12 {
      padding-top: 20px;
  }
  /* END 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */
  
  
  
  
  /* 2019-04-04 Marcel: Improved display for split up array questions */
  @media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
  {
      .table-hover > tbody > tr:hover, 
      tr.answers-list:hover, 
      .array-flexible-column tr.answers-list:hover {
          background-color: initial; 
          color: initial;
      }   
      tr.ls-odd, .array-flexible-column tr.answers-list:nth-child(even) {
          background-color: #f0f0f0;
      }
      
      table.ls-answers > tbody > tr:nth-child(even):hover {
          background-color: #f0f0f0;
      }
      
      table.ls-answers > tbody > tr:nth-child(odd):hover {
          background-color: #fff;
      }
  
  
      
      table.ls-answers > tbody > tr td.answer-item.radio-item,
      table.ls-answers > tbody > tr td.answer-item.checkbox-item {
          border-bottom: 1px solid #ddd;
          padding-left: 30px;
          padding-top: 10px;
          padding-bottom: 0px;
      }
      
      td.answer-item.radio-item.answer_cell_ noanswer-item,
      td.answer-item.checkbox-item.answer_cell_ noanswer-item {
          border-bottom: 0px;
      }
      .array-flexible-row .ls-answers .answertextright {
          text-align: left;
      }
      
      table.ls-answers > tbody > tr.ls-heading-repeat
      {
          display: none;
      }
      
      table.ls-answers > tbody > tr th.answertext,
      table.ls-answers > tbody > tr th.answertextright {
          font-size: 120%;
      }
      
      
      
      table.ls-answers > tbody > tr td.radio-item:hover, 
      table.ls-answers > tbody > tr td.checkbox-item:hover {
          color: #000;
          background-color: #ddd;
      }
      
  }
  
  /* 2019-05-03 Marcel: Left align item text at multiplce choice with comment */
  .multiple-opt-comments .checkbox-text-item .answer-item .checkbox-label
  {
      text-align: left;
  }
  
  
  /* 2019-05-09 Marcel: Styles for Bootstrap tooltips */
  span.tooltip
  {
      cursor: pointer;
      text-decoration: underline;
      font-weight: bold;
      color: #a94442;
      opacity: 1;
      font-size: inherit;
      position: initial;
      display: inline;
  }
  
  
  /* Add class "tooltipquestion" at the "Display" section of your question! */
  .tooltipquestion li.radio-item label, 
  .tooltipquestion li.checkbox-item label {
      width: 100%;
  }
  
  .answer-item .tooltip .tooltip-inner {
      max-width: 75%;
      margin: auto;
  }
  /* Make sure sliders with tooltips still use same defaults */
  .answer-item .slider .tooltip .tooltip-inner {
      max-width: initial;
  }
  
  /* Align modal on top */
  .modal::before {
      height: auto;
      vertical-align: top;
  }
  
  /* Hide tip */
  .ls-em-tip {
    display: block;
  }
  .ls-em-error {
    display: block;
  }
  
  /* Error page */
  .error-wrapper p {
      font-size: 100%;
      font-family: inherit;
      color: #333;
      line-height: 1.42857143;
  }
  
  /* 2021-01-28 Marcel Minke: Fix slider display issues on iPad and other smaller devices */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
  {
      .numeric-multi .slider-item .visible-xs-block 
      {
          display: none !important;
      }
  }

/*====================================TS==================*/
img.logo-left {
    max-height: 90px;
}
img.logo-right {
    max-height: 90px;
}

.progress {
    background-color: #fff;
    border: 1px solid #999999ab;
}

/*btn btn-primary*/

    /*next-btn*/
    .ls-move-submit-btn:hover,
    .ls-move-submit-btn:active:hover,
    .ls-move-submit-btn.active:hover,
    .ls-move-next-btn:hover,
    .ls-move-next-btn:active:hover,
    .ls-move-next-btn.active:hover{
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;

    }
	

    .ls-move-submit-btn,
    .ls-move-submit-btn:active,
    .ls-move-submit-btn.active,
    .ls-move-submit-btn:focus,
    .ls-move-submit-btn.focus,
    .ls-move-submit-btn:active:focus,
    .ls-move-submit-btn.active:focus,
    .ls-move-submit-btn:active.focus,
    .ls-move-submit-btn.active.focus,	
    .ls-move-next-btn,
    .ls-move-next-btn:active,
    .ls-move-next-btn.active,
    .ls-move-next-btn:focus,
    .ls-move-next-btn.focus,
    .ls-move-next-btn:active:focus,
    .ls-move-next-btn.active:focus,
    .ls-move-next-btn:active.focus,
    .ls-move-next-btn.active.focus {
        color: #fff !important;
        background-color: #b01632ed !important;
        border-color: #b01632 !important;

    }


	

    /*upload: Save Changes...*/
    .upload.btn-primary:hover,
    .upload.btn-primary:active:hover,
    .upload.btn-primary.active:hover{
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
    }		
	
    .upload.btn-primary,
    .upload.btn-primary:active,
    .upload.btn-primary.active,
    .upload.btn-primary:focus,
    .upload.btn-primary.focus,
    .upload.btn-primary:active:focus,
    .upload.btn-primary.active:focus,
    .upload.btn-primary:active.focus,
    .upload.btn-primary.active.focus {
        color: #fff !important;
        background-color: #b01632ed !important;
        border-color: #b01632 !important;
    }
	
	/*upload: Select file...*/
	.upload-div .btn {
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
	}
	
	
	/*upload: You can upload...*/
	.uploader .alert-info {
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
	}	

    /*gender/yes/no... : default*/
	.gender-button .btn-primary, 
	.yes-no .btn-primary, 
	.bootstrap-buttons-div .button-item {
		/*color: #333;*/
		/*background-color: #6068879e;*/
	}

        /*gender/yes/no... : hover*/
        .gender-button .btn-primary:hover, 
        .yes-no .btn-primary:hover, 
        .bootstrap-buttons-div .button-item:hover {
          color: #fff !important;
         background-color: #b01632ed !important;
         border-color: #b01632 !important;
        }       

            /*gender/yes/no... : active*/
            .gender-button .btn-primary:active, 
            .gender-button .btn-primary.active:hover, 
            .gender-button .btn-primary:focus, 
            .gender-button .btn-primary.active, 
            .gender-button .btn-primary.active:focus, 
            .yes-no .btn-primary:focus, 
            .yes-no .btn-primary.active, 
            .yes-no .btn-primary.active:hover, 
            .yes-no .btn-primary.active:focus, 
            .bootstrap-buttons-div .button-item:focus, 
            .bootstrap-buttons-div .button-item.active, 
            .bootstrap-buttons-div .button-item:focus {
              color: #fff !important;
              background-color: #b01632 !important;
              border-color: #b01632 !important;

            }    


    /*date picker*/
    .date-timepicker-group .btn-primary,		
    .date-timepicker-group .btn-primary:hover,
    .date-timepicker-group .btn-primary:active,
    .date-timepicker-group .btn-primary:focus,
    .date-timepicker-group .btn-primary:active:hover,
    .date-timepicker-group .btn-primary:active:focus,
    .date-timepicker-group .btn-primary:active.focus,	
    .date-timepicker-group .btn-primary.hover,		
    .date-timepicker-group .btn-primary.active,
    .date-timepicker-group .btn-primary.focus,
    .date-timepicker-group .btn-primary.active:hover,
    .date-timepicker-group .btn-primary.active:focus,
    .date-timepicker-group .btn-primary.active.focus {
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
    }

/*btn btn-default*/

    /*previous-btn
    .ls-move-previous-btn:hover,
    .ls-move-previous-btn:active:hover,
    .ls-move-previous-btn.active:hover{
        color: #333 !important;
        background-color: #b7d689 !important;
        border-color: #c8dda4 !important;
    }	

    .ls-move-previous-btn,
    .ls-move-previous-btn:active,
    .ls-move-previous-btn.active,
    .ls-move-previous-btn:focus,
    .ls-move-previous-btn.focus,
    .ls-move-previous-btn:active:focus,
    .ls-move-previous-btn.active:focus,
    .ls-move-previous-btn:active.focus,
    .ls-move-previous-btn.active.focus {
        color: #333 !important;
        background-color: #b7d689 !important;
        border-color: #c8dda4 !important;
    }
    */
/*btn btn-success*/

    /*file upload popup save*/
    .file-upload-modal-footer .btn:hover,	
    .file-upload-modal-footer .btn:active:hover,
    .file-upload-modal-footer .btn.active:hover{
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
    } 
	

    .file-upload-modal-footer .btn,
    .file-upload-modal-footer .btn:active,
    .file-upload-modal-footer .btn.active,
    .file-upload-modal-footer .btn:focus,
    .file-upload-modal-footer .btn.focus,
    .file-upload-modal-footer .btn:active:focus,
    .file-upload-modal-footer .btn.active:focus,
    .file-upload-modal-footer .btn:active.focus,
    .file-upload-modal-footer .btn.active.focus {
        color: #fff !important;
        background-color: #b01632ed !important;
        border-color: #b01632 !important;
    } 

/*--------------------end button--------------------- */    

/*--------------------start sortables----------------*/

/*unsorted*/
.sortable-choice .ls-choice.sortable-item {
    /*background: #233d7a !important;*/
    /*color: #fff!important;*/
    /*border: 0px;*/
}

/*sorted*/
.sortable-rank .ls-choice.sortable-item {
        color: #fff !important;
        background-color: #b01632 !important;
        border-color: #b01632 !important;
}


/*--------------------end sortables----------------*/    

.slider-touched .tooltip-inner,
.slider-touched .slider-handle {
    background-color: #b01632 !important;
}


.slider-touched .tooltip.top .tooltip-arrow{
    border-top-color: #b01632 !important;
}	
    
	
.question-title-container .asterisk {
    display: none;
}

.progress-wrapper {
    padding-bottom: 13px;
    border-bottom: 0; /* Linie unter Fortschrittsbalken entfernt */
}

h1.surveyname {
    text-align: center;
    font-weight: 700;
    height: auto;
    line-height: 130%;
    font-size: 23px;
    margin-bottom: 15px;
}

/*
div#navbar {
    display: none !important;
}
.navbar {
    display: none;
}
*/


/* 2021-11-09 Marcel Minke: Mark previous answers, hide SPAN */
td.previously-answered.radio-item label::before {
    border: 3px solid #777777;
}

span.prevanswers
{
    display: none;
}


/* 2021-11-16: background and border for text display questions */
.boilerplate .question-title-container {
    background-color: inherit;
}
.boilerplate.question-container {
    border: none !important;
}




/* 2021-11-10 Marcel: Colors for question index */

/* default, not seen, nothing answered */
.ls-index-menu .dropdown-menu li.index-item a
{
    background-color: #fff;
    color: #000;
}

/* answered */
.ls-index-menu .dropdown-menu li.index-item.index-item-seen a
{
    color: #23c93e;
}

/* empty */
.ls-index-menu .dropdown-menu li.index-item-unanswered.index-item-seen a
{
    color: #b01632;
}

/* current */
.ls-index-menu .dropdown-menu li.index-item-current.index-item-seen a
{
    font-weight: bold;
    font-style: italic;
    color: #ecec58;
}


/* 2022-09-13 Marcel: Adjustments for new Quick Check report */
.highcharts-credits
{
    display: none;
}
.highcharts-figure button {
    padding: 5px;
    margin: 5px;
}

.highcharts-figure .customlegend,
.highcharts-figure p.center{
    text-align: center;
}

.highcharts-figure div#interaktion {
    padding-top: 30px;
}
.highcharts-figure p .ls-move-next-btn
{
    background-color: #b41522 !important;
    border: 1px solid #b41522;
    padding: 10px 16px;
    margin-top: 4rem;
    font-family: inherit;
    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - .28rem) * .2439)), 1.8rem);
    line-height: 1.6;
}

.highcharts-figure p a img
{
    padding-left: 5px;
    padding-bottom: 2px;
}

.highcharts-figure .customlegend, .highcharts-figure p.center {
    text-align: center;
    font-family: inherit;
    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - .28rem) * .2439)), 1.8rem);
    line-height: 1.6;
}

.highcharts-figure .customlegend span {
    width: 50px;
    margin-right: 10px;
}

/* =====================================================
   TSD_modern: Modernisierung (Override-Block, CR 09/2026)
   Nur Gestaltung, keine Inhalte. Primärfarbe TSD-Rot.
   ===================================================== */
:root {
  --tsd-red: #b01632;
  --tsd-red-dark: #8e1128;
  --tsd-red-soft: rgba(176, 22, 50, .08);
  --tsd-text: #2b2d31;
  --tsd-muted: #6b7078;
  --tsd-line: #e4e6ea;
  --tsd-bg: #f3f4f6;
  --tsd-radius: 12px;
  --tsd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}

body {
  background-color: var(--tsd-bg);
  color: var(--tsd-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Seitenrahmen als Karte */
#outerwrapper.outerwrapper {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--tsd-shadow);
  margin-top: 24px !important;
  margin-bottom: 32px !important;
  padding: 8px 24px 24px;
  overflow: hidden;
}

/* Kopfbereich mit Logos */
.header-wrapper { border: 0; margin-bottom: 8px; }
.header-wrapper .logo-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 16px 0 8px;
}
.header-wrapper.row { margin-left: 0; margin-right: 0; }
.header-wrapper .container { width: auto; max-width: 100%; padding-left: 0; padding-right: 0; }
.header-wrapper .logo-bar > span { float: none; width: auto; padding: 0; flex: 0 1 auto; }
.header-wrapper .navbar-banner:not(:has(img)),
.header-wrapper .navbar-logo-middle:not(:has(img)) { display: none; }
.header-wrapper .navbar-logo-left { margin-right: auto; text-align: left; }
.header-wrapper .navbar-logo-right { margin-left: auto; }
.header-wrapper .navbar-logo-right { text-align: right; }
.header-wrapper img.logo-left,
.header-wrapper img.logo-right {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.header-wrapper img.logo-right { max-height: 50px; }
h1.surveyname {
  font-family: 'FFDINWebProBold', 'Open Sans', sans-serif;
  font-size: 26px;
  letter-spacing: .2px;
  color: var(--tsd-text);
  margin: 18px 0 6px;
}
#outerwrapper hr {
  border: 0 !important;
  height: 1px;
  background: var(--tsd-line);
  opacity: 1;
}

/* Fortschrittsbalken */
.progress {
  height: 8px;
  border-radius: 999px;
  background: #eceef1;
  box-shadow: none;
  overflow: hidden;
}
.progress-bar {
  background: var(--tsd-red);
  border-radius: 999px;
  box-shadow: none;
  font-size: 0;
  transition: width .4s ease;
}

/* Sprachwahl */
.form-change-lang .languagechanger { color: var(--tsd-muted); font-size: 13px; }

/* Gruppen */
.group-title {
  font-family: 'FFDINWebProBold', 'Open Sans', sans-serif;
  font-size: 20px;
  color: var(--tsd-text);
  border: 0;
  margin: 8px 0 12px;
}
.group-description { color: var(--tsd-muted); margin-bottom: 16px; }

/* Fragen als Karten */
.question-container {
  background: #fff;
  border: 1px solid var(--tsd-line);
  border-radius: var(--tsd-radius);
  box-shadow: var(--tsd-shadow);
  margin: 0 0 24px;
  padding-bottom: 18px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.question-container:focus-within {
  border-color: rgba(176, 22, 50, .35);
  box-shadow: 0 0 0 3px var(--tsd-red-soft), var(--tsd-shadow);
}
.question-title-container {
  background: #fff;
  border-left: 4px solid var(--tsd-red);
  padding: 18px 22px 10px 20px;
  margin-bottom: 8px;
}
.question-text, .question-text .ls-label-question {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--tsd-text);
}
.question-valid-container,
.question-valid-container .emtip,
.question-help-container {
  color: var(--tsd-muted);
  font-size: 13px;
}
.question-valid-container { padding-left: 0; margin-top: 4px; }
.question-help-container { padding: 6px 22px 0; }
.answer-container { padding: 4px 22px 0; }
.asterisk small { color: var(--tsd-red); }

/* Fehlerzustand */
.input-error.question-container {
  border-color: rgba(169, 68, 66, .45);
  box-shadow: 0 0 0 3px rgba(169, 68, 66, .08), var(--tsd-shadow);
}
.input-error .question-valid-container .emtip.error,
.question-valid-container .text-danger { color: #a94442; }

/* Unbeantwortete Teilfragen einer Pflichtfrage (Matrix) markieren */
table.ls-answers > tbody > tr.ls-error-mandatory > th,
table.ls-answers > tbody > tr.ls-error-mandatory > td {
  background-color: rgba(169, 68, 66, .08);
  border-radius: 0;
}
table.ls-answers > tbody > tr.ls-error-mandatory > th.answertext {
  color: #a94442;
  box-shadow: inset 3px 0 0 #a94442;
}

/* Einfachauswahl / Mehrfachauswahl als klickbare Zeilen */
.radio-list .answer-item,
.checkbox-list .answer-item,
.radio-item, .checkbox-item {
  border-radius: 8px;
  transition: background-color .15s ease;
}
.list-radio .radio-item,
.multiple-opt .checkbox-item {
  padding: 8px 12px;
  margin: 2px 0;
}
.list-radio .radio-item:hover,
.multiple-opt .checkbox-item:hover {
  background: var(--tsd-red-soft);
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--tsd-red); }

/* Matrixfragen */
table.ls-answers {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tsd-line);
  border-radius: 10px;
  overflow: hidden;
}
table.ls-answers thead th,
table.ls-answers thead td {
  background: #f7f8fa;
  color: var(--tsd-muted);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--tsd-line) !important;
  vertical-align: bottom;
}
table.ls-answers > tbody > tr > th,
table.ls-answers > tbody > tr > td {
  border-top: 1px solid #eef0f3 !important;
  vertical-align: middle;
  padding-top: 12px;
  padding-bottom: 12px;
}
table.ls-answers tr.ls-odd,
table.ls-answers tr.ls-even { background: #fff; }
table.ls-answers tbody tr:hover,
.table-hover > tbody > tr:hover { background: var(--tsd-red-soft) !important; }
.ls-answers tbody .answertext { color: var(--tsd-text); font-weight: 500; }
table.ls-answers td.answer_cell_NA,
table.ls-answers th.answer_cell_NA,
table.ls-answers .answer-item.noanswer-item { color: var(--tsd-muted); }

/* Eingabefelder */
.form-control,
.answer-container textarea,
.answer-container select {
  border: 1px solid #d5d8dd;
  border-radius: 8px;
  box-shadow: none;
  min-height: 42px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.answer-container textarea.form-control { min-height: 110px; }
.form-control:focus {
  border-color: var(--tsd-red);
  box-shadow: 0 0 0 3px var(--tsd-red-soft);
  outline: 0;
}

/* Buttons */
.btn {
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 15px;
  letter-spacing: .3px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary,
#ls-button-submit {
  color: #fff;
  background-color: var(--tsd-red);
  border-color: var(--tsd-red);
  box-shadow: 0 2px 6px rgba(176, 22, 50, .25);
}
.btn-primary:hover, .btn-primary:focus,
#ls-button-submit:hover, #ls-button-submit:focus {
  color: #fff;
  background-color: var(--tsd-red-dark);
  border-color: var(--tsd-red-dark);
}
.btn-default,
#ls-button-previous {
  color: var(--tsd-text);
  background: #fff;
  border: 1px solid #cfd3d9;
}
.btn-default:hover, #ls-button-previous:hover,
.btn-default:focus, #ls-button-previous:focus {
  background: #f5f6f8;
  border-color: #b9bec6;
  color: var(--tsd-text);
}
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(176, 22, 50, .25); }

/* Navigation und Fußbereich */
.navigator { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--tsd-line); }
.survey-welcome, .question-count-text, .privacy { color: var(--tsd-text); }
.privacy.panel, .ls-privacy { border-radius: 10px; }

/* Mobil */
@media (max-width: 767px) {
  #outerwrapper.outerwrapper { margin-top: 0 !important; border-radius: 0; padding: 4px 12px 16px; box-shadow: none; }
  .header-wrapper img.logo-left { max-height: 44px; }
  .header-wrapper img.logo-right { max-height: 34px; }
  h1.surveyname { font-size: 21px; }
  .question-title-container { padding: 14px 16px 8px 14px; }
  .answer-container { padding: 4px 14px 0; }
  .question-text, .question-text .ls-label-question { font-size: 16px; }
  .navigator .btn { width: 100%; margin-bottom: 8px; }
}

/* ==========================================================
   TSD_2026: Erweiterung auf Basis TSD_modern (CR 28.09.2026)
   1. Hausschrift FF DIN (lokal vom eigenen Server, kein Google)
   2. Skalenfragen mobil als Wertefelder statt langer Listen
   3. Markierte Auswahl am Desktop, 4. Auswahllisten als Felder
   ========================================================== */

/* 1. Hausschrift */
@font-face {
  font-family: 'TSD DIN';
  src: url(/upload/themes/survey/TSD/css/FFDIN/FFDINWebProRegular.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TSD DIN';
  src: url(/upload/themes/survey/TSD/css/FFDIN/FFDINWebProBold.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html body,
body *:not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(.glyphicon) {
  font-family: 'TSD DIN', Arial, Helvetica, sans-serif !important;
}
body { font-size: 16px; }
.question-text, .question-text .ls-label-question { font-size: 18px; line-height: 1.45; }
/* Hierarchie wie im alten Design: Fragetext normal, nur die im Text fett gesetzte Überschrift fett */
.question-text, .question-text .ls-label-question { font-weight: 400; }
.question-text b, .question-text strong { font-weight: 700; }
.ls-questionhelp, .question-help-container, .ls-question-help { font-size: 15px; color: var(--tsd-muted, #5f646c); }
table.ls-answers thead th, table.ls-answers thead td { font-size: 15px; color: #4a4f57; }
.ls-answers tbody .answertext { font-size: 16px; line-height: 1.4; }

/* 3. Desktop: gewählter Wert farbig hinterlegt */
@media (min-width: 768px) {
  table.table-array-radio td.answer-item { cursor: pointer; transition: background-color .15s ease; }
  table.table-array-radio td.answer-item:has(input:checked) { background: var(--tsd-red-soft, rgba(176,22,50,.08)); }
}

/* 2. Mobil: Skalen mit vielen Werten als Wertefelder */
@media (max-width: 767px) {
  table.table-array-radio,
  table.table-array-radio > tbody { display: block !important; width: 100% !important; border: 0 !important; border-radius: 0; }
  table.table-array-radio > thead { display: none !important; }
  table.table-array-radio > tbody > tr.answers-list {
    display: block !important; padding: 14px 0 16px; margin: 0;
    border-top: 1px solid var(--tsd-line, #e4e6ea); background: #fff !important;
  }
  table.table-array-radio > tbody > tr.answers-list > th.answertext {
    display: block !important; width: 100% !important; padding: 0 0 10px !important; border: 0 !important;
    font-size: 16px; font-weight: 700; text-align: left; background: transparent !important;
  }
  table.table-array-radio > tbody > tr.answers-list > td.answer-item {
    display: block !important; position: relative; width: 100% !important;
    padding: 0 !important; margin: 0 0 6px; border: 0 !important; text-align: left; background: transparent !important;
  }
  table.table-array-radio td.answer-item input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; left: 8px; top: 8px;
  }
  table.table-array-radio td.answer-item label.ls-label-xs-visibility {
    display: flex !important; align-items: center; justify-content: flex-start;
    position: static; width: 100%; height: auto; min-height: 46px; margin: 0; padding: 8px 14px;
    clip: auto; overflow: visible; white-space: normal;
    border: 1px solid #cfd3d9; border-radius: 10px; background: #fff; color: var(--tsd-text, #2b2d31);
    font-size: 16px; font-weight: 400; line-height: 1.3; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  table.table-array-radio td.answer-item label.ls-label-xs-visibility::before,
  table.table-array-radio td.answer-item label.ls-label-xs-visibility::after { display: none !important; }
  table.table-array-radio td.answer-item input[type="radio"]:checked + label {
    background: var(--tsd-red, #b01632); border-color: var(--tsd-red, #b01632); color: #fff; font-weight: 700;
  }
  table.table-array-radio td.answer-item input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--tsd-red, #b01632); outline-offset: 2px;
  }
  /* Ab 8 Antwortwerten (z. B. Skala 10 bis 0): kompaktes Raster mit je 6 Feldern pro Zeile */
  table.table-array-radio > tbody > tr.answers-list:has(> td.answer-item:nth-of-type(8)) {
    display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  }
  table.table-array-radio > tbody > tr.answers-list:has(> td.answer-item:nth-of-type(8)) > th.answertext { grid-column: 1 / -1; }
  table.table-array-radio > tbody > tr.answers-list:has(> td.answer-item:nth-of-type(8)) > td.answer-item { margin: 0; }
  table.table-array-radio > tbody > tr.answers-list:has(> td.answer-item:nth-of-type(8)) label.ls-label-xs-visibility {
    justify-content: center; padding: 0; min-height: 48px; font-weight: 700; font-size: 17px;
  }
}

/* 4. Einfach- und Mehrfachauswahl: ganze Zeile als Auswahlfeld */
.list-radio li.answer-item,
.multiple-opt .answer-item.checkbox-item {
  padding: 0 !important; margin: 0 0 8px !important;
  border: 1px solid #cfd3d9; border-radius: 10px; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.list-radio li.answer-item:hover,
.multiple-opt .answer-item.checkbox-item:hover { border-color: var(--tsd-red, #b01632); background: #fff; }
.list-radio li.answer-item:has(input:checked),
.multiple-opt .answer-item.checkbox-item:has(input:checked) {
  border-color: var(--tsd-red, #b01632); background: var(--tsd-red-soft, rgba(176,22,50,.08));
}
.list-radio li.answer-item > label.radio-label,
.multiple-opt .answer-item.checkbox-item > label.checkbox-label {
  display: block; width: 100%; margin: 0; min-height: 46px;
  padding: 12px 14px 12px 46px; line-height: 1.35; cursor: pointer;
  color: var(--tsd-text, #2b2d31);
}
.list-radio li.answer-item > label.radio-label::before,
.multiple-opt .answer-item.checkbox-item > label.checkbox-label::before {
  left: 14px; top: 50%; margin: -10px 0 0 0; width: 20px; height: 20px;
}
.list-radio li.answer-item > label.radio-label::after {
  left: 18px; top: 50%; margin: -6px 0 0 0; width: 12px; height: 12px;
}
.multiple-opt .answer-item.checkbox-item > label.checkbox-label::after {
  left: 14px; top: 50%; margin: -10px 0 0 0; width: 20px; height: 20px; line-height: 20px; text-align: center;
}
.list-radio li.noanswer-item > label.radio-label { color: var(--tsd-muted, #5f646c); }
/* Hellgraue "Weiß nicht"- und "Keine Angabe"-Texte aus den Fragetexten lesbar machen (Kontrast) */
.question-container [style*="bdc3c7"],
.question-container [style*="BDC3C7"],
.question-container [style*="#ddd"],
.question-container [style*="#DDD"],
.question-container [style*="#ccc"],
.question-container [style*="#CCC"],
.question-container [style*="#c0c0c0"],
.question-container [style*="silver"],
.question-container [style*="rgb(221"],
.question-container [style*="rgb(204"],
.question-container [style*="rgb(189"] { color: var(--tsd-muted, #5f646c) !important; }

/*
   TSD_2027: Begruessungsseite im Kartenstil wie die Fragenseiten (CR 03.10.2026)
   Der Begruessungstext erscheint als Karte mit rotem Rand links.
   Leere Begruessungstexte erzeugen keine leere Karte (:has(*)).
*/
#welcome-container .survey-welcome:has(*) {
  background: #fff;
  border: 1px solid var(--tsd-line, #e4e6ea);
  border-left: 4px solid var(--tsd-red, #b01632);
  border-radius: var(--tsd-radius, 12px);
  box-shadow: var(--tsd-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06));
  padding: 20px 24px;
  margin: 16px 0 24px;
  line-height: 1.6;
  color: var(--tsd-text, #2b2d31);
}
#welcome-container .survey-welcome > :first-child { margin-top: 0; }
#welcome-container .survey-welcome > p:first-child > br:first-child { display: none; }
#welcome-container .survey-welcome > :last-child { margin-bottom: 0; }
#welcome-container .survey-welcome #landingLogoHolder,
#welcome-container .survey-welcome .logopartners-wrapper { margin-top: 16px; }
@media (max-width: 767px) {
  #welcome-container .survey-welcome:has(*) { padding: 16px; margin-top: 8px; }
}


/* 04.10.2026: Fragenindex vollständig sichtbar (Liste wurde an der Seitenkarte abgeschnitten) */
#outerwrapper.outerwrapper {
  overflow: visible;
  display: flow-root;
}
.ls-index-menu .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

/* 04.10.2026: Aktuelle Seite im Fragenindex gut lesbar statt gelb */
.ls-index-menu .dropdown-menu li.index-item-current a,
.ls-index-menu .dropdown-menu li.index-item-current.index-item-seen a {
  color: #2b2d31;
  background-color: #eceef1;
  font-weight: bold;
  font-style: normal;
}