body {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background: black;
 	color: white;
 	font-family: 'Helvetica Neue', 'San Francisco', sans-serif;
	background:
	radial-gradient(black 15%, transparent 16%) 0 0,
	radial-gradient(black 15%, transparent 16%) 8px 8px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px; 	
	margin: 0px;
	
	@media (min-width: 1200px) {
		display: block;	
	}
}




body.loading .wrapper {
	opacity: 0.5;
	pointer-events: none;
}

.webcams {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.webcams img {
	max-width: 315px;
}

.title {
	background: #1a7a88;
	text-transform: uppercase;
	font-weight: 800;
	text-align: center;
	letter-spacing: 2px;
	margin-bottom: 20px;
	margin-left: -20px;
	width: calc(100% + 40px);
	margin-top: -20px;
	line-height: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.wrapper {
	background: rgba(255,255,255,0.2);
	background: #333333;
	padding: 20px;
	min-width: 320px;
	max-width: 640px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	overflow: hidden;
}

.temperaturedial {
	margin-top: 20px;
}

h1 {
	margin: 0px;
	margin-top: 20px;
	font-size: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	line-height: 30px; 
	margin-bottom: 20px;
	background: #197a87;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.unit {
	background: #434242;
	padding-bottom: 20px;
}

h2 {
	margin: 0px;
	font-size: 16px;
	line-height: 30px; 
	margin-bottom: 10px;
	margin-top: 10px;
}

.unit {
	margin-bottom: 40px;
	text-align: center;
}

.pumpSwitch,
.doorSwitch {
	width: 225px;
	border-radius: 10px;
	background: rgba(0,0,0,0.5);
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow:hidden;
	margin: 0 auto;
	margin-bottom: 20px;
}

.doorSwitch {
	width: 100%;
}

.doorSwitch > * {
	flex-basis: 33.333%;
	text-align: center;
	line-height: 40px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.doorSwitch > *.active {
	background: #6fc400;
}
.doorSwitch > *:nth-child(2).active {
	background: #e9594e;
}


.pumpSwitch > div {
	width: 75px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	padding: 5px;
} 

[data-value="EIN"] [data-state="on"] {
	background: #6fc400;
}
[data-value="AUS"] [data-state="off"] {
	background: #e9594e;
}
[data-state="auto"] {
	pointer-events: none;
	opacity: 0.2;
	
}

[data-pos="0"] [data-state="auto"],
[data-pos="1"] [data-state="auto"],
[data-pos="2"] [data-state="auto"],
[data-pos="3"] [data-state="auto"] {
	background: #2367a9;
	opacity: 1;
	pointer-events: all;
}

[data-pos="0"] [data-state="on"],
[data-pos="1"] [data-state="on"],
[data-pos="2"] [data-state="on"],
[data-pos="3"] [data-state="on"],
[data-pos="0"] [data-state="off"],
[data-pos="1"] [data-state="off"],
[data-pos="2"] [data-state="off"],
[data-pos="3"] [data-state="off"] {
	pointer-events: none;
	opacity: 0.5;
}

.status {
	margin-bottom: 15px;
}

.aussentemperatur,
.buffer,
.solar,
.eingang {
	text-align: center;
	margin-bottom: 20px;
	background: rgba(255,255,255,0.2);
	line-height: 30px;
	border-radius: 5px;
}


.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    display: block;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease opacity;
}

.loading .loader {
	opacity: 1;
}

.ping {
	background: #6fc401;
	border-radius: 100%;
	width: 12px;
	height: 12px;
	left: 15px;
	bottom: 15px;
	top: auto;
	position: fixed;
	opacity: 0;
	transition: 0.3s ease opacity;
}

.unit.protected {
}

.unit {
	position: relative;
}

.unit.flash {
  animation: blinker 0.3s ease;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.protectionpane {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 100;
	cursor: pointer;
}

.loadingsilent .ping {
	opacity: 1;	
}

.temperaturepane {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.temperaturepane > div {
	flex-grow: 1;
}

[data-temperature] {
	background: rgba(92, 92, 92, 1.000);
	width: 100px;
	margin: 0 auto;
	line-height: 30px;
	border-radius: 5px;
	font-weight: bold;
	margin-bottom: 10px;
}

[data-temperature-battery],
[data-temperature-updated] {
	font-size: 13px;
	line-height: 20px;
	opacity: 0.7;
}


.chartwrapper {
	height: 100px;
}

.smallchart {
	height: 20px !important;	
		
}

[zeroIsUndefined="true"] {
	margin-left: 20px;
	width: calc( 100% - 30px ) !important;
	background: #282828;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


HTML  CSS Result
EDIT ON
 /* globals */

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);
@import url(prefixes.css);

html {
  font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background-color: hsla(0,0%,90%,1);  
  background-image: linear-gradient(-45deg, hsla(0,0%,0%,0), hsla(0,0%,0%,.05) );
  background-size: 5px;
}



.reload {
	position: fixed;
	top: 20px;
	left: 20px;
	cursor: pointer;
	background: #1c7a88;
	padding: 5px 10px;
	border-radius: 3px;
	box-shadow: 0px 0px 25px rgba(0,0,0,0.4);
}

.hourselect {
	flex-basis: 100%;
	margin-bottom: 20px;

	display: grid; 
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
	  grid-template-rows: 1fr 1fr 1fr 1fr; 
	  gap: 0px 0px; 
	  grid-template-areas: 
		". . . . . ."
		". . . . . ."
		". . . . . ."
		". . . . . ."; 
	height: 213px;
	background: #545454;
	gap: 1px;
}

.hourselect .hour {
	box-sizing: border-box;
	flex-basis: calc(100% / 6);
	cursor: pointer;
	flex-wrap: wrap;
	display: flex;
	justify-content: center;
	align-content: center;
	background: #323232;
	transition: 0.3s ease all;
	opacity: 0.5;
}

.hourselect .hour span {
	transition: 0.3s ease all;
}

.hourselect .hour span:nth-child(1) {
	flex-basis: 100%;
	font-size: 12px;
}
.hourselect .hour span:nth-child(1):after {
	content: 'C°';
	font-size: 8px;
	margin-left: 3px;
}

.hourselect .hour span:nth-child(2) {
	font-size: 15px;
}

.hourselect .hour.active {
	background: #2267a8;
	opacity: 1;
}

.hourselect .hour.current {
	border: 1px solid #559900;
	opacity: 1;
}

.hourselect .hour.active span:nth-child(1),
.hourselect .hour.current span:nth-child(1)  {
	font-size: 20px;
}
/* .hourselect .hour.active span:nth-child(1):after {
	font-size: 18px;
} */

.hourselect .hour.active span:nth-child(2),
.hourselect .hour.current span:nth-child(2) {
	font-size: 10px;
}

.putin {
	position: fixed;
	bottom: -300px;
	right: calc( 50% - 150px);
	width: 300px;
	transition: 1s ease all;
	pointer-events: none;
}

.putin.active {
	bottom: -50px;
}

.temperaturepane canvas {
	opacity: 0.33;
	transition: 0.3s ease opacity;
	pointer-events: none;
}

.temperaturepane:has(.hour.active) canvas {
	opacity: 1;
	pointer-events: all;
}
.temperaturepane input {
	outline: none;
}

.pushButton {
	text-align: center; 
	border-radius: 5px;
	line-height: 30px;
	background: rgba(0,0,0,0.7);
	margin-bottom: 10px;
	cursor: pointer;
}