/*! Gedanken-Check 0.8.0 · PSE GmbH
 *  Die Komponente füllt immer 100 % ihres Containers. Die Inhaltsbreite
 *  (80 % Desktop, 95 % Tablet/Handy) kommt von der Divi-Zeile.
 *  Farben und Schriften über Variablen, z. B. im Divi-Custom-CSS:
 *  .sc, .sc-teaser { --sc-mark: #EEE300; }
 */
.sc,
.sc-teaser {
  --sc-ink: #213C47;
  --sc-muted: #4E5B61;
  --sc-line: #D0DBE2;
  --sc-surface: #EFF2F6;
  --sc-paper: #FFFFFF;
  --sc-mark: #EEE300;
  --sc-mark-ink: #213C47;
  --sc-btn-bg: #EEE300;
  --sc-btn-ink: #213C47;
  --sc-card-bg: #213C47;
  --sc-danger: #9B2C1F;
  --sc-radius: 15px;
  --sc-gap: clamp(14px, 2vw, 24px);
  --sc-pad: clamp(18px, 3vw, 32px);
  --sc-font-head: 'PSE_League-Spartan', 'League Spartan', 'Montserrat', sans-serif;
  --sc-shadow: 0 2px 18px rgba(33, 60, 71, 0.10);
}

.sc {
  width: 100%;
  color: var(--sc-ink);
  line-height: 1.6;
  text-align: left;
}
.sc:not(.sc-ready) { min-height: 26rem; }
.sc *, .sc *::before, .sc *::after,
.sc-teaser *, .sc-teaser *::before, .sc-teaser *::after { box-sizing: border-box; }
.sc [hidden], .sc-teaser[hidden], .sc-teaser [hidden] { display: none !important; }
.sc p { margin: 0; padding: 0; }

.sc .sc-h3 {
  margin: 0;
  padding: 0;
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.25;
  color: inherit;
  text-wrap: balance;
}
.sc .sc-h4 {
  margin: 0;
  padding: 0;
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.25;
  color: var(--sc-ink);
}

.sc .sc-visually-hidden,
.sc-teaser .sc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Buttons im Stil der Website -------------------------------------------- */
.sc .sc-btn,
.sc-teaser .sc-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--sc-radius);
  padding: 16px 26px;
  background: var(--sc-btn-bg);
  color: var(--sc-btn-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sc .sc-btn:hover,
.sc-teaser .sc-btn:hover { box-shadow: 0 4px 14px rgba(33, 60, 71, .22); color: var(--sc-btn-ink); }
.sc .sc-btn:active,
.sc-teaser .sc-btn:active { transform: translateY(1px); }
.sc .sc-btn:focus-visible,
.sc-teaser .sc-btn:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 2px; }
.sc .sc-btn[disabled] { opacity: .6; cursor: progress; }
.sc .sc-btn-ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 2px var(--sc-ink); }
.sc .sc-btn-ghost:hover { background: var(--sc-ink); color: #fff; box-shadow: inset 0 0 0 2px var(--sc-ink); }
.sc .sc-btn-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.sc .sc-btn-light:hover { color: #fff; box-shadow: inset 0 0 0 2px #fff; }

.sc .sc-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-weight: 700;
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  justify-self: start;
}

/* Eingabe ------------------------------------------------------------------ */
.sc .sc-form {
  display: grid;
  gap: var(--sc-gap);
  background: var(--sc-paper);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  padding: var(--sc-pad);
}
.sc .sc-form-main, .sc .sc-form-side { display: grid; gap: 14px; align-content: start; }
@media (min-width: 64em) {
  .sc .sc-form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(24px, 3vw, 48px); }
  .sc .sc-form-side { padding-top: 2.2em; }
}
.sc .sc-label {
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.25;
}
.sc .sc-input {
  display: block;
  width: 100%;
  min-height: 6.5em;
  margin: 0;
  padding: 16px 18px;
  border: 2px solid var(--sc-line);
  border-radius: 12px;
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-family: inherit;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.4;
  resize: vertical;
}
.sc .sc-input::placeholder { color: var(--sc-muted); opacity: .75; font-weight: 400; }
.sc .sc-input:focus { outline: none; border-color: var(--sc-ink); background: var(--sc-paper); }
.sc .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc .sc-count { font-size: .85em; color: var(--sc-muted); font-variant-numeric: tabular-nums; }
.sc .sc-error, .sc .sc-optin-error { color: var(--sc-danger); font-weight: 600; font-size: .95em; }
.sc .sc-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9em; }
.sc .sc-examples-label { flex-basis: 100%; color: var(--sc-muted); }
.sc .sc-chip {
  appearance: none;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: var(--sc-paper);
  color: var(--sc-ink);
  font: inherit;
  font-size: 1em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.sc .sc-chip:hover { border-color: var(--sc-ink); }
.sc .sc-chip:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.sc .sc-privacy { font-size: .85em; color: var(--sc-muted); }

/* Ergebnis ----------------------------------------------------------------- */
.sc .sc-result { display: grid; gap: var(--sc-gap); margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 110px; }
.sc .sc-result:focus { outline: none; }
.sc .sc-quote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--sc-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.sc .sc-quote::before, .sc .sc-quote::after { content: none; }
.sc .sc-mark {
  background: linear-gradient(transparent 8%, var(--sc-mark) 8%, var(--sc-mark) 92%, transparent 92%);
  color: var(--sc-mark-ink);
  padding: 0 .1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Meta-Modell-Profil */
.sc .sc-profile { display: flex; flex-wrap: wrap; gap: 8px; }
.sc .sc-prof {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sc-ink);
  color: #fff;
  font-size: .9em;
  font-weight: 600;
}
.sc .sc-prof b { color: var(--sc-mark); font-weight: 900; font-variant-numeric: tabular-nums; }
.sc .sc-prof.is-zero { background: transparent; color: var(--sc-muted); box-shadow: inset 0 0 0 1px var(--sc-line); }
.sc .sc-prof.is-zero b { color: var(--sc-muted); }

/* Muster-Karten */
.sc .sc-groups { display: grid; }
.sc .sc-patterns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sc-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) { .sc .sc-patterns { grid-template-columns: repeat(var(--sc-cols-t, 2), minmax(0, 1fr)); } }
@media (min-width: 64em) { .sc .sc-patterns { grid-template-columns: repeat(var(--sc-cols-d, 3), minmax(0, 1fr)); } }
.sc .sc-pattern {
  margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--sc-paper);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}
.sc .sc-pattern::before { content: none; }
.sc .sc-term {
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.sc .sc-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.sc .sc-hit {
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--sc-mark);
  color: var(--sc-mark-ink);
  font-size: .85em;
  font-weight: 700;
}
.sc .sc-body { display: grid; gap: 10px; margin-top: 4px; }
.sc .sc-q { font-weight: 700; font-size: 1.05em; }
.sc .sc-q-label {
  display: block;
  margin-bottom: 2px;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
.sc .sc-rewrite {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--sc-surface);
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: 1.1em;
}
.sc .sc-empty {
  display: grid;
  gap: 10px;
  padding: var(--sc-pad);
  background: var(--sc-paper);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}

/* Gate: hinter dem Blur steht nur ein Hinweis, nie die echte Auswertung */
.sc .sc-locked { position: relative; display: grid; min-height: 5.5em; align-content: center; }
.sc .sc-locked-blur {
  display: grid;
  gap: 10px;
  filter: blur(5px);
  opacity: .75;
  user-select: none;
  pointer-events: none;
}
.sc .sc-unlock {
  appearance: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--sc-ink);
  color: #fff;
  font: inherit;
  font-size: .9em;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(33, 60, 71, .25);
}
.sc .sc-unlock svg { flex: none; color: var(--sc-mark); }
.sc .sc-unlock:hover { background: #172b33; }
.sc .sc-unlock:focus-visible { outline: 3px solid var(--sc-mark); outline-offset: 2px; }

/* Opt-in */
.sc .sc-optin {
  display: grid;
  gap: 12px;
  padding: var(--sc-pad);
  border-radius: var(--sc-radius);
  background: var(--sc-paper);
  box-shadow: inset 0 0 0 3px var(--sc-mark), var(--sc-shadow);
  scroll-margin-top: 110px;
}
.sc .sc-optin:focus { outline: none; }
.sc.sc-is-gated .sc-optin { background: var(--sc-mark); box-shadow: var(--sc-shadow); }
.sc.sc-is-gated .sc-optin .sc-btn { background: var(--sc-ink); color: #fff; }
.sc.sc-is-gated .sc-optin .sc-fine { color: var(--sc-ink); }
.sc .sc-optin-intro { display: grid; gap: 12px; }
@media (min-width: 64em) {
  .sc .sc-optin-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .sc .sc-optin-title, .sc .sc-optin-lead { grid-column: 1; }
  .sc .sc-optin-form, .sc .sc-optin-error { grid-column: 2; }
  .sc .sc-optin-intro > .sc-fine { grid-column: 1 / -1; }
  .sc .sc-optin-form { grid-row: 1 / span 2; align-self: center; }
}
.sc .sc-optin-form { display: flex; flex-wrap: wrap; gap: 10px; }
.sc .sc-mail {
  flex: 1 1 15rem;
  min-width: 0;
  margin: 0;
  padding: 15px 16px;
  border: 2px solid var(--sc-line);
  border-radius: 12px;
  background: var(--sc-paper);
  color: var(--sc-ink);
  font: inherit;
  font-size: 1em;
}
.sc .sc-mail:focus { outline: none; border-color: var(--sc-ink); }
.sc .sc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sc .sc-fine { font-size: .78em; line-height: 1.5; color: var(--sc-muted); }
.sc .sc-fine a { color: inherit; }
.sc .sc-optin-done { display: grid; gap: 10px; }
.sc .sc-optin-done:focus { outline: none; }

/* Teilen + Erstgespräch */
.sc .sc-bottom { display: grid; gap: var(--sc-gap); }
@media (min-width: 64em) { .sc .sc-bottom { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.sc .sc-share {
  display: grid;
  grid-template-columns: minmax(0, 12rem) 1fr;
  gap: var(--sc-gap);
  align-items: center;
  padding: var(--sc-pad);
  border-radius: var(--sc-radius);
  background: var(--sc-card-bg);
  color: #fff;
}
.sc .sc-card {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* Teilen-Karte vor der Freischaltung: Platzhalter hinter Blur, echte Karte erst nach der Bestätigung */
.sc .sc-card-wrap { position: relative; width: 100%; }
.sc .sc-share.is-locked .sc-card-wrap { overflow: hidden; border-radius: 10px; }
.sc .sc-share.is-locked .sc-card { filter: blur(7px); opacity: .7; transform: scale(1.04); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sc .sc-card-unlock { font-size: .8em; padding: 9px 13px; background: var(--sc-mark); color: var(--sc-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.sc .sc-card-unlock svg { color: var(--sc-ink); }
.sc .sc-card-unlock:hover { background: #fff; }
.sc .sc-share-text { display: grid; gap: 12px; }
.sc .sc-share-text p { color: rgba(255,255,255,.88); }
.sc .sc-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sc .sc-hint { font-size: .85em; }
.sc .sc-cta {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: start;
  padding: var(--sc-pad);
  border-radius: var(--sc-radius);
  background: var(--sc-paper);
  box-shadow: var(--sc-shadow);
}
.sc .sc-cta p { color: var(--sc-muted); }

/* Hilfe-Hinweis */
.sc .sc-crisis {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  padding: var(--sc-pad);
  border-radius: var(--sc-radius);
  background: var(--sc-paper);
  box-shadow: inset 0 0 0 2px var(--sc-line), var(--sc-shadow);
}
.sc .sc-crisis:focus { outline: none; }
.sc .sc-crisis a { color: var(--sc-ink); font-weight: 700; }
.sc .sc-crisis-nums { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.sc .sc-crisis .sc-btn { justify-self: start; }

@media (max-width: 37.5em) {
  .sc .sc-share { grid-template-columns: 1fr; }
  .sc .sc-card, .sc .sc-card-wrap { max-width: 12rem; }
  .sc .sc-row .sc-btn, .sc .sc-optin-form .sc-btn { width: 100%; }
}

/* Teaser für Footer und Artikel -------------------------------------------- */
.sc-teaser {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: var(--sc-pad);
  border-radius: var(--sc-radius);
  background: var(--sc-card-bg);
  color: #fff;
  text-align: left;
}
@media (min-width: 64em) {
  .sc-teaser { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
  .sc-teaser > p { grid-column: 1; }
  .sc-teaser form { grid-column: 2; grid-row: 1 / span 3; }
}
.sc-teaser .sc-teaser-eyebrow {
  margin: 0;
  color: var(--sc-mark);
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sc-teaser .sc-teaser-title {
  margin: 0;
  padding: 0;
  font-family: var(--sc-font-head);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  color: #fff;
}
.sc-teaser p { margin: 0; padding: 0; color: rgba(255,255,255,.88); }
.sc-teaser form { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.sc-teaser .sc-teaser-input {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  padding: 15px 16px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--sc-ink);
  font: inherit;
  font-size: 1em;
  font-weight: 600;
}
.sc-teaser .sc-teaser-input:focus { outline: 3px solid var(--sc-mark); outline-offset: 1px; }
@media (max-width: 37.5em) { .sc-teaser .sc-btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .sc .sc-btn, .sc-teaser .sc-btn { transition: none; }
}

/* Hinweis oben (nach dem Bestätigungslink) */
.sc .sc-banner {
  margin: 0 0 var(--sc-gap);
  padding: 14px 18px;
  border-radius: var(--sc-radius);
  background: var(--sc-mark);
  color: var(--sc-mark-ink);
  font-weight: 700;
}

/* Warten auf die Bestätigung */
.sc .sc-optin-done .sc-link { justify-self: start; }
.sc .sc-wait { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sc .sc-spinner {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  border: 3px solid rgba(33, 60, 71, .2);
  border-top-color: var(--sc-ink);
  animation: sc-spin 1s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc .sc-spinner { animation-duration: 3s; } }