/* Please add child theme specific CSS here when creating child themes by extending the core parent theme. */
/* Kleinere Gruppentitel (.group-title)
Original in custom.css: 90px / 40px (<=524px) */
.group-title {
font-size: 48px;
line-height: 56px;
letter-spacing: -0.025em;
/* Fix (08/2026): Unterlaengen (g, j, p, q, y) ragten in die Linie unter
dem Titel. Em-basiert, skaliert also automatisch mit den kleineren
Schriftgroessen der Media Queries mit. */
padding-bottom: 0.25em;
}
/* optional: Zwischenstufe, die es im Original nicht gibt */
@media only screen and (max-width: 987px) {
.group-title {
font-size: 38px;
line-height: 44px;
}
}
@media only screen and (max-width: 524px) {
.group-title {
font-size: 28px;
line-height: 34px;
}
}
/* =============================================================================
Fix (08/2026): Matrix-Fragen auf Mobile - Antwortlabels wieder sichtbar
-----------------------------------------------------------------------------
Ursache:
Der Patch vom 07/2026 in custom.css (ca. Zeile 1560) setzt
table.ls-answers td.answer-item.radio-item label.ls-label-xs-visibility
OHNE Media Query auf width/height: 24px + overflow: hidden + margin: auto.
Auf Desktop ist das korrekt: dort ist das Label visuell versteckt, der
Antworttext steht im Spaltenkopf. Sobald die Tabelle auf Mobile aufbricht
("no more tables"), ist genau dieses Label aber der Traeger des
Antworttextes - und wird durch die 24x24-Box mit overflow: hidden auf das
erste Zeichen beschnitten und mittig zentriert. Genau das zeigt der
Screenshot ("S", "E", "E", "U", "V" statt der vollen Antwortoptionen).
Weil der Patch mit sehr hoher Spezifitaet (4 Klassen + 3 Elemente) und spaet
im Cascade greift (custom.css laedt NACH noTablesOnMobile.css), kommt die
Mobile-Regel des Core-Themes nicht mehr durch.
Loesung:
Innerhalb genau derselben Media Query, in der die Tabelle aufbricht, die
Label-Box wieder freigeben. child.css laedt als letzte Datei - custom.css
muss also nicht angefasst werden.
============================================================================= */
/* Stellschrauben - hier anpassen, falls die Ausrichtung noch nicht exakt sitzt.
--sotomo-matrix-indent: Abstand der Matrix-Optionen vom linken Rand.
Muss dem Einzug der Optionen bei Single-/Multiple-
Choice entsprechen (Original-Theme: 28-30px).
--sotomo-matrix-label-gap: Abstand Antworttext zum Radio/Checkbox-Kreis
(Kreis ist 24px breit). */
:root {
--sotomo-matrix-indent: 30px;
--sotomo-matrix-label-gap: 34px;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table.ls-answers td.answer-item.radio-item label.ls-label-xs-visibility,
table.ls-answers td.answer-item.checkbox-item label.ls-label-xs-visibility {
position: relative;
display: block;
width: auto; /* undo 24px */
height: auto; /* undo 24px */
min-height: 24px;
margin-left: 0; /* undo margin: auto (Zentrierung) */
margin-right: 0;
padding-left: var(--sotomo-matrix-label-gap); /* 24px Kreis + Abstand */
overflow: visible; /* undo overflow: hidden */
clip: auto;
clip-path: none;
text-indent: 0;
white-space: normal;
line-height: 1.4;
text-align: left;
}
/* Kreis / Kasten bleibt links oben verankert */
table.ls-answers td.answer-item.radio-item label.ls-label-xs-visibility::before,
table.ls-answers td.answer-item.checkbox-item label.ls-label-xs-visibility::before {
left: 0;
top: 0;
width: 24px;
height: 24px;
}
table.ls-answers td.answer-item.radio-item label.ls-label-xs-visibility::after,
table.ls-answers td.answer-item.checkbox-item label.ls-label-xs-visibility::after {
left: 1px;
top: 1px;
width: 22px;
height: 22px;
}
/* -------------------------------------------------------------------------
Einzug der Matrix-Antwortzellen.
Die Zelle hatte urspruenglich padding-left: 30px (custom.css ~597) bzw.
28px (theme.css ~767) - das ist der Einzug, der die Matrix-Optionen mit
den Optionen von Single-/Multiple-Choice-Fragen buendig gemacht hat.
Hier auf einen einheitlichen Wert gesetzt, damit die beiden konkurrierenden
Regeln (max-width vs. max-device-width) nicht mehr auseinanderlaufen.
------------------------------------------------------------------------- */
table.ls-answers > tbody > tr > td.answer-item.radio-item,
table.ls-answers > tbody > tr > td.answer-item.checkbox-item {
padding-left: var(--sotomo-matrix-indent);
}
/* Zeilenkopf (Subfrage-Text) auf denselben Einzug, sonst steht die
Ueberschrift versetzt ueber ihren Optionen. */
table.ls-answers > tbody > tr > th.answertext {
padding-left: var(--sotomo-matrix-indent);
}
}
/* =============================================================================
Anpassungen (08/2026): Fortschrittsbalken - sticky, dicker
-----------------------------------------------------------------------------
1) position: sticky haelt den Balken beim Scrollen am oberen Rand fest.
Der Balken bleibt im normalen Layoutfluss (kein Ueberlappen des Inhalts
beim Laden, anders als bei position: fixed).
2) Hintergrund + dezenter Schatten, damit beim Scrollen kein Seiteninhalt
durch den klebenden Balken-Bereich durchscheint.
3) Balkenhoehe ueber --sotomo-progress-height einstellbar.
Hinweis: Sollte der Balken auf dem Server nicht "kleben" (das passiert,
wenn ein Eltern-Element overflow: hidden gesetzt hat), position: sticky
durch position: fixed ersetzen und dem nachfolgenden Inhalt ein
padding-top in Balkenhoehe geben.
============================================================================= */
:root {
--sotomo-progress-height: 12px; /* Stellschraube: Dicke des Balkens */
}
.top-container {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1030; /* ueber Frageinhalt */
background: var(--bs-body-bg, #fff); /* nichts scheint durch */
box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
/* Volle Seitenbreite: kein Bootstrap-Padding/-Margin, keine max-width */
width: 100%;
max-width: none;
padding: 0;
margin: 0;
}
.top-container .progress {
height: var(--sotomo-progress-height);
border-radius: 0;
width: 100%;
margin: 0;
}
.top-container .progress .progress-bar {
height: 100%;
}
/* =============================================================================
Anpassungen (08/2026): Mobile-Optimierung Schriftgroessen
-----------------------------------------------------------------------------
Auf schmalen Screens (<= 524px, gleicher Breakpoint wie oben bei
.group-title) werden Fragetext, Antwortoptionen, Hilfetext und Buttons
verkleinert. Werte sind Stellschrauben - bei Bedarf hier anpassen.
============================================================================= */
@media only screen and (max-width: 524px) {
/* Fragetitel / Fragetext (08/2026 nachjustiert: Mittelweg
zwischen Original und erster Verkleinerung) */
.question-container .question-text,
.question-container .ls-label-question {
font-size: 19px;
line-height: 1.45;
}
/* Antwortoptionen (Single/Multiple Choice) und Matrix-Zeilentitel */
/* Wichtig: font-size/line-height auch auf dem li selbst setzen!
Sonst behaelt das li den (groesseren) Zeilenraster des body und
einzeilige Optionen werden hoeher aufgespannt als mehrzeilige -
das erzeugte die uneinheitlichen Abstaende (08/2026 korrigiert). */
.answer-container li.answer-item,
.question-container li.answer-item,
.answer-container .answer-item label,
.question-container .answer-item label,
table.ls-answers > tbody > tr > th.answertext {
font-size: 18px;
line-height: 1.45;
}
/* Labels sind inline-block mit vertical-align: middle - das laesst
einzeilige li um ~3px hoeher aufspannen als mehrzeilige.
top-Ausrichtung macht li-Hoehe == Label-Hoehe, Abstaende identisch. */
.answer-container li.answer-item > label,
.question-container li.answer-item > label {
vertical-align: top;
}
/* Aufgebrochene Matrix-Labels aus dem Fix oben mitziehen */
table.ls-answers td.answer-item.radio-item label.ls-label-xs-visibility,
table.ls-answers td.answer-item.checkbox-item label.ls-label-xs-visibility {
font-size: 17px;
}
/* Hilfetext (08/2026 nachjustiert: gleiche Groesse wie
Antwortoptionen) */
.question-container .ls-questionhelp,
.question-container .questionhelp {
font-size: 18px;
line-height: 1.45;
}
/* Abstaende Frage -> Hinweistext -> Antworten vereinheitlichen.
Frage- und Hinweistext stecken in -Tags mit Bootstrap-Margin;
diese werden genullt und die Abstaende explizit gesetzt, damit
beide Luecken gleich gross sind (Stellschraube: 16px). */
.question-container .question-text p:last-child,
.question-container .ls-label-question p:last-child,
.question-container .ls-questionhelp p:last-child {
margin-bottom: 0;
}
/* Auch die OBEREN p-Margins nullen: das margin-top des ersten
kollabiert durch den Hilfetext-Container hindurch und wuerde den
gesetzten Abstand sonst ueberstimmen */
.question-container .question-text p:first-child,
.question-container .ls-label-question p:first-child,
.question-container .ls-questionhelp p:first-child {
margin-top: 0;
}
.question-container .question-help-container {
margin-top: 8px; /* Frage -> Hinweistext */
}
.question-container .question-help-container .ls-questionhelp {
margin-bottom: 8px; /* Hinweistext -> Antworten */
}
/* Leerer Validierungscontainer zwischen Frage und Hinweis soll
keinen zusaetzlichen Abstand erzeugen */
.question-container .question-valid-container:empty {
margin: 0;
padding: 0;
}
/* Restliche fixe Polster auf der Antwortliste neutralisieren,
damit der 16px-Abstand oben tatsaechlich das Mass ist */
.question-container .answer-container .ls-answers {
padding-top: 0;
}
/* Freitextfelder: 16px als Untergrenze, sonst zoomt iOS beim Fokus rein */
.question-container input[type="text"],
.question-container textarea {
font-size: 16px;
}
/* Weiter-/Zurueck-Buttons */
.navigator-container .ls-move-btn,
#navigator-container .ls-move-btn {
font-size: 17px;
}
}
/* =============================================================================
Fix (08/2026, korrigiert): Navigator ohne Rueckwaerts-Button -
Linien auf volle Breite
-----------------------------------------------------------------------------
Struktur im LS6-Navigator: der Container #navigator-container traegt selbst
die Klassen "row navigator", die beiden Button-Spalten sind seine DIREKTEN
Kinder. Die linke Spalte wird immer gerendert - nur der Zurueck-Button darin
ist konditional. Die Trennlinien haengen an den Spalten; ohne Zurueck-Button
bleibt links eine leere Spalte und die Linien laufen nur ueber die rechte
Haelfte.
Loesung (greift nur, wenn nirgends ein .ls-move-previous-btn existiert):
- leere Spalten ohne Button ausblenden
- die Spalte mit dem Weiter-/Absenden-Button auf volle Breite ziehen
============================================================================= */
#navigator-container:not(:has(.ls-move-previous-btn)) > div:not(:has(button)),
.navigator-container:not(:has(.ls-move-previous-btn)) > div:not(:has(button)) {
display: none;
}
#navigator-container:not(:has(.ls-move-previous-btn)) > div:has(button),
.navigator-container:not(:has(.ls-move-previous-btn)) > div:has(button) {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
/* =============================================================================
Fix (08/2026, korrigiert): iOS - Haekchen bleibt nach Abwahl sichtbar
-----------------------------------------------------------------------------
Echte Ursache (in custom.css des Parent-Themes gefunden): Die Hover-
Vorschau zeichnet per label:hover::before ein gefuelltes Haekchen in die
Box. Auf Touch-Geraeten (iOS) bleibt der :hover-Zustand nach dem Tippen
"kleben", bis man woanders hintippt - darum sah die Checkbox nach dem
Abwaehlen weiterhin angekreuzt aus und leerte sich erst beim Antippen
einer anderen Option. Der interne Zustand war immer korrekt.
Fix: Auf Geraeten ohne echten Hover (Touch) wird die Hover-Vorschau
neutralisiert - Desktop mit Maus behaelt sie unveraendert.
============================================================================= */
@media (hover: none) {
.checkbox-item label:hover::before {
content: "" !important; /* kein Haekchen-Glyph */
background-color: #ffffff !important; /* wie unchecked-Box */
color: inherit !important;
}
/* Gleicher Effekt bei Radios: Hover fuellt die Box ein */
.radio-item label:hover::before {
background-color: #ffffff !important;
}
}
/* =============================================================================
Fix (08/2026): Matrix (Zahlen) mit Dropdowns - kompaktere Abstaende mobil
-----------------------------------------------------------------------------
Auf schmalen Screens wird die Antworttabelle als Bloecke untereinander
dargestellt; Zellen-Padding und Zeilenhoehen summieren sich dabei zu
grossen Luecken zwischen Unterfrage-Label und Auswahlfenster bzw. zur
naechsten Unterfrage. Zwei Selektor-Varianten:
- .multiflexi = Standard-Klasse des Fragetyps Matrix (Zahlen)
- :has(...select) = Fallback, falls die Klasse im Theme anders heisst;
greift nur bei Tabellen mit Dropdown-Zellen und
laesst Radio-Matrizen unberuehrt.
Werte sind Stellschrauben.
============================================================================= */
@media only screen and (max-width: 524px) {
/* Label der Unterfrage: wenig Abstand zum eigenen Auswahlfenster */
.multiflexi table.ls-answers th.answertext,
.question-container:has(table.ls-answers td.answer-item select) table.ls-answers th.answertext {
padding-top: 0;
padding-bottom: 6px;
margin: 0;
}
/* Zelle mit dem Auswahlfenster: kompakt, definierter Abstand
zur naechsten Unterfrage */
.multiflexi table.ls-answers td.answer-item,
.question-container:has(table.ls-answers td.answer-item select) table.ls-answers td.answer-item {
padding-top: 0;
padding-bottom: 16px;
margin: 0;
}
.multiflexi table.ls-answers select,
.question-container:has(table.ls-answers td.answer-item select) table.ls-answers select {
margin: 0;
}
/* Leere Zeilen/Zellen (z.B. ausgeblendete Kopfzeilen der Tabelle)
sollen keinen Platz beanspruchen */
.multiflexi table.ls-answers tr:empty,
.multiflexi table.ls-answers th:empty,
.multiflexi table.ls-answers td:empty,
.question-container:has(table.ls-answers td.answer-item select) table.ls-answers th:empty,
.question-container:has(table.ls-answers td.answer-item select) table.ls-answers td:empty {
padding: 0;
margin: 0;
height: 0;
}
}
/* =============================================================================
Fixes (08/2026, nur Mobile): Antwortlisten-Abstaende, Sonstiges-Textfeld,
Prefix/Suffix bei Zahleneingaben
============================================================================= */
@media only screen and (max-width: 524px) {
/* --- 1) Einheitlicher Abstand zwischen ALLEN Antwortoptionen ----------
Teilt LimeSurvey die Antworten auf mehrere
auf, addieren sich deren padding-top/-bottom (je 15px aus theme.css)
zum normalen li-Abstand - einzelne Optionen (z.B. exklusive) erhalten
so mehr Abstand davor. Alle Listen-Polster raus, Abstand kommt
einheitlich vom li-margin. */
.answer-container .ls-answers {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.answer-container ul.ls-answers > li.answer-item {
margin-top: 0 !important;
margin-bottom: 14px !important;
}
/* --- 2) "Sonstiges"-Option: Textfeld bleibt auf derselben Zeile -------
(08/2026, vereinfacht) Zwei Markup-Varianten:
a) Multiple Choice: li.checkbox-text-item > div.row > col-auto / col
b) Single Choice: li.radio-text-item ohne .row (flache Struktur)
Ausrichtung: oben buendig, Feld minim nach unten versetzt (bewusst
keine exakte Zentrierung - die war fragil). Negative Bootstrap-
Raender und Mindest-Inhaltsbreiten werden neutralisiert, damit das
Feld auf schmalen Screens nicht rechts abgeschnitten wird. */
/* a) Row-basierte Struktur (Multiple Choice) */
li.answer-item.checkbox-text-item > .row,
li.answer-item.radio-text-item > .row {
flex-wrap: nowrap;
align-items: flex-start;
margin-left: 0; /* keine Negativraender = kein Ueberlauf */
margin-right: 0;
max-width: 100%;
}
li.answer-item.checkbox-text-item > .row > .col-auto,
li.answer-item.radio-text-item > .row > .col-auto {
flex: 0 1 auto;
min-width: 0;
padding-left: 0;
}
li.answer-item.checkbox-text-item > .row > .col,
li.answer-item.radio-text-item > .row > .col {
flex: 1 1 82px; /* 70px Feld + Spalten-Innenabstand */
min-width: 82px;
max-width: 100%;
padding-right: 0;
}
/* b) Flache Struktur (Single Choice, ohne .row) */
li.answer-item.radio-text-item:not(:has(> .row)),
li.answer-item.checkbox-text-item:not(:has(> .row)) {
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
gap: 10px;
}
li.answer-item.radio-text-item:not(:has(> .row)) > .othertext-label-checkox-container,
li.answer-item.checkbox-text-item:not(:has(> .row)) > .othertext-label-checkox-container {
flex: 0 1 auto;
min-width: 0;
}
li.answer-item.radio-text-item:not(:has(> .row)) > .text-item,
li.answer-item.checkbox-text-item:not(:has(> .row)) > .text-item {
flex: 1 1 70px;
min-width: 70px;
max-width: 100%;
}
/* Gemeinsam: Label-Container ohne Zusatzabstand, Feld fuellt seine
Spalte, ohne Mindest-Inhaltsbreite zu erzwingen, und sitzt leicht
tiefer als der Text (Stellschraube: margin-top) */
li.answer-item.checkbox-text-item .othertext-label-checkox-container,
li.answer-item.radio-text-item .othertext-label-checkox-container {
margin-bottom: 0;
}
li.answer-item.checkbox-text-item .text-item.other-text-item,
li.answer-item.radio-text-item .text-item.other-text-item {
width: 100%;
min-width: 0;
}
li.answer-item.checkbox-text-item .other-text-item input,
li.answer-item.radio-text-item .other-text-item input,
li.answer-item.checkbox-text-item .other-text-item textarea,
li.answer-item.radio-text-item .other-text-item textarea {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
margin-top: 3px; /* Feld leicht nach unten versetzen */
}
/* --- 3) Prefix/Suffix (z.B. "%") neben dem Eingabefeld halten ---------
Vanilla stellt Prefix/Suffix auf kleinen Screens absichtlich
ueber/unter das Feld - hier stattdessen als Flex-Zeile daneben. */
.ls-input-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.ls-input-group > .form-control {
flex: 1 1 auto;
min-width: 0;
width: auto;
}
/* Zahleneingaben (input.numeric): kompaktes Feld, ~4 Stellen plus
etwas Luft (Stellschraube: width) - Suffix rueckt direkt daneben */
.ls-input-group > .form-control.numeric {
flex: 0 1 auto;
width: 7em;
}
.ls-input-group > .ls-input-group-extra {
flex: 0 0 auto;
padding: 0 0 0 0.6em; /* 1rem/1.2rem aus custom.css ersetzen */
}
.ls-input-group > .ls-input-group-extra.prefix-text {
padding: 0 0.6em 0 0;
}
}
/* =============================================================================
Fixes (08/2026): Warnmeldungen (Validierung) & Schriftgroessen
Hinweis-/Warntexte
-----------------------------------------------------------------------------
1) LS6 entfernt erledigte Warnungen nicht aus dem DOM, sondern wechselt
nur die Klasse ls-em-error -> ls-em-success. Der Icon-Fix vom Juli
blendete dafuer bereits das Icon aus - neu verschwindet auch der
Meldungstext.
2) Das Warn-Icon (Ausrufezeichen) stand als Inline-Element allein auf
einer Zeile, weil die Meldung ein Block-Div ist. float: left legt
Icon und Text auf dieselbe Zeile.
3) Hinweis- und Warntexte erhalten dieselbe Schriftgroesse wie die
Antwortoptionen: Desktop/Tablet erben von body (22px bzw. 20px),
Mobile explizit 18px (== Antwortoptionen im 524px-Breakpoint).
============================================================================= */
/* 1) Erledigte/erfuellte Warnungen komplett ausblenden */
.question-valid-container .ls-em-tip.ls-em-success,
.question-valid-container .ls-questionhelp .ls-em-success,
.question-valid-container .ls-em-tip.good {
display: none !important;
}
/* 2) Warn-Icon und Meldung auf derselben Zeile */
.question-valid-container .ls-questionhelp:has(.ls-em-error):before,
.question-valid-container .ls-questionhelp:has(.text-danger):before,
.question-valid-container .ls-questionhelp:has(.error):before {
float: left;
margin-right: 0.4em;
}
/* 3) Schriftgroesse Hinweis-/Warntexte == Antwortoptionen */
.question-help-container,
.question-help-container .ls-questionhelp,
.question-help-container .questionhelp,
.question-valid-container,
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message {
font-size: inherit; /* folgt body: 22px Desktop, 20px Tablet */
}
@media only screen and (max-width: 524px) {
.question-help-container,
.question-help-container .ls-questionhelp,
.question-help-container .questionhelp,
.question-valid-container,
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message {
font-size: 18px; /* == Antwortoptionen mobil */
line-height: 1.45;
}
}