/*
    Protectra Survey-Theme — custom.css (v1.1.0)
    Rekonstruktion der Designvorlage von fragen.protectra.de (2026-07-08).
    Farbwerte: Brand Guide (#E4F2FC, #374B47, #A2E4B8) + aus Screenshots gesampelt
    (#14AE5C Link/Progress/Auswahl, #233531 Footer, #1F283B Titel).
    Schriften lt. Brand Guide: Geologica (Header), Nunito Sans (Fließtext) —
    als woff2 im Theme gebundelt (files/fonts/), kein externes CDN (DSGVO).
*/

/* ---------- Schriften (selbst gehostet, variable Fonts 400–700) ---------- */

@font-face {
    font-family: "Geologica";
    src: url("../files/fonts/geologica.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("../files/fonts/nunito-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("../files/fonts/nunito-sans-italic.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --protectra-blue: #E4F2FC;
    --protectra-dark: #374B47;
    --protectra-darker: #233531;
    --protectra-green: #14AE5C;
    --protectra-mint: #A2E4B8;
    --protectra-title: #1F283B;
    --protectra-font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    --protectra-font-header: "Geologica", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Grundfläche + Basistypografie ---------- */

body {
    background: #ffffff;
    font-family: var(--protectra-font-body) !important;
    font-size: 1.0625rem; /* 17px */
    line-height: 1.55;
    color: #212529;
}

h1, h2, h3, h4, h5, h6,
.group-title,
.group-name {
    font-family: var(--protectra-font-header);
    font-weight: 600;
    color: var(--protectra-title);
}

.question-text,
.ls-label-question,
.answer-container,
.help-block,
.ls-questionhelp {
    font-family: var(--protectra-font-body);
    font-size: 1.0625rem;
}

#beginScripts + .container-fluid,
.ls-fluid-body > .container-fluid,
main.container-fluid {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
}

/* ---------- Header (hellblaues Band mit Logo + Umfragetitel) ---------- */

.protectra-header {
    background: var(--protectra-blue);
    text-align: center;
    padding: 1.8rem 1.5rem 2rem;
}

.protectra-logo {
    max-width: 290px;
    height: auto;
    margin-bottom: 1.3rem;
}

.protectra-title {
    font-family: var(--protectra-font-header);
    font-weight: 600;
    font-size: 2.3rem;
    color: var(--protectra-title);
    margin: 0;
}

/* ---------- Fortschrittsbalken (dünne grüne Linie unter dem Header) ---------- */

.progress,
#ls-progress {
    height: 4px;
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 0.75rem 0;
}

.progress-bar {
    background: var(--protectra-green) !important;
    border-radius: 0;
}

/* ---------- Fragen-Container flach halten (keine Karten/Schatten) ---------- */

.group-outer-container,
.question-container,
.card,
.card-body {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

.group-outer-container,
.question-container {
    padding-left: 0;
    padding-right: 0;
}

.question-title-container .text-danger,
.asterisk {
    color: #d9534f;
}

/* ---------- Kompaktere Abstände ---------- */

/* Bootstrap-Utility-Abstände innerhalb der Umfrage eindampfen */
#limesurvey .mt-5, .ls-fluid-body .mt-5, main .mt-5 { margin-top: 1rem !important; }
#limesurvey .mt-4, .ls-fluid-body .mt-4, main .mt-4 { margin-top: 0.75rem !important; }
#limesurvey .mb-5, .ls-fluid-body .mb-5, main .mb-5 { margin-bottom: 1rem !important; }
#limesurvey .mb-4, .ls-fluid-body .mb-4, main .mb-4 { margin-bottom: 0.75rem !important; }
#limesurvey .py-5, .ls-fluid-body .py-5, main .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#limesurvey .py-4, .ls-fluid-body .py-4, main .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

.group-outer-container {
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
}

.group-title,
.group-name {
    margin: 0.5rem 0 0.75rem;
}

.group-description {
    margin-bottom: 0.75rem;
}

.question-container {
    margin-bottom: 1rem !important;
}

.question-title-container {
    margin-bottom: 0.3rem;
    padding-bottom: 0;
}

.answer-container {
    padding-top: 0.25rem !important;
    padding-bottom: 0 !important;
}

.ls-questionhelp {
    margin: 0.2rem 0 0.4rem;
}

.navigator-container,
#navigator-container {
    margin-top: 1.25rem !important;
}

/* ---------- Links ---------- */

a,
.group-container a,
.question-container a,
#hinweis_agb a,
#hinweis_agb_en a {
    color: var(--protectra-green);
    text-decoration: none;
}

a:hover {
    color: #0e8a49;
    text-decoration: underline;
}

/* ---------- Eingabefelder ---------- */

.form-control,
.form-select {
    border: 1px solid #495057;
    border-radius: 3px;
    font-family: var(--protectra-font-body);
    font-size: 1.0625rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--protectra-dark);
    box-shadow: 0 0 0 0.15rem rgba(55, 75, 71, 0.25);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: 3px;
    font-family: var(--protectra-font-body);
    font-size: 1.0625rem;
}

.btn-primary,
#ls-button-submit,
.ls-move-next-btn,
.ls-move-submit-btn {
    background: var(--protectra-dark) !important;
    border-color: var(--protectra-dark) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
#ls-button-submit:hover,
.ls-move-next-btn:hover,
.ls-move-submit-btn:hover {
    background: var(--protectra-darker) !important;
    border-color: var(--protectra-darker) !important;
}

#ls-button-previous,
.ls-move-previous-btn {
    background: #ffffff !important;
    border: 1px solid #495057 !important;
    color: #212529 !important;
}

#ls-button-previous:hover,
.ls-move-previous-btn:hover {
    background: #f2f2f2 !important;
}

/* ---------- Button-Antworten (Ja/Nein-Kacheln): Auswahl in Grün ---------- */

.btn-check:checked + .btn,
.btn-check:checked + label.btn,
.answer-item .btn.active,
.button-item .btn.active {
    background: var(--protectra-green) !important;
    border-color: var(--protectra-green) !important;
    color: #ffffff !important;
}

.btn-check + .btn,
.answer-item .btn,
.button-item .btn {
    background: #ffffff;
    border: 1px solid #495057;
    color: #212529;
}

/* Dropdown-Highlight in Grün (soweit vom Browser stylbar) */
option:checked,
option:hover {
    background-color: var(--protectra-green);
    color: #ffffff;
}

/* ---------- Rechtstext-Absätze über dem Footer ---------- */

#hinweis_agb,
#hinweis_agb_en,
#hinweis_zahlungspflichtig {
    margin: 1rem 1rem 0.5rem;
    font-size: 0.95rem;
}

/* Sternchenhinweis: wird nur per JS eingeblendet, wenn auf der Seite ein
   Button „zahlungspflichtig bestellen" existiert (scripts/custom.js) */
#hinweis_zahlungspflichtig {
    display: none;
}

/* ---------- Footer (dunkelgrüne Leiste) ---------- */

#protectra-footer {
    background: var(--protectra-darker);
    text-align: center;
    padding: 0.9rem 1rem;
    margin-top: 1.5rem;
}

#protectra-footer a {
    color: #ffffff;
    font-family: var(--protectra-font-body);
    font-size: 1rem;
    margin: 0 1.6rem;
    text-decoration: none;
}

#protectra-footer a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* LimeSurvey-Standard-Footer-Reste ausblenden */
footer .footer-content,
#surveyListFooter {
    background: transparent;
    border: none;
}