@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);
    }

    .blogteaser-card {
        background-color: #ffffff;
        box-shadow: 0 4px 20px rgba(48, 12, 31, .16), inset 0 0 0 1px rgba(48, 12, 31, .1);
    }

    .blogteaser-card:hover {
        box-shadow: 0 16px 40px rgba(201, 33, 130, .3), inset 0 0 0 1px rgba(201, 33, 130, .35);
    }

    .blogteaser-meta, .blogteaser-stats {
        color: var(--grey-main);
    }

    .blogteaser-category {
        background-color: var(--purple-main);
        color: #ffffff;
    }

    .blogteaser-body h4 {
        color: var(--purple-dark);
    }

    .blogteaser-card:hover .blogteaser-body h4, .blogteaser-more {
        color: var(--purple-main);
    }

    .blogteaser-body p {
        color: var(--grey-dark);
    }

    .techmarquee-track > div {
        color: var(--turquoise-dark);
    }
}

@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, .logomarquee {
        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);
    }

    .blogteaser-card {
        background-color: #000000;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 155, 236, .3);
    }

    .blogteaser-card:hover {
        box-shadow: 0 16px 40px rgba(0, 155, 236, .35), inset 0 0 0 1px rgba(0, 155, 236, .7);
    }

    .blogteaser-meta, .blogteaser-stats {
        color: var(--grey-bright);
    }

    .blogteaser-category {
        background-color: var(--turquoise-dark);
        color: #ffffff;
    }

    .blogteaser-body h4 {
        color: var(--turquoise-main);
    }

    .blogteaser-card:hover .blogteaser-body h4, .blogteaser-more {
        color: var(--turquoise-bright);
    }

    .blogteaser-body p {
        color: var(--grey-bright);
    }

    .techmarquee-track > div {
        color: var(--turquoise-bright);
    }

    .blogteaser-media img:not(.blogteaser-fallback) {
        filter: saturate(150%) brightness(.85);
    }

    .blogteaser-card:hover .blogteaser-media img:not(.blogteaser-fallback) {
        filter: saturate(150%) brightness(1);
    }

    /* Der Retro-Effekt gehört im dunklen Schema zum Standard. Die Regeln dazu stehen in
       der style.main.css, damit der Retro-Modus (Kickstart) sie auch im hellen Schema
       einschalten kann. Auf mobilen Geräten verzichten wir darauf: zu viel Akku. */
    @media (min-width: 992px) {
        .retro {
            display: flex;
        }
    }
}