/* dito ASK — Teilnahme (mobil zuerst, ab 320 px). Baut auf app.css auf. */
/* Die Teilnahme folgt immer dem Erscheinungsbild der Umfrage (helle Karte, geprüfte Kontraste) – der Dunkelmodus des
   Systems aus app.css gilt hier nicht: er färbte die Karte dunkel, während Text- und Themenfarbe aus dem Design (für
   weiße Flächen geprüft) blieben → unlesbar (Fehlerbild 10.10.2026). Daher Farbtoken hier wieder hell festlegen. */
html { color-scheme: light; }
/* Sprint 6i (axe-core, WCAG 2.1 AA): gedämpfter Text und Fehlermeldungen aus public-base.css lagen knapp unter 4,5:1
   (#64748b auf #f6f7f9 = 4,43; #dc2626 auf #fef2f2 = 4,41) – hier dieselben geprüften Werte wie im Dunkelmodus-Block */
:root { --color-muted: #5b6573; --color-error: #b3261e; --color-error-bg: #fdecea; }
@media (prefers-color-scheme: dark) {
  :root { --color-bg: #f6f7f9; --color-surface: #ffffff; --color-text: #1c2330; --color-muted: #5b6573; --color-border: #d9dee6; --color-primary: #1f5f8b; --color-primary-contrast: #ffffff; --color-primary-hover: #17496c; --color-error-bg: #fdecea; --color-error: #b3261e; }
}
/* Programmatisch fokussierte Überschrift (Screenreader-Einstieg je Seite) ohne sichtbaren Fokusrahmen */
.card--survey h1[tabindex="-1"]:focus, .card--survey h2[tabindex="-1"]:focus { outline: none; }
.main--public { max-width: 720px; padding: var(--space-3); }
.card--survey { padding: var(--space-4); overflow: hidden; }
/* Erscheinungsbild (Sprint 4b): Titelbild bzw. Farbleiste oben in der Karte; Bild skaliert ohne Überlauf */
.banner { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); background: var(--design-header, var(--color-primary)); line-height: 0; }
.banner--bar { height: 10px; }
.banner__img { display: block; width: 100%; height: auto; max-height: 40vh; object-fit: cover; }
body.themed { background: var(--color-bg); }
/* Kein horizontaler Überlauf: lange Wörter/Links umbrechen, Medien begrenzen */
.card--survey, .q, .q-info, .intro, .privacy, .q-label, .choice, .q-group__title { overflow-wrap: anywhere; min-width: 0; }
.card--survey img, .card--survey video, .card--survey table { max-width: 100%; }
/* Lange deutsche Wörter (z. B. „Schulentwicklungsprogramm“) mit Trennstrich umbrechen statt seitlich hinausragen (lang="de") */
.card--survey { -webkit-hyphens: auto; hyphens: auto; }
.card--survey input, .card--survey textarea, .card--survey select { -webkit-hyphens: manual; hyphens: manual; }
/* Messansicht für „Für Handy aufteilen“: alle Seiten untereinander (nur im Editor-iframe) */
.measure .card--survey { margin-bottom: 48px; }
.survey-title { font-size: 1.35rem; margin: 0 0 var(--space-3); }
.intro p, .privacy p { margin: 0 0 var(--space-3); }
.privacy { margin-bottom: var(--space-4); }
.privacy summary { cursor: pointer; font-weight: 600; min-height: var(--touch); display: flex; align-items: center; }
.testbadge { display: inline-block; background: #fff4d6; color: #7a5a00; border: 1px solid #e3c25a; border-radius: 999px; padding: 2px var(--space-3); font-size: .85rem; margin: 0 0 var(--space-3); }
.btn--big { width: 100%; font-size: 1.1rem; min-height: 52px; }
.field--check label { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 400; }
.field--check input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.field-error { color: var(--color-error); font-size: .9rem; margin: var(--space-1) 0 0; }

.progress { position: relative; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; height: 22px; margin-bottom: var(--space-4); overflow: hidden; }
.progress__bar { height: 100%; background: var(--color-primary); transition: width .3s; }
.progress__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--color-text); }

.survey-page h2 { font-size: var(--fs-title, 1.15rem); margin: 0 0 var(--space-3); }
.q { margin: 0 0 var(--space-5); padding: var(--space-3); border-radius: var(--radius); border: 1px solid transparent; }
.q--invalid { border-color: var(--color-error); background: var(--color-error-bg); }
.q-label { display: block; font-weight: 600; font-size: var(--fs-item, 1.05rem); margin-bottom: var(--space-2); padding: 0; }
.q-no { color: var(--color-muted); }
.q-inst { color: var(--color-muted); font-size: var(--fs-instruction, .9rem); margin: 0 0 var(--space-2); }
/* Schriftgrößen des Erscheinungsbilds (Nachtrag 4r): --fs-* setzt die Teilnahme per CSSOM aus design.font_sizes (px);
   Antwortskalen/Fragen überschreiben --fs-option/--fs-emoji am Frageelement. Ohne Angabe gelten die bisherigen Werte. */
.intro, .q-info, .page-desc { font-size: var(--fs-block, inherit); }
.matrix-row__label { font-size: var(--fs-item, inherit); }
select.q-input { font-size: var(--fs-option, 1rem); }
.q-info p { margin: 0 0 var(--space-2); }
/* Gestaltungselemente (Fix 3, 14.10.2026): Trennlinie und Bild; Abstände je Element per CSSOM (margin-top/-bottom) */
.q--divider { padding-top: 0; padding-bottom: 0; }
.q-divider { border: 0; border-top: 1px solid var(--color-border-strong, var(--color-border)); margin: 0 auto; width: 100%; height: 0; }
.q-divider--theme { border-top-color: var(--color-primary); }
.q--image { line-height: 0; }
.q--image-left { text-align: left; } .q--image-center { text-align: center; } .q--image-right { text-align: right; }
.q-image { max-width: 100%; height: auto; display: inline-block; border-radius: var(--radius); vertical-align: top; }
.q-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.q-input { width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; font-size: 1rem; background: var(--color-surface); color: var(--color-text); }
.q-input--short { max-width: 240px; }
.q-row { display: flex; align-items: center; gap: var(--space-2); }
.q-unit { color: var(--color-muted); }
.q-error { color: var(--color-error); margin: var(--space-2) 0 0; font-weight: 600; }
.q-other { margin-top: var(--space-2); }
.q-other label { display: block; font-size: .9rem; margin-bottom: var(--space-1); }
.error ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.error a { color: inherit; }

.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; }
.choice input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--color-primary); }
.choice:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.choice:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.choice--special { border-style: dashed; }
.choices--button .choice, .choices--likert .choice, .choices--emoji .choice, .choices--stars .choice { justify-content: center; text-align: center; }
.choices--button, .choices--likert, .choices--emoji, .choices--stars, .choices--inline { flex-direction: row; flex-wrap: wrap; }
.choices--button .choice, .choices--likert .choice, .choices--inline .choice { flex: 1 1 calc(50% - var(--space-2)); min-width: 120px; }
.choices--emoji .choice, .choices--stars .choice { flex: 1 1 60px; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
.choices--button .choice input, .choices--likert .choice input, .choices--emoji .choice input, .choices--stars .choice input, .choices--inline .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__visual { font-size: var(--fs-emoji, 1.8rem); line-height: 1; }
.choices--stars .choice__visual { color: #c9a227; }
.choices--stars .choice:has(input:checked) .choice__visual { color: #e0a800; text-shadow: 0 0 2px #7a5a00; }
.choice__text { font-size: var(--fs-option, .95rem); }
/* Anzeigeart (Nachtrag 4o): Exportcode als kompakte Ziffer, Emoji-Kopfzeilen größer */
.choice__text--code { font-weight: 600; font-variant-numeric: tabular-nums; }
.choices--mode-code .choice { justify-content: center; text-align: center; }
.matrix-head__opt--glyph { font-size: var(--fs-emoji, 1.2rem); line-height: 1.2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Anordnung aus der Antwortskala (nebeneinander / untereinander) – überschreibt die Vorgabe der Darstellung */
/* „nebeneinander“ (Sprint 4e): alle Optionen in EINER Zeile, gleich breit; Text bricht innerhalb der Schaltfläche um.
   Vorher Mindestbreite 120 px / Basis 50 % → ab drei Optionen zwei Zeilen. Emoji/Sterne behalten ihre Kacheln. */
.choices--layout-horizontal { flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
.choices--layout-horizontal .choice { flex: 1 1 0; min-width: 0; padding: var(--space-2) var(--space-1); font-size: var(--fs-option, .92rem); line-height: 1.25; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
.choices--layout-horizontal.choices--emoji .choice, .choices--layout-horizontal.choices--stars .choice { flex: 1 1 0; }
@media (max-width: 639px) { .choices--layout-horizontal .choice { font-size: var(--fs-option, .82rem); padding: var(--space-2) 4px; } }
.choices--layout-horizontal.choices--radio .choice, .choices--layout-horizontal.choices--checkbox .choice { justify-content: flex-start; }
.choices--layout-vertical { flex-direction: column; flex-wrap: nowrap; }
.choices--layout-vertical .choice { flex: none; width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; }
.choices--layout-vertical .choice__visual { font-size: var(--fs-emoji, 1.4rem); }

.slider-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.slider { width: 100%; min-height: var(--touch); accent-color: var(--color-primary); }
.slider__labels { display: flex; justify-content: space-between; font-size: var(--fs-option, .85rem); color: var(--color-muted); }
.slider__value { font-weight: 600; text-align: center; }

.q-matrix .matrix-head { display: none; }
/* Matrix-Batterie: mehrere Items mit derselben Antwortskala als eine Tabelle; jede Zeile bleibt ein eigenes .q (Fehler, Pflicht) */
.q-battery { margin: 0 0 var(--space-5); }
.q-battery .q { margin: 0; padding: 0 var(--space-3); }
.q-battery .q--invalid { border-color: var(--color-error); }
.q-battery .matrix-row { padding: var(--space-3) 0 var(--space-2); box-shadow: none; } /* Trennlinie am Zeilen-Wrapper, nicht durch die Legende */
.q-battery .q--row + .q--row { border-top: 1px solid var(--color-border); }
.q-battery .matrix-row__label { font-weight: 600; margin-bottom: var(--space-2); }
.q-inst--inline { display: block; font-weight: 400; }
.q-battery .q-error { margin: 0 0 var(--space-2); }
.matrix-row { border: 0; padding: var(--space-3) 0 var(--space-2); margin: 0; box-shadow: 0 -1px 0 var(--color-border); }
.matrix-row__label { font-weight: 600; padding: 0; margin-bottom: var(--space-2); }
.matrix-row .choice { min-width: 0; flex: 1 1 calc(33% - var(--space-2)); font-size: var(--fs-option, .9rem); padding: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.survey-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.survey-nav .btn { flex: 1; min-height: 52px; font-size: 1.05rem; }
.survey-nav .btn--primary { width: auto; }
.survey-nav .btn:only-child { margin-left: auto; }

@media (min-width: 640px) {
  .main--public { padding: var(--space-5) var(--space-4); }
  .card--survey { padding: var(--space-5); }
  .q-matrix .matrix-head { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(var(--cols, 5), 1fr); gap: var(--space-1); font-size: var(--fs-option, .8rem); color: var(--color-muted); text-align: center; align-items: end; padding: 0 0 var(--space-1); }
  .matrix-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) 1fr; align-items: center; gap: var(--space-2); }
  .matrix-row__label { margin: 0; font-weight: 400; }
  .matrix-row .choices--inline { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: var(--space-1); }
  .matrix-row .choice { padding: var(--space-1); min-height: 40px; justify-content: center; }
  .matrix-row .choice__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix-row .choice:not(:has(.choice__visual))::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-primary); box-sizing: border-box; }
  .matrix-row .choice:not(:has(.choice__visual)):has(input:checked)::before { background: var(--color-primary); box-shadow: inset 0 0 0 3px var(--color-surface); }
  .choices--inline .choice { flex: 1; }
  .q-battery .matrix-head { padding: 0 var(--space-3) var(--space-1); grid-template-columns: minmax(200px, 2.2fr) repeat(var(--cols, 5), 1fr); }
  /* Batteriezeile und Kopfzeile teilen dasselbe Spaltenraster (Optionen als direkte Rasterzellen) */
  .q-battery .matrix-row { grid-template-columns: minmax(200px, 2.2fr) repeat(var(--cols, 5), 1fr); gap: var(--space-1); }
  .q-battery .matrix-row .choices--inline { display: contents; }
  .q-battery .matrix-row__label { font-weight: 400; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .progress__bar { transition: none; } }

.q-group { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.q-group__title { font-weight: 700; padding: 0 var(--space-2); }
.q-group .q { margin-bottom: var(--space-3); }
/* Kein Leerraum am Gruppenende (Batterie/Frage als letztes Element) */
.q-group > :last-child { margin-bottom: 0; }

/* Smartphone (Sprint 4b): kompakter Kopf und kompakte Batterien, damit eine Seite ohne Scrollen auf den Bildschirm passt */
@media (max-width: 639px) {
  .survey-title--later { display: none; }
  .progress { height: 20px; margin-bottom: var(--space-3); }
  /* Gruppen ohne Rahmen und Innenabstand: volle Textbreite, weniger Zeilen; Navigation näher am Inhalt */
  .q-group { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--space-3); min-inline-size: 0; }
  .q-group__title { padding: 0; margin-bottom: var(--space-1); }
  .q-group > .q-inst { font-size: var(--fs-instruction, .85rem); }
  .q-battery { margin-bottom: var(--space-3); }
  .survey-nav { margin-top: var(--space-3); }
  /* Batterie bis 7 Optionen: Optionen einmal als Spaltenkopf, je Item Aussage über einer Zeile Auswahlkreise */
  .q-battery--compact { position: relative; }
  .q-battery--compact .matrix-head { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 2px; font-size: var(--fs-option, .72rem); line-height: 1.2; color: var(--color-muted); text-align: center; align-items: end; padding: 0 0 var(--space-1); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: normal; word-break: normal; }
  .q-battery--compact .matrix-head > span:first-child { display: none; }
  .q-battery--compact .q { padding: 0; }
  .q-battery--compact .matrix-row { display: block; padding: var(--space-2) 0 var(--space-1); }
  .q-battery--compact .matrix-row__label { font-weight: 400; margin: 0 0 var(--space-1); }
  .q-battery--compact .matrix-row .choices--inline { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 2px; }
  .q-battery--compact .matrix-row .choice { min-width: 0; min-height: var(--touch); padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .q-battery--compact .matrix-row .choice:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
  .q-battery--compact .matrix-row .choice__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .q-battery--compact .matrix-row .choice:not(:has(.choice__visual))::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-primary); box-sizing: border-box; }
  .q-battery--compact .matrix-row .choice:not(:has(.choice__visual)):has(input:checked)::before { background: var(--color-primary); box-shadow: inset 0 0 0 4px var(--color-surface); }
  .q-battery--compact .matrix-row .choice__visual { font-size: var(--fs-emoji, 1.5rem); }
}

/* Hybride Ausgabe (Nachtrag 4c): eine Umfrage für PC, Tablet und Handy.
   < 640 px Smartphone (kompakt, s. o.) · 640–1023 px Tablet · ≥ 1024 px Desktop. Auf Touch-Geräten (Tablet, Handy)
   größere Tippflächen unabhängig von der Breite. */
@media (min-width: 640px) and (max-width: 1023px) {
  .main--public { max-width: 760px; padding: var(--space-5) var(--space-4); }
  .card--survey { font-size: 1.02rem; }
  .survey-nav .btn { min-height: 56px; }
}
@media (min-width: 1024px) {
  .main--public { max-width: 800px; padding: var(--space-6) var(--space-5); }
}
/* Nur ab Tablet-Breite: unter 640 px bleibt die gemessene Smartphone-Darstellung („Für Handy aufteilen“) unverändert */
@media (min-width: 640px) and (pointer: coarse) {
  .choice { min-height: 48px; }
  .matrix-row .choice { min-height: 46px; }
  .survey-nav .btn { min-height: 56px; }
  .card--survey input:not([type=radio]):not([type=checkbox]), .card--survey select, .card--survey textarea { min-height: 48px; font-size: 1.05rem; }
}

/* ---- Erkennungsemoji je Item (Sprint 4d): zwei Spalten – schmale, einheitliche Emoji-Spalte, dann der Item-Inhalt.
   Breite der Spalte ist in allen Umfragen gleich und wächst nur mit dem Gerät (Smartphone 2 rem, Tablet 2.25 rem,
   Desktop 2.5 rem). Das Emoji ist rein visuell (aria-hidden); in Batteriezeilen steht es vor dem Zeilentext. */
:root { --emoji-col: 2rem; --emoji-size: 1.45rem; }
.q--emoji { display: grid; grid-template-columns: max(var(--emoji-col), calc(var(--fs-item-emoji, var(--emoji-size)) * 1.35)) minmax(0, 1fr); column-gap: var(--space-2); align-items: start; }
.q--emoji > .q-emoji { grid-column: 1; grid-row: 1; }
.q--emoji > .q-body { grid-column: 2; grid-row: 1; min-width: 0; }
.q-emoji { display: inline-flex; justify-content: center; align-items: center; width: max(var(--emoji-col), calc(var(--fs-item-emoji, var(--emoji-size)) * 1.35)); font-size: var(--fs-item-emoji, var(--emoji-size)); line-height: 1.25; flex: none; user-select: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; }
.q--emoji > .q-emoji { line-height: 1.55; } /* optisch mittig zur ersten Textzeile der Frage (1.05 rem × 1.5) */
.matrix-row__label--emoji { display: flex; align-items: flex-start; gap: var(--space-2); }
.matrix-row__label--emoji .q-emoji { line-height: 1.45; }
.matrix-row__label--emoji .matrix-row__text { min-width: 0; flex: 1 1 auto; }
@media (min-width: 640px) { :root { --emoji-col: 2.25rem; --emoji-size: 1.55rem; } }
@media (min-width: 1024px) { :root { --emoji-col: 2.5rem; --emoji-size: 1.65rem; } }

/* ---- Sprachwahl auf der Startseite (Sprint 4d) ---- */
.langs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.langs .lang { min-height: 40px; }
.langs .lang--active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }

/* ---- Rechts-nach-links (Farsi, Arabisch): logische Abstände, Navigation gespiegelt ---- */
[dir="rtl"] .card--survey { -webkit-hyphens: manual; hyphens: manual; text-align: start; }
[dir="rtl"] .error ul { padding-left: 0; padding-right: var(--space-5); }
[dir="rtl"] .choices--layout-vertical .choice { text-align: start; }
[dir="rtl"] .survey-nav .btn:only-child { margin-left: 0; margin-right: auto; }
[dir="rtl"] .q-no { margin-left: .25em; }
/* Deutscher Fallback-Text in einer RTL-Umfrage: Richtung je Absatz aus dem ersten starken Zeichen (wie dir="auto") */
[dir="rtl"] .q-label, [dir="rtl"] .matrix-row__label, [dir="rtl"] .matrix-row__text, [dir="rtl"] .choice__text, [dir="rtl"] .q-info, [dir="rtl"] .survey-title, [dir="rtl"] .survey-page h2, [dir="rtl"] .page-desc, [dir="rtl"] .q-inst, [dir="rtl"] .q-group__title, [dir="rtl"] .matrix-head__opt, [dir="rtl"] .intro, [dir="rtl"] .q-error, [dir="rtl"] .card--survey h1 { unicode-bidi: plaintext; }

/* ==== Motivierende Teilnahme (Sprint 4h): Etappenleiste, Abzeichen, Meilensteine, Begleitfigur, Ablauf, Bilanz ====
   Stufe plain: unverändert (Balken). friendly: Etappenleiste + Meilensteinseiten + Dauer + Bilanz.
   journey: zusätzlich Abzeichenleiste, Begleitfigur (nur Start/Meilenstein/Ende) und Abzeichensammlung.
   Alles ohne Inline-Styles; Farben aus dem Erscheinungsbild (--color-primary), Figur: Hautton neutral hell, Haare #181f26. */
.journey { margin: 0 0 var(--space-4); min-width: 0; }
.sicon { width: 18px; height: 18px; display: block; flex: none; }
.sicon--inline { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

/* Etappenleiste: Punkte mit Icon, verbunden durch eine Linie; erledigt gefüllt, aktiv als Ring, kommend grau */
.stages { list-style: none; display: flex; align-items: flex-start; margin: 0; padding: 0; min-width: 0; }
.stage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
.stage__dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); box-sizing: border-box; position: relative; z-index: 1; }
.stage--done .stage__dot { background: var(--stage-color, var(--color-primary)); border-color: var(--stage-color, var(--color-primary)); color: #fff; }
.stage--active .stage__dot { border-color: var(--stage-color, var(--color-primary)); color: var(--stage-color, var(--color-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color, var(--color-primary)) 18%, transparent); }
.stage:not(:last-child)::after { content: ''; position: absolute; top: 16px; inset-inline-start: calc(50% + 19px); inset-inline-end: calc(-50% + 19px); height: 2px; background: var(--color-border); }
.stage--done:not(:last-child)::after { background: var(--stage-color, var(--color-primary)); }
.stage__label { font-size: .72rem; line-height: 1.15; color: var(--color-muted); max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; padding: 0 2px; }
.stage--active .stage__label { color: var(--stage-color, var(--color-primary)); font-weight: 600; }
.stage__pos { margin: var(--space-2) 0 0; font-size: .8rem; color: var(--color-muted); text-align: center; }
.stage__pos > span { unicode-bidi: isolate; }
.stage__pos-name { display: none; }
/* viele Etappen: kleinere Punkte, ab 13 nur Kreise ohne Icon */
.stages--many .stage__dot { width: 26px; height: 26px; }
.stages--many .stage__dot .sicon { width: 14px; height: 14px; }
.stages--many .stage:not(:last-child)::after { top: 12px; inset-inline-start: calc(50% + 15px); inset-inline-end: calc(-50% + 15px); }
.stages--dense .stage__dot { width: 18px; height: 18px; }
.stages--dense .stage__dot .sicon { width: 10px; height: 10px; }
.stages--dense .stage:not(:last-child)::after { top: 8px; inset-inline-start: calc(50% + 11px); inset-inline-end: calc(-50% + 11px); }
.stages--dense .stage__label, .stages--many .stage__label { display: none; }
.stages--dense ~ .stage__pos .stage__pos-name, .stages--many ~ .stage__pos .stage__pos-name { display: inline; }

/* Abzeichenleiste (Stufe Reise): dauerhaft sichtbar über der Etappenleiste */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-3); }
.badges__label { font-size: .75rem; color: var(--color-muted); margin-inline-end: auto; }
.badge { width: 26px; height: 26px; display: block; flex: none; }
.badge.badge--big { width: 44px; height: 44px; }
.badges__item { display: inline-flex; }
.bd-shape { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 3; }
.badge--done .bd-shape { fill: var(--stage-color, var(--color-primary)); stroke: var(--stage-color, var(--color-primary)); }
.badge--active .bd-shape { stroke: var(--stage-color, var(--color-primary)); }
.badge--todo .bd-shape { stroke-dasharray: 4 4; }
.badge--todo { opacity: .55; }
.bd-ring { fill: none; stroke: #fff; stroke-width: 2; opacity: .6; }
.bd-text { font: 700 22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--color-muted); }
.badge--done .bd-text { fill: #fff; }
.badge--active .bd-text { fill: var(--stage-color, var(--color-primary)); }
.bd-motif { fill: #fff; }
.bd-line { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.badge--plaque .bd-line { stroke: var(--stage-color, var(--color-primary)); stroke-width: 1.6; }
.bd-accent { fill: var(--color-primary); }
.badges--final { gap: var(--space-3); margin: var(--space-3) 0 0; }
.badges__item--final { flex-direction: column; align-items: center; width: 72px; gap: 4px; }
.badges__name { font-size: .72rem; line-height: 1.15; color: var(--color-muted); text-align: center; overflow-wrap: anywhere; max-width: 100%; }

/* Startseite: Dauer, „keine richtigen oder falschen Antworten“, Ablauf; Dankesseite: Bilanz */
.overview { margin: var(--space-2) 0 var(--space-3); }
.meta-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); font-size: .9rem; color: var(--color-muted); }
.meta-line__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.stage-list__title { margin: 0 0 var(--space-1); font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.stage-list__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px var(--space-3); }
.stage-list__items li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: .92rem; }
.stage-list__items li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.stage-list__dot { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--stage-color, var(--color-primary)) 12%, var(--color-surface)); color: var(--stage-color, var(--color-primary)); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stage-list__dot .sicon { width: 16px; height: 16px; }
.finish { margin: var(--space-2) 0 var(--space-3); }
.finish__line { font-weight: 600; margin: 0 0 var(--space-1); }
.finish__summary { margin: 0; color: var(--color-muted); }

/* Begleitfigur: nur Start-, Meilenstein- und Dankesseite */
.hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: center; margin: 0 0 var(--space-3); min-width: 0; }
.hero--plain { display: block; }
.hero__figure { display: flex; align-items: flex-end; justify-content: center; }
.hero__body { min-width: 0; }
.hero__body h1 { margin-top: 0; }
.companion { width: 96px; height: auto; display: block; }
.hero--milestone { grid-template-columns: 110px minmax(0, 1fr); align-items: start; }
.hero--milestone .companion { width: 110px; }
.cp-body { fill: var(--color-primary); }
.cp-arm { fill: none; stroke: var(--color-primary); stroke-width: 12; stroke-linecap: round; }
.cp-skin { fill: #f2dcc8; }
.cp-hair, .cp-ink { fill: #181f26; }
.cp-glint { fill: #fff; }
.cp-mouth { fill: none; stroke: #181f26; stroke-width: 2.6; stroke-linecap: round; }
.cp-cheek { fill: var(--color-primary); opacity: .28; }
.bubble { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); font-size: 1rem; }
.bubble::after { content: ''; position: absolute; top: 20px; inset-inline-start: -7px; width: 12px; height: 12px; background: var(--color-surface); border-inline-start: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); transform: rotate(45deg); }
[dir="rtl"] .bubble::after { transform: rotate(-135deg); border-inline-start: 0; border-bottom: 0; border-inline-end: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }
.bubble p { margin: 0; }

/* Meilensteinseite: eine Schaltfläche, keine Frage; Haken-/Abzeichen-Animation einmalig */
.card--milestone .milestone__title { font-size: 1.3rem; margin: 0 0 var(--space-1); }
.milestone__text { margin: 0; font-size: 1rem; }
.milestone__next { margin: var(--space-1) 0 0; color: var(--color-muted); }
.milestone__icon-wrap { text-align: center; }
.milestone__icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--stage-color, var(--color-primary)) 12%, var(--color-surface)); color: var(--stage-color, var(--color-primary)); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--space-2); }
.milestone__icon .sicon { width: 32px; height: 32px; }
.milestone__check { width: 44px; height: 44px; border-radius: 50%; background: var(--stage-color, var(--color-primary)); color: #fff; display: flex; align-items: center; justify-content: center; margin: var(--space-3) auto 0; }
.milestone__check .sicon { width: 24px; height: 24px; }
.milestone__badge { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-weight: 600; flex-wrap: wrap; text-align: center; }
.survey-nav--center { justify-content: center; }
.survey-nav--center .btn:only-child { margin-left: 0; }
[dir="rtl"] .survey-nav--center .btn:only-child { margin-right: 0; }
.survey-nav--center .btn { flex: 0 1 320px; }
@keyframes ask-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.milestone__check, .milestone__badge .badge, .card--done .badges--final .badge { animation: ask-pop .5s ease-out both; }
.card--done .badges--final .badges__item:nth-child(2) .badge { animation-delay: .08s; } .card--done .badges--final .badges__item:nth-child(3) .badge { animation-delay: .16s; } .card--done .badges--final .badges__item:nth-child(4) .badge { animation-delay: .24s; } .card--done .badges--final .badges__item:nth-child(n+5) .badge { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .milestone__check, .milestone__badge .badge, .card--done .badges--final .badge { animation: none; } }

/* Smartphone: kompakter Kopf (Etappennamen nur für die aktive Etappe im Zähler), kleinere Figur */
@media (max-width: 639px) {
  .journey { margin-bottom: var(--space-3); }
  .stage__label { display: none; }
  .stage__pos-name { display: inline; }
  .stage__pos { margin-top: var(--space-1); }
  .badges { gap: 4px; margin-bottom: var(--space-2); }
  .badge { width: 22px; height: 22px; }
  .badges__label { font-size: .7rem; }
  .hero { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-2); }
  .companion { width: 72px; }
  .hero--milestone { grid-template-columns: 84px minmax(0, 1fr); }
  .hero--milestone .companion { width: 84px; }
  .stage-list__items { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 359px) { .stage-list__items { grid-template-columns: 1fr; } .badges__label { display: none; } }
/* Tablet/Desktop: Etappennamen unter den Punkten; Zähler ohne Namen */
@media (min-width: 640px) { .stage__dot { width: 38px; height: 38px; } .stage:not(:last-child)::after { top: 18px; inset-inline-start: calc(50% + 21px); inset-inline-end: calc(-50% + 21px); } .stage__dot .sicon { width: 20px; height: 20px; } }
[dir="rtl"] .stage__label, [dir="rtl"] .badges__name, [dir="rtl"] .milestone__text, [dir="rtl"] .bubble, [dir="rtl"] .stage__pos, [dir="rtl"] .finish__summary, [dir="rtl"] .milestone__title { unicode-bidi: plaintext; }

/* ---- Rich-Text (Nachtrag 4i): Bausteine, Begrüßung/Abschluss, Gruppeninstruktion ---- */
.rt-h1, .rt-h2 { margin: 0 0 var(--space-2); line-height: 1.3; overflow-wrap: anywhere; }
.rt-h1 { font-size: 1.35rem; font-weight: 700; }
.rt-h2 { font-size: 1.12rem; font-weight: 700; }
.rt-h1 + p, .rt-h2 + p { margin-top: 0; }
.rt-center { text-align: center; }
.rt-justify { text-align: justify; hyphens: auto; }
.rt-color-theme { color: var(--color-primary); }
.rt-color-theme-dark { color: var(--color-primary-hover); }
.rt-color-muted { color: var(--color-muted); }
.q-inst .rt-h1, .q-inst .rt-h2 { color: var(--color-text); }
div.q-inst { margin: 0 0 var(--space-3); }
div.q-inst p { margin: 0 0 var(--space-2); }
.page-desc p { margin: 0 0 var(--space-2); }
.q-info > :last-child, .page-desc > :last-child, div.q-inst > :last-child { margin-bottom: 0; }

/* Aufklappbarer Teil eines Informationstexts (Nachtrag 4t) */
.q-info-more { margin: 0 0 var(--space-2); }
.q-info__toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; min-height: var(--touch, 44px); font: inherit; font-size: var(--fs-block, inherit); color: var(--color-primary); cursor: pointer; }
.q-info__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.q-info__chev { display: inline-block; transition: transform .15s ease; }
.q-info__toggle--open .q-info__chev { transform: rotate(180deg); }
.q-info__more { margin-top: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 3px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
@media (prefers-reduced-motion: reduce) { .q-info__chev { transition: none; } }

/* Gestaltungselemente der Start-/Abschlussseite (Nachtrag 4u): wie auf Fragebogenseiten, ohne Fragekasten-Innenabstand */
.special-elements { margin: 0 0 var(--space-4); }
.special-elements .q { padding-left: 0; padding-right: 0; }
.special-elements .q:last-child { margin-bottom: 0; }
.card--done .special-elements { margin-top: var(--space-4); }