@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300..700&family=Playfair+Display:wght@400;500&family=Tenor+Sans&display=swap');

/* ==========================================================================
   FERTIA - LimeSurvey Theme (fruity_twentythree)
   custom.css · wird als letzte Datei geladen und ueberschreibt alles andere
   --------------------------------------------------------------------------
   Saemtliche Werte sind am 04.08.2026 direkt aus dem gerenderten DOM von
   fertia.de ausgelesen, nicht nachempfunden. Wo der Wert der Seite fuer ein
   Formular nicht funktioniert, steht die Abweichung als Kommentar dabei.

   Gemessene Referenzwerte:
     Fliesstext      Nunito Sans 300 · 16px · line-height 28.45px · #646A8C
     Hero-Titel      Playfair Display 400 · 64px · line-height 57.6px
     Sektionstitel   Tenor Sans 400 · 63px · line-height 63px · #1F2755
     Untertitel      Tenor Sans 400 · 24px · line-height 28.8px · #1F2755
     Zwischentitel   Playfair Display 400 · 20px · line-height 24px · #0B0449
     Karte           #fff · radius 10px · 1px 1px 15px rgba(19,19,19,.5) · padding 30px
     Trennlinie      1px dashed #BBBBBB
     Button          Nunito Sans 300 · 18px · radius 80px · #515EF5
                     shadow 1.622px 3.245px 3.245px rgba(0,0,0,.08)
     Kopfleiste      rgba(240,244,255,.5) · kein Rahmen · kein Schatten
     Zeichenabstand  ueberall "normal"

   Aufbau:
     00 Tokens · 01 Seitenrahmen · 02 Kopfleiste · 03 Fortschritt
     04 Typografie · 05 Fragen · 06 Buttons · 07 Eingabefelder
     08 Radio & Checkbox · 09 Array-Tabellen · 10 Hinweise & Modals
     11 Menue · 12 Datenschutz · 13 Abschluss · 14 Slider
     15 Restfarben des Basis-Themes · 16 Umfragen-Uebersicht
     17 Responsive, Motion, Print
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

:root {
  /* Primaerfarben */
  --f-ink:            #1F2755;   /* --primaries--hope, Ueberschriften */
  --f-ink-deep:       #0B0449;   /* --primary, Zwischenueberschriften */
  --f-ink-80:         #4E5682;   /* --primaries--hope-hover */
  --f-body-color:     #646A8C;   /* Fliesstextfarbe der Seite */
  --f-ink-40:         #9DA1BB;   /* --decoration-gray */

  /* Akzent */
  --f-accent:         #515EF5;   /* --decoration */
  --f-accent-hover:   #4552E2;
  --f-accent-active:  #3A46CC;
  --f-accent-tint:    #EFF1FE;   /* --primaries--hope-active-secondary */

  /* Flaechen */
  --f-warm:           #F8F5F4;   /* --neutrals--surface-bright, Hero-Flaeche */
  --f-warm-dim:       #EFE3DF;   /* --neutrals--surface-dim */
  --f-cool:           #F6F6FA;   /* --neutrals--surface */
  --f-nav:            #F0F4FF;   /* Kopfleiste der Seite */
  --f-blush:          #F9E4DC;   /* --skin-tones--skin-tone-0 */
  --f-white:          #FFFFFF;

  /* Linien */
  --f-dash:           #BBBBBB;   /* gestrichelte Trennlinie der Karten */
  --f-line:           #EAEEF3;   /* --decoration-light-gray */
  --f-line-field:     #D8DBE9;

  /* Status */
  --f-alert:          #AE3450;
  --f-alert-tint:     #FBEFF2;
  --f-success:        #2E7D5B;
  --f-success-tint:   #EAF4EF;

  /* Schriften */
  --f-display: 'Tenor Sans', 'Optima', 'Gill Sans', sans-serif;
  --f-serif:   'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Form */
  --f-radius:        10px;   /* Kartenradius der Seite */
  --f-radius-pill:   80px;   /* Buttonradius der Seite */
  --f-shadow-card:   1px 1px 15px 0 rgba(19, 19, 19, 0.5);
  --f-shadow-btn:    1.622px 3.245px 3.245px 0 rgba(0, 0, 0, 0.08);

  /* Bootstrap-Utilities mitziehen (.text-primary, .bg-primary, …) */
  --bs-primary:        #515EF5;
  --bs-primary-rgb:    81, 94, 245;
  --bs-secondary:      #646A8C;
  --bs-secondary-rgb:  100, 106, 140;
  --bs-body-color:     #646A8C;
  --bs-body-color-rgb: 100, 106, 140;
  --bs-body-bg:        #F8F5F4;
  --bs-danger:         #AE3450;
  --bs-danger-rgb:     174, 52, 80;
  --bs-light:          #F8F5F4;
  --bs-dark:           #1F2755;
}


/* ==========================================================================
   01 · SEITENRAHMEN
   ========================================================================== */

/* body[class] schlaegt die Font-Klasse aus den Theme-Optionen (.font-arial …).
   Werte exakt wie der Fliesstext auf fertia.de: 300 / 16px / 28.45px. */
body[class] {
  background-color: var(--f-warm);
  color: var(--f-body-color);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--f-accent-tint);
  color: var(--f-ink);
}

#outerframeContainer {
  padding-bottom: 3rem;
}

/* Die Karte: Radius, Schatten und Innenabstand der Sektionskarten von
   fertia.de. Innenabstand dort 30px bei 445px Kartenbreite; hier auf 44px
   angehoben, weil die Umfragekarte deutlich breiter laeuft. */
#main-col {
  background-color: var(--f-white);
  border: none;
  border-radius: var(--f-radius);
  box-shadow: var(--f-shadow-card);
  padding: 44px;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

a,
.error-link {
  color: var(--f-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
.error-link:hover {
  color: var(--f-accent-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 2px;
}


/* ==========================================================================
   02 · KOPFLEISTE
   Die Seite nutzt rgba(240,244,255,.5) ohne Rahmen, Schatten oder Blur.
   Abweichung: Deckkraft auf .94 erhoeht, weil unter der Leiste hier ein
   scrollendes Formular liegt und Text sonst durchscheint.
   ========================================================================== */

/* Das Basis-Theme setzt .navbar { background-color: #fff !important } -
   deshalb muss hier ebenfalls !important stehen. */
#survey-nav.navbar {
  background-color: rgba(240, 244, 255, 0.94) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  padding: 15px 0;
}

#survey-nav .navbar-brand,
#survey-nav .logo-container {
  min-height: 0;
  height: auto;
  padding: 0;
  margin-right: 0;
}

#survey-nav .logo,
.logo-container img.logo {
  max-height: 30px;
  width: auto;
}

#survey-nav .navbar-toggler {
  color: var(--f-ink);
  border: none;
  background-color: transparent;
  padding: 4px 8px;
}

#survey-nav .navbar-toggler:hover,
#survey-nav .navbar-toggler .ri-more-fill {
  color: var(--f-ink);
}


/* ==========================================================================
   03 · FORTSCHRITT
   ========================================================================== */

.top-container {
  margin-bottom: 0;
}

.top-container .ls-progress-container {
  padding: 10px 0 2px;
}

.progress,
.top-container .progress {
  height: 4px;
  background-color: var(--f-line);
  border-radius: var(--f-radius-pill);
  overflow: hidden;
  box-shadow: none;
}

.progress-bar,
.top-container .progress-bar {
  background-color: var(--f-accent);
  background-image: none;
  border-radius: var(--f-radius-pill);
  box-shadow: none;
  min-width: 4px;
}

.ls-progress-container:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 4px;
}


/* ==========================================================================
   04 · TYPOGRAFIE
   Zeichenabstand bleibt ueberall "normal" - fertia.de setzt nirgends
   letter-spacing, und negativer Abstand war der auffaelligste Fremdkoerper.
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--f-ink);
  letter-spacing: normal;
  line-height: 1.05;
}

/* #outerframeContainer setzt hyphens:auto. In den Serifen-Ueberschriften
   fuehrt das zu Trennungen wie "aerztli-che" mitten im Fragetitel. */
.survey-name,
.group-container .group-title,
.question-container .ls-label-question,
.completed-text,
.fertia-list-title,
.fertia-list-subtitle,
.fertia-survey-name {
  -webkit-hyphens: manual;
  hyphens: manual;
}

h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--f-ink-deep);
  letter-spacing: normal;
  line-height: 1.2;
}

/* Umfrage-Titel: Sektionstitel-Behandlung der Seite (Tenor Sans, lh 1.0),
   von 63px auf 44px herunterskaliert, da eine Formularspalte schmaler ist. */
.survey-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--f-ink);
  margin-top: 0;
  margin-bottom: 14px;
}

/* Gestrichelte Trennlinie: 1px dashed #BBB, wie .c-card-content-divider-2 */
.survey-name:not(:empty)::after,
.group-container .group-title:not(:empty)::after {
  content: "";
  display: block;
  margin-top: 22px;
  border-bottom: 1px dashed var(--f-dash);
}

.survey-description,
.survey-welcome,
.form-heading,
.group-container .group-description {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: normal;
  color: var(--f-body-color);
}

.survey-welcome {
  margin-top: 1rem;
}

/* Keine Versalien mit Sperrung - kommt auf fertia.de nirgends vor. */
.question-count-text {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: normal;
  text-transform: none;
  color: var(--f-ink-40);
  margin-top: 1.5rem;
}

#welcome-container {
  max-width: 100%;
}

/* Gruppen: Untertitel-Behandlung der Seite (Tenor Sans 24px), hier groesser,
   weil eine Gruppe im Fragebogen die Rolle einer Sektion einnimmt. */
.group-outer-container.space-col,
.group-container.space-col {
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

.group-title-container {
  padding: 0;
  background: transparent;
}

.group-container .group-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--f-ink);
  margin-top: 0.5em;
  margin-bottom: 12px;
}

.group-container .group-description {
  margin-bottom: 0.5rem;
}

.text-muted {
  color: var(--f-ink-40) !important;
}


/* ==========================================================================
   05 · FRAGEN
   Fragetitel bekommen exakt die Behandlung der Zwischenueberschriften auf
   fertia.de ("Du findest bei uns:"): Playfair Display 400 · 20px ·
   line-height 24px · #0B0449 · 20px Abstand nach unten.
   ========================================================================== */

.question-container {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 28px 0;
}

.question-container > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.question-container + .question-container {
  border-top: 1px solid var(--f-line);
}

.question-container:first-of-type {
  padding-top: 12px;
}

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

.question-container .ls-label-question {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--f-ink-deep);
  margin-bottom: 20px;
}

.question-container .asterisk,
.question-container .asterisk * {
  color: var(--f-alert);
}

.question-container .question-number,
.question-container .question-code {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--f-ink-40);
}

.question-container .question-help-container {
  margin-bottom: 12px;
}

/* Kein Zierstrich, keine Kursive - nur ruhiger, leichter Text. */
.ls-questionhelp,
.question-container .ls-questionhelp,
.question-container .help-block {
  display: block;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--f-body-color);
  border: none;
  padding-left: 0;
}

/* .ls-question-message traegt sowohl neutrale Hinweise ("Bitte waehle eine
   der folgenden Antworten") als auch echte Fehler. Erst beim Absenden setzt
   survey.js die Klasse ls-em-error bzw. text-danger. Standard ist deshalb
   ruhig, Rot gibt es nur im tatsaechlichen Fehlerfall. */
.question-container .ls-question-message {
  font-family: var(--f-body);
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--f-body-color);
}

.question-container .ls-question-message.ls-em-error,
.question-container .ls-question-message.text-danger,
.question-container .ls-em-error,
.ls-question-message.ls-em-error {
  color: var(--f-alert);
}

.question-container .ls-question-message.ls-em-success {
  color: var(--f-body-color);
}

/* Fragen mit Fehler bekommen von LimeSurvey .input-error */
.question-container.input-error .ls-label-question {
  color: var(--f-alert);
}

.question-container .question-valid-container {
  margin-top: 10px;
  margin-bottom: 0;
}

.question-container .question-valid-container:empty {
  display: none;
}

.answer-container {
  padding-left: 0;
  padding-right: 0;
}

.question-item {
  border: none;
}


/* ==========================================================================
   06 · BUTTONS
   Nunito Sans 300 · 18px · radius 80px · dauerhafter weicher Schatten.
   fertia.de definiert keinen Hover-Zustand; fuer ein Formular braucht es
   aber eine Rueckmeldung, deshalb hier eine minimale Abdunklung.
   ========================================================================== */

.btn {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: normal;
  border-radius: var(--f-radius-pill);
  border-width: 1px;
  min-height: 42px;
  padding: 10px 24px;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 53px;
  padding: 14px 26px;
  font-size: 18px;
  line-height: 1.35;
  border-radius: var(--f-radius-pill);
}

.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus {
  box-shadow: none;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 2px;
}

/* Primaer: Weiter / Absenden */
.btn-primary {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
  box-shadow: var(--f-shadow-btn);
}

.btn-primary:hover {
  background-color: var(--f-accent-hover);
  border-color: var(--f-accent-hover);
  color: var(--f-white);
  box-shadow: var(--f-shadow-btn);
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
  box-shadow: var(--f-shadow-btn);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--f-accent-active);
  border-color: var(--f-accent-active);
  color: var(--f-white);
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--f-ink-40);
  border-color: var(--f-ink-40);
  color: var(--f-white);
  opacity: 0.6;
  box-shadow: none;
}

/* Sekundaer: Zurueck */
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--f-line-field);
  color: var(--f-ink);
  box-shadow: none;
}

.btn-outline-secondary:hover {
  background-color: var(--f-cool);
  border-color: var(--f-ink-40);
  color: var(--f-ink);
  box-shadow: none;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  background-color: transparent;
  border-color: var(--f-ink-40);
  color: var(--f-ink);
  box-shadow: none;
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:active:focus,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--f-line);
  border-color: var(--f-ink-40);
  color: var(--f-ink);
  box-shadow: none;
}

/* Kleine Aktionsbuttons */
.btnaddanswer,
.btndelanswer,
.btn-slider-reset,
.ls-input-group-extra .btn {
  border-radius: var(--f-radius-pill);
  border-color: var(--f-line-field);
  color: var(--f-body-color);
  min-height: 36px;
}

.btnaddanswer:hover,
.btndelanswer:hover,
.btn-slider-reset:hover {
  border-color: var(--f-accent);
  color: var(--f-accent);
  background-color: var(--f-accent-tint);
}

/* Navigation unten */
#navigator-container {
  border-top: 1px solid var(--f-line);
  padding-top: 28px;
  padding-bottom: 0;
  margin-top: 6px;
  margin-left: 0;
  margin-right: 0;
  align-items: center;
  row-gap: 12px;
}

#navigator-container > [class*="col-"]:first-child {
  padding-left: 0;
}

#navigator-container > [class*="col-"]:last-child {
  padding-right: 0;
}

#navigator-container > hr {
  display: none;
}

.save-clearall-wrapper,
p.return-to-survey {
  margin-top: 1.25rem;
  font-size: 15px;
  font-weight: 300;
  color: var(--f-body-color);
}


/* ==========================================================================
   07 · EINGABEFELDER
   ========================================================================== */

.form-control,
.form-select,
textarea.form-control {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--f-ink);
  background-color: var(--f-white);
  border: 1px solid var(--f-line-field);
  border-radius: var(--f-radius);
  padding: 13px 16px;
  box-shadow: none;
  transition: border-color 0.18s ease;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--f-ink-40);
}

.form-control:focus,
.form-select:focus {
  color: var(--f-ink);
  background-color: var(--f-white);
  border-color: var(--f-accent);
  box-shadow: none;
  outline: none;
}

.form-control::placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder {
  color: var(--f-ink-40);
  opacity: 1;
}

.form-control[disabled],
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--f-cool);
  border-color: var(--f-line);
  color: var(--f-ink-40);
  opacity: 1;
}

textarea.form-control {
  border-radius: var(--f-radius);
  min-height: 120px;
  line-height: 1.7;
}

/* "ls-important-field" setzt im Basis-Theme harte Werte mit !important */
.form-control.ls-important-field,
.form-select.ls-important-field {
  height: auto !important;
  border: 1px solid var(--f-line-field) !important;
  border-radius: var(--f-radius);
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  box-shadow: none;
}

.form-control.ls-important-field:focus,
.form-select.ls-important-field:focus {
  border-color: var(--f-accent) !important;
  box-shadow: none;
}

.form-control.ls-important-field:disabled,
.form-control.ls-important-field[readonly] {
  border: 1px solid var(--f-line) !important;
  box-shadow: none;
}

/* Prefix / Suffix */
.input-group-text,
.ls-input-group-extra {
  background-color: var(--f-cool);
  border: 1px solid var(--f-line-field);
  color: var(--f-body-color);
  border-radius: var(--f-radius);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
}

/* Antwort-Labels: Fliesstext-Behandlung der Seite */
.ls-answers label,
.answer-item label,
.control-label {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--f-body-color);
}

.ls-answers label .radio-label,
.answer-item label .radio-label,
.control-label .radio-label {
  padding-left: 14px;
}


/* ==========================================================================
   08 · RADIO & CHECKBOX
   Geometrie (19/9 px, margin-left -20/-18) bleibt unveraendert - sie ist in
   den Array-Tabellen hart verdrahtet. Geaendert werden nur Farben und Linien.
   ========================================================================== */

/* --- Radio --- */
.radio-item label::before {
  border: 1px solid var(--f-line-field);
  background-color: var(--f-white);
  transition: border-color 0.18s ease;
}

.radio-item label:hover::before {
  border-color: var(--f-accent);
}

.radio-item label::after,
.radio-item input[type=radio] + label::after {
  background-color: var(--f-accent);
}

.radio-item input[type=radio]:checked + label::before {
  border-color: var(--f-accent);
}

.radio-item input[type=radio]:checked + label::after {
  background-color: var(--f-accent);
}

/* Gewaehlt = Textfarbe wechselt auf Ink, kein Fettsprung. */
.radio-item input[type=radio]:checked + label {
  color: var(--f-ink);
  font-weight: 400;
}

.radio-item input[type=radio]:focus + label::before {
  outline: none;
}

.radio-item input[type=radio]:focus-visible + label::before {
  outline: 2px solid var(--f-accent);
  outline-offset: 2px;
}

/* --- Checkbox --- */
.checkbox-item label::before {
  border: 1px solid var(--f-line-field);
  background-color: var(--f-white);
  border-radius: 4px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.checkbox-item label:hover::before {
  border-color: var(--f-accent);
}

.checkbox-item input[type=checkbox]:checked + label::before,
.checkbox-item input[type=radio]:checked + label::before {
  border-color: var(--f-accent);
  background-color: var(--f-accent);
}

.checkbox-item input[type=checkbox]:checked + label::after,
.checkbox-item input[type=radio]:checked + label::after {
  background-color: transparent;
  color: var(--f-white);
}

.checkbox-item input[type=checkbox]:checked + label {
  color: var(--f-ink);
  font-weight: 400;
}

.checkbox-item input[type=checkbox]:indeterminate + label::before {
  border-color: var(--f-accent);
  background-color: var(--f-accent);
}

.checkbox-item input[type=checkbox]:indeterminate + label::after {
  background-color: var(--f-white);
}

.checkbox-item input[type=checkbox]:focus + label::before {
  outline: none;
}

.checkbox-item input[type=checkbox]:focus-visible + label::before {
  outline: 2px solid var(--f-accent);
  outline-offset: 2px;
}

/* --- Abstaende der Antwortoptionen ----------------------------------------
   Das Basis-Theme stapelt drei Abstaende uebereinander:
   li.radio-item { margin-bottom: 1em }  +  .control-label { margin-bottom: 12px }
   +  die Zeilenhoehe. Das ergibt rund 68px Zeilenabstand pro Option.
   Hier wird alles auf einen einzigen, kontrollierten Wert zusammengefasst.  */
.answer-container li.answer-item,
.answer-container li.radio-item,
.answer-container li.checkbox-item,
.answer-container .answers-list > .answer-item {
  margin-bottom: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

.answer-container .radio-item > label,
.answer-container .checkbox-item > label,
.answer-container .radio-item > .control-label,
.answer-container .checkbox-item > .control-label {
  margin-bottom: 0;
}

.answer-container .text-item > .control-label,
.answer-container .numeric-item > .control-label {
  margin-bottom: 6px;
}

.answer-container ul[data-column-count] {
  column-gap: 2rem;
}

/* Native Bootstrap-Checkboxen */
.form-check-input:checked {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
}

.form-check-input:focus {
  border-color: var(--f-accent);
  box-shadow: none;
}

/* Auswahl-Buttons (Ja/Nein, Geschlecht, 5-Punkt-Skala) */
.ls-answers label.btn,
.yesno-button .btn,
.gender-button .btn {
  border-radius: var(--f-radius-pill);
  border-color: var(--f-line-field);
  color: var(--f-ink);
  font-family: var(--f-body);
  font-weight: 300;
}

.btn-check:checked + .btn,
.btn-check:active + .btn {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
}


/* ==========================================================================
   09 · ARRAY-TABELLEN
   ========================================================================== */

table.ls-answers {
  border-color: var(--f-line);
}

.ls-answers .ls-heading th,
.ls-answers th,
table.ls-answers tr th {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--f-ink);
  border-bottom: 1px solid var(--f-line);
  vertical-align: bottom;
}

.ls-answers tbody .answertext,
table.ls-answers tbody .answertext {
  font-family: var(--f-body);
  font-weight: 300;
  color: var(--f-ink);
}

.ls-answers .answertextright {
  color: var(--f-ink);
}

table.ls-answers td,
table.ls-answers tbody td {
  border-color: var(--f-line);
}

.ls-even {
  background-color: var(--f-cool);
}

table.ls-answers > tbody > tr:hover,
.ls-answers > tbody > tr.ls-even:hover {
  background-color: var(--f-warm);
}

.no-tables-mobile table.ls-answers tbody tr,
.no-tables-general table.ls-answers tbody tr {
  border-bottom: 1px solid var(--f-line);
}


/* ==========================================================================
   10 · HINWEISE & MODALS
   ========================================================================== */

.alert {
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  background-color: var(--f-cool);
  color: var(--f-ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  padding: 16px 20px;
}

.alert-danger,
.ls-questions-have-errors {
  background-color: var(--f-alert-tint);
  border-color: rgba(174, 52, 80, 0.22);
  color: var(--f-alert);
}

.alert-success {
  background-color: var(--f-success-tint);
  border-color: rgba(46, 125, 91, 0.22);
  color: var(--f-success);
}

.alert-info,
.alert-warning {
  background-color: var(--f-blush);
  border-color: var(--f-warm-dim);
  color: var(--f-ink);
}

.modal-content {
  border: none;
  border-radius: var(--f-radius);
  box-shadow: var(--f-shadow-card);
}

.modal-header,
.modal-footer {
  border-color: var(--f-line);
  padding: 20px 26px;
}

.modal-body {
  padding: 8px 26px 20px;
  color: var(--f-body-color);
}

.modal-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--f-ink);
}


/* ==========================================================================
   11 · MENUE & FRAGEINDEX
   ========================================================================== */

#survey-nav #main-dropdown,
.dropdown-menu {
  border: none;
  border-radius: var(--f-radius);
  box-shadow: var(--f-shadow-card);
  padding: 8px;
  background-color: var(--f-white);
}

#survey-nav #main-dropdown .list-group-item,
.dropdown-menu > li > a,
.dropdown-item {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--f-ink);
  border: none;
  border-radius: 6px;
}

.dropdown-item:hover,
.dropdown-item:focus,
#survey-nav #main-dropdown .list-group-item:hover {
  background-color: var(--f-accent-tint);
  color: var(--f-ink);
}

#survey-nav .dropdown-header {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--f-ink-40);
}

.dropdown-divider,
#survey-nav .dropdown-divider {
  border-color: var(--f-line);
}

.ls-index-buttons .list-group-item,
.index-button .list-group-item {
  border-color: var(--f-line);
  color: var(--f-ink);
}

.list-group-item.active {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
}


/* ==========================================================================
   12 · DATENSCHUTZ
   ========================================================================== */

.privacy {
  margin-top: 2rem;
  margin-left: 0;
  margin-right: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--f-line);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--f-body-color);
}

.privacy > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.privacy .ls-privacy-head,
.privacy #datasecurity_notice_label {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--f-ink-40);
}

.privacy .checkbox-item label::before {
  border: 1px solid var(--f-line-field);
}

.privacy .checkbox-item input[type=checkbox]:checked + label::before {
  border-color: var(--f-accent);
  background-color: var(--f-accent);
}

.datasecurity-checkbox-label,
.privacy .checkbox-item input[type=checkbox]:checked + label,
.text.primary.control-label.checkbox-label.form-check-label.datasecurity-checkbox-label {
  color: var(--f-ink);
  font-size: 15px;
  font-weight: 300;
}

#datasecurity_accepted + label,
.privacy .checkbox-item label {
  line-height: 1.6;
}

/* Anonymitaets-Hinweis ausgeblendet (Stand der bisherigen Fassung).
   Zum Wiedereinblenden einfach die naechsten beiden Regeln entfernen. */
.ls-privacy-body { display: none; }
.ls-privacy-head { display: none; }


/* ==========================================================================
   13 · ABSCHLUSS-SEITE
   ========================================================================== */

.completed-wrapper {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.completed-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--f-ink);
}

.quotamessage {
  font-family: var(--f-body);
  font-weight: 300;
  color: var(--f-body-color);
}

.ls-logo {
  opacity: 0.5;
  max-width: 140px;
}


/* ==========================================================================
   14 · SLIDER
   bootstrap-slider wird als eigenes Paket geladen, dessen Reihenfolge
   gegenueber dieser Datei nicht garantiert ist. Deshalb hier !important.
   ========================================================================== */

.slider-list .slider .slider-selection,
.slider .slider-selection {
  background-color: var(--f-accent) !important;
  background-image: none !important;
}

.slider-list .slider .slider-track,
.slider .slider-track {
  background-color: var(--f-line) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.slider-list .slider .slider-handle,
.slider .slider-handle {
  background-color: var(--f-accent) !important;
  background-image: none !important;
}

.slider .slider-handle:not(.custom) {
  border: 2px solid var(--f-white);
  box-shadow: var(--f-shadow-btn);
}

.slider-list .slider .slider-handle.custom,
.slider-list .slider.slider-untouched .slider-handle.custom {
  background-color: var(--f-white) !important;
}

.slider-list .slider .slider-handle.custom::before,
.slider-tick.custom::before {
  color: var(--f-accent) !important;
}

.slider-list .slider.slider-untouched .slider-handle {
  background-color: var(--f-ink-40) !important;
}

.slider-list .slider.slider-untouched .slider-handle.custom::before {
  color: var(--f-ink-40) !important;
}

.slider-list .slider .tooltip .tooltip-inner {
  background-color: transparent;
  color: var(--f-accent) !important;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
}

.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
  border-bottom-color: var(--f-accent) !important;
}

.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
  border-left-color: var(--f-accent) !important;
  border-right-color: var(--f-accent) !important;
}

.slider-tick {
  background-color: var(--f-line) !important;
  background-image: none !important;
}

.slider-tick.in-selection {
  background-color: var(--f-accent) !important;
  background-image: none !important;
}

.slider-tick-label,
.slider-list .slider-min-block,
.slider-list .slider-max-block {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--f-body-color);
}

/* Natives <input type="range"> (Bootstrap .form-range) */
.form-range::-webkit-slider-thumb { background-color: var(--f-accent); }
.form-range::-moz-range-thumb { background-color: var(--f-accent); }
.form-range::-webkit-slider-runnable-track { background-color: var(--f-line); }
.form-range::-moz-range-track { background-color: var(--f-line); }


/* ==========================================================================
   15 · RESTFARBEN DES BASIS-THEMES
   Stellen, an denen fruity_twentythree das Apple-Gruen (#14AE5C / #4DD753)
   fest verdrahtet hat und die im Fragebogen sichtbar werden.
   ========================================================================== */

.input-group-text,
label .input-group-text,
.fruity_twentythree .input-group-addon {
  background-color: var(--f-cool);
  border-color: var(--f-line-field);
  color: var(--f-body-color);
}

.input-group-addon.checkbox-item,
.input-group-addon.radio-item {
  background-color: var(--f-cool);
  color: var(--f-ink);
}

.form-change-lang #language-changer-select,
.form-change-lang #lang-select::after {
  color: var(--f-accent);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--f-accent) !important;
  color: var(--f-white);
}

.list-group-item-success {
  background-color: var(--f-accent-tint);
  color: var(--f-ink);
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.link-primary {
  color: var(--f-accent);
}

.btn-outline-primary {
  color: var(--f-accent);
  border-color: var(--f-accent);
}

.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: var(--f-white);
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  box-shadow: none;
}

.btn-success,
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus:checked + .btn-primary,
.btn-check + .btn-primary:hover,
.btn-check:active + .btn-primary,
.btn-check + .btn-primary:active,
.btn-check + .btn-primary.active,
.btn-check + .btn-primary:active:focus {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
  box-shadow: none;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--f-accent-hover);
  border-color: var(--f-accent-hover);
  color: var(--f-white);
}

.border-primary,
.success-border {
  border-color: var(--f-accent) !important;
}

.has-success .form-control,
.has-success .form-control:focus {
  box-shadow: none;
  border-color: var(--f-accent);
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
  color: var(--f-ink);
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--f-success);
  background-image: none;
  padding-right: 16px;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--f-success);
  box-shadow: none;
}

.valid-feedback,
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: var(--f-success);
}

.tempus-dominus-widget .date-container-decades div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-years div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-months div:not(.no-highlight).active,
.tempus-dominus-widget .date-container-days div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-clock div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-hour div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-minute div:not(.no-highlight).active,
.tempus-dominus-widget .time-container-second div:not(.no-highlight).active {
  background-color: var(--f-accent);
  color: var(--f-white);
  text-shadow: none;
}

.tempus-dominus-widget .date-container-decades div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-years div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-months div:not(.no-highlight).today:before,
.tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-clock div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-hour div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-minute div:not(.no-highlight).today:before,
.tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
  border-bottom-color: var(--f-accent);
}

.tempus-dominus-widget button {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-white);
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label {
  border: 2px solid var(--f-accent) !important;
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:after {
  background-color: var(--f-accent);
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:before,
input.imageselect-checkbox:checked ~ .imageselect-select::before {
  border-color: var(--f-accent);
}

input.imageselect-checkbox:checked ~ .imageselect-select::after {
  background-color: var(--f-white);
  color: var(--f-accent);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
  border: 1px solid var(--f-accent);
  border-radius: var(--f-radius);
  color: var(--f-ink);
}

.ranking-advanced-style .sortable-rank,
.ranking-advanced-style .ranking-advanced-sorted-items .sortable-item {
  border: 1px solid var(--f-accent);
  border-radius: var(--f-radius);
}

.ranking-advanced-style .sortable-rank .selector__dragHandle.d-none,
.ranking-advanced-style .sortable-rank .selector__index_row,
.ranking-advanced-style .ranking-advanced-sorted-items .sortable-item .selector__dragHandle.d-none,
.ranking-advanced-style .ranking-advanced-sorted-items .sortable-item .selector__index_row {
  color: var(--f-accent);
}

.numeric-multi .ls-group-total-separator hr {
  border-color: var(--f-line);
  opacity: 1;
}

.numeric-multi .ls-group-total .control-label {
  color: var(--f-ink);
  font-weight: 400;
}

.numeric-multi .dynamic-total.text-success {
  color: var(--f-accent) !important;
}

input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
.checkbox-inline input[type=checkbox]:checked:after {
  background-color: var(--f-accent);
  border-color: var(--f-accent);
}

.table > thead > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success {
  background-color: var(--f-accent-tint);
}


/* ==========================================================================
   16 · UMFRAGEN-UEBERSICHT (survey.fertia.de)
   Gehoert zu views/layout_survey_list.twig
   ========================================================================== */

/* Das Basis-Theme setzt hier feste Hoehen und eine weisse Fussleiste. */
.fertia-surveys-index #surveys-list-container {
  margin-top: 0;
  padding-top: 40px;
  padding-bottom: 24px;
}

#surveyListFooter.fertia-list-footer {
  background-color: transparent;
  border-top: none;
  height: auto;
  bottom: auto;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 28px 0 48px;
}

.fertia-list-card {
  background-color: var(--f-white);
  border: none;
  border-radius: var(--f-radius);
  box-shadow: var(--f-shadow-card);
  padding: 44px;
  margin-top: 2rem;
}

.fertia-list-logo {
  margin-bottom: 30px;
}

.fertia-list-logo img {
  max-height: 34px;
  width: auto;
}

.fertia-list-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--f-ink);
  margin-top: 0;
  margin-bottom: 14px;
}

.fertia-list-title::after {
  content: "";
  display: block;
  margin-top: 22px;
  border-bottom: 1px dashed var(--f-dash);
}

.fertia-list-intro {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--f-body-color);
  margin-bottom: 0;
  max-width: 60ch;
}

.fertia-list-subtitle {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--f-ink);
  margin-top: 40px;
  margin-bottom: 16px;
}

.fertia-survey-list {
  margin: 0;
  padding: 0;
}

.fertia-survey-item + .fertia-survey-item {
  margin-top: 12px;
}

/* Zeile pro Umfrage: Titel links, Pille rechts */
.fertia-survey-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  background-color: var(--f-white);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fertia-survey-link:hover,
.fertia-survey-link:focus-visible {
  border-color: var(--f-accent);
  background-color: var(--f-accent-tint);
  text-decoration: none;
}

.fertia-survey-name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--f-ink-deep);
}

.fertia-survey-cta {
  flex: 0 0 auto;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.35;
  color: var(--f-white);
  background-color: var(--f-accent);
  border-radius: var(--f-radius-pill);
  box-shadow: var(--f-shadow-btn);
  padding: 10px 24px;
  transition: background-color 0.2s ease;
}

.fertia-survey-link:hover .fertia-survey-cta,
.fertia-survey-link:focus-visible .fertia-survey-cta {
  background-color: var(--f-accent-hover);
}

/* Angepinnte Umfrage steht optisch vor der automatischen Liste */
.fertia-survey-pinned {
  margin-top: 40px;
}

.fertia-survey-pinned .fertia-survey-link {
  border-color: var(--f-accent);
  background-color: var(--f-accent-tint);
}

.fertia-list-empty {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.78;
  color: var(--f-body-color);
  margin-top: 32px;
  margin-bottom: 0;
}

.fertia-list-contact {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--f-body-color);
  margin-top: 36px;
  margin-bottom: 0;
  padding-top: 24px;
  border-top: 1px solid var(--f-line);
}

.fertia-list-footer {
  text-align: center;
  padding: 28px 0 8px;
}

.fertia-list-footer p {
  margin-bottom: 4px;
}

.fertia-list-footer-brand {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--f-body-color);
}

.fertia-list-footer-legal {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--f-ink-40);
}

.fertia-list-footer-legal a {
  color: var(--f-ink-40);
  text-decoration: none;
}

.fertia-list-footer-legal a:hover {
  color: var(--f-accent);
  text-decoration: underline;
}

.fertia-list-footer-legal span {
  padding: 0 6px;
}

@media (max-width: 575.98px) {
  .fertia-list-card {
    padding: 26px 20px;
    margin-top: 1.25rem;
  }

  .fertia-list-title {
    font-size: 30px;
  }

  .fertia-survey-link {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }

  .fertia-survey-cta {
    text-align: center;
  }
}


/* ==========================================================================
   17 · RESPONSIVE, MOTION, PRINT
   ========================================================================== */

@media (max-width: 767.98px) {
  #main-col {
    padding: 26px 20px;
    margin-top: 1.25rem;
  }

  #outerframeContainer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .survey-name {
    font-size: 30px;
  }

  .group-container .group-title {
    font-size: 24px;
  }

  .completed-text {
    font-size: 24px;
  }

  .question-container {
    padding: 22px 0;
  }

  .btn-lg,
  .btn-group-lg > .btn {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 16px;
  }

  #navigator-container .btn-lg {
    width: 100%;
  }

  #navigator-container > div {
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-control,
  .radio-item label::before,
  .checkbox-item label::before {
    transition: none !important;
  }
}

@media print {
  body[class] {
    background: #fff;
  }

  #main-col {
    box-shadow: none;
    padding: 0;
  }

  #survey-nav,
  #navigator-container,
  .top-container {
    display: none !important;
  }
}
/* Array-Fragen auf schmalen Screens: Tabellenkopf ausblenden.
   Jede Zelle trägt ihr Label bereits selbst (no-more-table-Muster).
   Ohne diese Regel steht jede Antwortoption doppelt. */
@media only screen and (max-width: 800px) {
  .no-more-tables thead,
  .ls-answers thead {
    display: none !important;
  }
}