.cd-kreis {
	position:relative;
	padding-bottom:100%;
	border-radius:100%;
	overflow:hidden;
	color:#fff;
	background-color:#aaa;
}
.cd-kreis .-content,
.cd-kreis .-content .-day,
.cd-kreis .-content .-night,
.cd-kreis .-bg,
.cd-kreis .-bg .-day,
.cd-kreis .-bg .-night {
	position:absolute;
	top:0; left:0; bottom:0; right:0;
	background-size:cover;
}

.cd-kreis > .-bg > .-night { background-image:url(/qg/cms.layout.custom.8/pub/img/Nacht.jpg); }
.cd-kreis > .-bg > .-day   { background-image:url(/qg/cms.layout.custom.8/pub/img/Tag.jpg); }


.cd-kreis .-content > * {
	padding:3% 7%;
	text-align:center;
}
.cd-kreis .-title {
	padding:0 25%;
	font-size:1.8rem;
	hyphens:manual;
}
@media (max-width: 880px) {
	.cd-kreis .-title {
		font-size:3vw;
	}
}

.cd-kreis .-content > .-day {
	opacity: var(--day);
}
.cd-kreis .-content > .-night {
	opacity: calc(1 - var(--day));
}
.cd-kreis .-bg {
	xtransition: .7s;
	transform:rotate(calc(var(--day) * 180deg));
}
.cd-kreis .-bg .-day {
	xtransition: .7s;
	opacity: var(--day);
	transform:rotate(189deg);
}
.animationCont {
	width:48%;
	margin:auto;
	margin-top:7%;
	position:relative;
}

@media (max-width: 700px) {
	.cd-kreis > .-bg > .-night { background-image:url(/qg/cms.layout.custom.8/pub/img/Nacht_Mobile.png); }
	.cd-kreis > .-bg > .-day   { background-image:url(/qg/cms.layout.custom.8/pub/img/Tag_Mobile.png); }
	.animationCont {
		width:80%;
		margin-top:5%;
	}
}

/* animation */
@keyframes lineMove {
  0% { stroke-dashoffset: 11.33; }
  100% { stroke-dashoffset: 0; }
}
.-night line {
	fill:none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #74a7ce;
	stroke-width: 2.83;
	stroke-dasharray: 2.83 8.5;
	animation: lineMove 1s infinite linear;
}
.-night polygon { fill:#74a7ce; }





.-m-cms-cont-cd-effekt .-rangeCont {
	--u1-Items-width: 20rem;
	justify-content:space-between;
}
.-m-cms-cont-cd-effekt .-rangeCont h2 {
	font-size:1.8rem;
}
@media (max-width: 750px) {
	.-m-cms-cont-cd-effekt .-rangeCont > :nth-child(2) { /* contains range */
		order:3;
		flex:1 1 100%;
	}
}
@media (max-width: 420px) {
	.-m-cms-cont-cd-effekt .-rangeCont h2 {
		font-size:1.5rem;
	}
	.-m-cms-cont-cd-effekt .-rangeCont p {
		font-size:.9rem;
	}
}
@media (max-width: 350px) { .-m-cms-cont-cd-effekt .-rangeCont p { font-size:.8rem; } }


.-m-cms-cont-cd-effekt .-range::-webkit-slider-thumb {
	box-sizing: border-box;
	width: 3em;
	height: 3em;
	background: #fff;
	border-radius: 100%;
	cursor: pointer;
	margin-top: -1.3em;
	-webkit-appearance: none;
	box-shadow:0 0 1rem #0008;
	outline:none;
	border:none;
	background-image:url(/qg/cms.layout.custom.8/pub/img/Mond.svg);
	background-repeat:no-repeat;
	background-size:60%;
	background-position:center;
}
.-m-cms-cont-cd-effekt .-range::-moz-range-thumb {
	box-sizing: border-box;
	width: 3em;
	height: 3em;
	background: #fff;
	border-radius: 100%;
	cursor: pointer;
	box-shadow:0 0 1rem #0008;
	outline:none;
	border:none;
	background-image:url(/qg/cms.layout.custom.8/pub/img/Mond.svg);
	background-repeat:no-repeat;
	background-size:60%;
	background-position:center;
}
.-m-cms-cont-cd-effekt.-day .-range::-webkit-slider-thumb {
	background-image:url(/qg/cms.layout.custom.8/pub/img/Sonne.svg);
	background-size:70%;
}
.-m-cms-cont-cd-effekt.-day .-range::-moz-range-thumb {
	background-image:url(/qg/cms.layout.custom.8/pub/img/Sonne.svg);
	background-size:70%;
}




.-m-cms-cont-cd-effekt .-range::-webkit-slider-runnable-track {
	background: var(--color-text);
	background-image: linear-gradient(to right, var(--color-text), var(--color) );
	border:none;
}

.-m-cms-cont-cd-effekt .-range::-moz-range-track {
	background: var(--color-text);
	background-image: linear-gradient(to right, var(--color-text), var(--color) );
	border:none;
}