/* ============================================================================
 * Stadt Leipzig — LimeSurvey-Umfragetheme (erbt von vanilla, Bootstrap 5)
 * ============================================================================
 * Farben und Schrift aus tokens.css (Leipzig Blau, Blau hell, Leipzig Sans).
 * Layout nach gaengiger Formular-Praxis und leipzig.de, nicht 1:1 nach Print:
 *
 *   Spalte      eine Spalte fuer alles (Kopf, Fortschritt, Fragen, Fuss):
 *               --sl-max breit, --sl-gutter Rand — alle linken Kanten fluchten
 *   Abstaende   nur aus der 8er-Skala --sl-1 … --sl-7 (4/8/16/24/32/48/64)
 *   Flaechen    Seite hellgrau, Fragen als weisse Karten, 1 px Rand, 8 px Radius
 *   Schrift     Frage 18 px, Antworten/Text 16 px, Hilfe/Meta 14 px
 *   Buttons     Pillen wie auf leipzig.de, >= 48 px hoch
 *
 * LimeSurvey setzt Farben z. T. mit hoher Spezifitaet oder !important;
 * wo das so ist, steht !important auch hier.
 * ========================================================================== */

/* --- 0. Schrift und Variablen --------------------------------------------- */
@font-face {
  font-family: 'Leipzig Sans';
  src: url('../files/LeipzigSans-Regular.woff2') format('woff2'),
       url('../files/LeipzigSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* LimeSurveys Bootstrap setzt die Wurzel auf 14px; 100% = Browsergroesse */
  --bs-root-font-size: 100%;
  --bs-primary: var(--color-blau);
  --bs-primary-rgb: 14, 58, 182;
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--sl-page-bg);
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link);

  /* Layout */
  --sl-max: 48rem;                                  /* 768 px Lesespalte fuer Formulare */
  --sl-max-wide: 72rem;                             /* Startseite */
  --sl-gutter: clamp(16px, 4vw, 32px);

  /* Abstaende (8er-Skala) */
  --sl-1: 4px;  --sl-2: 8px;  --sl-3: 16px;  --sl-4: 24px;
  --sl-5: 32px; --sl-6: 48px; --sl-7: 64px;

  /* Flaechen und Linien */
  --sl-page-bg: var(--color-grau-hell);             /* #F2F2F2 */
  --sl-card-bg: var(--color-weiss);
  --sl-line: #D6D6D6;                               /* Kartenrand, Trenner */
  --sl-line-strong: #767676;                        /* Formularfelder: 4.5:1 auf Weiss */
  --sl-muted: #4D4D4D;                              /* Hilfe/Meta: 8.4:1 auf Weiss */
  --sl-radius: 8px;
  --sl-radius-sm: 4px;
  --sl-pill: 999px;

  /* Schrift */
  --sl-text-q: 1.125rem;                            /* Fragetext 18 px */
  --sl-text: 1rem;                                  /* 16 px */
  --sl-text-sm: 0.875rem;                           /* 14 px */
  --sl-text-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --sl-text-h2: 1.5rem;
}

/* --- 1. Grundlagen -------------------------------------------------------- */
html body,
html body[class*="font-"] {
  font-family: var(--font-sans);
  font-size: var(--sl-text);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--sl-page-bg);
  padding: 0 !important;                            /* vanilla: padding-top fuer fixierte Leiste */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > article { flex: 1 0 auto; }
body * { hyphens: manual !important; }             /* keine automatische Silbentrennung */
body .top-container { margin-top: 0 !important; }  /* vanilla setzt 70px inline */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: start;
  margin: 0;
}
p { margin: 0; }
p + p { margin-top: var(--sl-2); }

/* LimeSurvey faerbt Hilfe, Hinweise und Pflichtsterne mit Textklassen */
.text-primary, .text-info, .text-success, .text-warning, .text-danger, .text-secondary {
  color: var(--color-text) !important;
}
.text-muted { color: var(--sl-muted) !important; }
em, i:not([class*="fa"]):not([class*="ri-"]) { font-style: normal; }

a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link); text-decoration-thickness: 2px; }

/* Aus Word eingefuegte Inline-Schriften (Calibri 12pt) neutralisieren */
.question-text *, .survey-description *, .survey-welcome *, .group-description *,
.answertext *, .ls-questionhelp *, .question-help-container *, .control-label *,
.survey-privacy *, .ls-privacy-body *, .completed-text * {
  font-family: var(--font-sans) !important;
}
.question-text span, .question-text font, .survey-description span, .survey-welcome span,
.group-description span, .answertext span, .control-label span {
  font-size: inherit !important;   /* check-style: ignore — hebt Word-Inline-Groessen auf */
  line-height: inherit !important;
}
.question-text p, .survey-welcome p, .survey-description p, .group-description p { margin: 0 !important; }
.question-text p + p, .survey-welcome p + p, .survey-description p + p, .group-description p + p { margin-top: var(--sl-2) !important; }

/* --- 2. Eine Spalte fuer alles -------------------------------------------- */
.sl-wrap,
#outerframeContainer.outerframe,
body .top-container {
  width: 100%;
  max-width: calc(var(--sl-max) + 2 * var(--sl-gutter));
  margin-inline: auto;
  padding-inline: var(--sl-gutter);
}
/* LimeSurveys verschachtelte .row/.col-Raender in der Spalte aufheben */
#outerframeContainer #main-row,
#outerframeContainer .question-container.row,
#outerframeContainer .navigator.row,
#outerframeContainer .privacy.row,
#outerframeContainer .form-change-lang.row { margin-inline: 0; --bs-gutter-x: 0; }
#outerframeContainer .question-container > [class*="col-"],
#outerframeContainer .navigator > [class*="col-"] { padding-inline: 0; }
#main-col, .group-outer-container, .group-container, .space-col { margin-top: 0; margin-bottom: 0; }
body .top-container .top-content { padding: 0; margin: 0; }

/* --- 3. Kopfzeile ---------------------------------------------------------- */
#survey-nav.sl-header {
  position: static;
  display: block;
  background: var(--color-weiss);
  border-bottom: 1px solid var(--sl-line);
  padding: 0;
}
.sl-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sl-4);
  min-height: 80px;
  padding-block: var(--sl-3);
}
.sl-header__brand { display: flex; align-items: center; gap: var(--sl-3); min-width: 0; flex: 1 1 0; }
.sl-header__brand .sl-header__text { flex: 0 1 auto; }
.sl-header__logo-link { display: block; flex: none; }
.sl-header img.sl-logo { display: block; height: 48px; width: auto; flex: none; max-width: none; }
.sl-header__text {
  display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow: hidden;
  padding-inline-start: var(--sl-3);
  border-inline-start: 1px solid var(--sl-line);
  line-height: var(--leading-snug);
}
.sl-header__amt { font-size: var(--sl-text); white-space: nowrap; }
.sl-header__title {
  font-size: var(--sl-text-sm); color: var(--sl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-header__title:empty { display: none; }
.sl-header__menu { flex: none; margin-inline-start: auto; }
.sl-header__menu .navbar-nav { gap: var(--sl-3); flex-direction: row; flex-wrap: nowrap; }
.sl-header .nav-link,
.sl-header .dropdown-toggle {
  color: var(--color-text) !important;
  font-size: var(--sl-text-sm);
  min-height: 44px;
  padding: 0 !important;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.sl-header .nav-link:hover { text-decoration: underline; }
.sl-header__toggler {
  display: none;
  align-items: center; gap: var(--sl-2);
  min-height: 44px; padding: 0 var(--sl-3);
  border: 1px solid var(--sl-line-strong); border-radius: var(--sl-pill);
  color: var(--color-text); font-size: var(--sl-text-sm);
  background: var(--color-weiss);
}
.sl-header__toggler .navbar-toggler-icon {
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath stroke='%23000' stroke-width='2' d='M3 6h18M3 12h18M3 18h18'/%3e%3c/svg%3e"); /* check-style: ignore — Icon als Daten-URI */
}
.dropdown-menu {
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: var(--sl-2) 0; /* check-style: ignore — dezente Erhebung fuer Menues */
}
.dropdown-item { color: var(--color-text); min-height: 44px; display: flex; align-items: center; white-space: normal; padding-inline: var(--sl-3); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-blau-hell); color: var(--color-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--color-blau); color: var(--color-weiss); }

@media (max-width: 767.98px) {
  .sl-header__inner { min-height: 64px; padding-block: var(--sl-2); row-gap: var(--sl-2); }
  .sl-header img.sl-logo { height: 36px; }
  .sl-header__text { padding-inline-start: var(--sl-2); }
  .sl-header__inner { column-gap: var(--sl-3); }
  .sl-header__brand { gap: var(--sl-2); }
  .sl-header__amt { font-size: var(--sl-text-sm); white-space: normal; }
  .sl-header__title { display: none; }
  .sl-header__toggler { display: inline-flex; }
  .sl-header .sl-header__menu { flex-basis: 100%; }
  .sl-header__menu .navbar-nav { flex-direction: column; gap: 0; padding-bottom: var(--sl-2); }
}
@media (max-width: 420px) {
  .sl-header__toggler span:not(.navbar-toggler-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sl-header__toggler { padding: 0; width: 44px; justify-content: center; }
}

/* --- 4. Fortschritt ------------------------------------------------------- */
body .top-container { padding-top: var(--sl-4); }
body .top-container.sl-progress--empty,
body .top-container:has(.sl-progress--empty) { display: none; }
.sl-progress--empty { display: none; }
.sl-progress-label {
  font-size: var(--sl-text-sm); color: var(--sl-muted);
  margin: 0 0 var(--sl-2);
}
.top-container .progress, .progress {
  height: 8px;
  background: var(--sl-line);
  border: 0;
  border-radius: var(--sl-pill);
  overflow: hidden;
}
.progress-bar {
  background: var(--color-blau) !important;
  background-image: none !important;
  border-radius: var(--sl-pill);
  font-size: 0;                                     /* Wert steht als Text darueber */
  min-width: 0 !important;
}

/* --- 5. Inhaltsrahmen, Willkommen, Gruppen -------------------------------- */
#outerframeContainer.outerframe { padding-top: var(--sl-5); padding-bottom: var(--sl-6); }
.top-container + #outerframeContainer, .top-container ~ #outerframeContainer { padding-top: var(--sl-4); }

#welcome-container, .privacy, #completed-container, .completed-text, #submit-container {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: var(--sl-5);
  margin-bottom: var(--sl-3);
}
.privacy { display: block; }
.privacy > * { padding: 0; width: auto; }
.survey-name {
  font-size: var(--sl-text-h1); text-align: start !important;
  margin-bottom: var(--sl-3) !important;
}
.survey-description, .survey-welcome, .number-of-questions, .question-count-text {
  font-size: var(--sl-text) !important; font-weight: var(--weight-regular);
  text-align: start !important; max-width: none; margin: 0;
}
.survey-description { color: var(--sl-muted) !important; margin-bottom: var(--sl-3); }
.survey-welcome { margin-bottom: var(--sl-3); }
.number-of-questions { color: var(--sl-muted) !important; font-size: var(--sl-text-sm) !important; }
.ls-privacy-head, .survey-privacy .h4, .privacy h2, .privacy .h4 {
  font-size: var(--sl-text-q) !important; color: var(--color-text) !important;
  margin: 0 0 var(--sl-2) !important; text-align: start !important;
}
.ls-privacy-body { font-size: var(--sl-text-sm); color: var(--sl-muted); }
.ls-privacy-body p + p { margin-top: var(--sl-2); }

/* Sprachwahl auf der Startseite der Umfrage */
#firstpage-changelang { margin-bottom: var(--sl-3); }
.form-change-lang { align-items: center; gap: var(--sl-2); }
.form-change-lang > * { width: auto !important; padding: 0 !important; }
.form-change-lang .col-form-label { font-size: var(--sl-text-sm); font-weight: var(--weight-regular) !important; }
.form-change-lang .form-control { min-width: 14rem; }

.group-title {
  font-size: var(--sl-text-h2);
  text-align: start !important;
  margin: var(--sl-2) 0 var(--sl-3) !important;
}
#outerframeContainer .group-description .well { background: none; border: 0; padding: 0; box-shadow: none; margin: 0; }
#outerframeContainer .group-description {
  color: var(--sl-muted);
  background: none; border: 0; padding: 0; margin-inline: 0;
  margin: calc(-1 * var(--sl-2)) 0 var(--sl-4);
}

/* --- 6. Fragen als Karten ------------------------------------------------- */
.question-container {
  background: var(--sl-card-bg) !important;
  border: 1px solid var(--sl-line) !important;
  border-radius: var(--sl-radius);
  box-shadow: none;
  padding: var(--sl-4) !important;
  margin: 0 0 var(--sl-3) !important;
}
#outerframeContainer .question-container.row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--sl-3); }
#outerframeContainer .question-container > * { margin: 0 !important; width: 100%; }
.question-title-container { padding: 0 !important; }
/* Textbausteine ohne Antwort: leere Antwortflaeche nimmt sonst einen gap mit */
.question-container.boilerplate > .answer-container { display: none !important; }
.question-valid-container:empty, .question-help-container:empty,
.question-valid-container:not(:has(*)), .question-help-container:not(:has(*)) { display: none !important; }

/* Pflichtmarke als kleine Zeile ueber der Frage */
.asterisk {
  display: flex; align-items: center; gap: var(--sl-1);
  font-size: var(--sl-text-sm); color: var(--sl-muted) !important;
  margin-bottom: var(--sl-1);
}
.asterisk sup, .asterisk .fa { position: static; font-size: 0.625rem; color: var(--color-text) !important; }
.asterisk .small, .asterisk .text-danger { font-size: var(--sl-text-sm); color: var(--sl-muted) !important; font-weight: var(--weight-regular); }

.question-text, .ls-label-question {
  font-size: var(--sl-text-q);
  line-height: 1.45;
  color: var(--color-text);
}
.question-number, .question-code { font-size: var(--sl-text-sm); color: var(--sl-muted); margin-inline-end: var(--sl-1); vertical-align: baseline !important; position: static !important; top: auto !important; }

/* Hilfe und Validierung: buendig mit dem Fragetext */
.question-help-container, .ls-questionhelp, .question-valid-container, .ls-question-help, .em_sq_validation, .ls-question-message {
  font-size: var(--sl-text-sm) !important;
  color: var(--sl-muted) !important;
  padding: 0 !important; margin: 0;
}
.question-help-container, .question-valid-container { display: flex; flex-direction: column; gap: var(--sl-1); }
.question-help-container + .question-valid-container { margin-top: calc(-1 * var(--sl-2)) !important; }
.question-valid-container .ls-question-message + .ls-question-message { margin-top: var(--sl-1); }
.answer-container { padding: 0 !important; }
/* Kern-Abstaende innerhalb der Antwortflaeche (pt-15, mb-3, g-1) neutralisieren */
.answer-container > .ls-answers, .answer-container > .row { padding: 0 !important; margin: 0 !important; }
.answer-container .mb-3:last-child, .answer-container .ls-answers:last-child { margin-bottom: 0 !important; }


/* Fehler */
.question-container.input-error,
.question-container.has-error,
.question-container.ls-error-mandatory {
  border-color: var(--color-porphyr) !important;
  box-shadow: inset 4px 0 0 var(--color-porphyr);
}
.ls-em-error, .text-danger.ls-em-error, .ls-error-mandatory .ls-question-mandatory {
  color: var(--color-porphyr) !important;
  font-weight: var(--weight-bold);
}
.ls-em-success { color: var(--sl-muted) !important; }

/* --- 7. Eingabefelder ------------------------------------------------------ */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="number"], input[type="email"], input[type="date"] {
  font-family: var(--font-sans);
  font-size: var(--sl-text);
  color: var(--color-text);
  background-color: var(--color-weiss);
  border: 1px solid var(--sl-line-strong);
  border-radius: var(--sl-radius-sm) !important;
  box-shadow: none;
  min-height: 48px;
  padding: var(--sl-2) var(--sl-3);
}
textarea.form-control { min-height: 96px; }
select.form-select, select.form-control {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.5' d='m3 6 5 5 5-5'/%3e%3c/svg%3e") !important; /* check-style: ignore — Pfeil als Daten-URI */
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}
.form-control:hover, .form-select:hover { border-color: var(--color-text); }
.form-control:focus, .form-select:focus, select:focus, textarea:focus {
  border-color: var(--color-blau);
  outline: 2px solid var(--color-blau);
  outline-offset: 0;
  box-shadow: none;
}
.form-control:disabled, .form-control[readonly] { opacity: 0.6; background: var(--color-grau-hell); }
.input-group-text { border: 1px solid var(--sl-line-strong); background: var(--color-grau-hell); color: var(--color-text); }
.input-group { flex-wrap: nowrap; max-width: 24rem; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .btn, .input-group > .input-group-text {
  border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0 !important;
  min-height: 48px; min-width: 48px; padding: 0 var(--sl-3);
}
.answer-container .form-text, .answer-container .help-block, .date-format, .answer-container small { display: block; margin-top: var(--sl-2); font-size: var(--sl-text-sm); color: var(--sl-muted); }

/* Zeilen mit Beschriftung links (Mehrfach-Text/Zahl): gleichmaessiger Abstand */
.answer-container .subquestion-list > li, .answer-container .ls-answers > li.question-item { margin-bottom: var(--sl-2); }
.answer-container .ls-answers > li:last-child { margin-bottom: 0; }
.control-label { color: var(--color-text); }
.answer-container .control-label[class*="col-"] { text-align: start !important; padding-inline: 0 var(--sl-3); }

/* --- 8. Radio und Checkbox ------------------------------------------------ */
/* Ganze Zeile klickbar, 44 px hoch, Kaestchen 20 px; vertikal per top-calc
   zentriert (kein transform — der Kern blendet den Punkt per scale ein). */
.answers-list.radio-list, .answers-list.checkbox-list, .answers-list { margin: 0; padding: 0; }
.answer-container li[class*="col"], .answer-container .answers-list > li { padding-inline: 0 !important; }
.answer-item .row { margin-inline: 0 !important; }
.answer-item.row, li.radio-text-item, li.checkbox-text-item { margin-inline: 0 !important; }
.othertext-label-checkox-container, .othertext-label-container { padding: 0 !important; }
.radio-item, .checkbox-item { margin: 0 !important; padding-left: 0 !important; position: relative; }
li.radio-item > label, .checkbox-item label:not(.ls-label-xs-visibility), li.radio-item label {
  display: flex !important;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: var(--sl-2) var(--sl-2) var(--sl-2) calc(20px + var(--sl-3)) !important;
  margin: 0;
  border-radius: var(--sl-radius-sm);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
}
.answers-list > li:hover > label, .answers-list .answer-item:hover > label,
.answers-list .answer-item .col-auto:hover > label { background: var(--color-grau-hell); }
li.radio-item label::before, .checkbox-item label:not(.ls-label-xs-visibility)::before {
  width: 20px !important; height: 20px !important;
  left: var(--sl-2) !important;
  margin-left: 0 !important;
  top: calc(50% - 10px) !important;
  border: 2px solid var(--sl-line-strong) !important;
  background-color: var(--color-weiss) !important;
  box-shadow: none !important;
}
.checkbox-item label::before { border-radius: var(--sl-radius-sm) !important; }
li.radio-item label::after {
  width: 10px !important; height: 10px !important;
  left: calc(var(--sl-2) + 5px) !important; margin-left: 0 !important;
  top: calc(50% - 5px) !important;
  background-color: var(--color-weiss) !important;
}
.checkbox-item label:not(.ls-label-xs-visibility)::after {
  left: var(--sl-2) !important; margin-left: 0 !important;
  width: 20px !important; height: 20px !important; padding: 0 !important;
  top: calc(50% - 10px) !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 12px !important;
}
.radio-item input[type="radio"]:checked + label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
  background-color: var(--color-blau) !important;
  border-color: var(--color-blau) !important;
}
.checkbox-item label::after { background-color: transparent !important; }   /* vanilla theme.css: label::after #337ab7 */
.checkbox-item input[type="checkbox"]:checked + label::after { color: var(--color-weiss) !important; background-color: var(--color-blau) !important; border-radius: var(--sl-radius-sm); }
.radio-item input:focus-visible + label::before,
.checkbox-item input:focus-visible + label::before {
  outline: 2px solid var(--color-blau) !important; outline-offset: 2px;
}
/* Variante mit sichtbarem Bootstrap-Input (Mehrfachauswahl mit Kommentar):
   gleiches Kaestchen wie ueberall, Input nur noch fuer Tastatur/Screenreader */
.answer-container .form-check { padding-left: 0; margin: 0 !important; min-height: 0; }
.checkbox-item > .form-check-input, .radio-item > .form-check-input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.checkbox-text-item, .radio-text-item { margin: 0 0 var(--sl-2) !important; }
.checkbox-text-item > .row { margin: 0 !important; align-items: center; }
.checkbox-text-item > .row > [class*="col"] { padding-inline: 0; margin-bottom: 0 !important; }
@media (min-width: 768px) { .checkbox-text-item > .row > [class*="col"] + [class*="col"] { padding-inline-start: var(--sl-3); } }
@media (max-width: 767.98px) { .checkbox-text-item > .row > [class*="col"] + [class*="col"] { padding-top: var(--sl-1); } }

/* Auswahllisten: nie schmaler als ihr Inhalt, nie breiter als 24rem */
.answer-container select.form-select, .answer-container select.form-control { width: 100%; max-width: 24rem; }

/* Zeilen mit Zusatzfeld ("Sonstiges:") */
.answer-item .row { --bs-gutter-x: var(--sl-3); align-items: center; }
.answer-item .row > [class*="col"] { padding-inline: 0; }
.answer-item .row > [class*="col"] + [class*="col"] { padding-inline-start: var(--sl-3); }

/* Horizontale Skalen (5-Punkte-Wahl): gleich breite Felder, umbrechend */
.list-group-horizontal { flex-wrap: wrap; gap: var(--sl-2); }
.list-group-horizontal > .radio-item { flex: 1 1 5rem; }
.list-group-horizontal > .radio-item > label {
  justify-content: flex-start; white-space: nowrap;
  padding: var(--sl-2) var(--sl-2) var(--sl-2) calc(20px + var(--sl-3)) !important;
  border: 1px solid var(--sl-line);
}

/* Bootstrap-Varianten (Ja/Nein, Geschlecht, Schalter) */
.form-check-input { border: 2px solid var(--sl-line-strong); }
.form-check-input:checked { background-color: var(--color-blau); border-color: var(--color-blau); }
.btn-check + .btn, .btn-group > .btn {
  border: 1px solid var(--sl-line-strong) !important;
  color: var(--color-text) !important;
  background: var(--color-weiss) !important;
  min-height: 48px;
}
.btn-group { gap: 0; flex-wrap: nowrap; max-width: 100%; }
.btn-group > .btn, .btn-group .ls-button-label { white-space: nowrap !important; margin-bottom: 0 !important; }
.btn-group > .btn { border-radius: 0 !important; white-space: nowrap; padding-inline: var(--sl-4); margin: 0 !important; }
.btn-group > .btn + .btn, .btn-group > .btn-check + .btn { margin-inline-start: -1px !important; }
.btn-group > .btn:first-of-type, .btn-group > :first-child + .btn { border-top-left-radius: var(--sl-pill) !important; border-bottom-left-radius: var(--sl-pill) !important; }
.btn-group > .btn:last-of-type, .btn-group > .btn:last-child { border-top-right-radius: var(--sl-pill) !important; border-bottom-right-radius: var(--sl-pill) !important; }
@media (max-width: 480px) {
  /* Segmente passen nicht in eine Zeile: einzelne Pillen, umbrechend */
  .btn-group { flex-wrap: wrap; gap: var(--sl-2); }
  .btn-group > .btn { flex: 1 1 auto; border-radius: var(--sl-pill) !important; margin: 0 !important; }
}
.btn-check:checked + .btn, .btn-check:active + .btn, .btn-group > .btn.active {
  background: var(--color-blau) !important;
  border-color: var(--color-blau) !important;
  color: var(--color-weiss) !important;
}

/* --- 9. Matrix-/Array-Fragen ---------------------------------------------- */
table, .table { --bs-table-color: var(--color-text); color: var(--color-text); }
table.ls-answers, .ls-answers.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--color-grau-hell);
  border-collapse: collapse;
  margin: 0;
}
table.ls-answers > :not(caption) > * > * { border-color: var(--sl-line); border-width: 0 0 1px !important; padding: var(--sl-2) var(--sl-2); }
table.ls-answers thead th, table.ls-answers thead td,
table.ls-answers .ls-heading th, table.ls-answers .ls-heading td {
  background: transparent !important;
  color: var(--sl-muted) !important;
  font-size: var(--sl-text-sm);
  font-weight: var(--weight-regular);
  border-bottom: 2px solid var(--sl-line) !important;
  vertical-align: bottom;
}
table.ls-answers tbody tr > * { background: transparent !important; }
table.ls-answers tbody tr:hover > * { background: var(--color-grau-hell) !important; }
table.ls-answers th.answertext, table.ls-answers .answertext { text-align: start; font-weight: var(--weight-regular); color: var(--color-text); }
table.ls-answers > :not(:first-child) { border-top: 0 !important; }
table.ls-answers, table.ls-answers tr, table.ls-answers thead, table.ls-answers tbody, table.ls-answers tfoot { border: 0 !important; }
.ls-table-wrapper { overflow-x: auto; }
table.ls-answers td.radio-item, table.ls-answers td.checkbox-item { padding-inline: 2px !important; }
table.ls-answers .answertextright { padding-inline: var(--sl-3) !important; color: var(--sl-muted); font-size: var(--sl-text-sm); }
/* Spaltenbreiten nach Inhalt statt LimeSurveys fester colgroup-Prozente */
@media (min-width: 768px) {
  table.ls-answers { table-layout: auto !important; width: 100%; }
  table.ls-answers col { width: auto !important; }
  table.ls-answers tbody th.answertext, table.ls-answers tbody td.answertext { min-width: 9rem; }
}   /* Bootstrap 5.0: 2px-Linie ueber tbody/thead */
table.ls-answers thead th, table.ls-answers .ls-heading th, table.ls-answers thead td {
  overflow-wrap: normal; word-break: normal; padding-inline: var(--sl-2) !important; text-align: center;
}
.answer-container:has(> table.ls-answers), .answer-container .no-more-tables { overflow-x: auto; }

/* Zellen mit Radio/Checkbox: Beschriftung ist nur auf dem Handy sichtbar
   (LimeSurvey: .ls-label-xs-visibility) — am Desktop nur das Kaestchen. */
@media (min-width: 768px) {
  table.ls-answers td.radio-item, table.ls-answers td.checkbox-item { text-align: center; vertical-align: middle; }
  table.ls-answers .ls-label-xs-visibility {
    display: block !important; position: relative;
    width: 44px; height: 44px; margin: 0 auto; padding: 0 !important;
    font-size: 0 !important; line-height: 0; color: transparent; overflow: hidden;
  }
  table.ls-answers .ls-label-xs-visibility::before {
    width: 20px !important; height: 20px !important; left: 12px !important; top: 12px !important; margin: 0 !important;
    border: 2px solid var(--sl-line-strong) !important; background-color: var(--color-weiss) !important; box-shadow: none !important;
  }
  table.ls-answers td.radio-item .ls-label-xs-visibility::after {
    width: 10px !important; height: 10px !important; left: 17px !important; top: 17px !important; margin: 0 !important;
    background-color: var(--color-weiss) !important;
  }
  table.ls-answers td.checkbox-item .ls-label-xs-visibility::after {
    width: 20px !important; height: 20px !important; left: 12px !important; top: 12px !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center; justify-content: center; font-size: 12px !important; line-height: 1;
  }
}
@media (max-width: 767.98px) {
  table.ls-answers td.radio-item .ls-label-xs-visibility,
  table.ls-answers td.checkbox-item .ls-label-xs-visibility {
    display: flex !important; align-items: center; min-height: 44px; width: 100%;
    padding: var(--sl-2) var(--sl-2) var(--sl-2) calc(20px + var(--sl-3)) !important; position: relative;
  }
  table.ls-answers .ls-label-xs-visibility::before { width: 20px !important; height: 20px !important; left: var(--sl-2) !important; top: calc(50% - 10px) !important; margin: 0 !important; border: 2px solid var(--sl-line-strong) !important; }
  table.ls-answers td.radio-item .ls-label-xs-visibility::after { width: 10px !important; height: 10px !important; left: calc(var(--sl-2) + 5px) !important; top: calc(50% - 5px) !important; margin: 0 !important; background-color: var(--color-weiss) !important; }
}
table.ls-answers td.radio-item input:checked + label::before,
table.ls-answers td.checkbox-item input:checked + label::before { background-color: var(--color-blau) !important; border-color: var(--color-blau) !important; }
table.ls-answers td.checkbox-item input:checked + label::after { color: var(--color-weiss) !important; }

/* Ranking, Slider, Tooltip */
.sortable-list, .list-group-item, .sortable-item { border-color: var(--sl-line) !important; color: var(--color-text); }
.sortable-item, .list-group-item { background: var(--color-weiss); }
.list-group-item:first-child { border-top-left-radius: var(--sl-radius-sm); border-top-right-radius: var(--sl-radius-sm); }
.list-group-item:last-child { border-bottom-left-radius: var(--sl-radius-sm); border-bottom-right-radius: var(--sl-radius-sm); }
.slider-handle { background: var(--color-blau) !important; background-image: none !important; box-shadow: none !important; }
.slider-selection { background: var(--color-blau-hell) !important; background-image: none !important; box-shadow: none !important; }
.slider-track { background: var(--sl-line) !important; background-image: none !important; box-shadow: none !important; }
.tooltip-inner { background: var(--color-text); color: var(--color-weiss); font-family: var(--font-sans); }

/* --- 10. Buttons ----------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  border-radius: var(--sl-pill) !important;
  box-shadow: none !important;
  min-height: 48px;
  padding: var(--sl-2) var(--sl-4);
  text-transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sl-2);
}
.btn-primary, .btn-primary:visited {
  background: var(--color-blau) !important;
  border: 2px solid var(--color-blau) !important;
  color: var(--color-weiss) !important;
}
.btn-primary:hover, .btn-primary:active {
  background: #0B2F94 !important;                   /* check-style: ignore — Hover-Ton von Leipzig Blau */
  border-color: #0B2F94 !important;                 /* check-style: ignore — Hover-Ton von Leipzig Blau */
  color: var(--color-weiss) !important;
}
.btn-outline-secondary, .btn-secondary, .btn-default, .btn-outline-primary, .btn-outline-dark {
  background: var(--color-weiss) !important;
  border: 2px solid var(--sl-line-strong) !important;
  color: var(--color-text) !important;
}
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-default:hover, .btn-outline-primary:hover, .btn-outline-dark:hover {
  border-color: var(--color-text) !important;
  background: var(--color-weiss) !important;
  color: var(--color-text) !important;
}
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Navigation Zurueck / Weiter */
#navigator-container.navigator {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sl-3);
  margin: var(--sl-5) 0 0 !important; padding: 0 !important;
}
#navigator-container > [class*="col-"] { flex: 0 1 auto; width: auto; max-width: none; }
#navigator-container > .text-end { margin-inline-start: auto; }
#navigator-container .btn { min-width: 10rem; font-size: var(--sl-text); }
#ls-button-submit::after { content: "\2192"; font-size: 1.1em; line-height: 1; }  /* Pfeil nach rechts */
#ls-button-previous::before { content: "\2190"; font-size: 1.1em; line-height: 1; }
@media (max-width: 480px) {
  #navigator-container > [class*="col-"] { flex: 1 1 0; }
  #navigator-container .btn { min-width: 0; width: 100%; }
}

/* --- 11. Meldungen, Dialog, Fragenindex ----------------------------------- */
.alert {
  border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
  border-inline-start: 4px solid var(--color-blau);
  color: var(--color-text); background: var(--color-weiss);
  padding: var(--sl-3) var(--sl-4);
}
.alert-danger { border-inline-start-color: var(--color-porphyr); }
.alert a { color: var(--color-link); }
.bg-warning, .list-group-item-warning { background: var(--color-grau-hell) !important; color: var(--color-text) !important; }
.modal-content {
  border: 0; border-radius: var(--sl-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);        /* check-style: ignore — Dialog hebt sich ab */
  font-family: var(--font-sans);
}
.modal-header, .modal-footer { border-color: var(--sl-line); padding: var(--sl-3) var(--sl-4); }
.modal-body { padding: var(--sl-4); }
.modal-backdrop.show { opacity: 0.4; }
.index-item-current, .index-item-current a { font-weight: var(--weight-bold); }

/* --- 12. Startseite (layout_survey_list.twig) ----------------------------- */
.sl-list { padding: 0; margin: 0 !important; }
.sl-list .sl-wrap { max-width: calc(var(--sl-max-wide) + 2 * var(--sl-gutter)); }
.sl-hero { background: var(--color-blau); color: var(--color-weiss); padding-block: var(--sl-6); }
.sl-hero h1 { color: var(--color-weiss); font-size: var(--sl-text-h1); max-width: 20em; }
.sl-list__body { padding-block: var(--sl-5) var(--sl-6); }
.sl-list__lang { margin-bottom: var(--sl-4); max-width: 20rem; }
.sl-list__heading { font-size: var(--sl-text-h2); margin: 0 0 var(--sl-3); }
.sl-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--sl-3);
  margin: 0 0 var(--sl-5);
  padding: 0;
}
.sl-card-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sl-3);
  height: 100%; min-height: 88px;
  padding: var(--sl-4);
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  color: var(--color-text) !important;
  text-decoration: none;
  font-size: var(--sl-text-q);
  line-height: var(--leading-snug);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.sl-card-link:hover {
  border-color: var(--color-blau);
  box-shadow: 0 4px 16px rgba(14, 58, 182, 0.12);   /* check-style: ignore — Hover-Rueckmeldung der Karte */
  color: var(--color-text) !important;
}
.sl-card-link:hover .sl-card-link__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.sl-card-link__arrow { flex: none; color: var(--color-blau); transition: transform var(--duration-fast); }
.sl-card-link:hover .sl-card-link__arrow { transform: translateX(4px); }
.sl-list__contact, .sl-list__empty { color: var(--sl-muted); font-size: var(--sl-text); }

/* --- 13. Fusszeile --------------------------------------------------------- */
.sl-footer {
  background: var(--color-weiss);
  border-top: 1px solid var(--sl-line);
  padding-block: var(--sl-4);
  font-size: var(--sl-text-sm);
  color: var(--sl-muted);
}
.sl-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sl-2) var(--sl-4); }
.sl-footer p { margin: 0; }
.sl-footer__links { display: flex; flex-wrap: wrap; gap: var(--sl-4); }
.sl-footer__links:empty { display: none; }
.sl-footer a { color: var(--color-text); display: inline-flex; align-items: center; min-height: 44px; }
body:has(.sl-list) .sl-footer .sl-wrap,
body:has(.sl-list) #survey-nav .sl-wrap { max-width: calc(var(--sl-max-wide) + 2 * var(--sl-gutter)); }

/* --- 14. Fokus (zuletzt, damit er .btn { box-shadow: none } schlaegt) ---- */
a:focus-visible, button:focus-visible, .btn.btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-blau) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-weiss) !important;
}