/* ================================================================
   VSA Survey Theme – Custom Branding
   Verband Schweizer Abwasser- und Gewaesserschutzfachleute
   Markenreferenz: https://vsa.ch

   Diese Datei wird vom Fruity-Theme zuletzt geladen und hat damit
   Vorrang vor theme.css und der Farbvariation (css/variations/vsa.css).

   VSA-Markenfarben (aus vsa.ch ermittelt):
     #295c84  Primaerblau  (Links, Ueberschriften, Buttons)
     #003e73  Dunkelblau   (Hover, Akzent, Logo-Text)
     #0061ac  Leuchtblau   (Logo, Link-Hover)
     #7bd5fd  Hellblau     (Akzentflaechen)
     #5bc6fd  Hellblau 2
     #8dcbd8  Sanftes Teal
     #c6deea  Sehr helles Blau (Linien/Flaechen)
     #f0f6fa  Hintergrundblau (Seitenflaeche)
     #fdc732  Akzentgelb   (sparsam)

   Schrift: vsa.ch nutzt die Lizenzfonts "axia" (Text) und "obvia"
   (Titel). Diese sind nicht frei einbettbar. Das Theme verwendet
   daher die mitgelieferte, lizenzfreie "Noto Sans" – eine neutrale
   humanistische Grotesk im gleichen Charakter. Die airy/leichte
   Anmutung von vsa.ch wird ueber Schriftschnitt 300 nachgebildet.
   ================================================================ */

:root {
    --vsa-primary:      #295c84;
    --vsa-dark:         #003e73;
    --vsa-bright:       #0061ac;
    --vsa-light:        #7bd5fd;
    --vsa-light-2:      #5bc6fd;
    --vsa-teal:         #8dcbd8;
    --vsa-pale:         #c6deea;
    --vsa-bg:           #f0f6fa;
    --vsa-accent:       #fdc732;
    --vsa-text:         #33373b;
    --vsa-border:       #dce7ef;
}

/* ----------------------------------------------------------------
   1. Typografie
   ---------------------------------------------------------------- */
.fruity,
.fruity body,
.fruity .question-container,
.fruity .form-control,
.fruity input,
.fruity textarea,
.fruity select,
.fruity button {
    font-family: "Noto Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.fruity body {
    font-weight: 300;
    color: var(--vsa-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

.fruity h1, .fruity h2, .fruity h3,
.fruity h4, .fruity h5, .fruity h6,
.fruity .h1, .fruity .h2, .fruity .h3 {
    font-weight: 600;
    color: var(--vsa-primary);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.fruity strong, .fruity b { font-weight: 600; }

/* ----------------------------------------------------------------
   2. Seitenflaeche & Survey-Container
   ---------------------------------------------------------------- */
.fruity body {
    background-color: var(--vsa-bg) !important;
}

/* Der aeussere Inhaltsrahmen (#outerframeContainer) ist die weisse
   Inhaltskarte. Kraeftiges Padding links/rechts mit 10vw – proportional
   zur Seitenbreite. Oben/unten per clamp() begrenzt. */
#outerframeContainer,
.fruity .outerframe {
    background-color: #ffffff;
    border: 1px solid var(--vsa-border);
    border-top: 4px solid var(--vsa-primary);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 62, 115, 0.07);
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    padding-top: clamp(1.75rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(1.75rem, 4vw, 3.5rem) !important;
}

/* ----------------------------------------------------------------
   3. Kopfbereich / Logo
   ---------------------------------------------------------------- */
.fruity .navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--vsa-border);
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Logo zentriert und in moderater Hoehe */
.fruity .navbar .logo-container,
.fruity .navbar-brand,
.fruity .logo-container {
    text-align: center;
}

.fruity .navbar img,
.fruity .logo-container img,
.fruity img.logo {
    max-height: 64px;
    width: auto;
}

/* ----------------------------------------------------------------
   4. Survey-Titel & Gruppentitel
   ---------------------------------------------------------------- */
.fruity #survey-name,
.fruity .survey-name,
.fruity #survey_title,
.fruity .survey-title {
    color: var(--vsa-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fruity .survey-list h3,
.fruity .group-title,
.fruity .group-name {
    color: var(--vsa-primary);
    font-weight: 600;
}

/* Survey-Titel UND Gruppentitel linksbuendig.
   Fruity setzt an beiden Elementen die Bootstrap-Klasse .text-center
   (text-align:center !important). Die folgenden Selektoren ueberschreiben
   sie mit hoeherer Spezifitaet (ID-Kontext bzw. zwei Klassen) + !important
   und sind bewusst NICHT vom .fruity-Body-Kontext abhaengig. */
#outerframeContainer .survey-name,
#outerframeContainer .group-title,
#outerframeContainer .group-name,
.survey-name.text-center,
.group-title.text-center,
.group-name.text-center {
    text-align: left !important;
}

/* Beschreibungstexte etwas zurueckgenommen */
.fruity .survey-description,
.fruity .group-description {
    color: #5b6168;
    font-weight: 300;
}

/* ----------------------------------------------------------------
   5. Fragen-Container
   ---------------------------------------------------------------- */
.fruity .question-container {
    background-color: #ffffff;
    border: 1px solid var(--vsa-border) !important;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 62, 115, 0.05) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fruity .question-container:hover {
    border-color: var(--vsa-pale) !important;
    box-shadow: 0 4px 16px rgba(0, 62, 115, 0.09) !important;
}

/* Fragetext */
.fruity .question-title-container,
.fruity .ls-question-text,
.fruity .question-text {
    color: var(--vsa-dark);
    font-weight: 600;
}

/* Pflichtfeld-Stern in VSA-Blau statt Rot */
.fruity .question-container .asterisk,
.fruity .ls-question-mandatory {
    color: var(--vsa-bright);
}

/* Hilfetext dezent */
.fruity .question-help-container,
.fruity .ls-questionhelp,
.fruity .questionhelp {
    color: #6a7077;
    font-weight: 300;
    font-style: normal;
}

/* ----------------------------------------------------------------
   6. Formularfelder
   ---------------------------------------------------------------- */
.fruity .form-control,
.fruity input[type="text"],
.fruity input[type="email"],
.fruity input[type="number"],
.fruity input[type="password"],
.fruity textarea,
.fruity select {
    border: 1px solid #cdd9e2;
    border-radius: 6px;
    color: var(--vsa-text);
    box-shadow: none;
}

.fruity .form-control:focus,
.fruity input:focus,
.fruity textarea:focus,
.fruity select:focus {
    border-color: var(--vsa-primary);
    box-shadow: 0 0 0 3px rgba(41, 92, 132, 0.15);
    outline: none;
}

/* ----------------------------------------------------------------
   7. Buttons & Navigation
   ---------------------------------------------------------------- */
.fruity .btn {
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.7em 1.6em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primaeraktion (Weiter / Absenden) – kraeftiges VSA-Blau */
.fruity .btn-primary,
.fruity .btn-success,
.fruity #ls-button-submit,
.fruity .action--ls-button-submit {
    background-color: var(--vsa-primary) !important;
    border: 1px solid var(--vsa-primary) !important;
    color: #ffffff !important;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active,
.fruity .btn-success:hover,
.fruity .btn-success:focus,
.fruity #ls-button-submit:hover,
.fruity #ls-button-submit:focus {
    background-color: var(--vsa-dark) !important;
    border-color: var(--vsa-dark) !important;
    color: #ffffff !important;
}

/* Sekundaeraktion (Zurueck) – Outline in VSA-Blau */
.fruity .btn-outline-secondary,
.fruity #ls-button-previous {
    background-color: #ffffff !important;
    border: 1px solid var(--vsa-primary) !important;
    color: var(--vsa-primary) !important;
}

.fruity .btn-outline-secondary:hover,
.fruity .btn-outline-secondary:focus,
.fruity #ls-button-previous:hover,
.fruity #ls-button-previous:focus {
    background-color: var(--vsa-bg) !important;
    border-color: var(--vsa-dark) !important;
    color: var(--vsa-dark) !important;
}

.fruity .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 92, 132, 0.35);
}

/* ----------------------------------------------------------------
   8. Fortschrittsbalken
   ---------------------------------------------------------------- */
.fruity .progress {
    background-color: var(--vsa-pale);
    border-radius: 20px;
    height: 10px;
    box-shadow: none;
}

.fruity .progress-bar {
    background-color: var(--vsa-primary) !important;
    background-image: none;
    border-radius: 20px;
    box-shadow: none;
}

/* ----------------------------------------------------------------
   9. Antwortoptionen – Radio / Checkbox / Arrays
   ---------------------------------------------------------------- */
.fruity .answer-item label:before,
.fruity .radio-item label:before,
.fruity .checkbox-item label:before {
    border-color: #b9c8d4;
}

/* Ausgewaehlter Zustand in VSA-Blau */
.fruity .answer-item input:checked + label:after,
.fruity .checkbox-item input[type="checkbox"]:checked + label:after,
.fruity .radio-item input[type="radio"]:checked + label:after {
    background-color: var(--vsa-primary) !important;
}

.fruity .checkbox-item input[type="checkbox"]:checked + label:before,
.fruity .radio-item input[type="radio"]:checked + label:before {
    border-color: var(--vsa-primary) !important;
}

/* Hover auf Antwortzeilen */
.fruity .answers-list .answer-item:hover,
.fruity .subquestions-list .answer-item:hover {
    background-color: var(--vsa-bg);
}

/* Array-Frage: Kopf- und Wechselzeilen */
.fruity .ls-answers thead th,
.fruity .table > thead > tr > th {
    color: var(--vsa-dark);
    border-bottom-color: var(--vsa-pale);
}

.fruity .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--vsa-bg);
}

/* ----------------------------------------------------------------
   10. Links
   ---------------------------------------------------------------- */
.fruity a {
    color: var(--vsa-primary);
}

.fruity a:hover,
.fruity a:focus {
    color: var(--vsa-bright);
}

/* ----------------------------------------------------------------
   11. Willkommens- & Abschlussseite
   ---------------------------------------------------------------- */
.fruity .welcome-container .question-title-container,
.fruity .completed-text,
.fruity #processed-message {
    color: var(--vsa-dark);
}

.fruity .completed-text-container,
.fruity #processed-text {
    border-top: 3px solid var(--vsa-primary);
}

/* ----------------------------------------------------------------
   12. Diverses – Hinweise, Trennlinien, Auswahl
   ---------------------------------------------------------------- */
.fruity hr {
    border-top-color: var(--vsa-pale);
}

.fruity .alert-info {
    background-color: var(--vsa-bg) !important;
    border-color: var(--vsa-pale) !important;
    color: var(--vsa-dark) !important;
}

/* Markierter Text in dezentem VSA-Hellblau statt Pink */
.fruity mark {
    background: var(--vsa-light);
    color: var(--vsa-dark);
}

::selection {
    background: var(--vsa-light);
    color: var(--vsa-dark);
}

/* Fusszeile dezent */
.fruity .footer,
.fruity #footer {
    background-color: transparent;
    border-top: 1px solid var(--vsa-border);
    color: #6a7077;
}