/*
 * Schritt-Akkordeon (nach der Vorlage „Step Accordion“).
 * Felder öffnen mit grid-rows 0fr → 1fr, die Höhe läuft ohne Messen auf den Inhalt. Der Bildrahmen
 * bewegt sich per translate; die Bilder darin morphen zwischen Pille (inaktiv) und Karte (aktiv).
 */
.sa {
  --sa-list: 47cqw; --sa-gap: 4cqw; --sa-ratio: 0.7; --sa-radius: 24px; --sa-panel-radius: 20px; --sa-duration: 0.55s;
  --sa-bg: transparent; --sa-panel: #eef6f8; --sa-title: #1f2a30; --sa-text: #4a565e;
  --sa-badge: rgba(0, 126, 145, .1); --sa-badge-text: #007E91; --sa-accent: #007E91; --sa-accent-text: #fff;
  width: 100%;
  container-type: inline-size;
  background: var(--sa-bg);
  color: var(--sa-title);
}
.sa__grid { display: grid; grid-template-columns: var(--sa-list) 1fr; column-gap: var(--sa-gap); align-items: start; }
.sa__list { display: grid; row-gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; }
.sa__item { position: relative; overflow: hidden; border-radius: var(--sa-panel-radius); background: transparent; transition: background-color .35s ease; margin: 0 !important; }
.sa__item.is-open { background: var(--sa-panel); }
.sa__h { margin: 0 !important; font: inherit; }
.sa__head {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 70px; padding: 0 22px !important;
  border: 0 !important; border-radius: var(--sa-panel-radius); background: none !important; color: inherit !important;
  font: inherit; text-align: left; cursor: pointer; text-transform: none !important; letter-spacing: normal !important;
}
.sa__head:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: -2px; }
.sa__badge { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--sa-badge); color: var(--sa-badge-text); font-size: 14px; font-weight: 800; transition: background-color .35s ease, color .35s ease; }
.sa__item.is-open .sa__badge { background: var(--sa-accent); color: var(--sa-accent-text); }
.sa__title { flex: 1; font-size: clamp(17px, 1.9cqw, 22px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.sa__chev { flex: none; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--sa-duration) var(--sa-spring); }
.sa__item.is-open .sa__chev { rotate: 180deg; }
.sa__head:hover .sa__title { opacity: .75; }
.sa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sa-duration) var(--sa-spring); }
.sa__item.is-open .sa__panel { grid-template-rows: 1fr; }
.sa__inner { min-height: 0; overflow: hidden; padding: 0 22px 0 72px; }
.sa__item.is-open .sa__inner { padding-bottom: 22px; }
.sa__text, .sa__cta, .sa__inline-img { opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .45s cubic-bezier(.22, 1, .36, 1); }
.sa__item.is-open :is(.sa__text, .sa__cta, .sa__inline-img) { opacity: 1; translate: 0 0; transition-delay: .12s; }
.sa__text { max-width: 34em; margin: 0 0 16px !important; font-size: 16px; line-height: 1.6; color: var(--sa-text); }
.sa__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--sa-accent); color: var(--sa-accent-text) !important; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.sa__cta svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.sa__cta:hover svg { translate: 4px 0; }
.sa__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--sa-accent); transform-origin: left; animation: sa-progress var(--sa-autoplay) linear both; }
@keyframes sa-progress { from { scale: 0 1; } }
.sa__media { position: relative; align-self: stretch; }
.sa__frame { position: relative; aspect-ratio: 1 / var(--sa-ratio); transition: translate var(--sa-duration) var(--sa-spring); }
.sa__card { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; opacity: 0; scale: .86; transition: opacity calc(var(--sa-duration) * .7) ease, scale var(--sa-duration) var(--sa-spring), border-radius var(--sa-duration) var(--sa-spring); }
.sa__card.is-active { border-radius: var(--sa-radius); opacity: 1; scale: 1; }
.sa__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.22, 1, .36, 1); }
.sa__media:hover .sa__card.is-active .sa__img { scale: 1.04; }
.sa__inline-img { display: none; aspect-ratio: 1 / var(--sa-ratio); margin-bottom: 14px; overflow: hidden; border-radius: calc(var(--sa-radius) * .7); }
/* gestapelt: ohne Bildspalte, jedes Feld trägt sein Bild */
.sa.is-stacked .sa__grid { grid-template-columns: 1fr; }
.sa.is-stacked .sa__media { display: none; }
.sa.is-stacked .sa__inline-img { display: block; }
.sa.is-stacked .sa__head { padding: 0 16px !important; gap: 12px; min-height: 62px; }
.sa.is-stacked .sa__inner { padding: 0 16px; }
.sa.is-stacked .sa__item.is-open .sa__inner { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .sa * { transition-duration: .01s !important; } }