@IMPORT url("fontawesome/css/all.css");


/* Fonts */

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 200;
    src: url('fonts/source-sans-pro-v11-latin-200.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    src: url('fonts/source-sans-pro-v11-latin-300.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 400;
    src: url('fonts/source-sans-pro-v11-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 600;
    src: url('fonts/source-sans-pro-v11-latin-600.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 700;
    src: url('fonts/source-sans-pro-v11-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 900;
    src: url('fonts/source-sans-pro-v11-latin-900.woff') format('woff');
}

@font-face {
    font-family: 'DINOT';
    src: url('fonts/DINOT.woff2') format('woff2');
	 font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Allgemein */

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

html,
body {
	background-color: transparent;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	color: #688947;
	font-weight: 100;
	height: auto;
}

a {
	transition: all 0.2s ease-in-out;
}

ul {
	margin: 0;
}

.inner_wrapper {
	margin: 0 auto;
	max-width: 1130px;
	position: relative;
	width: 100%;
}

.columns.l {
	padding-left: 0;
}

.columns.r {
	padding-right: 0;
}

#headline_container {
	display: none;
}

h2 {
	border: none;
	color: #688947;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 60px;
	font-weight: 800;
	line-height: normal;
	margin: 0;
	padding: 0 60px;
	text-transform: uppercase;
	transform: translatey(70px);
}


/* Buttons */

.right_button {
	float: right;
}

#back_wrapper .button,
.backward.button,
.forward.button {
	background-color: #fff;
	background-image: none;
	border: 1px solid #95c23d;
	color: #688947;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	padding: 17px 50px;
	transition: all .25s ease-in-out;
}

#back_wrapper .button:hover,
.backward.button:hover,
.forward.button:hover {
	background-color: #95c23d;
	color: #fff;
	text-decoration: none;
}


/* Kalender */

.ui-widget-header,
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #95c23d;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover {
	background-color: #95c23d;
	border: 1px solid #95c23d;
	color: #fff !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
	border: 1px solid #95c23d !important;
	color: #95c23d !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	padding-right: 25px;
	width: auto;
}

.ui-datepicker .ui-datepicker-prev span {
	background-image: url("../elements/cal_left.png");
	background-position: 0 0;
	background-size: 100%;
	margin-left: -30px;
}

.ui-datepicker .ui-datepicker-next span {
	background-image: url("../elements/cal_right.png");
	background-position: 0 0;
	background-size: 100%;
	margin-left: 15px;
}


/* Header */

#header {
	background-color: #fff;
	border-bottom: 1px solid #95c23d;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-top: 1px solid transparent;
	box-shadow: none;
	height: 430px;
	overflow: hidden;
	position: relative;
}

#header #logo_link {
	display: block;
	margin: 30px 0 0 30px;
	width: 300px;
}

#logo {
	height: auto;
	margin: 0;
	max-width: 100%;
}

#header .inner_wrapper {
	margin-top: 163px;
}

#header .inner_wrapper:before {
	background-image: url(../elements/Fahrrad-gruen.svg);
	background-repeat: no-repeat;
	bottom: 0px;
	content: "";
	height: 100px;
	left: -350px;
	position: absolute;
	top: 67px;
	width: 345px;
	z-index: 10;
}

#header .inner_wrapper:after {
	background: url(../elements/Baum-gruen.svg) no-repeat;
	bottom: 0px;
	content: "";
	height: 375px;
	position: absolute;
	right: -350px;
	top: -208px;
	width: 350px;
	z-index: 10;
}

#header h1 {
	color: #95c23d;
	display: block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 55px;
	font-weight: 400;
	hyphens: auto;
	line-height: 1.15;
	margin: 0 0 60px;
	padding: 0 60px;
	position: absolute;
	text-transform: uppercase;
	top: -139px;
}

#header h1:before {
	content: "\f101";
	font-size: 60px;
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	left: 0px;
	position: absolute;
	top: 2px;
}


/* Content */

div.slider_bg {
	display: none;
}

#content_wrapper {
	background-color: transparent;
	border: none;
	overflow: hidden;
	padding-top: 60px;
	position: relative;
}


/* Produktliste */

.productlist #calculator {
	display: none;
}

div.product {
	color: #fff;
	margin: 0 0 50px;
	position: relative;
}

div.product:after {
	background: #95c23d;
	content: "";
	display: block;
	height: 100%;
	left: -50vw;
	position: absolute;
	top: 0px;
	transform: rotate(-1deg);
	width: 200vw;
	z-index: -1;
}

div.product_name {
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 60px;
	font-weight: 400;
	line-height: normal;
	margin: 60px 0 30px;
	padding-left: 60px;
	position: relative;
}

div.product_name:before {
	content: "\f101";
	font-size: 60px;
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 5px;
}

div.product_details {
	float: left;
	position: relative;
	width: 66.66667%;
}

div.product_details li {
	padding-left: 65px;
	position: relative;
}

div.product_details li:before {
	content: "\f00c";
	font-size: 24px;
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	left: 25px;
	position: absolute;
	top: 5px;
}

div.product_details li span {
	font-weight: 700;
}

div.prices {
	margin: 0;
	text-align: right;
}

div.prices > div {
	float: none;
}

div.prices > div > label {
	padding-bottom: 5px;
}

div.prices > div > div {
	border: none;
	font-weight: 500;
	line-height: normal;
	padding: 0 0 10px;
}

div.prices > div.price > div {
	background-color: transparent;
	border: none;
	font-size: 60px;
	font-weight: 800;
	line-height: 45px;
	padding: 5px 0 25px;
}

.accept_btn.button {
	background-color: transparent;
	background-image: none;
	border: 2px solid #fff;
	display: block;
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	padding: 17px 50px;
	position: static;
	transition: all .25s ease-in-out;
}

.accept_btn.button:hover {
	background-color: #fff;
	color: #95c23d;
}

div.details_button {
	background-image: url("../elements/details_closed.png");
	background-position: 98% bottom;
	background-repeat: no-repeat;
	border-top: 1px solid #fff;
	margin-top: 50px;
	padding: 10px 0 0;
	transition: all .25s ease-in-out;
}

div.details_button:hover {
	text-decoration: none;
}

div.details_button.show {
	background-image: url("../elements/details_open.png");
	text-decoration: none;
}

div.details_button:before {
	display: none;
}

div.prop span.prop {
	font-weight: inherit;
	padding: 0 0 20px;
	width: 200px;
}

div.prop span.value {
	font-weight: 500;
}

.prop_descr {
	line-height: 1.6;
}

.prop_descr.agb a, .prop_descr.agb a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Kundendaten */

.customerdata #calculator_wrapper {
	margin-bottom: 50px;
	padding: 0;
	position: relative;
}

.customerdata #calculator_wrapper:after {
	background: #95c23d;
	content: "";
	display: block;
	height: 100%;
	left: -50vw;
	position: absolute;
	top: 0px;
	transform: rotate(-1deg);
	width: 200vw;
	z-index: -1;
}

.customer_data #calculator {
	background-color: transparent;
}

#calc_changedata table.table_left {
	float: left;
	width: calc(50% - 25px);
}

#calc_changedata table.table_right {
	float: right;
	width: calc(50% - 25px);
}

#calc_changedata table td {
	font-size: 24px;
	font-weight: 500;
}

#calc_changedata table td.first {
	font-weight: inherit;
	width: 200px;
}

div.bubbles {
	border-bottom: 1px solid #95c23d;
}

div.bubbles > div {
	float: right;
	margin: 0 0 0 40px;
}

div.bubbles div.bubble {
	background-color: #fff;
	border: 1px solid #95c23d;
	color: #95c23d;
}

div.bubbles .active div.bubble {
	background-color: #95c23d;
	color: #fff;
}

div.bubbles div.label_bubble {
	color: #688947;
}

.customerdata h3,
div.white_wrapper h4 {
	color: #95c23d;
	font-size: 48px;
	font-weight: 400;
	padding: 48px 0 29px;
}

.inputSpacer {
	font-size: 18px;
	width: auto;
}

.inputInfo {
	font-size: 18px;
	padding-bottom: 10px;
}

input[type="text"],
select {
	border: 1px solid #688947;
	color: #688947;
	height: 50px;
	line-height: 55px;
	margin: 0 0 15px;
	padding: 0 15px;
}

input[type="text"][disabled] {
	background-color: #dfedc3;
}

.white_wrapper > .columns.data_input .checkb1 {
	margin-top: 12px;
}

.step3 .white_wrapper > .columns.data_input .checkb1 {
	margin-top: 6px;
}

.white_wrapper > .columns.data_input label.checkbText1 {
	font-size: 18px;
	line-height: normal;
	padding-bottom: 10px;
}

.action_code label.controlInfo_label {
	display: block;
	font-size: 18px;
	margin-bottom: 10px;
}

p.legend {
	color: #688947;
	font-size: 18px;
}

input._zusatzL {
	width: 100%;
}

.label_info_payment {
	font-size: 18px;
	line-height: normal;
}

div.controlInfo {
	background-color: #fff;
	border-bottom: 1px solid #688947;
	height: 40px;
	line-height: 42px;
	margin-bottom: 50px;
	padding: 0;
}

div.agbetc > div > div {
	margin-bottom: 30px;
}

div.agbetc.white_wrapper > .columns.data_input .checkb1 {
	margin-top: 7px;
}

div.agbetc a {
	color: #95c23d;
	text-decoration: underline;
	transition: all 0.2s ease-in-out;
}

.forward.button.complete {
	background-image: none;
	background-color: #95c23d;
	border-color: #95c23d;
	color: #fff;
}

#ui-datepicker-div {
	max-width: 300px;
}


/* Bestellung abgeschlossen */

.goodbye_text {
	line-height: normal;
}

.goodbye_text a {
	color: #95c23d;
	text-decoration: underline;
	transition: all 0.2s ease-in-out;
}

.goodbye .back_link {
	margin-top: 50px;
}

.goodbye .back_link a {
	background-color: #fff;
	background-image: none;
	border: 1px solid #95c23d;
	color: #688947;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	padding: 17px 50px;
	transition: all .25s ease-in-out;
}

.goodbye .back_link a:hover {
	background-color: #95c23d;
	color: #fff;
	text-decoration: none;
}


/* Sitzung abgelaufen */

#green_box_timeout p {
	margin-bottom: 50px;
}

#green_box_timeout a {
	background-color: #fff;
	background-image: none;
	border: 1px solid #95c23d;
	color: #688947;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	padding: 17px 50px;
	transition: all .25s ease-in-out;
}

#green_box_timeout a:hover {
	background-color: #95c23d;
	color: #fff;
	text-decoration: none;
}


/* Wartung */





/* Footer */

#footer {
	background-color: #95c23d;
	color: #fff;
	font-size: 18px;
	height: auto;
	overflow: hidden;
	padding: 15px 0 0 0;
}

#inner_footer_1 .footer_link_column {
	width: 25%;
	float: left;
	font-weight: 600;
	margin-bottom: 10px;
	padding: 36px 0 0 30px;
}

#inner_footer_1 .footer_link_column ul {
	margin: 10px 0 0;
}

#inner_footer_1 .footer_link_column li {
	margin-bottom: 10px;
	line-height: 27px;
}

#inner_footer_1 .footer_link_column a {
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}

#inner_footer_1 .footer_link_column a:hover {
	color: #688947;
	text-decoration: none;
}

#inner_footer_1 .footer_link_column a.footer_headline_link {
	font-weight: 600;
}

#inner_footer_2 {
	background: #688947;
	margin: 25px 0 0 0;
	padding: 5px 0;
}

#inner_footer_2 li {
	float: left;
	margin: 0 0 10px;
	padding: 0 0 0 30px;
}

#inner_footer_2 a {
	color: #bdcab3;
	font-size: 18px;
}

#footer_2_link_wrapper a {
	float: right;
	margin-top: 5px;
	margin-left: 15px;
}

#footer_2_link_wrapper p {
	color: #bdcab3;
	float: right;
	font-size: 90%;
	line-height: 1.35em;
	margin: 0;
	padding: 10px 0;
}


/* Änderungen ab 21.12.2020 */

#footer {
	padding: 0;
}

#inner_footer_1 {
	display: none;
}

#inner_footer_2 {
	margin: 0;
}

/* PLUGIN */

#calculator_wrapper h1 {
	display: none;
}

.gruenes #calculator_wrapper h1 {
	display: block;
	font-family: DINOT, Arial, Helvetica, Sans-serif;
	color: #fff;
	font-weight: 900;
}

#calculator_wrapper .columns.col-left {
    width: 33%;
    padding: 0;
}
#calculator_wrapper .columns.col-center {
    width: 33%;
    padding: 0;
	margin-top: 50px
}
#calculator_wrapper .columns.col-right {
	width: 33%;
    padding: 0;
}
#calculator_wrapper.plugin {
    font-family: DINOT, Arial, Helvetica, Sans-serif;
	font-size: 1.25rem;
	padding: 0;
	width: 100%;
	max-width: 1100px;
	background: #009DDF;
	padding: 10px 40px 40px 40px;
}

.gruenes #calculator_wrapper.plugin {
	background: #95c23d;
}

#calculator_wrapper.plugin #calculator {
    padding: 0;
    margin-top: 0;
	background: #009DDF;
}

.gruenes #calculator_wrapper.plugin #calculator {
	background: #95c23d;
}

#calculator .background_holder {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}


#calculator .background_holder.H {
    background-color: #009ee0;
}

#calculator_wrapper .columns.col-center .columns {
	margin-top: 15px;
}
#calculator_wrapper .columns.col-left .large-9 {
	width: 75%
}
#calculator_wrapper .columns.col-left .large-3 {
    width: 25%
}
#calculator_wrapper.plugin #map_region_product_et {
	display: none;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
#calculator_wrapper.plugin #map_region_product_et label {
    padding: 0 20px;
    color: #fff;
    height: 50px;
    background-color: transparent;
    font-size: 22px;
    line-height: 50px;
	flex: auto;
	width: 33.333%
}
#calculator_wrapper.plugin #map_region_product_et label.G {
	background-color: #fbba00;
}
#calculator_wrapper.plugin #map_region_product_et label.E {
    background-color: #308942;
}
#calculator_wrapper.plugin #map_region_product_et label.H {
	background-color: #009ee0; 
}
#calculator_wrapper.plugin #map_region_product_et label.E::before {
    content: "";
    background-image: url("../elements/icons/icon_strom.png");
    background-repeat: no-repeat;
    background-position: left center;
    float: left;
    width: 40px;
    height: 50px;
	margin-right: 8px;
}
#calculator_wrapper.plugin #map_region_product_et label.G::before {
    content: "";
    background-image: url("../elements/icons/icon_gas.png");
    background-repeat: no-repeat;
    background-position: left center;
    float: left;
    width: 26px;
    height: 50px;
	margin-right: 8px;
}
#calculator_wrapper.plugin #map_region_product_et label.H::before {
    content: "";
    background-image: url("../elements/icons/icon_warme.png");
    background-repeat: no-repeat;
    background-position: left center;
	background-size: contain;
    float: left;
    width: 40px;
    height: 50px;
	margin-right: 8px;
}
#calculator_wrapper.plugin input[type='radio'] {
    position: relative;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    margin-top: 0.45rem;
    padding: 0;
    border: solid 1px #E9EFF2;
    background: #FFFFFF;
	transition: border 0.1s linear;
	appearance: none;
	border: 2px solid #fff;
    background: transparent;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

#calculator_wrapper.plugin input[type='radio']:checked {
	background: #fff;
	box-shadow: 0 0 0 .1em rgb(0 0 0 / .1);
}

#calculator_wrapper.plugin #map_region_product_tg {
	display: flex;
	gap: 20px;
}
#calculator_wrapper.plugin #map_region_product_tg span {
	padding-left: 10px;
    color: #fff;
}

#calculator_wrapper.plugin input[type="text"],
#calculator_wrapper.plugin select {
	border: none;
	border-radius: 4px;
	height: 50px;
	margin: 0;
	padding: 0 19px;
    color: #3c606f;
    font-size: 17px;
}
span.value_unit {
	color: #000;
	position: absolute;
	right: 7px;
	top: 80px;
	
}
#calculator .background_holder .button {
    font-family: DINOT, Arial, Helvetica, Sans-serif;
	background: #F9BB01;
    font-size: 20px;
    margin-bottom: 0;
    margin-top: 65px;
    padding: 0;
    height: 50px;
    width: 100%;
	border-radius: 50px;
}
#calc_error {
    padding: 10px;
    margin-top: 20px;
}

#slider_descr {
	text-align: right;
}
.background_holder.E #slider_descr span#_gas_descr,
.background_holder.G #slider_descr span#_strom_descr {
	display: none;
}
.background_holder.G #slider_descr span#_gas_descr {
    display: block;
	color: #d48215;
	padding: 3px 0;
	margin: 5px 0 0 0;
}
.background_holder.E #slider_descr span#_strom_descr {
    display: block;
	color: #abd242;
    padding: 3px 0;
    margin: 5px 0 0 0;
}

/* SLIDER */


#skala,
#skala_val,
#slider_wrapper {
	padding: 0;
}

#skala_val,
#slider_wrapper,
#slider_descr {
	display: none !important;
}



.step.gas {
	min-width: auto !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M298.2 72.6C310.5 61.2 329.5 61.2 341.7 72.6L432 156.3L432 144C432 126.3 446.3 112 464 112L496 112C513.7 112 528 126.3 528 144L528 245.5L565.8 280.6C575.4 289.6 578.6 303.5 573.8 315.7C569 327.9 557.2 336 544 336L528 336L528 512C528 547.3 499.3 576 464 576L176 576C140.7 576 112 547.3 112 512L112 336L96 336C82.8 336 71 327.9 66.2 315.7C61.4 303.5 64.6 289.5 74.2 280.6L298.2 72.6zM304 384C277.5 384 256 405.5 256 432L256 528L384 528L384 432C384 405.5 362.5 384 336 384L304 384z'/%3E%3C/svg%3E") no-repeat center bottom;
	opacity: .5;
}

.step.strom {
	min-width: auto !important;
	background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAyMCAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUyNDQ2XzM1OTEpIj4KPHBhdGggZD0iTTEwIDE2QzYuMTQgMTYgMyAxMi44NiAzIDlDMyA1LjE0IDYuMTQgMiAxMCAyQzEzLjg2IDIgMTcgNS4xNCAxNyA5QzE3IDEyLjg2IDEzLjg2IDE2IDEwIDE2Wk0xMCA0QzcuMjQgNCA1IDYuMjQgNSA5QzUgMTEuNzYgNy4yNCAxNCAxMCAxNEMxMi43NiAxNCAxNSAxMS43NiAxNSA5QzE1IDYuMjQgMTIuNzYgNCAxMCA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEgMjdDMSAyMi4wMjk0IDUuMDI5NDQgMTggMTAgMThDMTQuOTcwNiAxOCAxOSAyMi4wMjk0IDE5IDI3VjI5SDFWMjdaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81MjQ0Nl8zNTkxIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") no-repeat center bottom;
	opacity: .5;
}

.step.active {
	opacity: 1;
}