.atmo{--rauschen-wolken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032 0.0085' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.7 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--rauschen-nebel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.0065' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.2 0 0 0 -0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--rauschen-decke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07 0.3' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.8 0 0 0 0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--rauschen-reif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 1.1' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:1;pointer-events:none;animation:.9s ease-out both atmo-einblenden;position:absolute;inset:0;overflow:hidden}.atmo>*,.atmo-szene,.atmo-szene>*{position:absolute}.atmo-himmel,.atmo-sonne,.atmo-wolken,.atmo-nebel,.atmo-canvas,.atmo-blitz{width:100%;height:100%;inset:0}@keyframes atmo-einblenden{0%{opacity:0}to{opacity:1}}.hero-bg img{transition:filter 1.6s}.hero[data-zeit=daemmerung] .hero-bg img{filter:saturate(.85)brightness(1.08)}.hero:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter]) .hero-bg img{filter:saturate(.85)brightness(.9)contrast(1.05)}.hero[data-wetter=nebel] .hero-bg img{filter:saturate(.7)brightness(.95)contrast(.8)}.hero:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=schnee],[data-wetter=gewitter],[data-wetter=nebel]) .particle-field{display:none}.atmo-himmel{opacity:0;mix-blend-mode:screen;transition:opacity 1.6s,background 1.6s}.atmo[data-zeit=daemmerung] .atmo-himmel{opacity:1;background:linear-gradient(#2828736b 0%,#82377d47 32%,#ff69325c 60%,#ff96462e 74%,#0000 86%)}.atmo-sonne{opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at 84% -4%,#fffaebd9 0%,#ffecbe73 5%,#0000 12%),radial-gradient(circle at 84% -4%,#ffd6964d 0%,#ffbe781a 30%,#0000 55%);transition:opacity 1.8s}.atmo-sonne i{filter:blur(6px);background:repeating-conic-gradient(#ffe6af12 0deg 2deg,#0000 5deg 11deg,#ffe6af0a 13deg 15deg,#0000 18deg 23deg);width:160vmax;height:160vmax;animation:240s linear infinite atmo-strahlen;position:absolute;top:-4%;left:84%;translate:-50% -50%;-webkit-mask-image:radial-gradient(circle,#000 0%,#00000059 16%,#0000 38%);mask-image:radial-gradient(circle,#000 0%,#00000059 16%,#0000 38%)}.atmo[data-zeit=daemmerung][data-wetter=klar] .atmo-sonne{opacity:.8;background:radial-gradient(55% 30% at 76% 76%,#ffaa5a80 0%,#ff783c2e 45%,#0000 72%)}.atmo[data-zeit=daemmerung] .atmo-sonne i{display:none}@keyframes atmo-strahlen{to{rotate:360deg}}.atmo-wolken{--wolke:46, 42, 58;opacity:0;mix-blend-mode:screen;transition:opacity 2s;-webkit-mask-image:linear-gradient(#000 0%,#000000b3 18%,#0000 42%);mask-image:linear-gradient(#000 0%,#000000b3 18%,#0000 42%)}.atmo[data-zeit=daemmerung] .atmo-wolken{mix-blend-mode:normal}.atmo-wolken i{background:rgb(var(--wolke));width:200%;height:72%;-webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent), var(--rauschen-wolken);-webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent), var(--rauschen-wolken);mask-image:linear-gradient(to bottom, #000 55%, transparent), var(--rauschen-wolken);-webkit-mask-composite:source-in;animation:260s linear infinite atmo-drift;position:absolute;top:-8%;left:0;-webkit-mask-size:100% 100%,50% 100%;mask-size:100% 100%,50% 100%;-webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x;-webkit-mask-composite:source-in;mask-composite:intersect}.atmo-wolken i:nth-child(2){opacity:.75;height:58%;animation-duration:170s;top:-2%;-webkit-mask-position:0 0,37% 0;mask-position:0 0,37% 0;-webkit-mask-size:100% 100%,42% 100%;mask-size:100% 100%,42% 100%}.atmo-wolken i:nth-child(3){opacity:.55;height:50%;animation-duration:420s;animation-direction:reverse;top:-14%;-webkit-mask-position:0 0,71% 0;mask-position:0 0,71% 0}.atmo[data-zeit=daemmerung] .atmo-wolken{--wolke:92, 60, 88}.atmo:is([data-wetter=wolkig],[data-wetter=regen],[data-wetter=schnee]) .atmo-wolken{opacity:.7}.atmo:is([data-wetter=starkregen],[data-wetter=gewitter]) .atmo-wolken{opacity:.9}.atmo-nebel{opacity:0;transition:opacity 2s;-webkit-mask-image:linear-gradient(#0000 22%,#000 58% 100%);mask-image:linear-gradient(#0000 22%,#000 58% 100%)}.atmo-nebel i{width:200%;height:80%;-webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent), var(--rauschen-nebel);-webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent), var(--rauschen-nebel);mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent), var(--rauschen-nebel);-webkit-mask-composite:source-in;background:#b9c8e18c;animation:150s linear infinite atmo-drift;position:absolute;top:28%;left:0;-webkit-mask-size:100% 100%,50% 100%;mask-size:100% 100%,50% 100%;-webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x;-webkit-mask-composite:source-in;mask-composite:intersect}.atmo-nebel i+i{opacity:.7;animation-duration:230s;animation-direction:reverse;top:44%;-webkit-mask-position:0 0,45% 0;mask-position:0 0,45% 0}.atmo:is([data-zeit=nacht],[data-zeit=tag]) .atmo-nebel i{background:#6976946b}.atmo[data-wetter=nebel] .atmo-nebel{opacity:1}.atmo:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter]) .atmo-nebel{opacity:.18}@keyframes atmo-drift{0%{translate:0}to{translate:-50%}}.atmo-reif,.atmo-schneedecke{opacity:0;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 45%), var(--rauschen-decke);-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 45%), var(--rauschen-decke);mask-image:linear-gradient(to bottom, transparent 0%, #000 45%), var(--rauschen-decke);-webkit-mask-composite:source-in;inset:79% 0 0;-webkit-mask-size:100% 100%,900px 300px;mask-size:100% 100%,900px 300px;-webkit-mask-composite:source-in;mask-composite:intersect}.atmo-reif{-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%), var(--rauschen-reif);-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%), var(--rauschen-reif);mask-image:linear-gradient(to bottom, transparent 0%, #000 10%), var(--rauschen-reif);background:#cde1f5bf;transition:opacity 4s;-webkit-mask-size:100% 100%,400px 200px;mask-size:100% 100%,400px 200px}.atmo[data-frost] .atmo-reif{opacity:.55}.atmo[data-frost]:is([data-zeit=nacht],[data-zeit=tag]) .atmo-reif{opacity:.32}.atmo-schneedecke{filter:blur(.8px);background:linear-gradient(#e1e8f5b3,#f0f4fcf2);transition:opacity 120s linear}.atmo[data-wetter=schnee] .atmo-schneedecke{opacity:.8}.atmo[data-wetter=schnee]:is([data-zeit=nacht],[data-zeit=tag]) .atmo-schneedecke{opacity:.3;background:linear-gradient(#8c9ebc73,#c4d0e4d9)}.atmo-szene{overflow:visible}.atmo-mast{width:0;height:0}.atmo-mast>span{position:absolute;top:0;left:0}.atmo-mast__kegel,.atmo-mast__aus b{width:var(--kegel-breite);height:var(--kegel-laenge);transform-origin:50% 0;translate:-50%;rotate:var(--kegel-drehung);position:absolute;top:0;left:0}.atmo-mast__kegel{--kegel-a:.24;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s}.atmo-mast__kegel>i{filter:blur(26px);animation:9s ease-in-out infinite atmo-atmen;position:absolute;inset:0}.atmo-mast__kegel b{clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:radial-gradient(ellipse 30% 22% at 50% 0%, rgba(var(--rgb), calc(var(--kegel-a) * 1.4)) 0%, transparent 100%), linear-gradient(to bottom, rgba(var(--rgb), var(--kegel-a)) 0%, rgba(var(--rgb), calc(var(--kegel-a) * .45)) 35%, rgba(var(--rgb), calc(var(--kegel-a) * .15)) 72%, transparent 100%);position:absolute;inset:0}.atmo-mast--rechts .atmo-mast__kegel>i{animation-delay:-4s}.atmo:is([data-wetter=regen],[data-wetter=schnee],[data-wetter=nebel]) .atmo-mast__kegel{--kegel-a:.34}.atmo:is([data-wetter=starkregen],[data-wetter=gewitter]) .atmo-mast__kegel{--kegel-a:.42}.atmo[data-licht=an] .atmo-mast__kegel{opacity:1}.atmo[data-zeit=daemmerung] .atmo-mast__kegel{opacity:.55}@keyframes atmo-atmen{0%,to{opacity:.88}50%{opacity:1}}.atmo-mast__aus{opacity:0;transition:opacity 1.2s}.atmo-mast__aus b{filter:blur(26px);opacity:0}.atmo-mast__aus i{clip-path:polygon(40% 0,60% 0,106% 100%,-6% 100%);background:linear-gradient(#040810f0 0%,#040810cc 40%,#04081073 80%,#0000 100%);position:absolute;inset:0}.atmo[data-licht=aus] .atmo-mast__aus{opacity:1}.atmo[data-foto] .atmo-mast__aus,.atmo[data-foto] .atmo-lampe-aus{display:none}.atmo-lampe{width:var(--gr);height:var(--gr);mix-blend-mode:screen;background:radial-gradient(circle, #fff 0%, #fffffff2 28%, rgba(var(--rgb), .35) 52%, transparent 70%);opacity:0;border-radius:50%;transition:opacity .8s;translate:-50% -50%}.atmo[data-licht=an] .atmo-lampe{opacity:.85}.atmo-lampe-aus{width:calc(var(--gr) * 1.1);height:calc(var(--gr) * 1.05);filter:blur(.35px);opacity:0;background:linear-gradient(165deg,#686f7ce0 0%,#3e444feb 50%,#343943e6 100%);border-radius:24%;transition:opacity .6s;translate:-50% -50%;box-shadow:0 0 1.5px #3c424eb3}.atmo:is([data-zeit=nacht],[data-zeit=tag]) .atmo-lampe-aus{background:linear-gradient(165deg,#2c313af2 0%,#12151bf7 55%,#0c0e13f2 100%);box-shadow:0 0 1.5px #0e1016cc}.atmo[data-licht=aus] .atmo-lampe-aus{opacity:1}.atmo-mast>.atmo-mast__glanz{width:calc(var(--kopf) * 3.4);height:calc(var(--kopf) * 3.4);mix-blend-mode:screen;background:radial-gradient(circle, #ffffff80 0%, #ffffff2e 9%, transparent 22%), radial-gradient(circle, rgba(var(--rgb), .38) 0%, rgba(var(--rgb), .14) 28%, rgba(var(--rgb), .04) 50%, transparent 70%);opacity:0;border-radius:50%;transition:opacity 1s;translate:-50% -50%}.atmo[data-licht=an] .atmo-mast__glanz{opacity:1}.atmo:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter],[data-wetter=nebel],[data-wetter=schnee]) .atmo-mast__glanz{scale:1.35}.atmo-mast>.atmo-mast__spiegelung{top:var(--boden);width:calc(var(--kopf) * 1.1);height:calc(var(--kopf) * 3.6);mix-blend-mode:screen;filter:blur(7px);background:linear-gradient(to right, transparent, rgba(var(--rgb), .35) 35%, #ffffff4d 50%, rgba(var(--rgb), .35) 65%, transparent), transparent;opacity:0;transition:opacity 3s;animation:2.4s ease-in-out infinite atmo-schimmern;translate:-50%;-webkit-mask-image:linear-gradient(#000 0%,#00000080 40%,#0000 100%);mask-image:linear-gradient(#000 0%,#00000080 40%,#0000 100%)}.atmo[data-licht=an]:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter]) .atmo-mast__spiegelung{opacity:.7}@keyframes atmo-schimmern{0%,to{scale:1}30%{scale:.86 1.04}60%{scale:1.08 .97}}.atmo[data-zuendung] .atmo-mast__aus{opacity:1;transition:none;animation:.6s ease-out 1.5s both atmo-aus-weg}.atmo[data-zuendung] .atmo-mast__aus b{opacity:1}.atmo[data-zuendung] .atmo-mast--rechts .atmo-mast__aus{animation-delay:1.95s}.atmo[data-zuendung] .atmo-mast__kegel{transition:none;animation:1.4s ease-out .9s both atmo-kegel-an}.atmo[data-zuendung] .atmo-mast--rechts .atmo-mast__kegel{animation-delay:1.5s}.atmo[data-zuendung] .atmo-mast__glanz{transition:none;animation:1.2s ease-out .8s both atmo-kegel-an}.atmo[data-zuendung] .atmo-mast--rechts .atmo-mast__glanz{animation-delay:1.45s}.atmo[data-zuendung] .atmo-lampe-aus{animation:atmo-aus-weg 80ms linear var(--verzug) both;transition:none}.atmo[data-zuendung] .atmo-lampe{animation:atmo-lampe-an .9s linear var(--verzug) both;transition:none}@keyframes atmo-aus-weg{0%{opacity:1}to{opacity:0}}@keyframes atmo-kegel-an{0%{opacity:0}30%{opacity:.5}38%{opacity:.25}to{opacity:1}}@keyframes atmo-lampe-an{0%{opacity:0;scale:.6}6%{opacity:1;scale:1.5}12%{opacity:.1;scale:1}20%{opacity:.8;scale:1.2}26%{opacity:.2}40%{opacity:1;scale:1.35}to{opacity:.9;scale:1}}.atmo-canvas{display:block}.atmo-blitz{background:radial-gradient(ellipse 40% 55% at var(--blitz-x,30%) 8%, #e1e8ffd9, #aabeff40 55%, transparent 80%), linear-gradient(to bottom, #aab9e640, transparent 70%);mix-blend-mode:screen;opacity:0;animation:.75s linear both atmo-blitzen}@keyframes atmo-blitzen{0%{opacity:0}4%{opacity:.45}10%{opacity:.1}18%{opacity:.35}24%{opacity:.05}32%{opacity:.25}60%{opacity:.04}to{opacity:0}}.atmo-demo{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#030811cc;border:1px solid #00c4ff59;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;max-width:calc(100% - 32px);margin:0;padding:10px 14px;font-size:.85rem;display:flex;position:absolute;bottom:18px;left:50%;translate:-50%}.atmo-demo__titel{float:left;font-family:var(--font-heading);letter-spacing:2px;text-transform:uppercase;color:var(--neon-blau);padding:0;font-weight:700}.atmo-demo label{align-items:center;gap:6px;display:flex}.atmo-demo select,.atmo-demo button{font:inherit;color:#fff;background:#ffffff14;border:1px solid #ffffff40;border-radius:6px;padding:4px 8px}.atmo-demo select option{color:#000}.atmo-demo button{cursor:pointer;border-color:var(--neon-rot)}.atmo-demo button:disabled{opacity:.4;cursor:default}.atmo-sonne i,.atmo-wolken i,.atmo-nebel i,.atmo-mast>.atmo-mast__spiegelung{animation-play-state:paused}.atmo:is([data-wetter=wolkig],[data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter],[data-wetter=schnee]) .atmo-wolken i,.atmo:is([data-wetter=nebel],[data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter]) .atmo-nebel i,.atmo[data-licht=an]:is([data-wetter=regen],[data-wetter=starkregen],[data-wetter=gewitter]) .atmo-mast>.atmo-mast__spiegelung{animation-play-state:running}