/* =========================================================================
   Familien der Götter · Startbühne (zu goetter-startbuehne.js)
   Alle zwölf Kacheln auf einen Blick, dahinter eine Szene je Mythologie.
   Wirkt nur mit body.sb (setzt das Skript).
   Leistung: Bewegt wird nur über transform und opacity kleiner HTML-Teile
   (.sb-ding); die großen SVG-Ebenen ruhen und werden einmal gemalt.
   ========================================================================= */

/* ---------- Bühne ---------- */
body.sb{background:#07051A}
body.sb .auswahl{background:transparent}
.sb-buehne{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sb-defs{position:absolute;width:0;height:0;overflow:hidden}
.sb-szenen,.sb-szene{position:absolute;inset:0}
.sb-szene{contain:strict}
.sb-szene.schlaeft{visibility:hidden;content-visibility:hidden}
body.im-baum .sb-buehne,body.in-ueber .sb-buehne{display:none}
.sb-e{position:absolute;inset:0}
.sb-r{position:absolute;inset:0}
.sb-flach{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
@keyframes sb-rein{from{opacity:0;transform:translate3d(0,var(--ry),0) scale(var(--rs))}}
.sb-ding{position:absolute;will-change:transform}
.sb-ding>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.sb-teilchen{position:absolute;inset:0;z-index:500;overflow:hidden}
.sb-tset{position:absolute;inset:0;transition:opacity .8s}
.sb-tset.weg{opacity:0}
.sb-tset i{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:var(--f);opacity:0;will-change:transform,opacity;animation:var(--dur) linear var(--del) infinite}
.sb-t-glow i{background:radial-gradient(circle,#fff 0,var(--f) 14%,color-mix(in srgb,var(--f) 40%,transparent) 32%,transparent 68%)}
.sb-t-blatt i{border-radius:70% 0 70% 0;height:calc(var(--s) * .6)}
.sb-t-steigen i{animation-name:t-steigen}.sb-t-fallen i{animation-name:t-fallen}.sb-t-wehen i{animation-name:t-wehen}
.sb-t-funkeln i{animation-name:t-funkeln;animation-timing-function:ease-in-out}.sb-t-schwirren i{animation-name:t-schwirren;animation-timing-function:ease-in-out}
@keyframes t-steigen{0%{transform:translate(0,0);opacity:0}10%,88%{opacity:var(--o)}100%{transform:translate(var(--dx),-108vh);opacity:0}}
@keyframes t-fallen{0%{transform:translate(0,0) rotate(0);opacity:0}8%,90%{opacity:var(--o)}100%{transform:translate(var(--dx),112vh) rotate(var(--rot));opacity:0}}
@keyframes t-wehen{0%{transform:translate(0,0);opacity:0}10%,88%{opacity:var(--o)}100%{transform:translate(112vw,var(--dx));opacity:0}}
@keyframes t-funkeln{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:var(--o);transform:scale(1)}}
@keyframes t-schwirren{0%{transform:translate(0,0);opacity:0}25%{opacity:var(--o)}50%{transform:translate(var(--dx),var(--dy));opacity:.15}75%{opacity:var(--o)}100%{transform:translate(0,0);opacity:0}}
.sb-ohne-schleier .sb-schleier{display:none}
.sb-schleier{position:absolute;inset:0;z-index:502;background:
  linear-gradient(90deg,rgba(7,5,26,.62) 0%,rgba(7,5,26,.32) 28%,rgba(7,5,26,0) 52%),
  linear-gradient(180deg,rgba(7,5,26,.5) 0,rgba(7,5,26,0) 140px),
  linear-gradient(0deg,rgba(7,5,26,.7) 0,rgba(7,5,26,.15) 30%,rgba(7,5,26,0) 46%)}

/* ---------- Bewegungsbausteine (nur transform/opacity) ---------- */
.sb-dreh{animation:sb-dreh var(--dd,120s) linear infinite}
@keyframes sb-dreh{to{transform:rotate(360deg)}}
.sb-zieh{animation:sb-zieh var(--zd,40s) ease-in-out infinite alternate}
@keyframes sb-zieh{from{transform:translateX(calc(var(--zw,60px) * -1 * var(--k,1)))}to{transform:translateX(calc(var(--zw,60px) * var(--k,1)))}}
.sb-puls{animation:sb-puls var(--pd,4s) ease-in-out infinite alternate}
@keyframes sb-puls{from{opacity:.6;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
.sb-flimmern{animation:sb-flimmern 2.6s ease-in-out infinite alternate}
@keyframes sb-flimmern{from{opacity:.45;transform:translateX(-4px)}to{opacity:1;transform:translateX(4px)}}
.sb-flackern{animation:sb-flackern 1.4s ease-in-out infinite alternate}
@keyframes sb-flackern{0%{opacity:.7;transform:scale(.97)}40%{opacity:1}70%{opacity:.82;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
.sb-schaukeln{animation:sb-schaukeln 5s ease-in-out infinite alternate}
@keyframes sb-schaukeln{from{transform:translateY(-2px) rotate(-1.4deg)}to{transform:translateY(3px) rotate(1.4deg)}}
.sb-wiegen{animation:sb-wiegen 7s ease-in-out infinite alternate}
@keyframes sb-wiegen{from{transform:rotate(-1.6deg)}to{transform:rotate(1.8deg)}}
.sb-schweben{animation:sb-schweben 11s ease-in-out infinite alternate}
@keyframes sb-schweben{from{transform:translate(-4%,3%) rotate(-3deg)}to{transform:translate(6%,-4%) rotate(2deg)}}
.sb-flug{animation:sb-flug var(--fd,30s) linear infinite}
@keyframes sb-flug{0%{transform:translate(40%,6%);opacity:0}6%{opacity:1}90%{opacity:1}100%{transform:translate(-260%,-8%);opacity:0}}
.sb-wellen{animation:sb-wellen 7s linear infinite}
@keyframes sb-wellen{to{transform:translateX(calc(var(--k,1) * 160px))}}
.ch-drache{animation:ch-drache var(--cd,24s) ease-in-out infinite alternate}
@keyframes ch-drache{0%{transform:translate(-8%,2%) rotate(-2deg)}50%{transform:translate(0,-4%) rotate(1deg)}100%{transform:translate(7%,1%) rotate(-1deg)}}
.az-rauch{animation:az-rauch 6s ease-in-out infinite alternate}
@keyframes az-rauch{from{opacity:.5;transform:translateY(6%) scale(.92)}to{opacity:1;transform:translateY(-8%) scale(1.12)}}
.ma-augen{animation:ma-augen 7s linear infinite}
@keyframes ma-augen{0%,40%{opacity:1}42%{opacity:0}44%,86%{opacity:1}88%{opacity:0}90%,100%{opacity:1}}
.nd-wogen{animation:nd-wogen var(--wd,15s) ease-in-out infinite alternate}
@keyframes nd-wogen{0%{transform:translateX(-4%) skewX(-7deg) scaleY(.92);opacity:.75}50%{opacity:1}100%{transform:translateX(4%) skewX(6deg) scaleY(1.08);opacity:.8}}
.gr-blitz{opacity:0;animation:gr-blitz 6.5s linear 1.4s infinite}
@keyframes gr-blitz{0%,61%{opacity:0}62%{opacity:1}64%{opacity:.2}66%{opacity:1}72%,100%{opacity:0}}
.gr-blitzlicht{position:absolute;inset:0;background:#E8E4FF;opacity:0;animation:gr-blitzlicht 6.5s linear 1.4s infinite;will-change:opacity}
@keyframes gr-blitzlicht{0%,61%{opacity:0}62%{opacity:.16}64%{opacity:0}66%{opacity:.1}72%,100%{opacity:0}}

/* ---------- Szene „Alle“: Sternenkreis (nur Grafikkarten-Bewegung) ---------- */
.al-dreh,.al-lauf{position:absolute;inset:0}
.al-dreh{transition:transform 1s cubic-bezier(.3,1.2,.4,1);will-change:transform}
.al-lauf{animation:sb-dreh 180s linear infinite;will-change:transform}
.al-ringbild{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.al-med{position:absolute;left:50%;top:50%;width:calc(var(--k) * 92px);height:calc(var(--k) * 92px);margin:calc(var(--k) * -46px) 0 0 calc(var(--k) * -46px);
  transform:rotate(calc(var(--i) * 30deg)) translateY(calc(var(--k) * -178px)) rotate(calc(var(--i) * -30deg))}
.al-gegen,.al-gegen2{width:100%;height:100%}
.al-gegen{animation:sb-dreh-zurueck 180s linear infinite;will-change:transform}
@keyframes sb-dreh-zurueck{to{transform:rotate(-360deg)}}
.al-gegen2{transition:transform 1s cubic-bezier(.3,1.2,.4,1)}
.al-med__in{width:100%;height:100%;transition:transform .7s var(--feder),opacity .5s}
.al-med__in>svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes al-plopp{from{opacity:0;transform:scale(.3)}}
.al-med__glanz{opacity:.55}
.al-hat-fokus .al-med__in{opacity:.45}
.al-hat-fokus .al-med.fokus .al-med__in{opacity:1;transform:scale(1.5)}
.al-bau__schein{opacity:.35}
.al-hat-fokus .al-bau__schein{opacity:.12}
.al-hat-fokus .al-bau.fokus .al-bau__schein{opacity:1}
.al-schnuppe{opacity:0;animation:al-schnuppe 10s cubic-bezier(.3,0,.6,1) 3s infinite}
@keyframes al-schnuppe{0%{opacity:0;transform:translate(10%,-10%)}2%{opacity:1}9%{opacity:0;transform:translate(-22%,12%)}100%{opacity:0;transform:translate(-22%,12%)}}

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .sb-buehne *{animation:none!important;transition:none!important}
  .gr-blitz,.gr-blitzlicht,.al-schnuppe{opacity:0}
  .sb-teilchen{display:none}
}

/* =========================================================================
   Startseite: kompakter Kopf und alle zwölf Kacheln in einem Blick
   ========================================================================= */
body.sb .auswahl__innen{position:relative;z-index:1;max-width:1520px;padding-top:0;gap:28px}
body.sb .sb-erste{min-height:calc(100svh - var(--leiste));display:grid;grid-template-rows:1fr auto;gap:clamp(14px,2.6vh,30px);padding:clamp(14px,3.4vh,44px) 0 clamp(16px,3vh,32px)}
body.sb .auswahl__kopf{position:relative;display:grid;grid-template-columns:1fr;align-content:center;gap:clamp(8px,1.6vh,16px);max-width:min(640px,52vw);
  background:none;border:0;box-shadow:none;padding:0;overflow:visible}
body.sb .auswahl__kopf::before{display:none}
body.sb .auswahl__kopf>*:not(.sb-mythos){transition:opacity .35s var(--ease),transform .5s var(--ease)}
body.sb .auswahl__kopf.sb-zeigt>*:not(.sb-mythos){opacity:0;transform:translateY(-16px)}
body.sb .auswahl__eyebrow{color:#DCD5F2;text-shadow:0 2px 10px rgba(0,0,0,.6)}
body.sb .auswahl__titel{font-size:clamp(46px,min(6.6vw,10.4vh),112px);text-shadow:0 6px 0 #F5C04A,0 18px 40px rgba(0,0,0,.55)}
body.sb .auswahl__titel em{text-shadow:0 6px 0 #4FD1C5,0 18px 40px rgba(0,0,0,.55)}
body.sb .auswahl__text{max-width:44ch;font-size:clamp(15px,min(1.3vw,2.1vh),18px);padding:0;color:#E6E0F7;text-shadow:0 1px 12px rgba(7,5,26,.9)}
body.sb .schachtel-marken{grid-column:1;margin-top:2px}

/* Bühnenbeschriftung */
.sb-mythos{position:absolute;left:0;right:-10%;top:50%;transform:translateY(-50%);display:grid;gap:clamp(6px,1.2vh,12px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.sb-zeigt .sb-mythos{opacity:1}
.sb-mythos__eyebrow{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.sb-mythos__name{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(50px,min(7.4vw,12vh),124px);line-height:.92;color:var(--creme,#F6EEDC);text-shadow:0 6px 0 var(--sb-a),0 20px 44px rgba(0,0,0,.6)}
.sb-mythos__text{margin:0;max-width:40ch;font-size:clamp(16px,min(1.45vw,2.3vh),20px);line-height:1.4;color:#fff;text-shadow:0 1px 14px rgba(7,5,26,.95),0 0 2px rgba(7,5,26,.8)}
.sb-mythos__fuss{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sb-mythos__zahl{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px 8px;border-radius:13px;background:var(--sb-a);color:var(--kante,#0A0820);border:2.5px solid var(--kante,#0A0820);box-shadow:0 4px 0 #000;font-weight:700;font-size:14px;line-height:1}
.sb-mythos__zahl b{font-family:var(--f-display);font-weight:600;font-size:21px}
.sb-mythos__los{font-size:14px;font-weight:600;color:#fff;opacity:.85;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.sb-mythos.neu>:nth-child(2){animation-delay:.04s}.sb-mythos.neu>:nth-child(3){animation-delay:.09s}.sb-mythos.neu>:nth-child(4){animation-delay:.14s}
@keyframes sb-zeile{from{opacity:0;transform:translateY(18px)}}

/* Kacheln */
body.sb .welten{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1vw,16px);container-type:inline-size;align-self:end}
/* Kacheln: eigene Grafikebene, damit Hover nur verschiebt und nichts neu gemalt wird */
body.sb .welt-karte{border-radius:20px;box-shadow:0 6px 0 var(--kante);will-change:transform}
body.sb .welt-karte.da{transition:transform .45s var(--feder),opacity .6s var(--ease)}
body.sb .welt-karte:hover,body.sb .welt-karte:focus-within,body.sb .welt-karte.sb-an{transform:translateY(-8px);box-shadow:0 6px 0 var(--kante);z-index:2}
body.sb .welt-karte::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--sb-k,#fff);opacity:0;transition:opacity .2s;pointer-events:none}
body.sb .welt-karte.sb-an::before,body.sb .welt-karte:focus-within::before{opacity:1}
body.sb .welt-karte__bild,body.sb .welt-karte__bild *{pointer-events:none}
body.sb .welt-karte__bild{aspect-ratio:auto;height:max(76px,min(calc((100cqw - 5 * clamp(10px,1vw,16px)) / 6 * .62),calc((100svh - var(--leiste) - 330px) / 2 - 64px)))}
body.sb .welt-karte__text{padding:10px 14px 13px;gap:1px}
body.sb .welt-karte__eyebrow{font-size:10px;letter-spacing:.13em}
body.sb .welt-karte__titel{font-size:clamp(17px,1.55vw,23px)}
body.sb .welt-karte__meta,body.sb .welt-karte__knoepfe{display:none}
body.sb .schachtel-zahl{top:8px;right:8px;font-size:14px;padding:2px 8px 2px 5px;border-radius:10px;border-width:2px;box-shadow:0 3px 0 var(--kante)}
body.sb .schachtel-zahl svg{width:13px;height:13px}
body.sb .auswahl__fuss{color:#B9B1DC;max-width:110ch}

/* mittlere Breiten: 4 × 3 */
@media (max-width:1100px),(max-height:620px) and (min-width:861px){
  body.sb .welten{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.sb .welt-karte__bild{height:max(80px,calc((100cqw - 3 * 14px) / 4 * .5))}
  body.sb .auswahl__kopf{max-width:min(620px,70vw)}
}
@media (max-width:760px){
  body.sb .welten{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  body.sb .welt-karte__bild{height:calc((100cqw - 20px) / 3 * .72)}
  body.sb .welt-karte__text{padding:8px 10px 10px}
  body.sb .welt-karte__eyebrow{display:none}
  body.sb .welt-karte__titel{font-size:clamp(14px,3.4vw,18px)}
  body.sb .auswahl__kopf{max-width:none}
  body.sb .sb-erste{min-height:0;grid-template-rows:auto auto;padding-top:clamp(20px,6vh,60px);gap:clamp(22px,8vh,80px)}
  .sb-schleier{background:linear-gradient(180deg,rgba(7,5,26,.55) 0,rgba(7,5,26,.1) 40%,rgba(7,5,26,.55) 100%)}
}
@media (max-width:480px){
  body.sb .welten{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sb .welt-karte__bild{height:calc((100cqw - 10px) / 2 * .62)}
  body.sb .welt-karte__eyebrow{display:block}
}

/* niedrige Bildschirme (Laptop 720–800 px): Titel einzeilig, Kacheln flacher */
@media (max-height:800px) and (min-width:861px){
  body.sb .auswahl__titel br{display:none}
  body.sb .auswahl__titel em::before{content:" "}
  body.sb .auswahl__titel{font-size:clamp(40px,8.6vh,72px)}
  body.sb .auswahl__kopf{max-width:min(720px,60vw)}
  body.sb .welt-karte__eyebrow{display:none}
  body.sb .welt-karte__text{padding:9px 13px 11px}
  body.sb .welt-karte__bild{height:max(70px,min(calc((100cqw - 5 * clamp(10px,1vw,16px)) / 6 * .62),calc((100svh - var(--leiste) - 340px) / 2 - 56px)))}
}

/* vorgebackene Bilder ersetzen die ruhenden SVGs */
.sb-gebacken{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
svg.sb-ersetzt{display:none}

/* Impressum und Datenschutz unter den Quellen */
.auswahl__recht a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.auswahl__recht a:hover,.auswahl__recht a:focus-visible{text-decoration-thickness:2px}
body.sb .auswahl__recht{margin-top:-14px}
/* Telefon: Bühnenbeschriftung nicht über den Rand */
@media (max-width:760px){ .sb-mythos{right:0} }