/* Goldstudio · "Unsere Geschichte": Hintergrund-Ebene #story-bg (Aufbau in story.js)
   Feine Platin-Linien auf hellem Grund, zurückhaltend hinter dem Text. */
#story-bg { overflow: hidden; contain: strict; }
#story-bg .sb { position: absolute; inset: 0; will-change: transform, opacity; }

/* weiches Licht von oben rechts, in dem der Staub schwebt */
#story-bg .sb-glow {
  position: absolute; inset: -15%;
  background:
    radial-gradient(46% 50% at 70% 36%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, rgba(196, 196, 198, 0) 40%, rgba(196, 196, 198, .14) 56%, rgba(196, 196, 198, 0) 72%);
}
#story-bg .sb-par { position: absolute; inset: 0; will-change: transform; }
#story-bg .sb-dust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Motiv: zentriert hinter dem großen Kapitelwort (Höhe setzt story.js auf die Wortmitte), etwa 85 % der ersten großen
   Fassung; Wort und Kapiteltext liegen darüber, mit weichem Papier-Schein dahinter (style.css) */
#story-bg .sb-m {
  --sz: min(95vh, 61vw, 950px);
  position: absolute; left: 50%; top: 50%;
  width: var(--sz); aspect-ratio: 1;
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  opacity: 0; will-change: transform, opacity;
}
#story-bg svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: .7; } /* leiser, damit Wort und Text ohne Aufhellung klar darüber stehen */
#story-bg .sb-l {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.001;
}
/* Strich 1,6-2,2 px am Bildschirm: Breite in viewBox-Einheiten passend zur Motivgröße */
#story-bg .sb-w1 { stroke-width: 1.4; }
#story-bg .sb-w2 { stroke-width: 1.8; }

@media (max-width: 760px) {
  #story-bg .sb-m { --sz: 110vw; }
  #story-bg svg { opacity: .68; }
  #story-bg .sb-w1 { stroke-width: 3.1; }
  #story-bg .sb-w2 { stroke-width: 4; }
}

/* reduzierte Bewegung: ein ruhiges, fertig gezeichnetes Motiv, kein Staubflug */
.rm #story-bg .sb-m, #story-bg .sb--static .sb-m { transition: none; }
.rm #story-bg svg, #story-bg .sb--static svg { opacity: .42; }
@media (prefers-reduced-motion: reduce) {
  #story-bg .sb, #story-bg .sb-par, #story-bg .sb-m { will-change: auto; }
}
/* ohne Pinning stehen Überschrift und Kapitel im normalen Fluss: über die Ebene heben, damit nichts verblasst */
.rm #story .gen__top, .rm #story .gen__caps, html:not(.js) #story .gen__top, html:not(.js) #story .gen__caps { position: relative; inset: auto; z-index: 2; }
@media (max-width: 760px) { .rm #story-bg svg, #story-bg .sb--static svg { opacity: .3; } }


/* mobil: Strich aus der eingepassten Motivgröße (story.js) */
@media (max-width: 760px) {
  #story-bg .sb-w1 { stroke-width: var(--sw1, 3.1); }
  #story-bg .sb-w2 { stroke-width: var(--sw2, 4); }
}