/*
 * Seezeit · Seitentypen (Paket 1.5): Willkommensseite, Gruppenseite (Beschreibung), Abschlussseite, Seiten mit Formularen
 * (Zwischenspeichern, Laden, Zugangscode, Registrierung) und die Fehlerseite der Systemseiten.
 * Die Umfrageliste und die Wartungsseite haben eigene Dateien (css/survey-list.css, css/maintenance.css), die LimeSurvey nur auf
 * diesen Seiten lädt und die dieselben Dateien des Elternthemes ersetzen.
 *
 * Quellen: BRIEF.md 3 (Typografie, Abstände, Komponenten, Pflicht und Fehler) und 4 (Twig-Liste: kein Twig in diesem Paket),
 * KOMPONENTEN.md 0 und 8, qa/m0/inventar.md 4 (Seitentypen). Farben nur als Rollen-Tokens der Variante.
 * Redaktionell gesetzte Formatierungen (etwa der graue Datenschutzhinweis im Begrüßungstext) bleiben unangetastet.
 *
 * Eingabefelder und Beschriftungen dieser Seiten stehen in seezeit-formulare.css (Abschnitt 5, gilt für die ganze Karte).
 */

/* ========================================================================== 1 Willkommensseite */
/* Ruhige Folge: Titel (32 px, 900; basis) 16 px, Beschreibung 16 px, Begrüßungstext 24 px, Fragenzahl, 32 px, Anonymitätshinweis,
   32 px, Navigation. Die Blöcke des Elternthemes tragen 10 px Außenabstand (.form-heading); die Absätze der Redaktion 16 px. */
#welcome-container .survey-description {
  margin: 0 0 var(--kern-space-16);
}
#welcome-container .survey-welcome {
  margin: 0 0 var(--kern-space-24);
}
#welcome-container .survey-welcome > :last-child {
  margin-bottom: 0;
}
#welcome-container .number-of-questions {
  margin: 0;
}
/* Anonymitätshinweis ("Dies ist eine anonyme Umfrage"): Meta-Größe 14 px, Zeilenhöhe 1,5 (basis), Zeilenlänge wie der Text, Absätze
   mit Abstand. Die Überschrift steht im Satzbau statt in Versalien: Das Elterntheme setzt .text-uppercase (Bootstrap-Utility mit
   !important, deshalb hier auch !important); 11-px-Versalien gibt es nach BRIEF.md 3 nur für kleine Marken und Zähler, nicht für
   Sätze. Zeilenlänge 56ch (statt 70ch, Paket 1.5b, Typografie V4: in Cehora SZ sind das 65 bis 75 Zeichen). */
.privacy .ls-privacy-block {
  max-width: 56ch;
}
.privacy .ls-privacy-head {
  margin: 0 0 var(--kern-space-4);
  font-weight: 700;
  text-transform: none !important;
}
.privacy .ls-privacy-body {
  margin: 0 0 var(--kern-space-8);
}
.privacy .ls-privacy-body:last-child {
  margin-bottom: 0;
}
/* Format "alles auf einer Seite": Begrüßung, Anonymitätshinweis und alle Fragen stehen auf derselben Seite. Die erste Gruppe beginnt
   48 px unter dem Hinweis (wie der Abstand zwischen Fragen); sonst stieß ihre Überschrift an den letzten Absatz. Das Elterntheme gibt
   den Gruppen die Klasse .space-col, die "#main-col .space-col" (seezeit-basis.css) auf 0 setzt, daher die ID. */
#main-col .privacy + .group-outer-container {
  margin-top: var(--kern-space-48);
}
/* Bedienhinweise (Paket M2a; views/subviews/messages/welcome.twig): Kasten "So funktioniert die Umfrage" am Ende des Willkommensblocks, über dem
   Anonymitätshinweis und dem Start-Knopf. Fläche (getönt, ohne Kontur), Info-Symbol und Textfarbe liefert .alert (seezeit-meldungen.css); der Kasten
   sieht damit nie wie ein Eingabefeld aus. Hier stehen nur Überschrift, Liste und Abstände: 24 px über dem Kasten (wie unter dem Begrüßungstext),
   nach unten ohne eigenen Abstand: Den geben der Anonymitätshinweis (32 px Außenabstand oben) bzw. die Navigation (32 px). Die Überschrift hat die
   Zeilenhöhe der Zeile mit dem Symbol (16 px x 1,5 = 24 px). Die Sätze stehen als Liste, je einer pro Zeile. */
#welcome-container .sz-hinweise {
  margin: var(--kern-space-24) 0 0;
}
#welcome-container .sz-hinweise-titel {
  margin: 0 0 var(--kern-space-4);
  font-size: var(--kern-font-size-16);
  font-weight: 700;
  line-height: 1.5;
}
#welcome-container .sz-hinweise-liste {
  margin: 0;
  padding: 0 0 0 1.25em;
}
#welcome-container .sz-hinweise-liste li + li {
  margin-top: var(--kern-space-4);
}

/* ========================================================================== 2 Gruppenseite */
/* Gruppenname (h1.group-title, 21 px, 800; basis) und Beschreibung: Fließtext 16 px, Zeilenlänge 56ch (65 bis 75 Zeichen, Paket 1.5b,
   Typografie V4), 24 px bis zur ersten Frage (in der Fassung "Karte je Frage" der Kartenabstand, seezeit-basis.css Abschnitt 6). Die
   Beschreibung ist Redaktionstext (Absätze, Listen); nach dem letzten Element kein zusätzlicher Abstand. */
/* Der Außenabstand braucht die ID: Das Element trägt .space-col, und "#main-col .space-col" (seezeit-basis.css) setzt ihn auf 0. */
#main-col .group-container .group-description {
  max-width: 56ch;
  margin: 0 0 var(--kern-space-24);
}
.group-container .group-description > :last-child {
  margin-bottom: 0;
}

/* ========================================================================== 3 Abschlussseite */
/* Titel (32 px, 900; basis), Text und Ende-Link: Der Text hat höchstens 70 Zeichen Zeilenlänge, die Blöcke 16 px Abstand. Lange
   Adressen brechen um statt über den Rand zu laufen. */
.completed-wrapper .completed-text > * {
  margin: 0 0 var(--kern-space-16);
}
.completed-wrapper .completed-text > :last-child {
  margin-bottom: 0;
}
.completed-wrapper .completed-text a {
  overflow-wrap: anywhere;
}

/* ========================================================================== 4 Seiten mit Formularen (Speichern, Laden, Zugangscode, Registrierung) */
/* Titel (.large-heading, 28/32 px, 900; basis) und Erklärung (.form-heading: 16 px, 70 Zeichen; basis). Die Absätze der Erklärung
   haben im Elterntheme keinen Abstand; 16 px wie im Begrüßungstext. */
#main-col .form-heading p {
  margin: 0 0 var(--kern-space-16);
}
#main-col .form-heading p:last-child {
  margin-bottom: 0;
}
/* Beschriftung (Name, Passwort, Zugangscode): 16 px, 700, Dunkelblau, 8 px über dem Feld. Das Elterntheme setzt 18 px, 400.
   Nicht in Fragen (dort gilt seezeit-formulare.css, Abschnitt 0) und nicht in der Sprachwahl der Willkommensseite (seezeit-kopf.css). */
#dynamicReloadContainer #main-col label:is(.control-label, .col-form-label):not(.question-container *, .form-change-lang *) {
  display: block;
  margin: 0 0 var(--kern-space-8);
  font-size: var(--kern-font-size-16);
  font-weight: 700;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
}
/* Pflicht (Paket 1.5b, Rückmeldung vom 04.10.): Der Hinweis am Feld steht im selben Stil wie bei den Fragen (seezeit-formulare.css,
   Abschnitt 6): Sternchen und Text ("Zwingend notwendig"; den Text liefert LimeSurvey für Screenreader in der Sprache der Seite)
   in Dunkelblau, fett, 14 px, Zeilenhöhe 1,5, als eigene Zeile 4 px unter der Beschriftung. Vorher stand das Sternchen hochgestellt hinter
   der Beschriftung und der Text mit Abstand daneben; bei langen Beschriftungen brach er mitten im Satz um ("Zwingend / notwendig"). Pflicht
   ist nicht nur ein Sternchen (BRIEF.md 3, Kriterium 7): Das Sternchen im Markup (small.asterisk, aria-hidden) entfällt, weil es dasselbe
   sagt; das Symbol steht vor dem Text. Der Text ist .visually-hidden (Bootstrap-Utility, alle Eigenschaften mit !important), deshalb hier
   mit !important zurückgenommen. */
#dynamicReloadContainer #main-col label:is(.control-label, .col-form-label):not(.question-container *, .form-change-lang *) small.asterisk {
  display: none;
}
#dynamicReloadContainer #main-col label:is(.control-label, .col-form-label):not(.question-container *, .form-change-lang *) .visually-hidden.asterisk {
  display: block;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: var(--kern-space-4) 0 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  font-size: var(--kern-font-size-14);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
}
#dynamicReloadContainer #main-col label:is(.control-label, .col-form-label):not(.question-container *, .form-change-lang *) .visually-hidden.asterisk::before {
  content: "\ea81";
  content: "\ea81" / "";
  margin-right: var(--kern-space-4);
  font-family: "remixicon";
  font-weight: 700;
}
/* Knopfzeile: Zurück (sekundär) links, Aktion (orange) rechts; bei Platzmangel untereinander, die Aktion zuletzt (wie die Navigation
   der Fragen). Das Elterntheme verteilt .col-auto mit .mb-3 (!important). */
#main-col .button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kern-space-12) var(--kern-space-16);
  margin: var(--kern-space-24) 0 0;
}
#main-col .button-row > [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
}
#main-col .button-row > :last-child {
  margin-left: auto !important;
}
#main-col .button-row .float-end {
  float: none !important;
}
/* Zwei Felder nebeneinander (Passwort und Wiederholung beim Zwischenspeichern, Vor- und Nachname bei der Registrierung): 16 px
   Abstand. "#main-col .row" setzt die Spaltenabstände des Rasters auf 0 (seezeit-basis.css); die Spalten haben sonst keinen Abstand. */
#main-col :is(.save-survey-form, .register-form) .row:not(.button-row, .form-change-lang) {
  --bs-gutter-x: var(--kern-space-16);
}
/* Seite für den Zugangscode: LimeSurvey setzt in der Karte (#main-col) ein zweites Element mit derselben ID. Es bekäme Rahmen,
   Polster und Schatten der Karte ein zweites Mal (Karte in der Karte). */
#main-col #main-col {
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Registrierung: Der Kopf (.register-jumbotron) ist im Elterntheme eine Bootstrap-Karte mit Polster. Hier steht der Text bündig mit den
   Feldern, ohne zweite Fläche; die Sprachwahl (rechtsbündig in einer Flex-Zeile) steht links wie auf der Willkommensseite. */
#main-col .register-jumbotron {
  padding: 0;
  border: 0;
  border-radius: 0;
}
#main-col .register-jumbotron .card-body {
  padding: 0;
}
#main-col .register-jumbotron .form-change-lang {
  min-width: 0; /* sonst bleibt die Zeile so breit wie das Feld mit dem langen Sprachnamen und ragt links aus der Karte */
  margin-right: auto;
}
/* Eingabe mit Anzeigeknopf (Zugangscode, "Code anzeigen"): Der Knopf (.input-group-text) trägt in der Variante weiße Schrift auf hellem
   Grund (Kontrast 1,1:1). Hier Dunkelblau auf Weiß mit der Kontur der Felder, 48 px breit und hoch (Bedienziel); Hover wie die
   Antwortflächen, der Fokusring kommt von :root :focus-visible. Das Feld läuft rechts eckig in den Knopf. */
#main-col .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#main-col .input-group > .input-group-text {
  min-width: var(--sz-answer-h);
  justify-content: center;
  padding: 0 var(--kern-space-12);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--kern-color-layout-text-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;
}
@media (hover: hover) {
  #main-col .input-group > .input-group-text:hover {
    background-color: var(--color-surface-hover);
  }
}

/* ========================================================================== 5 Fehlerseite (Systemseite) */
/* layout_errors.twig (Paket 1.5c, Twig-Liste Punkt 3; Rückmeldung vom 04.10.): Typografische Seite auf Sand, keine weiße Karte. Die einzige
   weiße Fläche ist der Logobalken: volle Breite, Logo links und senkrecht mittig. Darunter steht groß der Code (HTTP-Fehler) bzw. der
   Originaltitel (andere Fehler), ein kurzer erklärender Satz und kleiner die Originalmeldung von LimeSurvey. Die Regeln des Elternthemes
   (body.error-page: Arial, 100vh, weißer Grund, Titel 45 px) stehen in der erzeugten Variante, gleiche Spezifität; diese Datei steht
   dahinter und gewinnt. Das grüne Bild des Elternthemes (error.png) gibt das Layout nicht mehr aus. Browser: nichts Besonderes. */
body.error-page {
  display: flow-root;
  min-height: 100vh;
  height: auto;
  margin: 0;
  padding: 0 0 var(--kern-space-48);
  font-family: var(--font-family-active);
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
  background: var(--color-page-active);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Logobalken: Weiß, feine Unterkante, Maße der Kopfzeile der Umfragen (seezeit-kopf.css): Innenabstand 16 px (bis 550 px 12 px), Logo 152 px
   breit (bis 550 px 128 px; in px, damit der Textzoom es nicht aufbläht). Das Logo steht links, mit demselben Rand wie der Text darunter. */
body.error-page .sz-error-bar {
  background-color: var(--color-surface-active);
  border-bottom: 1px solid var(--kern-color-layout-border);
}
body.error-page .sz-error-bar__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  margin: 0 auto;
  padding: var(--kern-space-16) var(--sz-gutter);
}
body.error-page .sz-error-bar .logo {
  display: block;
  width: 152px;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}
@media (max-width: 550px) {
  body.error-page .sz-error-bar__inner {
    padding-top: var(--kern-space-12);
    padding-bottom: var(--kern-space-12);
  }
  body.error-page .sz-error-bar .logo {
    width: 128px;
  }
}

/* Inhalt auf Sand, linksbündig unter dem Logo; 48 px (Handy 32 px) unter dem Balken */
body.error-page .sz-error {
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  margin: 0 auto;
  padding: var(--kern-space-48) var(--sz-gutter) 0;
}
@media (max-width: 550px) {
  body.error-page .sz-error {
    padding-top: var(--kern-space-32);
  }
}

/* Der Code (nur bei HTTP-Fehlern): Cehora SZ, Gewicht 900, Dunkelblau. Die Rollenskala der Vorgaben hat keine Größe für eine Schlagzahl;
   übernommen ist die Größe des Anzeigetitels im Prototyp (salatbar-bowl.html, .start__title: clamp(3rem, 10vw, 6rem), Zeilenhöhe 0,92,
   Buchstabenabstand -0,04 em): 48 px auf dem Handy, bis 96 px auf großen Fenstern. rem-Werte: Bei großem Textzoom wächst er mit. */
body.error-page .sz-error__code {
  margin: 0 0 var(--kern-space-24);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  hyphens: none;
  color: var(--kern-color-layout-text-default);
}
/* Titel anderer Fehler (ohne Code): Seitentitel der Vorgaben, 32 px, Gewicht 900; bis 550 px 28 px */
body.error-page .sz-error__title {
  margin: 0 0 var(--kern-space-16);
  font-size: var(--kern-font-size-32);
  font-weight: 900;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--kern-color-layout-text-default);
}
@media (max-width: 550px) {
  body.error-page .sz-error__title {
    font-size: 1.75rem;
  }
}
/* der erklärende Satz: 18 px, Gewicht 400 (wie .start__lead im Prototyp), Zeilenlänge höchstens 56ch */
body.error-page .sz-error__lead {
  max-width: 56ch;
  margin: 0 0 var(--kern-space-32);
  font-size: var(--kern-font-size-18);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

/* die Originalmeldung von LimeSurvey: Zeilenlänge 56ch (V4). Steht darüber ein erklärender Satz, ist sie Meta (14 px, gedämpft); sonst ist
   sie der eigentliche Inhalt der Seite und steht in Textgröße. Ihre Absätze liefert LimeSurvey mit Bootstrap-Abständen; hier einheitlich 8 px. */
body.error-page .sz-error__original {
  max-width: 56ch;
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
}
body.error-page .sz-error--lead .sz-error__original {
  font-size: var(--kern-font-size-14);
  color: var(--kern-color-layout-text-muted);
}
body.error-page .sz-error__original :is(.error-title, .error-content, .error-contact) {
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}
body.error-page .sz-error__original :is(.error-title, .error-content, .error-contact) {
  margin: 0 0 var(--kern-space-8);
}
body.error-page .sz-error__original .error-content > p {
  margin: 0 0 var(--kern-space-8);
}
body.error-page .sz-error__original :is(.error-content > p, .error-content):last-child,
body.error-page .sz-error__original > :last-child {
  margin-bottom: 0;
}
/* die erste Zeile ("404: Not Found - ..."): Meta-Gewicht 600 */
body.error-page .sz-error__original .error-title {
  font-weight: 600;
}
body.error-page .sz-error__original pre {
  max-width: 100%;
  margin: var(--kern-space-16) 0 0;
  overflow: auto;
  font-size: var(--kern-font-size-14);
}
body.error-page .sz-error__original a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: var(--kern-color-layout-text-default);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.error-page .sz-error__original a:hover {
  color: var(--color-link-hover);
}

/* ========================================================================== 9 Schmale Karte für Seiten ohne Antwortbereich (Paket 1.5e) */
/* Willkommen, Zugangscode, Registrierung, Speichern, Laden und Abschluss haben keine Fragen: Auf großen Bildschirmen wirkte die Karte
   mit 1.280 px (Breite der Fragenseiten, Paket 1.5d) leer und gedehnt, der Fließtext stand mit 56ch (rund 513 px) verloren darin und das
   Eingabefeld des Zugangscodes füllte die ganze Karte (Entscheidung nach Lauf 3). Diese Seiten bekommen eine schmalere, mittig stehende
   Karte von 48 rem (768 px); der Fließtext bleibt bei 56ch, Eingabefelder werden nicht breiter als 28 rem. Kopfzeile und Fortschritt
   behalten die Breite des Inhaltsbereichs. Fragenseiten (#main-col:has(.question-container)) behalten die Breite bis 1.280 px; im
   Format "alles auf einer Seite" steht der Begrüßungsblock innerhalb der Fragenseite und bleibt deshalb unberührt. Auf dem Handy ist die
   Karte ohnehin schmaler als 48 rem. Erkennung ohne Twig über :has() (wie Abschnitt 6 in seezeit-basis.css); ohne :has() bleibt die
   breite Karte, nichts Kaputtes. */
#main-col:not(:has(.question-container)) {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}
#main-col:not(:has(.question-container)) :is(input.form-control, select.form-select, select.form-control):not([type="checkbox"], [type="radio"], [type="hidden"]) {
  max-width: 28rem;
}