:root{
	--blackToWhiteFilter: invert(91%) sepia(70%) saturate(0%) hue-rotate(43deg) brightness(106%) contrast(120%);
	}

/*Umschalter*/
.darkmode-switch {
	display: inline-block;
	width: 40px;
	height: 23px;
	}

	.darkmode-switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.darkmode-switch .slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--colorButtonDarkmode);
		border-radius: 22px;
		}
		/*Knopf*/
		.darkmode-switch .slider:before {
			position: absolute;
			content: "";
			height: 16px;
			width: 16px;
			left: 4px;
			bottom: 4px;
			background-color: var(--backgroundHeader);
			-webkit-transition: .4s;
			transition: .4s;
			border-radius: 50%;
			z-index:1;
		}
	
	/*Icons*/
	.darkmode-switch:before,
	.darkmode-switch:after{
		content:"\F495";/*Mond*/
		font-family: var(--fontBootstrap);
		color:var(--colorFont);
		font-size: 13px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    left: 23.5px;
		top: 2px;
	    position: absolute;
	}

	/*is Darkmode*/
	.darkmode-switch input:checked + .slider {
		background-color: var(--colorButtonDarkmode);
		}
	.darkmode-switch input:focus + .slider {
		box-shadow: 0 0 1px var(--colorButtonDarkmode);
		}
	.darkmode-switch input:checked + .slider:before {
		-webkit-transform: translateX(17px);
		-ms-transform: translateX(17px);
		transform: translateX(17px);
	}
	
	.mb-darkmode .darkmode-switch .slider{
		background-color: var(--colorFont) !important;
		}
		.mb-darkmode .darkmode-switch .slider:before{
			background-color: var(--backgroundHeader);
			left: 20px;
		}
	/*Sonne*/	
	.mb-darkmode .darkmode-switch:after{
		content:"\F1D1";
		left: 4px;
		}