body {background:#f2f2f2;}


svg {
	--blue: #306f91;
	--green: #8db243;
	--red: #c32e04;
	--yellow: #dfac20;
	height: 600px;
	max-width: 100%;
		width:100vw;
}

	svg.level {
		height:370px;
		width:auto;
	}
circle,
line {
	r: 2px;
	fill: black;
	stroke: black;
}

circle {stroke-width:0;}
line {stroke-width:1;}
line.simple {stroke-width:4;fill:none;stroke:yellow;stroke-linecap:butt;}
	line.wide-1 {stroke-width:80;fill:none;stroke:url(#Gradient1);stroke-linecap:butt;}
		line.wide-2 {stroke-width:80;fill:none;stroke:url(#Gradient2);stroke-linecap:butt;}
		line.wide-3 {stroke-width:80;fill:none;stroke:white;stroke-linecap:butt;}
	line.small-1 {stroke-width:1;fill:none;stroke:black;stroke-linecap:butt;}
	
path {
	r: 5px;
	fill: none;
	stroke: var(--red);
	stroke-width: 3;
}

text {
	font-family: verdana;
	font-size: 10px;
}
.thermometer {
	width: 200px;
	margin: 0 auto;
	position: relative;
	box-sizing:border-box;
}

.thermometer-base,
.thermometer-body {
	background-color: #ededfa;
	border: 15px solid #d8d9e8;
	margin: 0;
}

.thermometer-base,
.thermometer-base-fill {
	margin: 0 auto;
	border-radius: 50%;
	z-index: 0;
}

.thermometer-base {
	height: 150px;
	width: 150px;
}

.thermometer-base::before {
	content: "";
	background-color: #db1d1d;
	height: 15px;
	width: 40px;
	position: absolute;
	left: 80px;
	z-index: 1;
}

.thermometer-base-fill {
	background-color: #db1d1d;
	height: 98px;
	width: 98px;
	position: relative;
	top: 11px;
	transition: top 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.thermometer-body,
.thermometer-body-fill {
	margin: 0 auto;
	border-radius: 50px 50px 0 0;
	z-index: 1;
}

.thermometer-body {
	height: 325px;
	width: 90px;
	border-bottom: 0;
	position: relative;
	bottom: -23px;
	overflow: hidden;
}

.thermometer-body-fill {
	background-color: #db1d1d;
	height: 320px;
	width: 40px;
	position: relative;
	top: 160px; /* lowest value is 11px - highest value is 300px */
	transition: top 0.5s linear;
}

.controls {
	text-align: center;
	position: absolute;
	top: 38px;
	right: -40px;
	overflow: visible;
}

.btn {
	color: #2d2930;
	background-color: #dbdbdb;
	padding: 5px;
	height: 45px;
	width: 45px;
	margin-bottom: 30px;
	border-radius: 50%;
	border: none;
	filter: drop-shadow(3px 3px 4px #333333);
	box-shadow: inset 3px 3px 5px #fff;
	position: relative;
	display: block;
	cursor: pointer;
	/*transition: transform 0.2s linear;*/
}

.btn:hover {
	/*transform: scale(1.15);*/
}

i {
	pointer-events: none;
}

.very-hot-bg {
	background:#fff;
	/*background: rgb(232, 154, 30);
	background: linear-gradient(
		0deg,
		rgba(232, 154, 30, 1) 0%,
		rgba(232, 141, 30, 1) 35%,
		rgba(232, 50, 30, 1) 100%
	);*/
}

.hot-bg {
	background:#fff;
	/*background: rgb(229, 232, 30);
	background: linear-gradient(
		0deg,
		rgba(229, 232, 30, 1) 0%,
		rgba(232, 211, 30, 1) 35%,
		rgba(232, 154, 30, 1) 100%
	);*/
}

.warm-bg {
	background:#fff;
	/*background: rgb(30, 232, 52);
	background: linear-gradient(
		0deg,
		rgba(30, 232, 52, 1) 0%,
		rgba(151, 232, 30, 1) 35%,
		rgba(229, 232, 30, 1) 100%
	);*/
}

.cold-bg {
	background:#fff;
	/*background: rgb(30, 212, 232);
	background: linear-gradient(
		0deg,
		rgba(30, 212, 232, 1) 0%,
		rgba(30, 232, 130, 1) 35%,
		rgba(30, 232, 52, 1) 100%
	);*/
}

.very-cold-bg {
	background:#fff;

	/*background: rgb(120, 30, 232);
	background: linear-gradient(
		0deg,
		rgba(120, 30, 232, 1) 0%,
		rgba(30, 127, 232, 1) 35%,
		rgba(30, 212, 232, 1) 100%
	);*/
}

	.thermometer-legende {margin-top:4em;text-align:center;}
	.level-legende {text-align:center;}
	.grafik-legende {font-size:0.8em;padding-left:4em;margin-bottom:5em;}
	.legende-emission, .legende-verlauf-ziel,.legende-verlauf-start,.legende-verlauf-weiter {margin-right:2em;}
	.legende-emission::before {content:'';width:20px;height:4px;background:yellow;display:inline-block;margin-right:0.5em;margin-bottom:0.2em;}
	.legende-verlauf-ziel::before {content:'';width:20px;height:4px;background:maroon;display:inline-block;margin-right:0.5em;margin-bottom:0.2em;}
	.legende-verlauf-start::before {content:'';width:20px;height:4px;background:#8db243;display:inline-block;margin-right:0.5em;margin-bottom:0.2em;}
	.legende-verlauf-weiter::before {content:'';width:20px;height:4px;background:#c32e04;display:inline-block;margin-right:0.5em;margin-bottom:0.2em;}
	.level-high:before {content:'';width:10px;height:10px;background-color:#f82c00;display:inline-block;margin-right:5px}
	.level-medium:before {content:'';width:10px;height:10px;background-color:yellow;display:inline-block;margin-right:5px}
	.level-low:before {content:'';width:8px;height:8px;background-color:white;display:inline-block;margin-right:5px;border:0.5px solid black;}
	.level-legende-unten {margin-top:3em; margin-left:40%;}
	
	
.thermo-left {width:100%;}
	.thermo-right {margin-top:57px;}
	.thermo-left h2 {text-align:center;}
	.thermometer-skala {position:absolute;z-index:9999;height:400px}
	.thermo-skala {display:flex;justify-content:flex-end;margin-bottom:5em;}
	
	@media(min-width:1024px){
		.thermo-block {display:flex;overflow:hidden;justify-content:space-between;max-width: 1140px;margin: auto;}
		.grafik-legende {display:flex;}
	}