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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


body {
     padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
     padding-top: 60px;/* now is redefine in JS to fit any title length */
     flex-direction: column; /* article, then footer */
     display: flex; /* flex, to extend the content to full size */
     min-height: 100vh; /* full height, to bottom-align footer */
}
body > article {
    flex: 1; /* the main article should use as much space as possible */
}


:root {
  --background-color: #fff;
  --text-color: #1D1D1B;
  --gradient-headline-start: #cf0055;
  --gradient-headline-middle: #e7622b;
  --gradient-headline-end: #f08e17;
}


a {
    color: var(--gradient-headline-start) !important; 
}
a:hover, a:focus {
    color: var(--text-color) !important; 
}


.btn-primary,
.basic .btn-check:focus:checked + .btn-primary, 
.basic .btn-check .btn-primary:focus:checked,
.progress-bar {
    background-image: linear-gradient(90deg, var(--gradient-headline-start) 0%, var(--gradient-headline-middle) 50%, var(--gradient-headline-end) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}


.

.checkbox input[type="checkbox"]:checked + label::before, 
.radio input[type="radio"]:checked + label::before,
label::after {
   
    background-color: var(--gradient-headline-start) !important; 
    border-color: var(--gradient-headline-start) !important;
}

body, h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, textarea, select, .question-title-container, .answer-container {
    font-family: 'Inter', sans-serif !important;
}


.question-title-container.bg-primary {
    background-image: linear-gradient(90deg, var(--gradient-headline-start) 0%, var(--gradient-headline-middle) 50%, var(--gradient-headline-end) 100%) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}


.question-title-container.bg-primary .question-text,
.question-title-container.bg-primary .question-text * ,
.question-title-container.bg-primary .asterisk {
    color: #ffffff !important;
}


.question-valid-container,
.question-valid-container.bg-primary {
    background-color: #f2f2f2 !important; 
    background-image: none !important; 
    color: var(--text-color) !important; 
    border: none !important;
}


.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message,
.question-valid-container .text-info,
.question-valid-container [class^="fa-"], 
.question-valid-container [class*=" fa-"] {
    color: var(--text-color) !important;
}


.question-title-container .asterisk .text-danger,
.question-title-container .asterisk sup {
    color: #ffffff !important;
}

#survey-nav,
#survey-nav,
#survey-nav.bg-light {
    background-color: transparent !important; 
    
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../files/0A1A4565.jpg') !important;
    
    background-size: cover !important; 
    
    
    background-position: 45% 30%, 45% 30% !important; 
    
    background-repeat: no-repeat !important; 
    
   
    background-attachment: scroll !important; 
    
    border-bottom: none !important; 
}



@media (max-width: 767px) {
  
  #survey-nav,
    #survey-nav.bg-light {
     
        background-position: 55% 30%, 55% 30% !important; 
        
    
    } 
    #survey-nav .navbar-brand.d-none {
        display: block !important; 
        width: 100% !important;
        text-align: left !important; 
        margin: 0 !important; 
    }
    

    #survey-nav .navbar-brand img.logo {
        max-height: 80px !important;      
        width: auto !important;
        display: inline-block !important;
    }


    #main-col {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

.survey-name,
h1.survey-name,
.survey-description,
.survey-description-text {
    text-align: left !important;       
    hyphens: none !important;          
    -webkit-hyphens: none !important;  
    padding-bottom: 10px !important;   
}


#welcome-container .text-info,
#welcome-container .text-primary {
    color: #333333 !important; 
}


/* 1. Grund-Design (Farbverlauf) für ALLE Buttons und den Fortschrittsbalken */
.btn-primary,
.basic .btn-check:focus:checked + .btn-primary, 
.basic .btn-check .btn-primary:focus:checked,
#register_button,
.progress-bar {
    background-image: linear-gradient(90deg, var(--gradient-headline-start) 0%, var(--gradient-headline-middle) 50%, var(--gradient-headline-end) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-primary,
.basic .btn-check:focus:checked + .btn-primary, 
.basic .btn-check .btn-primary:focus:checked,
#register_button {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7) !important; 
    transition: all 0.15s ease-in-out !important; 
}


.btn-primary:hover,
#register_button:hover {
    transform: translate(2px, 2px) !important; 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important; 
    color: #ffffff !important;
}


.btn-primary:active, 
.btn-primary:focus, 
.btn-primary.active,
#register_button:active,
#register_button:focus {
    transform: translate(4px, 4px) !important; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; 
    color: #ffffff !important;
}


.register-jumbotron h4,
.register-jumbotron h2,
.register-jumbotron p,
.register-jumbotron div {
    hyphens: none !important;
    -webkit-hyphens: none !important;
     text-align: center !important;
}



.question-title-container.bg-primary .question-text,
.question-title-container.bg-primary .question-text code,
.question-title-container.bg-primary .question-text pre,
.question-title-container.bg-primary .question-text span {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.15rem !important; 
    font-weight: normal !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}


.grauer-hilfetext .question-help-container .ls-questionhelp::before,
.grauer-hilfetext .question-help-container [class^="fa-"], 
.grauer-hilfetext .question-help-container [class*=" fa-"] {
    display: none !important;
    content: none !important;
}


.grauer-hilfetext .question-help-container .ls-questionhelp {

    background-image: repeating-linear-gradient(
        45deg,
        #fbfbfb,
        #fbfbfb 10px,
        #f2f2f2 10px,
        #f2f2f2 20px
    ) !important;
    background-color: transparent !important;
    

    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    padding: 12px 15px !important; 
    margin-top: 15px !important;    
    display: block !important;
}


.grauer-hilfetext .question-help-container .ls-questionhelp,
.grauer-hilfetext .question-help-container .ls-questionhelp * {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important; 

    color: var(--text-color, #1D1D1B) !important; 
    font-style: normal !important;
    font-weight: normal !important;
}