@media (prefers-color-scheme: dark) {
    footer,
    .footer-content a,
    main,
    h1,
    .Linkaufzaehlung a,
    main a,
    .formularAllgemein,
    .VerweisHome a,
    .navbar a,
    .dropbtn,
    .dropdown-menu a,
    .inputsenden {
        color: var(--gruendarkmode);
    }

    body,
    header,
    .dropdown:hover .dropdown-menu,
    footer,
    #backToTop,
    .inputsenden,
    .dots {
        background-color: var(--backgrounddarkmode);
    }

    .logoheader,
    .logofooter,
    #logokontakt,
    #logostartkarussel {
        filter: invert(0.92) sepia(0.6);
        border-radius: 3.4em;
    }

    .dropdown:hover .dropbtn {
        background-color: #dad6d64d;
    }

    .inputtext, .inputnumber, .inputtextfeld {
        background-color: var(--backgrounddarkmode);
        color: var(--gruendarkmode);
        border: thin solid var(--akzentfarbeFest);
    }

    .slide {
        border: thin solid var(--backgrounddarkmode);
    }

    .map {
        filter: brightness(3);
    }

    #geschenkgutschein {
        filter: invert(0.91);
    }

    .prev,
    .next {
        background-color: rgba(145, 145, 145, 0.534);
    }

    #popup {
        background-color: var(--backgroundlightmode);
        color: var(--gruenlightmode);
    }

    .flex, .testimonial, .preistabelletd {
        background: rgb(41, 40, 40);
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button,
    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    input[type="checkbox"] {
        cursor: pointer;
    }
}

@media (prefers-color-scheme: light) {

    footer,
    .footer-content a,
    main,
    h1,
    .Linkaufzaehlung a,
    main a,
    .formularAllgemein,
    .VerweisHome a,
    .navbar a,
    .dropbtn,
    .dropdown-menu a {
        color: var(--gruenlightmode);
    }

    .logoheader,
    .logofooter,
    #logokontakt,
    #logostartkarussel {
        mix-blend-mode: multiply;
    }

    body,
    header,
    .dropdown:hover .dropdown-menu,
    #backToTop, .dots {
        background-color: var(--backgroundlightmode);
    }

    .dropdown:hover .dropbtn {
        background-color: #dad6d6;
    }

    .inputtext, .inputnumber, .inputtextfeld {
        background-color: var(--backgroundlightmode);
        border: thin solid var(--akzentfarbeFest);
        color: var(--gruenlightmode);
    }

    .inputsenden, #popup {
        background-color: var(--backgroundlightmode);
        color: var(--gruenlightmode);
    }

    .slide {
        border: thin solid var(--backgroundlightmode);
    }

    .prev,
    .next {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .flex, .testimonial, .preistabelletd {
        background: rgb(240, 240, 240);
    }
}