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

    #app > .loader {
        background-color: var(--purple-dark);
    }

    h1, h2 {
        color: var(--purple-main);
    }

    h3 {
        color: var(--purple-main)
    }

    h4 {
        color: #000000;
    }

    h5 {
        color: var(--grey-main);
    }

    p, main a, main ul {
        color: #000000;
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        header .logo, nav.navbar {
            backdrop-filter: saturate(5000%) blur(15px);
            -webkit-backdrop-filter: saturate(5000%) blur(15px);
        }

        section .title.sticky {
            backdrop-filter: saturate(5000%) blur(15px);
            -webkit-backdrop-filter: saturate(5000%) blur(15px);
        }

        header .logo {
            background-image: url("/img/backgrounds/header.purple.backdrop.png");
        }

        nav.navbar {
            background-image: url('/img/backgrounds/nav.purple.backdrop.png');
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        header .logo {
            background-image: url("/img/backgrounds/header.purple.png");
        }

        nav.navbar {
            background-image: url('/img/backgrounds/nav.purple.png');
        }
    }

    header .postlogo {
        background-image: url("/img/backgrounds/postlogo.light.png");
    }

    nav.navbar .nav-link {
        color: #ffffff;
        text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
    }

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

    section.intro i {
        color: var(--purple-main);
    }

    section .opener .title.sticky {
        background-color: rgb(1 66 98 / 0.5) /* Entspricht --turquoise-dark mit Transparenz */
    }

    section#network h3 {
        color: var(--grey-main);
    }
    
    section#development h3 {
        color: var(--turquoise-dark);
    }

    section#design h3 {
        color: var(--purple-dark);
    }

    section#design .opener {
        background-image: url("/img/backgrounds/section-ui-ux-design-grafik-stil.light.jpg");
    }

    section#news h3, section#sound h3, section#text h3 {
        color: #000000
    }

    .prefooter {
        background-image:url(/img/backgrounds/prefooter.light.png);
    }

    footer {
        background-image: url(/img/backgrounds/footer.light.png);
    }

    footer .row > div {
        border-color: var(--grey-bright) !important;
    }

    .prefooter a, footer a {
        color: var(--purple-dark);
    }
    .prefooter a:hover, footer a:hover {
        color: var(--purple-main);
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--grey-darker);
    }

    #app > .loader {
        background-color: var(--turquoise-dark)
    }

    img:not(.protected) {
        filter: saturate(150%);
    }

    h1, h2 {
        color: var(--purple-main);
    }

    h3 {
        color: var(--turquoise-main);
    }

    h4 {
        color: #ffffff;
    }

    h5 {
        color: var(--grey-main);
    }

    p, main a, main ul {
        color: #ffffff;
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        header .logo, nav.navbar {
            backdrop-filter: saturate(1500%) blur(15px);
            -webkit-backdrop-filter: saturate(1500%) blur(15px);
        }

        section .title.sticky {
            backdrop-filter: saturate(1500%) blur(15px);
            -webkit-backdrop-filter: saturate(1500%) blur(15px);
        }

        header .logo {
            background-image: url("/img/backgrounds/header.turquoise.backdrop.png");
        }

        nav.navbar {
            background-image: url('/img/backgrounds/nav.purple.backdrop.png');
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        header .logo {
            background-image: url("/img/backgrounds/header.turquoise.png");
        }

        nav.navbar {
            background-image: url('/img/backgrounds/nav.purple.png');
        }
    }

    header .postlogo {
        background-image: url("/img/backgrounds/postlogo.dark.png");
    }

    nav.navbar .nav-link {
        color: #ffffff;
    }

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

    section.intro i {
        color: var(--turquoise-main);
    }

    section .opener .title.sticky {
        background-color: rgb(152 28 96 / 0.5) /* Entspricht --purple-dark mit Transparenz */
    }

    section#network h3 {
        color: var(--grey-bright);
    }
    
    section#development h3 {
        color: var(--turquoise-bright)
    }

    section#design .opener {
        background-image: url("/img/backgrounds/section-ui-ux-design-grafik-stil.dark.jpg");
    }

    section#design h3 {
        color: var(--purple-bright);
    }

    section#news h3, section#sound h3, section#text h3 {
        color: #ffffff
    }

    .partner {
        filter: brightness(1.4);
        -webkit-filter: brightness(1.4);
    }

    .prefooter {
        background-image: url(/img/backgrounds/prefooter.dark.png);
    }

    footer {
        background-image: url(/img/backgrounds/footer.dark.png);
    }

    footer .row > div {
        border-color: var(--turquoise-main) !important;
    }

    .prefooter a, footer a {
        color: #ffffff;
    }
    .prefooter a:hover, footer a:hover {
        color: var(--turquoise-main);
    }

    /* Wir verzichten auf mobilen Geräten auf den Retro-Effekt, da er sehr viel Akku und Performance benötigt */
    @media (min-width: 992px) {
        .retro {
            top: 0;
            left: 0;
            position: fixed;
            pointer-events: none;
            display: flex;
            /* display: none */
        }

        .retro.noise {
            z-index: 2200;
            animation: grain 8s steps(10) infinite;
            background-image: url("/img/decoration/noise.png");
            height: 400%;
            left: -50%;
            top: -150%;
            width: 300%;
            background-size: auto;
            opacity: 0.2;
        }

        .retro.flicker, .retro.scanlines, .retro.scanline {
            height: 100%;
            width: 100%;
        }

        .retro.scanlines {
            z-index: 2300;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.03), rgba(0, 0, 255, 0.06));
            background-size: 100% 2px, 3px 100%;
        }

        .retro.flicker {
            z-index: 2400;
            background: rgba(9, 8, 8, 0.05);
            animation: flicker 0.05s infinite;
            animation-timing-function: linear;
        }

        .retro.scanline {
            z-index: 2 500;
            animation: scanline 15s linear infinite;
        }

        .retro.scanline::after {
            height: 5px;
            width: 100%;
            background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%);
            opacity: 0.5;
            pointer-events: none;
            content: '';
        }
    }
}