@media (prefers-color-scheme: light) {
    body, .accordion-button.collapsed, .accordion-item, .card-text {
        color: var(--black);
    }

    body, .accordion-button.collapsed, .accordion-item, nav#main {
        background-color: var(--white);
    }

    section:not(.intro) div > div > h3, section:not(.intro) div > div > h4 {
        color: var(--grey-grey-40);
    }

    section:not(.intro) div > div > h5, .misc-heading {
        color: var(--grey-bright-40);
    }

    #app > .loader {
        background-image: url('/img/loader.light.webp');
    }

    .toprounding::before {
        box-shadow: 0 -25px 0 0 var(--white);
    }

    ul.timeline i {
        background-color: var(--grey-dark-60);
        color: var(--orange-main);
    }

    a.button[class*="style"]:hover, button[class*="style"]:not(:disabled):hover {
        background-color: var(--grey-dark-60);
    }

    nav#main .nav-link:not([class*="style"]), nav#main .dropdown-menu a/*, nav#side .nav-link*/ {
        color: var(--grey-dark-60);
    }
    nav#main .nav-link.highlight, nav#main .dropdown-item.highlight {
        color: var(--orange-dark-40);
    }

/*    nav#side a:hover, nav#side a:focus {
        background-color: var(--white);
    }*/

    nav#main .dropdown-menu .dropdown-divider {
        border-top: 1px solid rgba(0,0,0,.25)
    }

    nav#main .dropdown-menu {
        border: 1px solid rgba(0,0,0,.25);
    }

    nav#main .dropdown-menu/*, section .row.sticky.translucent[class*='heading']*/ {
        background-color: var(--white-translucent-min);
    }

    /* Im Navigationsbereich verwendet wir einen anderen Hover-Effekt */
    nav#main a.button[class*="style"]:hover, nav#main button[class*="style"]:hover {
        border-color: var(--black) !important;
        color: var(--black);
        border-color: var(--black);
    }

    nav#main .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    }

    nav#side ul li.active {
        /*background: linear-gradient(270deg, rgb(165, 53, 0, 0.75) 0%, rgb(237 112 14) 6%, rgb(237 112 14) 60%, rgb(255, 0, 0, 0) 60%);*/
        background: linear-gradient(270deg, rgb(237 112 14) 60%, rgb(255, 0, 0, 0) 60%);
    }
    nav#side ul li {
        border-right: 5px solid var(--orange-bright-40);
    }
    nav#side ul li a {
        color: var(--orange-main);
    }
    nav#side ul li.active {
        border-right: 5px solid var(--orange-main);
    }

    section .infobox:nth-child(2) > div {
        background-color: color-mix(in srgb, var(--orange-main) 90%, var(--orange-dark-80));
    }
    section .infobox:nth-child(3) > div {
        background-color: color-mix(in srgb, var(--orange-main) 80%, var(--orange-dark-80));
    }
    section .infobox:nth-child(4) > div {
        background-color: color-mix(in srgb, var(--orange-main) 70%, var(--orange-dark-80));
    }
    section .infobox:nth-child(5) > div {
        background-color: color-mix(in srgb, var(--orange-main) 60%, var(--orange-dark-80));
    }

    .infobox div[class*="separated"] {
        border-color: var(--white) !important;
    }

    .form-floating > .form-control:focus:not(:placeholder-shown) ~ label {
        color: var(--white);
    }
    .form-control {
        background-color: var(--white);
        color: var(--black);
    }
    .form-control:focus {
        color: var(--white);
    }
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .modal-content {
        background-color: var(--white-translucent-min);
    }

    .chat .message.sent .text {
        background-color: var(--grey-bright-50);
    }
    .chat .message.sent .text:before {
        border-right: 15px solid var(--grey-bright-50);
        border-top: 15px solid var(--grey-bright-50);
    }

    footer {
        background-color: var(--orange-main);
    }

    .card-header, .card-footer {
        background-color: var(--grey-bright-60)
    }

    .offcanvas .offcanvas-body, .toast .toast-body {
        color: var(--black);
        background-color: var(--white-translucent-min);
    }

    a.button.style1, button.style1 {
        border-color: var(--grey-bright-60) !important;
    }

    section[class*='style'] {
        border-left: 1px solid var(--grey-bright-90);
        border-right: 1px solid var(--grey-bright-90);
        background-color: var(--white);
    }
    section:not(.intro) .row[class*='heading'] {
        background: linear-gradient(0deg, var(--white-translucent) 0%, var(--white) 50%)
    }

    section.style1 {
       /* border-top: 1px solid var(--grey-bright-90);*/
    }
    /*section.style1 h1, */section.style1 h2 {
        color: var(--orange-main);
    }

    section.style2 {
        /*border-top: 10px solid var(--orange-main);*/
    }
    /*section.style2 h1,*/ section.style2 h2 {
        color: var(--orange-main);
    }

    section.style3 {
        /*border-top: 10px solid var(--grey-dark-30);*/
    }
    /*section.style3 h1,*/ section.style3 h2 {
        color: var(--grey-dark-30);
    }

    .containment[data-page$="standorte/mosbach"] .container.intro {
        background-image: url('/img/sites/mosbach.light.webp');
    }
    .containment[data-page$="standorte/tauberbischofsheim"] .container.intro {
        background-image: url('/img/sites/tauberbischofsheim.light.webp');
    }
    .containment[data-page$="standorte/koenigshofen"] .container.intro {
        background-image: url('/img/sites/koenigshofen.light.webp');
    }
    .containment[data-page$="standorte/michelstadt"] .container.intro {
        background-image: url('/img/sites/michelstadt.light.webp');
    }
    .containment[data-page$="standorte/eberbach"] .container.intro {
        background-image: url('/img/sites/eberbach.light.webp');
    }
    .containment[data-page$="standorte/obrigheim"] .container.intro {
        background-image: url('/img/sites/obrigheim.light.webp');
    }
    .containment[data-page$="standorte/holzarena"] .container.intro {
        background-image: url('/img/sites/holzarena.light.webp');
    }
}

@media (prefers-color-scheme: dark) {
    body, .accordion-button.collapsed, .accordion-item, .card-text {
        color: var(--white);
    }

    body, .accordion-button.collapsed, .accordion-item, nav#main {
        background-color: var(--grey-dark-90);
    }

    section:not(.intro) div > div > h3, section:not(.intro) div > div > h4 {
        color: var(--grey-bright-60);
    }
    section:not(.intro) div > div > h5, .misc-heading {
        color: var(--grey-bright-40);
    }
    
    #app > .loader {
        background-image: url('/img/loader.dark.webp');
    }

    .toprounding::before {
        box-shadow: 0 -25px 0 0 var(--grey-dark-90);
    }

    ul.timeline i {
        background-color: var(--grey-bright-90);
        color: var(--orange-main);
    }

    a.button[class*="style"]:hover, button[class*="style"]:hover:not(:disabled) {
        background-color: var(--black);
    }

    nav#main .nav-link:not([class*="style"]), nav#main .dropdown-menu a /*, nav#side .nav-link*/ {
        color: var(--white);
    }
    nav#main .nav-link.highlight, nav#main .dropdown-item.highlight {
        color: var(--orange-bright-40);
    }
    /*
        nav#side a:hover, nav#side a:focus {
        background-color: var(--black);
    }*/

    nav#main .dropdown-menu .dropdown-divider {
        border-top: 1px solid rgba(255,255,255,.5)
    }

    nav#main .dropdown-menu {
        border: 1px solid rgba(255,255,255,.5);
    }

    nav#main .dropdown-menu /*, section .row.sticky.translucent[class*='heading']*/ {
        background-color: var(--black-translucent);
    }

    /* Im Navigationsbereich verwendet wir einen anderen Hover-Effekt */
    nav#main a.button[class*="style"]:hover, nav#main button[class*="style"]:hover {
        border-color: var(--white) !important;
        color: var(--white);
        border-color: var(--white);
    }

    nav#main .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    }

    nav#side ul li.active {
        background: linear-gradient(270deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0) 50%);
    }
    nav#side ul li {
        border-right: 5px solid var(--orange-main);
    }    
    nav#side ul li a {
        color: var(--orange-main);
    }
    nav#side ul li.active {
        border-right: 5px solid var(--white);
    }

    .card-header, .card-footer {
        background-color: var(--grey-dark-30);
    }

    .offcanvas .offcanvas-body, .toast .toast-body {
        color: var(--white);
        background-color: var(--black-translucent);
    }

    section .infobox:nth-child(2) > div {
        background-color: color-mix(in srgb, var(--orange-main) 90%, transparent);
    }
    section .infobox:nth-child(3) > div {
        background-color: color-mix(in srgb, var(--orange-main) 80%, transparent);
    }
    section .infobox:nth-child(4) > div {
        background-color: color-mix(in srgb, var(--orange-main) 70%, transparent);
    }
    section .infobox:nth-child(5) > div {
        background-color: color-mix(in srgb, var(--orange-main) 60%, transparent);
    }

    .infobox div[class*="separated"] {
        border-color: var(--black) !important;
    }

    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        color: var(--orange-main);
    }
    .form-floating > .form-control:focus:not(:placeholder-shown) ~ label {
        color: var(--black);
    }
    .form-control {
        background-color: var(--grey-dark-90);
        color: var(--white);
    }
    .form-control:focus {
        color: var(--black);
    }
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .modal-content {
        background-color: var(--grey-dark-90-translucent);
    }

    .chat .message.sent .text {
        background-color: var(--grey-bright-60);
    }
    .chat .message.sent .text:before {
        border-right: 15px solid var(--grey-bright-60);
        border-top: 15px solid var(--grey-bright-60);
    }

    footer {
        background-color: var(--orange-main);
    }

    a.button.style5, button.style5 {
        border-color: var(--grey-main) !important;
    }

    section[class*='style'] {
        border-left: 1px solid var(--grey-dark-60);
        border-right: 1px solid var(--grey-dark-60);
        background-color: var(--grey-dark-90);
    }
    section:not(.intro) .row[class*='heading'] {
        background: linear-gradient(0deg, var(--grey-dark-90-translucent) 0%, var(--grey-dark-90) 50%)
    }

    section.style1 {
        /*border-top: 1px solid var(--grey-dark-60);*/
    }
    /*section.style1 h1,*/ section.style1 h2 {
        color: var(--orange-main);
    }

    section.style2 {
        /*border-top: 10px solid var(--orange-main);*/
    }
    /*section.style2 h1, */section.style2 h2 {
        color: var(--orange-main);
    }

    section.style3 {
        /*border-top: 10px solid var(--grey-dark-30);*/
    }
    /*section.style3 h1, */section.style3 h2 {
        color: var(--white);
    }

    .containment[data-page$="standorte/mosbach"] .container.intro {
        background-image: url('/img/sites/mosbach.dark.webp');
    }
    .containment[data-page$="standorte/tauberbischofsheim"] .container.intro {
        background-image: url('/img/sites/tauberbischofsheim.dark.webp');
    }
    .containment[data-page$="standorte/koenigshofen"] .container.intro {
        background-image: url('/img/sites/koenigshofen.dark.webp');
    }
    .containment[data-page$="standorte/michelstadt"] .container.intro {
        background-image: url('/img/sites/michelstadt.dark.webp');
    }
    .containment[data-page$="standorte/eberbach"] .container.intro {
        background-image: url('/img/sites/eberbach.dark.webp');
    }
    .containment[data-page$="standorte/obrigheim"] .container.intro {
        background-image: url('/img/sites/obrigheim.dark.webp');
    }
    .containment[data-page$="standorte/holzarena"] .container.intro {
        background-image: url('/img/sites/holzarena.dark.webp');
    }
}