[data-bg] { position: relative; isolation: isolate; }
[data-bg] > .bg-layer {
position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
transition: opacity 600ms ease;
}
.bg-canvas { position: absolute; inset: 0; display: block; }
.bgx-aurora {
position: absolute; width: 70%; height: 70%; border-radius: 50%;
filter: blur(60px); opacity: .55; will-change: transform;
animation: bgx-wandern 26s ease-in-out infinite alternate;
}
.bgx-aurora--1 { background: var(--bg-c1); left: -10%; top: -20%; }
.bgx-aurora--2 { background: var(--bg-c2); right: -15%; top: 10%; animation-duration: 32s; animation-delay: -9s; }
.bgx-aurora--3 { background: var(--bg-c3); left: 20%; bottom: -30%; animation-duration: 38s; animation-delay: -17s; opacity: .45; }
@keyframes bgx-wandern {
0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
50%  { transform: translate3d(12%, 8%, 0) scale(1.15) rotate(18deg); }
100% { transform: translate3d(-8%, 14%, 0) scale(.92) rotate(-12deg); }
}
.bgx-blob {
position: absolute; width: 38%; aspect-ratio: 1; background: var(--bg-c1); opacity: .5;
filter: blur(28px); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; will-change: transform, border-radius;
animation: bgx-blob 18s ease-in-out infinite alternate;
}
.bgx-blob--1 { left: 6%; top: 8%; }
.bgx-blob--2 { right: 4%; top: 30%; background: var(--bg-c2); animation-duration: 23s; animation-delay: -6s; }
.bgx-blob--3 { left: 38%; bottom: -10%; animation-duration: 27s; animation-delay: -12s; opacity: .35; }
@keyframes bgx-blob {
0%   { transform: translate3d(0, 0, 0) rotate(0); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
50%  { transform: translate3d(8%, -6%, 0) rotate(40deg); border-radius: 61% 39% 41% 59% / 57% 61% 39% 43%; }
100% { transform: translate3d(-6%, 8%, 0) rotate(-20deg); border-radius: 37% 63% 51% 49% / 36% 48% 52% 64%; }
}
.bgx-grain {
position: absolute; inset: -50%; opacity: .16; will-change: transform;
background-image: var(--grain, none); background-size: 180px;
animation: bgx-grain 1.2s steps(6) infinite;
}
@keyframes bgx-grain {
0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-4%, 3%, 0); }
40% { transform: translate3d(3%, -5%, 0); } 60% { transform: translate3d(-6%, -2%, 0); }
80% { transform: translate3d(5%, 4%, 0); } 100% { transform: translate3d(0, 0, 0); }
}
.bgx-sweep {
position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%;
background: conic-gradient(from 0deg, transparent 0 55%, var(--bg-c1) 70%, transparent 82%, var(--bg-c2) 92%, transparent);
opacity: .28; filter: blur(30px); will-change: transform;
animation: bgx-drehen 40s linear infinite;
}
@keyframes bgx-drehen { to { transform: rotate(360deg); } }
.bgx-grid {
position: absolute; inset: 0;
background-image: linear-gradient(var(--bg-c1) 1px, transparent 1px), linear-gradient(90deg, var(--bg-c1) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.bgx-gridlicht {
position: absolute; width: 40%; aspect-ratio: 1; left: 30%; top: 10%; border-radius: 50%;
background: radial-gradient(circle, var(--bg-c2), transparent 65%); filter: blur(20px); opacity: .5;
will-change: transform; animation: bgx-wandern 22s ease-in-out infinite alternate;
}
.bgx-spot {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: radial-gradient(circle at 50% 50%, var(--bg-c1), transparent 38%);
will-change: transform; transform: translate3d(0, -10%, 0);
}
@media (prefers-reduced-motion: reduce) {
.bgx-aurora, .bgx-blob, .bgx-grain, .bgx-sweep, .bgx-gridlicht { animation: none !important; }
}
.hero--full > .bg-layer--ring, .hero--full > .bg-layer--galaxie, .hero--full > .bg-layer--linien,
.hero--full > .bg-layer--strahlen, .hero--full > .bg-layer--nebel { z-index: 1; mix-blend-mode: screen; }
.hero--full > .bg-layer--fluid { z-index: 1; mix-blend-mode: soft-light; }
.hero--full > .bg-layer--film { z-index: 1; }
.bgx-strahlquelle {
position: absolute; left: 4%; top: -18%; width: 46%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, var(--bg-c2), var(--bg-c1) 30%, transparent 68%);
filter: blur(30px); opacity: .7; will-change: transform, opacity;
animation: bgx-quelle 11s ease-in-out infinite alternate;
}
.bgx-strahl {
position: absolute; left: 22%; top: -12%; width: 16%; height: 170%;
transform-origin: 50% 0; will-change: transform, opacity;
clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
background: linear-gradient(to bottom, var(--bg-c2), var(--bg-c1) 18%, transparent 72%);
filter: blur(14px); opacity: .55;
transform: rotate(var(--w, -30deg));
animation: bgx-strahl 17s ease-in-out infinite alternate;
}
.bgx-strahl--1 { --w: -62deg; --w2: -55deg; animation-duration: 19s; opacity: .35; }
.bgx-strahl--2 { --w: -46deg; --w2: -40deg; animation-duration: 23s; animation-delay: -7s; width: 10%; }
.bgx-strahl--3 { --w: -33deg; --w2: -27deg; animation-duration: 15s; animation-delay: -3s; width: 22%; opacity: .45; }
.bgx-strahl--4 { --w: -21deg; --w2: -26deg; animation-duration: 27s; animation-delay: -12s; width: 8%; }
.bgx-strahl--5 { --w: -11deg; --w2: -6deg; animation-duration: 21s; animation-delay: -5s; width: 14%; opacity: .3; }
.bgx-strahl--6 { --w: 2deg; --w2: -4deg; animation-duration: 31s; animation-delay: -16s; width: 6%; opacity: .25; }
@keyframes bgx-strahl {
0%   { transform: rotate(var(--w, -30deg)) scaleX(1); opacity: .18; }
45%  { opacity: .62; }
100% { transform: rotate(var(--w2, -26deg)) scaleX(1.25); opacity: .32; }
}
@keyframes bgx-quelle { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.1); opacity: .85; } }
.bgx-nebellicht {
position: absolute; left: 30%; top: -25%; width: 70%; height: 90%; border-radius: 50%;
background: radial-gradient(ellipse, var(--bg-c2), transparent 65%); filter: blur(40px);
will-change: transform; animation: bgx-quelle 16s ease-in-out infinite alternate;
}
.bgx-nebel {
position: absolute; left: 0; width: 200%; will-change: transform;
background-image:
radial-gradient(ellipse 34% 62% at 18% 62%, var(--bg-c1), transparent 72%),
radial-gradient(ellipse 30% 50% at 50% 48%, var(--bg-c1), transparent 72%),
radial-gradient(ellipse 36% 58% at 82% 60%, var(--bg-c1), transparent 72%),
linear-gradient(to bottom, transparent 30%, var(--bg-c1) 85%, transparent);
background-size: 50% 100%; background-repeat: repeat-x;
animation: bgx-nebel 120s linear infinite;
}
.bgx-nebel--1 { top: 6%;  height: 50%; filter: blur(30px); opacity: .6; animation-duration: 190s; }
.bgx-nebel--2 { top: 30%; height: 60%; filter: blur(24px); opacity: .85; animation-duration: 120s; animation-delay: -40s; }
.bgx-nebel--3 { top: 52%; height: 70%; filter: blur(18px); opacity: 1;   animation-duration: 70s;  animation-delay: -25s; }
@keyframes bgx-nebel { to { transform: translate3d(-50%, 0, 0); } }
.bgx-film-leck {
position: absolute; right: -15%; top: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, var(--bg-c1), transparent 66%); filter: blur(50px);
will-change: transform, opacity; animation: bgx-leck 24s ease-in-out infinite alternate;
}
.bgx-film-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse 72% 68% at 50% 45%, transparent 40%, var(--bg-c2) 100%);
}
.bgx-film-korn {
position: absolute; inset: -50%; opacity: .26; will-change: transform;
background-image: var(--grain, none); background-size: 160px;
animation: bgx-grain .9s steps(5) infinite;
}
.bgx-film-kratzer {
position: absolute; top: 0; bottom: 0; left: 0; width: 1px; opacity: 0;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5) 20%, rgba(255,255,255,.2) 80%, transparent);
will-change: transform, opacity; animation: bgx-kratzer 9s steps(1) infinite;
}
.bgx-film-flimmer {
position: absolute; inset: 0; background: var(--bg-c1); opacity: 0;
will-change: opacity; animation: bgx-flimmer 5.5s steps(1) infinite;
}
@keyframes bgx-leck {
0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .6; }
50%  { transform: translate3d(-18%, 10%, 0) scale(1.25); opacity: 1; }
100% { transform: translate3d(-6%, 24%, 0) scale(.9); opacity: .5; }
}
@keyframes bgx-kratzer {
0%  { transform: translate3d(18vw, 0, 0); opacity: 0; }
12% { transform: translate3d(71vw, 0, 0); opacity: .5; }
14% { opacity: 0; }
52% { transform: translate3d(36vw, 0, 0); opacity: .35; }
54% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes bgx-flimmer { 0% { opacity: 0; } 31% { opacity: .05; } 33% { opacity: 0; } 72% { opacity: .035; } 74% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.bgx-strahl, .bgx-strahlquelle, .bgx-nebel, .bgx-nebellicht,
.bgx-film-leck, .bgx-film-korn, .bgx-film-kratzer, .bgx-film-flimmer { animation: none !important; }
.bgx-film-kratzer, .bgx-film-flimmer { opacity: 0 !important; }
}
.bgx-wolke {
position: absolute; width: 70%; height: 80%; border-radius: 50%;
background: radial-gradient(ellipse at 50% 50%, var(--bg-c1), transparent 68%);
filter: blur(26px); will-change: transform;
animation: bgx-wolke calc(110s / var(--bg-tempo, 1)) linear infinite;
}
.bgx-wolke--1 { top: -20%; animation-delay: -10s; }
.bgx-wolke--2 { top: 25%; width: 55%; animation-duration: calc(140s / var(--bg-tempo, 1)); animation-delay: -70s; }
.bgx-wolke--3 { top: 55%; width: 80%; animation-duration: calc(95s / var(--bg-tempo, 1)); animation-delay: -40s; opacity: .8; }
.bgx-wolke--4 { top: 5%; width: 45%; animation-duration: calc(160s / var(--bg-tempo, 1)); animation-delay: -120s; opacity: .7; }
@keyframes bgx-wolke { from { transform: translate3d(-90%, 0, 0); } to { transform: translate3d(160%, 6%, 0); } }
.hero--full > .bg-layer { z-index: 1; mix-blend-mode: screen; }
.hero--full > .bg-layer:not(.bg-layer--film):not(.bg-layer--wolken):not(.bg-layer--fluid) { filter: brightness(1.6) saturate(1.15); }
.hero--full > .bg-layer--fluid { mix-blend-mode: soft-light; }
.hero--full > .bg-layer--film, .hero--full > .bg-layer--wolken { mix-blend-mode: normal; }
[data-bg-bild] > .bg-layer--fluid, [data-stbg] > .bg-layer--fluid, [data-st-muster] > .bg-layer--fluid { mix-blend-mode: soft-light; }
[data-bg-mix="screen"] > .bg-layer { mix-blend-mode: screen; }
[data-bg-mix="overlay"] > .bg-layer { mix-blend-mode: overlay; }
[data-bg-mix="soft-light"] > .bg-layer { mix-blend-mode: soft-light; }
[data-bg-mix="normal"] > .bg-layer { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .bgx-wolke { animation: none !important; } }