/******************
    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');


/* 1. Abstand für den Hauptinhalt vergrößern, damit er nicht unterm Bild verschwindet */
body {
     padding-bottom: 0; 
     padding-top: 180px !important; /* WICHTIG: Erhöht den Abstand nach oben */
     flex-direction: column; 
     display: flex; 
     min-height: 100vh; 
}



body > article {
    flex: 1; /* the main article should use as much space as possible */
}

:root {
  --background-color: #edf2eb;  /* Der sehr helle, dezent grünliche Hintergrund */
  --text-color: #2b3d4f;        /* Das dunkle Blaugrau */
  
  /* Neuer Verlauf: Basiert exakt auf dem Salbeigrün der Menüleiste */
  --gradient-headline-start: #95af92;  
  --gradient-headline-middle: #a7bfa5; 
  --gradient-headline-end: #b6ccb4;    
}

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: #000000 !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: #000000 !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: #000000 !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: #000000 !important;
}


/* 2. Menüleiste deutlich höher machen, damit das Bild Platz hat */
#survey-nav,
#survey-nav.bg-light {
    min-height: 150px !important; /* Hier können Sie spielen: 150px, 200px etc. je nach Bildhöhe */
    background-color: transparent !important; 
    background-image: url('../files/soli-ev.jpg') !important; 
    
    /* 'contain' sorgt dafür, dass das Bild komplett reinpasst, 'cover' füllt die Breite komplett aus */
    background-size: cover !important; 
    
    background-position: center center !important; /* Zentriert das Bild schön in die Mitte */
    background-repeat: no-repeat !important; 
    background-attachment: scroll !important; 
    border-bottom: none !important; 
    box-shadow: none !important; 
}

@media (max-width: 767px) {
    #survey-nav,
    #survey-nav.bg-light {
        background-position: 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: #000000 !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: #000000 !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: #000000 !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;
}

/* Grundaussehen der Ja/Nein/Keine Antwort Buttons */
.answer-container .btn-group .btn-primary,
.btn-group .btn-primary {
    background: #ffffff !important;       /* Weißer Hintergrund */
    color: #000000 !important;            /* Schwarze Schrift */
    border: 2px solid #8ca68c !important; /* Grüner Rahmen passend zum Theme */
    font-weight: bold !important;         /* Schrift etwas kräftiger */
}

/* Icons (Häkchen, Kreuz etc.) auch schwarz machen */
.answer-container .btn-group .btn-primary i,
.answer-container .btn-group .btn-primary svg,
.btn-group .btn-primary i,
.btn-group .btn-primary svg {
    color: #000000 !important;
}

/* Leichter Hover-Effekt (beim Drüberfahren mit der Maus) */
.answer-container .btn-group .btn-primary:hover,
.btn-group .btn-primary:hover {
    background: #f8fcf8 !important;       /* Ein ganz helles, dezentes Grün/Weiß */
    border-color: #6d876d !important;     /* Rahmen wird etwas dunkler */
}

/* WICHTIG: Wenn der Button AUSGEWÄHLT ist, füllen wir ihn mit dem grünen Verlauf, damit man die Auswahl klar sieht */
.answer-container .btn-group .btn-check:checked + .btn-primary,
.answer-container .btn-group .btn-primary.active,
.btn-group .btn-check:checked + .btn-primary,
.btn-group .btn-primary.active {
    background: linear-gradient(135deg, #a4bfa4, #8ca68c) !important; /* Grüner Verlauf */
    color: #000000 !important;
    border: 2px solid #6d876d !important; /* Etwas dunklerer Rand für die klare Abgrenzung */
}