/* Tiefe-Karten: Himmel, Silhouette bzw. Szene, Vordergrund und Licht mit Parallaxe (tiefe.js). Rahmen und Text in karte.css.
   Aus design/html/assets/diwali-tiefe/tiefe.css, ohne Gruß-Blatt. */
.kam{position:absolute;top:0;left:50%;translate:-50% 0;height:100%;aspect-ratio:9/16;overflow:visible}
.cam{position:absolute;inset:0;transform-origin:50% 75%;animation:atem 11s ease-in-out infinite alternate}
@keyframes atem{from{transform:scale(1)}to{transform:scale(1.014)}}
.layer{position:absolute;inset:0;will-change:transform;pointer-events:none}
.lz{position:absolute;inset:0;transform-origin:50% 100%}
.lz img{display:block}
.sky img{position:absolute;left:50%;top:50%;width:112%;height:112%;object-fit:cover;translate:-50% -50%}
.obj{position:absolute;transform:translateX(-50%)}
.obj img{width:100%;height:auto}
.halo{position:absolute;border-radius:50%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,196,110,.55),rgba(255,196,110,0) 68%);mix-blend-mode:screen;animation:pl 5.5s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.18}50%{opacity:.7}}
.gl{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,206,120,.95),rgba(255,160,70,.35) 45%,rgba(255,160,70,0) 70%);mix-blend-mode:screen;opacity:0;animation:zuend .5s ease-out forwards,fl 1.9s ease-in-out infinite alternate}
@keyframes zuend{to{opacity:1}}
@keyframes fl{from{filter:brightness(.8)}to{filter:brightness(1.15)}}
.stern{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 2px rgba(255,214,120,.65);opacity:0;animation:tw 3.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}
.funke{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFD98A;box-shadow:0 0 6px 1px rgba(255,200,110,.7);opacity:0;animation:steig 6s ease-in infinite}
@keyframes steig{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-150px)}}
.dunkel{position:absolute;inset:-2px;background:#04071f;pointer-events:none;z-index:3;opacity:0}
.pause-an *,.pause-an{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.cam,.halo,.stern,.funke,.gl{animation:none!important}.gl{opacity:1}.stern,.funke{display:none}.halo{opacity:.35}}
/* Papierhügel vorn */
.hgbox{position:absolute;inset:0}
.hg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 -5px 10px rgba(0,0,12,.45))}
.gl.hl{width:2.6%;margin-left:-1.3%;margin-top:-1.3%;background:radial-gradient(circle,#fff3d2 0 14%,rgba(255,196,110,.9) 22%,rgba(255,160,70,.3) 48%,rgba(255,160,70,0) 70%)}
.lat{position:absolute;width:13px;height:17px;border-radius:3px 3px 5px 5px;background:linear-gradient(#ffe2a0,#ff9c3c);box-shadow:0 0 14px 5px rgba(255,170,70,.55);opacity:0;animation:steigl 18s linear infinite}
@keyframes steigl{0%{opacity:0;transform:translate3d(0,0,0) scale(.8)}12%{opacity:.95}85%{opacity:.8}100%{opacity:0;transform:translate3d(14px,-640px,0) scale(1.15)}}
.gw{position:absolute;width:4px;height:4px;border-radius:50%;background:#E8FFB0;box-shadow:0 0 9px 3px rgba(190,255,150,.65);opacity:0;animation:drift 8s ease-in-out infinite}
@keyframes drift{0%{opacity:0;transform:translate3d(0,0,0)}25%{opacity:.95}50%{opacity:.4;transform:translate3d(26px,-22px,0)}75%{opacity:.95}100%{opacity:0;transform:translate3d(-8px,-40px,0)}}
.ray{position:absolute;width:15%;height:80%;margin-left:-7.5%;transform-origin:50% 100%;background:linear-gradient(to top,rgba(255,214,150,.42),rgba(255,214,150,0) 85%);mix-blend-mode:screen;opacity:.2;animation:strahl 7s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(to right,transparent,#000 50%,transparent);mask-image:linear-gradient(to right,transparent,#000 50%,transparent)}
@keyframes strahl{from{opacity:.06}to{opacity:.3}}
@media(prefers-reduced-motion:reduce){.lat,.gw,.ray{animation:none!important}.lat,.gw{display:none}.ray{opacity:.2}}
.layer.gesichtl{z-index:4}
.gbox{position:relative;width:100%}
.gesicht{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffdf6 0,#fff8e4 28%,rgba(255,226,160,.9) 44%,rgba(255,196,110,.42) 62%,rgba(255,180,90,0) 74%);opacity:0;animation:gauf 1.3s ease-out .15s forwards,gpuls 5.5s ease-in-out 1.5s infinite}
@keyframes gauf{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes gpuls{0%,100%{opacity:.92;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.gesicht{animation:none;opacity:1}}
.szw{position:absolute;inset:0;transform-origin:50% 50%}
.szw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}

.bild-box{background:#07102e}
.gesicht.strahlend::before,.gesicht.strahlend::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.gesicht.strahlend::before{inset:-170%;background:radial-gradient(circle,rgba(255,232,170,.62) 0,rgba(255,206,120,.3) 34%,rgba(255,190,100,0) 70%)}
.gesicht.strahlend::after{inset:-300%;background:repeating-conic-gradient(from 6deg,rgba(255,236,186,.8) 0 2.5deg,transparent 2.5deg 15deg,rgba(255,220,150,.42) 15deg 16.5deg,transparent 16.5deg 30deg);-webkit-mask:radial-gradient(circle,#000 14%,rgba(0,0,0,.5) 36%,transparent 68%);mask:radial-gradient(circle,#000 14%,rgba(0,0,0,.5) 36%,transparent 68%);animation:gdreh 80s linear infinite}
@keyframes gdreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gesicht.strahlend::after{animation:none}}

/* Aus design/html/assets/diwali-tiefe/tiefe.css (07.11.2026): Grundfarbe, Zündung beim Start, Spiegelung im Wasser */
.bild-box{background:var(--grund,#07102e)}
.dunkel{background:var(--grund,#04071f)}
@keyframes zuend{0%{opacity:0;scale:.3}45%{opacity:1;scale:1.35}100%{opacity:1;scale:1}}
.nacht{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.dunkel.ring{background:none}
.zuendung{position:absolute;inset:0;z-index:5}
.zuender,.zflamme{position:absolute;aspect-ratio:1;border-radius:50%;opacity:0;mix-blend-mode:screen}
.zuender{background:radial-gradient(circle,#fffaf0 0 7%,#ffe2a0 14%,rgba(255,190,100,.55) 30%,rgba(255,150,60,.16) 52%,rgba(255,150,60,0) 70%)}
.zflamme{background:radial-gradient(circle,#fff6dc 0 9%,rgba(255,206,120,.85) 24%,rgba(255,150,60,.22) 50%,rgba(255,150,60,0) 70%)}
.zglut{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#FFE3A0;box-shadow:0 0 6px 2px rgba(255,190,100,.7);opacity:0}
.spg{position:absolute;inset:0;pointer-events:none}
.spgf{position:absolute;inset:0;transform:scaleY(-1);filter:brightness(.62) saturate(1.15) blur(.6px);opacity:.9}
.spgw{position:absolute;left:-10%;right:-10%;bottom:0;background:linear-gradient(rgba(20,40,80,.15),rgba(10,20,50,.55)),repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,236,200,.22) 9px 11px,transparent 11px 22px);animation:spgw 7s ease-in-out infinite alternate}
.spgw::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,226,170,.45)}
@keyframes spgw{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@media(prefers-reduced-motion:reduce){.spgw{animation:none}.nacht{display:none}}