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

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

    a:hover {
        color: var(--color-blue-main);
    }

    span.context {
        color: #000000;
        background-color: var(--color-orange-medium);
    }

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

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

    .row.style3, .button.style3 {
        color: #000000;
        background-color: var(--color-orange-medium);
    }

    section.intro h3, section.intro p {
        color: #000000
    }

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

    section.service {
        background-image: url('/img/backgrounds/service-hydraulikschlauch-konfektion.light.webp');
        color: #ffffff !important;
        text-shadow: none !important;
    }
    
    section.contact {
        background-image: url('/img/backgrounds/schlaucharmaturen.light.webp');
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box {
            background: radial-gradient(circle, #ffffff, #ffffff70, #f1b34680, #ffffff50);
        }

        section.service .box {
            background: radial-gradient(circle, #b23d1d9f, #f1b3469f);
        }

        section.contact .box {
            background: radial-gradient(circle, #ffffffff, #ffffff50);
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background: radial-gradient(circle, #ffffff, #ffffffc9, #f1b346c9, #ffffffc9);
        }

        section.service .box {
            background: radial-gradient(circle, #f1b346ff, #b23d1dc9);
        }

        section.contact .box {
            background: radial-gradient(circle, #ffffffff, #ffffffc9);
        }
    }

}

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

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

    a:hover {
        color: var(--color-blue-light);
    }

    span.context {
        color: #ffffff;
        background-color: var(--color-orange-dark);
    }

    .button[class*="style"] {
        border: 1px solid #ffffff20;
    }
    
    .row.style1, .button.style1 {
        color: #ffffff;
        background-color: var(--color-blue-dark);
    }

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

    .row.style3, .button.style3 {
        color: #ffffff;
        background-color: var(--color-orange-dark);
    }

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

    section.service {
        background-image: url('/img/backgrounds/service-hydraulikschlauch-konfektion.dark.webp');
    }

    section.contact {
        background-image: url('/img/backgrounds/schlaucharmaturen.dark.webp');
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box {
            background: radial-gradient(circle, rgba(7, 74, 129, 0.94), #299fff36 27.31%, rgba(27, 118, 191, 1) 62.61%, #074a81);
        }

        section.service .box {
            background: radial-gradient(circle, #f1b34650, #b23d1dff);
        }

        section.contact .box {
            background: radial-gradient(circle, #074a81ff, #074a8150);
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background: radial-gradient(circle, rgba(7, 74, 129, 0.94), #299fffc9 27.31%, rgba(27, 118, 191, 1) 62.61%, #074a81);
        }

        section.service .box {
            background: radial-gradient(circle, #f1b346c9, #b23d1dff);
        }

        section.contact .box {
            background: radial-gradient(circle, #074a81ff, #074a81c9);
        }
    }
}