@import url(https://comet.tramino.net/fonts/css?family=Arvo:400,700|Ubuntu);


#wetter {
	width: 800px;
	position: relative;
	height: 540px;
	background: #ebebeb no-repeat url(https://tramino.s3.amazonaws.com/s/alpinberatung/526879/bg.jpg);
	background-size: cover;
}


#wetter h3 {
	font-size: 33px;
	line-height: 35px;
	color: #8E5433;
	font-family: 'Arvo', sans-serif;
	font-weight: 700;
}

.Rubrik_34874 #wetter {
	background: #ebebeb no-repeat url(https://tramino.s3.amazonaws.com/s/alpininfo/579921/bg2.jpg);
	background-size: cover;
}


#wetter table { border-spacing: 7px; }
#wetter table .label { text-align: center; }



#wetter .label {
	font-family: "Ubuntu", Arial;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	color: #535353;
}

#wetter .text {
	margin: 7px 0px;
	font-family: "Ubuntu", Arial;
	font-weight: 400;
	font-size: 12px;
	line-height: 15px;
	color: #555;
}


#wetter .text strong {
	background-color: #fff;
	font-family: "Ubuntu", Arial;
	font-size: 12px;
	line-height: 15px;
	box-shadow: 3px 3px 5px -2px rgba(0,0,0,0.3);
	padding: 3px 10px;
	color: #444;
	margin-left: 10px;
}

#wetter .text span {
	background-color: #fff;
	font-family: "Ubuntu", Arial;
	font-size: 12px;
	line-height: 15px;
	box-shadow: 3px 3px 5px -2px rgba(0,0,0,0.3);
	padding: 3px 10px;
	color: #666666;
	margin-left: 10px;
}#vorhersage {
	position: absolute;
	left: 340px;
	top: 20px;
	width: 450px;
}

#vorhersage .text {
	font-family: "Ubuntu", Arial;
	font-size: 13px;
	line-height: 16px;
	color: #1f1f1f;
}


#wetterwarnung {
	position: absolute;
	top: 140px;
	left: 340px;
	width: 350px;
	padding: 10px 20px 10px 40px;
	box-sizing: border-box;
	border: 3px solid #F00;
	background: url(https://tramino.s3.amazonaws.com/s/alpinberatung/540398/achtung.png) top 12px left 10px no-repeat rgba(255,255,255,0.2);
}

#wetterwarnung .warnung { color: #F00; font-weight: 700; margin: 0 0 7px 0;}
#wetterwarnung .warnung_inhalt { color: #000; }

#legende {
	position: absolute;
	left: 30px;
	bottom: 20px;
	width: 450px;
	font-family: "Ubuntu", Arial;
	font-size: 11px;
	line-height: 13px;
	color: #666666;
}


#info {

	position: absolute;
	left: 30px;
	top: 20px;
	font-family: "Ubuntu", Arial;
	font-weight: 400;
	font-size: 12px;
	line-height: 15px;
	color: #555;
}

#info h3 {
	color: #8E5433;
	font-family: "Arvo", Georgia;
	font-size: 30px;
	line-height: 35px;
	margin: 0px 0px 3px -5px;
}

#heute {
	position: absolute;
	left: 40px;
	top: 90px;
	width: auto !important;
	overflow: hidden;
}

#verlauf {
	position: absolute;
	right: 40px;
	top: 125px;
	width: auto !important;
	overflow: hidden;
}

#nebelgrenze {
	position: absolute;
	right: 40px;
	top: 235px;
	width: 360px;
}

#nebelgrenze.wide { width: 390px; }

#nebelgrenze .wrap {
	position: absolute;
	top:0px;
	left: 0px;
	width: 105px;
	text-align: right;
}

#nebelgrenze.wide .wrap { width: 135px; }

#nebelgrenze .sep {
	position: absolute;
	top: 0px;
	right: 5px;
	width: 220px;
	margin: 12px 0px 0px 10px;
	border-bottom: 1px dashed #535353;
}


#nebelgrenze.wide .sep {
	right: 15px;
}

#nebelgrenze .label {
	font-family: "Ubuntu", Arial;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: bold;
	color: #535353;
	margin: 0px 0px 2px 0px;
}


#nebelgrenze .value {
	color: #666;
	font-family: "Ubuntu", Arial;
	font-size: 11px;
	line-height: 11px;
	font-weight: 600;
	margin: 2px 0px 0px 0px;

}

#nebelgrenze strong {
	background-color: #fff;
	font-family: "Ubuntu", Arial;
	font-size: 11px;
	line-height: 13px;
	box-shadow: 3px 3px 5px -2px rgba(0,0,0,0.3);
	padding: 3px 10px;
	color: #444;
	text-align: right;
}

#vorschau {
	position: absolute;
	left: 40px;
	top: 320px;
	width: auto !important;
	overflow: hidden;
}

#prognose {
	position: absolute;
	left: 340px;
	top: 330px;
	width: 250px;
}

#trend {
	position: absolute;
	left: 610px;
	top: 330px;
	width: 210px;
}

#bioklima {
	position: absolute;
	left: 840px;
	top: 330px;
	width: 260px;
}

#bioklima .infos { float: left; width: 240px; }


#bioklima .pollenbelastung { margin: 0 0 5px 0; }
#bioklima .luftfeuchtigkeit { margin: 0 0 5px 0; }
#bioklima .befindengesundheit { margin: 0 0 5px 0; }
#bioklima .unvindex { margin: 0 0 5px 0; }

#bioklima .info_small { font-size: 11px; }

#bioklima .level_icon {
	width: 12px;
	height: 12px;
	float: left;
	background-color: #fff;
	margin: 3px 5px 0 0;
	border-radius: 10px;
}


#bioklima .level_icon.blue { background-color: #35478C; }
#bioklima .level_icon.green { background-color: #468966; }
#bioklima .level_icon.yellow { background-color: #FFB03B; }
#bioklima .level_icon.darkyellow { background-color: #BA802B; }
#bioklima .level_icon.orange { background-color: #B64926; }
#bioklima .level_icon.red { background-color: #8E2800; }
#bioklima .level_icon.purple { background-color: #C044FF; }







#wetter.size-t {
	height: 630px;
}

#wetter.size-t #wetterwarnung {
	left: 360px;
}
#wetter.size-t #verlauf {
	left: 40px;
	top: 320px;
}

#wetter.size-t #vorschau {
	left: 350px;
}

#wetter.size-t #prognose {
	left: 40px;
	top: 430px;
}

#wetter.size-t #trend {
	left: 360px;
	top: 430px;
}

#wetter.size-t #bioklima {
	position: absolute;
	left: 620px;
	top: 330px;
}

#wetter.size-t #legende {
	right: 40px;
	left: auto;
	top: auto;
	bottom: 10px;
	width: auto;
}


/* Smartphone */
#wetter.size-sb {
	padding: 20px;
	height: auto;
}

#wetter.size-sb #info { position: static; }
#wetter.size-sb #heute { position: static; float: left; margin: 0px 10px 0px 0px; }

#wetter.size-sb #wetterwarnung {
	position: static;
	width: 100%;
	margin: 0px 0px 10px 0px;
}

#wetter.size-sb #vorhersage {
	position: static;
	width: 100%;
	margin: 0px 0px 20px 0px;
}
#wetter.size-sb #verlauf {
	position: static;
	float: left;
}

#wetter.size-sb #vorschau {
	position: static;
	float: left;
}

#wetter.size-sb #prognose {
	position: static;
	width: 100%;
	margin: 10px 0px;
}

#wetter.size-sb #trend {
	position: static;
	width:100%;
}

#wetter.size-sb #bioklima {
	position: static;
	width: 100%;
	margin-bottom: 20px;
}

#wetter.size-sb #legende {
	position: static;
}

/* Smartphone Small */
#wetter.size-ss {
	padding: 20px;
	height: auto;
	box-sizing: border-box;
}

#wetter.size-ss #info { position: static; }
#wetter.size-ss #heute { position: static; width: 100%; }

#wetter.size-ss #wetterwarnung {
	position: static;
	width: 100%;
	margin: 0px 0px 10px 0px;
}

#wetter.size-ss #vorhersage {
	position: static;
	width: 100%;
	margin: 0px 0px 20px 0px;
}
#wetter.size-ss #verlauf {
	position: static;
}

#wetter.size-ss #vorschau {
	position: static;
}

#wetter.size-ss #prognose {
	position: static;
	width: 100%;
	margin: 10px 0px;
}

#wetter.size-ss #trend {
	position: static;
	width:100%;
}

#wetter.size-ss #bioklima {
	position: static;
	width: 100%;
	margin-bottom: 20px;
}

#wetter.size-ss #bioklima .infos { float: none; width: 210px; padding-left: 20px; }

#wetter.size-ss #legende {
	position: static;
	width: 100%;
}


/*
@media all and (max-width: 1200px) {

	#wetter {
		width: auto;
		height: auto;
		padding: 15px 15px 10px 15px;
		background-size: auto;
	}

	#wetter .text strong {
		font-size: 12px;
		line-height: 18px;
		padding: 2px;
	}

	#wetter .text span {
		font-size: 12px;
		line-height: 16px;
		padding: 2px;
	}

	#heute { margin: 0px; padding: 15px 0px 0px 0px; position: static; }

	#vorhersage {
		position: static;
		float: left;
		width: 100%;

	}

	#vorhersage .text {
		margin: 20px 0px 10px 0px;
		font-size: 13px;
		line-height: 16px !important;
		color: #555;
	}

	#legende {
		position: static;
		width: 100%;
		float: left;
	}

	#info { position: static; }
	#info h3 { margin: 0px 0px 3px 0px; }


	#verlauf {
		position: static;
		float: left;
		margin: 0px 20px 15px 0px;
	}

	#nebelgrenze {
		width: 100%;
		float:left;
	}

	#vorschau {
		position: static; float: left;
		margin: 0px 20px 15px 0px;
	}

	#prognose {
		position: static;
		margin: 15px 20px 0px 9px;
		float: left;
	}

	#trend {
		position: static;
		margin: 15px 0px 15px 9px;
		float: left;
	}
}*/