/* ==========================================================================
   HGP Borna Story – "Ihr Objekt in guten Händen"
   Darstellung der Straßen-Bühne. Kapitelkarte, Kapitelleiste, Titel und
   Fortschrittsbalken kommen aus story.css – hier steht nur, was diese
   Bühne zusätzlich braucht.
   ========================================================================== */

.st{ --nav:68px; position:relative; }
.st svg{ width:auto; height:auto; flex:initial; }  /* hebt svg{width:1em} des Themes auf */

.st-wrap{ height:820vh; position:relative; }
.st-stage{
  position:sticky; top:var(--nav); height:calc(100vh - var(--nav));
  height:calc(100dvh - var(--nav)); overflow:hidden;
  contain:layout paint; isolation:isolate;
}

/* Himmel – drei Ebenen, deren Deckkraft das Skript steuert */
.st-sky{position:absolute;inset:0;z-index:0}
.st-sky>i{position:absolute;inset:0;display:block}
.st-sky-morgen{background:linear-gradient(to bottom,#BFD9EC 0%,#F3DFC8 62%,#FBEBD6 100%)}
.st-sky-tag   {background:linear-gradient(to bottom,#9FD3F2 0%,#DCEFFA 58%,#F2F8FB 100%);opacity:0}
.st-sky-abend {background:linear-gradient(to bottom,#F2A45C 0%,#F8CE9B 45%,#FBE6C8 100%);opacity:0}

.st-sonne{
  position:absolute;z-index:1;width:min(11vw,84px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF3CC,#F8CE5B 60%,#EFA337);
  box-shadow:0 0 64px 24px rgba(247,201,72,.38);translate:-50% -50%;
  will-change:left,top;
}

.st-wolken{position:absolute;inset:0;z-index:2;pointer-events:none}
.st-wolke{position:absolute;filter:drop-shadow(0 10px 16px rgba(40,60,75,.10))}
.st-wolke svg{width:100%;height:auto}
.st-w1{left:6%;top:11%;width:min(40vw,300px);animation:st-zieh 58s linear infinite}
.st-w2{left:56%;top:6%;width:min(30vw,220px);animation:st-zieh 76s linear infinite reverse}
@keyframes st-zieh{0%{transform:translateX(-5vw)}50%{transform:translateX(5vw)}100%{transform:translateX(-5vw)}}

/* Die Welt. Der Überstand ist gewollt, damit Straße und Grün immer die
   volle Bildbreite füllen – unabhängig vom Seitenverhältnis. */
.st-welt{position:absolute;inset:0;z-index:4;pointer-events:none}
.st-welt svg{width:100%;height:100%;overflow:visible}

/* Bildplatz: eigenes Transporter-Bild aus dem Customizer */
.st-van-bild{pointer-events:none}

/* Bedienelemente sitzen in der Bühne, nicht im Fenster – sie verschwinden
   dadurch zusammen mit der Bühne. */
.st-bar{position:absolute;left:0;top:0;height:3px;z-index:13;width:0;
  background:linear-gradient(90deg,var(--green-solid),var(--sky),#F7C948)}
.st-grow{position:absolute;right:clamp(.75rem,2.5vw,1.5rem);top:clamp(.75rem,2vh,1.25rem);z-index:13;
  background:var(--paper);border-radius:999px;padding:.42rem .85rem;font-size:var(--t-xs);
  font-weight:700;color:var(--green-deep);box-shadow:0 6px 20px -12px rgba(22,36,27,.5);
  font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:720px){ .st-grow{font-size:.7rem;padding:.35rem .7rem} }
@media (prefers-reduced-motion:reduce){
  .st *,.st *::before,.st *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}