.sbg-enabled {
    --sbg-c1: #0f5ef7;
    --sbg-c2: #111827;
    --sbg-c3: #7dd3fc;
    --sbg-opacity: 0.55;
    --sbg-speed: 16s;
    --sbg-scale: 1.12;
    --sbg-blur: 28px;
    --sbg-angle: 135deg;
    --sbg-density: 1;
    --sbg-drawing-opacity: 0.32;
    --sbg-drawing-scale: 1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sbg-enabled::before,
.sbg-enabled::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.sbg-enabled::before {
    inset: -24%;
    opacity: var(--sbg-opacity);
    filter: blur(var(--sbg-blur));
    transform: scale(var(--sbg-scale));
    transform-origin: center center;
    mix-blend-mode: normal;
    will-change: transform, background-position, opacity;
}

.sbg-enabled::after {
    display: none;
    inset: 0;
    z-index: 1;
    opacity: var(--sbg-drawing-opacity);
    mix-blend-mode: overlay;
    background-repeat: repeat;
    transform-origin: center center;
    will-change: transform, opacity, background-position, clip-path;
}

.sbg-enabled.sbg-content-lift > * {
    position: relative;
    z-index: 2;
}

.sbg-blend-normal::before { mix-blend-mode: normal; }
.sbg-blend-screen::before { mix-blend-mode: screen; }
.sbg-blend-multiply::before { mix-blend-mode: multiply; }
.sbg-blend-overlay::before { mix-blend-mode: overlay; }
.sbg-blend-soft-light::before { mix-blend-mode: soft-light; }

/* Robuste Background-Presets ohne color-mix, damit alle Varianten stabil rendern. */
.sbg-preset-aurora::before {
    background:
        radial-gradient(circle at 18% 22%, var(--sbg-c1) 0 18%, transparent 46%),
        radial-gradient(circle at 82% 24%, var(--sbg-c3) 0 16%, transparent 42%),
        radial-gradient(circle at 48% 84%, var(--sbg-c2) 0 22%, transparent 50%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), var(--sbg-c1), var(--sbg-c3));
    background-size: calc(150% * var(--sbg-density)) calc(150% * var(--sbg-density));
}

.sbg-preset-mesh::before {
    background:
        radial-gradient(circle at 17% 25%, var(--sbg-c1) 0 11%, transparent 32%),
        radial-gradient(circle at 78% 25%, var(--sbg-c3) 0 13%, transparent 36%),
        radial-gradient(circle at 60% 80%, var(--sbg-c2) 0 18%, transparent 42%),
        radial-gradient(circle at 38% 52%, var(--sbg-c1) 0 10%, transparent 28%),
        linear-gradient(var(--sbg-angle), var(--sbg-c1), var(--sbg-c2));
    background-size: calc(122% * var(--sbg-density)) calc(122% * var(--sbg-density));
}

.sbg-preset-waves::before {
    background:
        repeating-radial-gradient(ellipse at 22% 42%, var(--sbg-c1) 0 6px, transparent 7px 22px),
        repeating-radial-gradient(ellipse at 80% 55%, var(--sbg-c3) 0 5px, transparent 6px 24px),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), var(--sbg-c1));
    background-size: calc(180% * var(--sbg-density)) calc(180% * var(--sbg-density));
}

.sbg-preset-spotlight::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28) 0 0, transparent 52%),
        conic-gradient(from var(--sbg-angle) at 50% 50%, var(--sbg-c1), var(--sbg-c3), var(--sbg-c2), var(--sbg-c1));
    background-size: calc(130% * var(--sbg-density)) calc(130% * var(--sbg-density));
}

.sbg-preset-grid::before {
    background:
        linear-gradient(var(--sbg-angle), var(--sbg-c1), transparent 40%),
        linear-gradient(90deg, var(--sbg-c3) 1px, transparent 1px),
        linear-gradient(0deg, var(--sbg-c3) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, var(--sbg-c1), transparent 42%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #05070c);
    background-size: 100% 100%, calc(36px * var(--sbg-density)) calc(36px * var(--sbg-density)), calc(36px * var(--sbg-density)) calc(36px * var(--sbg-density)), 100% 100%, 100% 100%;
}

.sbg-preset-glass::before {
    background:
        radial-gradient(circle at 18% 18%, var(--sbg-c3) 0 12%, transparent 34%),
        radial-gradient(circle at 84% 82%, var(--sbg-c1) 0 14%, transparent 38%),
        linear-gradient(var(--sbg-angle), rgba(255,255,255,0.08), var(--sbg-c1), var(--sbg-c2), var(--sbg-c3));
    backdrop-filter: blur(8px);
    background-size: calc(140% * var(--sbg-density)) calc(140% * var(--sbg-density));
}

.sbg-preset-neon::before {
    background:
        radial-gradient(circle at 15% 18%, var(--sbg-c1) 0 12%, transparent 28%),
        radial-gradient(circle at 88% 32%, var(--sbg-c3) 0 10%, transparent 30%),
        radial-gradient(circle at 45% 92%, var(--sbg-c1) 0 16%, transparent 36%),
        linear-gradient(var(--sbg-angle), #050816, var(--sbg-c2), #020617);
    background-size: calc(155% * var(--sbg-density)) calc(155% * var(--sbg-density));
}

.sbg-preset-liquid::before {
    background:
        radial-gradient(ellipse at 28% 35%, var(--sbg-c1) 0 18%, transparent 44%),
        radial-gradient(ellipse at 70% 58%, var(--sbg-c3) 0 16%, transparent 42%),
        radial-gradient(ellipse at 52% 48%, rgba(255,255,255,0.24) 0 8%, transparent 26%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), var(--sbg-c1));
    background-size: calc(165% * var(--sbg-density)) calc(135% * var(--sbg-density));
}

.sbg-preset-blueprint::before {
    background:
        linear-gradient(90deg, var(--sbg-c3) 1px, transparent 1px),
        linear-gradient(0deg, var(--sbg-c3) 1px, transparent 1px),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), var(--sbg-c1));
    background-size: calc(42px * var(--sbg-density)) calc(42px * var(--sbg-density)), calc(42px * var(--sbg-density)) calc(42px * var(--sbg-density)), 100% 100%;
}

.sbg-preset-sand::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.28) 0 4%, transparent 20%),
        radial-gradient(circle at 78% 72%, var(--sbg-c3) 0 12%, transparent 34%),
        linear-gradient(var(--sbg-angle), var(--sbg-c1), var(--sbg-c2), var(--sbg-c3));
    background-size: calc(135% * var(--sbg-density)) calc(135% * var(--sbg-density));
}

.sbg-preset-carbon::before {
    background:
        linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.07) 75%),
        radial-gradient(circle at 80% 18%, var(--sbg-c1), transparent 34%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #030712);
    background-position: 0 0, calc(14px * var(--sbg-density)) calc(14px * var(--sbg-density)), 0 0, 0 0;
    background-size: calc(28px * var(--sbg-density)) calc(28px * var(--sbg-density)), calc(28px * var(--sbg-density)) calc(28px * var(--sbg-density)), 100% 100%, 100% 100%;
}

.sbg-preset-split::before {
    background:
        linear-gradient(calc(var(--sbg-angle) + 20deg), transparent 0 36%, var(--sbg-c1) 36% 58%, transparent 58%),
        linear-gradient(calc(var(--sbg-angle) - 36deg), var(--sbg-c2), var(--sbg-c1) 48%, var(--sbg-c3));
    background-size: calc(140% * var(--sbg-density)) calc(140% * var(--sbg-density));
}


.sbg-preset-orbit::before {
    background:
        radial-gradient(circle at 50% 50%, transparent 0 18%, var(--sbg-c3) 19% 20%, transparent 21% 34%, rgba(255,255,255,0.24) 35% 36%, transparent 37%),
        radial-gradient(circle at 24% 28%, var(--sbg-c1) 0 9%, transparent 31%),
        radial-gradient(circle at 74% 70%, var(--sbg-c3) 0 10%, transparent 34%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: calc(170% * var(--sbg-density)) calc(170% * var(--sbg-density));
}

.sbg-preset-topographic::before {
    background:
        repeating-radial-gradient(ellipse at 22% 35%, transparent 0 14px, rgba(255,255,255,0.30) 15px 17px, transparent 18px 32px),
        repeating-radial-gradient(ellipse at 78% 62%, transparent 0 18px, var(--sbg-c3) 19px 21px, transparent 22px 40px),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), var(--sbg-c1));
    background-size: calc(210% * var(--sbg-density)) calc(160% * var(--sbg-density));
}

.sbg-preset-circuit::before {
    background:
        linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,0.24) 48% 52%, transparent 53%),
        linear-gradient(0deg, transparent 0 47%, var(--sbg-c3) 48% 52%, transparent 53%),
        radial-gradient(circle, rgba(255,255,255,0.72) 0 2px, transparent 2.7px),
        radial-gradient(circle at 78% 22%, var(--sbg-c1), transparent 38%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: calc(72px * var(--sbg-density)) calc(72px * var(--sbg-density)), calc(72px * var(--sbg-density)) calc(72px * var(--sbg-density)), calc(72px * var(--sbg-density)) calc(72px * var(--sbg-density)), 100% 100%, 100% 100%;
}

.sbg-preset-matrix::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.14) 19px 21px, transparent 22px 34px),
        repeating-linear-gradient(0deg, transparent 0 18px, var(--sbg-c3) 19px 20px, transparent 21px 52px),
        radial-gradient(circle at 18% 20%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: calc(110px * var(--sbg-density)) calc(110px * var(--sbg-density));
}

.sbg-preset-luxury::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.20) 0 8%, transparent 26%),
        radial-gradient(circle at 82% 18%, var(--sbg-c3) 0 11%, transparent 34%),
        linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.12) 43% 44%, transparent 45%),
        linear-gradient(var(--sbg-angle), #01030a, var(--sbg-c2), #000000);
    background-size: calc(150% * var(--sbg-density)) calc(150% * var(--sbg-density));
}

.sbg-preset-marble::before {
    background:
        radial-gradient(ellipse at 28% 35%, rgba(255,255,255,0.34) 0 8%, transparent 28%),
        radial-gradient(ellipse at 72% 56%, var(--sbg-c3) 0 12%, transparent 36%),
        repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,0.18) 35px 38px, transparent 39px 78px),
        linear-gradient(var(--sbg-angle), var(--sbg-c1), var(--sbg-c2));
    background-size: calc(180% * var(--sbg-density)) calc(140% * var(--sbg-density));
}

.sbg-preset-sunburst::before {
    background:
        conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.25) 0 10deg, transparent 11deg 24deg, var(--sbg-c3) 25deg 30deg, transparent 31deg 45deg),
        radial-gradient(circle at 50% 50%, var(--sbg-c1) 0 0, transparent 46%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: calc(150% * var(--sbg-density)) calc(150% * var(--sbg-density));
}

.sbg-preset-stripes::before {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.20) 0 2px, transparent 3px 18px, var(--sbg-c3) 19px 21px, transparent 22px 42px),
        radial-gradient(circle at 80% 24%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: calc(120% * var(--sbg-density)) calc(120% * var(--sbg-density));
}

.sbg-preset-chrome::before {
    background:
        linear-gradient(105deg, transparent 0 22%, rgba(255,255,255,0.45) 23% 27%, transparent 28% 46%, rgba(255,255,255,0.16) 47% 52%, transparent 53%),
        radial-gradient(circle at 15% 28%, var(--sbg-c3), transparent 34%),
        linear-gradient(var(--sbg-angle), var(--sbg-c1), var(--sbg-c2), #050816);
    background-size: calc(170% * var(--sbg-density)) calc(170% * var(--sbg-density));
}

.sbg-preset-dots::before {
    background:
        radial-gradient(circle, rgba(255,255,255,0.55) 0 2px, transparent 2.7px),
        radial-gradient(circle at 18% 82%, var(--sbg-c1), transparent 34%),
        radial-gradient(circle at 82% 20%, var(--sbg-c3), transparent 34%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: calc(34px * var(--sbg-density)) calc(34px * var(--sbg-density)), 100% 100%, 100% 100%, 100% 100%;
}

.sbg-preset-radar::before {
    background:
        conic-gradient(from 25deg at 50% 50%, transparent 0 265deg, rgba(255,255,255,0.32) 266deg 300deg, var(--sbg-c3) 301deg 316deg, transparent 317deg 360deg),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(255,255,255,0.17) 35px 37px, transparent 38px 70px),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: calc(150% * var(--sbg-density)) calc(150% * var(--sbg-density));
}

.sbg-preset-paper::before {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 1px, transparent 2px 18px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 2px 22px),
        radial-gradient(circle at 22% 18%, var(--sbg-c3), transparent 32%),
        linear-gradient(var(--sbg-angle), var(--sbg-c1), var(--sbg-c2));
    background-size: calc(100% * var(--sbg-density)) calc(100% * var(--sbg-density));
}

/* Zeichnungen / einlaufende Pattern */
.sbg-has-grain.sbg-drawing-none::after {
    display: block;
    opacity: 0.15;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35) 0 1px, transparent 1.5px),
        linear-gradient(120deg, rgba(255,255,255,0.12), transparent 42%, rgba(255,255,255,0.07));
    background-size: calc(20px * var(--sbg-density)) calc(20px * var(--sbg-density)), 100% 100%;
}

.sbg-drawing-lines::after {
    display: block;
    background-image:
        linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.84) 49% 51%, transparent 52%),
        linear-gradient(0deg, transparent 0 48%, rgba(255,255,255,0.46) 49% 51%, transparent 52%),
        linear-gradient(135deg, transparent 0 46%, var(--sbg-c3) 47% 49%, transparent 50%);
    background-size: calc(88px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(88px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-circles::after {
    display: block;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(255,255,255,0.72) 43% 45%, transparent 46%),
        radial-gradient(circle at 20% 22%, transparent 0 28%, var(--sbg-c3) 29% 31%, transparent 32%);
    background-size: calc(132px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(132px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-blobs::after {
    display: block;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(ellipse at 18% 22%, rgba(255,255,255,0.42) 0 10%, transparent 11%),
        radial-gradient(ellipse at 82% 20%, var(--sbg-c3) 0 9%, transparent 10%),
        radial-gradient(ellipse at 72% 84%, rgba(255,255,255,0.34) 0 12%, transparent 13%),
        radial-gradient(ellipse at 28% 78%, var(--sbg-c1) 0 10%, transparent 11%);
    background-size: calc(100% * var(--sbg-drawing-scale)) calc(100% * var(--sbg-drawing-scale));
}

.sbg-drawing-blueprint::after {
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.65) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.38) 1px, transparent 1px),
        radial-gradient(circle at 24% 32%, transparent 0 36px, rgba(255,255,255,0.7) 37px 38px, transparent 39px),
        linear-gradient(135deg, transparent 0 47%, rgba(255,255,255,0.5) 48% 49%, transparent 50%);
    background-size: calc(34px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(34px * var(--sbg-density) * var(--sbg-drawing-scale)), calc(34px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(34px * var(--sbg-density) * var(--sbg-drawing-scale)), calc(240px * var(--sbg-drawing-scale)) calc(180px * var(--sbg-drawing-scale)), calc(160px * var(--sbg-drawing-scale)) calc(160px * var(--sbg-drawing-scale));
}

.sbg-drawing-particles::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.92) 0 1.5px, transparent 2px),
        radial-gradient(circle, var(--sbg-c3) 0 1px, transparent 1.7px),
        radial-gradient(circle, var(--sbg-c1) 0 1px, transparent 1.8px);
    background-size: calc(44px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(44px * var(--sbg-density) * var(--sbg-drawing-scale)), calc(72px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(72px * var(--sbg-density) * var(--sbg-drawing-scale)), calc(110px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(110px * var(--sbg-density) * var(--sbg-drawing-scale));
    background-position: 0 0, 22px 18px, 44px 38px;
}

.sbg-drawing-network::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 0 2px, transparent 2.6px),
        linear-gradient(32deg, transparent 0 48%, rgba(255,255,255,0.45) 49% 50%, transparent 51%),
        linear-gradient(148deg, transparent 0 48%, var(--sbg-c3) 49% 50%, transparent 51%);
    background-size: calc(92px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(92px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-hex::after {
    display: block;
    background-image:
        linear-gradient(30deg, transparent 0 48%, rgba(255,255,255,0.58) 49% 50%, transparent 51%),
        linear-gradient(150deg, transparent 0 48%, rgba(255,255,255,0.58) 49% 50%, transparent 51%),
        linear-gradient(90deg, transparent 0 48%, var(--sbg-c3) 49% 50%, transparent 51%);
    background-size: calc(74px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(64px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-sparks::after {
    display: block;
    background-image:
        linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,0.95) 45% 55%, transparent 56%),
        linear-gradient(0deg, transparent 0 44%, rgba(255,255,255,0.7) 45% 55%, transparent 56%),
        radial-gradient(circle, var(--sbg-c3) 0 2px, transparent 2.6px);
    background-size: calc(94px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(94px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-wave-lines::after {
    display: block;
    background-image:
        repeating-radial-gradient(ellipse at 50% 50%, transparent 0 18px, rgba(255,255,255,0.56) 19px 21px, transparent 22px 42px),
        repeating-radial-gradient(ellipse at 20% 60%, transparent 0 16px, var(--sbg-c3) 17px 19px, transparent 20px 38px);
    background-size: calc(240px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(120px * var(--sbg-density) * var(--sbg-drawing-scale));
}


.sbg-drawing-arrows::after {
    display: block;
    background-image:
        linear-gradient(45deg, transparent 0 46%, rgba(255,255,255,0.75) 47% 50%, transparent 51%),
        linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.75) 47% 50%, transparent 51%),
        linear-gradient(90deg, transparent 0 36%, var(--sbg-c3) 37% 60%, transparent 61%);
    background-size: calc(120px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(80px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-constellation::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 2px, transparent 2.8px),
        radial-gradient(circle, var(--sbg-c3) 0 1.5px, transparent 2.2px),
        linear-gradient(28deg, transparent 0 48%, rgba(255,255,255,0.38) 49% 50%, transparent 51%),
        linear-gradient(128deg, transparent 0 48%, var(--sbg-c3) 49% 50%, transparent 51%);
    background-size: calc(128px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(92px * var(--sbg-density) * var(--sbg-drawing-scale));
    background-position: 0 0, 52px 30px, 0 0, 18px 12px;
}

.sbg-drawing-corners::after {
    display: block;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.85) 0 90px, transparent 91px),
        linear-gradient(0deg, rgba(255,255,255,0.85) 0 90px, transparent 91px),
        linear-gradient(270deg, var(--sbg-c3) 0 90px, transparent 91px),
        linear-gradient(180deg, var(--sbg-c3) 0 90px, transparent 91px);
    background-size: calc(120px * var(--sbg-drawing-scale)) calc(2px * var(--sbg-drawing-scale)), calc(2px * var(--sbg-drawing-scale)) calc(120px * var(--sbg-drawing-scale)), calc(120px * var(--sbg-drawing-scale)) calc(2px * var(--sbg-drawing-scale)), calc(2px * var(--sbg-drawing-scale)) calc(120px * var(--sbg-drawing-scale));
    background-position: 24px 24px, 24px 24px, calc(100% - 24px) calc(100% - 24px), calc(100% - 24px) calc(100% - 24px);
}

.sbg-drawing-zigzag::after {
    display: block;
    background-image:
        linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.70) 47% 50%, transparent 51%),
        linear-gradient(45deg, transparent 0 46%, var(--sbg-c3) 47% 50%, transparent 51%);
    background-size: calc(62px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(62px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-code::after {
    display: block;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,0.54) 11px 12px, transparent 13px 22px),
        repeating-linear-gradient(0deg, transparent 0 18px, var(--sbg-c3) 19px 21px, transparent 22px 45px);
    background-size: calc(90px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(120px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-measure::after {
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.75) 0 100%, transparent 0),
        repeating-linear-gradient(90deg, var(--sbg-c3) 0 2px, transparent 3px 18px),
        linear-gradient(0deg, rgba(255,255,255,0.55) 0 2px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.48) 0 2px, transparent 3px 16px);
    background-size: calc(180px * var(--sbg-density) * var(--sbg-drawing-scale)) 2px, calc(180px * var(--sbg-density) * var(--sbg-drawing-scale)) 24px, 2px calc(150px * var(--sbg-density) * var(--sbg-drawing-scale)), 28px calc(150px * var(--sbg-density) * var(--sbg-drawing-scale));
    background-position: 24px 26px, 24px 18px, calc(100% - 28px) 24px, calc(100% - 38px) 24px;
}

.sbg-drawing-diamonds::after {
    display: block;
    background-image:
        linear-gradient(45deg, transparent 0 47%, rgba(255,255,255,0.62) 48% 50%, transparent 51%),
        linear-gradient(135deg, transparent 0 47%, var(--sbg-c3) 48% 50%, transparent 51%);
    background-size: calc(82px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(82px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-bubbles::after {
    display: block;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(255,255,255,0.60) 37% 39%, transparent 40%),
        radial-gradient(circle at 22% 68%, transparent 0 28%, var(--sbg-c3) 29% 31%, transparent 32%),
        radial-gradient(circle at 76% 24%, transparent 0 22%, rgba(255,255,255,0.42) 23% 25%, transparent 26%);
    background-size: calc(152px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(152px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-plus::after {
    display: block;
    background-image:
        linear-gradient(90deg, transparent 0 42%, rgba(255,255,255,0.72) 43% 57%, transparent 58%),
        linear-gradient(0deg, transparent 0 42%, var(--sbg-c3) 43% 57%, transparent 58%);
    background-size: calc(74px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(74px * var(--sbg-density) * var(--sbg-drawing-scale));
}

.sbg-drawing-halftone::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.75) 0 2px, transparent 2.8px),
        radial-gradient(circle, var(--sbg-c3) 0 1.4px, transparent 2px);
    background-size: calc(18px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(18px * var(--sbg-density) * var(--sbg-drawing-scale)), calc(31px * var(--sbg-density) * var(--sbg-drawing-scale)) calc(31px * var(--sbg-density) * var(--sbg-drawing-scale));
    background-position: 0 0, 12px 8px;
}

/* Background Animationen */
.sbg-anim-float::before { animation: sbgFloat var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-flow::before { animation: sbgFlow var(--sbg-speed) linear infinite alternate; }
.sbg-anim-pulse::before { animation: sbgPulse var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-rotate::before { animation: sbgRotate var(--sbg-speed) linear infinite; }
.sbg-anim-shimmer::before { animation: sbgShimmer var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-morph::before { animation: sbgMorph var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-diagonal::before { animation: sbgDiagonal var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-zoom::before { animation: sbgZoom var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-sweep::before { animation: sbgSweep var(--sbg-speed) linear infinite; }
.sbg-anim-parallax::before { animation: sbgParallax var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-sparkle::before { animation: sbgSparkle var(--sbg-speed) steps(4, end) infinite; }
.sbg-anim-none::before { animation: none; }

/* Zeichnungs-Animationen */
.sbg-drawing-anim-draw::after { animation: sbgDrawingDraw var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-drawing-anim-drift::after { animation: sbgDrawingDrift var(--sbg-speed) linear infinite alternate; }
.sbg-drawing-anim-rise::after { animation: sbgDrawingRise var(--sbg-speed) linear infinite; }
.sbg-drawing-anim-breathe::after { animation: sbgDrawingBreathe var(--sbg-speed) ease-in-out infinite; }
.sbg-drawing-anim-slide::after { animation: sbgDrawingSlide var(--sbg-speed) cubic-bezier(.22,1,.36,1) infinite alternate; }
.sbg-drawing-anim-scan::after { animation: sbgDrawingScan var(--sbg-speed) linear infinite; }
.sbg-drawing-anim-pop::after { animation: sbgDrawingPop var(--sbg-speed) ease-in-out infinite; }
.sbg-drawing-anim-spin::after { animation: sbgDrawingSpin var(--sbg-speed) linear infinite; }
.sbg-drawing-anim-none::after { animation: none; }

@keyframes sbgFloat {
    0% { transform: translate3d(-2%, -1%, 0) scale(var(--sbg-scale)) rotate(0.001deg); background-position: 0% 30%; }
    50% { transform: translate3d(2%, 1.5%, 0) scale(calc(var(--sbg-scale) + 0.04)) rotate(0.001deg); background-position: 60% 50%; }
    100% { transform: translate3d(-1%, 2%, 0) scale(var(--sbg-scale)) rotate(0.001deg); background-position: 100% 70%; }
}

@keyframes sbgFlow {
    0% { transform: translate3d(-5%, 0, 0) scale(var(--sbg-scale)); background-position: 0% 50%; }
    100% { transform: translate3d(5%, 0, 0) scale(var(--sbg-scale)); background-position: 100% 50%; }
}

@keyframes sbgPulse {
    0%, 100% { opacity: calc(var(--sbg-opacity) * 0.82); transform: scale(var(--sbg-scale)); }
    50% { opacity: var(--sbg-opacity); transform: scale(calc(var(--sbg-scale) + 0.08)); }
}

@keyframes sbgRotate {
    0% { transform: scale(var(--sbg-scale)) rotate(0deg); }
    100% { transform: scale(var(--sbg-scale)) rotate(360deg); }
}

@keyframes sbgShimmer {
    0%, 100% { background-position: 0% 50%; transform: translateX(-1%) scale(var(--sbg-scale)); }
    50% { background-position: 100% 50%; transform: translateX(1%) scale(calc(var(--sbg-scale) + 0.03)); }
}

@keyframes sbgMorph {
    0% { border-radius: 42% 58% 44% 56%; transform: scale(var(--sbg-scale)) translate3d(-1.5%, -1%, 0); background-position: 10% 30%; }
    50% { border-radius: 58% 42% 62% 38%; transform: scale(calc(var(--sbg-scale) + 0.05)) translate3d(1%, 1.5%, 0); background-position: 70% 55%; }
    100% { border-radius: 46% 54% 40% 60%; transform: scale(var(--sbg-scale)) translate3d(2%, -0.5%, 0); background-position: 100% 72%; }
}

@keyframes sbgDiagonal {
    0% { transform: translate3d(-4%, 4%, 0) scale(var(--sbg-scale)); background-position: 0% 100%; }
    100% { transform: translate3d(4%, -4%, 0) scale(calc(var(--sbg-scale) + 0.03)); background-position: 100% 0%; }
}

@keyframes sbgZoom {
    0% { transform: scale(var(--sbg-scale)); background-position: 40% 45%; }
    100% { transform: scale(calc(var(--sbg-scale) + 0.12)); background-position: 58% 55%; }
}


@keyframes sbgSweep {
    0% { transform: scale(var(--sbg-scale)) rotate(0deg); background-position: 0% 50%; }
    100% { transform: scale(var(--sbg-scale)) rotate(360deg); background-position: 100% 50%; }
}

@keyframes sbgParallax {
    0% { transform: translate3d(-3%, -2%, 0) scale(var(--sbg-scale)); background-position: 15% 20%; }
    50% { transform: translate3d(2%, 1%, 0) scale(calc(var(--sbg-scale) + 0.06)); background-position: 55% 65%; }
    100% { transform: translate3d(4%, -1%, 0) scale(calc(var(--sbg-scale) + 0.02)); background-position: 90% 30%; }
}

@keyframes sbgSparkle {
    0% { opacity: calc(var(--sbg-opacity) * 0.70); filter: blur(var(--sbg-blur)) brightness(1); background-position: 0 0; }
    25% { opacity: var(--sbg-opacity); filter: blur(var(--sbg-blur)) brightness(1.18); background-position: 30px 24px; }
    50% { opacity: calc(var(--sbg-opacity) * 0.84); filter: blur(var(--sbg-blur)) brightness(1.04); background-position: 70px 48px; }
    75% { opacity: var(--sbg-opacity); filter: blur(var(--sbg-blur)) brightness(1.22); background-position: 110px 12px; }
    100% { opacity: calc(var(--sbg-opacity) * 0.74); filter: blur(var(--sbg-blur)) brightness(1); background-position: 140px 60px; }
}

@keyframes sbgDrawingDraw {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); background-position: 0 0; }
    42% { opacity: var(--sbg-drawing-opacity); }
    100% { opacity: var(--sbg-drawing-opacity); clip-path: inset(0 0 0 0); background-position: 36px 18px; }
}

@keyframes sbgDrawingDrift {
    0% { transform: translate3d(-2%, 0, 0); background-position: 0 0; }
    100% { transform: translate3d(2%, 0, 0); background-position: 80px 24px; }
}

@keyframes sbgDrawingRise {
    0% { transform: translate3d(0, 8%, 0); background-position: 0 80px; opacity: calc(var(--sbg-drawing-opacity) * 0.35); }
    18%, 100% { opacity: var(--sbg-drawing-opacity); }
    100% { transform: translate3d(0, -8%, 0); background-position: 0 -80px; }
}

@keyframes sbgDrawingBreathe {
    0%, 100% { transform: scale(1); opacity: calc(var(--sbg-drawing-opacity) * 0.7); }
    50% { transform: scale(1.035); opacity: var(--sbg-drawing-opacity); }
}


@keyframes sbgDrawingSlide {
    0% { opacity: 0; transform: translate3d(-10%, 0, 0); }
    18%, 100% { opacity: var(--sbg-drawing-opacity); }
    100% { transform: translate3d(2%, 0, 0); }
}

@keyframes sbgDrawingScan {
    0% { background-position: -120px 0; opacity: calc(var(--sbg-drawing-opacity) * 0.35); }
    35%, 100% { opacity: var(--sbg-drawing-opacity); }
    100% { background-position: 160px 80px; }
}

@keyframes sbgDrawingPop {
    0% { opacity: 0; transform: scale(0.92); }
    18% { opacity: var(--sbg-drawing-opacity); transform: scale(1.02); }
    42%, 100% { opacity: var(--sbg-drawing-opacity); transform: scale(1); }
}

@keyframes sbgDrawingSpin {
    0% { transform: rotate(0deg) scale(1); opacity: calc(var(--sbg-drawing-opacity) * 0.72); }
    50% { opacity: var(--sbg-drawing-opacity); }
    100% { transform: rotate(360deg) scale(1); opacity: calc(var(--sbg-drawing-opacity) * 0.72); }
}

@media (min-width: 1025px) {
    .sbg-enabled.sbg-device-no-desktop::before,
    .sbg-enabled.sbg-device-no-desktop::after {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sbg-enabled.sbg-device-no-tablet::before,
    .sbg-enabled.sbg-device-no-tablet::after {
        display: none;
    }

    .sbg-enabled::before {
        inset: -18%;
        filter: blur(calc(var(--sbg-blur) * 0.85));
    }

    .sbg-enabled::after {
        opacity: calc(var(--sbg-drawing-opacity) * 0.82);
    }
}

@media (max-width: 767px) {
    .sbg-enabled.sbg-device-no-mobile::before,
    .sbg-enabled.sbg-device-no-mobile::after {
        display: none;
    }

    .sbg-enabled::before {
        inset: -14%;
        filter: blur(calc(var(--sbg-blur) * 0.72));
        transform: scale(calc(var(--sbg-scale) * 0.98));
    }

    .sbg-enabled::after {
        opacity: calc(var(--sbg-drawing-opacity) * 0.58);
        background-size: auto;
    }

    .sbg-enabled.sbg-mobile-soft::before {
        opacity: calc(var(--sbg-opacity) * 0.58);
        animation-duration: calc(var(--sbg-speed) * 1.65);
    }

    .sbg-enabled.sbg-mobile-soft::after {
        opacity: calc(var(--sbg-drawing-opacity) * 0.48);
        animation-duration: calc(var(--sbg-speed) * 1.8);
    }

    .sbg-enabled.sbg-mobile-static::before,
    .sbg-enabled.sbg-mobile-static::after {
        animation: none;
    }

    .sbg-enabled.sbg-mobile-static::before {
        opacity: calc(var(--sbg-opacity) * 0.62);
    }

    .sbg-enabled.sbg-mobile-static::after {
        opacity: calc(var(--sbg-drawing-opacity) * 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sbg-enabled::before,
    .sbg-enabled::after {
        animation: none !important;
    }
}

/* v1.3.0 - Wow Background Presets */
.sbg-preset-nebula::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.28) 0 3%, transparent 18%),
        radial-gradient(ellipse at 28% 42%, var(--sbg-c1) 0 12%, transparent 42%),
        radial-gradient(ellipse at 72% 38%, var(--sbg-c3) 0 14%, transparent 44%),
        radial-gradient(circle at 54% 74%, var(--sbg-c2) 0 18%, transparent 48%),
        conic-gradient(from 120deg at 52% 48%, var(--sbg-c1), var(--sbg-c2), var(--sbg-c3), #ffffff, var(--sbg-c1));
    background-size: 170% 170%, 155% 155%, 150% 150%, 180% 180%, 190% 190%;
    filter: blur(var(--sbg-blur)) saturate(1.25) contrast(1.06);
}

.sbg-preset-plasma::before {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255,255,255,0.24) 0 7%, transparent 28%),
        radial-gradient(ellipse at 74% 62%, var(--sbg-c3) 0 18%, transparent 42%),
        radial-gradient(ellipse at 44% 52%, var(--sbg-c1) 0 20%, transparent 46%),
        conic-gradient(from var(--sbg-angle) at 50% 50%, var(--sbg-c1), var(--sbg-c3), var(--sbg-c2), var(--sbg-c1));
    background-size: 130% 130%, 145% 145%, 165% 150%, 180% 180%;
    filter: blur(var(--sbg-blur)) saturate(1.45) contrast(1.1);
}

.sbg-preset-holo::before {
    background:
        linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,0.40) 32%, transparent 37% 62%, rgba(255,255,255,0.22) 67%, transparent 72%),
        linear-gradient(calc(var(--sbg-angle) + 45deg), var(--sbg-c1), var(--sbg-c3), #ffffff, var(--sbg-c2), var(--sbg-c1)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 9px);
    background-size: 220% 220%, 180% 180%, 24px 24px;
    filter: blur(calc(var(--sbg-blur) * 0.72)) saturate(1.7) brightness(1.04);
}

.sbg-preset-vortex::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.24) 0 5%, transparent 16%),
        conic-gradient(from var(--sbg-angle) at 50% 50%, transparent 0 7%, var(--sbg-c1) 8% 16%, transparent 17% 23%, var(--sbg-c3) 24% 32%, transparent 33% 40%, var(--sbg-c2) 41% 52%, transparent 53% 60%, var(--sbg-c1) 61% 70%, transparent 71% 100%),
        radial-gradient(circle at 50% 50%, var(--sbg-c2), #020617 68%);
    background-size: 110% 110%, 165% 165%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.58)) saturate(1.35);
}

.sbg-preset-meteor::before {
    background:
        linear-gradient(120deg, transparent 0 18%, rgba(255,255,255,0.70) 19%, transparent 22% 100%),
        linear-gradient(135deg, transparent 0 45%, var(--sbg-c3) 46%, transparent 49% 100%),
        radial-gradient(circle at 20% 30%, var(--sbg-c1) 0 12%, transparent 38%),
        radial-gradient(circle at 80% 70%, var(--sbg-c3) 0 10%, transparent 34%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 260% 260%, 210% 210%, 130% 130%, 150% 150%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.65)) brightness(1.08);
}

.sbg-preset-galaxy::before {
    background:
        radial-gradient(circle, rgba(255,255,255,0.85) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,0.45) 0 1px, transparent 1.4px),
        radial-gradient(ellipse at 45% 48%, var(--sbg-c1) 0 14%, transparent 42%),
        radial-gradient(ellipse at 64% 52%, var(--sbg-c3) 0 12%, transparent 38%),
        linear-gradient(var(--sbg-angle), #030712, var(--sbg-c2));
    background-size: 38px 38px, 71px 71px, 160% 160%, 145% 145%, 100% 100%;
    background-position: 0 0, 18px 9px, 0 0, 0 0, 0 0;
    filter: blur(calc(var(--sbg-blur) * 0.62)) saturate(1.25);
}

.sbg-preset-tunnel::before {
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(255,255,255,0.24) 23px 25px, transparent 26px 52px),
        conic-gradient(from var(--sbg-angle) at 50% 50%, var(--sbg-c1), transparent, var(--sbg-c3), transparent, var(--sbg-c1)),
        radial-gradient(circle at 50% 50%, transparent 0 10%, #020617 68%);
    background-size: 150% 150%, 180% 180%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.5)) saturate(1.3) contrast(1.08);
}

.sbg-preset-storm::before {
    background:
        linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,0.74) 35% 36%, transparent 37% 100%),
        linear-gradient(68deg, transparent 0 56%, var(--sbg-c3) 57% 58%, transparent 59% 100%),
        radial-gradient(circle at 22% 24%, var(--sbg-c1) 0 10%, transparent 34%),
        radial-gradient(circle at 82% 70%, var(--sbg-c3) 0 12%, transparent 38%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 170% 170%, 150% 150%, 150% 150%, 150% 150%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.55)) brightness(1.18) saturate(1.28);
}

.sbg-preset-lava::before {
    background:
        radial-gradient(ellipse at 24% 30%, var(--sbg-c1) 0 18%, transparent 44%),
        radial-gradient(ellipse at 70% 28%, rgba(255,255,255,0.22) 0 8%, transparent 28%),
        radial-gradient(ellipse at 72% 75%, var(--sbg-c3) 0 20%, transparent 46%),
        radial-gradient(ellipse at 42% 64%, var(--sbg-c2) 0 24%, transparent 54%),
        linear-gradient(var(--sbg-angle), #070711, var(--sbg-c2));
    background-size: 155% 155%, 130% 130%, 160% 160%, 170% 170%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.88)) saturate(1.35) contrast(1.08);
}

.sbg-preset-north::before {
    background:
        linear-gradient(110deg, transparent 0 22%, rgba(255,255,255,0.26) 26% 34%, transparent 39% 100%),
        linear-gradient(88deg, transparent 0 14%, var(--sbg-c1) 22%, transparent 38% 55%, var(--sbg-c3) 68%, transparent 84%),
        radial-gradient(circle at 50% 100%, #020617 0 28%, transparent 62%),
        linear-gradient(180deg, #020617, var(--sbg-c2));
    background-size: 180% 180%, 170% 170%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.7)) saturate(1.48);
}

.sbg-preset-lasergrid::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.20) 1px, transparent 1px),
        linear-gradient(0deg, var(--sbg-c3) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,0.45) 47%, transparent 49% 100%),
        radial-gradient(circle at 50% 20%, var(--sbg-c1), transparent 42%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 44px 44px, 44px 44px, 190% 190%, 100% 100%, 100% 100%;
    transform-origin: 50% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.42)) saturate(1.38) perspective(700px);
}

.sbg-preset-liquidchrome::before {
    background:
        radial-gradient(ellipse at 22% 35%, rgba(255,255,255,0.70) 0 6%, transparent 24%),
        radial-gradient(ellipse at 72% 62%, var(--sbg-c3) 0 13%, transparent 34%),
        linear-gradient(118deg, rgba(255,255,255,0.40), transparent 20% 32%, var(--sbg-c1) 42%, rgba(255,255,255,0.26) 50%, var(--sbg-c2) 68%, transparent),
        conic-gradient(from var(--sbg-angle), var(--sbg-c1), #ffffff, var(--sbg-c3), var(--sbg-c2), var(--sbg-c1));
    background-size: 150% 150%, 140% 140%, 220% 220%, 180% 180%;
    filter: blur(calc(var(--sbg-blur) * 0.58)) saturate(1.35) contrast(1.12);
}

.sbg-preset-orbs::before {
    background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,0.36) 0 8%, transparent 18%),
        radial-gradient(circle at 32% 72%, var(--sbg-c1) 0 12%, transparent 26%),
        radial-gradient(circle at 72% 28%, var(--sbg-c3) 0 13%, transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(255,255,255,0.28) 0 9%, transparent 22%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: 115% 115%, 130% 130%, 125% 125%, 120% 120%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.8)) saturate(1.25);
}

.sbg-preset-datastream::before {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(0deg, transparent 0 12px, var(--sbg-c3) 13px 14px, transparent 15px 48px),
        linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,0.30) 35% 36%, transparent 37% 100%),
        radial-gradient(circle at 20% 25%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 96px 96px, 86px 86px, 170% 170%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.46)) saturate(1.32);
}

.sbg-preset-magnetic::before {
    background:
        repeating-radial-gradient(ellipse at 34% 52%, transparent 0 18px, rgba(255,255,255,0.20) 19px 21px, transparent 22px 40px),
        repeating-radial-gradient(ellipse at 72% 50%, transparent 0 18px, var(--sbg-c3) 19px 21px, transparent 22px 42px),
        radial-gradient(circle at 50% 50%, var(--sbg-c1), transparent 42%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 170% 140%, 170% 140%, 130% 130%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.68)) saturate(1.22);
}

.sbg-preset-ribbon::before {
    background:
        linear-gradient(118deg, transparent 0 18%, var(--sbg-c1) 23% 30%, transparent 35% 52%, var(--sbg-c3) 58% 66%, transparent 72% 100%),
        linear-gradient(72deg, transparent 0 32%, rgba(255,255,255,0.28) 38% 44%, transparent 48% 100%),
        radial-gradient(circle at 72% 28%, var(--sbg-c3), transparent 36%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: 190% 190%, 220% 220%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 0.58)) saturate(1.32);
}

/* v1.3.0 - zusätzliche Wow-Zeichnungen */
.sbg-drawing-rays::after {
    display: block;
    background-image:
        conic-gradient(from 0deg at 50% 50%, transparent 0 5%, rgba(255,255,255,0.50) 6% 7%, transparent 8% 18%, var(--sbg-c3) 19% 20%, transparent 21% 100%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 56%);
    background-size: 100% 100%, 100% 100%;
    background-position: center;
}

.sbg-drawing-comets::after {
    display: block;
    background-image:
        linear-gradient(120deg, transparent 0 18%, rgba(255,255,255,0.85) 19%, transparent 23% 100%),
        linear-gradient(120deg, transparent 0 52%, var(--sbg-c3) 53%, transparent 57% 100%),
        radial-gradient(circle, rgba(255,255,255,0.9) 0 2px, transparent 3px);
    background-size: 210px 150px, 260px 190px, 90px 90px;
    background-position: 0 0, 80px 30px, 0 0;
}

.sbg-drawing-starfield::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
        radial-gradient(circle, var(--sbg-c3) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255,255,255,0.45) 0 1.5px, transparent 2px);
    background-size: 34px 34px, 61px 61px, 97px 97px;
    background-position: 0 0, 18px 11px, 42px 27px;
}

.sbg-drawing-bokeh::after {
    display: block;
    background-image:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,0.42) 0 0.8rem, transparent 1rem),
        radial-gradient(circle at 66% 24%, var(--sbg-c3) 0 0.7rem, transparent 1rem),
        radial-gradient(circle at 82% 72%, rgba(255,255,255,0.30) 0 1.2rem, transparent 1.55rem),
        radial-gradient(circle at 36% 78%, var(--sbg-c1) 0 0.85rem, transparent 1.25rem);
    background-size: 260px 220px, 300px 260px, 360px 280px, 310px 250px;
}

.sbg-drawing-shards::after {
    display: block;
    background-image:
        linear-gradient(35deg, transparent 0 43%, rgba(255,255,255,0.70) 44% 46%, transparent 47% 100%),
        linear-gradient(140deg, transparent 0 54%, var(--sbg-c3) 55% 57%, transparent 58% 100%),
        linear-gradient(82deg, transparent 0 64%, rgba(255,255,255,0.36) 65% 67%, transparent 68% 100%);
    background-size: 150px 140px, 190px 160px, 220px 190px;
    background-position: 0 0, 60px 35px, 110px 70px;
}

.sbg-drawing-ribbons::after {
    display: block;
    background-image:
        linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,0.38) 27% 32%, transparent 35% 100%),
        linear-gradient(65deg, transparent 0 50%, var(--sbg-c3) 53% 57%, transparent 60% 100%),
        linear-gradient(132deg, transparent 0 64%, var(--sbg-c1) 66% 70%, transparent 73% 100%);
    background-size: 260px 220px, 310px 260px, 360px 300px;
}

.sbg-drawing-pulse-dots::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.88) 0 2px, transparent 3.5px),
        radial-gradient(circle, var(--sbg-c3) 0 2.2px, transparent 4px);
    background-size: 42px 42px, 84px 84px;
    background-position: 0 0, 21px 21px;
}

.sbg-drawing-tech-nodes::after {
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.38) 1px, transparent 1px),
        linear-gradient(0deg, var(--sbg-c3) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.88) 0 2px, transparent 3px),
        radial-gradient(circle, var(--sbg-c3) 0 2.5px, transparent 3.6px);
    background-size: 88px 88px, 88px 88px, 88px 88px, 176px 176px;
    background-position: 0 0, 0 0, 0 0, 44px 44px;
}

.sbg-drawing-orbit-particles::after {
    display: block;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 0 21%, rgba(255,255,255,0.45) 22% 23%, transparent 24% 36%, var(--sbg-c3) 37% 38%, transparent 39%),
        radial-gradient(circle at 68% 34%, rgba(255,255,255,0.9) 0 3px, transparent 4px),
        radial-gradient(circle at 32% 68%, var(--sbg-c3) 0 3px, transparent 4px);
    background-size: 180px 180px, 180px 180px, 180px 180px;
    background-position: center;
}

.sbg-drawing-lightning::after {
    display: block;
    background-image:
        linear-gradient(118deg, transparent 0 34%, rgba(255,255,255,0.80) 35% 36%, transparent 37% 44%, var(--sbg-c3) 45% 46%, transparent 47% 100%),
        linear-gradient(68deg, transparent 0 52%, rgba(255,255,255,0.42) 53% 54%, transparent 55% 100%);
    background-size: 220px 180px, 280px 220px;
    background-position: 0 0, 90px 45px;
}

.sbg-drawing-wireframe::after {
    display: block;
    background-image:
        linear-gradient(60deg, rgba(255,255,255,0.34) 1px, transparent 1px),
        linear-gradient(120deg, var(--sbg-c3) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 80px 80px;
    transform: skewY(-6deg);
}

.sbg-drawing-glow-frames::after {
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10), var(--sbg-c3), rgba(255,255,255,0.10), rgba(255,255,255,0.72)),
        linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10), var(--sbg-c3), rgba(255,255,255,0.10), rgba(255,255,255,0.72)),
        linear-gradient(0deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10), var(--sbg-c3), rgba(255,255,255,0.10), rgba(255,255,255,0.72)),
        linear-gradient(0deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10), var(--sbg-c3), rgba(255,255,255,0.10), rgba(255,255,255,0.72));
    background-repeat: no-repeat;
    background-size: 58% 2px, 58% 2px, 2px 58%, 2px 58%;
    background-position: 8% 12%, 92% 88%, 12% 8%, 88% 92%;
}

/* v1.3.0 - Wow Animationen */
.sbg-anim-cinematic::before { animation: sbgCinematic var(--sbg-speed) cubic-bezier(.45,0,.2,1) infinite alternate; }
.sbg-anim-warp::before { animation: sbgWarp var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-lava::before { animation: sbgLava var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-tunnel::before { animation: sbgTunnel var(--sbg-speed) linear infinite; }
.sbg-anim-glare::before { animation: sbgGlare var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-drift3d::before { animation: sbgDrift3d var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-electric::before { animation: sbgElectric var(--sbg-speed) steps(6, end) infinite; }

.sbg-drawing-anim-twinkle::after { animation: sbgDrawingTwinkle var(--sbg-speed) steps(5, end) infinite; }
.sbg-drawing-anim-orbit::after { animation: sbgDrawingOrbit var(--sbg-speed) linear infinite; }
.sbg-drawing-anim-cascade::after { animation: sbgDrawingCascade var(--sbg-speed) linear infinite; }
.sbg-drawing-anim-elastic::after { animation: sbgDrawingElastic var(--sbg-speed) cubic-bezier(.2,.9,.2,1.1) infinite alternate; }
.sbg-drawing-anim-flicker::after { animation: sbgDrawingFlicker var(--sbg-speed) steps(7, end) infinite; }
.sbg-drawing-anim-trace::after { animation: sbgDrawingTrace var(--sbg-speed) ease-in-out infinite; }

@keyframes sbgCinematic {
    0% { transform: translate3d(-4%, -3%, 0) scale(var(--sbg-scale)) rotate(-1deg); background-position: 0% 30%; opacity: calc(var(--sbg-opacity) * .78); }
    45% { opacity: var(--sbg-opacity); }
    100% { transform: translate3d(4%, 3%, 0) scale(calc(var(--sbg-scale) + .10)) rotate(1deg); background-position: 100% 70%; opacity: var(--sbg-opacity); }
}

@keyframes sbgWarp {
    0% { transform: scale(var(--sbg-scale)) rotate(0deg); background-position: 50% 50%; }
    35% { transform: scale(calc(var(--sbg-scale) + .08)) rotate(2deg); background-position: 70% 35%; }
    70% { transform: scale(calc(var(--sbg-scale) + .03)) rotate(-2deg); background-position: 25% 75%; }
    100% { transform: scale(var(--sbg-scale)) rotate(0deg); background-position: 50% 50%; }
}

@keyframes sbgLava {
    0% { border-radius: 42% 58% 54% 46%; transform: translate3d(-3%, 2%, 0) scale(var(--sbg-scale)); background-position: 0% 35%; }
    33% { border-radius: 62% 38% 44% 56%; transform: translate3d(2%, -2%, 0) scale(calc(var(--sbg-scale) + .08)); background-position: 60% 55%; }
    66% { border-radius: 50% 50% 66% 34%; transform: translate3d(4%, 3%, 0) scale(calc(var(--sbg-scale) + .04)); background-position: 90% 20%; }
    100% { border-radius: 38% 62% 48% 52%; transform: translate3d(-1%, -3%, 0) scale(var(--sbg-scale)); background-position: 30% 80%; }
}

@keyframes sbgTunnel {
    0% { transform: scale(var(--sbg-scale)) rotate(0deg); background-position: 50% 50%, 0% 0%, 50% 50%; }
    100% { transform: scale(calc(var(--sbg-scale) + .09)) rotate(360deg); background-position: 50% 50%, 100% 100%, 50% 50%; }
}

@keyframes sbgGlare {
    0%, 100% { transform: translate3d(-8%, 0, 0) scale(var(--sbg-scale)); background-position: -80% 50%, 50% 50%, 0 0; filter: blur(var(--sbg-blur)) brightness(1); }
    45%, 55% { transform: translate3d(8%, 0, 0) scale(calc(var(--sbg-scale) + .05)); background-position: 120% 50%, 80% 50%, 0 0; filter: blur(var(--sbg-blur)) brightness(1.28); }
}

@keyframes sbgDrift3d {
    0% { transform: perspective(900px) rotateX(0deg) rotateY(-3deg) translate3d(-2%, -1%, 0) scale(var(--sbg-scale)); background-position: 20% 35%; }
    50% { transform: perspective(900px) rotateX(2deg) rotateY(3deg) translate3d(2%, 2%, 0) scale(calc(var(--sbg-scale) + .06)); background-position: 75% 65%; }
    100% { transform: perspective(900px) rotateX(-2deg) rotateY(2deg) translate3d(4%, -1%, 0) scale(calc(var(--sbg-scale) + .02)); background-position: 100% 30%; }
}

@keyframes sbgElectric {
    0%, 100% { opacity: calc(var(--sbg-opacity) * .72); filter: blur(var(--sbg-blur)) brightness(1); transform: scale(var(--sbg-scale)); background-position: 0 0; }
    14% { opacity: var(--sbg-opacity); filter: blur(calc(var(--sbg-blur) * .8)) brightness(1.45); background-position: 40px -20px; }
    30% { opacity: calc(var(--sbg-opacity) * .62); }
    48% { opacity: var(--sbg-opacity); filter: blur(calc(var(--sbg-blur) * .72)) brightness(1.55); background-position: -20px 40px; }
    74% { opacity: calc(var(--sbg-opacity) * .82); background-position: 80px 20px; }
}

@keyframes sbgDrawingTwinkle {
    0%, 100% { opacity: calc(var(--sbg-drawing-opacity) * .42); filter: brightness(1); }
    20% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.35); }
    40% { opacity: calc(var(--sbg-drawing-opacity) * .65); }
    60% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.55); }
    80% { opacity: calc(var(--sbg-drawing-opacity) * .50); }
}

@keyframes sbgDrawingOrbit {
    0% { transform: rotate(0deg) scale(1); background-position: center; }
    100% { transform: rotate(360deg) scale(1.02); background-position: center; }
}

@keyframes sbgDrawingCascade {
    0% { transform: translate3d(0, -8%, 0); background-position: 0 -120px; opacity: calc(var(--sbg-drawing-opacity) * .42); }
    20%, 80% { opacity: var(--sbg-drawing-opacity); }
    100% { transform: translate3d(0, 8%, 0); background-position: 0 160px; opacity: calc(var(--sbg-drawing-opacity) * .62); }
}

@keyframes sbgDrawingElastic {
    0% { transform: translate3d(-6%, 0, 0) scale(.96); opacity: calc(var(--sbg-drawing-opacity) * .45); }
    30% { transform: translate3d(1.5%, 0, 0) scale(1.03); opacity: var(--sbg-drawing-opacity); }
    100% { transform: translate3d(4%, 0, 0) scale(1); opacity: var(--sbg-drawing-opacity); }
}

@keyframes sbgDrawingFlicker {
    0%, 100% { opacity: calc(var(--sbg-drawing-opacity) * .38); filter: brightness(1); }
    16% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.65); }
    34% { opacity: calc(var(--sbg-drawing-opacity) * .55); }
    52% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.35); }
    70% { opacity: calc(var(--sbg-drawing-opacity) * .30); }
}

@keyframes sbgDrawingTrace {
    0% { clip-path: inset(0 100% 100% 0); opacity: 0; }
    18% { opacity: var(--sbg-drawing-opacity); }
    52% { clip-path: inset(0 0 0 0); opacity: var(--sbg-drawing-opacity); }
    100% { clip-path: inset(0 0 0 0); opacity: calc(var(--sbg-drawing-opacity) * .65); background-position: 80px 40px; }
}


/* v1.4.0 - Premium Hero Backgrounds, bewusst auf starke optische Wirkung optimiert */
.sbg-preset-cinematic-beams::before {
    background:
        linear-gradient(115deg, transparent 0 16%, rgba(255,255,255,0.38) 18% 23%, transparent 25% 100%),
        linear-gradient(68deg, transparent 0 56%, var(--sbg-c3) 59% 64%, transparent 67% 100%),
        radial-gradient(ellipse at 16% 18%, rgba(255,255,255,0.32) 0 8%, transparent 32%),
        radial-gradient(ellipse at 82% 72%, var(--sbg-c1) 0 14%, transparent 42%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2), #050816);
    background-size: 240% 240%, 220% 220%, 120% 120%, 145% 145%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .62)) saturate(1.35) contrast(1.08);
}

.sbg-preset-prismatic-glass::before {
    background:
        conic-gradient(from 35deg at 52% 48%, rgba(255,255,255,0.42), var(--sbg-c1), var(--sbg-c3), rgba(255,255,255,0.22), var(--sbg-c2), var(--sbg-c1)),
        linear-gradient(135deg, transparent 0 28%, rgba(255,255,255,0.34) 29% 31%, transparent 32% 54%, rgba(255,255,255,0.18) 55% 57%, transparent 58%),
        radial-gradient(circle at 76% 22%, var(--sbg-c3), transparent 38%),
        linear-gradient(var(--sbg-angle), #0b1120, #020617);
    background-size: 185% 185%, 170% 170%, 120% 120%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .55)) saturate(1.55) brightness(1.08);
}

.sbg-preset-silk-motion::before {
    background:
        linear-gradient(120deg, transparent 0 12%, rgba(255,255,255,0.22) 20%, transparent 34%, var(--sbg-c1) 46%, transparent 62%, var(--sbg-c3) 76%, transparent 100%),
        radial-gradient(ellipse at 22% 58%, var(--sbg-c1), transparent 42%),
        radial-gradient(ellipse at 78% 44%, var(--sbg-c3), transparent 44%),
        linear-gradient(var(--sbg-angle), var(--sbg-c2), #020617);
    background-size: 220% 190%, 150% 120%, 150% 120%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .72)) saturate(1.42);
}

.sbg-preset-depth-fog::before {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255,255,255,0.30) 0 8%, transparent 30%),
        radial-gradient(ellipse at 34% 76%, var(--sbg-c1) 0 12%, transparent 44%),
        radial-gradient(ellipse at 86% 38%, var(--sbg-c3) 0 13%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12), transparent 62%),
        linear-gradient(var(--sbg-angle), #01030a, var(--sbg-c2), #020617);
    background-size: 130% 130%, 165% 145%, 155% 155%, 120% 120%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * 1.05)) saturate(1.2) contrast(1.02);
}

.sbg-preset-aurora-stage::before {
    background:
        linear-gradient(100deg, transparent 0 12%, var(--sbg-c1) 20% 28%, transparent 38% 52%, var(--sbg-c3) 62% 72%, transparent 84% 100%),
        linear-gradient(72deg, transparent 0 28%, rgba(255,255,255,0.24) 36% 42%, transparent 52% 100%),
        radial-gradient(ellipse at 46% 92%, rgba(255,255,255,0.18) 0 10%, transparent 38%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 230% 230%, 210% 210%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .7)) saturate(1.5);
}

.sbg-preset-kinetic-lines::before {
    background:
        repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,0.22) 27px 29px, transparent 30px 62px),
        repeating-linear-gradient(65deg, transparent 0 34px, var(--sbg-c3) 35px 37px, transparent 38px 86px),
        radial-gradient(circle at 16% 22%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: calc(180px * var(--sbg-density)) calc(180px * var(--sbg-density)), calc(230px * var(--sbg-density)) calc(230px * var(--sbg-density)), 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .32)) saturate(1.3) contrast(1.12);
}

.sbg-preset-solar-flare::before {
    background:
        radial-gradient(circle at 18% 48%, rgba(255,255,255,0.84) 0 3%, var(--sbg-c3) 4% 9%, transparent 28%),
        conic-gradient(from 90deg at 18% 48%, transparent 0 7%, rgba(255,255,255,0.30) 8% 10%, transparent 11% 22%, var(--sbg-c1) 23% 25%, transparent 26% 100%),
        radial-gradient(ellipse at 74% 36%, var(--sbg-c1), transparent 42%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 100% 100%, 160% 160%, 140% 140%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .52)) saturate(1.5) brightness(1.08);
}

.sbg-preset-neon-veil::before {
    background:
        linear-gradient(98deg, transparent 0 18%, rgba(255,255,255,0.20) 24% 31%, transparent 38% 100%),
        linear-gradient(82deg, transparent 0 40%, var(--sbg-c1) 48% 54%, transparent 62% 100%),
        linear-gradient(118deg, transparent 0 54%, var(--sbg-c3) 60% 66%, transparent 72% 100%),
        radial-gradient(circle at 80% 20%, var(--sbg-c3), transparent 35%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 220% 220%, 250% 250%, 210% 210%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .6)) saturate(1.6);
}

.sbg-preset-fluid-ink::before {
    background:
        radial-gradient(ellipse at 30% 34%, var(--sbg-c1) 0 14%, transparent 42%),
        radial-gradient(ellipse at 62% 58%, var(--sbg-c3) 0 12%, transparent 40%),
        radial-gradient(ellipse at 45% 50%, rgba(255,255,255,0.18) 0 8%, transparent 30%),
        conic-gradient(from 220deg at 52% 54%, var(--sbg-c2), var(--sbg-c1), var(--sbg-c3), var(--sbg-c2));
    background-size: 160% 130%, 150% 140%, 120% 120%, 180% 180%;
    filter: blur(calc(var(--sbg-blur) * .9)) saturate(1.35) contrast(1.06);
}

.sbg-preset-crystal-flow::before {
    background:
        linear-gradient(42deg, transparent 0 22%, rgba(255,255,255,0.38) 23% 25%, transparent 26% 100%),
        linear-gradient(132deg, transparent 0 38%, var(--sbg-c3) 39% 42%, transparent 43% 100%),
        linear-gradient(78deg, transparent 0 58%, rgba(255,255,255,0.22) 59% 61%, transparent 62% 100%),
        radial-gradient(circle at 82% 18%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 190% 190%, 180% 180%, 210% 210%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .42)) saturate(1.38) contrast(1.14);
}

.sbg-preset-quantum-dots::before {
    background:
        radial-gradient(circle, rgba(255,255,255,0.58) 0 2px, transparent 3.2px),
        radial-gradient(circle, var(--sbg-c3) 0 2px, transparent 3.4px),
        radial-gradient(circle at 22% 20%, var(--sbg-c1), transparent 36%),
        radial-gradient(circle at 72% 72%, var(--sbg-c3), transparent 34%),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 34px 34px, 68px 68px, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 18px 12px, 0 0, 0 0, 0 0;
    filter: blur(calc(var(--sbg-blur) * .35)) saturate(1.3);
}

.sbg-preset-stage-spotlight::before {
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255,255,255,0.56) 0 5%, transparent 28%),
        conic-gradient(from 210deg at 50% 8%, transparent 0 16%, var(--sbg-c1) 18% 26%, transparent 28% 38%, var(--sbg-c3) 40% 48%, transparent 50% 100%),
        radial-gradient(ellipse at 50% 90%, rgba(255,255,255,0.16), transparent 45%),
        linear-gradient(var(--sbg-angle), #01030a, var(--sbg-c2), #020617);
    background-size: 100% 100%, 150% 150%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .55)) saturate(1.35);
}

.sbg-preset-glass-motion::before {
    background:
        linear-gradient(125deg, rgba(255,255,255,0.28), transparent 18% 42%, rgba(255,255,255,0.12) 52%, transparent 72%),
        radial-gradient(circle at 20% 28%, var(--sbg-c1), transparent 32%),
        radial-gradient(circle at 84% 70%, var(--sbg-c3), transparent 36%),
        linear-gradient(var(--sbg-angle), rgba(255,255,255,0.08), var(--sbg-c2), #020617);
    background-size: 180% 180%, 140% 140%, 140% 140%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .65)) saturate(1.32) brightness(1.04);
}

.sbg-preset-ocean-glow::before {
    background:
        radial-gradient(ellipse at 28% 78%, var(--sbg-c1) 0 16%, transparent 44%),
        radial-gradient(ellipse at 72% 24%, var(--sbg-c3) 0 12%, transparent 38%),
        repeating-radial-gradient(ellipse at 50% 70%, transparent 0 24px, rgba(255,255,255,0.18) 25px 27px, transparent 28px 52px),
        linear-gradient(var(--sbg-angle), #020617, var(--sbg-c2));
    background-size: 150% 120%, 140% 140%, 180% 120%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .72)) saturate(1.28);
}

.sbg-preset-executive-gradient::before {
    background:
        linear-gradient(122deg, rgba(255,255,255,0.18), transparent 16% 56%, rgba(255,255,255,0.10) 72%, transparent 100%),
        radial-gradient(circle at 88% 12%, var(--sbg-c3), transparent 34%),
        radial-gradient(circle at 12% 78%, var(--sbg-c1), transparent 36%),
        linear-gradient(var(--sbg-angle), #000000, var(--sbg-c2), #020617);
    background-size: 180% 180%, 100% 100%, 100% 100%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .52)) saturate(1.18) contrast(1.08);
}

.sbg-preset-luxury-mesh-pro::before {
    background:
        radial-gradient(circle at 18% 22%, var(--sbg-c1) 0 10%, transparent 32%),
        radial-gradient(circle at 78% 26%, var(--sbg-c3) 0 12%, transparent 36%),
        radial-gradient(circle at 60% 82%, rgba(255,255,255,0.24) 0 8%, transparent 34%),
        linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,0.14) 47% 48%, transparent 49%),
        linear-gradient(var(--sbg-angle), #01030a, var(--sbg-c2), #020617);
    background-size: 135% 135%, 145% 145%, 125% 125%, 190% 190%, 100% 100%;
    filter: blur(calc(var(--sbg-blur) * .66)) saturate(1.3);
}

/* v1.4.0 - Premium Zeichnungs-/Licht-Layer */
.sbg-drawing-premium-streaks::after {
    display: block;
    background-image:
        linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,0.82) 29% 30%, transparent 31% 100%),
        linear-gradient(105deg, transparent 0 54%, var(--sbg-c3) 55% 57%, transparent 58% 100%),
        linear-gradient(75deg, transparent 0 42%, rgba(255,255,255,0.34) 43% 45%, transparent 46% 100%);
    background-size: 360px 240px, 440px 300px, 520px 360px;
    background-position: -80px 0, 90px 40px, 170px 80px;
}

.sbg-drawing-lens-flares::after {
    display: block;
    background-image:
        radial-gradient(circle at 18% 44%, rgba(255,255,255,0.95) 0 2px, transparent 8px),
        radial-gradient(circle at 18% 44%, var(--sbg-c3) 0 8px, transparent 38px),
        linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,0.44) 8% 11%, transparent 12% 100%),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,0.46) 0 2px, transparent 18px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: center;
}

.sbg-drawing-cinematic-dust::after {
    display: block;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.55) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,0.22) 0 1px, transparent 1.4px),
        radial-gradient(circle, var(--sbg-c3) 0 1px, transparent 1.8px);
    background-size: 38px 38px, 73px 73px, 127px 127px;
    background-position: 0 0, 18px 28px, 54px 32px;
    filter: blur(.15px);
}

.sbg-drawing-glass-reflections::after {
    display: block;
    background-image:
        linear-gradient(125deg, rgba(255,255,255,0.46), transparent 16% 42%, rgba(255,255,255,0.20) 56%, transparent 72%),
        linear-gradient(125deg, transparent 0 62%, var(--sbg-c3) 66%, transparent 72% 100%);
    background-size: 260% 260%, 220% 220%;
    background-position: -80% 50%, 120% 50%;
}

.sbg-drawing-hero-mask::after {
    display: block;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.42) 0 8%, transparent 42%),
        linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,0.18) 48%, transparent 80% 100%);
    background-size: 120% 120%, 180% 180%;
    background-position: center;
}

.sbg-drawing-luxury-border::after {
    display: block;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08), var(--sbg-c3), rgba(255,255,255,0.08), rgba(255,255,255,0.72)),
        linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08), var(--sbg-c3), rgba(255,255,255,0.08), rgba(255,255,255,0.72)),
        linear-gradient(0deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08), var(--sbg-c3), rgba(255,255,255,0.08), rgba(255,255,255,0.72)),
        linear-gradient(0deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08), var(--sbg-c3), rgba(255,255,255,0.08), rgba(255,255,255,0.72));
    background-repeat: no-repeat;
    background-size: 72% 1px, 72% 1px, 1px 72%, 1px 72%;
    background-position: 14% 10%, 86% 90%, 10% 14%, 90% 86%;
}

/* v1.4.0 - Background-Animationen mit deutlich stärkerem Hero-Charakter */
.sbg-anim-premium-cinematic::before { animation: sbgPremiumCinematic var(--sbg-speed) cubic-bezier(.42,0,.18,1) infinite alternate; }
.sbg-anim-deep-parallax::before { animation: sbgDeepParallax var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-luxury-sweep::before { animation: sbgLuxurySweep var(--sbg-speed) cubic-bezier(.45,0,.2,1) infinite; }
.sbg-anim-prism-shift::before { animation: sbgPrismShift var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-silk-wave::before { animation: sbgSilkWave var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-breathing-light::before { animation: sbgBreathingLight var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-hyperspace::before { animation: sbgHyperspace var(--sbg-speed) linear infinite; }
.sbg-anim-soft-focus::before { animation: sbgSoftFocus var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-aurora-dance::before { animation: sbgAuroraDance var(--sbg-speed) ease-in-out infinite; }
.sbg-anim-ink-flow::before { animation: sbgInkFlow var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-lens-flare::before { animation: sbgLensFlare var(--sbg-speed) cubic-bezier(.45,0,.2,1) infinite; }
.sbg-anim-spotlight-pan::before { animation: sbgSpotlightPan var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-anim-noise-drift::before { animation: sbgNoiseDrift var(--sbg-speed) steps(9, end) infinite; }
.sbg-anim-hero-reveal::before { animation: sbgHeroReveal var(--sbg-speed) cubic-bezier(.22,1,.36,1) infinite; }

.sbg-drawing-anim-streak-pass::after { animation: sbgDrawingStreakPass var(--sbg-speed) cubic-bezier(.45,0,.2,1) infinite; }
.sbg-drawing-anim-soft-spark::after { animation: sbgDrawingSoftSpark var(--sbg-speed) steps(6, end) infinite; }
.sbg-drawing-anim-mask-glide::after { animation: sbgDrawingMaskGlide var(--sbg-speed) ease-in-out infinite alternate; }
.sbg-drawing-anim-premium-float::after { animation: sbgDrawingPremiumFloat var(--sbg-speed) ease-in-out infinite alternate; }

@keyframes sbgPremiumCinematic {
    0% { transform: translate3d(-5%, -3%, 0) scale(var(--sbg-scale)) rotate(-1deg); background-position: 0% 35%, 20% 50%, 50% 50%, 50% 50%, 0 0; opacity: calc(var(--sbg-opacity) * .72); filter: blur(var(--sbg-blur)) saturate(1.15) brightness(.96); }
    38% { opacity: var(--sbg-opacity); filter: blur(calc(var(--sbg-blur) * .82)) saturate(1.4) brightness(1.16); }
    100% { transform: translate3d(5%, 3%, 0) scale(calc(var(--sbg-scale) + .14)) rotate(1.2deg); background-position: 100% 65%, 80% 50%, 20% 40%, 90% 80%, 0 0; opacity: var(--sbg-opacity); filter: blur(calc(var(--sbg-blur) * .72)) saturate(1.45) brightness(1.08); }
}

@keyframes sbgDeepParallax {
    0% { transform: perspective(1000px) rotateX(-1deg) rotateY(-4deg) translate3d(-3%, -2%, 0) scale(var(--sbg-scale)); background-position: 10% 25%, 40% 70%, 70% 20%, 0 0; }
    50% { transform: perspective(1000px) rotateX(2deg) rotateY(4deg) translate3d(2%, 3%, 0) scale(calc(var(--sbg-scale) + .08)); background-position: 52% 58%, 70% 30%, 28% 74%, 0 0; }
    100% { transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translate3d(5%, -1%, 0) scale(calc(var(--sbg-scale) + .04)); background-position: 100% 35%, 12% 40%, 92% 62%, 0 0; }
}

@keyframes sbgLuxurySweep {
    0%, 100% { transform: translate3d(-8%, 0, 0) scale(var(--sbg-scale)); background-position: -120% 50%, 0 0, 0 0, 0 0, 0 0; filter: blur(var(--sbg-blur)) brightness(.98); }
    45% { transform: translate3d(8%, 0, 0) scale(calc(var(--sbg-scale) + .08)); background-position: 120% 50%, 70% 50%, 0 0, 0 0, 0 0; filter: blur(calc(var(--sbg-blur) * .74)) brightness(1.35); }
    62% { background-position: 160% 50%, 100% 50%, 0 0, 0 0, 0 0; filter: blur(calc(var(--sbg-blur) * .86)) brightness(1.08); }
}

@keyframes sbgPrismShift {
    0% { transform: scale(var(--sbg-scale)) rotate(-2deg); background-position: 0% 40%, 20% 30%, 50% 50%, 0 0; filter: blur(var(--sbg-blur)) hue-rotate(0deg) saturate(1.22); }
    50% { transform: scale(calc(var(--sbg-scale) + .08)) rotate(2deg); background-position: 70% 52%, 80% 30%, 20% 80%, 0 0; filter: blur(calc(var(--sbg-blur) * .74)) hue-rotate(18deg) saturate(1.58); }
    100% { transform: scale(calc(var(--sbg-scale) + .03)) rotate(-1deg); background-position: 100% 64%, 40% 70%, 70% 20%, 0 0; filter: blur(var(--sbg-blur)) hue-rotate(-12deg) saturate(1.38); }
}

@keyframes sbgSilkWave {
    0%, 100% { transform: translate3d(-3%, 0, 0) skewX(-2deg) scale(var(--sbg-scale)); background-position: 0% 50%, 20% 50%, 80% 50%, 0 0; }
    34% { transform: translate3d(1%, -2%, 0) skewX(2deg) scale(calc(var(--sbg-scale) + .07)); background-position: 48% 54%, 65% 44%, 35% 60%, 0 0; }
    68% { transform: translate3d(4%, 2%, 0) skewX(-1deg) scale(calc(var(--sbg-scale) + .03)); background-position: 100% 48%, 85% 65%, 18% 40%, 0 0; }
}

@keyframes sbgBreathingLight {
    0%, 100% { opacity: calc(var(--sbg-opacity) * .68); transform: scale(var(--sbg-scale)); filter: blur(var(--sbg-blur)) brightness(.92) saturate(1.08); }
    50% { opacity: var(--sbg-opacity); transform: scale(calc(var(--sbg-scale) + .13)); filter: blur(calc(var(--sbg-blur) * .78)) brightness(1.24) saturate(1.45); }
}

@keyframes sbgHyperspace {
    0% { transform: scale(var(--sbg-scale)) rotate(0deg); background-position: 50% 50%, 0% 0%, 0 0; filter: blur(calc(var(--sbg-blur) * .52)) brightness(1); }
    100% { transform: scale(calc(var(--sbg-scale) + .18)) rotate(360deg); background-position: 50% 50%, 220% 220%, 0 0; filter: blur(calc(var(--sbg-blur) * .36)) brightness(1.2); }
}

@keyframes sbgSoftFocus {
    0% { transform: translate3d(-2%, 1%, 0) scale(var(--sbg-scale)); filter: blur(calc(var(--sbg-blur) * 1.15)) saturate(1.05); background-position: 20% 40%; }
    100% { transform: translate3d(2%, -1%, 0) scale(calc(var(--sbg-scale) + .10)); filter: blur(calc(var(--sbg-blur) * .75)) saturate(1.45) brightness(1.13); background-position: 80% 62%; }
}

@keyframes sbgAuroraDance {
    0%, 100% { transform: translate3d(-5%, 2%, 0) scale(var(--sbg-scale)) rotate(-1deg); background-position: 0% 60%, 20% 50%, 50% 80%, 0 0; }
    35% { transform: translate3d(2%, -3%, 0) scale(calc(var(--sbg-scale) + .08)) rotate(1deg); background-position: 42% 30%, 60% 54%, 40% 64%, 0 0; }
    70% { transform: translate3d(5%, 2%, 0) scale(calc(var(--sbg-scale) + .04)) rotate(-.4deg); background-position: 100% 52%, 84% 40%, 30% 90%, 0 0; }
}

@keyframes sbgInkFlow {
    0% { border-radius: 42% 58% 46% 54%; transform: translate3d(-3%, -2%, 0) scale(var(--sbg-scale)); background-position: 0% 42%; }
    33% { border-radius: 62% 38% 58% 42%; transform: translate3d(2%, 2%, 0) scale(calc(var(--sbg-scale) + .08)); background-position: 58% 62%; }
    66% { border-radius: 48% 52% 36% 64%; transform: translate3d(5%, -1%, 0) scale(calc(var(--sbg-scale) + .04)); background-position: 90% 24%; }
    100% { border-radius: 56% 44% 60% 40%; transform: translate3d(-1%, 3%, 0) scale(var(--sbg-scale)); background-position: 30% 88%; }
}

@keyframes sbgLensFlare {
    0%, 100% { transform: translate3d(-9%, 0, 0) scale(var(--sbg-scale)); background-position: -120% 50%, 20% 50%, 50% 50%, 0 0; filter: blur(var(--sbg-blur)) brightness(.95); }
    48% { transform: translate3d(9%, 0, 0) scale(calc(var(--sbg-scale) + .09)); background-position: 130% 50%, 70% 50%, 50% 50%, 0 0; filter: blur(calc(var(--sbg-blur) * .65)) brightness(1.42) saturate(1.42); }
    62% { filter: blur(calc(var(--sbg-blur) * .82)) brightness(1.08) saturate(1.18); }
}

@keyframes sbgSpotlightPan {
    0% { transform: translate3d(-4%, -2%, 0) scale(var(--sbg-scale)) rotate(-2deg); background-position: 38% 4%, 42% 12%, 50% 90%, 0 0; }
    100% { transform: translate3d(4%, 2%, 0) scale(calc(var(--sbg-scale) + .10)) rotate(2deg); background-position: 62% 4%, 58% 12%, 50% 90%, 0 0; }
}

@keyframes sbgNoiseDrift {
    0%, 100% { transform: scale(var(--sbg-scale)); background-position: 0 0, 18px 12px, 0 0, 0 0; filter: blur(calc(var(--sbg-blur) * .36)) contrast(1.08); }
    22% { background-position: 24px -18px, 38px 28px, 0 0, 0 0; }
    45% { background-position: -18px 30px, 12px -22px, 0 0, 0 0; filter: blur(calc(var(--sbg-blur) * .32)) brightness(1.14); }
    74% { background-position: 42px 12px, -16px 35px, 0 0, 0 0; }
}

@keyframes sbgHeroReveal {
    0% { opacity: 0; transform: translate3d(-8%, 0, 0) scale(calc(var(--sbg-scale) + .03)); clip-path: inset(0 100% 0 0 round 24px); }
    16% { opacity: var(--sbg-opacity); clip-path: inset(0 0 0 0 round 24px); }
    48%, 82% { opacity: var(--sbg-opacity); transform: translate3d(0, 0, 0) scale(calc(var(--sbg-scale) + .05)); clip-path: inset(0 0 0 0 round 24px); }
    100% { opacity: calc(var(--sbg-opacity) * .72); transform: translate3d(6%, 0, 0) scale(var(--sbg-scale)); clip-path: inset(0 0 0 0 round 24px); }
}

@keyframes sbgDrawingStreakPass {
    0%, 100% { transform: translate3d(-12%, 0, 0); background-position: -160px 0, -80px 40px, 0 80px; opacity: calc(var(--sbg-drawing-opacity) * .42); }
    42%, 58% { transform: translate3d(6%, 0, 0); background-position: 260px 0, 320px 40px, 180px 80px; opacity: var(--sbg-drawing-opacity); filter: brightness(1.35); }
}

@keyframes sbgDrawingSoftSpark {
    0%, 100% { opacity: calc(var(--sbg-drawing-opacity) * .38); filter: brightness(1); }
    17% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.45); }
    34% { opacity: calc(var(--sbg-drawing-opacity) * .52); }
    51% { opacity: var(--sbg-drawing-opacity); filter: brightness(1.28); }
    72% { opacity: calc(var(--sbg-drawing-opacity) * .70); }
}

@keyframes sbgDrawingMaskGlide {
    0% { transform: translate3d(-5%, -1%, 0) scale(.98); background-position: 0% 50%, 0% 50%; opacity: calc(var(--sbg-drawing-opacity) * .5); }
    100% { transform: translate3d(5%, 1%, 0) scale(1.04); background-position: 100% 50%, 100% 50%; opacity: var(--sbg-drawing-opacity); }
}

@keyframes sbgDrawingPremiumFloat {
    0% { transform: perspective(800px) rotateX(0deg) rotateY(-3deg) translate3d(-2%, -1%, 0); opacity: calc(var(--sbg-drawing-opacity) * .58); background-position: 0 0; }
    50% { opacity: var(--sbg-drawing-opacity); }
    100% { transform: perspective(800px) rotateX(2deg) rotateY(3deg) translate3d(2%, 1%, 0); opacity: var(--sbg-drawing-opacity); background-position: 90px 44px; }
}