@charset "utf-8";

:root {
	--wind-degrees-now: 0deg;
	--wind-degrees-peak: 0deg;
	--wind-speed-now: 0deg; /* 0° = 0m/s, 130° = 10m/s, 260° = 20m/s // Grün: 0 - 8m/s = 0° - 104°, Orange: 8 - 15m/s = 104° - 195°, Red: 15 - 20m/s = 195° - 260° // 0-20m/s >> v/20*260=deg */
	--wind-speed-peak: 0deg;
	
	--compass-inner: calc(var(--compass-width) - (var(--compass-border) * 2));
	/*--compass-inner-radius: calc(var(--compass-inner) / 2 - calc(var(--compass-inner) * 0.041667));*/
	--compass-inner-radius: calc(var(--compass-inner) / 2 - 7cqw);
	--compass-inner-text-offset: calc(var(--compass-inner-radius) * 0.88);
	
	--windspeed-inner: calc(var(--windspeed-width) - (var(--windspeed-border) * 2));
	--windspeed-inner-radius: calc(var(--windspeed-inner) / 2 - calc(var(--windspeed-inner) * 0.041667));
	--windspeed-inner-text-offset: calc(var(--windspeed-inner-radius) * 0.88);
}

/* Wind-Compass */

.wind-compass {
	position: relative;
	width: var(--compass-width);
	height: var(--compass-width);
	margin: 0 auto;
	border-radius: 100%;
	background-color: var(--compass-border-color);
	background-image: -webkit-linear-gradient(top, var(--compass-border-gradient-from-color), var(--compass-border-gradient-to-color));
}

.wind-compass > .compass-inner {
	position: relative;
	width: var(--compass-inner);
	height: var(--compass-inner);
	/*left: calc(var(--compass-border) - 3px);
	top: calc(var(--compass-border) - 3px);*/
	left: calc(var(--compass-border));
	top: calc(var(--compass-border));
	border: 3px solid var(--compass-separator-color);
	border-radius: 100%;
	background-color: var(--compass-inner-color);
}

.wind-compass > .compass-inner::after {
	content: "";
	position: absolute;
	width: calc(var(--compass-inner) * 0.041667);
	height: calc(var(--compass-inner) * 0.041667);
	border-radius: 100%;
	background-color: var(--compass-dot-color);
	left: calc(var(--compass-inner) / 2 - var(--compass-inner) * 0.041667 / 2);
	top: calc(var(--compass-inner) / 2 - var(--compass-inner) * 0.041667 / 2);
}

.wind-compass > .compass-inner > .main-arrow,
.wind-compass > .compass-inner > .second-arrow {
	position: absolute;
	height: 100%;
	width: calc(var(--compass-inner) * 0.041667 * 2);
	left: calc(var(--compass-inner) / 2 - calc(var(--compass-inner) * 0.041667));
	padding-top: 5px;
	
	box-sizing: border-box;
	transition: transform,-ms-transform,-webkit-transform 0.75s ease-out;
}

.wind-compass > .compass-inner > .main-arrow {
	-webkit-transform: rotate(var(--wind-degrees-now));
	-ms-transform: rotate(var(--wind-degrees-now));
	transform: rotate(var(--wind-degrees-now));
}

.wind-compass > .compass-inner > .second-arrow {
	width: calc(var(--compass-inner) * 0.027778 * 2) !important;
	left: calc(var(--compass-inner) / 2 - calc(var(--compass-inner) * 0.027778)) !important;
	
	-webkit-transform: rotate(var(--wind-degrees-peak));
	-ms-transform: rotate(var(--wind-degrees-peak));
	transform: rotate(var(--wind-degrees-peak));
}

.wind-compass > .compass-inner > .main-arrow > .arrow,
.wind-compass > .compass-inner > .second-arrow > .arrow {
	position: relative;
	width: 0;
	height: 0;
}

.wind-compass > .compass-inner > .main-arrow > .arrow:hover,
.wind-compass > .compass-inner > .second-arrow > .arrow:hover {
	/* show on arrow hover*/
}

.wind-compass > .compass-inner > .main-arrow > .arrow {
	border-left: calc(var(--compass-inner) * 0.041667) solid transparent;
	border-right: calc(var(--compass-inner) * 0.041667) solid transparent;
	border-bottom: calc(var(--compass-inner) * 0.55) solid var(--compass-arrow-now-color);
}

.wind-compass > .compass-inner > .second-arrow > .arrow {
	border-left: calc(var(--compass-inner) * 0.027778) solid transparent;
	border-right: calc(var(--compass-inner) * 0.027778) solid transparent;
	border-bottom: calc(var(--compass-inner) * 0.097222) solid var(--compass-arrow-peak-color);
}

.wind-compass > .compass-inner > .dirname {
	position: absolute;
	font-size: var(--compass-font-size);
	font-weight: bold;
	font-family: var(--compass-font-family);
	color: var(--compass-font-color);
}

.wind-compass > .compass-inner > .dirname.north {
	left: calc((var(--compass-inner-text-offset) * cos(0deg + 270deg)) + var(--compass-inner-radius) + 3.5cqw);
	top: calc((var(--compass-inner-text-offset) * sin(0deg + 270deg)) + var(--compass-inner-radius) - 3.5cqw);
}

.wind-compass > .compass-inner > .dirname.north-east {
	left: calc((var(--compass-inner-text-offset) * cos(45deg + 270deg)) + var(--compass-inner-radius));
	top: calc((var(--compass-inner-text-offset) * sin(45deg + 270deg)) + var(--compass-inner-radius));
}

.wind-compass > .compass-inner > .dirname.east {
	left: calc((var(--compass-inner-text-offset) * cos(90deg + 270deg)) + var(--compass-inner-radius) + 7cqw);
	top: calc((var(--compass-inner-text-offset) * sin(90deg + 270deg)) + var(--compass-inner-radius) - 1.25cqw);
}

.wind-compass > .compass-inner > .dirname.south-east {
	left: calc((var(--compass-inner-text-offset) * cos(135deg + 270deg)) + var(--compass-inner-radius));
	top: calc((var(--compass-inner-text-offset) * sin(135deg + 270deg)) + var(--compass-inner-radius));
}

.wind-compass > .compass-inner > .dirname.south {
	left: calc((var(--compass-inner-text-offset) * cos(180deg + 270deg)) + var(--compass-inner-radius) + 3.5cqw);
	top: calc((var(--compass-inner-text-offset) * sin(180deg + 270deg)) + var(--compass-inner-radius) + 3.5cqw);
}

.wind-compass > .compass-inner > .dirname.south-west {
	left: calc((var(--compass-inner-text-offset) * cos(225deg + 270deg)) + var(--compass-inner-radius));
	top: calc((var(--compass-inner-text-offset) * sin(225deg + 270deg)) + var(--compass-inner-radius));
}

.wind-compass > .compass-inner > .dirname.west {
	left: calc((var(--compass-inner-text-offset) * cos(270deg + 270deg)) + var(--compass-inner-radius) - 1cqw);
	top: calc((var(--compass-inner-text-offset) * sin(270deg + 270deg)) + var(--compass-inner-radius) - 1.25cqw);
}

.wind-compass > .compass-inner > .dirname.north-west {
	left: calc((var(--compass-inner-text-offset) * cos(315deg  + 270deg)) + var(--compass-inner-radius));
	top: calc((var(--compass-inner-text-offset) * sin(315deg  + 270deg)) + var(--compass-inner-radius));
}


/* Wind-Speedometer */

.wind-speed {
	position: relative;
	width: var(--windspeed-width);
	height: var(--windspeed-width);
	margin: 0 auto;
	border-radius: 100%;
	background-color: var(--windspeed-border-color);
	background-image: -webkit-linear-gradient(top, var(--windspeed-border-gradient-from-color), var(--windspeed-border-gradient-to-color));
}

.wind-speed > .speed-inner {
	position: relative;
	width: var(--windspeed-inner);
	height: var(--windspeed-inner);
	/*left: calc(var(--windspeed-border) - 3px);
	top: calc(var(--windspeed-border) - 3px);*/
	left: calc(var(--windspeed-border));
	top: calc(var(--windspeed-border));
	border: 3px solid var(--windspeed-separator-color);
	border-radius: 100%;
	background-color: var(--windspeed-inner-color);
}

.wind-speed > .speed-inner > .speed-ring {
	position: relative;
	--pointerleft: 14%;
	--pointertop: 14%;
	--pointerdeg: -45deg;
	/*width: calc(var(--windspeed-inner) * 0.95);
	height: calc(var(--windspeed-inner) * 0.95);*/
	width: calc(var(--windspeed-inner) * 0.95 - 6px);
	height: calc(var(--windspeed-inner) * 0.95 - 6px);
	left: calc(var(--windspeed-inner) * 0.025);
	top: calc(var(--windspeed-inner) * 0.025);
	background-image: 
		radial-gradient(var(--windspeed-inner-color) 0, var(--windspeed-inner-color) 60%, transparent 60%),
		conic-gradient(var(--windspeed-ring-middle-color) 50deg, var(--windspeed-ring-high-color) 130deg, var(--windspeed-inner-color) 130deg, var(--windspeed-inner-color) 230deg, var(--windspeed-ring-low-color) 230deg, var(--windspeed-ring-low-color) 260deg, var(--windspeed-ring-middle-color) 360deg);
	background-size: 100% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: center center, center center;
	border-radius: 50%;
	border-style: none;
}

.wind-speed > .speed-inner > .speed-ring > .speed-text {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	font-family: var(--windspeed-font-family);
	font-weight: bold;
	white-space: nowrap;
}

.wind-speed > .speed-inner > .speed-ring > .speed-text > .now {
	color: var(--windspeed-font-color-now);
	font-size: var(--windspeed-font-size-now);
}

.wind-speed > .speed-inner > .speed-ring > .speed-text > .peak {
	color: var(--windspeed-font-color-peak);
	font-size: var(--windspeed-font-size-peak);
}

.wind-speed > .speed-inner > .main-arrow,
.wind-speed > .speed-inner > .second-arrow {
	position: absolute;
	height: 88%;
	width: calc(var(--windspeed-inner) * 0.04 * 2);
	top: 6%;
	left: calc(var(--windspeed-inner) / 2 - calc(var(--windspeed-inner) * 0.04));
	padding-top: 5px;
	
	box-sizing: border-box;
	transition: transform,-ms-transform,-webkit-transform .75s ease-out;
}

.wind-speed > .speed-inner > .main-arrow {
	z-index: 50;
	
	-webkit-transform: rotate(calc(var(--wind-speed-now) - 130deg));
	-ms-transform: rotate(calc(var(--wind-speed-now) - 130deg));
	transform: rotate(calc(var(--wind-speed-now) - 130deg));
}

.wind-speed > .speed-inner > .main-arrow > .arrow {
	position: relative;
	width: 0;
	height: 0;
	
	border-left: calc(var(--windspeed-inner) * 0.04) solid transparent;
	border-right: calc(var(--windspeed-inner) * 0.04) solid transparent;
	border-bottom: calc(var(--windspeed-inner) * 0.11) solid var(--windspeed-arrow-now-color);
}

.wind-speed > .speed-inner > .main-arrow > .arrow:hover {
	/* show on arrow hover*/
}

.wind-speed > .speed-inner > .second-arrow {
	width: calc(var(--windspeed-inner) * 0.007 * 2) !important;
	height: 100% !important;
	top: 0% !important;
	left: calc(var(--windspeed-inner) / 2 - calc(var(--windspeed-inner) * 0.007)) !important;
	
	z-index: 10;
	
	-webkit-transform: rotate(calc(var(--wind-speed-peak) - 130deg));
	-ms-transform: rotate(calc(var(--wind-speed-peak) - 130deg));
	transform: rotate(calc(var(--wind-speed-peak) - 130deg));
}

.wind-speed > .speed-inner > .second-arrow > .line {
	position: relative;
	
	width: 100%;
	height: 9%;
	left: var(--pointerleft);
	top: var(--pointertop);
	transform: rotate(var(--pointerdeg));
	
	/*border: 1px solid #FFFFFF;*/
	border-radius: 500px;
	background-color: var(--windspeed-arrow-peak-color);
}

.wind-speed > .speed-inner > .second-arrow > .line:hover {
	/* show on line hover*/
}