/* Tunnelbuch-Karte „Durch die Tore“: Lagen, Lichter, Funken und Kamera aus design/html/diwali-gruss-tunnel.html (N1),
   unverändert; ohne Start-Blatt, Stufentexte, Ende-Blatt, Sprachwahl und Hinweis (der steht in .unten, karte.css).
   Die Bühne füllt das Fenster (ab 5:4 eigene Breit-Bilder), die Seite scrollt hinter der festen Bühne (.spur). */
:root{--nacht-t:#120F32;--gold-hell:#F3D896}
html,body{height:auto;overflow-x:hidden;overflow-y:auto;background:var(--nacht-t)}
.spur{height:560vh;height:560svh}
#buehne{position:absolute;inset:0;overflow:hidden;
 background:linear-gradient(180deg,#2C3478 0%,#5A4C98 42%,#B9788A 74%,#E9A56F 100%);isolation:isolate}
.v-oben{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;background:linear-gradient(to bottom,rgba(24,18,60,.72) 0,rgba(24,18,60,.38) 55%,rgba(24,18,60,0) 100%)}
.v-unten{background:linear-gradient(to top,rgba(24,18,60,.94) 0,rgba(24,18,60,.84) 50%,rgba(24,18,60,0) 100%)}

/* Himmel */
.sterne{position:absolute;inset:0;pointer-events:none}
.stern{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-hell);opacity:.5;animation:glimm var(--d,4s) ease-in-out var(--v,0s) infinite alternate}
.boden{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,transparent,#3A2860 75%);pointer-events:none}

/* Lagen: gemeinsamer Fluchtpunkt bei 50 % / 56 % der Bühne, Ursprung im Bogen der Rahmen */
.lage{position:absolute;left:50%;top:2%;height:93%;aspect-ratio:1600/2541;transform-origin:50% 58%;transform:translate(var(--tx,-50%),0)}
/* Breit-Lagen (Seitenverhältnis ≥ 5:4, 2912×1632): nach Breite statt Höhe; Ursprung im Tor */
.lage.hat-breit{--oxn:.513;--oyn:.68;--lw:min(100vw,calc(93vh * 1.784));width:var(--lw);height:auto;aspect-ratio:2912/1632;top:calc(56% - var(--oyn) * var(--lw) / 1.784);--tx:calc(var(--oxn) * -100%);transform-origin:calc(var(--oxn) * 100%) calc(var(--oyn) * 100%)}
#lT.hat-breit{--oxn:.512;--oyn:.57}
.lage.hat-breit .schatten{transform-origin:inherit}
.lage.hat-breit img:not(.schatten){height:auto}
.lage.hat-breit.wand::before,.lage.hat-breit.wand::after{display:none}
.lage.platte.hat-breit{--lw:max(100vw,calc(100vh * 1.784));top:calc(50% - var(--lw) / 1.784 / 2);--tx:-50%;transform-origin:50% 50%}
.lage.platte.hat-breit img{-webkit-mask-image:none;mask-image:none}
.lage:not(.hat-breit) .nur-breit,.lage.hat-breit .nur-hoch{display:none}
.lage picture{display:contents}
.lage img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.lage .schatten{position:absolute;inset:0;opacity:.5;transform:translate(0,.9%) scale(1.012);transform-origin:50% 58%;pointer-events:none}
.lage.platte{top:0;height:100%;aspect-ratio:1200/2141;transform-origin:50% 50%}
.lage.platte img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.dim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 56%,rgba(34,26,84,.2),rgba(34,26,84,.62));opacity:0}

/* Breite Schirme: Wand der Hochformat-Lagen läuft seitlich weiter */
.lage.wand::before,.lage.wand::after{content:"";position:absolute;top:var(--wt);bottom:0;width:80vw;background:var(--wf);pointer-events:none}
.lage.wand::before{right:calc(100% - 1px)}.lage.wand::after{left:calc(100% - 1px)}
#lF{--wt:29.5%;--wf:linear-gradient(180deg,#4A5E80,#3E5274)}
#lT{--wt:21%;--wf:linear-gradient(180deg,#18929A,#14868E)}
/* Lichter in den Lagen (Prozent der jeweiligen Lage) */
.glut{position:absolute;width:var(--g,18%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,196,96,.85) 0%,rgba(255,150,50,.38) 32%,rgba(255,120,30,0) 68%);opacity:.0;animation:flackern var(--d,2.6s) ease-in-out var(--v,0s) infinite}
.lichter-an .glut{opacity:.8}
.glimmer{position:absolute;width:var(--g,2.4%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,#fff6d8 0%,rgba(255,214,120,.8) 30%,rgba(255,200,90,0) 70%);opacity:0;animation:glimm var(--d,3s) ease-in-out var(--v,0s) infinite alternate}
.lichter-an .glimmer{opacity:.9}
.feuer{position:absolute;width:var(--g,30%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,206,110,.55) 0%,rgba(255,170,60,.22) 40%,rgba(255,150,40,0) 70%);opacity:0;animation:atmen var(--d,3.4s) ease-in-out var(--v,0s) infinite alternate}
.lichter-an .feuer{opacity:.9}
@keyframes flackern{0%,100%{opacity:.85}18%{opacity:.62}34%{opacity:.95}52%{opacity:.7}71%{opacity:1}86%{opacity:.74}}
@keyframes glimm{from{opacity:.15}to{opacity:.95}}
@keyframes atmen{from{opacity:.35}to{opacity:1}}
.stern{opacity:.5}

#licht{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
 background:radial-gradient(ellipse 62% 52% at 50% 56%,rgba(255,170,90,.42),rgba(255,130,80,.14) 55%,rgba(255,120,60,0) 80%)}
#funken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
#rand{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 52%,rgba(0,0,0,0) 55%,rgba(30,22,72,.4));opacity:1}
.korn{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgnIG51bU9jdGF2ZXM9JzMnIHNlZWQ9JzQnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgLjUgIDAgMCAwIDAgLjUgIDAgMCAwIDAgLjUgIDAgMCAwIC45IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=")}

/* Bewegung reduzieren (System oder Pause) */
.ruhig *,.ruhig *::before{animation:none!important}
.ruhig .glut,.ruhig .glimmer,.ruhig .feuer{opacity:.75!important}
@media (prefers-reduced-motion:reduce){
 *,*::before{animation:none!important;transition-duration:.01ms!important}
 .glut,.glimmer,.feuer{opacity:.75!important}
}