.site-intro-dialog {
  --intro-purple: var(--cgi-purple, #3b0b5a);
  width: min(46rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid #e3dce8;
  border-radius: 1rem;
  background: #fff;
  color: var(--ink, #242424);
  box-shadow: 0 1.5rem 5rem rgba(32, 10, 49, 0.24);
}
.site-intro-dialog[open] { display: flex; flex-direction: column; }
.site-intro-dialog::backdrop { background: rgba(29, 17, 36, 0.6); backdrop-filter: blur(4px); }
.site-intro-header { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid #eee9f2; }
.site-intro-label { margin-right: auto; color: var(--intro-purple); font-size: var(--text-xs, 0.8125rem); font-weight: 800; }
.site-intro-step-count { color: #716479; font-size: var(--text-xs, 0.8125rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-intro-later { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #f4f0f7; color: #594564; }
.site-intro-later svg { width: 1.125rem; height: 1.125rem; }
.site-intro-later:hover { background: #e8dfee; color: var(--intro-purple); }
.site-intro-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.75rem 2rem 1.5rem; }
.site-intro-body:focus-visible { outline: 2px solid var(--intro-purple); outline-offset: -3px; }
.site-intro-title { margin: 0; color: var(--intro-purple); font-size: clamp(1.65rem, 3.5vw, 2.2rem); line-height: 1.16; letter-spacing: -0.035em; font-weight: 800; }
.site-intro-title:focus { outline: none; }
.site-intro-description { margin: 0.625rem 0 0; color: #65596c; font-size: var(--text-md, 1rem); line-height: 1.5; }
.site-intro-illustration { margin: 1.5rem 0 1.25rem; }
.site-intro-preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.875rem; }
.site-intro-preview { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.875rem; margin: 0; padding: 1rem; overflow: hidden; border: 1px solid #e4dce9; border-radius: 0.75rem; background: #faf8fc; }
.site-intro-preview-heading { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; color: var(--intro-purple); font-size: var(--text-sm, 0.875rem); }
.site-intro-example { color: #716178; font-size: var(--text-xs, 0.8125rem); font-weight: 400; }
.site-intro-preview-caption { width: 100%; margin: -0.375rem 0 0; color: #6a5c72; font-size: var(--text-xs, 0.8125rem); line-height: 1.5; }
.site-intro-preview-image { display: block; width: 100%; max-width: 35.1875rem; }
.site-intro-preview-image img { display: block; width: 100%; height: auto; }
.site-intro-preview-image.is-control { max-width: 100%; }
.site-intro-preview-image.is-assessment { width: 18.375rem; }
.site-intro-preview-image.is-assessment-goal { width: 15.0625rem; }
html[lang="de"] .site-intro-preview-image.is-assessment-goal { width: 17.875rem; }
.site-intro-preview-image.is-request { width: 11.5rem; }
html[lang="de"] .site-intro-preview-image.is-request { width: 12.9375rem; }
.site-intro-assessment-preview { width: 100%; display: grid; justify-items: center; align-content: center; gap: 0.75rem; margin-block: auto; }
.site-intro-detail { margin: 0; color: #3f3346; font-size: var(--text-sm, 0.875rem); line-height: 1.6; }
.site-intro-note { margin: 0.5rem 0 0; color: #716178; font-size: var(--text-xs, 0.8125rem); line-height: 1.55; }
.site-intro-footer { display: block; flex: 0 0 auto; padding: 0.875rem 1.5rem 1.25rem; border-top: 1px solid #eee9f2; background: #fff; }
.site-intro-progress { display: flex; justify-content: center; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.site-intro-progress-step { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #e6ddeb; }
.site-intro-progress-step.is-visited { background: #b99dcc; }
.site-intro-progress-step[aria-current="step"] { width: 1.5rem; background: var(--intro-purple); }
.site-intro-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.site-intro-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.site-intro-back, .site-intro-next { min-height: 2.75rem; padding: 0.6875rem 1.125rem; border-radius: 0.5rem; font-size: var(--text-sm, 0.875rem); font-weight: 700; line-height: 1.25; }
.site-intro-back { border: 1px solid #dfd5e6; background: #fff; color: #634a71; }
.site-intro-back:hover { background: #f5f0f8; }
.site-intro-next { border: 1px solid var(--intro-purple); background: var(--intro-purple); color: #fff; }
.site-intro-next:hover { background: #57246f; }
.site-intro-next:disabled { opacity: 1; border-color: #d7c9df; background: #e8dfee; color: #695474; }
.site-intro-error { margin: 0 0 0.75rem; color: var(--cgi-red-dark, #b80f29); font-size: var(--text-sm, 0.875rem); line-height: 1.5; }
.site-intro-dialog button:focus-visible { outline: 2px solid var(--intro-purple); outline-offset: 3px; }

@media (max-width: 700px) {
  .site-intro-preview-pair { grid-template-columns: 1fr; }
  .site-intro-preview-pair .site-intro-preview-image { max-width: 18.375rem; }
  .site-intro-assessment-preview { margin-block: 0; }
}

@media (max-width: 520px) {
  .site-intro-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 0.75rem; }
  .site-intro-header { padding: 0.75rem 1rem; gap: 0.5rem; }
  .site-intro-label { max-width: 17rem; line-height: 1.35; }
  .site-intro-body { padding: 1.25rem 1rem; }
  .site-intro-title { font-size: 1.75rem; }
  .site-intro-description { font-size: var(--text-sm, 0.875rem); }
  .site-intro-illustration { margin: 1.125rem 0; }
  .site-intro-preview-pair { gap: 0.75rem; }
  .site-intro-preview { padding: 0.75rem; gap: 0.75rem; }
  .site-intro-preview > .site-intro-preview-image { max-width: 16.375rem; }
  .site-intro-footer { padding: 0.75rem 1rem 1rem; }
  .site-intro-actions { justify-content: flex-end; }
  .site-intro-back, .site-intro-next { min-height: 2.875rem; }
}

@media (max-height: 540px) and (min-width: 521px) {
  .site-intro-header { padding: 0.625rem 1.25rem; }
  .site-intro-body { padding: 1.125rem 1.5rem; }
  .site-intro-footer { padding: 0.75rem 1.25rem; }
  .site-intro-progress { margin-bottom: 0.625rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-intro-dialog[open] { animation: site-intro-enter 160ms ease-out; }
  @keyframes site-intro-enter { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
}