/*
 * ChaPaSa-Selbsttest – Widget-Styles
 * Farben: Terracotta #C56B4F, Salbei #9CAF9A, Sand #E6DCCF, Cream #F7F4EF
 * Schriften: kommen aus dem Theme (Astra), siehe Variablenblock unten.
 * -> Das Widget laedt selbst KEINE Schriften nach. Bitte auch keinen @import
 *    oder <link> auf Google Fonts ergaenzen: Die Schriften liefert Astra
 *    lokal aus, ein zusaetzlicher Aufruf wuerde die Besucher-IP an Google
 *    senden.
 *
 * Alles unter .st-widget gekapselt, um Kollisionen mit Astra/Spectra-Styles
 * zu vermeiden.
 */

.st-widget {
  --st-terracotta: #C56B4F;
  --st-sage: #9CAF9A;
  --st-sand: #E6DCCF;
  --st-cream: #F7F4EF;
  --st-text: #2C2C2C;

  /* --- Schriften -------------------------------------------------------
     Fliesstext erbt die Theme-Schrift: Aendert sich die Grundschrift in
     Astra, zieht das Widget automatisch mit.

     Die echten Ueberschriften-Elemente (h2/h3) setzen gar keine Schrift mehr,
     dort greift Astras h1-h6-Regel von selbst. Uebrig bleibt diese eine
     Variable fuer zwei Absaetze, die nur wie Ueberschriften aussehen
     (Fragetext und Abschluss-Ueberschrift) - Absaetze koennen die
     Ueberschriftenschrift nicht erben, weil Astra sie nicht als CSS-Variable
     bereitstellt, sondern als feste Regel auf h1-h6.

     Wird die Ueberschriften-Schrift im Theme gewechselt, ist dies die
     einzige Stelle, die haendisch nachzuziehen ist.

     Hinweis: DM Serif Display gibt es nur in einer Schnittstaerke (400) -
     eine Bold-Variante existiert nicht. Unterschiede in der wahrgenommenen
     Strichstaerke zwischen Geraeten kommen von der Schriftglaettung des
     Betriebssystems (Windows rendert kraeftiger als iOS/macOS), nicht von
     CSS. --- */
  --st-font-heading: "DM Serif Display", Georgia, serif;
  --st-font-body: inherit;

  /* Keine eigene Breite, kein eigener Innenabstand: Das Widget fuellt seinen
     Container. Die Breite kommt aus WordPress (Spectra-Container mit 800 px
     Innenbreite, wie bei den Event-Seiten) - so stehen Seitenueberschrift und
     Selbsttest an derselben Kante. Frueher: 620 px plus 24 px Innenabstand,
     was auf oberster Ebene ohnehin von Astra ueberstimmt wurde und im
     800-px-Container alles schmaler machte. */
  max-width: none;
  margin: 0;
  padding: 8px 0 0;
  font-family: var(--st-font-body);
  color: var(--st-text);
  box-sizing: border-box;
}

.st-widget *,
.st-widget *::before,
.st-widget *::after {
  box-sizing: inherit;
}

/* Fortschrittsbalken */
.st-progress {
  height: 6px;
  background: var(--st-sand);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.st-progress__bar {
  height: 100%;
  background: var(--st-terracotta);
  transition: width 0.3s ease;
}

.st-progress__label {
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 28px;
}

/* Fragen-Screen */
.st-question-block {
  margin-bottom: 28px;
}

.st-question-block:last-of-type {
  margin-bottom: 0;
}

.st-question__text {
  font-family: var(--st-font-heading);
  font-weight: 400;   /* DM Serif Display hat nur 400 - verhindert Kunst-Fett */
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 20px;
  color: var(--st-text);
}

.st-scale {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.st-scale__option {
  flex: 1 1 0;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 2px solid var(--st-sand);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  color: var(--st-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Zustaende der Antwortknoepfe ausdruecklich setzen.
   Astras globale Button-Regeln (button:hover, button:focus …) sind
   spezifischer als ".st-scale__option" und faerben die Knoepfe sonst beim
   Ueberfahren in der Theme-Farbe ein - mit weisser Schrift, die auf dem
   hellen Auswahl-Hintergrund kaum lesbar ist. ".st-widget" davor hebt die
   Regeln ueber die des Themes, unabhaengig von dessen Farbeinstellungen.

   Gestaltung: Ueberfahren kuendigt die Auswahlfarbe nur zart an (heller
   Terrakotta-Rand), die Auswahl selbst ist voller Rand plus Tönung.
   Schrift bleibt in allen Zustaenden dunkel. */
.st-widget .st-scale__option:hover,
.st-widget .st-scale__option:focus,
.st-widget .st-scale__option:active {
  background: #fff;
  color: var(--st-text);
  border-color: rgba(197, 107, 79, 0.5);
  box-shadow: none;
}

.st-widget .st-scale__option[aria-pressed="true"],
.st-widget .st-scale__option[aria-pressed="true"]:hover,
.st-widget .st-scale__option[aria-pressed="true"]:focus,
.st-widget .st-scale__option[aria-pressed="true"]:active {
  background: rgba(197, 107, 79, 0.12);
  color: var(--st-text);
  border-color: var(--st-terracotta);
  box-shadow: none;
}

.st-scale__option:focus-visible {
  outline: 3px solid var(--st-terracotta);
  outline-offset: 2px;
}

/* Navigation */
.st-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.st-btn {
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

/* Eigene Groessen nur fuer die Buttons auf den Fragenseiten. Buttons mit
   .st-btn--theme (Intro, Kontaktdaten, Danke- und Bestaetigungsseite) setzen
   keine eigene Polsterung, Schriftgroesse und Rundung - dort greifen die
   Customizer-Werte (Global -> Buttons) wie bei allen Buttons der Website. */
.st-btn:not(.st-btn--theme) {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
}

.st-btn:focus-visible {
  outline: 3px solid var(--st-terracotta);
  outline-offset: 2px;
}

.st-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.st-btn--primary {
  background: var(--st-terracotta);
  color: #fff;
  margin-left: auto;
}

.st-btn--secondary {
  background: transparent;
  color: var(--st-text);
}

.st-btn--secondary:not(.st-btn--theme) {
  border: 2px solid var(--st-sand);
}

/* Theme-Variante: Rahmen als Innenschatten, damit der Zurueck-Button exakt so
   hoch ist wie der Haupt-Button daneben, egal welche Rahmenbreite das Theme
   vorgibt. */
.st-btn--secondary.st-btn--theme {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--st-sand);
}

/* Handlungsaufforderung mit Vertrauenszeile darunter (Intro, Bestaetigung) */
.st-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.st-cta .st-btn--primary {
  margin-left: 0;
}

/* Kurze Vertrauenszeile direkt an der Entscheidung, z. B. "Keine
   Registrierung noetig" */
.st-trust {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
  text-align: center;
}

.st-cta .st-trust {
  margin: 0;
}

/* Abschluss-Screen (Vorname + Mail) */
.st-final__intro {
  font-family: var(--st-font-heading);
  font-weight: 400;   /* DM Serif Display hat nur 400 - verhindert Kunst-Fett */
  font-size: 22px;
  margin: 0 0 20px;
}

.st-intro__title {
  /* Kein font-family: das Element ist ein <h2>, Astras
     Ueberschriften-Typografie greift dadurch von selbst. */
  font-size: 28px;
  color: var(--st-terracotta);
  margin: 0 0 16px;
}

/* Bewusst OHNE font-size: erbt damit die Standard-Textgroesse des Themes,
   passt sich also automatisch dem restlichen Seiteninhalt an. */
.st-intro__text {
  line-height: 1.6;
  margin: 0 0 28px;
}

/* Die Texte aus texte.json werden als einzelne <p>-Absätze ausgegeben. */
.st-intro__text p {
  margin: 0 0 14px;
}

.st-intro__text p:last-child {
  margin-bottom: 0;
}

.st-intro__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0 0 24px;
}

/* Vorname und Mail: auf breiten Schirmen nebeneinander, mobil untereinander */
@media (min-width: 600px) {
  .st-felder {
    display: flex;
    gap: 20px;
  }

  .st-felder .st-field {
    flex: 1 1 0;
    min-width: 0;
  }
}

.st-field {
  margin-bottom: 20px;
}

.st-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.st-field input[type="text"],
.st-field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--st-sand);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;   /* >=16px verhindert das Auto-Zoomen auf iOS */
}

.st-field input[type="text"]:focus-visible,
.st-field input[type="email"]:focus-visible {
  outline: 3px solid var(--st-terracotta);
  outline-offset: 1px;
  border-color: var(--st-terracotta);
}

/* Erklaerungstext unter der Ueberschrift, analog zur Intro-Seite */
.st-final__text {
  line-height: 1.6;
  margin: 0 0 24px;
}

.st-final__text p {
  margin: 0 0 12px;
}

.st-final__text p:last-child {
  margin-bottom: 0;
}

/* Aufzaehlungen aus der Markup-Syntax ("- " am Zeilenanfang) */
.st-list {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

/* Folgt die Liste direkt auf einen Absatz (z. B. "Was dich erwartet:"),
   sitzt sie enger daran - der volle Absatzabstand wirkt dort zu weit. */
.st-widget p + .st-list {
  margin-top: -6px;
}

/* Haken im Kreis wie in den Icon-Listen der Website. Die Farbe steckt im
   SVG (Salbei #9CAF9A) - CSS-Variablen wirken in eingebetteten Grafiken nicht. */
.st-list li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: 8px;
}

.st-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.3em;
  height: 1.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%239CAF9A'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.st-list li:last-child {
  margin-bottom: 0;
}

/* Programm-Kasten auf der Danke-Seite.
   Bewusst zurueckhaltend: abgegrenzt durch Flaeche und Terrakotta-Balken,
   aber mit kleinerer Ueberschrift als die Seitenueberschrift - der Abschnitt
   ist ein Zusatzangebot, nicht der Kern der Seite. */
/* Grundfassung (Desktop): nur der Terrakotta-Balken, keine eigene Flaeche.
   Auf breiten Schirmen wuerde ein weisser Kasten mehr Raum einnehmen als der
   Hauptteil darueber und den Abschnitt wichtiger wirken lassen, als er ist.
   Auf schmalen Schirmen greift weiter unten die Kastenfassung. */
.st-programm {
  background: transparent;
  border-left: 3px solid var(--st-terracotta);
  border-radius: 0;
  padding: 2px 0 2px 20px;
  margin: 28px 0 0;
}

.st-programm__title {
  /* Kein font-family: das Element ist ein <h3>, Astras
     Ueberschriften-Typografie greift dadurch von selbst. */
  font-size: 19px;
  line-height: 1.3;
  color: var(--st-terracotta);
  margin: 0 0 12px;
}

.st-programm__text {
  font-size: 15px;
  line-height: 1.55;
}

.st-programm__text p {
  margin: 0 0 12px;
}

.st-programm__text p:last-child {
  margin-bottom: 0;
}

.st-programm .st-btn {
  margin: 18px 0 0;
}

.st-programm__fehler {
  margin: 10px 0 0;
  font-size: 14px;
  color: #A94442;
}

/* Kleingedrucktes unter dem Programm-Button: Kosten, Abmeldung, an welche
   Adresse die Bestaetigung geht, Datenschutz */
.st-programm__hinweis {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
}

.st-programm__hinweis p {
  margin: 0 0 6px;
}

.st-programm__hinweis p:last-child {
  margin-bottom: 0;
}

.st-programm__hinweis a {
  color: var(--st-terracotta);
}

/* "Nein danke"-Link unter dem Kasten */
.st-weiter {
  margin: 24px 0 0;
  text-align: center;
  font-weight: 600;
}

.st-weiter a {
  color: var(--st-terracotta);
}

/* Team-Zeile auf der Kontaktdaten-Seite: kleine, ueberlappende Fotos */
.st-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.st-team__bilder {
  display: flex;
  flex-shrink: 0;
}

.st-team__bilder img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--st-cream);
}

.st-team__bilder img + img {
  margin-left: -10px;
}

.st-team__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #6b6b6b;
}

/* Datenschutzhinweis: Kleingedrucktes am Ende der Kontaktdaten-Seite.
   14px statt 12/13px, damit es auf dem Handy noch gut lesbar ist. */
.st-privacy-note {
  font-size: 14px;
  color: #6b6b6b;
  line-height: 1.55;
  margin: 22px 0 0;
}

.st-privacy-note p {
  margin: 0 0 10px;
}

.st-privacy-note p:last-child {
  margin-bottom: 0;
}

.st-privacy-note a {
  color: var(--st-terracotta);
}

/* Status-Screens (Laden / Danke / Fehler) */
.st-status {
  text-align: center;
  padding: 24px 0;
}

.st-status__title {
  /* Kein font-family: das Element ist ein <h2>, Astras
     Ueberschriften-Typografie greift dadurch von selbst. */
  font-size: 24px;
  color: var(--st-terracotta);
  margin: 0 0 12px;
}

.st-status__text {
  font-size: 15px;
  line-height: 1.5;
}

.st-status__text p {
  margin: 0 0 12px;
}

.st-status__text p:last-child {
  margin-bottom: 0;
}

.st-status--error .st-status__title {
  color: #A94442;
}

.st-status--danke {
  padding-bottom: 4px;
}

/* Spam-Hinweis unter "Deine Auswertung ist unterwegs" */
.st-status__hinweis {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
}

.st-status__hinweis p {
  margin: 0;
}

.st-status__icon {
  display: block;
  margin: 0 auto 14px;
  color: var(--st-sage);
}

.st-status .st-cta {
  margin-top: 20px;
}

/* Hervorhebungen aus der Markup-Syntax in texte.json:
   **Text** -> .st-em, _Text_ -> .st-em--soft */
.st-em {
  color: var(--st-terracotta);
  font-weight: 600;
}

.st-em--soft {
  color: var(--st-sage);
}

/* __Text__ -> nur fett, in der normalen Textfarbe */
.st-fett {
  font-weight: 600;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Mobile */
@media (max-width: 480px) {

  .st-intro__title {
    font-size: 24px;
  }

  .st-question__text {
    font-size: 18px;
  }

  .st-scale__option {
    min-width: 52px;
    padding: 10px 4px;
    font-size: 14px;
  }

  .st-btn--block {
    width: 100%;
  }

  .st-nav--abschluss .st-btn--primary {
    flex-grow: 1;
  }

  /* Auf schmalen Schirmen als Kasten: dort fehlt die seitliche Flaeche,
     die den Abschnitt sonst optisch traegt. */
  .st-programm {
    background: #fff;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 20px 22px;
  }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .st-progress__bar {
    transition: none;
  }
}