/* ======================================================================
   DFK LimeSurvey Theme - custom.css
   Basis: Fruity / Bootswatch-Variante
   Zweck: Modernes DFK-Branding fuer LimeSurvey-Umfragen

   Hinweise:
   - Diese Datei ist bewusst als Override-CSS aufgebaut.
   - LimeSurvey/Fruity/Bootswatch setzen viele Styles sehr spezifisch,
     daher ist !important an einigen Stellen absichtlich gesetzt.
   - Farben und Abstaende bitte moeglichst ueber die Variablen pflegen.
   ====================================================================== */


/* ======================================================================
   1. Design Tokens
   ====================================================================== */

:root {
    --dfk-red: #9c242d;
    --dfk-red-dark: #7f1d25;

    --dfk-bg: #f5f7f9;
    --dfk-card-bg: #ffffff;
    --dfk-section-bg: #f7f7f8;

    --dfk-border: #e5e7eb;
    --dfk-border-strong: #d7dce2;

    --dfk-text: #111827;
    --dfk-text-soft: #374151;
    --dfk-muted: #6b7280;

    --dfk-hover: #f3f4f6;

    --dfk-radius-sm: 8px;
    --dfk-radius-md: 10px;
    --dfk-radius-lg: 16px;

    --dfk-shadow-card: 0 6px 18px rgba(0, 0, 0, .06);
    --dfk-shadow-header: 0 2px 8px rgba(0, 0, 0, .04);

    --dfk-content-width: 1040px;
}


/* ======================================================================
   2. Grundlayout / Typografie / Links
   ====================================================================== */

html body {
    background: var(--dfk-bg) !important;
    color: var(--dfk-text);
}

body .container,
body .container-fluid {
    max-width: var(--dfk-content-width);
}

/* Bootswatch-Farbklassen gezielt auf DFK bzw. neutral mappen */
body .text-primary {
    color: var(--dfk-red) !important;
}

body .survey-description,
body .survey-description.text-info {
    color: var(--dfk-muted) !important;
}

body .ls-privacy-head,
body .ls-privacy-head.text-primary {
    color: var(--dfk-red) !important;
}

/* Links */
body a {
    color: var(--dfk-red) !important;
    text-decoration: underline;
}

body a:hover,
body a:focus {
    color: var(--dfk-red-dark) !important;
}


/* ======================================================================
   3. Header / DFK-Logo

   Voraussetzung:
   Die Datei liegt im Theme unter:
   /upload/themes/survey/fruity_dfk/files/DFK_Logo_DFK_Verband-Subline_022019_4C.svg
   ====================================================================== */

body .navbar,
body header {
    min-height: 72px !important;
    padding: 12px 48px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--dfk-border) !important;
    box-shadow: var(--dfk-shadow-header) !important;
}

/* Vorhandenes LimeSurvey-Logo ausblenden */
body .navbar-brand img,
body .logo-container img,
body #survey-logo img {
    display: none !important;
}

/* Eventuell vorhandene Pseudo-Inhalte neutralisieren */
body .navbar-brand::after,
body .logo-container::after,
body #survey-logo::after {
    content: none !important;
}

/* DFK-Logo als SVG einbinden */
body .navbar-brand::before,
body .logo-container::before,
body #survey-logo::before {
    content: "";
    display: block;
    width: 260px;
    height: 64px;
    background-image: url("../files/DFK_Logo_DFK_Verband-Subline_022019_4C.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* Logo-Container sauber ausrichten */
body .navbar-brand,
body .logo-container,
body #survey-logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ======================================================================
   4. Fortschrittsbalken
   ====================================================================== */

body .progress {
    max-width: var(--dfk-content-width) !important;
    height: 12px !important;
    margin: 18px auto 28px auto !important;
    border-radius: 999px !important;
    background: #e5e7eb !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08) !important;
    overflow: hidden !important;
}

body .progress-bar {
    background-color: var(--dfk-red) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: 600 !important;
}


/* ======================================================================
   5. Hinweis- und Warnboxen
   ====================================================================== */

body .alert-warning {
    background: #fff7ed !important;
    border: 1px solid #fb923c !important;
    color: #ea580c !important;
    border-radius: 6px !important;
}


/* ======================================================================
   6. Startseite / Section Titles

   survey-welcome wird von LimeSurvey sowohl auf Startseiten als auch
   in Gruppen-/Hinweisbereichen verwendet. Die Darstellung ist daher
   bewusst neutral gehalten und nur mit dezenten DFK-Akzenten versehen.
   ====================================================================== */

body .survey-welcome,
body .group-description,
body .question-group-title,
body .panel-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dfk-text) !important;
    background: #ffffff !important;

    border-left: 2px solid var(--dfk-red);
    border-right: 2px solid var(--dfk-red);

    padding: 10px 14px !important;
    border-radius: var(--dfk-radius-sm);
    margin-bottom: 18px;
}

/* Einleitung auf der Startseite bewusst in DFK-Rot */
body .survey-welcome.text-primary {
    color: var(--dfk-red) !important;
}


/* ======================================================================
   7. Fragekarten
   ====================================================================== */

body .question-container,
body .ls-question,
body .survey-question {
    background: var(--dfk-card-bg) !important;
    border: 1px solid var(--dfk-border) !important;
    border-radius: var(--dfk-radius-lg) !important;
    box-shadow: var(--dfk-shadow-card) !important;
    margin-bottom: 26px !important;
    overflow: hidden;
}

/* Fragekopf-Container: nur Layout, keine Typografie.
   Wichtig: Hier KEIN font-weight setzen, damit lange Erklaertexte
   nicht automatisch fett werden. */
body .question-title-container,
body .ls-question-title {
    background: #ffffff !important;
    border-bottom: 1px solid var(--dfk-border) !important;
    padding: 20px 24px 14px !important;
}

/* Eigentliche Fragetitel: stark genug fuer klare Hierarchie */
body .question-title,
body .ls-label-question {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--dfk-text) !important;
}

/* Lange Erklaertexte im Fragekopf bewusst normal und lesbar */
body .question-title-container .question-text,
body .question-title-container .ls-question-text,
body .question-title-container p,
body .question-title-container li {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--dfk-text) !important;
}

/* Falls solche Texte intern mit strong/b formatiert sind */
body .question-title-container strong,
body .question-title-container b,
body .question-text strong,
body .question-text b,
body .ls-question-text strong,
body .ls-question-text b {
    font-weight: 400 !important;
}

/* Allgemeiner Fragetext */
body .question-text,
body .ls-question-text {
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--dfk-text) !important;
}

/* Pflichtstern */
body .asterisk,
body .mandatory {
    color: var(--dfk-red) !important;
    font-weight: 700 !important;
}

/* Hilfetext, z. B. "Bitte waehlen Sie ..." */
body .questionhelp,
body .ls-questionhelp,
body .help-block {
    color: var(--dfk-muted) !important;
    font-size: .9rem !important;
    padding: 0 24px 10px !important;
}

/* Antwortbereich */
body .answer-container,
body .answers-list,
body .ls-answers {
    padding: 18px 24px 24px !important;
    background: #ffffff !important;
}


/* ======================================================================
   8. Antwortoptionen / Radio-Buttons
   ====================================================================== */

/* Listen neutralisieren */
body ul.answers-list,
body .answers-list {
    list-style: none;
    padding-left: 0;
    max-width: 560px !important;
}

/* Antwortzeilen */
body li.answer-item,
body .answer-item,
body .radio-item,
body .checkbox-item {
    margin-bottom: 14px !important;
    padding-left: 8px;
}

/* Antwort-Labels als moderne Klickflaechen */
body li.answer-item label,
body .answer-item label,
body .radio-item label,
body .checkbox-item label,
body .answers-list label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    max-width: 520px !important;
    width: 100% !important;
    min-width: 0 !important;

    padding: 10px 14px !important;
    border-radius: var(--dfk-radius-md) !important;
    border: 1px solid transparent !important;

    color: var(--dfk-text-soft) !important;
    font-weight: 400 !important;
    cursor: pointer !important;

    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Hover-Zustand */
body li.answer-item label:hover,
body .answer-item label:hover,
body .radio-item label:hover,
body .checkbox-item label:hover,
body .answers-list label:hover {
    background: var(--dfk-hover) !important;
    border-color: var(--dfk-border) !important;
}

/* Ausgewaehlte Radio-Antwort.
   Variante bewusst satt DFK-Rot, damit die Auswahl klar erkennbar ist. */
body input[type="radio"]:checked + label {
    background: var(--dfk-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--dfk-red) !important;
    font-weight: 600 !important;
}

/* Fruity / sea_green setzt den Punkt per Pseudo-Element gruen.
   Hier wird er auf DFK-Rot geaendert. */
body .answer-item.radio-item label.radio-label::after,
body .answer-item label::after {
    background-color: var(--dfk-red) !important;
}

/* Pseudo-Kreis/Punkt vertikal zur Schrift ausrichten */
body .answer-item label::before,
body .answer-item label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* ======================================================================
   9. Buttons / Navigation

   Ziel:
   - Weiter: Rot mit weissem Text, Hover invertiert
   - Zurueck: Weiss mit rotem Rand/Text, Hover invertiert
   ====================================================================== */

/* Weiter / Primaerbutton */
body #movenextbtn,
body #ls-button-submit,
body .ls-move-next-btn,
body .action--ls-button-submit,
body .btn-primary,
body button.btn-primary,
body .submit {
    background-color: var(--dfk-red) !important;
    border: 1px solid var(--dfk-red) !important;
    color: #ffffff !important;
    border-radius: var(--dfk-radius-md) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body #movenextbtn:hover,
body #ls-button-submit:hover,
body .ls-move-next-btn:hover,
body .action--ls-button-submit:hover,
body .btn-primary:hover,
body button.btn-primary:hover,
body .submit:hover,
body #movenextbtn:focus,
body #ls-button-submit:focus,
body .ls-move-next-btn:focus,
body .action--ls-button-submit:focus,
body .btn-primary:focus,
body button.btn-primary:focus,
body .submit:focus {
    background-color: #ffffff !important;
    color: var(--dfk-red) !important;
    border-color: var(--dfk-red) !important;
}

/* Zurueck / Sekundaerbutton */
body #moveprevbtn,
body #ls-button-previous,
body .ls-move-previous-btn,
body .action--ls-button-previous,
body .btn-default,
body .btn-secondary,
body .btn-outline-secondary,
body .btn-success {
    background-color: #ffffff !important;
    border: 1px solid var(--dfk-red) !important;
    color: var(--dfk-red) !important;
    border-radius: var(--dfk-radius-md) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body #moveprevbtn:hover,
body #ls-button-previous:hover,
body .ls-move-previous-btn:hover,
body .action--ls-button-previous:hover,
body .btn-default:hover,
body .btn-secondary:hover,
body .btn-outline-secondary:hover,
body .btn-success:hover,
body #moveprevbtn:focus,
body #ls-button-previous:focus,
body .ls-move-previous-btn:focus,
body .action--ls-button-previous:focus,
body .btn-default:focus,
body .btn-secondary:focus,
body .btn-outline-secondary:focus,
body .btn-success:focus {
    background-color: var(--dfk-red) !important;
    color: #ffffff !important;
    border-color: var(--dfk-red) !important;
}


/* ======================================================================
   10. Responsive Anpassungen
   ====================================================================== */

@media (max-width: 768px) {
    body .navbar,
    body header {
        min-height: 72px !important;
        padding: 12px 20px !important;
    }

    body .navbar-brand::before,
    body .logo-container::before,
    body #survey-logo::before {
        width: 210px !important;
        height: 54px !important;
    }

    body .container,
    body .container-fluid {
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body .progress {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    body .survey-welcome,
    body .group-description,
    body .question-group-title,
    body .panel-heading {
        padding: 9px 12px !important;
        margin-bottom: 16px;
    }

    body .question-container,
    body .ls-question,
    body .survey-question {
        border-radius: 12px !important;
        margin-bottom: 18px !important;
    }

    body .question-title-container,
    body .ls-question-title {
        padding: 16px 18px 12px !important;
    }

    body .question-title,
    body .ls-label-question {
        font-size: 1.05rem !important;
    }

    body .answer-container,
    body .answers-list,
    body .ls-answers {
        padding: 16px 18px 20px !important;
    }

    body li.answer-item label,
    body .answer-item label,
    body .radio-item label,
    body .checkbox-item label {
        max-width: 100% !important;
        width: 100% !important;
    }

    body #movenextbtn,
    body #ls-button-submit,
    body .ls-move-next-btn,
    body #moveprevbtn,
    body #ls-button-previous,
    body .ls-move-previous-btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

.privacy {
    display: none !important;
}

.survey-description {
    text-align: left !important;
}