/* Bühne „So läuft eine Stunde“ (lesson-stage.js): auf der Startseite („Vom Wort zum
   Tor“) und auf den Produktseiten. Ein großes Spielbild, darunter die Schritte mit
   Balken; auf den Produktseiten läuft im Bild der Film der Reise. */
.stunde-buehne { --sb-accent: #b9f4d7; --sb-bg: #0b151c; }
/* Produktseiten: Farbwelt und Kulisse des Angebots. */
.sb-produkt { --sb-accent: var(--detail-accent); --sb-bg: var(--detail-bg); --sb-art: var(--page-art); }

/* ── „Vom Wort zum Tor“: selbstlaufende Bühne der Startseite (lesson-stage.js) ── */
.stunde-buehne { position: relative; isolation: isolate; padding-block: clamp(4rem, 9vw, 8rem); background: var(--sb-bg); color: #fffdf8; overflow: clip; }
.stunde-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg)b8 30%, var(--sb-bg)d9 75%, var(--sb-bg) 100%), var(--sb-art, url("../assets/welten/fussballwelt.webp")) center / cover no-repeat; }
.sb-head { text-align: center; }
.sb-head .eyebrow { color: var(--sb-accent); }
.sb-head h2 { margin: .6rem 0 0; font-size: clamp(3rem, 9vw, 7.2rem); line-height: .95; letter-spacing: -.065em; color: #fffdf8; }
.sb-head h2 span { display: inline-block; }
.sb-stage { position: relative; max-width: 62rem; margin: clamp(1.8rem, 4vw, 3rem) auto 0; }
.sb-screen { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #ffffff2e; border-radius: var(--la-radius-l, 28px); background: #05090d; box-shadow: 0 60px 120px -60px #000, 0 0 0 10px var(--sb-accent)0f; }
.sb-screen > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sb-screen > .is-on { opacity: 1; transform: none; }
.sb-crest { position: absolute; z-index: 1; top: 50%; width: clamp(5rem, 13vw, 11rem); height: auto; filter: drop-shadow(0 20px 22px #000a); pointer-events: none; }
.sb-crest-left { left: 0; translate: -58% -50%; }
.sb-crest-right { right: 0; translate: 58% -50%; }

.sb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); max-width: 62rem; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; padding: 0; list-style: none; }
.sb-steps button { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .15rem; align-items: center; width: 100%; padding: 0 0 .4rem; border: 0; background: none; color: #fffdf8; text-align: left; cursor: pointer; opacity: .55; transition: opacity .4s ease; }
.sb-steps button.is-on, .sb-steps button:hover { opacity: 1; }
.sb-bar { grid-column: 1 / -1; height: 4px; margin-bottom: .9rem; border-radius: 4px; background: #ffffff2e; overflow: hidden; }
.sb-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--sb-accent); transform: scaleX(0); transform-origin: left; }
.sb-steps .is-done .sb-bar i { transform: none; }
.sb-steps b { grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1.5px solid #ffffff59; border-radius: 50%; font: 700 1.05rem/1 var(--heading); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.sb-steps .is-on b { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-bg); }
.sb-steps strong { font: 700 clamp(1.15rem, 2vw, 1.55rem)/1.1 var(--heading); letter-spacing: -.03em; }
.sb-steps button > span:last-child { color: #c9d6da; font-size: .98rem; line-height: 1.35; }
.sb-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; }
.sb-links .button.primary { background: var(--sb-accent); color: var(--sb-bg); border-color: transparent; }
.sb-links .text-link { color: #fffdf8; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sb-fill { from { transform: scaleX(0); } to { transform: none; } }
  .is-live .sb-steps .is-on .sb-bar i { animation: sb-fill var(--sb-hold, 4600ms) linear both; }
  /* Ruhige Fahrt auf dem aktiven Bild. */
  @keyframes sb-drift { from { scale: 1; } to { scale: 1.07; } }
  .is-live .sb-screen > img.is-on { animation: sb-drift 6s ease-out both; }
  @supports (animation-timeline: view()) {
    /* Überschrift steigt wortweise ein, die Bühne wächst, die Wappen fliegen von den Seiten herein. */
    @keyframes sb-word { from { opacity: 0; transform: translateY(.5em); } }
    .sb-head h2 span { animation: sb-word linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .sb-head h2 span:last-child { animation-range: entry 25% entry 85%; }
    @keyframes sb-grow { from { opacity: 0; transform: scale(.86) translateY(3rem); } }
    .sb-screen { animation: sb-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes sb-left { from { opacity: 0; translate: -160% -40%; rotate: -24deg; } }
    @keyframes sb-right { from { opacity: 0; translate: 160% -40%; rotate: 24deg; } }
    .sb-crest-left { animation: sb-left linear both; animation-timeline: view(); animation-range: entry 30% cover 38%; }
    .sb-crest-right { animation: sb-right linear both; animation-timeline: view(); animation-range: entry 30% cover 38%; }
  }
}
@media (max-width: 760px) {
  .sb-crest { width: 4.2rem; top: 0; }
  .sb-crest-left { translate: -18% -62%; }
  .sb-crest-right { translate: 18% -62%; }
  .sb-screen { border-radius: var(--la-radius-m, 16px); }
  .sb-steps { grid-template-columns: 1fr; gap: .9rem; }
  .sb-steps button > span:last-child { font-size: .92rem; }
}


/* ── Produktseiten ── */
.sb-lead { max-width: 46ch; margin: 1rem auto 0; color: #d5dfe2; font-size: var(--la-lead, 1.12rem); line-height: 1.45; text-wrap: balance; }
.sb-produkt .sb-head h2 { font-size: clamp(2.4rem, 6.4vw, 5.2rem); text-wrap: balance; }
.sb-screen > video { z-index: 1; }
.sb-screen > video.is-on { transform: none; }
/* Zeile zum aktuellen Schritt unter dem Bild. */
.sb-caption { display: grid; gap: .3rem; max-width: 62rem; min-height: 4.6rem; margin: clamp(1.1rem, 2.4vw, 1.7rem) auto 0; text-align: center; }
.sb-caption strong { font: 700 clamp(1.3rem, 2.5vw, 2rem)/1.15 var(--heading); letter-spacing: -.03em; color: var(--sb-accent); text-wrap: balance; }
.sb-caption span { color: #d5dfe2; font-size: 1.02rem; line-height: 1.4; text-wrap: balance; }
/* Schritte nach Anzahl: bis zu sieben in einer Reihe. */
.sb-produkt .sb-steps { grid-template-columns: repeat(var(--sb-n, 3), minmax(0, 1fr)); gap: clamp(.5rem, 1.4vw, 1.2rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.sb-produkt .sb-steps button { grid-template-columns: 1fr; justify-items: start; row-gap: .5rem; }
.sb-produkt .sb-steps b { grid-row: auto; width: 2.1rem; height: 2.1rem; font-size: .92rem; }
.sb-produkt .sb-steps strong { font-size: clamp(.95rem, 1.5vw, 1.2rem); line-height: 1.2; }
.sb-produkt .sb-bar { margin-bottom: .4rem; }
/* Im Filmmodus gibt lesson-stage.js den Füllstand vor. */
.sb-film .sb-bar i { transform: scaleX(var(--fill, 0)); animation: none !important; transition: transform .25s linear; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sb-caption-in { from { opacity: 0; transform: translateY(.5rem); } }
  .sb-caption.is-neu > * { animation: sb-caption-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .sb-caption.is-neu > :last-child { animation-delay: .07s; }
}
@media (max-width: 760px) {
  .sb-produkt .sb-steps { grid-template-columns: repeat(var(--sb-n, 3), minmax(0, 1fr)); gap: .4rem; }
  .sb-produkt .sb-steps strong { display: none; }
  .sb-produkt .sb-steps button { justify-items: center; }
  .sb-caption { min-height: 6.5rem; }
}

/* Balken immer über die ganze Schrittbreite, auch wenn der Schritt zentriert ist. */
.sb-produkt .sb-bar { justify-self: stretch; width: 100%; }
@media (max-width: 760px) {
  /* Am Handy stehen die Figuren über der Bildkante; der Satz darüber braucht Abstand. */
  .sb-produkt .sb-stage { margin-top: 3.4rem; }
}