:root {
    color-scheme: light; /* grundsätzlich light */
}

.darkTheme {
    --brightText: #ccc;
    --brightInput: rgb(255,255,255,0.1);
    --darkInput: rgb(0,0,0,0.3);
    --darkThemeBG: #1d1d1f;
    --mediumDarkThemeBG: #2e2e33;
    --darkTransparent: rgba( 0,0,0, 0.3);
    --mediumDarkTransparent: rgba( var(--rgbSL1), 0.3);
    --brightTransparent: rgba(255,255,255, 0.2);
    --warningBG: rgba(222,0,0,0.2);
    color-scheme: light dark; /* bei aktiviertem Darkmode dann beides erlauben, damit light-dark() in CSS funktioniert */
}

    html.darkTheme, body.darkTheme {
        color: var(--brightText);
        
    }

    html.darkTheme {
        background-image: url("img/bg_dark.png");
        background-color: var(--darkThemeBG);
    }

.darkTheme .sectionBG {
    background-color: var(--darkTransparent);
    color: var(--brightText);
    outline: 2px solid var(--mediumTransparent);
    transition: var(--transitionDurationLong, 1s) color;
}
    .darkTheme .sectionBG:hover {
        /*outline-color: var(--mds-bright-transparent);*/
        color: var(--veryBright);
    }

.darkTheme .w3-modal-content, .darkTheme .w3-dropdown-content {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}

.darkTheme .mds-button-base {
    color: var(--brightText);
    /*background-color: var(--mediumTransparent);*/
}
.darkTheme .mds-button-base:hover {
    color: var(--veryBright);
    /*background-color: var(--mediumTransparent);*/
}
    .darkTheme .mds-button-base.secondaryBG:hover,
    .darkTheme .mds-button-base.tertiaryBG:hover {
        color: var(--currentTextcolor);
        /*background-color: var(--mediumTransparent);*/
    }
.darkTheme .w3-white{
    background-color:var(--bright);
}

/*.darkTheme .w3-card, .darkTheme .w3-card-2 {
    box-shadow: 0 2px 5px 0 var(--brightTransparent),0 2px 10px 0 var(--brightTransparent);
}*/

.darkTheme #topBar_layout {
    box-shadow: 0px -4px 10px 2px var(--darkTransparent), 0px 1px var(--medium);
}

    .darkTheme #topBar_layout.w3-white  {
    background-color: var(--mediumDarkThemeBG);
    color: var(--brightText);
}


.darkTheme #mySidebar.w3-white, .darkTheme #sidebar.w3-white {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}

.darkTheme .w3-sidebar .userInfoContainer:hover,
.darkTheme .w3-sidebar .w3-bar-item:hover {
    color:var(--veryBright);
}

    
    .w3-sidebar .userInfoContainer:hover .profilePicContainer img.profilePic {
        outline-color: var(--mediumTransparent);
    }

.darkTheme h1, .darkTheme h2, .darkTheme h3, .darkTheme h4, .darkTheme h5, .darkTheme h6 {
    text-shadow: 0.7px 0.8px var(--mediumBrightTransparent);
}

.darkTheme #sidebar #linkSection .linkItem > .subEntry {
    color: var(--accentThemeD1);
}
/* GANZ WICHTIG: zentrale Akzentfarben, Sekundär und Tertiär!*/
/* Reihenfolge beachten: untere sind "wichtiger" wenn gleichzeitig in Benutzung*/
.darkTheme .tertiaryBG {
    background-color: var(--tertiary);
    color: var(--tertiaryText);
    --currentBackgroundColor: var(--tertiary);
    --currentTextcolor: var(--tertiaryText);
}

.darkTheme .tertiaryTXT {
    color: var(--tertiary);
}

.darkTheme .secondaryBG {
    background-color: var(--secondary);
    color: var(--secondaryText);
    --currentBackgroundColor: var(--secondary);
    --currentTextcolor: var(--secondaryText);
}

.darkTheme .secondaryTXT {
    color: var(--secondary);
}

.darkTheme input, .darkTheme .w3-input, .darkTheme textarea {
    background-color: var(--brightInput);
    color:white;
}

.darkTheme .accentBG, .darkTheme .primaryBG {
    background-color: var(--primary);
    color: var(--primaryText);
    --currentBackgroundColor: var(--primary);
    --currentTextcolor: var(--primaryText);
}

.darkTheme .accentOutline {
    outline: 2px solid var(--primary);
}

.darkTheme .accentTXT, .darkTheme .primaryTXT {
    color: var(--primary);
}

.darkTheme .brightTransparentBG {
    background-color: var(--darkTransparent);
}
.darkTheme .brightOpaqueBG {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}

.darkTheme .mediumBrightTransparentBG {
    background-color: var(--mediumBrightTransparent);
}

.darkTheme .mediumTransparentBG {
    background-color: var(--mediumTransparent);
}

.darkTheme .darkTransparentBG {
    /*background-color: var(--brightTransparent);*/
}

.darkTheme .warningBG {
    color: var(--w3PaleRed);
    background-color: rgba(200,0,0,0.3) !important;
}

.darkTheme .border {
    --borderColor: var(--mediumDark);
}

.darkTheme *:is(.mds-hover-dark, .hoverDark):hover {
    --hoverColor: var(--mediumDarkTransparent);
    box-shadow: inset 0 0 0 500px var(--mediumDarkTransparent);
}

.darkTheme *:is(.mds-hover-bright, .hoverBright):hover {
    /*box-shadow: inset 0 0 0 500px var(--darkTransparent);*/
}