/* B-Kö Smiles — GBT-Ablauf als angeheftete Szenenfolge (einbettbar).
   ---------------------------------------------------------------------------
   Die ausführliche Fassung liegt als eigene Seite unter /gbt-scroll/. Hier die
   Variante für den Fließtext einer Inhaltsseite: ohne Ring-Intro, weil die
   acht Schritte im Text darüber schon stehen.

   Aufbau: eine Sektion mit `overflow:clip` (NICHT hidden — hidden macht sie zum
   Scroll-Container und killt position:sticky), darin eine klebende Bühne und
   darunter acht leere Blöcke, die nur die Scroll-Strecke liefern.

   Ohne JavaScript bleibt die nummerierte Liste stehen; die Bühne wird erst
   vom Skript eingehängt. */
.gbtx{position:relative;overflow:clip;margin:clamp(2rem,6vh,4rem) 0;
  --akzent:#7fd4e6;--schritt-hoehe:62vh}
.gbtx-buehne{position:sticky;top:0;height:100svh;max-height:100svh;
  display:grid;place-items:center;overflow:clip;border-radius:18px}
.gbtx-bilder{position:absolute;inset:0;overflow:hidden;border-radius:18px}
.gbtx-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;will-change:transform,opacity}
.gbtx-bilder img.an{opacity:1}
.gbtx-funken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gbtx-schleier{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(58% 54% at 50% 45%,var(--akzent) 0%,transparent 70%);
  opacity:.45;transition:background .8s ease;border-radius:18px}
.gbtx-vignette{position:absolute;inset:0;pointer-events:none;border-radius:18px;
  background:radial-gradient(118% 100% at 50% 40%,transparent 36%,rgba(5,5,8,.6) 78%,rgba(5,5,8,.88) 100%),
             linear-gradient(0deg,rgba(5,5,8,.82) 0%,transparent 40%)}
.gbtx-karte{position:absolute;left:clamp(1rem,4%,2.5rem);bottom:clamp(3.5rem,8%,5rem);margin:0;
  width:min(24rem,calc(100% - 2rem));background:rgba(10,10,14,.72);
  backdrop-filter:blur(14px) saturate(1.1);border:1px solid rgba(197,165,106,.28);
  border-radius:16px;padding:1.3rem 1.4rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.gbtx-karte .nr{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--akzent);display:block;margin-bottom:.4rem;transition:color .5s ease}
.gbtx-karte h3{font-size:clamp(1.2rem,2.6vw,1.7rem);margin:0 0 .5rem;line-height:1.2}
.gbtx-karte p{margin:0;font-size:clamp(.88rem,1.5vw,.98rem)}
.gbtx-karte>*{transition:opacity .35s ease,transform .35s ease}
.gbtx-karte.wechsel>*{opacity:0;transform:translateY(6px)}
.gbtx-balken{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.08);border-radius:0 0 18px 18px;overflow:hidden}
.gbtx-balken i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#a9854b,var(--akzent))}
.gbtx-punkte{position:absolute;right:clamp(.8rem,2.5%,1.6rem);top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:.55rem}
.gbtx-punkte b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.gbtx-punkte b.an{background:var(--akzent);transform:scale(1.6);box-shadow:0 0 10px var(--akzent)}
.gbtx-spur{list-style:none;margin:0;padding:0}
.gbtx-spur li{height:var(--schritt-hoehe)}
/* [hidden] allein reicht NICHT — jede eigene display-Regel auf ol schlaegt das
   Standardblatt des Browsers. */
.gbt-liste[hidden]{display:none !important}
@media (max-width:760px){
  .gbtx{--schritt-hoehe:54vh}
  .gbtx-karte{left:.8rem;right:.8rem;width:auto;bottom:2.6rem;padding:1rem 1.05rem}
  .gbtx-punkte{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gbtx-bilder img{transition-duration:1.6s}
  .gbtx-karte>*{transition-duration:.9s}
}