.hb{--fg:#f3eeff;--fg-soft:#ddd5f6;--fg-muted:#c7bee6;--fg-subtle:#b4abd8;--accent:#bba5ff;--accent-text:#d2c3ff;--accent-soft:rgb(187 165 255/0.18);--accent-line:rgb(187 165 255/0.5);--gold:#ffd37d;--gold-soft:rgb(255 211 125/0.16);--gold-line:rgb(255 211 125/0.45);--rose:#ffa3d4;--success:#5fe3a1;--warning:#ffa45c;--info:#8fd6ff;--border:rgb(214 200 255/0.24);--border-ctl:rgb(214 200 255/0.38);--border-hover:rgb(224 210 255/0.6);--canvas:rgb(20 14 48/0.6);--surface-1:rgb(20 14 48/0.72);--surface-2:rgb(30 22 66/0.7);--surface-3:rgb(40 30 84/0.85);--panel:rgb(20 14 48/0.72);--stern:#f4efff;color-scheme:dark;position:relative;isolation:isolate;overflow:clip;container-type:inline-size;display:grid;aspect-ratio:3/1;border-radius:14px;background:#110c27;color:var(--fg);box-shadow:0 24px 60px -30px rgb(10 4 40/.9),0 0 0 1px rgb(214 200 255/.14)}.hb[data-groesse=kompakt]{aspect-ratio:3.6/1}.hb-rahmen{position:absolute;inset:0;z-index:-2;display:flex;background:url(/assets/yurna/banner/rahmen-fuell-links.webp) 0/50.5% 100% no-repeat,url(/assets/yurna/banner/rahmen-fuell-rechts.webp) 100%/50% 100% no-repeat,#120c26}.hb-teil{position:relative;flex:0 1 auto;min-width:0;height:100%;background-repeat:no-repeat;background-size:auto 100%}.hb-links{aspect-ratio:860/667;background-image:url(/assets/yurna/banner/rahmen-links.webp);background-position:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.hb-mitte{aspect-ratio:280/667;background-image:url(/assets/yurna/banner/rahmen-mitte-oben.webp),url(/assets/yurna/banner/rahmen-mitte-unten.webp);background-position:top,bottom;background-size:auto calc(100cqw / 6 + 1px),auto calc(100cqw / 6 + 1px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}.hb-rechts{aspect-ratio:860/667;background-image:url(/assets/yurna/banner/rahmen-rechts.webp);background-position:100%;-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}.hb-fuell{flex:1 0 0}:root[data-bewegung=lebendig] :is(.hb-links,.hb-rechts):after,:root[data-bewegung=lebendig] :is(.hb-links,.hb-rechts):before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-size:auto 100%;background-position:inherit;opacity:0;pointer-events:none}:root[data-bewegung=lebendig] .hb-links:before{background-image:url(/assets/yurna/banner/band-links-2.webp);animation:hb-wehen-unten 5s steps(6) -1.75s infinite alternate}:root[data-bewegung=lebendig] .hb-links:after{background-image:url(/assets/yurna/banner/band-links-1.webp);animation:hb-wehen-oben 5s steps(6) -1.75s infinite alternate}:root[data-bewegung=lebendig] .hb-rechts:before{background-image:url(/assets/yurna/banner/band-rechts-2.webp);animation:hb-wehen-unten calc(80s / 12) steps(8) -4.5s infinite alternate}:root[data-bewegung=lebendig] .hb-rechts:after{background-image:url(/assets/yurna/banner/band-rechts-1.webp);animation:hb-wehen-oben calc(80s / 12) steps(8) -4.5s infinite alternate}.hb-wehen{display:none}.hb-nebel{position:absolute;z-index:-2;top:0;height:100%;aspect-ratio:860/667;max-width:50%;pointer-events:none}.hb-nebel-links{left:0}.hb-nebel-rechts{right:0}:root[data-bewegung=lebendig] .hb-nebel:after,:root[data-bewegung=lebendig] .hb-nebel:before{content:"";position:absolute;inset:0;background:url(/assets/yurna/banner/nebel-links.webp) 0/auto 100% no-repeat;opacity:.35}:root[data-bewegung=lebendig] .hb-nebel-rechts:after,:root[data-bewegung=lebendig] .hb-nebel-rechts:before{background-image:url(/assets/yurna/banner/nebel-rechts.webp);background-position:100%}:root[data-bewegung=lebendig] .hb-nebel-links:before{animation:hb-nebel-treiben 29s steps(87) -12s infinite alternate}:root[data-bewegung=lebendig] .hb-nebel-links:after{animation:hb-nebel-wabern 21s steps(63) -20s infinite alternate}:root[data-bewegung=lebendig] .hb-nebel-rechts:before{animation:hb-nebel-wabern 33s steps(99) -7s infinite alternate}:root[data-bewegung=lebendig] .hb-nebel-rechts:after{animation:hb-nebel-treiben 24s steps(72) -25s infinite alternate}.hb-schleier{display:none}:root[data-bewegung=lebendig] .hb-schleier{display:block;position:absolute;z-index:-1;inset:4% 14%;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 35%,rgb(0 0 0/.55) 68%,transparent);mask-image:radial-gradient(closest-side,#000 35%,rgb(0 0 0/.55) 68%,transparent);animation:hb-schleier-atmen 9s steps(27) -3s infinite alternate}.hb-schleier>i{position:absolute;top:0;left:0;will-change:transform}.hb-schleier>i:first-child{width:calc(100% + 640px);height:calc(100% + 320px);background:url(/assets/yurna/banner/nebel-zug-a.webp) 0 0/640px 320px repeat;opacity:.8;animation:hb-schleier-a 34s steps(408) infinite}.hb-schleier>i:last-child{width:calc(100% + 800px);height:calc(100% + 400px);background:url(/assets/yurna/banner/nebel-zug-b.webp) 0 0/800px 400px repeat;opacity:.5;animation:hb-schleier-b 23s steps(276) infinite}.hb-mondschein{left:4%;top:12%;width:17%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(255 226 170/.32),transparent 66%);opacity:.6;animation:hb-mond 6s steps(9) infinite}.hb-himmel,.hb-mondschein{position:absolute;z-index:-1;pointer-events:none}.hb-himmel{inset:0;overflow:hidden}.hb-drift{top:0;bottom:0;left:22%;width:calc(56% + 260px);opacity:.6;background-image:radial-gradient(1.3px 1.3px at 236px 119px,rgb(244 239 255/.8) 50%,transparent 100%),radial-gradient(1.1px 1.1px at 165px 134px,rgb(244 239 255/.83) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 244px 103px,rgb(244 239 255/.59) 50%,transparent 100%),radial-gradient(.9px .9px at 153px 91px,rgb(244 239 255/.67) 50%,transparent 100%),radial-gradient(.8px .8px at 207px 228px,rgb(244 239 255/.9) 50%,transparent 100%),radial-gradient(.8px .8px at 20px 106px,rgb(244 239 255/.49) 50%,transparent 100%),radial-gradient(1.1px 1.1px at 259px 57px,rgb(244 239 255/.53) 50%,transparent 100%),radial-gradient(.8px .8px at 119px 154px,rgb(244 239 255/.96) 50%,transparent 100%),radial-gradient(1.3px 1.3px at 230px 232px,rgb(244 239 255/.95) 50%,transparent 100%),radial-gradient(.7px .7px at 198px 72px,rgb(244 239 255/.59) 50%,transparent 100%),radial-gradient(1.1px 1.1px at 20px 0,rgb(244 239 255/.58) 50%,transparent 100%),radial-gradient(1.2px 1.2px at 193px 127px,rgb(244 239 255/.58) 50%,transparent 100%),radial-gradient(1px 1px at 229px 61px,rgb(244 239 255/.94) 50%,transparent 100%),radial-gradient(.7px .7px at 31px 127px,rgb(244 239 255/.95) 50%,transparent 100%);background-size:260px 260px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 calc(100% - 300px),transparent calc(100% - 260px));mask-image:linear-gradient(90deg,transparent,#000 15%,#000 calc(100% - 300px),transparent calc(100% - 260px));animation:hb-drift 90s steps(1080) infinite}.hb-drift,.hb-ks{position:absolute}.hb-ks{border-radius:50%;background:var(--stern);box-shadow:0 0 4px 1px rgb(236 226 255/.55);opacity:.7;animation:hb-funkeln 4s steps(6) infinite}.hb-schnuppe{position:absolute;top:16%;left:58%;width:130px;height:1.5px;border-radius:999px;background:linear-gradient(90deg,#fff,rgb(255 255 255/0));opacity:0;transform:rotate(-18deg);animation:hb-schnuppe 24s cubic-bezier(.22,1,.36,1) 3s infinite}.hb-yurna{position:absolute;z-index:0;right:1.2%;top:12.5%;height:min(81.5%,27cqw);aspect-ratio:235/245;pointer-events:none}.hb-yurna .hb-pose{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgb(10 4 40/.55));animation:hb-schweben calc(56s / 12) steps(7) infinite}.hb-rund{display:none;position:absolute;z-index:0;left:50%;top:30px;width:92px;aspect-ratio:1;transform:translateX(-50%)}.hb-rund img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid rgb(255 211 125/.55);background:radial-gradient(circle at 50% 40%,#3b2a7c,#140e30 72%)}.hb-rund-schein{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgb(206 180 255/.45),transparent 65%)}.hb-inhalt{position:relative;z-index:1;grid-area:1/1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8.5cqw 23cqw 7.5cqw;text-align:center}.hb-oberzeile{margin:0;padding-left:.46em;font:700 12px/16px var(--font-ui),system-ui,sans-serif;letter-spacing:.46em;text-transform:uppercase;color:#e7dcff}.hb-titel{margin:0;max-width:min(100%,44cqw);font-family:var(--font-titel);font-style:italic;font-weight:700;font-size:50px;line-height:58px;letter-spacing:-.005em;color:#f6efff;text-shadow:0 0 28px rgb(196 160 255/.6),0 2px 0 rgb(30 14 70/.5);overflow-wrap:anywhere;text-wrap:balance}.hb[data-groesse=kompakt] .hb-titel{font-size:40px;line-height:48px}.hb-orn{display:block;margin:2px 0 6px}.hb-zusatz{display:flex;flex-wrap:wrap;justify-content:center;max-width:100%}.hb-zeitwahl,.hb-zusatz{align-items:center;gap:8px}.hb-zeitwahl{display:inline-flex;height:40px;padding:0 14px;border-radius:999px;background:rgb(20 14 48/.6);border:1px solid rgb(214 200 255/.38);color:#f3eeff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;line-height:18px;cursor:pointer;transition:border-color .2s,background .2s}.hb-zeitwahl:hover{border-color:rgb(224 210 255/.6);background:rgb(30 22 66/.7)}.hb-zeitwahl svg{width:16px;height:16px;flex:none;color:#c9b6ff}.hb-zeitwahl .hb-zw-wert{font-weight:700;white-space:nowrap}.hb-zeitwahl .hb-zw-neben{color:#c7bee6;white-space:nowrap}.hb-pille{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:rgb(20 14 48/.6);border:1px solid rgb(214 200 255/.38);color:#f3eeff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:600;line-height:18px;text-decoration:none;white-space:nowrap}.hb-pille.hb-pille-satz{padding-block:6px;white-space:normal;text-align:center;font-weight:500;text-wrap:balance}a.hb-pille:hover{border-color:rgb(224 210 255/.6);background:rgb(30 22 66/.7)}.hb-pille[data-ton=gold]{border-color:rgb(255 211 125/.5);color:#ffe3a6}.hb-pille svg{width:14px;height:14px;flex:none;color:#c9b6ff}.hb-pille[data-ton=ok] svg{color:#5fe3a1}.hb-pille[data-ton=gold] svg{color:#ffd37d}.hb-wert{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 10px;font-family:var(--font-titel);font-style:italic;font-weight:700;font-size:40px;line-height:46px;color:#ffd98a;text-shadow:0 0 22px rgb(255 211 125/.4);font-variant-numeric:lining-nums tabular-nums}.hb-wert small{font:600 13px/18px var(--font-ui),system-ui,sans-serif;color:#c7bee6;text-shadow:none}@media (max-width:720px){.hb,.hb[data-groesse=kompakt]{aspect-ratio:auto;min-height:300px}.hb-rahmen{background:url(/assets/yurna/banner/rahmen-ganz.webp) 50% 50%/cover no-repeat}.hb-rahmen>*{display:none}:root[data-bewegung=lebendig] .hb-rahmen:after,:root[data-bewegung=lebendig] .hb-rahmen:before{content:"";position:absolute;inset:0;background:url(/assets/yurna/banner/nebel-ganz.webp) 50% 50%/cover no-repeat;opacity:.35;pointer-events:none}.hb-nebel{display:none}:root[data-bewegung=lebendig] .hb-wehen{display:block;position:absolute;inset:0;z-index:-2;background:url(/assets/yurna/banner/band-ganz-2.webp) 50% 50%/cover no-repeat;opacity:0;pointer-events:none;animation:hb-wehen-unten calc(70s / 12) steps(7) -2.5s infinite alternate}:root[data-bewegung=lebendig] .hb-wehen-1{background-image:url(/assets/yurna/banner/band-ganz-1.webp);animation-name:hb-wehen-oben}:root[data-bewegung=lebendig] .hb-schleier{inset:34% 0 4%}:root[data-bewegung=lebendig] .hb-rahmen:before{animation:hb-nebel-treiben 31s steps(93) -16s infinite alternate}:root[data-bewegung=lebendig] .hb-rahmen:after{animation:hb-nebel-wabern 22s steps(66) -9s infinite alternate}.hb-mondschein,.hb-yurna{display:none}.hb-rund{display:block}.hb-inhalt{justify-content:flex-end;padding:140px 16px 24px}.hb-titel,.hb[data-groesse=kompakt] .hb-titel{max-width:100%;font-size:34px;line-height:40px}.hb-zeitwahl .hb-zw-neben{display:none}}@keyframes hb-drift{0%{transform:translateX(0)}to{transform:translateX(-260px)}}@keyframes hb-funkeln{0%{opacity:.35;transform:scale(.8)}12.5%{opacity:.445;transform:scale(.829)}25%{opacity:.675;transform:scale(.9)}37.5%{opacity:.905;transform:scale(.971)}50%{opacity:1;transform:scale(1)}62.5%{opacity:.905;transform:scale(.971)}75%{opacity:.675;transform:scale(.9)}87.5%{opacity:.445;transform:scale(.829)}to{opacity:.35;transform:scale(.8)}}@keyframes hb-schnuppe{0%,91%{opacity:0;transform:translate(0) rotate(-18deg)}92.5%{opacity:.9}97%,to{opacity:0;transform:translate(-300px,98px) rotate(-18deg)}}@keyframes hb-mond{0%{opacity:.45;transform:scale(.96)}12.5%{opacity:.509;transform:scale(.972)}25%{opacity:.65;transform:scale(1)}37.5%{opacity:.791;transform:scale(1.028)}50%{opacity:.85;transform:scale(1.04)}62.5%{opacity:.791;transform:scale(1.028)}75%{opacity:.65;transform:scale(1)}87.5%{opacity:.509;transform:scale(.972)}to{opacity:.45;transform:scale(.96)}}@keyframes hb-nebel-treiben{0%{opacity:.15;transform:translate3d(-7%,2%,0) scale(1.06)}25%{opacity:.231;transform:translate3d(-4.95%,1.268%,0) scale(1.078)}50%{opacity:.425;transform:translate3d(0,-.5%,0) scale(1.12)}75%{opacity:.619;transform:translate3d(4.95%,-2.268%,0) scale(1.162)}to{opacity:.7;transform:translate3d(7%,-3%,0) scale(1.18)}}@keyframes hb-nebel-wabern{0%{opacity:.65;transform:translate3d(6%,3.5%,0) scale(1.18)}25%{opacity:.572;transform:translate3d(4.389%,2.695%,0) scale(1.159)}50%{opacity:.385;transform:translate3d(.5%,.75%,0) scale(1.11)}75%{opacity:.198;transform:translate3d(-3.389%,-1.195%,0) scale(1.061)}to{opacity:.12;transform:translate3d(-5%,-2%,0) scale(1.04)}}@keyframes hb-wehen-unten{0%{opacity:0}10%{opacity:.049}20%{opacity:.191}30%{opacity:.412}40%{opacity:.691}50%,to{opacity:1}}@keyframes hb-wehen-oben{0%,50%{opacity:0}60%{opacity:.309}70%{opacity:.588}80%{opacity:.809}90%{opacity:.951}to{opacity:1}}@keyframes hb-schleier-a{0%{transform:translateZ(0)}to{transform:translate3d(-640px,-320px,0)}}@keyframes hb-schleier-b{0%{transform:translate3d(-800px,0,0)}to{transform:translate3d(0,-400px,0)}}@keyframes hb-schleier-atmen{0%{opacity:.55}25%{opacity:.616}50%{opacity:.775}75%{opacity:.934}to{opacity:1}}@keyframes hb-schweben{0%{transform:translateY(-4px)}12.5%{transform:translateY(-2.828px)}25%{transform:translateY(0)}37.5%{transform:translateY(2.828px)}50%{transform:translateY(4px)}62.5%{transform:translateY(2.828px)}75%{transform:translateY(0)}87.5%{transform:translateY(-2.828px)}to{transform:translateY(-4px)}}:root[data-bewegung=ruhig] .hb *,:root[data-bewegung=ruhig] .hb :after,:root[data-bewegung=ruhig] .hb :before{animation:none!important}