#skala{
	width: 100%;
	height: auto;
}
#slider-range.ui-slider{
	height: 9px;
	background-image: none;
	background-color: #9b8831;
	border: 1px solid #bc990e;
	background: url(../elements/slider/bgnd_sliderRight.png) 50% 50% repeat-x;
}
#slider-range.ui-slider a.ui-slider-handle
	{
	background: url(../elements/slider/handle2.png) 50% 50% repeat-x;
	width: 25px;
	height: 30px;
	top: -11px;
	left: -5px;
	
}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default
	{
	background: url(../elements/slider/handle.png) 50% 50% repeat-x;
	background-color: transparent;
	color: #ba970e;
	border: 0px;
}

.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited
	{
	color: #1c94c4;
	text-decoration: none;
}

.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus
	{
	cursor: pointer;
	background: url(../elements/slider/handle.png) 50% 50% repeat-x;
	background-color: transparent;
	color: #7e7e7e;
}

.ui-state-hover a,.ui-state-hover a:hover {
	color: #c77405;
	text-decoration: none;
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active
	{
	cursor: pointer;
	background: url(../elements/slider/handle.png) 50% 50% repeat-x;
	background-color: transparent;
	color: #7e7e7e;
}

.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	top: -6px;
}

#slider-range .ui-widget-header {
	background: url(../elements/bgnd_slider.png) top left repeat-x;
	color: #ffffff;
	font-weight: bold;
	height: 8px;
}
.ui-slider-horizontal .ui-slider-range {
    border-radius: 10px;
    height: 100%;
    top: 0;
}

#skala .step {
    display: inline-block;
    cursor: pointer;
}

/* m2_user.svg */
.step.strom {
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="m2_user"><path id="Vector" d="M10 16C6.14 16 3 12.86 3 9C3 5.14 6.14 2 10 2C13.86 2 17 5.14 17 9C17 12.86 13.86 16 10 16ZM10 4C7.24 4 5 6.24 5 9C5 11.76 7.24 14 10 14C12.76 14 15 11.76 15 9C15 6.24 12.76 4 10 4Z" fill="%23979B97"/><path id="Rectangle 1" d="M1 27C1 22.0294 5.02944 18 10 18C14.9706 18 19 22.0294 19 27V29H1V27Z" stroke="%23979B97" stroke-width="2"/></g></svg>');
	
}

.step.strom.active {
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="m2_user"><path id="Vector" d="M10 16C6.14 16 3 12.86 3 9C3 5.14 6.14 2 10 2C13.86 2 17 5.14 17 9C17 12.86 13.86 16 10 16ZM10 4C7.24 4 5 6.24 5 9C5 11.76 7.24 14 10 14C12.76 14 15 11.76 15 9C15 6.24 12.76 4 10 4Z" fill="%23165187"/><path id="Rectangle 1" d="M1 27C1 22.0294 5.02944 18 10 18C14.9706 18 19 22.0294 19 27V29H1V27Z" stroke="%23165187" stroke-width="2"/></g></svg>');
}

/* m2_haus.svg */
.step.gas {
	background-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="m2_haus"><g id="Vector"><path d="M16.65 2.24C16.28 1.92 15.72 1.92 15.35 2.24L1.34998 14.24L2.64998 15.76L16 4.32L29.35 15.76L30.65 14.24L16.65 2.24Z" fill="%23979B97"/><path d="M26 28H21V17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17V28H5.99998V11.89L3.99998 13.6V29C3.99998 29.55 4.44998 30 4.99998 30H13V18H19V30H27C27.55 30 28 29.55 28 29V13.6L26 11.89V28Z" fill="%23979B97"/></g></g></svg>');
}

.step.gas.active {
	background-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="m2_haus"><g id="Vector"><path d="M16.65 2.24C16.28 1.92 15.72 1.92 15.35 2.24L1.34998 14.24L2.64998 15.76L16 4.32L29.35 15.76L30.65 14.24L16.65 2.24Z" fill="%23165187"/><path d="M26 28H21V17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17V28H5.99998V11.89L3.99998 13.6V29C3.99998 29.55 4.44998 30 4.99998 30H13V18H19V30H27C27.55 30 28 29.55 28 29V13.6L26 11.89V28Z" fill="%23165187"/></g></g></svg>');
}

.step.strom{
	height: 48px;
	background-position: left center;
	background-repeat: repeat-x;
	overflow: hidden;
}

#Step1.strom {
	width: 20px;
}

#Step2.strom {
	width: 40px;
}

#Step3.strom {
	width: 60px;
}

#Step4.strom{
	width: 80px;
}

#skala .labeled.gas {
	display: none;
}

.step.gas{
	height: 60px;
	background-repeat: no-repeat;
	width: 32px;
}

.step.gas:after {
	display: inline-block;
	margin-top: 32px;
    font-size: 13px;
    text-align: center;
    width: 100%;
	font-weight: 600;
}

#Step1.gas {
	background-size: 16px;
	background-position: center 16px;
}

#Step2.gas {
	background-size: 20px;
	background-position: center 12px;
}

#Step3.gas {
	background-size: 24px;
	background-position: center 8px;
}

#Step4.gas {
	background-size: 28px;
	background-position: center 4px;
}

#Step5.gas {
	background-size: 32px;
	background-position: center 0;
}


#Step1.gas:after {
	content: "30m²";
}

#Step2.gas:after{
	content: "50m²";
}

#Step3.gas:after{
	content: "100m²";
}

#Step4.gas:after{
	content: "150m²";
}

#Step5.gas:after{
	content: "200m²";
}