@font-face {
	    font-family: 'schrift_normal';
	    src: url("fonts/OCRAEXT.TTF") format("truetype");
	}
	p {
		line-height: 1.0;
		margin: 0px;
		padding: 0px;
	}
	.ueberschrift {
		font-size: 50px;
		margin: 10px;
		line-height: 1.0;
	}
	html {
		margin-bottom: 25px;
	}
	body
	{
		width: 100%;
		height: 100%;
		vertical-align: middle;
		background-image: url("design/sonnenaufgang_pv.jpg");
		background-color: #ececec;
		height: 300px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		padding: 50px 0px 50px 0px;
		margin: 0;
		font-family: 'schrift_normal';
		box-sizing: border-box;
	}
	.banner {
		display: block;
		width: 100%;
		height: auto;
		padding: 20px;
		margin: 0px 0px 30px 0px;
		background-color: rgba(255, 255, 255, 0.5);
		box-sizing: border-box;
	}
	.kachel {
		display: inline-table;
		width: 400px;
		border: 4px #e4e4e4 solid;
		border-radius: 10px 0px 10px 0px;
		padding: 10px;
		margin: 10px 25px 10px 25px;
		vertical-align: top;
		background-color: #fff;
		box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.5);
		box-sizing: border-box;
	}
	#erzeugungGesamt,
	#aktuelleLeistung {
		height: 280px;
	}
	.chart {
		display: inline-table !important;
		width: 850px;
		max-width: 850px;
		height: 280px;
		max-height: 280px;
		border: 4px #e4e4e4 solid;
		border-radius: 10px 0px 10px 0px;
		padding: 0px;
		margin: 10px 25px 10px 25px;
		vertical-align: top;
		background-color: #fff;
		box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.5);
		box-sizing: border-box;
	}

	.gauge {
		position: relative;
		border-radius: 50%/100% 100% 0 0;
		background-color: var(--color, #a22);
		overflow: hidden;
	}
	.gauge:before{
		content: "";
		display: block;
		padding-top: 50%;   /* ratio of 2:1*/
	}
	.gauge .chart {
	  overflow: hidden;
	}
	.gauge .mask {
	  position: absolute;
	  left: 20%;
	  right: 20%;
	  bottom: 0;
	  top: 40%;
	  background-color: #fff;
	  border-radius: 50%/100% 100% 0 0;
	}
	
	.gauge .percentage {
		position:  absolute;
		top: -1px;
		left: -1px;
		bottom: 0;
		right: -1px;
		background-color: var(--background, #aaa);
		transform:rotate(var(--rotation)); 
		transform-origin: bottom center; 
		transition-duration: 600;
	}
	.gauge:hover {
	  --rotation: 100deg;
	}
	.gauge .value {
	  position:absolute; bottom:0%; left:0;   
	  width:100%; 
	  text-align: center;
	}
	
	.gauge .min {
	  position:absolute; 
	  bottom:0; left:5%;   
	}
	.gauge .max {
	  position:absolute; 
	  bottom:0; right:5%;
	 }
	 .wetter {
		display: block;
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: auto;
		height: auto;
		border: 4px #e4e4e4 solid;
		border-radius: 10px;
		padding: 0px;
		margin: 10px 25px 10px 25px;
		vertical-align: top;
		background-color: #fff;
		box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.5);
		box-sizing: border-box;
	 }

	@media screen and (max-width: 768px)
	{
		body {
			padding: 20px 0px 20px 0px;	
		}
		.ueberschrift {
			font-size: 30px;
		}
		.banner {
			margin: 0px 0px 30px 0px;
		}
		.kachel, .chart {
			display: block;
			margin-bottom: 30px;
			width: calc(100% - 50px);
			max-width: calc(100% - 50px);
		}
		#erzeugungGesamt,
		#aktuelleLeistung {
			height: auto;
		}
		.chart {
			display: none;
			height: auto;
		}
		.wetter {
			position: static;
		}
		br {
			display: none;
		}
	}