/* Linien-Design */
:root {
    --validooo-bg: #0094FF25;
    --validooo-bg-solid: #eaf7ff;
    --validooo-line: rgba(0, 126, 214, .216);
    --validooo-line-soft: rgba(0, 126, 214, .158);
    --validooo-line-mid: rgba(0, 126, 214, .115);
    --validooo-line-faint: rgba(0, 126, 214, .072);
    --validooo-line-ghost: rgba(0, 126, 214, .047);
}

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

body#bare-responsive {
    min-height: 100vh;
    overflow-x: hidden;
    background:
    radial-gradient(circle at 16% 12%, rgba(0, 126, 214, .076), transparent 34%),
    radial-gradient(circle at 84% 20%, rgba(0, 126, 214, .061), transparent 36%),
    radial-gradient(circle at 50% 96%, rgba(0, 126, 214, .054), transparent 44%),
    linear-gradient(135deg, #f7fcff 0%, #eaf7ff 46%, #fbfeff 100%) !important;
}

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

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

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

.validooo-dynamic-bg::after {
    background-image:
    linear-gradient(90deg, rgba(0, 126, 214, .097) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 126, 214, .076) 1px, transparent 1px),
    linear-gradient(45deg, rgba(0, 126, 214, .086) 1px, transparent 1px);
    background-size: 132px 132px, 132px 132px, 264px 264px;
    transform: rotate(16deg) scale(1.22);
    animation: validooo-grid-drift-b 44s linear infinite reverse;
    opacity: .50;
    filter: blur(.15px);
}

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

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

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

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

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

.validooo-line::before,
.validooo-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 126, 214, .302);
    box-shadow: 0 0 18px rgba(0, 126, 214, .180);
    transform: translateY(-50%);
}

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

/* dezente Knotenpunkte im Raster */
.validooo-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 126, 214, .259);
    box-shadow: 0 0 18px rgba(0, 126, 214, .173);
    opacity: .48;
    animation: validooo-node-pulse var(--d) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes validooo-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 validooo-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 validooo-sweep {
    0% { transform: translate3d(-12%, -4%, 0); }
    100% { transform: translate3d(12%, 4%, 0); }
}

@keyframes validooo-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 validooo-orb-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(8vmax, 5vmax, 0) scale(1.08); }
}

@keyframes validooo-node-pulse {
    0%, 100% { opacity: .24; transform: scale(.85); }
    50% { opacity: .48; transform: scale(1.22); }
}

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

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

    .validooo-line { opacity: .28; }
    .validooo-node { opacity: .28; }
}