/* =========================================================
   HEADER – LimeSurvey 3.28
   ========================================================= */

.navbar.navbar-default {
    background: #ffffff !important;
    background-color: #fafbfa !important;
background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 12px,
    rgba(104, 132, 116, 0.035) 12px,
    rgba(104, 132, 116, 0.035) 13px
) !important;

    border: 0 !important;
    border-bottom: 4px solid #BCCF02 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    min-height: 70px !important;
    height: 70px !important;

    margin-bottom: 0 !important;
}


/* Navbar-Inhalt */

.navbar-header {
    min-height: 66px !important;
    height: 66px !important;
}


/* Logo */

.navbar-brand {
    width: 240px !important;
    height: 66px !important;
    min-height: 66px !important;

    padding: 0 !important;

    background-image: url("/upload/themes/survey/Werkbank/files/Werkbank-Logo-L.png") !important;
    background-repeat: no-repeat !important;
    background-position: 20px center !important;
    background-size: 140px auto !important;
}

.navbar-brand img {
    display: none !important;
}


/* Sonstige Elemente im Header */

.navbar-text {
    line-height: 66px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Falls LimeSurvey die Navbar-Inhalte selbst einfärbt */

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: #003E75 !important;
}


/* =========================================================
   FALLS DER HEADER EINE INNERE FLÄCHE ÜBERLAGERT
   ========================================================= */

.navbar > .container,
.navbar > .container-fluid {
    background-color: transparent !important;
}

/* =========================================================
   DEIN RESTLICHES CSS
   ========================================================= */

:root {
    --green: #BCCF02;
    --blue: #404040;
}

body,
button,
input,
select,
textarea {
    font-family: "Source Sans Pro", sans-serif !important;
}

body {
    color: #212121;
    font-size: 16px;
}


/* =========================================================
   HAUPTBEREICH
   ========================================================= */

.container {
    max-width: 1100px;
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--blue) !important;
    font-weight: 600;
    letter-spacing: -0.2px;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.55rem;
}


/* =========================================================
   FRAGE
   ========================================================= */

.question-container {
    background: #f7f9fa !important;

    border: 1px solid #dce3e7 !important;
    border-radius: 10px !important;

    padding: 24px !important;
    margin-bottom: 22px;

    box-shadow: 0 3px 10px rgba(0, 62, 117, 0.07) !important;
}


/* Fragentitel */

.question-title-container {
    color: var(--blue);
    border-bottom: none !important;
}


/* =========================================================
   FORTSCHRITT
   ========================================================= */

.progress {
    height: 16px !important;
    border-radius: 10px !important;
    background: #eeeeee !important;
    box-shadow: none !important;
}

.progress-bar {
    background-color: var(--green) !important;
    border-radius: 10px !important;
}


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

.btn-primary {
    background-color: var(--green) !important;
    border: 2px solid var(--green) !important;
    color: #ffffff !important;

    border-radius: 8px !important;
    padding: 9px 22px !important;

    font-size: 15px;
    font-weight: 600;

    box-shadow: none !important;
    transition: all 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #ffffff !important;
    color: var(--blue) !important;
    border-color: var(--blue) !important;
}

/* =========================================================
   ZURÜCK-BUTTON
   ========================================================= */

.btn-default,
.btn-secondary,
.btn-nav-back {
    background-color: #ffffff !important;
    border: 2px solid var(--blue) !important;
    color: var(--blue) !important;

    border-radius: 8px !important;
    padding: 9px 22px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: none !important;
    transition: all 0.15s ease;
}


/* Hover */

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-nav-back:hover,
.btn-nav-back:focus {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-control {
    border: 2px solid #e2e6e8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;

    padding: 10px 13px;
    color: var(--blue);
}

.form-control:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(188, 207, 2, 0.18) !important;
}


/* =========================================================
   RADIO & CHECKBOX
   ========================================================= */

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--green);
}


/* =========================================================
   ANTWORTEN
   ========================================================= */

.radio-item,
.checkbox-item {
    border-radius: 8px;
}


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

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue);
    text-decoration: underline;
}


/* =========================================================
   HILFSTEXTE
   ========================================================= */

.text-muted {
    color: var(--blue) !important;
    opacity: 0.65;
}


/* =========================================================
   ABSTÄNDE
   ========================================================= */

.survey-question {
    margin-bottom: 24px;
}


/* =========================================================
   SPRACHWECHSLER
   ========================================================= */

.language-changer .btn,
.language-changer button,
.language-changer .btn-info {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;

    border-radius: 8px !important;
    font-weight: 600;
}

.language-changer .btn:hover,
.language-changer button:hover,
.language-changer .btn-info:hover {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}


/* Sprache ändern – Bootstrap Standardfarbe entfernen */

.btn-info {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}

/* =========================================================
   FRAGEN & ANTWORTEN
   ========================================================= */

/* Fragentext */
.question-title-container,
.question-title-container *,
.question-text,
.question-text * {
    color: #333333 !important;
}


/* Antwortmöglichkeiten */
.question-container label,
.question-container .control-label,
.question-container .answer-item,
.question-container .answer-item *,
.question-container .radio-item,
.question-container .checkbox-item {
    color: #333333 !important;
}

/* Pflicht-Sternchen immer rot */
.question-title-container .text-danger,
.question-title-container .text-danger *,
.question-title-container .asterisk,
.question-title-container .mandatory,
.question-title-container span[aria-hidden="true"] {
    color: #db756b !important;
}


/* =========================================================
   HINWEISE / HILFSTEXTE
   ========================================================= */

.question-help,
.question-help *,
.question-help-container,
.question-help-container *,
.help-block,
.help-block * {
    color: #a3b64c !important;
}


/* =========================================================
   VALIDIERUNGSHINWEISE / ERROR-MELDUNGEN
   ========================================================= */

.question-container .error,
.question-container .error * {
    color: #839a67 !important;
}

/* =========================================================
   WILLKOMMENSSEITE – TEXTFARBEN
   ========================================================= */

.survey-welcome,
.survey-welcome *,
.survey-description,
.survey-description *,
.welcome-text,
.welcome-text *,
.survey-welcome h1,
.survey-welcome h2,
.survey-welcome h3,
.survey-welcome h4,
.survey-welcome p,
.survey-welcome span,
.survey-welcome div {
    color: #333333 !important;
}

/* Links auf der Willkommensseite */
.survey-welcome a,
.survey-description a {
    color: #404040 !important;
}

/* Überschriften */
.survey-welcome h1,
.survey-welcome h2,
.survey-welcome h3,
.survey-welcome h4 {
    color: #404040 !important;
}

/* =========================================================
   ANTWORT-BUTTONS
   ========================================================= */

.answer-container {
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Größe möglichst wie LimeSurvey original lassen */
.answer-container .btn-primary {
    background-color: var(--green) !important;
    border: 2px solid var(--green) !important;
    color: #ffffff !important;

    border-radius: 8px !important;

    margin: 0 !important;

    /* keine künstliche Größe */
    width: auto !important;
    height: auto !important;
}

/* Text + Icons dauerhaft weiß */
.answer-container .btn-primary,
.answer-container .btn-primary *,
.answer-container .btn-primary i,
.answer-container .btn-primary .fa,
.answer-container .btn-primary .glyphicon {
    color: #ffffff !important;
}

/* =========================================================
   AUSGEWÄHLTE ANTWORT
   ========================================================= */

/* Selected / Active */
.answer-container .btn-primary.active,
.answer-container .btn-primary:active,
.answer-container .btn-primary[aria-pressed="true"] {
    background-color: var(--green) !important;
    color: #ffffff !important;

    border: 3px solid var(--blue) !important;
}

/* Text + Icon ausgewählt weiterhin weiß */
.answer-container .btn-primary.active *,
.answer-container .btn-primary:active *,
.answer-container .btn-primary[aria-pressed="true"] * {
    color: #ffffff !important;
}

/* =========================================================
   JA / NEIN BUTTONS
   ========================================================= */

.yesno-button {
    padding: 8px 14px !important;
    min-width: 105px !important;
    width: 50% !important;
    margin: 0 5px !important;
}

.button-list {
    display: flex !important;
    gap: 12px !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #aabd00 !important;
    border-color: #aabd00 !important;
    color: #ffffff !important;
}

/* =========================================================
   FREITEXT-ANTWORTEN
   ========================================================= */

textarea.form-control {
    width: 100% !important;
    min-height: 140px !important;
    resize: vertical !important;
}

/* Freitextfeld im Answer Container */
.answer-container textarea.form-control {
    width: 100% !important;
    min-height: 160px !important;
    resize: vertical !important;
}