.calculator {
	position: relative;
  	clear: both;
  	display: none;
  	margin: 0;
  	padding: 0;
  	border: none;
}
.calculator .alignCenter{
	justify-content: flex-start;
	padding-top: 5px;
}
.calculator#strom, .calculator#stromEinzeln, .calculator#gasEinzeln {
  	display: block;
	
}
#tarifrechner-home, #tarifrechner-strom, #tarifrechner-gas{
	background-color: #E6EDF4;
	width: 100vw;
	height: auto;
	border-top: solid 2px #fff;
}
#tarifrechner-home{
	margin-top: -4rem;
}
#tarifrechner-strom, #tarifrechner-gas{
	margin-top: 0;
}
#tarifrechner-home-results{
	position: relative;
	margin-bottom: 4rem;
}
#tarifrechner-home-results > div.container{
	position: relative;
	z-index: 5;
}
#tarifrechner{
	margin-top: -3.6rem;
}
/*ul.tabs li:first-of-type::before, ul.tabs li.active:first-of-type::before, ul.tabs li:last-of-type::after, ul.tabs li.active:last-of-type::after, div.singletab p:first-of-type::before, div.singletab p:last-of-type::after {
	width: 32px;
	height: 35px;
  	clear: both;
  	display: inline-block;
	position: relative;
	margin-top: -8px;
}*/
ul.tabs li:first-of-type::before, ul.tabs li.active:first-of-type::before, ul.tabs li:last-of-type::after, ul.tabs li.active:last-of-type::after, div.singletab p:first-of-type::before, div.singletab p:last-of-type::after {
	width: 31px;
	height: 42px;
  	clear: both;
  	display: inline-block;
	position: relative;
	margin-top: -2px;
}
ul.tabs li:first-of-type::before {
  	content: url("/layout/rounded-edge-tab-start.svg");
}
ul.tabs li.active:first-of-type::before, div.singletab p:first-of-type::before {
  	content: url("/layout/rounded-edge-tab-start-active.svg");
}
ul.tabs li:last-of-type::after {
  	content: url("/layout/rounded-edge-tab-end.svg");
}
ul.tabs li.active:last-of-type::after, div.singletab p:last-of-type::after {
  	content: url("/layout/rounded-edge-tab-end-active.svg");
}
ul.tabs, div.singletab {
  	margin: 0;
	margin-top: 1px;
  	padding: 0;
  	width: 100%;
  	position: relative;
  	z-index: 10;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	list-style: none;
}
ul.tabs li, div.singletab p{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	
}
ul.tabs li a, div.singletab p a{
	background-color: rgba(255,255,255,0.7);
	border-top: solid 2px #fff;
	border-bottom: none;
	border-right: solid 2px #fff;
	border-left: none;
	min-width: 160px;
	padding: 0.5rem 1rem;
}
ul.tabs li:first-of-type a{
	padding-right: 32px;
}
ul.tabs li:last-of-type a{
	padding-left: 32px;
}
ul.tabs li.active a, div.singletab p a {
	/*background-color: rgba(255,255,255,0.35);*/
	background-color: #E6EDF4;
}
ul.tabs li, ul.tabs li > a, div.singletab p, div.singletab p > a {
  	color: #004994;
	font-weight: 700;
	font-size: 1.25rem;
	text-align:center;
	margin-bottom: 1px;
}
ul.tabs li.active a, div.singletab p a {
  	/*color: #fff;*/
}
ul.tabs li:last-of-type a, div.singletab p:last-of-type a{
	border-right: none;
}
#tarifrechner form{
	padding: 2rem 0;
}
#tarifrechner select, #tarifrechner input, #tarifrechner label{
	font-weight: 700;
	
} 
#tarifrechner select, #tarifrechner input{
	background-color: transparent;
  	border: solid 2px #fff;
  	border-radius: 1rem;
	padding: 0.5rem 1rem;
	font-size: 1.1rem;
	margin-bottom: 2rem;
}
#tarifrechner select{
  	width: calc(100% - 50px);
	max-width: 300px;
}
#tarifrechner input{
	width: 170px;
	margin-top: 0.25rem;
}
#tarifrechner label.visibleLabel{
	width: 120px;
  	display: inline-block;
  	line-height: 1;
	margin: 0.25rem 0 2rem 1rem;
}
#tarifrechner label.hidden{
	display: none;
}
#tarifrechner input[type=submit]{
	background-color: #004994;
	color: #fff;
	border: solid 2px #004994;
	width: 300px;
	text-align: left;;
	background: #004994 url("/layout/pfeil-weiss.svg")no-repeat 225px center;
	background-size: 60px;
	margin-top: 2rem;
}
#tarifrechner input[type=checkbox]{
	width: 25px;
	height: 25px;
	cursor: pointer;
	border: solid 2px #004994;
	margin-bottom: 0;
}
#tarifrechner label.oeko-strom, #tarifrechner label.bio-gas{
	width: 137px;
	margin-bottom: 0;
	color: #488403;
}
.oeko-checkbox{
	padding: 0.5rem 1rem;
	background-color: #fff;
	border-radius: 1rem;
	margin-bottom: 2rem;
	margin-right: 2rem;
}
.results{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.tarifresult{
	width: 48%;
}
.result-produkt-box{
	border-radius: 1rem;
	padding: 1rem;
	margin: 1rem;
	margin-top: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.result-produkt-text, .result-produkt-preis{
	color: #fff;
  	text-align: center;
  	width: 80%;
	padding: 1rem;
  	line-height: 1.1;
  	font-weight: 700;
}
.result-produkt-text{
	border-top-left-radius: 1rem;
  	border-top-right-radius: 1rem;
}
.result-produkt-text ul{
	list-style: none;
	color: #fff;
	margin-left: 0;
}
.result-produkt-text.strom{
	background-color: #004994;
}
.result-produkt-text.gas{
	background-color: #EF7D00;
}
.result-produkt-preis{
	border-bottom-left-radius: 1rem;
  	border-bottom-right-radius: 1rem;
}
.result-produkt-preis.strom-blue {
    background-image: linear-gradient(180deg, #004994 0%, #009EE3 75%);
}
.result-produkt-preis.strom-oekogreen{
	background-image: linear-gradient(180deg, #004994 0%, #76B82A 75%);
}
.result-produkt-preis.gas-oekogreen{
	background-image: linear-gradient(180deg, #EF7D00 0%, #76B82A 75%);
}
.result-produkt-preis.gas-orange{
	background-image: linear-gradient(180deg, #EF7D00 0%, #f6a300 75%);
}
.result-produkt-preis small {
  	font-size: 1rem;
}
.result-produkt-preis span {
  	font-size: 3rem;
}
.result-produkt-icon {
  	border-radius: 1rem;
  	background-color: #fff;
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: 55%;
  	width: 100%;
  	height: 200px;
  	box-shadow: 0px 3px 10px #959595;
}
#woinemer_oeko_logisch{
	background-image: url("/layout/produkte/produkte_oekostrom.png");
}
#woinemer_strom{
	background-image: url("/layout/produkte/produkte_strom.png");
}
#woinemer_biogas{
	background-image: url("/layout/produkte/produkte_biogas.png");
}
#woinemer_gas{
	background-image: url("/layout/produkte/produkte_gas.png");
}
.zumangebot{
	width: 72%;
  	border-radius: 1rem;
  	font-weight: 700;
  	margin: 1.5rem 0 0.8rem 0;
  	font-size: 1.25rem;
  	text-align: left;
  	background: transparent url("/layout/pfeil-weiss.svg") no-repeat 95% center;
    background-size: auto;
  	background-size: 60px;
}
.zumangebot a, div.fullwidth .zumangebot a[href^="http"]{
	background: transparent;
	color: #fff;
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 1rem 2rem 1rem 1rem;
	margin: 0;
	border: none;
	border-radius: 0;
}
.zumangebot.strom{
	background-color: #004994;
}
.zumangebot.gas{
	background-color: #EF7D00;
}
.result-button{
	display: flex;
	justify-content: center;
	align-items: center;
}
.tarifhighlight {
	text-align: center;
	opacity: 0;
	border-radius: 1rem;
	border: solid 2px #004994;
}
.tarifhighlight.result-1{
	opacity: 1;
}
.tarifhighlight p{
	color: #004994;
	font-weight: 700;
	font-size: 1.5rem;
	margin: 1rem 0;
}
.tarifhighlight, .result-produkt-infos{
	width: 70%;
	margin: 1.5rem auto 1rem auto;
}
.result-produkt-infos .panel{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.result-produkt-infos .panel > p{
	width: 50%;
	margin-right: 0;
	margin-left: 0;
	padding-left: 0.8rem;
}
.tarifinfo-gas{
	font-size: 0.75rem;
	line-height: 1.1;
	margin-top: 0.5rem;
}
.tarifinfo-gas p{
	margin-bottom: 1rem;
}
#results{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
@media only screen and (max-width: 960px){
	#tarifrechner select{
		max-width: 98%;
	}
	#tarifrechner input{
		width: calc(100% - 150px);
	}
}
@media only screen and (max-width: 820px){
	#tarifrechner select{
		width: 98%;
	}
	.calculator .col-33{
		width: 100%;
	}
	.tarifresult{
		width: 100%;
	}
}
@media only screen and (max-width: 560px){
	.result-produkt-box{
		padding: 1rem 0;
	}
	.tarifhighlight, .result-produkt-infos {
	  width: 90%;
	  margin: 1.5rem auto 1rem auto;
	}
	.result-produkt-text, .result-produkt-preis{
		width: 90%;
	}
	.result-produkt-icon{
		background-size: 65%;
	}
	.zumangebot{
		width: 90%;
	}
	ul.tabs li a{
		min-width: 110px;
	}
}
.visually-hidden {
  	position: absolute;
  	width: 1px;
  	height: 1px;
  	padding: 0;
  	margin: -1px;
  	overflow: hidden;
  	clip: rect(0, 0, 0, 0);
  	white-space: nowrap;
  	border: 0;
}
.switch-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1rem;
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	min-width: 50px;
	height: 24px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #004994;
}

input:checked + .slider:before {
	transform: translateX(26px);
}

.label-left,
.label-right {
	/*font-size: 0.9em;*/
	line-height: 1;
	font-weight: 700;
}
#waermestrom-option{
	margin-bottom: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

/* Tooltip-Styling */
.info-icon {
	cursor: pointer;
	display: inline-block;
	margin-left: 5px;
	color: #0073e6;
	position: relative;
	font-weight: normal;
	font-style: normal;
	line-height: 110%;
	font-size: 14px;
	user-select: none;
}

/*.info-icon::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 125%;
	background-color: #333;
	color: #fff;
	padding: 8px 10px;
	border-radius: 5px;
	white-space: pre-line;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	width: max-content;
	max-width: 200px;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}*/
.info-icon::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 125%;
	background-color: #333;
	color: #fff;
	padding: 8px 10px;
	border-radius: 5px;
	white-space: pre-line;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	width: max-content;
	max-width: 200px;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);

	left: auto;
	right: auto;
	transform: translateX(-50%);
	left: 50%;
}

/* Tooltip-Pfeil */
/*.info-icon::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 115%;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 998;
}*/
.info-icon::before {
	content: "";
	position: absolute;
	bottom: 115%;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 998;

	left: 50%;
	transform: translateX(-50%);
}

/* Hover (für Desktop) */
@media (hover: hover) {
	.info-icon:hover::after,
	.info-icon:hover::before {
		opacity: 1;
	}
}
.info-icon.tooltip-visible::after,
.info-icon.tooltip-visible::before {
	opacity: 1;
}
.info-icon::after {
	left: 50%;
	transform: translateX(-50%);
}

.info-icon[style*="--tooltip-align: left"]::after {
	left: 0;
	transform: none;
}

.info-icon[style*="--tooltip-align: right"]::after {
	left: auto;
	right: 0;
	transform: none;
}

/* Pfeil mit angepasster Ausrichtung */
.info-icon::before {
	left: 50%;
	transform: translateX(-50%);
}

.info-icon[style*="--tooltip-align: left"]::before {
	left: 10px;
	transform: none;
}

.info-icon[style*="--tooltip-align: right"]::before {
	left: auto;
	right: 10px;
	transform: none;
}