/*
 * Stufenband — die drei Ausbildungsstufen als Abfolge, nicht als gleichrangiges
 * Kartenraster. Farben ausschliesslich aus den project_theme-Tokens.
 */

.rstrainingteaser__header {
  margin-bottom: 1.5rem;
}

.rstrainingteaser .rstrainingteaser__intro {
  margin-top: 0.25rem;
  color: var(--color-text, #2a2e30);
}

.rstrainingteaser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.rstrainingteaser__stage {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border, #e4e4e4);
  border-radius: var(--radius-soft, 6px);
  background: var(--color-surface, #fff);
}

.rstrainingteaser__stage * {
  box-sizing: border-box;
}

/* Die Stufennummer traegt die Sequenz — Muster wie der Eyebrow im Kalender. */
.rstrainingteaser .rstrainingteaser__step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.rstrainingteaser__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--color-border, #e4e4e4);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-soft, #5e656a);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.rstrainingteaser__step-label {
  color: var(--color-text-soft, #5e656a);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Die buchbare Stufe traegt den Akzent, die uebrigen bleiben ruhig. */
.rstrainingteaser__stage--available .rstrainingteaser__step-number,
.rstrainingteaser__stage--registered .rstrainingteaser__step-number {
  border-color: var(--color-accent, #d47519);
  color: var(--color-accent, #d47519);
}

.rstrainingteaser__stage--status\.completed .rstrainingteaser__step-number {
  border-color: var(--color-primary, #7a8836);
  color: var(--color-primary, #7a8836);
}

/* Spezifitaet gegen `.page-content h3` aus project_theme; die Karte setzt
   ihren Rhythmus selbst ueber den Flex-Gap. */
.rstrainingteaser .rstrainingteaser__card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.3;
}

.rstrainingteaser__card-title a {
  color: var(--color-heading, #1c1f21);
  text-decoration: none;
}

.rstrainingteaser__card-title a:hover,
.rstrainingteaser__card-title a:focus-visible {
  text-decoration: underline;
}

.rstrainingteaser .rstrainingteaser__description {
  margin: 0;
  color: var(--color-text, #2a2e30);
  line-height: 1.55;
}

/*
 * Curriculum verdichtet: "3 Schwerpunkte · 3 MTC · 1 Pruefung"
 *
 * `margin-top: auto` dockt den Faktenblock unten an. Die Beschreibungen sind
 * unterschiedlich lang; der Ausgleich landet damit ueber der Trennlinie, wo er
 * nicht auffaellt, statt die Karte zu verkuerzen. Trennlinie, Curriculum,
 * Preis und Button liegen dadurch ueber alle Stufen auf einer Linie.
 */
.rstrainingteaser .rstrainingteaser__curriculum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  margin: auto 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border, #e4e4e4);
  color: var(--color-text, #2a2e30);
  font-size: 0.9rem;
}

.rstrainingteaser .rstrainingteaser__curriculum span + span::before {
  margin-right: 0.55rem;
  color: var(--color-text-soft, #5e656a);
  content: "·";
}

.rstrainingteaser .rstrainingteaser__price {
  margin: 0;
  color: var(--color-heading, #1c1f21);
  font-size: 1.05rem;
  font-weight: 650;
}

.rstrainingteaser .rstrainingteaser__hint,
.rstrainingteaser .rstrainingteaser__progress,
.rstrainingteaser .rstrainingteaser__status {
  margin: 0;
  color: var(--color-text-soft, #5e656a);
  font-size: 0.875rem;
}

.rstrainingteaser .rstrainingteaser__status-action {
  margin: 0;
  font-size: 0.875rem;
}

.rstrainingteaser__status-action a {
  color: var(--color-heading, #1c1f21);
  font-weight: 600;
  text-decoration: none;
}

.rstrainingteaser__status-action a:hover,
.rstrainingteaser__status-action a:focus-visible {
  text-decoration: underline;
}

.rstrainingteaser__status--muted {
  opacity: 0.75;
}

.rstrainingteaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.rstrainingteaser .rstrainingteaser__button {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-soft, 6px);
  background: var(--color-heading, #1c1f21);
  color: var(--color-bg, #fdfdfd);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.rstrainingteaser .rstrainingteaser__button:hover,
.rstrainingteaser .rstrainingteaser__button:focus-visible {
  background: color-mix(in srgb, var(--color-heading, #1c1f21) 88%, var(--color-accent, #d47519));
  color: var(--color-bg, #fdfdfd);
}

.rstrainingteaser .rstrainingteaser__button--secondary {
  border-color: var(--color-heading, #1c1f21);
  background: transparent;
  color: var(--color-heading, #1c1f21);
}

.rstrainingteaser .rstrainingteaser__button--secondary:hover,
.rstrainingteaser .rstrainingteaser__button--secondary:focus-visible {
  background: color-mix(in srgb, var(--color-bg, #fdfdfd), var(--color-heading, #1c1f21) 12%);
  color: var(--color-heading, #1c1f21);
}

@media (prefers-reduced-motion: no-preference) {
  .rstrainingteaser .rstrainingteaser__button {
    transition: background 160ms ease;
  }
}

@media (max-width: 40rem) {
  .rstrainingteaser__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Root-Overview — drei Stufen als kompakter, nativer Ausbildungsweg.
 * Jede Regel bleibt am Overview-Marker oder einem ihn enthaltenden Ancestor.
 * Das vollbreite `.page-main::before` bleibt unangetastet: Es traegt den
 * etablierten weissen Content-Uebergang ueber dem Hero.
 */

.rstrainingteaser--overview {
  box-sizing: border-box;
  display: grid;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
  color: var(--color-text);
}

.rstrainingteaser--overview *,
.rstrainingteaser--overview *::before,
.rstrainingteaser--overview *::after {
  box-sizing: border-box;
}

.rstrainingteaser--overview .rstrainingteaser__header {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.rstrainingteaser--overview .rstrainingteaser__title,
.rstrainingteaser--overview .rstrainingteaser__intro,
.rstrainingteaser--overview .rstrainingteaser__overview-hint {
  margin: 0;
}

.rstrainingteaser--overview .rstrainingteaser__title {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
}

.rstrainingteaser--overview .rstrainingteaser__intro {
  max-width: 62rem;
  line-height: 1.45;
}

.rstrainingteaser--overview .rstrainingteaser__overview-hint {
  padding: 0.5rem 0.7rem;
  border-inline-start: 3px solid var(--color-text-soft);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.rstrainingteaser--overview .rstrainingteaser__overview-list[data-rs-grid-items] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spezifischer als die Flex- und Drittelbreiten aus rs_grid_auto. */
.rsgridauto__row:has(.rstrainingteaser--overview)
  .rstrainingteaser--overview
  .rstrainingteaser__overview-list[data-rs-grid-items] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.rsgridauto[class*="rsgridauto--"]
  .rsgridauto__row:has(.rstrainingteaser--overview)
  .rstrainingteaser--overview
  .rstrainingteaser__overview-list[data-rs-grid-items]
  > :nth-child(n) {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.rstrainingteaser--overview .rstrainingteaser__overview-stage,
.rstrainingteaser--overview .rstrainingteaser__overview-details {
  min-width: 0;
  margin: 0;
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-list
  > .rstrainingteaser__overview-stage {
  padding-inline-start: 0;
  list-style: none;
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-list
  > .rstrainingteaser__overview-stage::marker {
  content: "";
}

.rstrainingteaser--overview .rstrainingteaser__overview-details {
  border: 1px solid var(--color-text-soft);
  border-inline-start-width: 3px;
  border-radius: var(--radius-soft);
  background: var(--color-surface);
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-stage:is(
    [data-rs-training-stage-status="available"],
    [data-rs-training-stage-status="registered"]
  )
  .rstrainingteaser__overview-details {
  border-inline-start-color: var(--color-accent);
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-stage[data-rs-training-stage-status="status.completed"]
  .rstrainingteaser__overview-details {
  border-inline-start-color: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-summary {
  display: list-item;
  min-height: 44px;
  padding: 0.7rem 0.85rem 0.75rem;
  color: var(--color-heading);
  line-height: 1.35;
  list-style-type: disclosure-closed;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-details[open]
  > .rstrainingteaser__overview-summary {
  list-style-type: disclosure-open;
}

.rstrainingteaser--overview .rstrainingteaser__overview-summary::marker {
  color: var(--color-text-soft);
}

.rstrainingteaser--overview .rstrainingteaser__overview-summary:focus-visible,
.rstrainingteaser--overview
  :is(
    .rstrainingteaser__button,
    .rstrainingteaser__overview-status-action a,
    .rstrainingteaser__overview-detail-link
  ):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.rstrainingteaser--overview .rstrainingteaser__overview-step,
.rstrainingteaser--overview .rstrainingteaser__overview-title,
.rstrainingteaser--overview .rstrainingteaser__overview-curriculum,
.rstrainingteaser--overview .rstrainingteaser__overview-state,
.rstrainingteaser--overview .rstrainingteaser__overview-progress-group,
.rstrainingteaser--overview .rstrainingteaser__overview-progress-label,
.rstrainingteaser--overview .rstrainingteaser__overview-progress-stack,
.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar {
  margin: 0;
}

.rstrainingteaser--overview .rstrainingteaser__overview-step {
  display: inline-block;
  color: var(--color-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rstrainingteaser--overview .rstrainingteaser__overview-title {
  display: block;
  margin-top: 0.1rem;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: inherit;
}

.rstrainingteaser--overview .rstrainingteaser__overview-curriculum,
.rstrainingteaser--overview .rstrainingteaser__overview-progress-label {
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

.rstrainingteaser--overview .rstrainingteaser__overview-curriculum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  margin-top: 0.25rem;
}

.rstrainingteaser--overview .rstrainingteaser__overview-curriculum > span + span::before {
  margin-right: 0.5rem;
  color: var(--color-text-soft);
  content: "·";
}

.rstrainingteaser--overview .rstrainingteaser__overview-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  margin-top: 0.35rem;
}

.rstrainingteaser--overview .rstrainingteaser__overview-status {
  color: var(--color-heading);
  font-size: 0.85rem;
  font-weight: 650;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-group {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  margin-top: 0.4rem;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.05rem 0.3rem;
  min-width: 0;
  line-height: 1.35;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-separator {
  color: var(--color-text-soft);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-stack {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  height: 0.5rem;
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-progress-stack
  > .rstrainingteaser__overview-progress-bar {
  grid-area: 1 / 1;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar {
  display: block;
  width: 100%;
  min-width: 0;
  height: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-text-soft);
  border-radius: var(--radius-pill);
  appearance: none;
  background: var(--color-surface);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled {
  z-index: 1;
  accent-color: var(--color-accent);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled {
  z-index: 2;
  border-color: transparent;
  accent-color: var(--color-primary);
  background: transparent;
  pointer-events: none;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-webkit-progress-bar {
  background: transparent;
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-webkit-progress-value {
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-moz-progress-bar {
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--boundary::-webkit-progress-value {
  border-inline-end: 2px solid var(--color-surface);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--boundary::-moz-progress-bar {
  border-inline-end: 2px solid var(--color-surface);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning {
  accent-color: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.rstrainingteaser--overview .rstrainingteaser__overview-body {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.7rem 0.9rem 0.85rem;
  border-top: 1px solid var(--color-border);
}

.rstrainingteaser--overview
  .rstrainingteaser__overview-details:not([open])
  > .rstrainingteaser__overview-body {
  display: none;
}

.rstrainingteaser--overview .rstrainingteaser__overview-body > *,
.rstrainingteaser--overview .rstrainingteaser__description,
.rstrainingteaser--overview .rstrainingteaser__price,
.rstrainingteaser--overview .rstrainingteaser__overview-status-detail,
.rstrainingteaser--overview .rstrainingteaser__overview-status-action {
  min-width: 0;
  margin: 0;
}

.rstrainingteaser--overview .rstrainingteaser__description {
  max-width: 68rem;
  line-height: 1.45;
}

.rstrainingteaser--overview .rstrainingteaser__overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.rstrainingteaser--overview
  :is(
    .rstrainingteaser__button,
    .rstrainingteaser__overview-status-action a,
    .rstrainingteaser__overview-detail-link
  ) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rstrainingteaser--overview .rstrainingteaser__overview-status-action a,
.rstrainingteaser--overview .rstrainingteaser__overview-detail-link {
  width: max-content;
  padding: 0.35rem 0.15rem;
  color: var(--color-heading);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.rstrainingteaser--overview .rstrainingteaser__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 64rem) {
  .page-main:has(.rstrainingteaser--overview)
    .rsgridauto:has(.rstrainingteaser--overview) {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 40rem) {
  .rstrainingteaser--overview {
    gap: 0.6rem;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-summary {
    padding: 0.6rem 0.7rem;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-state {
    display: grid;
    justify-content: stretch;
    gap: 0.05rem;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-body {
    padding: 0.65rem 0.7rem 0.75rem;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-actions,
  .rstrainingteaser--overview .rstrainingteaser__overview-actions .rstrainingteaser__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rstrainingteaser--overview
    :is(
      .rstrainingteaser__overview-summary,
      .rstrainingteaser__button,
      .rstrainingteaser__overview-status-action a,
      .rstrainingteaser__overview-detail-link
    ) {
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .rstrainingteaser--overview .rstrainingteaser__overview-details {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .rstrainingteaser--overview
    .rstrainingteaser__overview-stage[data-rs-training-stage-status]
    .rstrainingteaser__overview-details {
    border-inline-start-color: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-summary::marker {
    color: CanvasText;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar {
    border-color: CanvasText;
    background: Canvas;
    forced-color-adjust: none;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar::-webkit-progress-bar {
    background: Canvas;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled {
    accent-color: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled::-webkit-progress-value {
    background: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--filled::-moz-progress-bar {
    background: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled {
    border-color: transparent;
    accent-color: CanvasText;
    background: transparent;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-webkit-progress-bar {
    background: transparent;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--boundary::-webkit-progress-value {
    border-inline-end-color: Canvas;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-webkit-progress-value {
    background: CanvasText;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--boundary::-moz-progress-bar {
    border-inline-end-color: Canvas;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--fulfilled::-moz-progress-bar {
    background: CanvasText;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning {
    accent-color: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning::-webkit-progress-value {
    background: Highlight;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-progress-bar--elearning::-moz-progress-bar {
    background: Highlight;
  }

  .rstrainingteaser--overview
    :is(
      .rstrainingteaser__button,
      .rstrainingteaser__overview-status-action a,
      .rstrainingteaser__overview-detail-link
    ) {
    border-color: ButtonText;
  }

  .rstrainingteaser--overview .rstrainingteaser__overview-summary:focus-visible,
  .rstrainingteaser--overview
    :is(
      .rstrainingteaser__button,
      .rstrainingteaser__overview-status-action a,
      .rstrainingteaser__overview-detail-link
    ):focus-visible {
    outline-color: Highlight;
  }
}

/*
 * Kompakter Stufenkopf in der Hero-Spalte. Der ArticleHero bleibt alleinige
 * Quelle fuer Bild, H1 und Abstract; dieser Block ergaenzt nur Status und Weg.
 */
.page-hero-full:has(.rstrainingteaser--stage-head) {
  height: clamp(24rem, 36vw, 27rem);
  min-height: 24rem;
  max-height: 27rem;
}

.page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero {
  box-sizing: border-box;
}

.page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero__inner,
.page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero--with-abstract .rsarticlehero__inner {
  width: min(40rem, 40vw);
}

.rstrainingteaser--stage-head {
  box-sizing: border-box;
  position: absolute;
  top: calc(50% + 2rem);
  right: var(--menu-right-offset, 2rem);
  z-index: 2;
  width: min(20rem, 28vw);
  max-width: calc(100% - (2 * var(--topbar-inline-space, 1.25rem)));
  padding: 1.15rem 1.25rem;
  transform: translateY(-50%);
  border: 1px solid var(--color-border, #e4e4e4);
  border-radius: var(--radius-soft, 6px);
  background: var(--color-surface, #fff);
  background: color-mix(in srgb, var(--color-surface, #fff) 94%, transparent);
  color: var(--color-text, #2a2e30);
  overflow-wrap: anywhere;
  pointer-events: auto;
}

.rstrainingteaser .rstrainingteaser__stage-head-status {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin: 0;
  color: var(--color-heading, #1c1f21);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.rstrainingteaser__stage-head-marker {
  box-sizing: border-box;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.33rem;
  border: 1px solid var(--color-text-soft, #5e656a);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-border, #e4e4e4);
}

.rstrainingteaser--stage-head[data-rs-training-stage-status="available"] .rstrainingteaser__stage-head-marker,
.rstrainingteaser--stage-head[data-rs-training-stage-status="registered"] .rstrainingteaser__stage-head-marker {
  border-color: var(--color-accent, #d47519);
  background: var(--color-accent, #d47519);
}

.rstrainingteaser--stage-head[data-rs-training-stage-status="status.completed"] .rstrainingteaser__stage-head-marker {
  border-color: var(--color-primary, #7a8836);
  background: var(--color-primary, #7a8836);
}

.rstrainingteaser .rstrainingteaser__stage-head-progress {
  margin: 0.45rem 0 0 1.35rem;
  color: var(--color-text-soft, #5e656a);
  font-size: 0.875rem;
  line-height: 1.4;
}

.rstrainingteaser .rstrainingteaser__stage-head-action {
  margin: 0.9rem 0 0;
}

.rstrainingteaser--stage-head .rstrainingteaser__button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.rstrainingteaser--stage-head .rstrainingteaser__button:focus-visible {
  outline: 3px solid var(--color-accent, #d47519);
  outline-offset: 3px;
}

@media (max-width: 56.25rem) {
  .page-hero-full:has(.rstrainingteaser--stage-head) {
    height: clamp(24rem, 52vw, 28rem);
    max-height: 28rem;
  }

  .page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero__inner,
  .page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero--with-abstract .rsarticlehero__inner {
    width: min(34rem, calc(100vw - 23rem));
  }

  .rstrainingteaser--stage-head {
    right: var(--topbar-inline-space, 1.25rem);
    width: min(19rem, 38vw);
  }
}

@media (max-width: 47.5rem) {
  .page-hero-full:has(.rstrainingteaser--stage-head) {
    height: clamp(34rem, 140vw, 38rem);
    min-height: 34rem;
    max-height: 38rem;
  }

  .page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero {
    align-items: flex-start;
    padding-top: calc(var(--topbar-height, 4.5rem) + 2rem);
    padding-bottom: 13rem;
  }

  .page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero__inner,
  .page-hero-full:has(.rstrainingteaser--stage-head) .rsarticlehero--with-abstract .rsarticlehero__inner {
    width: min(34rem, 88vw);
  }

  .rstrainingteaser--stage-head {
    top: auto;
    right: var(--topbar-inline-space, 1.25rem);
    bottom: 1.25rem;
    left: var(--topbar-inline-space, 1.25rem);
    width: auto;
    max-width: none;
    padding: 1rem 1.1rem;
    transform: none;
  }
}

@media (max-width: 22.5rem) {
  .page-hero-full:has(.rstrainingteaser--stage-head) {
    height: clamp(38rem, 180vw, 41rem);
    min-height: 38rem;
    max-height: 41rem;
  }

  .rstrainingteaser--stage-head {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    padding: 0.9rem;
  }

  .rstrainingteaser--stage-head .rstrainingteaser__button {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rstrainingteaser--stage-head .rstrainingteaser__button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .rstrainingteaser--stage-head {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .rstrainingteaser__stage-head-marker,
  .rstrainingteaser--stage-head[data-rs-training-stage-status] .rstrainingteaser__stage-head-marker {
    border-color: CanvasText;
    background: CanvasText;
  }

  .rstrainingteaser--stage-head .rstrainingteaser__button {
    border-color: ButtonText;
  }

  .rstrainingteaser--stage-head .rstrainingteaser__button:focus-visible {
    outline-color: Highlight;
  }
}