/* =========================================================
   anaesthesieumfrage.de - bda-dgai Theme (LimeSurvey 6.x) - Farben wie dgai
   Kind-Theme von "fruity". Look angelehnt an die 2.73-Vorlage.

   FARB-PALETTE zentral in :root (var()). Fuer ein Schwester-Theme
   (bda, bda-dgai, reareg-dgai) genuegt es, NUR diesen :root-Block
   (+ Logo) anzupassen - die Regeln darunter bleiben unveraendert.
   ========================================================= */
:root {
    --brand-dark:     #154C6E;   /* Titelbalken, Marke, Rahmen, ausgewaehlt (Radio/Checkbox) */
    --brand-dark-rgb: 21, 76, 110; /* dieselbe Farbe fuer rgba()-Fokus-Halos */
    --brand-accent:   #5BA5BB;   /* Links, Fortschrittsbalken, aktive Buttons */
    --brand-hover:    #154C6E;   /* Hover-/Selected-Zustand von Buttons & Links */
    --brand-bg:       #E0E8E5;   /* Inhaltsbereich-Hintergrund */
    --brand-text:     #4A3C51;   /* Fragentext / Antwortbereich */
    --brand-label:    #003251;   /* Antwort-Beschriftungen (Labels) */
    --brand-hint:     #F5BA85;   /* Hinweis-/Hilfetext im Titelbalken */
    --brand-muted:    #798D8F;   /* inaktiver Button */
    --c-white:        #ffffff;
}

/* --- Lato (lokal eingebunden, DSGVO-konform) --- */
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
         url('../fonts/lato-v11-latin-regular.woff')  format('woff');
}
@font-face {
    font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('../fonts/lato-v11-latin-italic.woff2') format('woff2'),
         url('../fonts/lato-v11-latin-italic.woff')  format('woff');
}
@font-face {
    font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/lato-v11-latin-700.woff2') format('woff2'),
         url('../fonts/lato-v11-latin-700.woff')  format('woff');
}
body { font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; }

/* =========================================================
   Kopfbereich: Umfrage-Titel + Aktionslinks LINKS, Logo RECHTS
   ========================================================= */
#survey-nav .container-fluid { gap: 1rem; }
#survey-nav .survey-head-left {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
#survey-nav .navbar-brand.survey-title {
    margin: 0; padding: 0; color: var(--brand-dark); font-weight: 700; line-height: 1.2;
    font-size: 24px; white-space: normal;
}
#survey-nav .survey-nav-links {
    list-style: none; margin: .3rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 1.25rem;
}
#survey-nav .survey-nav-links .nav-item { padding: 0; }
#survey-nav .survey-nav-links .nav-link {
    color: var(--brand-accent); padding: 0; font-size: 1.05rem; font-weight: 700;
}
#survey-nav .survey-nav-links .nav-link:hover,
#survey-nav .survey-nav-links .nav-link:focus { color: var(--brand-hover); text-decoration: underline; }
#survey-nav .navbar-logo img.logo { width: 307px; height: auto; max-width: 100%; }

/* Kopfzeile fliesst normal mit (nicht fixed) -> nur kleiner Abstand zum Inhalt */
body .top-container { margin-top: 20px !important; }
@media (max-width: 575px) {
    #survey-nav .navbar-logo img.logo { width: 100%; }
}

/* =========================================================
   Fortschrittsbalken
   ========================================================= */
.top-container .progress .progress-bar,
.progress .progress-bar { background-color: var(--brand-accent) !important; color: var(--c-white); }
/* flacher grauer Hintergrund - den inset-Schatten (Verlauf-Optik) von fruity entfernen */
.top-container .progress { box-shadow: none !important; }

/* =========================================================
   Fragenbereich
   ========================================================= */
/* Inhaltsbereich grau; randlos, damit die Navbar buendig & full-width bleibt */
#dynamicReloadContainer {
    background-color: var(--brand-bg) !important;
    padding: 0;
}
/* Kopfzeile: flache, weisse, randlose Leiste ganz oben (wie 2.73) - kein schwebendes Kaestchen.
   Das body-padding-top setzt LS6 theme.js (fuer fixierte Navbar) - hier neutralisiert. */
body { padding-top: 0 !important; }
#survey-nav {
    background-color: var(--c-white) !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* === Startseite (Begruessung) ===
   Titel (.survey-name) + Einleitungstext (.survey-description) linksbuendig
   statt zentriert. Hohe Spezifitaet (body.fruity), um sea_green
   .fruity .text-info (#328637 !important) und .text-center zu schlagen. */
body.fruity .survey-name,
body.fruity .survey-description,
body.fruity .survey-description p {
    color: var(--brand-dark) !important;
}
body.fruity .survey-name,
body.fruity .survey-description {
    text-align: left !important;
}
body.fruity .survey-name { font-size: 2.5rem !important; }

/* Fortschrittsbalken NUR auf der Startseite ausblenden (erkennbar an .survey-description) */
body:has(.survey-description) .top-container { display: none !important; }

/* === Kompaktere vertikale Abstaende (LS6: .space-col = 1em/2em, .top-content extra 1em+2em) === */
.space-col { margin-top: .5em !important; margin-bottom: .5em !important; }
.top-container.space-col { margin-top: .25em !important; margin-bottom: .25em !important; }
.top-container .top-content {
    padding-top: .25em !important; padding-bottom: .25em !important; margin-bottom: .5em !important;
}
.group-title.space-col { margin-top: .25em !important; margin-bottom: .5em !important; }

/* Gruppentitel-Text */
body.fruity .group-title { color: var(--brand-dark) !important; }
.question-container {
    --bs-gutter-x: 0;
    margin: 0 0 1.5rem;
    background-color: transparent;
    border-radius: 4px;
    overflow: hidden;
}
.question-container:last-child { margin-bottom: 0; }

/* Titelbalken der Frage: Hintergrund dunkelblau, Schrift weiss */
.question-container .question-title-container {
    background-color: var(--brand-dark) !important;
    color: var(--c-white) !important;
    padding: .75em 1em; margin: 0;
}
.question-container .question-title-container,
.question-container .question-title-container .question-text,
.question-container .question-title-container .ls-label-question,
.question-container .question-title-container .ls-question-text,
.question-container .question-title-container .question-number,
.question-container .question-title-container .question-code {
    color: var(--c-white) !important;
}
/* Fragetext fett */
.question-container .question-title-container .ls-label-question { font-weight: 700 !important; }

/* Hinweis/Hilfe (.question-valid-container) per custom.js in den Balken geholt:
   Symbol (.ls-questionhelp) + Text zusammen zentriert, orange, 14px. */
.question-container .question-title-container .question-valid-container {
    display: block; width: 100%; text-align: center;
    margin: .4em 0 0; padding: 0; font-size: 14px; line-height: 1.4;
}
.question-container .question-title-container .ls-questionhelp {
    display: inline-block; width: auto; float: none; margin: 0; padding: 0;
}
.question-container .question-title-container .ls-questionhelp::before {
    float: none !important; position: static !important; display: inline !important;
    margin: 0 .35em 0 0;
}
.question-container .question-title-container .ls-em-tip,
.question-container .question-title-container .ls-question-message {
    display: inline; margin: 0; padding: 0;
}
.question-container .question-title-container .question-valid-container,
.question-container .question-title-container .ls-questionhelp,
.question-container .question-title-container .ls-em-tip,
.question-container .question-title-container .ls-question-message,
.question-container .question-title-container .em_question_help,
.question-container .question-title-container .text-info {
    color: var(--brand-hint) !important;
    background: none !important;
    border: none !important;
}

/* Fragentext / Antwortbereich */
.question-container .answer-container,
.question-container .ls-answers,
.question-container .question-help-container,
.question-container .answer-container label,
.question-container .ls-answers label,
.question-container .ls-answers .answertext,
.question-container .answer-item label {
    color: var(--brand-text);
}
/* Antwortbereich: weisser Block, vom grauen Rahmen umgeben */
.question-container .answer-container {
    background-color: var(--c-white);
    margin: 1em;
    padding: 1em;
    border-radius: 4px;
}

/* "Sonstiges"-/Kommentar-Textfeld (.other-text-item) nicht bis an die Blockkante;
   gezielt am Wrapper, damit kleine Zahlenfelder (.numeric-item) unberuehrt bleiben. */
.question-container .answer-container .other-text-item .form-control {
    width: calc(100% - 2em) !important;
    max-width: calc(100% - 2em) !important;
}

/* Beschriftungen der Antwortoptionen */
.question-container .answer-container label,
.question-container .ls-answers label { color: var(--brand-label) !important; }

/* === Auswahl-Indikatoren: sea_green-Gruen (#328637) -> Marke ===
   LS6 versteckt den nativen Input und zeichnet Radio-Punkt / Checkbox-Haken
   ueber label::after (gefuellt) bzw. label::before (Rahmen/Fokus).
   Daher greift accent-color NICHT; die exakten sea_green-Regeln werden
   hier passgenau ueberschrieben. */
body .answer-item label::after,
body .checkbox-item input[type="checkbox"]:checked + label::after,
body .checkbox-item input[type="radio"]:checked + label::after {
    background-color: var(--brand-dark) !important;
    color: var(--c-white) !important;
}
/* Fokus-Halo der Auswahlelemente (label::before) in Markenfarbe */
body .checkbox-item input[type="checkbox"]:focus-visible + label::before,
body .radio-item input[type="radio"]:focus-visible + label::before {
    border-color: var(--brand-dark) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-dark-rgb), .5) !important;
}

/* Fokus-Halo der Eingabefelder (Text, Select, Checkbox/Radio) in Markenfarbe statt Gruen */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.question-container .form-control:focus,
.question-container .form-select:focus,
.question-container .form-check-input:focus {
    border-color: var(--brand-dark) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--brand-dark-rgb), .25) !important;
    outline-color: var(--brand-dark) !important;
}

/* === Yes/No-Button-Frage (.yesno-button / btn-check) ===
   Rand dunkelblau, Hintergrund Akzent, Schrift weiss; ausgewaehlt/hover dunkelblau. */
.question-container .yesno-button .ls-button-label,
.question-container .yesno-button label.btn {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-dark) !important;
    color: var(--c-white) !important;
}
.question-container .yesno-button .ls-button-label:hover,
.question-container .yesno-button .ls-button-label:focus,
.question-container .yesno-button .btn-check:checked + .ls-button-label,
.question-container .yesno-button .btn-check:checked + label.btn,
.question-container .yesno-button .btn-check:active + label.btn {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: var(--c-white) !important;
}
.question-container .yesno-button .ls-button-label .ls-icon { color: var(--c-white) !important; }

/* =========================================================
   Navigator-Buttons (Weiter / Zurueck)
   aktiv Akzent, hover dunkelblau, inaktiv gedeckt, Text weiss
   ========================================================= */
#navigator-container .btn,
#navigator-container .btn-primary,
#navigator-container .btn-outline-secondary {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--c-white) !important;
}
#navigator-container .btn:hover,   #navigator-container .btn:focus,
#navigator-container .btn-primary:hover, #navigator-container .btn-primary:focus,
#navigator-container .btn-outline-secondary:hover,
#navigator-container .btn-outline-secondary:focus {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: var(--c-white) !important;
}
#navigator-container .btn:disabled,
#navigator-container .btn.disabled,
#navigator-container .btn[disabled] {
    background-color: var(--brand-muted) !important;
    border-color: var(--brand-muted) !important;
    color: var(--c-white) !important;
    opacity: 1;
}

/* === Abschlussseite (.completed-text): Text in Markenfarbe === */
.completed-wrapper,
.completed-text,
.completed-text p {
    color: var(--brand-dark) !important;
}

/* === Alert-Boxen (z.B. Vorschau-Warnung): weisser Hintergrund + 2px Rand === */
#main-col .alert,
.completed-text .alert {
    background-color: var(--c-white) !important;
    border-width: 2px !important;
    border-style: solid !important;
}

/* =========================================================
   bda-dgai: Header mit ZWEI Logos (Abweichung von dgai/bda)
   BDA-Logo links (darunter Umfrage-Titel + Aktionslinks), DGAI-Logo rechts.
   Die Navbar waechst durch die gestapelte linke Spalte automatisch in der Hoehe.
   ========================================================= */
/* Titel vertikal zwischen BDA-Logo und Aktionslinks zentrieren (gleiche Abstaende + etwas Luft) */
#survey-nav .survey-head-left .navbar-logo-bda { margin: 0; }
#survey-nav .survey-head-left .navbar-brand.survey-title { margin: 1.6rem 0 -0.6rem 0 !important; }
#survey-nav .survey-head-left .survey-nav-links { margin-top: 0 !important; }
#survey-nav .navbar-logo-dgai { align-self: flex-start; }
@media (max-width: 575px) {
    /* auf kleinen Schirmen Logos nicht 100% breit stapeln lassen */
    #survey-nav .navbar-logo img.logo { width: 220px; }
}

/* =========================================================
   Rechtlicher Footer (#legalstuff)
   ========================================================= */
footer#legalstuff {
    width: 100%; padding: 16px; margin-top: 2rem;
    background-color: var(--c-white); text-align: center;
}
footer#legalstuff a { color: var(--brand-dark); font-weight: bold; text-decoration: none; }
footer#legalstuff a:hover { text-decoration: underline; }

/* =========================================================
   Oeffentliche Umfrageliste / Landingpage (views/layout_survey_list.twig)
   Kopf nutzt die #survey-nav-Basisregeln (weiss, buendig, Logos 307px);
   Site-Name mittig zwischen den beiden Logos.
   ========================================================= */
#survey-nav.survey-list-nav .navbar-brand.survey-title {
    text-align: center; margin: 0 1rem; flex: 1 1 auto;
}
.survey-list-branded { padding: 1.5rem 0 2rem; }
.survey-list-branded .survey-list-heading {
    color: var(--brand-dark); text-align: center; margin: 0 0 1.3rem;
}
.survey-list-branded .survey-list { margin: 0; }
.survey-list-branded .survey-list-item { margin: 0 0 .6rem; }

/* Umfrage-Buttons in Markenfarbe statt sea_green-Gruen */
.survey-list-branded .survey-list-item .btn-primary {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: var(--c-white) !important;
}
.survey-list-branded .survey-list-item .btn-primary:hover,
.survey-list-branded .survey-list-item .btn-primary:focus {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: var(--c-white) !important;
}
.survey-list-branded .survey-list-contact {
    color: var(--brand-text); text-align: center; margin-top: 1.3rem;
}