/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* =========================================================
   FOGS Base Theme – barriereärmere Grundgestaltung
   Farben:
   Schwarz: #000000
   Dunkelgrün: #003A3C
   Dunkelrot für echte Fehlermeldungen: #5A0000

   Schrift:
   Arial / Helvetica / sans-serif
   ========================================================= */


/* ---------------------------------------------------------
   Schriftgrößen, Schriftart und Grundlesbarkeit
   --------------------------------------------------------- */

html {
  font-size: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #1a1a1a;
  background-color: #ffffff;
}

/* Einheitliche Schrift für sichtbare Textelemente */
body,
p,
div,
span,
label,
input,
textarea,
select,
button,
a,
table,
th,
td,
.btn,
.form-control,
.form-select,
.question-title-container,
.question-text,
.answer-container,
.answer-item,
.answer-item label,
.radio-item label,
.checkbox-item label,
.control-label,
.ls-question-message,
.survey-name,
.group-name,
.group-title,
.survey-welcome,
.survey-description,
.group-description,
.completed-wrapper {
  font-family: Arial, Helvetica, sans-serif;
}


/* ---------------------------------------------------------
   Fließtext, Antwortoptionen, Hilfetexte und Formularfelder
   --------------------------------------------------------- */

.question-text,
.ls-question-message,
.answer-container,
.answer-item label,
.control-label,
.form-control,
.form-select,
.btn,
.survey-welcome,
.survey-description,
.group-description,
.completed-wrapper,
.radio-item label,
.checkbox-item label {
  font-size: 1.125rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   Startseite / Willkommenstext deutlich größer
   --------------------------------------------------------- */

.survey-welcome,
.survey-description,
#welcome-container,
.welcome-container,
#welcome,
.welcome,
.firstpage,
.startpage,
.ls-survey-welcome,
.ls-survey-description {
  font-size: 1.5rem;
  line-height: 1.65;
  color: #003A3C;
}

.survey-welcome p,
.survey-description p,
#welcome-container p,
.welcome-container p,
#welcome p,
.welcome p,
.firstpage p,
.startpage p,
.ls-survey-welcome p,
.ls-survey-description p {
  font-size: 1.5rem;
  line-height: 1.65;
  margin-bottom: 1.1rem;
  color: #003A3C;
}

/* Falls Startseitentexte als einzelne div/span ausgegeben werden */
.survey-welcome div,
.survey-description div,
#welcome-container div,
.welcome-container div,
#welcome div,
.welcome div,
.firstpage div,
.startpage div,
.ls-survey-welcome div,
.ls-survey-description div,
.survey-welcome span,
.survey-description span,
#welcome-container span,
.welcome-container span,
#welcome span,
.welcome span {
  font-size: 1.5rem;
  line-height: 1.65;
}

/* Hinweis wie "In dieser Umfrage sind..." etwas größer, aber dezenter */
.survey-welcome .text-muted,
.survey-description .text-muted,
.text-muted {
  font-size: 1.25rem;
  line-height: 1.55;
  color: #4a4a4a;
}


/* ---------------------------------------------------------
   Überschriften, Fragetexte und visuelle Hierarchie
   Überschriften und Fragen in Schwarz.
   --------------------------------------------------------- */

.question-title-container {
  font-size: 1.375rem;
  line-height: 1.4;
  color: #000000;
  font-weight: 700;
  border-bottom: 1px solid #003A3C;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.question-text {
  color: #000000;
  font-weight: 600;
}

.group-name,
.group-title {
  font-size: 1.5rem;
  line-height: 1.35;
  color: #000000;
  font-weight: 700;
}

.survey-name,
h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  color: #000000;
  font-weight: 700;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  color: #000000;
  font-weight: 700;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.4;
  color: #000000;
  font-weight: 700;
}


/* ---------------------------------------------------------
   Beschreibungen und Erklärungstexte
   --------------------------------------------------------- */

.survey-description,
.group-description {
  color: #003A3C;
  border-left: 5px solid #003A3C;
  padding-left: 0.9rem;
  background-color: #f4f8f8;
}


/* ---------------------------------------------------------
   Frage-Container
   Linien und Umrandungen in Dunkelgrün.
   --------------------------------------------------------- */

.question-container,
.ls-question-wrapper {
  border-radius: 12px;
  border-left: 8px solid #003A3C;
  background-color: #ffffff;
}


/* ---------------------------------------------------------
   Buttons
   Buttons in Dunkelgrün, Hover/Fokus in Schwarz.
   --------------------------------------------------------- */

.btn-primary,
.ls-move-btn,
button[name="move"],
button[type="submit"] {
  border-radius: 8px;
  font-weight: 700;
  background-color: #003A3C;
  border-color: #003A3C;
  color: #ffffff;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  white-space: normal;
}

.btn-primary:hover,
.btn-primary:focus,
.ls-move-btn:hover,
.ls-move-btn:focus,
button[name="move"]:hover,
button[name="move"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

.btn-default,
.btn-secondary {
  border: 2px solid #003A3C;
  color: #003A3C;
  background-color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  white-space: normal;
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #ffffff;
  background-color: #003A3C;
  border-color: #003A3C;
}


/* ---------------------------------------------------------
   Fortschrittsbalken in Schwarz
   --------------------------------------------------------- */

.progress {
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #000000;
}

.progress-bar,
.ls-progress .progress-bar {
  background-color: #000000;
  color: #ffffff;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
  color: #003A3C;
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #000000;
  text-decoration: underline;
}


/* ---------------------------------------------------------
   Eingabefelder und Textantworten
   Dunkelgrüne Umrandung mit hohem Kontrast.
   --------------------------------------------------------- */

.form-control,
.form-select,
.answer-container .form-control,
.answer-container .form-select,
.answer-container textarea,
.answer-container input[type="text"],
.answer-container input[type="number"],
.answer-container input[type="email"],
.question-container textarea,
.question-container input[type="text"],
.question-container input[type="number"],
.question-container input[type="email"],
.ls-question-wrapper textarea,
.ls-question-wrapper input[type="text"],
.ls-question-wrapper input[type="number"],
.ls-question-wrapper input[type="email"],
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 1.125rem;
  line-height: 1.5;
  border: 2px solid #003A3C;
  border-radius: 6px;
  min-height: 2.75rem;
  background-color: #ffffff;
  color: #003A3C;
  box-shadow: inset 0 0 0 1px #003A3C;
}

textarea,
.answer-container textarea,
.question-container textarea,
.ls-question-wrapper textarea {
  min-height: 6rem;
}

.form-control:hover,
.form-select:hover,
.answer-container textarea:hover,
.answer-container input[type="text"]:hover,
.question-container textarea:hover,
.question-container input[type="text"]:hover,
.ls-question-wrapper textarea:hover,
.ls-question-wrapper input[type="text"]:hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}

.form-control:focus,
.form-select:focus,
.answer-container textarea:focus,
.answer-container input[type="text"]:focus,
.question-container textarea:focus,
.question-container input[type="text"]:focus,
.ls-question-wrapper textarea:focus,
.ls-question-wrapper input[type="text"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: #000000;
  box-shadow: inset 0 0 0 1px #000000;
}


/* ---------------------------------------------------------
   Radio-Buttons und Checkboxen
   Stärkerer Kontrast, bessere Ausrichtung.
   --------------------------------------------------------- */

.radio-item:not(td),
.checkbox-item:not(td) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  border-radius: 8px;
}

.answer-item:not(td) {
  margin-bottom: 0.75rem;
  border-radius: 8px;
}

/* Bootstrap-/Theme-Versatz zurücksetzen */
.radio label,
.checkbox label,
.radio-item label,
.checkbox-item label {
  padding-left: 0;
  margin: 0;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
  position: static;
  margin-left: 0;
  margin-top: 0;
}

/* Checkboxen deutlich kontrastreicher */
.question-container input[type="checkbox"],
.ls-question-wrapper input[type="checkbox"],
.answer-container input[type="checkbox"],
.checkbox-item input[type="checkbox"],
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 3px solid #003A3C;
  border-radius: 4px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem;
  vertical-align: middle;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px #003A3C;
}

/* Angehakte Checkbox mit sichtbarem Haken */
.question-container input[type="checkbox"]:checked,
.ls-question-wrapper input[type="checkbox"]:checked,
.answer-container input[type="checkbox"]:checked,
.checkbox-item input[type="checkbox"]:checked,
input[type="checkbox"]:checked {
  background-color: #003A3C;
  border-color: #003A3C;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12.5L10 17.5L19 6.5' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px #003A3C;
}

/* Radio-Buttons deutlich kontrastreicher und sauber zentriert */
.question-container input[type="radio"],
.ls-question-wrapper input[type="radio"],
.answer-container input[type="radio"],
.radio-item input[type="radio"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 3px solid #003A3C;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  vertical-align: middle;
  flex: 0 0 auto;
  box-shadow: none;
}

/* Ausgewählter Radio-Button: weißer Kreis mit zentriertem dunkelgrünem Punkt */
.question-container input[type="radio"]:checked,
.ls-question-wrapper input[type="radio"]:checked,
.answer-container input[type="radio"]:checked,
.radio-item input[type="radio"]:checked,
input[type="radio"]:checked {
  background-color: #ffffff;
  border-color: #003A3C;
  background-image: radial-gradient(circle, #003A3C 0%, #003A3C 42%, #ffffff 45%, #ffffff 100%);
  box-shadow: none;
}

/* Falls LimeSurvey/Bootstrap sichtbare Kästchen über Label-Pseudo-Elemente zeichnet */
.checkbox label:before,
.checkbox-item label:before,
.radio label:before,
.radio-item label:before {
  border: 3px solid #003A3C;
  background-color: #ffffff;
}

.checkbox label:after,
.checkbox-item label:after,
.radio label:after,
.radio-item label:after {
  color: #003A3C;
}

/* Antworttexte neben Checkboxen/Radio-Buttons */
.radio-item label,
.checkbox-item label {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0.15rem 0.4rem;
  line-height: 1.4;
  color: #003A3C;
  cursor: pointer;
}

/* Falls Input innerhalb des Labels liegt */
.radio-item label input[type="radio"],
.checkbox-item label input[type="checkbox"],
.radio label input[type="radio"],
.checkbox label input[type="checkbox"] {
  margin: 0 0.75rem 0 0;
  flex: 0 0 auto;
  align-self: center;
}

/* Kleine optische Feinjustierung, damit Kästchen und Text auf einer Achse sitzen */
.checkbox-item > input[type="checkbox"],
.radio-item > input[type="radio"] {
  transform: translateY(0.02rem);
}

/* Antworttexte allgemein */
.answer-container,
.answer-item,
.answer-item label,
.radio-item label,
.checkbox-item label,
table.answers-list,
table.answers-list th,
table.answers-list td,
.array-question th,
.array-question td {
  color: #003A3C;
}

.radio-item:hover,
.checkbox-item:hover,
.answer-item:hover {
  background-color: #f4f8f8;
}

/* Fokus auf Radio/Checkbox sichtbar halten */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

/* Kein schwarzer Kasten um die Zahl/den Text neben Radio-Buttons */
.radio-item input[type="radio"]:focus + label,
.checkbox-item input[type="checkbox"]:focus + label,
.answer-item input[type="radio"]:focus + label,
.answer-item input[type="checkbox"]:focus + label {
  outline: none;
  background-color: #f4f8f8;
}


/* ---------------------------------------------------------
   Sichtbarer Tastaturfokus
   Fokus in Schwarz für maximale Sichtbarkeit.
   --------------------------------------------------------- */

a:focus,
button:focus,
textarea:focus,
.btn:focus,
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus {
  outline: 3px solid #000000;
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   Frage-Hilfe-Icon entfernen
   Der Hinweistext bleibt sichtbar.
   --------------------------------------------------------- */

.question-valid-container .ls-questionhelp:before,
.question-valid-container .ls-questionhelp:after,
.question-valid-container .ls-question-message:before,
.question-valid-container .ls-question-message:after {
  content: "";
  display: none;
}


/* ---------------------------------------------------------
   Ausfüllhinweise dunkelgrün
   Zum Beispiel: "Wählen Sie alle zutreffenden Optionen"
   --------------------------------------------------------- */

.question-valid-container,
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message,
.question-valid-container .ls-em-tip,
.question-valid-container .em_default,
.question-valid-container .ls-em-success,
.question-valid-container .emtip,
.question-valid-container [role="alert"] {
  font-weight: 700;
  color: #003A3C;
}


/* ---------------------------------------------------------
   Echte Fehlermeldungen dunkelrot
   --------------------------------------------------------- */

.text-danger,
.error,
.alert-danger,
.ls-em-error {
  font-weight: 700;
  color: #5A0000;
}

.alert-danger {
  border: 2px solid #5A0000;
}


/* ---------------------------------------------------------
   Keine automatische Großschreibung durch das Theme
   --------------------------------------------------------- */

h1,
h2,
h3,
.survey-name,
.group-name,
.group-title,
.question-title-container,
.question-text,
.btn,
label,
.answer-item label {
  text-transform: none;
}


/* ---------------------------------------------------------
   Schutz gegen Textabschneiden bei Zoom
   --------------------------------------------------------- */

.question-container,
.ls-question-wrapper,
.answer-container,
.answer-item,
.radio-item,
.checkbox-item,
.form-group,
.form-control,
.form-select,
.btn {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

table,
.table {
  max-width: 100%;
}
.contact-info {
  font-size: 1.5rem;
  line-height: 1.6;
  color: #003A3C;
  margin-top: 1.5rem;
}

.contact-info a {
  color: #003A3C;
  text-decoration: underline;
  font-weight: 700;
}
/* Automatische LimeSurvey-Hinweise / kleinere Systemtexte besser lesbar */
.text-muted,
.ls-question-message,
.ls-questionhelp,
.ls-em-tip,
.em_default,
.emtip,
.question-valid-container,
.question-valid-container .ls-question-message,
.question-valid-container .ls-questionhelp {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #003A3C;
}


/* Kleine Hinweise nicht zu hell darstellen */
small,
.small {
  color: #003A3C;
  font-size: 1rem;
  line-height: 1.5;
}


/* Zahlenfelder linksbündig, damit Zahlen bei Vergrößerung nicht aus dem Blick geraten */
input[type="number"] {
  text-align: left;
}


/* Moderner sichtbarer Tastaturfokus ohne universellen *-Selektor */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.ls-move-btn:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 4px;
}
/* Startseiten-Überschrift sicher zentrieren */
.survey-name,
h1 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   Startseiten-Überschrift sicher zentrieren
   --------------------------------------------------------- */

.survey-name,
h1 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* ---------------------------------------------------------
   Startseite: Willkommensnachricht sauber zentrieren
   --------------------------------------------------------- */

.survey-welcome,
.survey-description,
#welcome-container,
.welcome-container,
#welcome,
.welcome,
.firstpage,
.startpage,
.ls-survey-welcome,
.ls-survey-description {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Absätze und einzelne Textelemente auf der Startseite ebenfalls zentrieren */
.survey-welcome p,
.survey-description p,
#welcome-container p,
.welcome-container p,
#welcome p,
.welcome p,
.firstpage p,
.startpage p,
.ls-survey-welcome p,
.ls-survey-description p,
.survey-welcome div,
.survey-description div,
#welcome-container div,
.welcome-container div,
#welcome div,
.welcome div,
.firstpage div,
.startpage div,
.ls-survey-welcome div,
.ls-survey-description div {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   Ergänzung 1: Automatische LimeSurvey-Texte besser lesbar
   ========================================================= */


/* Platzhaltertexte in Eingabefeldern besser lesbar machen */
input::placeholder,
textarea::placeholder {
  color: #003A3C;
  opacity: 1;
}


/* Automatische LimeSurvey-Hinweise und kleine Systemtexte besser lesbar */
.text-muted,
small,
.small,
.ls-question-message,
.ls-questionhelp,
.ls-em-tip,
.em_default,
.emtip,
.question-valid-container,
.question-valid-container .ls-question-message,
.question-valid-container .ls-questionhelp {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #003A3C;
}


/* Hinweis auf der Startseite, z. B. "In dieser Umfrage sind ... Fragen enthalten" */
.survey-description .text-muted,
.survey-welcome .text-muted,
#welcome-container .text-muted,
.welcome-container .text-muted,
.firstpage .text-muted,
.startpage .text-muted {
  color: #003A3C;
  font-size: 1.125rem;
  line-height: 1.5;
}


/* Zahlenfelder linksbündig darstellen */
input[type="number"] {
  text-align: left;
}


/* Moderner sichtbarer Tastaturfokus ohne langsamen Universal-Selektor */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.ls-move-btn:focus-visible {
  outline: 4px solid #000000;
  outline-offset: 4px;
}


/* =========================================================
   Ergänzung 2 korrigiert:
   Hinweise und Fehlermeldungen ohne doppelte Balken
   ========================================================= */


/* Fragehinweise, z. B. "Wählen Sie alle zutreffenden Optionen" */
.question-valid-container {
  background-color: #f4f8f8;
  border-left: 5px solid #003A3C;
  padding: 0.65rem 0.9rem;
  margin-top: 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: 0 6px 6px 0;
  color: #003A3C;
  font-weight: 700;
}


/* Elemente innerhalb des Hinweiscontainers nicht nochmal als eigene Box gestalten */
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message,
.question-valid-container .ls-em-tip,
.question-valid-container .em_default,
.question-valid-container .emtip,
.question-valid-container [role="alert"] {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: #003A3C;
  font-weight: 700;
}


/* Echte Fehlermeldungen deutlich, aber ohne Layout-Chaos */
.alert-danger,
.ls-em-error {
  color: #5A0000;
  background-color: #fff4f4;
  border: 2px solid #5A0000;
  border-left: 6px solid #5A0000;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  font-weight: 700;
}


/* Pflichtstern sichtbar, aber nicht übertrieben groß */
.asterisk,
.mandatory,
.text-danger.asterisk {
  color: #5A0000;
  font-weight: 700;
  font-size: 1.2rem;
}


/* =========================================================
   Hilfe-Fragezeichen vor Hilfetexten entfernen
   ohne !important
   ========================================================= */

body .ls-questionhelp::before,
body .ls-questionhelp::after,
body .ls-question-message::before,
body .ls-question-message::after {
  content: none;
  display: none;
}


/* Falls nach dem entfernten Icon links Abstand bleibt */
body .ls-questionhelp {
  padding-left: 0;
}

/* =========================================================
   LimeSurvey 6.17.x – Matrixfragen passend zur EAA-LSS
   ---------------------------------------------------------
   Die EAA-Umfrage verwendet den Fragetyp "Matrix" mit der
   LimeSurvey-Klasse .table-array-radio. Tabellenzellen tragen
   zugleich die Klassen .answer-item und .radio-item. Sie dürfen
   deshalb nicht als Flexbox dargestellt werden.
   ========================================================= */

/* Große Matrizen bleiben echte Tabellen und können bei Bedarf
   innerhalb des Fragebereichs horizontal gescrollt werden. */
.ls-table-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.ls-table-wrapper > table.table-array-radio {
  display: table;
  width: 100%;
  min-width: 52rem;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.ls-table-wrapper > table.table-array-radio > colgroup {
  display: table-column-group;
}

.ls-table-wrapper > table.table-array-radio > thead {
  display: table-header-group;
}

.ls-table-wrapper > table.table-array-radio > tbody {
  display: table-row-group;
}

.ls-table-wrapper > table.table-array-radio > thead > tr,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list {
  display: table-row;
}

/* Kopfzeile */
.ls-table-wrapper > table.table-array-radio > thead > tr > th {
  display: table-cell;
  padding: 0.7rem 0.45rem;
  vertical-align: bottom;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
  color: #000000;
  background-color: #ffffff;
}

/* Aussage/Teilfrage in der ersten Spalte */
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > th.answertext {
  display: table-cell;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0.85rem 0.75rem;
  vertical-align: middle;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  color: #003A3C;
  background-color: #ffffff;
  font-weight: 400;
  line-height: 1.45;
}

/* Jede Antwort bleibt in ihrer eigenen Tabellenspalte. */
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.answer-item.radio-item,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.noanswer-item {
  display: table-cell;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0.75rem 0.35rem;
  vertical-align: middle;
  text-align: center;
  border-radius: 0;
  background-color: #ffffff;
  overflow: visible;
}

/* Radio-Buttons in Matrixzellen sichtbar und sauber zentriert halten.
   Das Theme blendet native Eingaben teilweise über opacity/position aus;
   diese Werte werden hier nur innerhalb von Matrixfragen zurückgesetzt. */
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.radio-item > input[type="radio"],
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.radio-item input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: static;
  display: inline-block;
  float: none;
  opacity: 1;
  visibility: visible;
  clip: auto;
  clip-path: none;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  margin: 0 auto;
  padding: 0;
  border: 3px solid #003A3C;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
  transform: none;
  vertical-align: middle;
  cursor: pointer;
}

/* Ausgewählter Radio-Button in Matrixfragen. */
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.radio-item > input[type="radio"]:checked,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.radio-item input[type="radio"]:checked {
  background-color: #ffffff;
  border-color: #003A3C;
  background-image: radial-gradient(circle, #003A3C 0%, #003A3C 42%, #ffffff 45%, #ffffff 100%);
  box-shadow: none;
}

/* Die Antworttexte stehen bereits in der Tabellenkopfzeile.
   Die zusätzlichen mobilen Labels bleiben für Hilfstechnologien erhalten,
   werden aber visuell ausgeblendet. */
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td.radio-item > label.ls-label-xs-visibility {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Gleichmäßige Linien und dezente Zeilenorientierung. */
.ls-table-wrapper > table.table-array-radio > thead > tr > th,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > th,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list > td {
  border: 1px solid #b8c7c7;
}

.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list:hover > th,
.ls-table-wrapper > table.table-array-radio > tbody > tr.answers-list:hover > td {
  background-color: #f4f8f8;
}

/* Keine zusätzlichen Außenabstände aus den allgemeinen
   Antwort-Regeln auf Tabellenzellen übernehmen. */
.ls-table-wrapper > table.table-array-radio td.answer-item,
.ls-table-wrapper > table.table-array-radio td.radio-item {
  gap: 0;
  flex: none;
  box-shadow: none;
}

/* Bei kleineren Fenstern bleibt die Matrix als Tabelle erhalten.
   Die Bedienung erfolgt dann über den horizontalen Scrollbereich. */
@media (max-width: 70rem) {
  .ls-table-wrapper > table.table-array-radio {
    min-width: 52rem;
  }
}

/* =========================================================
   Fragetyp Textanzeige (Typ X)
   ---------------------------------------------------------
   Fließtext wird normal dargestellt. Explizite Hervorhebungen
   mit <b> oder <strong> bleiben fett.
   ========================================================= */

.boilerplate .question-title-container,
.boilerplate .question-text,
.boilerplate .answer-container,
.boilerplate p,
.boilerplate div,
.boilerplate span {
  font-weight: 400;
}

.boilerplate b,
.boilerplate strong {
  font-weight: 700;
}