/* ============================================================
   Gut Wohnen Stäfa — LimeSurvey Sub-Theme (fruity-Basis)
   Ziel: Design-Tokens der Hauptwebsite auf Bootstrap-3- und
         LimeSurvey-6-Klassen mappen. Keine Twig-Overrides.
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ============================================================
   Design-Tokens — exakt aus der Hauptwebsite übernommen.
   Durch CSS-Custom-Properties bleibt das Theme wartbar:
   Änderung hier wirkt sich sofort auf alle Regeln unten aus.
   ============================================================ */
:root {
  /* --- Farben --- */
  --gws-ink:         #28393F;   /* Dunkel, primäre Textfarbe */
  --gws-ink-soft:    #3C535B;
  --gws-ink-faint:   #5C737A;

  --gws-sage:        #8E9B73;   /* Salbeigrün */
  --gws-sage-deep:   #6F875E;   /* Primäre Akzentfarbe (Buttons) */
  --gws-sage-dark:   #5A7050;   /* Hover */
  --gws-sage-light:  #A8B28C;

  --gws-lake:        #6D9FAA;   /* Seegrün/Blau */
  --gws-lake-deep:   #517E89;

  --gws-cream:       #F4F0E0;   /* Seitenhintergrund */
  --gws-cream-deep:  #ECE6CF;
  --gws-paper:       #FBFAF1;   /* Karten / Felder */
  --gws-sage-wash:   #E4E7D3;
  --gws-lake-wash:   #DCE7E6;
  --gws-cream-card:  #F7F3E4;

  --gws-line:        #DBD6BF;
  --gws-line-soft:   #E7E3D2;

  /* Fehlerstatus (behalten konventionelles Rot, nur abgetönt) */
  --gws-error:       #c0392b;
  --gws-error-bg:    #fdf0ee;
  --gws-error-border:#e8b4ae;

  /* --- Schriften --- */
  --gws-serif: "Spectral", Georgia, "Times New Roman", serif;
  --gws-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Formen --- */
  --gws-radius:      14px;   /* etwas kleiner als auf der Website, für Formkontext */
  --gws-radius-lg:   22px;
  --gws-radius-pill: 100px;

  /* --- Schatten --- */
  --gws-shadow:      0 14px 40px -24px rgba(40,57,63,.28);
  --gws-shadow-soft: 0 6px 20px -12px rgba(40,57,63,.20);

  /* --- Abstände --- */
  --gws-gap: 1.4rem;
}

/* ============================================================
   1. BASIS — Body, Schriften, Hintergrund
   ============================================================ */
body,
#wrapper {
  font-family: var(--gws-sans) !important;
  font-size:   17px;
  line-height: 1.65;
  color:       var(--gws-ink);
  background:  var(--gws-cream) !important;
  -webkit-font-smoothing: antialiased;
}

/* Fruity-eigene Hintergrundvariable überschreiben */
.skin-fruity,
.survey-body {
  background-color: var(--gws-cream) !important;
}

h1, h2, h3, h4, h5 {
  font-family: var(--gws-serif);
  font-weight: 500;
  color: var(--gws-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a { color: var(--gws-lake-deep); }
a:hover, a:focus { color: var(--gws-ink); }

/* ============================================================
   2. WILLKOMMENSSEITE — Jumbotron / Welcome-Container
   ============================================================ */
.jumbotron,
.ls-welcome-container,
.welcome-page,
.ls-start-content {
  background-color: var(--gws-paper);
  border:           1px solid var(--gws-line-soft);
  border-radius:    var(--gws-radius-lg);
  box-shadow:       var(--gws-shadow-soft);
  padding:          2.8rem 2.4rem;
  margin-bottom:    1.6rem;
}

/* Umfragetitel */
.survey-name,
.ls-survey-name,
.survey-title,
.jumbotron h1,
.jumbotron .survey-name {
  font-family: var(--gws-serif);
  font-size:   clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  color:       var(--gws-ink);
  margin-bottom: .6rem;
}

/* Umfragebeschreibung */
.jumbotron p,
.survey-welcome-description,
.ls-survey-description {
  font-size:   1.08rem;
  color:       var(--gws-ink-soft);
  line-height: 1.7;
}

/* Gruppen-Titel (Seiten-Überschrift innerhalb der Umfrage) */
.ls-page-title,
.ls-question-group-name,
.question-group-name {
  font-family: var(--gws-serif);
  font-size:   1.55rem;
  font-weight: 500;
  color:       var(--gws-ink);
  margin-bottom: .5rem;
}

.ls-page-description,
.question-group-description {
  color: var(--gws-ink-soft);
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

/* ============================================================
   3. FORTSCHRITTSBALKEN
   ============================================================ */
.progress,
.ls-progress-container .progress {
  background-color: var(--gws-cream-deep);
  border-radius:    var(--gws-radius-pill);
  height:           8px;
  box-shadow:       none;
  overflow:         hidden;
  margin-bottom:    1.6rem;
}

.progress-bar,
.progress-bar-info,
.ls-progress-container .progress-bar {
  background-color: var(--gws-sage-deep) !important;
  border-radius:    var(--gws-radius-pill);
  box-shadow:       none;
  /* Keine Stripe-Animation */
  background-image: none !important;
  transition:       width .5s ease;
}

/* Fortschrittstext */
.progress-info,
.ls-progress-info,
.ls-progress-label {
  font-size:    .82rem;
  font-weight:  600;
  color:        var(--gws-ink-faint);
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

/* ============================================================
   4. FRAGEN-CONTAINER (card-Modus)
   ============================================================ */
.question-container,
.question-container.card,
.ls-question-container {
  background:    var(--gws-paper);
  border:        1px solid var(--gws-line-soft);
  border-radius: var(--gws-radius-lg);
  box-shadow:    var(--gws-shadow-soft);
  padding:       1.8rem 2rem;
  margin-bottom: var(--gws-gap);
  /* fruity-Schatten überschreiben */
  box-shadow:    var(--gws-shadow-soft) !important;
}

/* Linker Akzentbalken aus fruity card-Modus entfernen */
.question-container.card::before,
.question-container::before {
  display: none !important;
}

/* Fragen-Text */
.ls-question-text,
.question-text,
.question-container .question-text,
.question-container label.ls-label-main {
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--gws-ink);
  line-height: 1.45;
  margin-bottom: .8rem;
}

/* Hilfstext / Sub-Frage */
.ls-question-help,
.question-container .help-block:not(.error-block) {
  font-size:  .92rem;
  color:      var(--gws-ink-faint);
  font-style: italic;
}

/* ============================================================
   5. FORMULARELEMENTE — Inputs, Select, Textarea
   ============================================================ */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  font-family:   var(--gws-sans);
  font-size:     1rem;
  color:         var(--gws-ink);
  background:    var(--gws-paper);
  border:        1.5px solid var(--gws-line);
  border-radius: var(--gws-radius);
  padding:       .75rem 1rem;
  box-shadow:    none !important;
  transition:    border-color .15s, box-shadow .15s;
  height:        auto;
}

.form-control:focus {
  border-color: var(--gws-sage) !important;
  box-shadow:   0 0 0 3px rgba(142,155,115,.22) !important;
  outline:      none;
  background:   var(--gws-paper);
}

.form-control:hover:not(:focus) {
  border-color: var(--gws-sage-light);
}

/* Select: nativer Pfeil auf allen Browsern */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C737A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1rem center;
  background-size:     16px;
  padding-right:       2.4rem;
  -webkit-appearance:  none;
  -moz-appearance:     none;
  appearance:          none;
}

textarea.form-control {
  min-height:  120px;
  resize:      vertical;
  line-height: 1.6;
}

/* Input-Group (z. B. Datumsfelder) */
.input-group-addon {
  background:    var(--gws-sage-wash);
  border-color:  var(--gws-line);
  color:         var(--gws-ink-soft);
  border-radius: var(--gws-radius);
  font-size:     .95rem;
}

/* ============================================================
   6. RADIO / CHECKBOX
   ============================================================ */
.ls-answers .radio,
.ls-answers .checkbox,
.answer-item.radio,
.answer-item.checkbox {
  padding:       .5rem .6rem;
  border-radius: var(--gws-radius);
  transition:    background .12s;
}

.ls-answers .radio:hover,
.ls-answers .checkbox:hover,
.answer-item.radio:hover,
.answer-item.checkbox:hover {
  background: var(--gws-sage-wash);
}

.ls-answers .radio label,
.ls-answers .checkbox label,
.answer-item label {
  font-size:   1rem;
  color:       var(--gws-ink);
  cursor:      pointer;
  padding-left: 1.6rem;
  font-weight: 400;
}

/* Benutzerdefinierte Radiobuttons (fruity icons) */
.ls-radio-icon::before,
.ls-checkbox-icon::before {
  color:       var(--gws-sage-deep) !important;
  font-size:   1.1rem;
}

/* Ausgewählte Antwort hervorheben */
.ls-answers .radio.checked,
.ls-answers .checkbox.checked,
.answer-item.checked {
  background: var(--gws-sage-wash);
}

/* Bewertungs-/Skala-Elemente */
.ls-scale-item label,
.ls-num-rating label {
  font-size:  .95rem;
  color:      var(--gws-ink-soft);
}

/* Matrix-Tabellen */
.question-container table.ls-answers,
.question-container .ls-matrix {
  width: 100%;
}

.question-container .ls-matrix th {
  background:    var(--gws-sage-wash);
  color:         var(--gws-ink);
  font-weight:   700;
  font-size:     .88rem;
  border-color:  var(--gws-line);
  padding:       .6rem .8rem;
}

.question-container .ls-matrix td {
  border-color:  var(--gws-line-soft);
  padding:       .55rem .8rem;
  vertical-align: middle;
}

.question-container .ls-matrix tr:nth-child(even) td {
  background: var(--gws-cream-card);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

/* Basis aller Buttons */
.btn {
  font-family:   var(--gws-sans);
  font-weight:   600;
  font-size:     1rem;
  line-height:   1;
  border-radius: var(--gws-radius-pill);
  padding:       .85rem 2rem;
  border-width:  1.5px;
  border-style:  solid;
  cursor:        pointer;
  transition:    transform .16s ease, background .16s ease,
                 color .16s ease, border-color .16s ease,
                 box-shadow .16s ease;
  white-space:   nowrap;
  text-transform: none;
  letter-spacing: .01em;
}

.btn:hover,
.btn:focus { transform: translateY(-2px); box-shadow: var(--gws-shadow-soft); }
.btn:active { transform: translateY(0); }

/* Primär-Button — Weiter / Absenden */
.btn-primary,
.btn-primary.navigator-btn,
.ls-button-submit.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--gws-sage-deep) !important;
  border-color:     var(--gws-sage-deep) !important;
  color:            #fbfbf3 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.navigator-btn:hover {
  background-color: var(--gws-sage-dark) !important;
  border-color:     var(--gws-sage-dark) !important;
  color:            #fff !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--gws-sage-dark) !important;
  border-color:     var(--gws-sage-dark) !important;
}

/* Sekundär-Button — Zurück */
.btn-default,
.btn-default.navigator-btn {
  background-color: transparent !important;
  border-color:     var(--gws-ink) !important;
  color:            var(--gws-ink) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.navigator-btn:hover {
  background-color: var(--gws-ink) !important;
  border-color:     var(--gws-ink) !important;
  color:            var(--gws-cream) !important;
}

/* Abbrechen / Neutral */
.btn-warning {
  background-color: var(--gws-cream-deep) !important;
  border-color:     var(--gws-line) !important;
  color:            var(--gws-ink) !important;
}

/* Grössen */
.btn-lg { padding: 1rem 2.4rem; font-size: 1.08rem; }
.btn-sm { padding: .55rem 1.2rem; font-size: .9rem; }

/* ============================================================
   8. NAVIGATIONSBEREICH (Zurück / Weiter)
   ============================================================ */
.navigator,
.ls-navigation-bottom,
.ls-nav {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  padding:   1.4rem 0 1rem;
}

/* Abstand zwischen Fragen-Block und Navigation */
.ls-container > .navigator:last-child,
#outerframeContainer > .navigator {
  margin-top: 1.6rem;
}

/* ============================================================
   9. FEHLERMELDUNGEN / VALIDIERUNG
   ============================================================ */
.has-error .form-control,
.ls-question-mandatory-error .form-control {
  border-color: var(--gws-error) !important;
  background:   var(--gws-error-bg);
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,.18) !important;
}

/* Inline-Fehlertext */
.help-block.error-block,
.ls-error-tip,
.error-block {
  color:       var(--gws-error);
  font-size:   .88rem;
  font-weight: 600;
  margin-top:  .4rem;
  padding:     .35rem .6rem;
  background:  var(--gws-error-bg);
  border-radius: calc(var(--gws-radius) / 2);
}

/* Alert-Box (allgemeine Fehlermeldungen) */
.alert {
  border-radius: var(--gws-radius);
  border-width:  1.5px;
  font-size:     .98rem;
}

.alert-danger,
.alert-error {
  background:   var(--gws-error-bg);
  border-color: var(--gws-error-border);
  color:        var(--gws-error);
}

.alert-success {
  background:   var(--gws-sage-wash);
  border-color: var(--gws-sage);
  color:        var(--gws-sage-dark);
}

.alert-info {
  background:   var(--gws-lake-wash);
  border-color: var(--gws-lake);
  color:        var(--gws-lake-deep);
}

/* ============================================================
   10. NAVIGATIONSLEISTE OBEN (Panel-Kopf, Seiten-Header)
   ============================================================ */
.navbar,
#ls-top-logo {
  background-color: rgba(244,240,224,.92) !important;
  border-color:     var(--gws-line-soft);
  backdrop-filter:  blur(12px);
  box-shadow:       none;
}

.navbar-brand,
.navbar-brand:hover {
  color:      var(--gws-ink) !important;
  font-family: var(--gws-serif);
  font-weight: 500;
}

.navbar-nav > li > a {
  color: var(--gws-ink-soft) !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > .active > a {
  color:      var(--gws-ink) !important;
  background: var(--gws-sage-wash) !important;
}

/* Umfrage-Kopfbereich (wird in fruity als .panel-heading gerendert) */
.panel-primary,
.panel-primary > .panel-heading {
  background-color: var(--gws-ink) !important;
  border-color:     var(--gws-ink) !important;
  color:            var(--gws-cream) !important;
}

.panel-primary > .panel-heading .panel-title {
  font-family: var(--gws-serif);
  font-weight: 500;
  font-size:   1.3rem;
  color:       var(--gws-cream);
}

/* Panel-Rahmen */
.panel {
  border-radius: var(--gws-radius-lg);
  box-shadow:    var(--gws-shadow);
  border:        none;
  overflow:      hidden;
}

.panel-body {
  background: var(--gws-paper);
  padding:    2rem;
}

/* ============================================================
   11. ABSCHLUSS-/ENDSEITE
   ============================================================ */
.ls-end-message,
.ls-end-content,
.end-message,
.thank-you-message {
  background:    var(--gws-paper);
  border:        1px solid var(--gws-line-soft);
  border-radius: var(--gws-radius-lg);
  box-shadow:    var(--gws-shadow-soft);
  padding:       2.8rem 2.4rem;
  text-align:    center;
}

.ls-end-message h3,
.thank-you-message h3 {
  font-family:   var(--gws-serif);
  font-size:     2rem;
  color:         var(--gws-ink);
  margin-bottom: .8rem;
}

/* Grüner Abschluss-Check-Icon (fruity) */
.ls-end-message .ls-check-icon,
.end-message .fa-check-circle {
  color:     var(--gws-sage-deep);
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* ============================================================
   12. SONSTIGES / HILFSMITTEL
   ============================================================ */

/* Pflichtfeld-Stern */
.ls-asterisk,
.mandatory-asterisk {
  color: var(--gws-sage-deep);
}

/* Datepicker / Modal */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: var(--gws-sage-deep);
  border-color:     var(--gws-sage-dark);
}

.datepicker table tr td:hover {
  background: var(--gws-sage-wash);
}

/* Slider (Bewertungsskala) */
.slider.slider-horizontal .slider-track {
  background: var(--gws-cream-deep);
  box-shadow: none;
}

.slider .slider-selection {
  background-image: none;
  background-color: var(--gws-sage);
}

.slider .slider-handle {
  background-image: none;
  background-color: var(--gws-sage-deep);
}

/* Spinner / Lade-Indikator */
.ls-spinner,
.ajax-loading {
  color: var(--gws-sage-deep);
}

/* Tooltips */
.tooltip-inner {
  background:    var(--gws-ink);
  border-radius: var(--gws-radius);
  font-size:     .88rem;
  padding:       .45rem .85rem;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--gws-ink); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--gws-ink); }

/* ============================================================
   13. RESPONSIVE KORREKTUREN
   ============================================================ */
@media (max-width: 768px) {
  .question-container,
  .question-container.card {
    padding: 1.2rem 1.1rem;
    border-radius: var(--gws-radius);
  }

  .jumbotron,
  .ls-welcome-container {
    padding: 1.8rem 1.2rem;
    border-radius: var(--gws-radius);
  }

  .btn {
    padding: .75rem 1.4rem;
    font-size: .96rem;
  }

  .navigator,
  .ls-navigation-bottom {
    justify-content: stretch;
  }

  .navigator .btn,
  .ls-navigation-bottom .btn {
    width: 100%;
    justify-content: center;
  }

  .panel-body {
    padding: 1.2rem;
  }
}

@media (max-width: 480px) {
  body { font-size: 16px; }

  .question-container,
  .question-container.card {
    padding: 1rem;
  }

  .ls-question-text,
  .question-text {
    font-size: 1rem;
  }
}