/*
 * Seezeit · Basis (Paket 1.2): Tokens ohne Farbe, Typografie, Flächen und Umfragekarte.
 *
 * Benutzt nur Rollen-Tokens der Farbvariante (css/variations/seezeit_extern.css) und die Werte aus den Vorgaben
 * (KOMPONENTEN.md 0 und 1, BRIEF.md 3). Die Regeln stehen mit gleicher Spezifität hinter der Variante und
 * überschreiben deren Elternregeln. !important steht nur dort, wo das Elterntheme selbst !important oder einen Inline-Style
 * setzt: hier "Kopfzeile im Fluss", die Menüzeilen auf Handys in seezeit-kopf.css und drei Utility-Abstände bzw. ein
 * Punkt-Versatz in seezeit-formulare.css und seezeit-matrix.css (Paket 1.4); jede Stelle ist an Ort und Stelle begründet.
 */

/* ========================================================================== 1 Tokens ohne Farbe */
/* Für alle Farbvarianten gleich. Namen und Werte wie in tokens.css der Seezeit-Vorgaben. */
:root {
  /* Abstandsskala */
  --kern-space-4: 0.25rem;
  --kern-space-8: 0.5rem;
  --kern-space-12: 0.75rem;
  --kern-space-16: 1rem;
  --kern-space-24: 1.5rem;
  --kern-space-32: 2rem;
  --kern-space-48: 3rem;

  /* Schriftgrößen (rem: wachsen mit dem Textzoom) */
  --kern-font-size-11: 0.7rem;
  --kern-font-size-14: 0.875rem;
  --kern-font-size-16: 1rem;
  --kern-font-size-18: 1.125rem;
  --kern-font-size-21: 1.3125rem;
  --kern-font-size-32: 2rem;

  /* ein Standardradius; vollrund nur bei Pills und Punkten */
  --kern-radius-m: 4px;
  --kern-radius-l: 4px;

  /* Stärke der unteren Kante erhöhter Flächen und Knöpfe */
  --kern-edge-w: 4px;

  /* Antwortflächen (Paket 1.4). Mindesthöhe der Fläche 48 px, Auswahlmarker 20 px, Punkt 8 px und das Polster der Fläche stehen
     in px, nicht in rem: Bei großem Textzoom wächst die Schrift, und das Polster soll ihr nicht den Platz nehmen (Antworttexte
     brauchen genug Breite, BRIEF.md 3; bei 200 % Textzoom und 390 px stehen "CampusCafé" und "(Vegetarisch)" so noch ohne
     Umbruch in der Fläche). Eingabefelder (--sz-answer-h) wachsen mit dem Text. Spalten einer Knopfliste sind mindestens
     12 rem breit (wächst mit dem Textzoom): auch das längste Wort der Testumfrage steht ohne Umbruch in der Fläche. */
  --sz-answer-h: 3rem;
  --sz-tile-h: 48px;
  --sz-marker: 20px;
  --sz-dot: 8px;
  --sz-answer-col: 12rem;

  /* Layout dieses Themes: Breite der Karten samt Polster, Rand zum Fenster seitlich (Sand außen, --sz-gutter) und nach oben
     (--sz-gutter-top), Polster der Karte und Abstand zwischen den Fragenkarten (Paket 1.5b: "Karte je Frage", Standard).
     Breite auf großen Bildschirmen (Paket 1.5d, BRIEF.md 3, seit 04.10.): Der Inhaltsbereich (Karte, Kopfzeile, Fortschritt) wächst mit
     dem Fenster bis 80 rem = 1.280 px (bis 1.5c 57,5 rem = 920 px). Antwortbereiche, Matrix-Tabellen und Kachel-Raster füllen die Karte;
     Fließtext bleibt auf 56ch begrenzt (Abschnitte 2 und 3), damit die Zeilen nicht mitwachsen. */
  --sz-content-max: 80rem;
  --sz-gutter: var(--kern-space-24);
  --sz-gutter-top: var(--sz-gutter);
  --sz-card-pad-x: var(--kern-space-32);
  --sz-card-pad-y: var(--kern-space-32);
  --sz-card-gap: var(--kern-space-24);

  /* Dichte (Theme-Option "Dichte", Paket 1.5c; Abschnitt 7): die Maße, die "Kompakt" verkleinert. Die Werte hier sind der Standard und
     stehen so in den Regeln (var(...)) statt als feste Zahl, damit die Option sie ohne zweite Regel ersetzen kann.
     --sz-q-gap       Abstand zwischen zwei Fragen in den Fassungen ohne Karte je Frage ("Eine Karte", "Eingebettet")
     --sz-title-gap   Fragetitel bis Antworten
     --sz-answer-gap  Abstand zwischen Antwortflächen (Listen, Knopflisten, Skala der Matrix)
     --sz-tile-pad-y  Polster oben und unten in einer Antwortfläche (px; die Fläche ist mindestens --sz-tile-h hoch)
     --sz-sub-gap     Abstand zwischen zwei Teilfragen der Matrix (gestapelt) */
  --sz-q-gap: var(--kern-space-48);
  --sz-title-gap: var(--kern-space-12);
  --sz-answer-gap: var(--kern-space-8);
  --sz-tile-pad-y: 12px;
  --sz-sub-gap: var(--kern-space-32);

  /* Bootstrap: nur Familie, Größe und Zeilenhöhe der Seite; die Farben liefert die Variante.
     --bs-font-sans-serif benutzen auch Tooltip und Popover (Systemschrift im Elterntheme). */
  --bs-font-sans-serif: var(--font-family-active);
  --bs-body-font-family: var(--font-family-active);
  --bs-body-font-size: var(--kern-font-size-16);
  --bs-body-line-height: 1.5;
}

/* bis 550 px Breite (Handy; BRIEF.md 3, Abstände, Rückmeldung vom 04.10.): Der Sandrand außen ist 8 px, der Innenabstand der Karte
   16 px; der Rand außen ist nie breiter als der Innenabstand. Die Textbreite bleibt dabei gleich (390 px Fenster: 8 + 1 + 16 = 25 px
   je Seite, wie vorher 16 + 1 + 8). Die Karte ist hier die Fragenkarte (Standard) bzw. die Umfragekarte ("Eine Karte"). Abstand zwischen
   den Fragenkarten 16 px (ab 551 px 24 px). Der Abstand nach oben (--sz-gutter-top: unter der Kopfzeile bzw. dem Fortschritt) bleibt 16 px:
   Nur der seitliche Rand wird 8 px schmal. */
@media (max-width: 550px) {
  :root {
    --sz-gutter: var(--kern-space-8);
    --sz-gutter-top: var(--kern-space-16);
    --sz-card-pad-x: var(--kern-space-16);
    --sz-card-pad-y: var(--kern-space-16);
    --sz-card-gap: var(--kern-space-16);
    --sz-sub-gap: var(--kern-space-24);
  }
}
/* unter 400 px Fensterbreite: Rand und seitliches Polster in px statt rem (Paket 1.5, Punkt 0c; Entscheidung "Option b" aus Paket 1.4).
   In rem wuchsen Seitenrand und Kartenpolster bei großem Textzoom mit und nahmen der Schrift den Platz: Bei 200 % Textzoom und
   320 px blieben 222 px Breite für eine Antwortfläche, und normale Wörter wie "CampusCafé" brachen mitten im Wort um. In px
   bleibt es bei 8 und 16 px, wie bei 100 % Textzoom: Bei 320 px Fenster stehen 270 px Breite für eine Antwortfläche zur Verfügung
   (Summe wie vorher: 16 + 8 = 8 + 16). Bei 100 % Textzoom ändert sich nichts (1 rem = 16 px). Die Schrift und die Abstände
   innerhalb der Karte (auch der Kartenabstand) wachsen weiter mit dem Textzoom. */
@media (max-width: 400px) {
  :root {
    --sz-gutter: 8px;
    --sz-card-pad-x: 16px;
    --sz-card-pad-y: 16px;
  }
}

/* ========================================================================== 2 Seite und Schrift */
body {
  font-family: var(--font-family-active);
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
  /* lange Wörter: Silbentrennung, notfalls Umbruch (KOMPONENTEN.md 0); lang kommt von <html lang> */
  overflow-wrap: break-word;
  hyphens: auto;
  /*
   * Kopfzeile im Fluss: Das Elterntheme legt die Kopfzeile fest an den Fensterrand (.fixed-top) und setzt dafür per
   * JavaScript padding-top am body (Inline-Style, theme.js fixBodyPadding). Unsere Kopfzeile scrollt mit
   * (BRIEF.md 3, keine feste Leiste; Kriterium 14). Gegen einen Inline-Style hilft nur !important.
   */
  padding-top: 0 !important;
}

/* Beschriftungen der Formulare: Textgröße der Seite statt 18 px des Elternthemes */
label {
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
}

/* Meta: Hilfetext, Datenschutzhinweis (14 px; Hilfetext gedämpft #486a7c). Zeilenlänge höchstens 56ch (Paket 1.5d; in Cehora SZ rund
   70 Zeichen, siehe Fließtext in Abschnitt 3): Die Karte ist bis 1.280 px breit, der Hinweis soll nicht mitwachsen. */
.question-container .question-help-container,
.ls-questionhelp {
  max-width: 56ch;
  font-size: var(--kern-font-size-14);
  line-height: 1.5;
  color: var(--kern-color-layout-text-muted);
}
.question-container .question-help-container {
  margin-bottom: var(--kern-space-12);
}
/* Option "Question help text position" = unten (Paket 1.5c): Der Hilfetext steht nach den Antworten, 12 px darunter statt 12 px darüber;
   nach ihm folgt nichts mehr in der Frage (das Polster der Karte genügt). */
.question-container .answer-container ~ .question-help-container {
  margin-top: var(--kern-space-12);
  margin-bottom: 0;
}
/* Prüfhinweise von LimeSurvey ("Bitte wähle eine der folgenden Antworten:", .ls-questionhelp > .ls-question-message) sind Meta:
   14 px, Gewicht 400, #486a7c, nicht kursiv (Paket 1.5b, Typografie V3). Die Elternregel ".question-container .ls-question-message"
   machte den Text 15,96 px groß, kursiv und Dunkelblau (typeset.md V3); die Rolle Meta kennt weder diese Größe noch Kursiv. Ein
   Fehlertext an der Frage behält seine Fehlerfarbe (seezeit-formulare.css, Abschnitt 6, höhere Spezifität). Nebeneffekt: Die
   Kursivdatei (271 KB) lädt nur noch, wenn die Redaktion selbst Kursiv setzt. */
.question-container .ls-questionhelp .ls-question-message {
  font-size: inherit;
  font-style: normal;
  color: inherit;
}
.privacy,
.privacy p,
.privacy .ls-privacy-head {
  font-size: var(--kern-font-size-14);
  line-height: 1.5;
}
.privacy {
  margin-top: var(--kern-space-32);
}
/* Text des Datenschutzhinweises: 14 px, Zeilenlänge höchstens 56ch (Paket 1.5d) */
.privacy .ls-privacy-body {
  max-width: 56ch;
}
/* Option "Hide privacy info" (Paket 1.5c): Ist der Anonymitätshinweis ausgeblendet und gibt es keinen Datenschutztext, bleibt von dem Block nur
   ein leerer Rahmen. Er brächte 32 px Abstand und im Format A ein Stück leere Karte unter der Begrüßung. Ohne :has() bleibt er stehen. */
.privacy:not(:has(.col-12 > *)) {
  display: none;
}

/* ========================================================================== 3 Überschriften */
/* Alle Überschriften ausdrücklich Dunkelblau und in der Seitenschrift, nie grau (BRIEF.md 3) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.large-heading,
.group-title,
.ls-label-question,
.completed-heading,
.modal-title {
  font-family: inherit;
  color: var(--kern-color-layout-text-default);
}

/* Seitentitel: 32 px, Gewicht 900, genau einmal je Seite (Willkommen, Abschluss); bis 550 px 28 px.
   Das Elterntheme setzt die Willkommensüberschrift in IBM Plex Serif. */
.large-heading,
.completed-wrapper .completed-heading,
.quotamessage,
.well .thankyou,
.public-stats .statsSurveyTitle {
  font-family: inherit;
  font-size: var(--kern-font-size-32);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 var(--kern-space-16);
}
@media (max-width: 550px) {
  .large-heading,
  .completed-wrapper .completed-heading,
  .quotamessage,
  .well .thankyou,
  .public-stats .statsSurveyTitle {
    font-size: 1.75rem;
  }
}

/* Gruppenüberschrift: 21 px, Gewicht 800. In Format G die h1 der Seite, in Format A eine h2 je Gruppe. */
.group-container .group-title {
  font-size: var(--kern-font-size-21);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 var(--kern-space-24);
}
.group-container .group-description {
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
  margin-bottom: var(--kern-space-24);
}

/* Fragetitel: 18 px, Gewicht 600 (Paket 1.5d, BRIEF.md 3, "Gewichte seit 04.10."; bis 1.5c 800). Die Gruppenüberschrift darüber bleibt
   21 px, 800. Zeilenlänge des Fragetextes höchstens 56ch bei 18 px (rund 577 px, etwa 70 Zeichen): Die Karte ist bis 1.280 px breit,
   der Text soll nicht mitwachsen (Antworten, Tabellen und Kacheln darunter füllen die Karte). */
.question-container .ls-label-question {
  max-width: 56ch;
  font-size: var(--kern-font-size-18);
  font-weight: 600;
  line-height: 1.4;
}
.question-container .question-title-container {
  margin-bottom: var(--sz-title-gap);
}
/* Ein <strong> oder <b> der Redaktion in Frage- und Gruppentiteln hebt das Gewicht nicht an (Paket 1.5b, Typografie V2): Bootstrap setzt
   "b, strong { font-weight: bolder }", das aus 800 wirksam 900 macht (gemessen: alle 20 Fragetitel der Mensa-Umfrage). Seit 1.5d gilt
   600 für die Frage und 800 für die Gruppe; "bolder" machte aus 600 wirksam 900, die Fragetitel wären dann fetter als die Gruppenüberschrift.
   Mit "inherit" sind die Titel wirklich 600 (Paket 1.5d). Nur das Gewicht: Farbe, Größe und Kursiv der Redaktion bleiben. Die Teilfrage der
   Matrix (th.answertext) ist ausgenommen. */
.question-container .ls-label-question :is(strong, b),
.group-container .group-title :is(strong, b) {
  font-weight: inherit;
}
/* Ausgewogener Umbruch der Titel (Typografie V7): keine Zeile mit nur einem Wort ("Zufriedenheit mit Essen & / Angebot"). Größe, Gewicht und
   Silbentrennung ändern sich nicht; Browser ohne Unterstützung ignorieren die Angabe. */
.large-heading,
.group-title,
.ls-label-question,
.completed-heading {
  text-wrap: balance;
}

/* Fließtext der Willkommens- und Abschlussseite: 16 px (Elterntheme: 20,5 px), Zeilenlänge höchstens 56ch. In Cehora SZ ist 1ch
   0,573 em breit, das mittlere Zeichen aber nur rund 0,46 em; 70ch ergab 79 bis 99 Zeichen je Zeile, 56ch ergibt 56 bis 71 und trifft die
   Vorgabe 65 bis 75 Zeichen (KOMPONENTEN.md 0; Paket 1.5b, Typografie V4). */
.form-heading,
.completed-wrapper .completed-Content,
.survey-welcome,
.survey-description {
  max-width: 56ch;
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
}
/* Fließtext ohne Waisenwort in der letzten Zeile (Typografie V7) */
.survey-welcome p,
.survey-description p,
.group-description p,
.completed-Content p,
.ls-privacy-body {
  text-wrap: pretty;
}
.question-count-text {
  font-size: var(--kern-font-size-16);
  font-weight: 700;
  line-height: 1.5;
}

/* ========================================================================== 4 Links */
/* Dunkelblau wie der Text und deshalb unterstrichen (Farbe trägt nie allein); Hover-Farbe kommt von der Variante */
#main-col a:not(.btn),
#main-col a:not(.btn):hover {
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================================== 5 Seitenfläche, Karte, Abstände */
/* Sand außen (Option "Background color" des Themes, Vorgabe in config.xml), eine weiße Umfragekarte. Die Regeln dieses Abschnitts
   sind die Fassung "Eine Karte" (alle Fragen einer Seite in einer Karte, so bis Paket 1.5); sie gelten auch für die Seiten ohne
   Fragen (Willkommen, Abschluss, Speichern, Laden, Zugangscode, Registrierung). Auf Seiten mit Fragen setzt Abschnitt 6 (Standard
   "Karte je Frage") die Karte um jede Frage statt um die Seite. Rahmen und Karte stehen in den Breiten der Kopfzeile und des
   Fortschritts. */
#outerframeContainer {
  width: 100%;
  max-width: calc(var(--sz-content-max) + 2 * var(--sz-gutter));
  min-height: 0;
  margin: 0 auto;
  padding: var(--sz-gutter-top) var(--sz-gutter) var(--kern-space-48);
}
/* das Bootstrap-Raster ohne eigene Gutter: Breite und Polster bestimmen die Tokens */
#outerframeContainer > .row,
.top-container > .row,
#main-col .row {
  --bs-gutter-x: 0;
}
#outerframeContainer > .row > .col-centered,
.top-container > .row > .top-content {
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
  padding: 0;
}

#main-col {
  margin: 0;
  padding: var(--sz-card-pad-y) var(--sz-card-pad-x);
  background-color: var(--color-surface-active);
  border: 1px solid var(--kern-color-layout-border);
  border-bottom: 3px solid var(--kern-color-layout-edge);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
}
/* innerhalb der Karte bestimmen Polster und Fragenabstand den Rand, nicht die Rasterabstände des Elternthemes */
#main-col .space-col {
  margin-top: 0;
  margin-bottom: 0;
}
/* Format "alles auf einer Seite": zwischen zwei Gruppen 32 px; mit den 48 px unter der letzten Frage der Gruppe (Paket 1.5) sind es 80 px, wie
   in 1.4 (32 + 48). Eine Gruppe setzt sich durch ihre Überschrift (21 px, 800) und den größeren Abstand (80 gegen 48 px zwischen Fragen) ab. */
#main-col .group-outer-container + .group-outer-container {
  margin-top: var(--kern-space-32);
}
/* 48 px zwischen zwei Fragen, innerhalb einer Frage höchstens 12 px (Titel zu Antworten 12 px, Antworten untereinander 8 px,
   "Keine Antwort" 8 px unter den Antworten; BRIEF.md 3, "Keine Antwort", Rückmeldung vom 03.10.). Erst der große Abstand zur
   nächsten Frage zeigt, dass "Keine Antwort" zur eigenen Frage gehört; eine Trennlinie gibt es nicht mehr. Nach der letzten
   Frage einer Gruppe liefert die Frage selbst den Abstand zur Navigation (seezeit-aktionen.css: dort 0 statt 32 px). */
.question-container {
  margin: 0 0 var(--sz-q-gap);
  padding: 0;
}

/* ========================================================================== 6 Karte je Frage (Standard seit Paket 1.5b) */
/* Seitenaufbau (BRIEF.md 3, Flächen; Idee der nutzenden Person vom 04.10.): Auf Seiten mit Fragen ist jede Frage (.question-container)
   eine eigene weiße Karte im Seezeit-Kartenstil (Kontur, kräftigere Unterkante, Radius, Schatten, wie die Umfragekarte). Die große
   Karte um die ganze Seite entfällt. Gruppenüberschrift, Gruppenbeschreibung, Fortschritt und Navigation stehen auf dem Sand.
   Zwischen den Karten liegt Sand: 16 px auf dem Handy, 24 px ab 551 px (--sz-card-gap). Innenabstand der Karte 16 px auf dem Handy,
   darüber 32 px (--sz-card-pad-*; der Sandrand außen ist auf dem Handy 8 px und damit schmaler als der Innenabstand).
   Die Karte ist das Element .question-container selbst. Eine ausgeblendete oder irrelevante Frage (.ls-hidden: display none, auch
   versteckte Gleichungsfragen) nimmt ihre Karte mit; es bleiben weder eine leere Karte noch ein Abstand. Der Hintergrund der Karte
   kommt aus der Theme-Option "Question background color" (voreingestellt Weiß, Inline-Style hinter den CSS-Dateien).
   Seiten ohne Fragen (Willkommen, Abschluss, Speichern, Laden, Zugangscode, Registrierung) bleiben eine Karte (Abschnitt 5). Im Format
   "alles auf einer Seite" (A) stehen die Gruppenüberschriften zwischen den Kartenreihen auf dem Sand, und der Begrüßungsblock samt
   Anonymitätshinweis bleibt eine eigene Karte (am Ende dieses Abschnitts); im Format "Frage für Frage" (S) steht eine Karte je Seite.
   Erkennung ohne Twig: #main-col:has(.question-container). Ein Browser ohne :has() verwirft diesen ganzen Abschnitt und zeigt die
   Fassung "Eine Karte" (Abschnitt 5), also nichts Kaputtes. Die Theme-Option "Darstellung" (Paket 1.5c) setzt das Attribut
   data-sz-darstellung am body (views/layout_global.twig): "karte" (Standard, auch ohne Wert), "eine-karte" (Fassung des Abschnitts 5,
   alle Fragen einer Seite in einer Karte) oder "eingebettet" (Abschnitt 7: keine Karten, transparenter Grund). Dieser Abschnitt gilt
   nur für den Standard; deshalb schließt jeder Selektor die beiden anderen Werte aus (die Spezifität bleibt die einer Klasse). */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) {
  /* oben: Fortschritt und Gruppenüberschrift liegen 24 px auseinander (Rand der Seitenfläche und dieses Polster zusammen) */
  padding: calc(var(--kern-space-24) - var(--sz-gutter-top)) 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* die Karten: Frage, und im Format A Begrüßung und Anonymitätshinweis */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) :is(.question-container, #welcome-container, .privacy) {
  margin: 0 0 var(--sz-card-gap);
  padding: var(--sz-card-pad-y) var(--sz-card-pad-x);
  border: 1px solid var(--kern-color-layout-border);
  border-bottom: 3px solid var(--kern-color-layout-edge);
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-raised);
}
/* Begrüßung und Anonymitätshinweis (Format A) sind keine Fragen und tragen die Fläche der Karte selbst */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) :is(#welcome-container, .privacy) {
  background-color: var(--color-surface-active);
}
/* Gruppenüberschrift und -beschreibung auf dem Sand: 16 px bzw. 24 px (Kartenabstand) bis zur ersten Karte; gehört eine Beschreibung
   dazu, hängt sie mit 8 px an der Überschrift */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) .group-container .group-title {
  margin: 0 0 var(--sz-card-gap);
}
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) .group-container .group-title:has(+ .group-description) {
  margin-bottom: var(--kern-space-8);
}
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) .group-container .group-description {
  margin: 0 0 var(--sz-card-gap);
}
/* Format A: eine Gruppe beginnt 24 px unter der letzten Karte der vorigen (zusammen mit dem Kartenabstand 40 bzw. 48 px) */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) :is(.group-outer-container, .privacy) + .group-outer-container {
  margin-top: var(--kern-space-24);
}
/* Format A: Begrüßung und Anonymitätshinweis sind im Markup zwei Blöcke nebeneinander, bilden aber wie auf der Willkommensseite der anderen
   Formate eine einzige Karte ("Die Willkommensseite bleibt eine Karte"): Die Begrüßung verliert Unterkante, untere Rundung und Schatten,
   der Hinweis die Oberkante und die obere Rundung; Weiß liegt an Weiß, die Seitenlinien laufen durch. Der Abstand zwischen beiden
   (32 px) ist wie in der Karte der anderen Formate das Polster oben im Hinweis. Steht der Hinweis allein (ohne Begrüßung) oder
   die Begrüßung allein (Hinweis ausgeblendet), ist es je eine ganze Karte. */
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) #welcome-container:has(+ .privacy .col-12 > *) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
body:not([data-sz-darstellung="eine-karte"], [data-sz-darstellung="eingebettet"]) #main-col:has(.question-container) #welcome-container + .privacy {
  margin-top: 0;
  padding-top: var(--kern-space-32);
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ========================================================================== 7 Theme-Optionen "Eingebettet" und "Dichte" (Paket 1.5c) */
/* Die Optionen kommen als Attribute am body an (views/layout_global.twig: data-sz-darstellung, data-sz-dichte; dazu data-sz-matrix,
   dessen Regel in seezeit-matrix.css steht). Ohne Wert gelten Standard und "Karte je Frage". */

/* "Eingebettet" (für Umfragen in fremden Webseiten): keine Karten, transparenter Grund, Fragen allein durch Abstand getrennt
   (--sz-q-gap wie in "Eine Karte"). Es gilt für alle Seiten, auch Willkommen, Abschluss und die Formularseiten. Die Kopfzeile verliert Weiß und
   Unterkante (Logo und Menü bleiben; das Logo regelt weiter die Logo-Option). Antwortflächen, Eingabefelder und Knöpfe behalten ihre
   Flächen: Es sind Bedienelemente, keine Karten. Der Hintergrund der Frage kommt sonst aus der Option "Question background color"
   (Inline-Style des Elternthemes, Spezifität 0,1,0). */
body[data-sz-darstellung="eingebettet"] {
  background-color: transparent;
}
body[data-sz-darstellung="eingebettet"] #main-col {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-sz-darstellung="eingebettet"] .question-container {
  background-color: transparent;
}
/* !important: Das Elterntheme setzt die Fläche der Kopfzeile selbst mit !important auf Weiß (siehe seezeit-kopf.css, Kopfzeile). */
body[data-sz-darstellung="eingebettet"] #survey-nav.navbar {
  background-color: transparent !important;
  border-bottom: 0;
}
/* ohne Karte keine Trennlinie über der Navigation: der Abstand der letzten Frage genügt */
body[data-sz-darstellung="eingebettet"] #navigator-container {
  padding-top: 0;
  border-top: 0;
}

/* Dichte "Kompakt": kleinere Abstände, keine kleineren Bedienziele. Antwortflächen bleiben mindestens 44 px hoch (BRIEF.md 3: Bedienziele
   mindestens 44 px; im Standard 48 px). Schrift, Gewichte und Farben ändern sich nicht. Karten rücken enger, die Antworten einer Frage
   liegen 4 statt 8 px auseinander, Titel und Antworten 8 statt 12 px, Teilfragen der Matrix 24 statt 32 px (Handy: 16 statt 24 px). Der
   Abstand zwischen zwei Fragen schrumpft von 24 auf 16 px (Karte je Frage) bzw. von 48 auf 32 px (ohne Karten). Bis 550 px bleibt das seitliche
   Polster der Karte 16 px und steht in px (der Fix gegen Wortbrüche bei 200 % Textzoom, Paket 1.5, Punkt 0c); der Sandrand außen
   (8 px) ist damit nie breiter als das Polster. */
body[data-sz-dichte="kompakt"] {
  --sz-tile-h: 44px;
  --sz-tile-pad-y: 10px;
  --sz-answer-gap: var(--kern-space-4);
  --sz-title-gap: var(--kern-space-8);
  --sz-q-gap: var(--kern-space-32);
  --sz-sub-gap: var(--kern-space-24);
  --sz-card-pad-x: var(--kern-space-24);
  --sz-card-pad-y: var(--kern-space-24);
  --sz-card-gap: var(--kern-space-16);
}
@media (max-width: 550px) {
  body[data-sz-dichte="kompakt"] {
    --sz-sub-gap: var(--kern-space-16);
    --sz-card-pad-x: 16px;
    --sz-card-pad-y: 12px;
    --sz-card-gap: var(--kern-space-12);
  }
}