:root {
    --buttonColor: #f8fff9;
    --buttonSelectedColor: #cdf7d1; /*#e2ffe4;*/
    --buttonSelectedVersartColor: #cdf7d1;
    --buttonBorderRadius: 5px 5px;
    --buttonVersartColor: #f8fff9;
    --breadcrumbColor: #4bb752;
    --mainColor: #4bb752;
    --labelColor1: black;
    --labelColor2: #405f42;
    --borderColor: #4bb752;
    --iconColor: #4bb752;
    --backgrundColor: #d2e9d5;
    --mussfeldColor: red;
    --btnFontColor: #565655;
    --cheapestColor: #4bb752;
    --webtypColor: #ff8331;
} 

@font-face {font-family: "HelveticaNeueW01-47LtCn 692686";
    font-style: normal;
    font-weight: 400;
    src: url("../template/Default/Custom/fonts/78ccd71ef7a9924b9e71b4e9417a67ec.eot"); /* IE9*/   
    src: url("../template/Default/Custom/fonts/78ccd71ef7a9924b9e71b4e9417a67ec.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../template/Default/fonts/Custom/78ccd71ef7a9924b9e71b4e9417a67ec.woff2") format("woff2"), /* chrome firefox */
    url("../template/Default/Custom/fonts/78ccd71ef7a9924b9e71b4e9417a67ec.woff") format("woff"), /* chrome firefox */
    url("../template/Default/Custom/fonts/78ccd71ef7a9924b9e71b4e9417a67ec.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("../template/Default/Custom/fonts/78ccd71ef7a9924b9e71b4e9417a67ec.svg#Helvetica Neue LT Pro") format("svg"); /* iOS 4.1- */
}

/*font*/
body{
    font-family: "HelveticaNeueW01-47LtCn 692686", Arial, sans-serif;
    color: #565655;
    font-size: 14px;
}

.btn-font {
font-size: 16px;
color: var(--btnFontColor);
font-family: Arial, sans-serif;
}

.priceCalculatorTitle{
padding: 5 10;
background-color: var(--mainColor);
margin:0;
text-align: center;
color: var(--btnFontColor);

}
.bezug-bezeichnung{
color: var(--iconColor);
}

.flex-btn {
justify-content: center;
color: var(--iconColor);
}

.cheapest-banner {
background-color: var(--borderColor);
}

.webtyp-banner {
background-color: var(--webtypColor);
}

.meterCounter {
    border: 1px solid var(--borderColor);
    background-color: var(--backgrundColor);
}


.circle {
    position: relative;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    flex: 0 0 14px;
    height: 14px;
    background-color: var(--backgrundColor);
    border-color: var(--backgrundColor);
}

.circle.active {
    border-color: var(--breadcrumbColor);
}

.circle.done {
    background-color: var(--breadcrumbColor);
    border-color: var(--breadcrumbColor);
}

.line {
    background-color: var(--backgrundColor);
    height: 4px;
    flex: 1;
}