/* Kandeel-Karte „Licht durch Papier“: Zimmer, Laterne, Lichtmuster, Dachterrassen und Feuerwerk aus
   design/html/diwali-gruss-kandeel.html (N3), unverändert; ohne Start-Tipp, Stufentexte, Ende-Blatt, Sprachwahl,
   Abblende fürs Ende-Blatt (#zu) und Hinweis (der steht in .unten, karte.css). Zustände lit, is-idle, gescrollt und
   pausiert setzt kandeel.js am main. Die Bühne füllt das Fenster (ab 5:4 eigene Breit-Bilder), die Seite scrollt
   hinter der festen Bühne (.spur). */
:root{
 --tief:#1E0F2E;--gold-hell:#FFDFA6;--creme:#FBEBD3;
 /* Maßeinheit: wächst mit Breite und Höhe, Handy hochkant = 1vw */
 --u:min(1vw,.46svh);
 --lw:min(50vw,21.5svh);--lcx:71%;--hx:69%;--hy:21%;--ox:9%;--oy:32%;--sky:min(100vw,65svh);
}
@media (min-aspect-ratio:5/4){:root{--u:min(.8vw,.62svh);--lw:min(26vw,25svh);--lcx:30%;--hx:30%;--hy:25%;--ox:74%;--oy:46%;--sky:min(100vw,65svh)}}
picture{display:contents}
#dach::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(28,12,56,.62),rgba(28,12,56,.3) 60%,transparent)}
@media (min-aspect-ratio:5/4){.himmellaterne{top:calc(var(--y) * .62);left:var(--xl,var(--x))}}
html,body{height:auto;overflow-x:hidden;overflow-y:auto;background:var(--tief)}
.spur{height:430vh;height:430svh}
#buehne{position:absolute;inset:0;overflow:hidden;background:var(--tief);isolation:isolate}
.v-oben{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;background:linear-gradient(to bottom,rgba(30,12,46,.7) 0,rgba(30,12,46,.36) 55%,rgba(30,12,46,0) 100%)}
.ebene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* Dachterrassen liegen unter der Wand */
#dach{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
#dach .ebene{object-position:50% 0}
.himmellaterne{position:absolute;width:calc(var(--bn) * var(--sky));left:var(--x);top:var(--y);opacity:0;will-change:transform,opacity}
.himmellaterne .in{position:relative;animation:schweben var(--d,7s) ease-in-out var(--v,0s) infinite alternate}
.himmellaterne img{display:block;width:100%;height:auto;clip-path:inset(7% 0 0 0);position:relative}
.himmellaterne i{position:absolute;left:50%;top:32%;width:340%;aspect-ratio:1;margin:-170% 0 0 -170%;border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,170,80,.55),rgba(255,120,50,.18) 55%,transparent);animation:flackern 5.3s steps(1,end) var(--v,0s) infinite;mix-blend-mode:screen}
@keyframes schweben{from{transform:translate3d(0,0,0)}to{transform:translate3d(2px,-12px,0)}}
#feuer{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;mix-blend-mode:screen}

/* Wand mit Laterne */
#wand{position:absolute;inset:0;transform-origin:var(--ox) var(--oy);will-change:transform,opacity}
#wand .ebene{object-position:62% 50%}
.loch{position:absolute;left:var(--hx);top:var(--hy);width:260vmax;aspect-ratio:1;margin:-130vmax 0 0 -130vmax;border-radius:50%;
 background:radial-gradient(closest-side,rgba(52,16,42,0) 0,rgba(52,16,42,0) 24%,rgba(52,16,42,.3) 62%,rgba(52,16,42,.66) 100%);
 box-shadow:0 0 0 6000vh rgba(52,16,42,.66);transform:scale(.05);will-change:transform;
 transition:transform 3.4s cubic-bezier(.3,.1,.2,1) .5s}
.lit .loch{transform:scale(.62)}
/* eigenes Lichtmuster der Laterne */
.musterfeld{--m:min(110svh,170vw);position:absolute;left:calc(var(--hx) - var(--m) / 2);top:calc(var(--hy) + 3% - var(--m) / 2);width:var(--m);height:var(--m);opacity:0;overflow:hidden;
 -webkit-mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.65) 38%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.65) 38%,transparent 100%);
 transition:opacity 3s ease 1.4s;animation:wandern 80s ease-in-out infinite alternate;will-change:transform,opacity}
.lit .musterfeld{opacity:.5}
.muster{position:absolute;left:-20%;top:-20%;width:140%;height:140%;background-size:150px 150px;}
@keyframes wandern{from{transform:rotate(-5deg) scale(1)}to{transform:rotate(7deg) scale(1.06)}}

.laterne{position:absolute;left:calc(var(--lcx) - var(--lw) / 2);top:-1.5%;width:var(--lw);transform-origin:50% 0;animation:pendeln 9s ease-in-out infinite alternate;will-change:transform}
@keyframes pendeln{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
.laterne img{display:block;width:100%;height:auto;position:relative}
.laterne .hell{position:absolute;left:0;top:0;mix-blend-mode:screen;opacity:0;transition:opacity 2.6s ease .6s;filter:brightness(1.15) saturate(1.1)}
.lit .laterne .hell{opacity:.34;animation:flackern 4.7s steps(1,end) 3.4s infinite}
.laterne .dunkel{position:absolute;inset:0;background:#34102A;opacity:.72;transition:opacity 2.4s ease .3s;
 -webkit-mask:url(/assets/karten/bilder/kandeel/kandeel.webp) 0 0/100% 100% no-repeat;mask:url(/assets/karten/bilder/kandeel/kandeel.webp) 0 0/100% 100% no-repeat}
.lit .laterne .dunkel{opacity:0}
.laterne .glut{position:absolute;left:50%;top:31%;width:420%;aspect-ratio:1;margin:-210% 0 0 -210%;border-radius:50%;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(closest-side,rgba(255,176,90,.62),rgba(255,120,60,.22) 40%,transparent);transition:opacity 2.4s ease .5s}
.lit .laterne .glut{opacity:1;animation:flackern 4.7s steps(1,end) 3.4s infinite}
.laterne .kern{position:absolute;left:50%;top:31%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,120,.5),transparent);opacity:.0;mix-blend-mode:screen}
.is-idle .laterne .kern{animation:atmen 2.6s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.08}50%{opacity:.5}}
@keyframes flackern{0%{opacity:1}13%{opacity:.82}27%{opacity:.96}41%{opacity:.74}58%{opacity:.92}71%{opacity:.8}86%{opacity:1}}
/* Funken */
.funke{position:absolute;left:calc(var(--lcx) + var(--o) * var(--lw));top:calc(var(--lw) * 1.7);width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold-hell);opacity:0;box-shadow:0 0 6px 1px rgba(255,190,100,.7);
 animation:steigen var(--d) ease-out var(--v) infinite paused}
.lit .funke{animation-play-state:running}
@keyframes steigen{0%{transform:translate3d(0,0,0) scale(1);opacity:0}12%{opacity:.95}100%{transform:translate3d(var(--dx),calc(var(--u) * -34),0) scale(.3);opacity:0}}

#schleier{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(0deg,rgba(44,13,36,.92) 0,rgba(44,13,36,.74) 42%,transparent)}
.pausiert *,.pausiert *::before,.pausiert *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Scroll-Hinweis in .unten: erscheint nach dem Entzünden, verschwindet beim ersten Scrollen (wie #hinweis der Studie) */
#b .hinweis{transition:opacity .8s ease}
#b.lit .hinweis{opacity:.85;transition-delay:3.6s}
#b.gescrollt .hinweis{opacity:0;transition-delay:0s}