@media (prefers-color-scheme: light) {
    body {
        color: #ffffff;
        background-color: var(--color-blue-light);
    }

    a, a:focus, .loader i {
        color: #ffffff;
    }

    header {
        background-color: #ffffff;
    }

    header svg.bow {
        fill: var(--color-blue-light)
    }
    section {
        background-color: var(--color-blue-light);
        color: #ffffff;
    }
    section svg.bow {
        fill: var(--color-blue-main);
    }

    section.intro {
        background-image: url('/img/backgrounds/intro-it-modernisierung-digitalisierung.light.webp');
    }

    section.intro svg.bow {
        fill: #ffffff;
    }
    section.block1 {
        background-color: #ffffff;
        color: #000000;
    }

    section.block1 svg.bow {
        fill: var(--color-green-light);
    }
    section.block2 {
        background-color: var(--color-green-light);
        color: #000000;
    }

    section.block2 svg.bow {
        fill: var(--color-turquoise-dark);
    }
    section.block3 {
        background-color: var(--color-turquoise-dark);
        color: #ffffff;
    }

    section.block3 svg.bow {
        fill: var(--color-blue-light);
    }
    section.block4 {
        background-color: var(--color-blue-light);
        color: #ffffff;
    }

    section.block4 svg.bow {
        fill: var(--color-blue-main);
    }
    footer {
        background-color: var(--color-blue-main);
        color: #ffffff;
    }

    section.intro h1, section.intro p {
        color: #000000;
    }

    .button.style1 {
        color: #ffffff;
        background-color: var(--color-blue-main);
    }

    .button.style2 {
        color: #ffffff;
        background-color: var(--color-blue-dark);
    }

    .button.style3 {
        color: #000000;
        background-color: var(--color-green-main);
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box {
            background: linear-gradient(160deg, rgba(255, 255, 255, 1) 50%, rgba(255, 252, 255, 0.5) 60%, rgba(255, 255, 255, 0) 65%);
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background-color: #ffffff;
        }
    }
}

@media (prefers-color-scheme: dark) {
    body {
        color: #ffffff;
        background-color: #000000;
    }

    a, a:focus, .loader i {
        color: #ffffff;
    }

    header {
        background-color: #000000;
    }

    header svg.bow {
        fill: var(--color-blue-darker)
    }
    section {
        background-color: var(--color-blue-darker);
        color: #ffffff;
    }
    section svg.bow {
        fill: var(--color-blue-dark);
    }

    section.intro {
        background-image: url('/img/backgrounds/intro-it-modernisierung-digitalisierung.dark.webp');
    }

    section.intro svg.bow {
        fill: var(--color-blue-darker);
    }
    section.block1 {
        background-color: var(--color-blue-darker);
        color: #ffffff;
    }
    section.block1 ul.expertise li {
        background-color: var(--color-blue-darker);
    }

    section.block1 svg.bow {
        fill: var(--color-green-dark);
    }
    section.block2 {
        background-color: var(--color-green-dark);
        color: #ffffff;
    }

    section.block2 svg.bow {
        fill: var(--color-turquoise-darker);
    }
    section.block3 {
        background-color: var(--color-turquoise-darker);
        color: #ffffff;
    }

    section.block3 svg.bow {
        fill: var(--color-blue-main);
    }
    section.block4 {
        background-color: var(--color-blue-main);
        color: #ffffff;
    }

    section.block4 svg.bow {
        fill: var(--color-blue-dark);
    }
    footer {
        background-color: var(--color-blue-dark);
        color: #ffffff;
    }

    .button.style1 {
        color: #ffffff;
        background-color: var(--color-blue-light);
    }

    .button.style2 {
        color: #ffffff;
        background-color: var(--color-blue-main);
    }

    .button.style3 {
        color: #000000;
        background-color: var(--color-green-light);
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box {
            background: linear-gradient(160deg, rgba(0, 94, 178, 1) 50%, rgba(0, 94, 178, 0.5) 60%, rgba(0, 94, 178, 0) 65%);
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background-color: var(--color-blue-main);
        }
    }
}