/* =========================================================================
   Familien der Götter · „Die Welt entdecken“ auf der Bühne
   (Erzählleiste, Titelkarte und Menü nutzen die Klassen von goetter-sagen.css)
   ========================================================================= */
.wb-theater{position:absolute;inset:0;z-index:4;overflow:hidden;background:var(--u-grund,#141032);opacity:0;transition:opacity .6s var(--ease);--u-text:rgba(255,255,255,.84)}
.wb-theater[hidden]{display:none}
.wb-theater.an{opacity:1}
.wb-theater::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(5,4,15,.45))}
.wb-flaeche{position:absolute;left:0;top:0;width:var(--breit,100%);height:70%;overflow:hidden}
.wb-flaeche.rein>*{animation:wb-rein .7s var(--ease) both}
@keyframes wb-rein{from{opacity:0}to{opacity:1}}
.welt.wb-laeuft .unten-links,.welt.wb-laeuft .legende,.welt.wb-laeuft .hinweis,.welt.wb-laeuft .zoom{opacity:0;pointer-events:none;transition:opacity .3s}
.welt.wb-laeuft .bez{opacity:0!important;pointer-events:none!important}

/* Erzählleiste: Farbe des Kapitels */
.wb-leiste{--akzent:var(--akzent-wb,var(--u-akzent))}
.wb-leiste .sage-leiste__eyebrow{color:var(--akzent-wb,var(--akzent))}
.wb-leiste .sage-k--weiter{background:var(--akzent-wb);border-color:var(--akzent-wb);color:#121028}
.wb-leiste .sage-k--weiter .kurz{display:none}
.wb-leiste .sage-leiste__lauf span{background:var(--akzent-wb)}
.wb-punkte button.ist-aktiv{background:var(--akzent-wb)}
.wb-kicker{margin:0!important;font-size:12px!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-wb)!important}
.wb-zitat{margin:12px 0 0}
.wb-zitat p{font-size:17px!important;color:#fff!important}
.wb-quelle{margin-top:8px!important;font-size:13px!important;color:var(--papier-2)!important}
.wb-hinweis{margin-top:8px!important;font-size:13px!important;opacity:.75}
.wb-aktion{margin-top:12px}
.wb-aktion:disabled{opacity:.5}
.wb-figur{margin-top:12px}

/* Menü */
.wb-menue{right:16px}
.wb-karte{grid-template-columns:auto auto 1fr auto}
.wb-karte__ikon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--sk) 16%,var(--tinte-2));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sk) 40%,transparent)}
.wb-karte__ikon svg{width:34px;height:34px}

/* 01 · 03: Leinwand und Thron-SVG */
.wb-leinwand{position:absolute;inset:0;width:100%;height:100%;display:block}
.wb-thron{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 02 · Weltbild mit Kamera */
.wb-kamera{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.65,0,.35,1);will-change:transform}
.wb-weltbild{margin:0;padding:0;max-width:none;border-radius:0;background:none;box-shadow:none}
.wb-weltbild>svg{width:100%;height:100%;display:block;overflow:visible}

/* 04 · Zeitstrahl */
.wb-zeit{position:absolute;left:0;top:50%;width:max-content;display:flex;align-items:flex-start;gap:28px;padding:0 60px;transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.65,0,.35,1);will-change:transform}
.wb-zeit__linie{position:absolute;left:60px;right:60px;top:47px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--u-akzent),rgba(255,255,255,.35))}
.wb-zeit__punkt{position:relative;flex:none;width:190px;display:grid;justify-items:center;gap:8px;text-align:center;background:none;border:0;padding:0;color:var(--papier);cursor:pointer;transition:transform .5s var(--feder),opacity .4s}
.wb-zeit__ikon{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--u-grund2,#1B1642);border:3px solid rgba(255,255,255,.25);transition:border-color .3s,box-shadow .3s}
.wb-zeit__ikon .u-ikon{width:58px;height:58px}
.wb-zeit__datum{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--u-akzent)}
.wb-zeit__punkt b{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.2;max-width:180px}
.wb-zeit:not(.ueberblick) .wb-zeit__punkt{opacity:.45}
.wb-zeit .wb-zeit__punkt.ist-vorbei{opacity:.7}
.wb-zeit .wb-zeit__punkt.ist-aktiv{opacity:1;transform:scale(1.18)}
.wb-zeit__punkt.ist-aktiv .wb-zeit__ikon{border-color:var(--u-akzent);box-shadow:0 0 0 8px color-mix(in srgb,var(--u-akzent) 22%,transparent),0 12px 30px rgba(0,0,0,.4)}
.wb-zeit__punkt:hover .wb-zeit__ikon{border-color:var(--u-akzent)}
.wb-zeit.ueberblick .wb-zeit__punkt{animation:wb-auf .6s var(--feder) both;animation-delay:var(--d,0s)}
@keyframes wb-auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 05 · Alltag und heilige Orte */
.wb-flaeche{container-type:size}
.wb-alltag{position:absolute;inset:0;margin:auto;width:min(100%,165cqh);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);align-content:center;gap:clamp(10px,3cqmin,36px);padding:clamp(12px,5cqmin,64px);max-height:100%}
.wb-alltag[hidden],.wb-heilig[hidden]{display:none}
.wb-brauch{display:grid;justify-items:center;gap:10px;padding:18px 12px 16px;border-radius:24px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--papier);cursor:pointer;opacity:.5;transition:opacity .35s,transform .45s var(--feder),border-color .3s,background .3s;animation:wb-auf .6s var(--feder) both;animation-delay:var(--d,0s)}
.wb-brauch{align-content:center}
.wb-brauch .u-ikon{width:clamp(44px,15cqmin,150px);height:clamp(44px,15cqmin,150px)}
.wb-brauch b{font-family:var(--f-display);font-weight:700;font-size:clamp(13px,2.6cqmin,26px);line-height:1.2;text-align:center}
.wb-brauch:hover{opacity:.85}
.wb-brauch.ist-aktiv{opacity:1;transform:scale(1.08);border-color:var(--u-akzent);background:color-mix(in srgb,var(--u-akzent) 14%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.wb-heilig{position:absolute;inset:0;margin:0!important;padding:16px!important;max-width:none!important;display:grid;place-items:center}
.wb-karte-svg{width:100%;height:100%;display:block;border-radius:0}
.wb-heilig{padding:0!important}

@media (max-width:860px){
  .wb-zeit{gap:16px;padding:0 30px}
  .wb-zeit__punkt{width:140px}
  .wb-zeit__ikon{width:76px;height:76px}.wb-zeit__ikon .u-ikon{width:46px;height:46px}
  .wb-zeit__linie{top:37px}
  .wb-zeit__punkt b{font-size:14px}
  .wb-alltag{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
  .wb-brauch{padding:10px 6px;border-radius:16px;gap:6px}
  .wb-brauch b{font-size:12px}
  .wb-heilig{padding:0!important}
  .wb-karte{grid-template-columns:auto 1fr auto}
  .wb-karte__ikon{display:none}
  .wb-leiste .sage-k--weiter .lang{display:none}.wb-leiste .sage-k--weiter .kurz{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .wb-theater,.wb-kamera,.wb-zeit,.wb-zeit__punkt,.wb-brauch{transition:none!important}
  .wb-flaeche.rein>*,.wb-zeit.ueberblick .wb-zeit__punkt,.wb-brauch{animation:none!important}
}
.wb-flaeche:has(.wb-weltbild){background:#0B0A1E}
.wb-ende__hinweis{margin:14px 0 0!important;font-size:14px!important;color:var(--papier-2)!important}
.wb-leiste .sage-ende__knoepfe .sage-k--weiter{background:var(--akzent-wb);border-color:var(--akzent-wb);color:#121028}
.wb-leiste .sage-ende__knoepfe .kurz{display:none}
@media (max-width:860px){ .wb-leiste .sage-ende__knoepfe .lang{display:none} .wb-leiste .sage-ende__knoepfe .kurz{display:inline} }

/* Bildfolgen (art:'bilder') */
.wb-bilder{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.wb-bilder__kam{transform-box:view-box;transform-origin:0 0;transition:transform 1.4s cubic-bezier(.65,0,.35,1)}
.wb-bilder [data-k]{transition:opacity .9s ease}
.wb-bilder [data-wo]{transform-box:view-box;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.65,0,.35,1),opacity .9s ease}
.wb-bilder .wb-name{font-family:var(--f-display);font-weight:700;font-size:26px;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(8,6,24,.7);stroke-width:6px}
.wb-bilder .wb-zeile{font-family:var(--f-text,sans-serif);font-weight:700;font-size:20px;letter-spacing:.18em;text-anchor:middle;fill:#FFE7A8}
.wb-bilder .wb-glimm{animation:wb-glimm 2.4s ease-in-out infinite}
@keyframes wb-glimm{0%,100%{opacity:.55}50%{opacity:1}}
.wb-bilder .wb-wipp{animation:wb-wipp 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes wb-wipp{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.wb-fluss{fill:none;stroke:var(--u-meer);stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){ .wb-bilder__kam,.wb-bilder [data-k],.wb-bilder [data-wo]{transition:none!important} .wb-bilder .wb-glimm,.wb-bilder .wb-wipp{animation:none!important} }

/* ---------- Bewegung in den Bildfolgen ----------
   Automatisch: Bühne „atmet“ (langsamer Zoom), Figuren (data-wo) schweben, neue Elemente eines Bildes treten gestaffelt auf.
   Baukasten für die Szenen (Variablen: --d Verzögerung, --t Dauer, --dx/--dy Weg, --w Ausschlag, --o Drehpunkt):
   einmalig beim Betreten eines Bildes (.ist-an):  wb-a-rein, wb-a-steigen, wb-a-sinken, wb-a-fallen, wb-a-auf, wb-a-weg, wb-a-flug,
                                                    wb-a-wachsen*, wb-a-plopp*, wb-a-dreh*
   in Schleife:  wb-l-schweb, wb-l-treib, wb-l-wogen, wb-l-beben, wb-l-flug, wb-l-regen, wb-l-funkel, wb-l-flacker, wb-l-blitz, wb-l-strom,
                 wb-l-dreh*, wb-l-pendel*, wb-l-puls*, wb-l-flattern*, wb-l-ruder*
   (* skalieren/drehen: nur auf eine Hülle <g> ohne eigenes transform-Attribut setzen; alle anderen vertragen transform-Attribute.) */
.wb-bilder__atem{transform-box:view-box;transform-origin:800px 450px;animation:wb-atem 16s ease-in-out infinite alternate}
@keyframes wb-atem{from{transform:scale(1)}to{transform:scale(1.05) translate(-8px,-5px)}}
.wb-bilder .wb-fig{animation:wb-fig 3.4s ease-in-out infinite alternate;animation-delay:var(--fd,0s)}
@keyframes wb-fig{from{translate:0 0}to{translate:0 -10px}}
.wb-bilder .ist-an > .wb-auf{animation:wb-auf 1s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.2s + var(--ai,0) * .14s)}
@keyframes wb-auf{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

.ist-an.wb-a-rein,.ist-an .wb-a-rein{animation:wb-a-rein var(--t,1.8s) cubic-bezier(.2,.7,.3,1) var(--d,.2s) both}
@keyframes wb-a-rein{from{translate:var(--dx,-500px) var(--dy,0px);opacity:0}30%{opacity:1}to{translate:0 0}}
.ist-an.wb-a-steigen,.ist-an .wb-a-steigen{animation:wb-a-steigen var(--t,4s) cubic-bezier(.3,.6,.3,1) var(--d,.1s) both}
@keyframes wb-a-steigen{from{translate:0 var(--dy,220px)}to{translate:0 0}}
.ist-an.wb-a-sinken,.ist-an .wb-a-sinken{animation:wb-a-sinken var(--t,4s) ease-in-out var(--d,.4s) both}
@keyframes wb-a-sinken{from{translate:0 0}to{translate:var(--dx,0px) var(--dy,180px)}}
.ist-an.wb-a-fallen,.ist-an .wb-a-fallen{animation:wb-a-fallen var(--t,1.3s) cubic-bezier(.5,0,.7,.4) var(--d,.3s) both}
@keyframes wb-a-fallen{0%{translate:0 var(--dy,-700px);opacity:0}15%{opacity:1}80%{translate:0 0}90%{translate:0 -18px}100%{translate:0 0}}
.ist-an.wb-a-auf,.ist-an .wb-a-auf{animation:wb-a-auf var(--t,1.2s) ease var(--d,1s) both}
@keyframes wb-a-auf{from{opacity:0}to{opacity:1}}
.ist-an.wb-a-weg,.ist-an .wb-a-weg{animation:wb-a-weg var(--t,1.2s) ease var(--d,2s) both}
@keyframes wb-a-weg{from{opacity:1}to{opacity:0}}
.ist-an.wb-a-flug,.ist-an .wb-a-flug{animation:wb-a-flug var(--t,5s) cubic-bezier(.45,.05,.55,.95) var(--d,.3s) both}
@keyframes wb-a-flug{from{translate:var(--vx,-700px) var(--vy,0px)}50%{translate:calc(var(--vx,-700px) / 2) calc(var(--vy,0px) / 2 + var(--bogen,-120px))}to{translate:0 0}}
.ist-an.wb-a-wachsen,.ist-an .wb-a-wachsen{transform-box:fill-box;transform-origin:var(--o,50% 100%);animation:wb-a-wachsen var(--t,2.4s) cubic-bezier(.2,.8,.3,1.1) var(--d,.3s) both}
@keyframes wb-a-wachsen{from{transform:scale(0)}to{transform:scale(1)}}
.ist-an.wb-a-plopp,.ist-an .wb-a-plopp{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-a-plopp var(--t,.9s) cubic-bezier(.3,1.6,.5,1) var(--d,.4s) both}
@keyframes wb-a-plopp{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.ist-an.wb-a-dreh,.ist-an .wb-a-dreh{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-a-dreh var(--t,2s) cubic-bezier(.3,.7,.3,1) var(--d,.2s) both}
@keyframes wb-a-dreh{from{transform:rotate(var(--w,-90deg))}to{transform:rotate(0)}}

.wb-l-schweb{animation:wb-l-schweb var(--t,3.6s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-schweb{from{translate:0 0}to{translate:0 var(--w,-14px)}}
.wb-l-treib{animation:wb-l-treib var(--t,9s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-treib{from{translate:calc(var(--w,40px) * -1) 0}to{translate:var(--w,40px) 0}}
.wb-l-wogen{animation:wb-l-wogen var(--t,4s) ease-in-out var(--d,0s) infinite}
@keyframes wb-l-wogen{0%,100%{translate:0 0}25%{translate:calc(var(--w,14px) * .6) calc(var(--w,14px) * -.5)}50%{translate:var(--w,14px) 0}75%{translate:calc(var(--w,14px) * .4) calc(var(--w,14px) * .4)}}
.wb-l-beben{animation:wb-l-beben var(--t,.5s) linear var(--d,0s) infinite}
@keyframes wb-l-beben{0%,100%{translate:0 0}25%{translate:calc(var(--w,4px) * -1) 1px}50%{translate:var(--w,4px) -1px}75%{translate:-1px calc(var(--w,4px) * -1)}}
.wb-l-flug{animation:wb-l-flug var(--t,12s) linear var(--d,0s) infinite}
@keyframes wb-l-flug{from{translate:var(--von,-1100px) var(--vy,0px)}to{translate:var(--bis,1100px) var(--by,0px)}}
.wb-l-regen{animation:wb-l-regen var(--t,1.1s) linear var(--d,0s) infinite}
@keyframes wb-l-regen{from{translate:0 var(--von,-200px);opacity:0}15%{opacity:1}85%{opacity:1}to{translate:var(--dx,0px) var(--bis,500px);opacity:0}}
.wb-l-funkel{animation:wb-l-funkel var(--t,2.6s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-funkel{from{opacity:.2}to{opacity:1}}
.wb-l-flacker{animation:wb-l-flacker var(--t,.9s) steps(2,jump-none) var(--d,0s) infinite}
@keyframes wb-l-flacker{0%{opacity:1}35%{opacity:.7}60%{opacity:1}80%{opacity:.82}100%{opacity:1}}
.wb-l-blitz{animation:wb-l-blitz var(--t,3.4s) linear var(--d,0s) infinite}
@keyframes wb-l-blitz{0%,70%,78%,100%{opacity:0}72%,76%,80%{opacity:1}84%{opacity:0}}
.wb-l-strom{stroke-dasharray:var(--da,14 12);animation:wb-l-strom var(--t,2s) linear var(--d,0s) infinite}
@keyframes wb-l-strom{to{stroke-dashoffset:-52}}
.wb-l-dreh{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-l-dreh var(--t,24s) linear var(--d,0s) infinite}
@keyframes wb-l-dreh{to{transform:rotate(var(--w,360deg))}}
.wb-l-pendel{transform-box:fill-box;transform-origin:var(--o,50% 100%);animation:wb-l-pendel var(--t,3s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-pendel{from{transform:rotate(calc(var(--w,5deg) * -1))}to{transform:rotate(var(--w,5deg))}}
.wb-l-puls{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-l-puls var(--t,2.4s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-puls{from{transform:scale(1)}to{transform:scale(var(--w,1.1))}}
.wb-l-flattern{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-l-flattern var(--t,.5s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-flattern{from{transform:scaleY(1)}to{transform:scaleY(var(--w,.45))}}
.wb-l-ruder{transform-box:fill-box;transform-origin:var(--o,50% 0%);animation:wb-l-ruder var(--t,1.4s) ease-in-out var(--d,0s) infinite alternate}
@keyframes wb-l-ruder{from{transform:rotate(calc(var(--w,22deg) * -1))}to{transform:rotate(var(--w,22deg))}}
@media (prefers-reduced-motion:reduce){
  .wb-bilder__atem,.wb-bilder .wb-fig,.wb-bilder .ist-an > .wb-auf,[class*="wb-a-"],[class*="wb-l-"]{animation:none!important}
}
.ist-an.wb-a-zoom,.ist-an .wb-a-zoom{transform-box:fill-box;transform-origin:var(--o,50% 50%);animation:wb-a-zoom var(--t,4s) cubic-bezier(.3,.6,.3,1) var(--d,.2s) both}
@keyframes wb-a-zoom{from{transform:scale(var(--s0,1.8))}to{transform:scale(1)}}
.ist-an .wb-a-zeichnen,.ist-an.wb-a-zeichnen{stroke-dasharray:1;animation:wb-a-zeichnen var(--t,2s) ease-in-out var(--d,.3s) both}
@keyframes wb-a-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .wb-a-zoom,.wb-a-zeichnen{animation:none!important} }