/*
 * Seezeit · Formularelemente (Paket 1.4).
 *
 * Antwortflächen (Knopfliste "bootstrap_buttons", Ja/Nein und Geschlecht, Radio- und Checkbox-Liste), Auswahlmarker,
 * "Keine Antwort", Eingabefelder, Pflichthinweis, Fehler und Abstände einer Frage. Die Matrix steht in seezeit-matrix.css und
 * benutzt den Marker und die Zustände aus dieser Datei. Seit Paket M1+ (Abschnitte 8 bis 12 unten): Bildauswahl, Dropdown (nativ und
 * bootstrap-select), Datum samt Auswahlfenster, Zahl mit Präfix und Suffix (und Farben des Schiebereglers), Mehrfach-Kurztext.
 *
 * Quellen: BRIEF.md 3 (Gewählte Antwort, "Keine Antwort", Freitext, Pflicht und Fehler, Kein enges Umbrechen),
 * KOMPONENTEN.md 8 (Auswahlzeile, Textfeld), KNOEPFE.md 3 (Fokus). Farben nur als Rollen-Tokens der Variante.
 *
 * Spezifität: Die Regeln beginnen mit "#dynamicReloadContainer .question-container" (ID: schlägt jede Regel des
 * Elternthemes, auch ".btn-check:checked + .btn-primary:focus" mit 0,4,0, ohne !important). Alles Weitere steht in
 * ":where()", zählt also nicht zur Spezifität; so bleiben die Zustandsregeln darunter vorhersagbar.
 *
 * Aufbau jeder Auswahlfläche: ein verstecktes <input> (Radio bzw. Checkbox), direkt dahinter das <label>. Das Label ist die
 * Fläche und trägt den Marker (::before = Rahmen, ::after = Punkt bzw. Haken). Zustände kommen allein aus :checked,
 * :hover, :focus-visible, :active und :disabled des Eingabefelds; die Klasse .active des Elternthemes wird nicht gebraucht.
 *
 * Welche Eingabefelder gemeint sind (in jeder Regel dieselbe Liste in :where()):
 *   .btn-check                                     Knopfliste, Mehrfachauswahl als Knöpfe, Ja/Nein, Geschlecht
 *   .radio-item input[type="radio"]                Radio-Liste, "Sonstiges", Listen mit Kommentar und die Zellen der Matrix
 *   .checkbox-item input[type="checkbox"]          Checkbox-Liste und "Sonstiges" (nicht in Tabellenzellen)
 * Ausgenommen sind die Bildauswahl-Fragethemes (Klasse imageselect…): Sie zeichnen ihre Auswahl selbst.
 */

/* ========================================================================== 0 Beschriftungen der Felder */
/* Beschriftungen innerhalb einer Frage (Kommentarfeld, "Sonstiges", Zeitangaben): Schriftgröße der Seite und Zeilenhöhe 1,5. Das
   Elterntheme setzt 18 px und eine feste Zeilenhöhe von 20 px; bei großem Textzoom überlagerten sich dadurch die Zeilen einer
   mehrzeiligen Beschriftung (gemessen bei 200 % und 320 px). Die Antwortflächen (1) setzen ihre Größen selbst, weiter unten. */
#dynamicReloadContainer .question-container label {
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
}

/* ========================================================================== 1 Auswahlfläche */
/* Fläche einer Antwort: weiß, 1 px Eingabekontur, 4 px Radius, mindestens 48 px hoch, ganze Fläche klickbar.
   Der Text steht in einem einspaltigen Raster mit minmax(0, 1fr): Normale Wörter brechen nie mitten im Wort, wenn die
   Spalte breit genug ist (siehe 3); ein überlanges Wort bricht notfalls, statt aus der Fläche zu ragen. */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"], td > input)
) + label {
  /* Maße der Fläche; die Matrix setzt eigene Werte */
  --sz-pad-x: 16px; /* in px, siehe seezeit-basis.css: das Polster nimmt der Schrift bei großem Textzoom nicht den Platz */
  --sz-gap: 12px;
  --sz-mark-cx: calc(var(--sz-pad-x) + var(--sz-marker) / 2); /* waagerechte Mitte des Markers */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  width: 100%;
  min-height: var(--sz-tile-h);
  margin: 0;
  padding: var(--sz-tile-pad-y) var(--sz-pad-x) var(--sz-tile-pad-y) calc(var(--sz-pad-x) + var(--sz-marker) + var(--sz-gap));
  font-size: var(--sz-tile-fs, var(--kern-font-size-16));
  /* Gewicht 400 für alle Antworten (Paket 1.5d, BRIEF.md 3, "Gewichte seit 04.10."; bis 1.5c 500): Knöpfe, Listen, Matrix-Skalenlabels und
     "Keine Antwort"; Fragetitel (600) und Teilfragen der Matrix (600) tragen die Hierarchie. Die gewählte Fläche behält das Gewicht. */
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  /* ausgewogener Umbruch (Paket 1.5b, Typografie V7): kein einzelnes Wort ("zu") in der letzten Zeile von "stimme überhaupt nicht zu";
     Größe, Gewicht und Silbentrennung ändern sich nicht, Browser ohne Unterstützung ignorieren die Angabe */
  text-wrap: balance;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-l);
  box-shadow: none;
  cursor: pointer;
  /* kein Grau-Blitz des Browsers beim Tippen; die Rückmeldung gibt der gedrückte Zustand (Neutral-100) */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
/* Hilfssymbole in der Beschriftung: die leere Marke in "Keine Antwort" der Knopfliste und die Bildzeichen von Ja/Nein und
   Geschlecht (Remix Icon, aria-hidden) nehmen keinen Platz; der Marker ersetzt sie */
#dynamicReloadContainer .question-container .btn-check + label > :is(span[aria-hidden="true"]:empty, .ls-icon) {
  display: none;
}

/* Hover (nur mit Maus; auf Touchgeräten bleibt Hover nach dem Tippen sonst hängen), gedrückt */
@media (hover: hover) {
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"], td > input)
  ):not(:disabled) + label:hover {
    background-color: var(--kern-color-neutral-050);
  }
}
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"], td > input)
):not(:disabled) + label:active {
  background-color: var(--kern-color-neutral-100);
}

/* Gewählt: dunkelblaue Kontur (2 px wirksam, ohne die Größe zu ändern), leichte Neutralfläche. Die Beschriftung bleibt
   Dunkelblau und im selben Gewicht, damit nichts springt. Der orange Marker steht in 2. */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"], td > input)
):checked + label {
  background-color: var(--kern-color-neutral-050);
  border-color: var(--kern-color-action-default);
  box-shadow: inset 0 0 0 1px var(--kern-color-action-default);
}
/* Fokus: Ring um die ganze Antwortzeile. Er liegt außen (3 px, Abstand 2 px) und ist nirgends beschnitten, weil kein Vorfahre
   überläuft; die Eingabefelder selbst sind unsichtbar und tragen keinen Ring.

   Eingabefeld und Fläche (Paket 1.5e, Fehler "Seitensprung beim Klick"): Das unsichtbare Eingabefeld deckt seine Antwortfläche ab.
   Warum: Ein Klick auf das Label fokussiert das Eingabefeld, und der Browser scrollt das Feld ins Bild. Das Feld war 1 x 1 bis 17 x 17 px
   groß und saß am oberen linken Rand der Fläche (bei Ja/Nein und Geschlecht am Rand der ganzen Gruppe). Lag die Fläche am Fensterrand
   oder ragte sie heraus, lag das Feld außerhalb, und der Browser rückte es in die Mitte: ein Sprung. Bis 1.5d verhinderte das ein
   Scroll-Rand von 200vh am Feld (Chromium scrollt nicht, wenn das Ziel das Fenster ganz abdeckt). Firefox (157) scrollte dagegen bei
   jedem Klick (gemessen mit echten Mausereignissen: 42 von 42 Klicks, bis 863 px, hoch und runter; ohne den Rand 0 von 28). Der Kniff
   ist entfernt. Jetzt hat das Feld die Größe der Fläche: Es liegt im nächsten positionierten
   Vorfahren (li, td, div.checkbox-item, bei den Knöpfen .form-check, bei Ja/Nein und Geschlecht die Gruppe) und füllt ihn (inset: 0).
   Ist die Fläche im Fenster, ist es das Feld auch, und kein Browser scrollt beim Klick; es bleibt unsichtbar (opacity) und nimmt keine
   Mausereignisse an (pointer-events: none), die Beschriftung bleibt das Ziel des Klicks.
   Tastaturfokus (:focus-visible): 8 px Scroll-Rand, damit auch der Ring (3 px plus 2 px Abstand) ins Fenster kommt; mehr Reserve braucht es
   nicht, weil das Feld die ganze Fläche deckt (bis 1.5d: 7,5 rem Reserve für ein 17-px-Feld am oberen Rand). */
#dynamicReloadContainer .question-container .form-check:has(> .btn-check) {
  position: relative;
}
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  clip: auto;
  pointer-events: none;
  scroll-margin: 0;
}
/* Bootstrap-Hilfsklasse .visually-hidden (Knopfliste mit Einfachauswahl) setzt Größe, Rand und Beschnitt mit !important: nur hier nötig */
#dynamicReloadContainer .question-container .btn-check.visually-hidden {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  clip: auto !important;
}
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
):focus-visible {
  outline: none;
  scroll-margin: var(--kern-space-8);
}
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
):focus-visible + label {
  outline: 3px solid var(--kern-color-action-default);
  outline-offset: 2px;
}
/* deaktiviert: Neutralfläche, gedämpfte Schrift, kein Zeiger */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"], td > input)
):disabled + label {
  color: var(--kern-color-layout-text-muted);
  background-color: var(--kern-color-neutral-100);
  border-color: var(--kern-color-neutral-200);
  box-shadow: none;
  cursor: not-allowed;
}

/* ========================================================================== 2 Auswahlmarker */
/* Rund bei Einfachauswahl, eckig bei Mehrfachauswahl (Form folgt dem Typ des Eingabefelds). Rahmen 2 px, 20 px groß.
   Gewählt: oranger Marker (Rolle "Auswahlmarker") mit dunkelblauer Kontur und dunkelblauem Zustandssymbol (Punkt bzw.
   Haken); so bleibt der Zustand auch ohne Farbwahrnehmung erkennbar (Kriterium 7, Kontrast Dunkelblau auf Weiß 16:1). */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
) + label::before {
  content: "";
  position: absolute;
  left: var(--sz-mark-cx);
  top: 50%;
  display: block;
  width: var(--sz-marker);
  height: var(--sz-marker);
  margin: 0;
  padding: 0;
  background-color: var(--color-surface-active);
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
#dynamicReloadContainer .question-container :where(
  .btn-check[type="checkbox"],
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
) + label::before {
  border-radius: var(--kern-radius-m);
}
/* Punkt (Einfachauswahl): erscheint mit ruhigem ease-out; das Elterntheme überschwingt (cubic-bezier mit negativen Werten) */
#dynamicReloadContainer .question-container :where(
  .btn-check[type="radio"],
  .radio-item input[type="radio"]:not([class*="imageselect"])
) + label::after {
  content: "";
  position: absolute;
  left: var(--sz-mark-cx);
  top: 50%;
  display: block;
  width: var(--sz-dot);
  height: var(--sz-dot);
  margin: 0;
  padding: 0;
  background-color: var(--color-action-on-indicator);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease-out;
}
/* Haken (Mehrfachauswahl, Paket 1.5c): ein Zeichen der Schrift Remix Icon, dunkelblau auf dem orangen Marker. Welches, bestimmt die
   Theme-Option "Check icon" (seit 1.5d nur "Check" = Vorgabe; die gefüllten Zeichen "Check circle" und "Check square" deckten den Marker
   zu und werden nicht mehr angeboten, config.xml): Das Elterntheme schreibt sie als Inline-Style
   ("label::after { content: ... }", Spezifität 0,3,3) für die Auswahlzeilen .checkbox-item. Bis Paket 1.5b zeichnete dieses Theme den
   Haken aus Rändern und setzte "content: ''" mit Vorrang (ID in der Regel); damit hatte die Option keine Wirkung. Jetzt steht hier nur
   die Gestalt des Zeichens; sein Vorgabewert (Remix "check-fill", \eb7a, derselbe wie die Vorgabe der Option) steht in einer Regel ohne
   Spezifität (":where()") weiter unten und weicht dem Wert der Option. Die Knopfliste (.btn-check) kennt die Option des Elternthemes
   nicht und zeigt immer den Vorgabewert. Der Haken erscheint wie der Punkt der Einfachauswahl mit einem ruhigen ease-out aus dem Nichts. */
#dynamicReloadContainer .question-container :where(
  .btn-check[type="checkbox"],
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
) + label::after {
  position: absolute;
  left: var(--sz-mark-cx);
  top: 50%;
  display: block;
  margin: 0;
  padding: 0;
  font-family: "remixicon";
  font-size: var(--sz-marker);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: var(--color-action-on-indicator);
  background: none;
  border: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease-out;
}
:where(#dynamicReloadContainer .question-container .btn-check[type="checkbox"],
  #dynamicReloadContainer .question-container .checkbox-item input[type="checkbox"]:not([class*="imageselect"])) + label::after {
  content: "\eb7a";
}
/* gewählt: oranger Marker mit dunkelblauer Kontur, Symbol sichtbar */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
):checked + label::before {
  background-color: var(--color-action-indicator);
  border-color: var(--kern-color-action-default);
}
#dynamicReloadContainer .question-container :where(
  .btn-check[type="radio"],
  .radio-item input[type="radio"]:not([class*="imageselect"])
):checked + label::after {
  transform: translate(-50%, -50%) scale(1);
}
#dynamicReloadContainer .question-container :where(
  .btn-check[type="checkbox"],
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
):checked + label::after {
  transform: translate(-50%, -50%) scale(1);
}
/* Hover: dunkelblauer Rahmen am Marker (nur mit Maus) */
@media (hover: hover) {
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ):not(:disabled) + label:hover::before {
    border-color: var(--kern-color-action-default);
  }
}
/* deaktiviert */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"]),
  .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
):disabled + label::before {
  background-color: var(--kern-color-neutral-100);
  border-color: var(--kern-color-neutral-200);
}

/* "Keine Antwort" (Wert leer): LimeSurvey wählt sie bei freiwilligen Fragen von sich aus vor. Das darf nicht wie eine gegebene
   Antwort aussehen (Kriterium 13, ENTSCHEIDUNGEN 02.10.). Ausgewählt ist sie deshalb neutral: dunkelblauer Punkt auf weißem
   Marker, normale 1-px-Kontur, kein Orange. */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"])
)[value=""]:checked + label::before {
  background-color: var(--color-surface-active);
  border-color: var(--kern-color-action-default);
}
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"])
)[value=""]:checked + label {
  border-color: var(--color-input-border);
  box-shadow: none;
}

/* Windows-Kontrastmodus (forced-colors): Das System ersetzt Hintergrundfarben, Punkt und Marker-Füllung würden verschwinden, und
   der Zustand wäre nicht mehr zu sehen. Mit Systemfarben bleibt er sichtbar: gewählter Marker in der Hervorhebungsfarbe, Punkt
   und Haken in der dazugehörigen Textfarbe; "Keine Antwort" bleibt neutral (Seitenfläche, Punkt in der Textfarbe). */
@media (forced-colors: active) {
  #dynamicReloadContainer .question-container :where(
    .btn-check[type="radio"],
    .radio-item input[type="radio"]:not([class*="imageselect"])
  ):checked + label::after {
    forced-color-adjust: none;
    background-color: HighlightText;
  }
  #dynamicReloadContainer .question-container :where(
    .btn-check[type="checkbox"],
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ):checked + label::after {
    forced-color-adjust: none;
    color: HighlightText;
  }
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ):checked + label::before {
    forced-color-adjust: none;
    background-color: Highlight;
    border-color: CanvasText;
  }
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"])
  )[value=""]:checked + label::before {
    background-color: Canvas;
  }
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"])
  )[value=""]:checked + label::after {
    background-color: CanvasText;
  }
}

/* Bewegung nur, wo sie etwas bedeutet; wer sie abgeschaltet hat, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ) + label,
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ) + label::before,
  #dynamicReloadContainer .question-container :where(
    .btn-check,
    .radio-item input[type="radio"]:not([class*="imageselect"]),
    .checkbox-item input[type="checkbox"]:not([class*="imageselect"])
  ) + label::after {
    transition: none;
  }
}

/* ========================================================================== 3 Anordnung der Antworten */
/* Knopfliste und Ja/Nein, Geschlecht: Spalten richten sich nach dem Inhalt. Jede Spalte ist mindestens 12 rem breit (wächst mit
   dem Textzoom), die Zeile füllt die Breite; so steht kein Wort der Beschriftung in einer zu schmalen Spalte ("CampusCa-fé",
   "Vegetaris-ch"). Auf dem Handy (bis 550 px) steht eine Antwort je Zeile in voller Breite. */
#dynamicReloadContainer .question-container :is([data-bs-toggle="buttons"], .btn-group:is(.yesno-button, .gender-button)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sz-answer-col)), 1fr));
  gap: var(--sz-answer-gap);
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container :is([data-bs-toggle="buttons"], .btn-group:is(.yesno-button, .gender-button)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* die Elemente des Rasters: Breite bestimmt die Spalte (Bootstrap setzt .col-md-2 = 16,7 %); alle Flächen einer Zeile gleich hoch */
#dynamicReloadContainer .question-container [data-bs-toggle="buttons"] > .bootstrap-buttons-div {
  display: grid;
  width: auto;
  max-width: none;
  min-width: 0;
}
#dynamicReloadContainer .question-container [data-bs-toggle="buttons"] .form-check {
  display: grid;
}
#dynamicReloadContainer .question-container [data-bs-toggle="buttons"] .bootstrap-buttons-div,
#dynamicReloadContainer .question-container [data-bs-toggle="buttons"] .form-check {
  min-height: 0;
  margin: 0;
  padding: 0;
}
/* Ja/Nein und Geschlecht: die Knöpfe sind Geschwister des Eingabefelds; LimeSurvey gibt ihnen .mb-3 (Bootstrap-Utility mit
   !important) und die Gruppe rundet nur die äußeren Ecken. Im Raster sorgt allein der Abstand für Luft. */
#dynamicReloadContainer .question-container .btn-group:is(.yesno-button, .gender-button) > label.btn {
  margin: 0 !important;
}

/* Radio- und Checkbox-Liste: eine Spalte auf dem Handy, sonst Spalten ab 20 rem. Die Listeneinträge brauchen weder den Einzug
   (20 px) noch den Abstand (1 em) des Elternthemes. Gilt für ul.answers-list und für die Liste in "Liste mit Kommentar"
   (.answers-list > ul). Die Bildauswahl (image_select) behält ihr eigenes Aussehen. */
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):not(:has(> .imageselect-listitem)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--sz-answer-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):not(:has(> .imageselect-listitem)) > li {
  min-width: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):not(:has(> .imageselect-listitem)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Einzug des Elternthemes (.checkbox-item { padding-left: 20px }): Die Fläche trägt den Marker selbst */
#dynamicReloadContainer .question-container .checkbox-item:not(td, .imageselect-listitem) {
  padding-left: 0;
}
/* Checkbox-Zeile: LimeSurvey schachtelt die Fläche in .row > .col-auto; die Fläche soll die ganze Zelle füllen */
#dynamicReloadContainer .question-container li.checkbox-item:not(.imageselect-listitem) > .row {
  margin: 0;
}
#dynamicReloadContainer .question-container li.checkbox-item:not(.imageselect-listitem) > .row > .col-auto {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
/* "Liste mit Kommentar": Antworten links, Kommentarfeld rechts, mit Abstand (das Elterntheme setzt hier keinen) */
@media (min-width: 768px) {
  #dynamicReloadContainer .question-container .ls-answers.row > .text-item.col-md-6 {
    padding-left: var(--kern-space-16);
  }
}
/* "Sonstiges" und Kommentar bei Mehrfachauswahl (li.checkbox-text-item): Fläche und Feld nebeneinander in den Spalten des
   Elterntheme (col-md-4 und col-md-8 bzw. col-auto und col), bei wenig Platz untereinander; 8 px Abstand zwischen den Spalten */
#dynamicReloadContainer .question-container li.checkbox-text-item > .row {
  --bs-gutter-x: var(--kern-space-8);
}
#dynamicReloadContainer .question-container li.checkbox-text-item .form-check {
  padding-left: 0;
}
#dynamicReloadContainer .question-container li.checkbox-text-item > .row > .col-auto {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
#dynamicReloadContainer .question-container li.checkbox-text-item > .row > .col {
  flex: 1 1 14rem;
  min-width: 0;
}
/* "Sonstiges" bei der Radio-Liste (li.radio-text-item ist selbst die Zeile): Fläche und Feld nebeneinander, bei wenig Platz untereinander */
#dynamicReloadContainer .question-container li.radio-text-item {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kern-space-8);
  align-items: stretch;
}
#dynamicReloadContainer .question-container li.radio-text-item > .col-auto {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  padding: 0;
}
#dynamicReloadContainer .question-container li.radio-text-item > .col {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0;
}

/* ========================================================================== 4 "Keine Antwort" */
/* Kompakt und eng an der eigenen Frage, ohne Trennlinie (BRIEF.md 3, "Keine Antwort"; Rückmeldung der nutzenden Person vom 03.10.:
   Die Linie schob die Option optisch zur nächsten Frage). Sie steht als letzte Zeile unter den Antworten, 8 px darunter (der
   Zeilenabstand des Rasters), mindestens 44 px hoch und zurückhaltender als die Skalenoptionen (14 px, Gewicht 400, Meta-Größe).
   Dass sie zur eigenen Frage gehört, zeigt der Abstand: 8 px zur Skala, 48 px bis zur nächsten Frage (seezeit-basis.css).
   Das Element spannt alle Spalten (eigene Zeile, nie als eine Stufe der Skala), die Fläche selbst steht in der ersten Spalte
   (subgrid) und ist so breit wie die anderen; ohne subgrid ist sie so breit wie die Zeile. Die Knopfliste braucht :has(), um das
   Element zu finden; ohne :has() bleibt die Option eine Fläche im Raster wie die anderen. Zwei getrennte Regeln, damit ein
   Browser ohne :has() die Regel für die Listen trotzdem anwendet. Bei Ja/Nein und Geschlecht ist "Keine Antwort" der letzte
   Knopf der Gruppe ohne eigenes Element, ebenfalls 8 px unter dem Vorgänger (Zeilenabstand). In der Matrix gilt dasselbe je
   Teilfrage (seezeit-matrix.css); die Tabelle ab Tablet behält die eigene Spalte. */
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul) > li:is(.no-anwser-item, .noanswer-item):not(.imageselect-listitem ~ li) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#dynamicReloadContainer .question-container [data-bs-toggle="buttons"] > .bootstrap-buttons-div:has(> .form-check > .btn-check[value=""]) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* LimeSurvey gibt der Zeile .mb-3 (Bootstrap-Utility, !important): im Raster sorgt allein der Zeilenabstand für die 8 px */
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul) > li:is(.no-anwser-item, .noanswer-item):not(.imageselect-listitem ~ li) {
  margin-bottom: 0 !important;
}
/* die Fläche selbst: 44 px hoch (Bedienziel; eine Zeile 14 px: 10 px Polster oben und unten, 1 px Kontur, Zeilenhöhe 1,4), 14 px,
   Gewicht 400. Seitenpolster, Kontur und Zustände wie bei den anderen Flächen; die Matrix-Tabelle ab Tablet setzt eigene Maße
   (seezeit-matrix.css, höhere Spezifität). */
#dynamicReloadContainer .question-container :where(
  .btn-check,
  .radio-item input[type="radio"]:not([class*="imageselect"])
)[value=""] + label {
  --sz-tile-fs: var(--kern-font-size-14);
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
  /* Beschriftung in der Meta-Farbe #486a7c (Paket 1.5b, Typografie V11; Kontrast 5,21 : 1 auf der Neutralfläche, 5,79 : 1 auf Weiß):
     zurückhaltender als die Skalenoptionen (BRIEF.md 3). Der Punkt bleibt Dunkelblau. Risiko: Im vorgewählten Zustand (graue Fläche,
     gedämpfter Text) könnte sie auf einem echten Gerät deaktiviert wirken; Prüfung auf Stufe 4 offen. Die deaktivierte Fläche ist
     zusätzlich grau mit hellerer Kontur und ohne Zeiger. */
  color: var(--kern-color-layout-text-muted);
}

/* ========================================================================== 5 Eingabefelder */
/* Textfeld (Typ S einzeilig, mindestens 48 px), Textbereich (Typ T und U, mindestens vier Zeilen) und Auswahlliste: Weiß,
   1 px Eingabekontur #486a7c, 4 px Radius, Polster 12 px, 16 px Schrift (KOMPONENTEN.md 8). Der Fokus kommt allein über den
   Ring (:root :focus-visible), kein Konturwechsel und kein Bootstrap-Schein. Ausgenommen ist die Hülle des Fragethemes
   bootstrap_dropdown (.bootstrap-select hat zusätzlich .form-control, trägt aber keinen Rahmen; der Rahmen gehört ihrem Knopf).
   Seit Paket 1.5 gelten die Felder in der ganzen Karte (#main-col): auch die Seiten zum Zwischenspeichern, Laden, für den Zugangscode
   und die Registrierung haben dieselbe Fläche wie die Freitextfelder der Fragen (das Elterntheme setzt 2 px Kontur, 14 px Schrift, 44 px
   Höhe). ":where()" zählt nicht zur Spezifität: Die Zustandsregeln der Fragen (z. B. Fehler, 1,3,0) bleiben stärker. */
#dynamicReloadContainer :where(.question-container, #main-col) .form-control:not(.bootstrap-select),
#dynamicReloadContainer :where(.question-container, #main-col) .form-select {
  min-height: var(--sz-answer-h);
  padding: var(--kern-space-12);
  font-family: inherit;
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-l);
  box-shadow: none;
}
#dynamicReloadContainer :where(.question-container, #main-col) .form-select {
  padding-right: 2.5rem; /* Platz für den Pfeil */
}
#dynamicReloadContainer :where(.question-container, #main-col) textarea.form-control {
  /* vier Zeilen plus Polster und Rahmen */
  min-height: calc(4 * 1.5rem + 2 * var(--kern-space-12) + 2px);
  resize: vertical;
}
#dynamicReloadContainer :where(.question-container, #main-col) .form-control:not(.bootstrap-select)::placeholder {
  color: var(--kern-color-layout-text-muted);
  opacity: 1;
}
#dynamicReloadContainer :where(.question-container, #main-col) :is(.form-control:not(.bootstrap-select), .form-select):is(:disabled, [readonly]) {
  color: var(--kern-color-layout-text-muted);
  background-color: var(--kern-color-neutral-100);
  border-color: var(--kern-color-neutral-200);
  cursor: not-allowed;
}
/* Feld mit Fehler: rote Kontur (2 px wirksam); die Meldung darüber trägt Text und Symbol */
#dynamicReloadContainer .question-container.input-error :is(.form-control:not(.bootstrap-select), .form-select) {
  border-color: var(--kern-color-feedback-danger);
  box-shadow: inset 0 0 0 1px var(--kern-color-feedback-danger);
}

/* ========================================================================== 6 Pflicht, Hinweise, Fehler, Abstände */
/* Pflichthinweis: dunkelblauer, fetter Text (14 px) mit Symbol, nicht nur ein Sternchen (BRIEF.md 3, U14). Der Text kommt
   aus dem title des Sternchens, den LimeSurvey in der Umfragesprache liefert ("(Dies ist eine Pflichtfrage.)"); so
   braucht es keine Twig-Überschreibung und keinen festen Wortlaut im CSS. Das Sternchen-Symbol ist die Schrift Remix Icon.
   Reihenfolge (Paket 1.5b, Typografie V6): Der Titel steht zuerst, darunter die Kleinzeilen im Abstand 4 px (Pflicht, dann Hilfe oder
   Prüfhinweis, dann Fehler), 12 px bis zu den Antworten. Im Markup steht das Sternchen (<i class="asterisk">) vor dem Fragetext; ohne
   Twig geht das nur über die sichtbare Reihenfolge: Der Titelbehälter ist eine Spalte, das Sternchen bekommt order 2. Das Markup und
   die Vorlesereihenfolge bleiben (das Element ist nicht fokussierbar). Ist Hilfe, ein Hinweis oder eine Meldung da, beträgt der
   Abstand unter dem Titelbehälter 4 px (die Meldungen tragen ihren Abstand nach unten selbst); sonst bleibt es bei 12 px (Basis).
   Ohne :has() bleiben 12 px. Das Gleiche für eine Matrixfrage: 16 px bis zur ersten Teilfrage (seezeit-matrix.css).
   Die Hilfe zählt nur, wenn sie direkt unter dem Titel steht (Theme-Option "Question help text position" = oben, Paket 1.5c). Steht sie
   unten (nach den Antworten), gelten die 12 px bzw. 16 px zwischen Titel und Antworten; sie bekommt dort 12 px Abstand nach oben
   (seezeit-basis.css, Abschnitt 2). */
#dynamicReloadContainer .question-container .question-title-container {
  display: flex;
  flex-direction: column;
}
#dynamicReloadContainer .question-container .question-title-container:has(+ .question-help-container:not(.d-none), ~ .question-valid-container > *) {
  margin-bottom: var(--kern-space-4);
}
.question-container .question-title-container > .asterisk {
  order: 2;
  display: block;
  margin: var(--kern-space-4) 0 0;
  font-size: var(--kern-font-size-14);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
  vertical-align: baseline;
}
.question-container .question-title-container > .asterisk::after {
  content: attr(title);
  margin-left: var(--kern-space-4);
  font-family: var(--font-family-active);
  font-weight: 700;
  letter-spacing: normal;
}

/* Absätze im Fragetext: kein Abstand nach dem letzten Absatz (Bootstrap setzt 1 rem). Der Abstand zwischen Titel und
   Antworten soll allein aus der Abstandsskala kommen (12 px). */
.question-container .question-text p:last-child {
  margin-bottom: 0;
}

/* Meldungen an der Frage: Abstand erst, wenn eine Meldung da ist (ein leerer Behälter verbraucht keinen Platz) */
#dynamicReloadContainer .question-container .question-valid-container {
  margin: 0;
}
#dynamicReloadContainer .question-container .question-valid-container > * {
  margin: 0 0 var(--kern-space-12);
}
/* Prüfhinweise von LimeSurvey (z. B. "Bitte wähle eine der folgenden Antworten:"): Hilfetext, 14 px gedämpft (Seitenregel in
   seezeit-basis.css); auch der "Erfolg"-Hinweis ist neutral (U13). */
/* Fehler: rote Meldung mit Symbol an der Frage (Pflicht leer) bzw. rote Prüfmeldung. Der Fragetitel bleibt Dunkelblau. */
#dynamicReloadContainer .question-container .ls-question-mandatory {
  display: flex;
  align-items: flex-start;
  gap: var(--kern-space-8);
}
#dynamicReloadContainer .question-container .ls-question-mandatory > [aria-hidden="true"] {
  flex: none;
  margin-top: 0.1em;
  font-size: var(--kern-font-size-16);
  line-height: 1.4;
}
#dynamicReloadContainer .question-container :is(.ls-question-mandatory, .ls-em-error) {
  font-size: var(--kern-font-size-14);
  font-weight: 600;
  line-height: 1.5;
  color: var(--kern-color-feedback-danger);
}

/* ========================================================================== 7 Ranking: kein Überlauf auf dem Handy (Paket 1.5, Punkt 0b) */
/* Nur der Überlauf des nativen Rankings (Fragetyp R, Fragetheme ranking_advanced, Ansicht "list"). Ablauf und Gestaltung des Rankings
   folgen in M3; hier ändert sich nichts an der Bedienung, und es gibt kein JavaScript. Das Skript des Rankings (advanced_ranking.js,
   fixChoiceListHeight) misst beim Laden die Liste "Angebot" und schreibt Breite und Höhe als Inline-Style an beide Listen
   (min-width und min-height). Ändert sich die Breite danach (Fenster verkleinert, Handy gedreht), bleibt die Mindestbreite
   stehen, die Spalten (je 50 %) können nicht mehr schrumpfen, und die Seite läuft waagerecht über (gemessen: 622 px bei 390 px
   Fenster, nach dem Verkleinern eines breiten Fensters). Die Mindestbreite wird nie gebraucht: Die Liste füllt ihre Spalte ohnehin.
   Gegen einen Inline-Style hilft nur !important (begründete Ausnahme, README: Liste der !important). Die Mindesthöhe bleibt:
   Sie gibt der leeren Liste "Mein Ranking" die Höhe der Auswahl, damit Einträge hineinpassen. */
#dynamicReloadContainer .question-container .ranking-advanced-style :is(.sortable-choice, .sortable-rank) {
  min-width: 0 !important;
}
/* Schmale Fenster (bis 550 px, wie die übrigen Handy-Maße des Themes): Die beiden Listen stehen untereinander, jede in voller
   Breite, zuerst die Auswahl, dann die Rangfolge. Das Ziehen zwischen den Listen hängt nicht von der Anordnung ab (SortableJS
   verbindet die Listen über ihre Gruppe), und der Doppelklick (Doppeltipp) verschiebt weiter. Die Zeile ist das einzige Element
   mit Spalten in der Ziehfläche (views/basic.twig: .container-center > .row); die Auswahllisten für Screenreader darüber haben
   eigene Zeilen. Browser, die die Medienabfrage nicht kennen, behalten zwei Spalten ohne Überlauf (min-width oben). */
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container .ranking-advanced-style .container-center > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--kern-space-24);
    margin: 0;
  }
  #dynamicReloadContainer .question-container .ranking-advanced-style .container-center > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}

/* ========================================================================== 8 Bildauswahl (Pakete 1.5e und M1+) */
/* Bildauswahl (Fragethemes image_select-listradio und -multiplechoice): Sie ist von der Regel "eine Antwort je Zeile" ausgenommen (3 oben:
   :not(:has(> .imageselect-listitem))). Das Fragetheme setzt die Bilder als Blöcke untereinander (imageselect.css: li.imageselect-listitem
   { display: block }) und gibt jedem Bild eine feste Höhe (Inline-Style, Frageeigenschaft "fix_height"); ein Raster gibt es dort nicht.
   Aufbau je Bild: li.imageselect-listitem > .imageselect-container > input.imageselect-checkbox + label.imageselect-label (das Bild) +
   label.imageselect-radiobutton bzw. .imageselect-select (leer, im Elterntheme die Marke oben links). Das Fragetheme liefert keine
   Beschriftung: Der Antworttext ist die Adresse des Bildes, das Label enthält nur das Bild. Andere Einträge der Liste ("Keine Antwort",
   "Sonstiges") behalten die ganze Zeile. Gestaltung (M1+): Kontur 1 px Eingabekontur, gewählt dunkelblau 2 px wirksam (ohne die Größe zu
   ändern), dazu der Auswahlmarker wie in den Listen: orange mit dunkelblauem Punkt (Einfachauswahl, rund) bzw. Haken (Mehrfachauswahl, eckig).
   Raster: auf dem Handy (bis 550 px) zwei Spalten, sonst so viele Spalten von 10 bis 14 rem Breite, wie hineinpassen. */
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):has(> .imageselect-listitem) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 14rem));
  justify-content: start;
  align-items: start;
  gap: var(--kern-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):has(> .imageselect-listitem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kern-space-12);
  }
}
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul) > .imageselect-listitem {
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* "Keine Antwort", "Sonstiges": die ganze Zeile; das Elterntheme rückt sie um 55 px ein (Platz für seine Marke) */
#dynamicReloadContainer .question-container :is(ul.answers-list, .answers-list > ul):has(> .imageselect-listitem) > li:not(.imageselect-listitem) {
  grid-column: 1 / -1;
  margin-left: 0;
  padding-left: 0;
}
/* Eingabefeld der Bildauswahl: wie bei allen Antwortflächen deckt es den Behälter des Bildes ab, statt als 17-px-Feld unter dem Bild zu liegen
   (dort lag es bis zu 90 px unter der Oberkante, und der Klick auf das Bild scrollte die Seite um bis zu 477 px; gemessen in Chromium bei Bild
   70 px über dem Fensterrand; Paket 1.5e). Das Elterntheme blendet das Feld der Einfachauswahl mit display: none aus; so kam die Tastatur nicht
   hinein. Jetzt ist es wie das der Mehrfachauswahl unsichtbar, aber erreichbar (Tab, Pfeiltasten). */
#dynamicReloadContainer .question-container .imageselect-container > input[class*="imageselect"] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  scroll-margin: 0;
}
#dynamicReloadContainer .question-container .imageselect-container > input[class*="imageselect"]:focus-visible {
  scroll-margin: var(--kern-space-8);
}
/* Kachel: das Bild füllt die Spalte und behält sein Seitenverhältnis. Die feste Höhe des Fragethemes steht im Inline-Style: nur ein !important
   schlägt sie, damit das Bild auf dem Handy in zwei Spalten passt; width und max-width des Inline-Styles (Frageeigenschaft "fix_width") kappt max-width. */
#dynamicReloadContainer .question-container .imageselect-listitem .imageselect-container {
  display: block;
  width: 100%;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > label.imageselect-label {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-surface-active);
  /* die Variante setzt 2 px Kontur mit !important (Elterntheme); hier 1 px, gewählt 1 px plus 1 px Ring außen */
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--kern-radius-l) !important;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > label.imageselect-label img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  margin: 0;
}
/* gewählt: dunkelblaue Kontur, 2 px wirksam, ohne die Größe zu ändern */
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:checked + label.imageselect-label {
  border: 1px solid var(--kern-color-action-default) !important;
  box-shadow: 0 0 0 1px var(--kern-color-action-default);
}
/* Hover (nur mit Maus): dunkelblaue Kontur, Marke mit dunkelblauem Rahmen */
@media (hover: hover) {
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:not(:disabled) + label.imageselect-label:hover {
    border: 1px solid var(--kern-color-action-default) !important;
  }
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:disabled + label.imageselect-label {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Marke: das leere Label hinter dem Bild (Einfachauswahl .imageselect-radiobutton, Mehrfachauswahl .imageselect-select) bleibt der Träger; das Elterntheme
   zeigt es mit !important (display) oben links. 20 px groß wie in den Listen, 8 px vom Rand; ::before ist der Ring, ::after Punkt bzw. Haken. */
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select) {
  position: absolute;
  top: var(--kern-space-8);
  left: var(--kern-space-8);
  z-index: 2;
  width: var(--sz-marker);
  height: var(--sz-marker);
  margin: 0;
  padding: 0;
  cursor: pointer;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-surface-active);
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  transform: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
  z-index: auto;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > .imageselect-select::before {
  border-radius: var(--kern-radius-m);
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease-out;
  z-index: auto;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > .imageselect-radiobutton::after {
  width: var(--sz-dot);
  height: var(--sz-dot);
  background-color: var(--color-action-on-indicator);
  border-radius: 50%;
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > .imageselect-select::after {
  content: "\eb7a";
  font-family: "remixicon";
  font-size: var(--sz-marker);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--color-action-on-indicator);
}
/* gewählt: oranger Marker mit dunkelblauer Kontur, Punkt bzw. Haken sichtbar */
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:checked ~ :is(.imageselect-radiobutton, .imageselect-select)::before {
  background-color: var(--color-action-indicator);
  border-color: var(--kern-color-action-default);
}
#dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:checked ~ :is(.imageselect-radiobutton, .imageselect-select)::after {
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: hover) {
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:not(:disabled):not(:checked) + label.imageselect-label:hover ~ :is(.imageselect-radiobutton, .imageselect-select)::before,
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:not(:disabled):not(:checked) ~ :is(.imageselect-radiobutton, .imageselect-select):hover::before {
    border-color: var(--kern-color-action-default);
  }
}
/* Fokusring der Bildauswahl: Das Fragetheme zeichnet keinen; ohne Ring war nicht zu sehen, welches Bild die Tastatur gerade hält (gemessen in 1.5e:
   16 von 16 Tab-Stopps auf den Bildern ohne Umriss). Derselbe Ring wie bei den übrigen Antwortflächen, um das Bild. */
#dynamicReloadContainer .question-container .imageselect-container > input[class*="imageselect"]:focus-visible + label {
  outline: 3px solid var(--kern-color-action-default);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select)::after {
    forced-color-adjust: none;
    background-color: ButtonText;
    color: ButtonText;
  }
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:checked ~ :is(.imageselect-radiobutton, .imageselect-select)::before {
    forced-color-adjust: none;
    background-color: Highlight;
    border-color: ButtonText;
  }
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > input.imageselect-checkbox:checked + label.imageselect-label {
    border-color: Highlight !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > label.imageselect-label,
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select)::before,
  #dynamicReloadContainer .question-container li.imageselect-listitem .imageselect-container > :is(.imageselect-radiobutton, .imageselect-select)::after {
    transition: none;
  }
}

/* ========================================================================== 9 Dropdown (Pakete M1+) */
/* Zwei Fragethemes: das native <select class="form-select list-question-select"> (list_dropdown; seine Fläche regelt 5 oben) und das Plugin
   bootstrap-select (Fragetheme bootstrap_dropdown): <div class="dropdown bootstrap-select form-control list-question-select"> mit verstecktem
   <select>, dem Knopf (button.dropdown-toggle.border, data-style="border") und dem Menü (div.dropdown-menu > div.inner > ul.dropdown-menu.inner >
   li > a.dropdown-item[.active][.selected][.disabled]; das Menü füllt das Plugin erst beim Öffnen). Das Plugin schreibt die Breite der Hülle als
   Inline-Style (width: <Länge des längsten Eintrags>px, data-width="auto"); bei großem Textzoom war sie breiter als das Fenster (gemessen bei 200 %
   in 320 und 390 px): Die Spalte (col-auto, sie schrumpft sonst nie) und die Hülle bekommen max-width: 100 %, Text im Knopf kürzt mit "…".
   Auf dem Handy (bis 550 px) füllt das Feld die Breite wie die Textfelder. */
#dynamicReloadContainer .question-container .col-auto:has(> .list-question-select) {
  max-width: 100%;
}
#dynamicReloadContainer .question-container .list-question-select {
  max-width: 100%;
}
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container .col-auto:has(> .list-question-select) {
    flex: 0 0 100%;
  }
  #dynamicReloadContainer .question-container select.list-question-select {
    width: 100%;
  }
  /* min-width schlägt die Inline-Breite des Plugins, ohne !important */
  #dynamicReloadContainer .question-container .bootstrap-select.list-question-select {
    min-width: 100%;
  }
}
/* Knopf: sieht aus wie ein Eingabefeld (5 oben): weiß, 1 px Eingabekontur, 4 px Radius, mindestens 48 px, 16 px Schrift in 400. Die Kontur setzt die
   Bootstrap-Hilfsklasse .border (data-style="border") mit !important; den Fokus das Plugin mit !important (Umriss 5px auto): beides nur hier überstimmt. */
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn {
  justify-content: space-between;
  gap: var(--kern-space-8);
  min-height: var(--sz-answer-h);
  padding: var(--kern-space-12);
  font-family: inherit;
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--kern-radius-l);
  box-shadow: none;
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn::after {
  flex: 0 0 auto;
  margin: 0;
  color: var(--kern-color-action-default);
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle .filter-option {
  min-width: 0;
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Platzhalter ("Bitte auswählen …"): gedämpft in der Meta-Farbe (das Plugin setzt #999: 2,8 : 1 auf Weiß) */
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn.bs-placeholder,
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn.bs-placeholder:is(:hover, :focus, :active) {
  color: var(--kern-color-layout-text-muted);
}
@media (hover: hover) {
  #dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn:not(:disabled):not(.disabled):hover {
    border: 1px solid var(--kern-color-action-default) !important;
    background-color: var(--color-surface-active);
    box-shadow: none;
  }
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn:is(.show, [aria-expanded="true"]),
#dynamicReloadContainer .question-container .bootstrap-select.show > .dropdown-toggle.btn {
  border: 1px solid var(--kern-color-action-default) !important;
  background-color: var(--color-surface-active);
  box-shadow: none;
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn:focus-visible {
  outline: 3px solid var(--kern-color-action-default) !important;
  outline-offset: 2px !important;
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn:focus:not(:focus-visible) {
  outline: 0 !important;
}
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.btn:is(:disabled, .disabled),
#dynamicReloadContainer .question-container .bootstrap-select.disabled > .dropdown-toggle.btn {
  color: var(--kern-color-layout-text-muted);
  background-color: var(--kern-color-neutral-100);
  border: 1px solid var(--kern-color-neutral-200) !important;
  cursor: not-allowed;
  opacity: 1;
}
/* Frage mit Fehler: rote Kontur wie bei den Textfeldern (5 oben) */
#dynamicReloadContainer .question-container.input-error .bootstrap-select > .dropdown-toggle.btn {
  border: 1px solid var(--kern-color-feedback-danger) !important;
  box-shadow: inset 0 0 0 1px var(--kern-color-feedback-danger);
}
/* geöffnetes Menü: weiß mit Eingabekontur, 4 px Radius, ohne Polster, Einträge wie die Antwortzeilen der Liste (48 px, Marke links) */
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-menu {
  /* min-width: das Plugin setzt es inline auf 0 (data-width="auto"); das Menü ist mindestens so breit wie das Feld, höchstens 90 % des Fensters */
  min-width: 100% !important;
  width: max-content;
  max-width: 90vw;
  margin: var(--kern-space-4) 0;
  padding: 0;
  font-size: var(--kern-font-size-16);
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--sz-tile-h);
  padding: var(--sz-tile-pad-y) var(--kern-space-16) var(--sz-tile-pad-y) calc(var(--kern-space-16) + var(--sz-marker) + var(--kern-space-12));
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
  background-color: transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 0;
  text-decoration: none;
}
/* Marke: Ring links; gewählt orange mit dunkelblauem Rand und Punkt (rund, Einfachauswahl) */
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item::before {
  content: "";
  position: absolute;
  left: var(--kern-space-16);
  top: 50%;
  box-sizing: border-box;
  width: var(--sz-marker);
  height: var(--sz-marker);
  background-color: var(--color-surface-active);
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  transform: translateY(-50%);
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item::after {
  content: "";
  position: absolute;
  left: calc(var(--kern-space-16) + var(--sz-marker) / 2);
  top: 50%;
  width: var(--sz-dot);
  height: var(--sz-dot);
  background-color: var(--color-action-on-indicator);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease-out;
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item.selected::before {
  background-color: var(--color-action-indicator);
  border-color: var(--kern-color-action-default);
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item.selected::after {
  transform: translate(-50%, -50%) scale(1);
}
/* der leere Eintrag ("Bitte auswählen …", solange der Knopf den Platzhalter zeigt) ist keine Antwort: neutral, nicht orange (wie "Keine Antwort") */
#dynamicReloadContainer .question-container .bootstrap-select > .dropdown-toggle.bs-placeholder ~ .dropdown-menu li > a.dropdown-item.selected::before {
  background-color: var(--color-surface-active);
  border-color: var(--kern-color-action-default);
}
/* Tastaturmarke (.active) und Hover: Hover-Fläche; gedrückt: Neutral-100. Der Fokusring liegt innen, weil das Menü beschneidet (overflow). */
/* !important: die Variante setzt für ".dropdown-menu > .active > a" die orange Fläche mit !important; orange ist der gewählten Antwort vorbehalten (Marke) */
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li:not(.disabled) > a.dropdown-item:is(.active, :focus) {
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-hover) !important;
}
@media (hover: hover) {
  #dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li:not(.disabled) > a.dropdown-item:hover {
    color: var(--kern-color-layout-text-default);
    background-color: var(--color-surface-hover) !important;
  }
  #dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li:not(.disabled) > a.dropdown-item:hover::before {
    border-color: var(--kern-color-action-default);
  }
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li:not(.disabled) > a.dropdown-item:active {
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-100) !important;
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item:focus-visible {
  outline: 3px solid var(--kern-color-action-default);
  outline-offset: -3px;
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li.disabled > a.dropdown-item {
  color: var(--kern-color-layout-text-muted);
  background-color: transparent;
  cursor: not-allowed;
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li.disabled > a.dropdown-item::before {
  background-color: var(--kern-color-neutral-100);
  border-color: var(--kern-color-neutral-200);
}
/* Gruppenüberschrift im Menü, Haken des Plugins (show-tick; die Marke zeigt die Auswahl schon) */
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu .dropdown-header {
  padding: var(--kern-space-12) var(--kern-space-16) var(--kern-space-4);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--kern-color-layout-text-muted);
}
#dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item span.check-mark {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  #dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item.selected::before {
    forced-color-adjust: none;
    background-color: Highlight;
    border-color: ButtonText;
  }
  #dynamicReloadContainer .question-container .bootstrap-select .dropdown-menu li > a.dropdown-item::after {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}

/* ========================================================================== 10 Datum (Paket M1+) */
/* Eingabe: <div class="input-group date-timepicker-group"> mit dem Feld (.form-control.date-control, Fläche aus 5) und dem Knopf (div.input-group-addon.btn.btn-primary
   mit dem Kalendersymbol). Der Knopf trug in der Variante weiße Schrift auf hellem Grund (Symbol unsichtbar, gemessen); jetzt weiß mit Eingabekontur und
   dunkelblauem Symbol, bündig am Feld, mindestens 48 px. Das Auswahlfenster (Tempus Dominus 6) hängt direkt am body, nicht in der Umfrage: Seine
   Regeln beginnen deshalb mit body. Tage und Felder sind mindestens 44 px hoch (das Plugin: 24 px); auf dem Handy passen sieben Spalten in 320 px. */
#dynamicReloadContainer .question-container .date-timepicker-group {
  max-width: 100%;
}
#dynamicReloadContainer .question-container .date-timepicker-group > .input-group-addon.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--sz-answer-h);
  min-height: var(--sz-answer-h);
  margin: 0 0 0 -1px;
  padding: 0 var(--kern-space-12);
  color: var(--kern-color-action-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: 0 var(--kern-radius-l) var(--kern-radius-l) 0;
  box-shadow: none;
  cursor: pointer;
}
#dynamicReloadContainer .question-container .date-timepicker-group > .input-group-addon.btn > i {
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
}
@media (hover: hover) {
  #dynamicReloadContainer .question-container .date-timepicker-group > .input-group-addon.btn:hover {
    color: var(--kern-color-action-default);
    background-color: var(--color-surface-hover);
    border-color: var(--kern-color-action-default);
    box-shadow: none;
  }
}
#dynamicReloadContainer .question-container .date-timepicker-group > .input-group-addon.btn:active {
  color: var(--kern-color-action-default);
  background-color: var(--kern-color-neutral-100);
  box-shadow: none;
}
/* Auswahlfenster (Tempus Dominus 6, hängt direkt am body). Die Regeln des Plugins haben vier bis fünf Klassen (z. B. Farbe der Wochentage, der Tage
   außerhalb des Monats, Fläche des gewählten Tags in Blau); der Vorsatz ":root body > .tempus-dominus-widget.light" gibt mehr Gewicht, ohne !important. */
:root body > .tempus-dominus-widget.light {
  box-sizing: border-box;
  max-width: 100vw;
  font-family: inherit;
  font-size: var(--kern-font-size-16);
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
}
:root body > .tempus-dominus-widget.light :is(.calendar-header > :is(.previous, .next, .picker-switch), .toolbar > div) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--kern-color-action-default);
  border-radius: var(--kern-radius-l);
  cursor: pointer;
}
:root body > .tempus-dominus-widget.light .calendar-header > .picker-switch {
  font-weight: 600;
}
:root body > .tempus-dominus-widget.light .calendar-header > :is(.previous, .next) > i {
  color: inherit;
}
/* sieben Spalten in 320 px: schmalerer Innenrand, damit jeder Tag mindestens 44 px breit ist */
:root body > .tempus-dominus-widget.light .date-container-days {
  padding-left: var(--kern-space-4);
  padding-right: var(--kern-space-4);
}
:root body > .tempus-dominus-widget.light .date-container-days .dow {
  height: auto;
  min-height: 32px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 32px;
  color: var(--kern-color-layout-text-muted);
}
/* Tage, Monate, Jahre, Jahrzehnte: Fläche ab 44 px, 2 px durchsichtiger Rand (damit die Kontur beim Wählen nichts verschiebt) */
:root body > .tempus-dominus-widget.light :is(.date-container-days .day, .date-container-months .month, .date-container-years .year, .date-container-decades .decade) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  color: var(--kern-color-layout-text-default);
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: var(--kern-radius-l);
  cursor: pointer;
}
:root body > .tempus-dominus-widget.light :is(.date-container-days .day, .date-container-months .month, .date-container-years .year, .date-container-decades .decade):is(.old, .new) {
  color: var(--kern-color-layout-text-muted);
}
@media (hover: hover) {
  :root body > .tempus-dominus-widget.light :is(.date-container-days .day, .date-container-months .month, .date-container-years .year, .date-container-decades .decade):not(.active, .disabled):hover {
    color: var(--kern-color-layout-text-default);
    background-color: var(--color-surface-hover);
    border-color: var(--color-input-border);
  }
  :root body > .tempus-dominus-widget.light :is(.calendar-header > :is(.previous, .next, .picker-switch), .toolbar > div):hover {
    color: var(--kern-color-action-default);
    background-color: var(--color-surface-hover);
  }
}
:root body > .tempus-dominus-widget.light :is(.date-container-days .day, .date-container-months .month, .date-container-years .year, .date-container-decades .decade).active {
  font-weight: 700;
  color: var(--kern-color-layout-text-default);
  background-color: var(--color-action-indicator);
  border-color: var(--kern-color-action-default);
}
:root body > .tempus-dominus-widget.light :is(.date-container-days .day, .date-container-months .month, .date-container-years .year, .date-container-decades .decade).disabled {
  color: var(--kern-color-layout-text-muted);
  background-color: transparent;
  border-color: transparent;
  opacity: 0.5;
  cursor: not-allowed;
}
/* heutiger Tag: Eckmarke in Dunkelblau (das Plugin zeichnet sie in seiner Hauptfarbe) */
:root body > .tempus-dominus-widget.light .date-container-days .day.today::before {
  border-bottom-color: var(--kern-color-action-default);
}

/* ========================================================================== 11 Zahl und mehrere Zahlen: Präfix und Suffix, Schieberegler (Paket M1+) */
/* Zahl (N) und mehrere Zahlen (K): das Feld ist .form-control.numeric (Fläche aus 5). Mit Präfix oder Suffix schachtelt LimeSurvey es in
   div.ls-input-group mit div.ls-input-group-extra.prefix-text.prefix davor und .suffix-text.suffix danach. Die Variante zeigt sie ab 481 px als
   Tabellenzellen ohne Rand und stapelt sie darunter untereinander. Hier: auf jeder Breite eine Reihe, die Zusätze als Felder-Anhang (Neutral-050,
   Eingabekontur, 48 px), bündig am Eingabefeld; ein langer Zusatz bricht um (bis 45 % der Reihe), statt aus der Karte zu ragen. Die Regeln gelten nur für Gruppen mit Zusatz (:has): Der Behälter des Schiebereglers (ebenfalls .ls-input-group, ohne Zusatz) und seine versteckten Eingabefelder bleiben unberührt. */
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  position: relative;
  max-width: 100%;
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .form-control {
  display: block;
  flex: 1 1 0;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .ls-input-group-extra {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: auto;
  max-width: 45%;
  min-height: var(--sz-answer-h);
  margin: 0;
  padding: var(--kern-space-8) var(--kern-space-12);
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-050);
  border: 1px solid var(--color-input-border);
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .ls-input-group-extra.prefix {
  border-right-width: 0;
  border-radius: var(--kern-radius-l) 0 0 var(--kern-radius-l);
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .ls-input-group-extra.suffix {
  border-left-width: 0;
  border-radius: 0 var(--kern-radius-l) var(--kern-radius-l) 0;
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .ls-input-group-extra.prefix + .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#dynamicReloadContainer .question-container .ls-input-group:has(> .ls-input-group-extra) > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Schieberegler (Frageeigenschaft "Schieberegler": Typ K, hier nur Farben, kein Eingriff in Größe und Anordnung). Die Variante färbt Griff und Auswahl
   schon für die Liste .slider-list; hier gilt dasselbe für jeden Regler in der Frage, dazu Spur, Teilstriche und gesperrter Zustand (Plugin:
   Blau und Grautöne). Unberührter Regler: Griff in der Meta-Farbe, wie in der Variante. */
#dynamicReloadContainer .question-container .slider :is(.slider-selection, .slider-handle:not(.custom), .slider-tick.in-selection) {
  background-color: var(--kern-color-action-default);
  background-image: none;
}
#dynamicReloadContainer .question-container .slider :is(.slider-track, .slider-tick:not(.in-selection)) {
  background-color: var(--kern-color-neutral-100);
  background-image: none;
}
#dynamicReloadContainer .question-container .slider.slider-untouched .slider-handle:not(.custom) {
  background-color: var(--kern-color-layout-text-muted);
}
#dynamicReloadContainer .question-container .slider.slider-disabled :is(.slider-handle, .slider-selection) {
  background-color: var(--kern-color-neutral-200);
  background-image: none;
}

/* ========================================================================== 12 Mehrfach-Kurztext (Typ Q) und Zeilen mit Beschriftung (Paket M1+) */
/* Mehrfach-Kurztext (multipleshorttext, inputondemand), auch mehrere Zahlen (K): je Zeile li.row > label.col-12.col-md-4 + div.col-12.col-md-8 > Feld.
   Bis 767 px (unter Bootstrap-md) stehen Beschriftung und Feld untereinander: 8 px Abstand. Ab 768 px nebeneinander, Beschriftung und Feld
   mittig zueinander (die Beschriftung hatte 12 px Fußabstand: sie saß 6 px zu hoch, gemessen); bei mehrzeiliger Beschriftung bleibt sie neben
   dem Feld mittig. */
#dynamicReloadContainer .question-container li.text-item.row > label.control-label {
  margin-bottom: var(--kern-space-8);
}
@media (min-width: 768px) {
  #dynamicReloadContainer .question-container li.text-item.row {
    align-items: center;
  }
  #dynamicReloadContainer .question-container li.text-item.row > label.control-label {
    margin-bottom: 0;
  }
}