/* Design-Linienführung */
:root {
    --mbxcc-bg: #000000;
    --mbxcc-line: #222222;
    --mbxcc-line-soft: rgba(34, 34, 34, .72);
    --mbxcc-line-mid: rgba(34, 34, 34, .48);
    --mbxcc-line-faint: rgba(34, 34, 34, .24);
    --mbxcc-line-ghost: rgba(34, 34, 34, .13);
}

html {
    min-height: 100%;
    background: var(--mbxcc-bg);
}

body#bare-responsive {
    min-height: 100vh;
    overflow-x: hidden;
    background:
    radial-gradient(circle at 15% 12%, rgba(34, 34, 34, .24), transparent 32%),
    radial-gradient(circle at 85% 22%, rgba(34, 34, 34, .18), transparent 34%),
    radial-gradient(circle at 50% 95%, rgba(34, 34, 34, .14), transparent 42%),
    linear-gradient(135deg, #000000 0%, #030303 42%, #000000 100%) !important;
}

/* Inhalt bleibt immer über dem animierten Hintergrund */
#content {
    position: relative;
    z-index: 2;
}

.mbxcc-dynamic-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    background:
    linear-gradient(115deg, transparent 0%, rgba(34, 34, 34, .18) 42%, transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(34, 34, 34, .20), transparent 58%);
}

/* flächiges, bewegtes Linienraster */
.mbxcc-dynamic-bg::before,
.mbxcc-dynamic-bg::after {
    content: "";
    position: absolute;
    inset: -25%;
    background-image:
    linear-gradient(90deg, rgba(34, 34, 34, .58) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 34, 34, .38) 1px, transparent 1px),
    linear-gradient(135deg, rgba(34, 34, 34, .22) 1px, transparent 1px);
    background-size: 74px 74px, 74px 74px, 148px 148px;
    transform: rotate(-10deg) scale(1.16);
    animation: mbxcc-grid-drift-a 28s linear infinite;
    opacity: .72;
    will-change: transform;
}

.mbxcc-dynamic-bg::after {
    background-image:
    linear-gradient(90deg, rgba(34, 34, 34, .24) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34, 34, 34, .18) 1px, transparent 1px),
    linear-gradient(45deg, rgba(34, 34, 34, .20) 1px, transparent 1px);
    background-size: 132px 132px, 132px 132px, 264px 264px;
    transform: rotate(16deg) scale(1.22);
    animation: mbxcc-grid-drift-b 44s linear infinite reverse;
    opacity: .62;
    filter: blur(.15px);
}

/* große, sehr dunkle Lichtflächen, damit die Animation über die ganze Seite wirkt */
.mbxcc-orb {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 34, 34, .28), rgba(34, 34, 34, .12) 42%, transparent 70%);
    filter: blur(26px);
    opacity: .72;
    animation: mbxcc-orb-float 20s ease-in-out infinite alternate;
    will-change: transform;
}

.mbxcc-orb.one { left: -22vmax; top: -22vmax; }
.mbxcc-orb.two { right: -24vmax; bottom: -24vmax; animation-duration: 26s; animation-direction: alternate-reverse; }
.mbxcc-orb.three { left: 28%; top: 42%; width: 38vmax; height: 38vmax; opacity: .38; animation-duration: 31s; }

/* diagonal wandernde Flächenlinien */
.mbxcc-sweep {
    position: absolute;
    inset: -20%;
    background:
    repeating-linear-gradient(
        118deg,
        transparent 0,
        transparent 72px,
        rgba(34, 34, 34, .26) 73px,
        rgba(34, 34, 34, .26) 75px,
        transparent 77px,
        transparent 168px
    );
    transform: translate3d(-5%, 0, 0) rotate(0deg);
    animation: mbxcc-sweep 22s linear infinite;
    opacity: .70;
    will-change: transform;
}

.mbxcc-sweep.two {
    background:
    repeating-linear-gradient(
        62deg,
        transparent 0,
        transparent 92px,
        rgba(34, 34, 34, .18) 93px,
        rgba(34, 34, 34, .18) 96px,
        transparent 98px,
        transparent 210px
    );
    animation-duration: 35s;
    animation-direction: reverse;
    opacity: .62;
}

/* zusätzliche Linien über die ganze Fläche */
.mbxcc-line {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(34, 34, 34, .46), #222222, rgba(34, 34, 34, .46), transparent);
    box-shadow:
    0 0 16px rgba(34, 34, 34, .72),
    0 0 42px rgba(34, 34, 34, .36);
    transform: rotate(var(--r));
    opacity: 0;
    animation: mbxcc-line-flow var(--d) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

.mbxcc-line::before,
.mbxcc-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #222222;
    box-shadow: 0 0 18px rgba(34, 34, 34, .95);
    transform: translateY(-50%);
}

.mbxcc-line::before { right: 8%; }
.mbxcc-line::after { left: 22%; width: 3px; height: 3px; opacity: .72; }

/* dezente Knotenpunkte im Raster */
.mbxcc-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #222222;
    box-shadow: 0 0 18px rgba(34, 34, 34, .85);
    opacity: .62;
    animation: mbxcc-node-pulse var(--d) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes mbxcc-grid-drift-a {
    0% { transform: translate3d(0, 0, 0) rotate(-10deg) scale(1.16); }
    100% { transform: translate3d(74px, 74px, 0) rotate(-10deg) scale(1.16); }
}

@keyframes mbxcc-grid-drift-b {
    0% { transform: translate3d(0, 0, 0) rotate(16deg) scale(1.22); }
    100% { transform: translate3d(132px, -132px, 0) rotate(16deg) scale(1.22); }
}

@keyframes mbxcc-sweep {
    0% { transform: translate3d(-12%, -4%, 0); }
    100% { transform: translate3d(12%, 4%, 0); }
}

@keyframes mbxcc-line-flow {
    0%, 100% {
    opacity: 0;
    transform: translate3d(-54px, 22px, 0) rotate(var(--r)) scaleX(.62);
    }
    15%, 78% { opacity: var(--o); }
    50% {
    transform: translate3d(64px, -26px, 0) rotate(var(--r)) scaleX(1);
    }
}

@keyframes mbxcc-orb-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(8vmax, 5vmax, 0) scale(1.08); }
}

@keyframes mbxcc-node-pulse {
    0%, 100% { opacity: .22; transform: scale(.85); }
    50% { opacity: .82; transform: scale(1.22); }
}

@media (max-width: 768px) {
    .mbxcc-dynamic-bg::before { opacity: .58; }
    .mbxcc-dynamic-bg::after { opacity: .48; }
    .mbxcc-line { width: calc(var(--w) * .72); height: 1px; }
    .mbxcc-node { opacity: .46; }
}

@media (prefers-reduced-motion: reduce) {
    .mbxcc-dynamic-bg::before,
    .mbxcc-dynamic-bg::after,
    .mbxcc-sweep,
    .mbxcc-line,
    .mbxcc-orb,
    .mbxcc-node {
    animation: none !important;
    }

    .mbxcc-line { opacity: .38; }
    .mbxcc-node { opacity: .38; }
}