/* =====================================================
   GRUNDLAYOUT & CONTAINER
   ===================================================== */

/* Kein Strich zwischen Navbar und Top Container */
.border-bottom {
    border-bottom: 1px solid #ffffff !important;
}

#limesurvey {
    background-color: #ffffff;
    padding-top: 25px;
    padding-bottom: 50px;
}

#limesurvey .group-outer-container {
    background-color: #ffffff;
}

.outerframe {
    padding: 0;
    font-size: 18px;
}

.survey-form-container,
.form {
    padding-top: 0px;
}

.group-container {
    padding-left: 30px;
    padding-right: 30px;
    background-color: #ffffff;
}

.group-title {
    text-align: left;
    margin-bottom: 50px;
    margin-top: 20px;
    background: transparent;
}

.group-description {
    background-color:#d1e1e1;
    margin-bottom:50px;
}

.group-description .well {
    background-color:transparent!important;
    margin-bottom:0 !important;
}

p {
    font-size: 18px;
}

li {
    font-size: 18px;
}


/* Silbentrennung deaktiviert: none - aktiviert: auto */

#outerframeContainer {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
}

/* =====================================================
   NAVBAR & PROGRESS BAR
   ===================================================== */
#survey-nav .container,
#survey-nav .container-fluid {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 992px) {
    #survey-nav .container,
    #survey-nav .container-fluid {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    #survey-nav .container,
    #survey-nav .container-fluid {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    #survey-nav .container,
    #survey-nav .container-fluid {
        max-width: 1320px;
    }
}

.logo-container > img {
    padding-left: 0;
    padding-right: 0;
}

.navbar-action-link {
    padding-right: 0;
}

.px-2 {
    padding-right: 0 !important;
}

/* Kein Strich zwischen Navbar und Top Container */
#survey-nav .border-bottom {
    border-bottom: 1px solid #ffffff !important;
    display: none;
}

/* Progress Bar fixiert */
.top-container {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: #eb9929;
    border: none !important;
    position: fixed;
    z-index: 5;
}

/* WICHTIG: Überschreibt theme.css padding/margin */
.top-container .top-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.top-container .container {
    margin: 0;
    padding: 0 !important;
    background-color: transparent;
}

.top-container .progress {
    height: 20px;
    background-color: #eb9929;
    border: 0 solid #005575 !important;
    display: block;
}

.top-container .progress-bar {
    background-color: #ffffff !important;
    color: #eb9929;
    z-index: 20;
    font-size: 16px;
}

/* Platz für fixierte Progress Bar */
#main-row {
    margin-top: -1px;
    padding-top: 60px;
}

#main-col {
    margin: 0;
    padding: 0;
}


/* =====================================================
   STARTSEITE & WELCOME
   ===================================================== */

#welcome-container {
    padding: 30px !important;
    margin-top: 0;
    color: #005575 !important;
}

.text-info {
    color: #005575 !important;
    text-align: left !important;
}

#firstpage-changelang {
    padding-top: 20px;
}

.survey-description a {
    color: #eb9929 !important;
}

.survey-description a:visited {
    color: #6699AC !important;
}

.survey-description a:hover {
    color: #eb9929 !important;
}

.survey-description a:active {
    color: #eb9929 !important;
}


/* =====================================================
   DATENSCHUTZ (PRIVACY)
   ===================================================== */

.privacy {
    min-height: 20px;
    background: none !important;
    color: #ffffff !important;
    margin-top: 50px;
    font-size: 18px;
}

.privacy-block {
    background: #eb9929;
    padding-left: 30px;
}

.privacy .form-check {
    padding-left: 30px;
    padding-right: 30px;
    background: #eb9929;
}

.privacy .form-check-label {
    margin-left: 10px;
    font-weight: normal !important;
    font-size: 18px;
}

/* Privacy-Link: normal weiß, visited #005575 */
.privacy .form-check-label a,
.privacy .form-check-label a:link {
    padding-left: 10px;
    font-weight: normal !important;
    color: #ffffff !important;
}

.privacy .form-check-label a:visited {
    color: #005575 !important;
}

/* Hover / Active bewusst kontrolliert */
.privacy .form-check-label a:hover,
.privacy .form-check-label a:active,
.privacy .form-check-label a:focus {
    color: #005575 !important;
}

/* Privacy link inside notice text */
.privacy-block .limit-text-window a,
.privacy-block .limit-text-window a:link {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Visited link */
.privacy-block .limit-text-window a:visited {
    color: #005575 !important;
}

/* Hover / focus */
.privacy-block .limit-text-window a:hover,
.privacy-block .limit-text-window a:focus,
.privacy-block .limit-text-window a:active {
    color: #005575 !important;
}



/* =====================================================
   SURVEY TITEL
   ===================================================== */

.survey-name {
    color: #eb9929;
    margin-top: 0px;
    margin-bottom: 60px;
    font-size: 60px;
    font-weight: 400;
    text-align: center !important;
}


/* =====================================================
   FRAGEN-CONTAINER
   ===================================================== */

.outerwrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    float: none;
    clear: both;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

.question-container {
    background-color: #ffffff;
    border: none;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.bip-item .question-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.question-title-container {
    background-color: #ffffff;
    color: #005575;
    margin-bottom: 0;
    padding: 0;
    padding-right: 10px;
    font-weight: normal;
    font-size: 18px;
}

/* Längere Fragen oberhalb der Antwort-Box (mit Help Text) */
.text-box .question-title-container {
    width: 100%;
}


/* =====================================================
   SIDE-BY-SIDE LAYOUT FIX
   Frage links (220px), Antwort rechts (Rest)
   ===================================================== */

#limesurvey .question-container.row[style*="display: none"] {
    display: none !important;
}


#limesurvey .question-container.row > .question-title-container.col-12 {
    width: 220px !important;
    float: left !important;
    clear: left !important;
    flex: none !important;
    max-width: 220px !important;
    margin-bottom: 10px;
}

#limesurvey .question-container.row > .answer-container.col-12 {
    width: calc(100% - 230px) !important;
    float: right !important;
    flex: none !important;
    max-width: calc(100% - 230px) !important;
}

#limesurvey .question-container.row > .question-help-container.col-12,
#limesurvey .question-container.row > .question-valid-container.col-12 {
    display: none !important;
}

#limesurvey .question-container.row::after {
    content: "";
    display: table;
    clear: both;
}

#limesurvey .question-container.row.text-box > .question-title-container.col-12,
#limesurvey .question-container.row.text-box > .answer-container.col-12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}


/* =====================================================
   HILFE & VALIDIERUNG
   ===================================================== */

.alert {
    background-color: #eb9929;
    color: #ffffff;
}

.group-container .question-help-container {
    background-color: #ffffff;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.ls-questionhelp {
    font-size: 18px;
    color: #eb9929;
    padding-left: 5px;
}

.group-container .question-valid-container {
    background-color: #ffffff;
    margin-bottom: 0px;
    padding-left: 30px;
    padding-right: 30px;
    color: #eb9929 !important;
}

.question-valid-container {
    display: none;
}

.group-container .question-valid-container .fa {
    padding-right: 5px;
}

.em_num_answers,
.emtip,
.error {
    font-size: 18px;
    color: #005575;
}

.asterisk {
    display: none;
}


/* =====================================================
   ANTWORTEN & FORMULARELEMENTE
   ===================================================== */

.answer-container .container {
    padding-left: 0;
    padding-right: 0;
}

.form-check {
    padding-left: 0;
    padding-right: 20px;
    border-radius: 0;
}

/* Dropdown volle Breite */
.answer-container .ls-answers.answer-item .col-auto {
    width: 100% !important;
    flex: 1 1 100% !important;
}

.answer-container .ls-answers.answer-item select.form-select {
    width: 100% !important;
}

/* Multiple Rows */

.form-horizontal .control-label.col-12 {
    text-align: left !important;
}

.bip-items .answer-container .mb-3 {
   margin-bottom:25px !important;
}

.ls-answers {
    padding: 0;
}

.ls-answers tbody .answertext {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.ls-answers tbody .answertext p {
    font-weight: bold !important;
    margin-bottom: 0 !important;
}

.ls-answers tbody ul {
    padding-left: 0 !important;
    margin-left: 1rem !important;
}

.ls-answers tbody .radio-list li {
    margin-right: 0 !important;
    margin-bottom: 1em;
}


/* =====================================================
   SINGLE & MULTIPLE CHOICE
   ===================================================== */

.answer-container .radio-item,
.answer-container .checkbox-item,
.answer-container .question-item,
.answer-container .answer-item,
.answer-container .mb-1 {
    margin-bottom: 10px !important;
}

.answer-container .radio-item label,
.answer-container .checkbox-item label {
    padding-left: 10px;
    vertical-align: middle !important;
    margin-top: 1px;
}

.dir-ltr .radio-item input[type="radio"],
.dir-ltr .checkbox-item input[type="checkbox"] {
    left: 0;
    margin-top: 1px !important;
}

/* Kommentarfeld in Multiple Choice with Comment */
#limesurvey .comment-box-no-text .comment-item .form-control {
    margin-left: 20px;
    margin-top: -25px;
}

#limesurvey .comment-box-no-text .row,
#limesurvey .SSI-topics .row {
    padding-left: 10px !important;
    padding-right: 20px;
}

.checkbox-item.othertext-label-checkox-container {
    padding-top: 0;
}


/* =====================================================
   TABELLEN & MATRIX
   ===================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #005575;
    --bs-table-striped-bg: #d1e1e1;
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: #eb9929;
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: #eb9929;
    border-color: #d1e1e1;
    color: #005575;
    margin-bottom: 1rem;
    vertical-align: top;
    width: 100%;
}

.table-bordered>:not(caption)>* {
    border-width: 1px 0;
}

th,
td {
    color: #005575;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #d1e1e1;
}

.table-hover>tbody>tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #d1e1e1;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.ls-move-btn {
    border-radius: 0;
}

.ls-move-btn:hover {
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #eb9929 !important;
    border: 1px solid #005575 !important;
    filter: none !important;
    color: #ffffff !important;
}

.btn-check:checked+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #eb9229 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    filter: none !important;
}

.btn-check .btn-primary:focus,
.btn-check:focus+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #005575 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    filter: none !important;
}

.btn-check:focus:checked+.btn-primary,
.btn-check .btn-primary:focus:checked {
    background-color: #eb9929 !important;
    border: 1px solid #005575 !important;
    color: #fff !important;
    filter: none !important;
}

.btn-check .btn-primary:active,
.btn-check:active+.btn-primary {
    background-color: #eb9929 !important;
    border: 1px solid #eb9929 !important;
    box-shadow: none !important;
    color: #fff !important;
    filter: none !important;
}

.text-start {
    padding-left: 40px !important;
}

.text-end {
    padding-right: 40px !important;
}

/* =====================================================
   Akkordeon
   ===================================================== */

.details-wrapper{
width:100% !important;
margin-top:50px !important;
    
}

.details-content{
margin-top:0px !important;
margin-bottom:30px !important;
padding-top:10px !important;
padding-bottom:10px !important;
text-align:left
    
}


details li{
    font-size:18px;
    text-align:left;
    color:#005575;
}

details summary{
background-color:#005575; !important;
font-size:24px !important;
font-weight:300 !important;
color:#ffffff !important;
text-align:left !important;
padding-top:5px !important;
padding-bottom:5px !important;
padding-left:10px !important;
padding-right:10px !important;
margin-top:20px !important;
margin-bottom:0px !important;
list-style:none !important;
cursor:pointer !important;
border:none;
    
}

summary{
position:relative !important}

summary::marker{
color:transparent !important}

summary::after{
content:"+" !important;
position:absolute !important;
color:#ffffff !important;
font-size:1.5em !important;
top:0 !important;
right:20px !important;
transition:all 0.5s !important}

details[open] summary::after{
transform: translate(0,0) rotate(45deg);

}

/* =====================================================
   REGISTRATION FORM SPEZIFISCH
   ===================================================== */

.registration-form .list-unstyled.col-12.col-md-2,
.registration-form .list-unstyled.col-md-4.col-12 {
    width: 170px;
    padding-right: 0;
    margin-right: 0;
}

.registration-form .checkbox-item.othertext-label-checkox-container {
    display: none;
}

.registration-form ul {
    margin-bottom: 0;
}

div .bip {
    margin-top: 50px;
    margin-bottom:100px;
    border-style: solid none solid none !important;
    border-color:#eb9929 !important;
    border-width:5px !important;
    padding-top:10px;
    padding-bottom:10px;
}

/* =====================================================
   CUSTOM CLASSES FÜR MEHRSPALTIGE LAYOUTS
   ===================================================== */

.float-left {
    float: left;
    clear: left;
}

.float-right {
    float: right;
}

.2Q_50-50_left {
    float: left;
    width: 50%;
    clear: left;
}

.2Q_50-50_right {
    float: right;
    width: 50%;
}

.Q_10_left {
    float: left;
    width: 20%;
    clear: left;
}

.Q_20_left {
    float: left;
    width: 20%;
    clear: left;
}

.Q_26_left {
    float: left;
    width: 26%;
    clear: left;
}

.Q_33\.3left {
    float: left;
    width: 33.3%;
    clear: left;
}

.Q_50_left {
    float: left;
    width: 50%;
    clear: left;
}

.Q_10 {
    float: left;
    width: 10%;
}

.Q_11 {
    float: left;
    width: 11%;
}

.Q_20 {
    float: left;
    width: 20%;
}

.Q_26 {
    float: left;
    width: 26%;
}

.Q_33\.3 {
    float: left;
    width: 33.3%;
}

.Q_40 {
    float: left;
    width: 40%;
}

.Q_50 {
    float: left;
    width: 50%;
}

.Q-page {
    width: 100%;
}


/* =====================================================
   LINKS
   ===================================================== */

a {
    color: #eb9929 !important;
}

a:visited {
    color: #6699AC !important;
}

a:hover {
    color: #eb9929 !important;
}

a:active {
    color: #eb9929 !important;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS (Bootstrap 5 Standard)
   - Mobile: max 575px
   - Tablet: max 767px
   - Medium: 768px - 991px
   - Large: 992px+
   ===================================================== */

/* Mobile */
@media only screen and (max-width: 575px) {
    #welcome-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .survey-form-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .title-responsive {
        margin-top: 20px !important;
        margin-bottom: 50px !important;
    }

    .title-responsive h1 {
        font-size: 40px !important;
        color: #005575 !important;
    }

    /* 1 Spalte auf Mobile */
    .checkbox-list,
    .radio-list,
    .checkbox-list.ls-column-count-5,
    .radio-list.ls-column-count-5,
    .checkbox-list.ls-column-count-6,
    .radio-list.ls-column-count-6 {
        column-count: 1 !important;
    }
}

/* Tablet */
@media only screen and (max-width: 767px) {
    #welcome-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .survey-form-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #limesurvey .question-container.row > .question-title-container.col-12,
    #limesurvey .question-container.row > .answer-container.col-12 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    /* 2 Spalten auf Tablet (gestapelt = volle Breite) */
    .checkbox-list.ls-column-count-5,
    .radio-list.ls-column-count-5,
    .checkbox-list.ls-column-count-6,
    .radio-list.ls-column-count-6 {
        column-count: 2 !important;
    }
}

/* Titel Breakpoint */
@media only screen and (max-width: 991px) {
    .title-responsive {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
    }

    .title-responsive h1 {
        font-size: 40px !important;
        color: #005575 !important;
    }
}

/* Medium */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .survey-form-container {
        padding-left: 50px;
        padding-right: 50px;
    }

    #limesurvey .question-container.row > .question-title-container.col-12 {
        width: 180px !important;
        max-width: 180px !important;
    }

    #limesurvey .question-container.row > .answer-container.col-12 {
        width: calc(100% - 190px) !important;
        max-width: calc(100% - 190px) !important;
    }

    /* 2 Spalten auf Medium (side-by-side = schmale Antwortbox) */
    .checkbox-list,
    .radio-list,
    .checkbox-list.ls-column-count-5,
    .radio-list.ls-column-count-5,
    .checkbox-list.ls-column-count-6,
    .radio-list.ls-column-count-6 {
        column-count: 2 !important;
    }
}

/* Large */
@media only screen and (min-width: 992px) {
    .survey-form-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}