/* @section 1. Global Styles */
html {
    height: 100%;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main {
    background: #fff;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    -moz-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.15);
    min-height: 500px;
    padding: 0 0 20px;
}

.wrapper {
    flex: 1 0 auto;
    max-width: 82.5em;
    min-width: 300px;
    width: 100%;
}

.brandingHeader,
.brandingFooter {
    flex-shrink: 0;
}

.noNavigation + .main {
    padding-top: 10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

.lineInnerSpace .unit > .menuBar {
    margin-left: 10px
}

.breadcrumb {
    margin-left: 1em
}

.contentNavi {
    font-size: 14px;
}

.tooltip.showTooltipFirstState .tooltipFirstState,
.tooltip.showTooltipSecondState .tooltipSecondState {
    display: block;
}

.tooltip.showTooltipFirstState .tooltipSecondState,
.tooltip.showTooltipSecondState .tooltipFirstState {
    display: none;
}

@media (max-width: 980px) {
    .landing .unitSpace.size4of5,
    .contentSearch {
        width: 100%
    }

    .landing .unitSpace.size1of5,
    .contentSidebar {
        display: none
    }

    .breadcrumbs {
        width: auto
    }
}

/* @section 2.3 Teaser Ecken */

.content .cornerRight,
.content .cornerLeft {
    position: absolute;
    bottom: -9px;
    width: 8px;
    height: 8px;
    border: none
}

.content .cornerRight {
    right: -1px;
    background-position: -7px 0
}

.content .cornerLeft {
    left: -1px
}

/* @section 3.1 Sidebar */

.cornerSidebar {
    display: none;
    position: absolute;
    bottom: -8px;
    width: 7px;
    height: 7px
}

/* @section 4.1 Teaser */

.lineInnerSpace .unit > .boxTeaserMain {
    margin: 6px -8px 0 10px;
    padding: 1em;
}

.boxTeaserMain {
    background-color: #e2effd;
    background: linear-gradient(to top, #d8eafd, #e2effd);
    border: 1px solid #bccee2;
    font-size: 16px;
    position: relative;
}

.boxTeaserMain .formBox {
    background-color: #fff;
    border: 1px solid #ddd;
    display: inline-block;
    padding: 15px;
    width: 315px;
}

.boxTeaserMain .indexTeaserForm {
    text-align: center;
    width: 100%;
}

.boxTeaserMain .indexTeaserForm ul:first-child > li:not(:last-child) {
    margin-bottom: 15px;
}

.portal2000 .boxTeaserMain .indexTeaserForm ul:first-child > li:nth-child(2) {
    margin-bottom: 5px;
}

.seoForm input:not([type="checkbox"]):not([type="radio"]),
.seoForm select,
.boxTeaserMain input:not([type="checkbox"]):not([type="radio"]),
.boxTeaserMain select {
    margin: 0;
    width: 170px;
}

.seoForm input:not([type="checkbox"]):not([type="radio"]),
.seoForm select {
    height: 26px;
    width: 215px;
}

.seoForm .cityLine .city,
.boxTeaserMain .cityLine .city {
    display: none;
}

.seoForm .withCity input.jsAjaxPlz:not([type="checkbox"]):not([type="radio"]),
.seoForm input.jsAjaxPlz.hadCity:not([type="checkbox"]):not([type="radio"]),
.boxTeaserMain .withCity input.jsAjaxPlz:not([type="checkbox"]):not([type="radio"]),
.boxTeaserMain input.jsAjaxPlz.hadCity:not([type="checkbox"]):not([type="radio"]) {
    width: 56px;
}

.boxTeaserMain .gasCalculator .withCity input.jsAjaxPlz:not([type="checkbox"]):not([type="radio"]),
.boxTeaserMain .gasCalculator input.jsAjaxPlz.hadCity:not([type="checkbox"]):not([type="radio"]) {
    width: 59px;
}

.seoForm .withCity input.city,
.seoForm .hadCity ~ input.city,
.boxTeaserMain .withCity input.city,
.boxTeaserMain .hadCity ~ input.city {
    border-left: 0;
    display: inline-block;
    margin-left: -2px;
    width: 116px;
}

.seoForm .withCity input.city,
.seoForm .hadCity ~ input.city {
    width: 161px;
}

.seoForm .withCity input.city.hidden {
    display: none;
}

.seoForm .cityLine .icoError,
.boxTeaserMain .cityLine .icoError,
.minorTeasers .icoError {
    font-size: 13px;
    margin-left: -26px;
}

.seoForm .formButton button,
.boxTeaserMain .formButton button {
    font-size: 16px;
}

.seoForm .formButton button {
    margin-left: 150px;
    width: 215px;
}

.boxTeaserMain .sloganMain {
    color: #2a4d8f;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.62;
    margin-bottom: 15px;
    text-align: center;
}

.boxTeaserMain .advantages {
    display: inline-block;
    margin: 0 10px 0 20px;
    vertical-align: top;
    width: calc(100% - 401px);
}

.boxTeaserMain .advantages .title {
    color: #2A4D8F;
    text-align: center;
    margin-bottom: 10px;
}

.seals .seal-widget {
    float: left;
    height: 67px;
    transform: scale(.55);
    transform-origin: 0 0;
    width: 167px
}

.boxTeaserMain .advantages .badgeSeal {
    bottom: 1px;
    position: absolute;
    right: 0;
}

.boxTeaserMain .advantages .badgeSeal .seal {
    margin: 0;
}

.teaserMain .advantagesList {
    display: flex;
    flex-direction: column;
    height: 115px;
    justify-content: space-between;
    margin-top: 15px;
}

.advantagesList li span {
    color: #2A4D8F;
    display: inline-block;
    vertical-align: middle;
}

.teaserMain .advantagesList li {
    display: block;
    padding: 2px 0 2px 35px;
    position: relative;
}

.teaserMain .advantagesList li .ico {
    left: 0;
    margin-top: -15px;
    position: absolute;
    top: 40%;
}

.advantagesList .advantagesHeadline {
    font-weight: 500;
    margin-bottom: 10px
}

.advantagesList .icoTickLarge {
    margin-right: 5px
}

.formBox .formRadio label {
    margin-right: 15px
}

.formBox .formSelect label,
.formBox .formInput label {
    line-height: 22px
}

.formBox .formButton {
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center
}

/* @section 4.1 Index */

.ui-tabs {
    margin: 0 5px
}

.ui-tabs-panel {
    padding: 10px 15px
}

/* @section 4.2 Index Boxen */

.minorTeasers {
    margin: 0 5px;
}

.box .boxImg {
    background-color: #FFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 4px #ABABAB;
    padding: 2px;
    display: inline-block
}

.boxDefault {
    padding: 10px 3%;
}

.boxDefault select.error {
    border-radius: 0 .35em .35em 0;
}

.boxDefault .boxIndexList {
    float: left;
    margin-right: 15px;
    margin-top: 5px;
    vertical-align: top;
    width: 215px;
}

.boxDefault .titleThirdLevel {
    font-size: 22px;
}

/* @section 4.2.1 Form Box */

.boxIndexForm {
    box-sizing: border-box;
    margin: 0 5px;
    padding: 10px 15px;
    position: relative;
    width: calc(50% - 10px);
}

.boxIndexForm form {
    display: inline-block;
    font-size: 16px;
    margin-top: 5px;
    vertical-align: top;
    width: calc(100% - 116px);
}

.boxIndexForm .badgeDefault {
    background-position: -262px top;
    width: 93px;
    height: 93px;
    position: absolute;
    right: -1px;
    top: -1px
}

.boxIndexForm .badgeDefault strong {
    width: 60px;
    height: 60px;
    text-indent: -999em;
    display: inline-block;
    margin: 2px 0 0 36px
}

.boxIndexForm .boxImg {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ababab;
    display: inline-block;
    margin-top: 8px;
    padding: 2px;
}

.boxIndexForm .formButton {
    margin-bottom: 0;
    margin-top: 10px;
}

.boxIndexForm .formSelect label,
.boxIndexForm .formInput label {
    font-weight: 500;
    line-height: 1.8em
}

.boxIndexForm input:not([type="checkbox"]):not([type="radio"]),
.boxIndexForm select,
.boxIndexForm li.formButton .slidingButton {
    width: 183px;
}

.boxIndexForm input:not([type="checkbox"]):not([type="radio"]),
.boxIndexForm select {
    height: 26px;
}

.boxIndexForm li.formRadio label {
    vertical-align: middle;
}

.boxIndexForm li.formRadio input {
    margin-left: 10px;
    margin-right: 4px;
    vertical-align: middle;
}

.boxIndexForm li.formRadio input:first-of-type {
    margin-left: 0;
}

.boxIndexPv .boxImgInner {
    background-position: 0 0;
}

.boxVerticallyCenteredContent {
    align-items: center;
    display: flex;
}

.boxIndexList {
    display: inline-block;
    font-size: 16px;
    margin: 0 0 0 10px;
    vertical-align: top;
}

.boxIndexSw .titleThirdLevel,
.boxIndexSlex .titleThirdLevel {
    margin-bottom: 10px;
}

.boxIndexSw .readMore,
.boxIndexSlex .readMore {
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
}

.boxIndexList h3 {
    margin-bottom: 10px;
}

.boxIndexHPv .badgeHPv {
    background-position: -295px -220px;
}

.boxIndexHPv form {
    width: 215px;
    margin-right: 10px;
    margin-top: 23px
}

.boxIndexHPv .formInputFirst {
    width: 35%;
    float: left;
    margin-right: 5%
}

.boxIndexHPv .formInputSecond {
    width: 60%;
    float: left
}

.boxIndexHPv .formInputFirst input:not([type="checkbox"]):not([type="radio"]) {
    width: 70px
}

.boxIndexHPv .formInputSecond input:not([type="checkbox"]):not([type="radio"]) {
    width: 125px
}

.boxIndexHPv .formSelect select {
    width: 210px
}

.input-box {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.boxSEO .icoTickList {
    font-size: 16px;
}

@media (max-width: 980px) {
    .sidebarSeo {
        display: none;
    }

    .contentSeo {
        width: 100%;
    }

    .lineInnerSpace .unit > .boxTeaserMain {
        margin: 6px 10px 0;
        height: auto;
    }

    .boxTeaserMain .cornerRight {
        display: none;
    }

    .boxIndexForm {
        text-align: center;
    }

    .boxDefault.boxIndexForm .boxImg,
    .boxIndexSw .boxImg,
    .boxIndexSlex .boxImg {
        display: none;
    }

    .boxIndexList {
        margin-left: 0;
    }

    .boxDefault.boxIndexForm form {
        margin: 1em 0 0;
        width: 100%;
    }

    .boxIndexForm .badgeDefault {
        display: none;
    }

    .boxIndexForm .formDefault li {
        margin-bottom: 1em;
        text-align: center;
        width: 100%;
    }

    .boxIndexForm .formDefault li {
        text-align: center;
    }

    .boxIndexForm li.formRadio {
        margin-bottom: .5em;
    }

    .boxIndexForm li.formButton.top-br .slidingButton {
        margin-top: 12px;
    }

    .boxIndexForm .formSelect label,
    .boxIndexForm .formInput label {
        display: inline-block;
        width: 140px;
    }

    .boxIndexForm .formDefault input:not([type="checkbox"]):not([type="radio"]),
    .boxIndexForm .formDefault select {
        height: 2em;
    }

    .contentNavi {
        font-size: 12px;
    }
}

@media (max-width: 800px) {
    .contentNavi {
        display: none;
        font-size: 14px;
    }

    .contentIndex {
        width: 100%;
    }

    .boxTeaserMain .advantages {
        margin-left: 15px;
    }

    .boxIndexForm li.formButton.top-br .slidingButton {
        margin-top: 18px;
    }
}

@media (max-width: 650px) {
    .content > .size3of8 {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .boxTeaserMain .formBox {
        border: 0;
    }

    .boxIndexForm {
        height: auto;
        padding-bottom: 1.5em;
        width: calc(100% - 10px);
    }

    .minorTeasers .box + .box {
        margin-top: 10px;
    }

    .lineInnerSpace .unit > .boxTeaserMain {
        height: auto;
        margin: 0 10px 1em;
        padding: 1em;
        text-align: center;
    }

    .boxTeaserMain.teaserMain .indexTeaserForm {
        width: 100%;
        font-size: 1em;
        margin: 0;
    }

    .boxTeaserMain input:not([type="checkbox"]):not([type="radio"]),
    .boxTeaserMain select {
        height: 2em;
    }

    .ui-autocomplete .ui-menu-item {
        margin: 0;
    }

    .boxTeaserMain.teaserMain .formBox {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        background: none;
    }

    .boxTeaserMain li {
        margin-top: 1em;
    }

    .boxTeaserMain .formSlider {
        margin: 0;
    }

    .boxTeaserMain .sliderDummys {
        margin-bottom: 1em;
    }

    .boxDefault.boxIndexForm .boxImg {
        margin-left: 10px;
    }

    .boxDefault.boxIndexForm .boxImg,
    .boxIndexSw .boxImg,
    .boxIndexSlex .boxImg {
        display: inline-block;
    }

    .boxIndexList {
        margin-left: 10px;
    }

    .boxDefault.boxIndexForm form {
        width: calc(100% - 136px);
    }

    .indexIndex .size1of2 {
        width: 100%;
    }

    .indexIndex .size1of2:first-child {
        margin-bottom: 1em;
    }

    .boxNews.box.boxAlternative dd {
        width: 100%;
    }

    .boxTeaserMain .advantagesList,
    .boxNews.box.boxAlternative dt,
    .boxSeo .boxImg {
        display: none;
    }

    .boxTeaserMain .advantages {
        margin: 15px 0 0;
        width: 100%;
    }

    .boxSeo.boxAlternative .text {
        width: 100%;
    }

    .boxIndexForm li.formButton.top-br .slidingButton {
        margin-top: 0;
    }
}

/* @section 4.2.1 Regions Box */

.boxRegion {
    font-size: 16px;
    line-height: 1.62;
    padding-right: 0;
}

.boxRegion .map {
    background-position: -313px -7px
}

.boxRegion .articleProvider dd {
    margin-bottom: 1em
}

.boxRegion .readMore {
    display: inline-block
}

.boxRegion .articleProvider img {
    width: 105px;
    height: 30px
}

.boxRegion img.e-wie-einfach {
    background-position: -415px -285px
}

.boxRegion img.stromio {
    background-position: -415px -315px
}

.boxRegion img.eprimo {
    background-position: -415px -345px
}

.boxRegion img.prioenergie {
    background-position: -415px -375px
}

.boxRegion img.extra-energie {
    background-position: -415px -405px
}

.boxRegion img.gruenwelt-energie {
    background-position: -415px -435px
}

@media (min-width: 601px) {
    .boxRegion .articleProvider,
    .boxRegion .articleProvider dt,
    .boxRegion .articleProvider dd {
        display: inline-block;
    }

    .boxRegion .articleProvider {
        width: 62%
    }

    .boxRegion .articleProvider dt {
        width: 29%;
        vertical-align: top
    }

    .boxRegion .articleProvider dd {
        width: 70%
    }

    .boxRegion .regionMap {
        float: right;
        margin: 10px 10px 0 0;
    }
}

@media (min-width: 651px) {
    .boxTeaserMain .formButton {
        text-align: right;
        margin-bottom: 0;
    }

    .boxTeaserMain .formButton button {
        width: 170px;
    }

    .boxTeaserMain .gasCalculator .formButton button {
        width: 173px;
    }
}

@media (max-width: 600px) {
    .boxRegion .articleProvider {
        width: 100%;
    }

    .boxRegion .articleProvider dt {
        float: left;
        width: auto;
        margin-right: 0.5em;
    }

    .boxRegion .articleProvider dd {
        width: auto;
    }

    .boxRegion .regionMap {
        float: inherit;
        margin: 10px auto 0;
        text-align: center;
    }
}

/* @section 4.3 Vergleichsfilter */

.calculatorFilter,
.resultsTable .savings {
    background-color: transparent;
}

.resultsTable thead .second {
    background-color: transparent;
    color: #666;
}

.resultsTable .tariffNumbering {
    color: #c3c3c3;
    height: 1.62em;
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 1;
}

.resultsTable .badgeBox + .tariffNumbering {
    top: 47px;
}

.resultsTable .numberingForcedSpace {
    display: inline-block;
    padding-top: 25px;
}

/* @section 4.7 SEO */

.contentSeo .alignleft {
    float: left;
    margin: 0 20px 10px 0
}

.contentSeo .alignright {
    float: right;
    margin: 0 0 10px 20px
}

.contentSeo .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px
}

.contentSeo {
    padding: 0
}

.newsDetailsTitel {
    line-height: 1.25em
}

.contentSeo h2,
.contentSeo h3 {
    font-size: 18px;
    line-height: 1.62;
    margin-bottom: 0.5em;
}

.contentSeo > .box > p {
    font-size: 16px;
    line-height: 1.62;
    margin-bottom: 1em;
}

.contentSeo > .box > p.textSmaller {
    font-size: 12px;
}

.contentSeo > .box > em {
    font-size: 16px;
    line-height: 1.62;
}

.contentSeo .boxTitle {
    margin-bottom: 0;
}

.contentSeo .list {
    font-size: 16px;
    line-height: 1.62;
}

@media (max-width: 600px) {
    .contentSeo .box > *:not(iframe),
    .contentSeo .box img {
        height: auto;
        max-width: 100%;
    }

    .contentSeo .box iframe {
        max-width: 100%;
    }

    .seoForm .popover,
    .seoForm .image {
        display: none;
    }

    .seoForm .formDefault {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .seoForm .formButton button {
        margin-left: 0;
    }
}

@media (min-width: 501px) and (max-width: 600px) {
    .seoNews .seoNewsBox dt {
        width: 45%;
    }

    .seoNews .seoNewsBox dd {
        width: 53%;
    }
}

@media (max-width: 500px) {
    .seoNews .unitSpace {
        margin-bottom: 1em;
        width: 100%;
    }
}

/* @section 4.7.1 Strom News Seite */

.seoForm {
    clear: both;
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
}

.seoForm .formDefault,
.seoForm .titleThirdLevel {
    position: relative;
    z-index: 1;
}

.seoForm .badgeDefault {
    background-position: -262px 0;
    height: 93px;
    width: 93px;
    position: absolute;
    right: -1px;
    top: -1px
}

.seoForm .badgeDefault strong {
    background-position: -293px -160px;
    width: 55px;
    height: 55px;
    text-indent: -999em;
    display: inline-block;
    margin: 3px 0 0 33px
}

.seoForm .formInput {
    position: relative
}

.seoForm .popover {
    left: 374px;
    padding: 7px 32px 7px 7px;
    position: absolute;
    top: -10px;
    width: 120px;
    z-index: 1;
}

.seoForm .closeCheck,
.seoForm .closeCheck:checked + .popover {
    display: none;
}

.seoForm label.formLabel {
    display: inline-block;
    font-weight: 500;
    margin-right: 10px;
    text-align: right;
    width: 140px;
}

.seoForm label.labelSmall {
    width: auto;
    font-weight: normal;
    margin-right: 20px;
    margin-left: 5px
}

.seoForm li {
    margin-top: 10px
}

.seoForm li.formRadio input {
    vertical-align: middle;
}

@media (max-width: 550px) {
    .lineInnerSpace .unit > .boxTeaserMain {
        margin-left: 5px;
        margin-right: 5px;
    }

    .minorTeasers {
        margin: 0;
    }

    .minorTeasers .box + .box {
        margin-top: 15px;
    }
}

.providerInfo {
    float: right;
    margin: 0 0 10px 10px
}

.providerInfo .addressInfo {
    padding: 10px 15px;
    border: 1px solid #d6d6d6;
    font: 11px/14px Rubik, sans-serif;
    background: #f6f6f6
}

.providerInfo .addressInfo p {
    line-height: 16px;
    margin: 0
}

.providerInfo .addressInfo a {
    display: block;
    margin-top: 5px
}

/* @section 4.7.2 Box Bundesländer */

/* @section 4.7.2.1 Global */

.boxState a {
    padding: 5px;
    text-align: center;
    font-weight: 500;
    color: #0d65be;
    text-decoration: none
}

.boxState strong {
    white-space: nowrap
}

.boxState a:hover, .boxState strong:hover {
    color: #000;
    border-color: #000
}

.boxState a:hover hr {
    background: #000
}

.boxState .cityDot {
    display: block;
    font-size: 2em;
    line-height: 8px
}

.boxState, .boxCountry {
    display: inline-block;
    vertical-align: middle
}

.boxState {
    text-align: center;
    width: 60%
}

.boxCountry {
    width: 40%;
    text-align: center;
    color: #909090
}

.boxCountry strong {
    display: block;
    font-weight: 500
}

/* @section 4.7.2.2 Bundesländer */

.stateMap {
    position: relative;
    display: inline-block;
    background: url('../img/sprite_states.png')
}

.stateMap > a {
    position: absolute
}

.stateMap hr {
    height: 1px;
    background: #0d65be;
    border: none;
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    margin: 0 2px 0 -2px
}

.stateMap strong + hr {
    margin: 0 -2px 0 2px
}

.stateMap .alignVert {
    white-space: nowrap
}

.alignVert .cityDot {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle
}

/* Schleswig-Holstein */
.stateSH .stateMap {
    background-position: 0 -196px;
    width: 215px;
    height: 219px
}

.cityFlensburg {
    top: 5px;
    left: 45px
}

.citySchleswig {
    top: 55px;
    left: 70px
}

.cityHeide {
    top: 80px;
    left: 30px
}

.cityKiel {
    top: 85px;
    left: 115px
}

.cityLuebeck {
    top: 135px;
    left: 140px
}

/* Mecklenburg-Vorpommern */
.stateMV .stateMap {
    background-position: 0 -420px;
    width: 278px;
    height: 176px
}

.cityRostock {
    top: 55px;
    left: 95px
}

.citySchwerin {
    top: 85px;
    left: 35px
}

.cityWaren {
    top: 115px;
    left: 115px
}

/* Hamburg */
.stateHH .stateMap {
    background-position: 0 -601px;
    width: 184px;
    height: 198px
}

/* Niedersachsen */
.stateNI .stateMap {
    background-position: 0 -804px;
    width: 217px;
    height: 227px
}

.cityHannover {
    top: 85px;
    left: 90px
}

.cityHannover .cityDot {
    text-indent: 10px
}

.cityBraunschweig {
    top: 115px;
    left: 155px
}

.cityBraunschweig .cityDot {
    text-indent: -60px
}

/* Bremen */
.stateHB .stateMap {
    background-position: 0 -1036px;
    width: 285px;
    height: 155px
}

/* Brandenburg */
.stateBB .stateMap {
    background-position: 0 -1196px;
    width: 217px;
    height: 227px
}

.cityBrandenburg {
    top: 50px;
    left: 0;
    max-width: 80px
}

.cityBrandenburg strong {
    white-space: normal
}

.cityBrandenburg .cityDot {
    text-indent: 40px
}

.cityPotsdam {
    top: 90px;
    left: 60px
}

.cityFrankfurtOder {
    top: 70px;
    left: 115px
}

.cityFrankfurtOder .cityDot {
    text-indent: 60px
}

.cityCottbus {
    top: 130px;
    left: 155px
}

/* Berlin */
.stateBE .stateMap {
    background-position: 0 -1660px;
    width: 215px;
    height: 203px
}

/* Sachsen-Anhalt */
.stateST .stateMap {
    background-position: 0 -1427px;
    width: 150px;
    height: 227px
}

.cityMagdeburg {
    top: 50px;
    left: 25px
}

.cityWittenberg {
    top: 90px;
    left: 85px
}

.cityHalle {
    top: 120px;
    left: 55px
}

/* Nordrhein-Westfalen */
.stateNRW .stateMap {
    background-position: 0 -1868px;
    width: 251px;
    height: 244px;
    margin-left: 90px
}

.cityMuenster {
    top: 25px;
    left: 100px
}

.cityGelsenkirchen {
    top: 70px;
    left: 35px
}

.cityDortmund {
    top: 85px;
    left: 95px
}

.cityDuisburg {
    top: 100px;
    left: -30px
}

.cityDuisburg hr {
    width: 20px
}

.cityEssen {
    top: 100px;
    left: 55px
}

.cityBochum {
    top: 95px;
    left: 80px
}

.cityBochum hr {
    width: 80px
}

.cityKrefeld {
    top: 115px;
    left: -70px
}

.cityKrefeld hr {
    width: 60px
}

.cityWuppertal {
    top: 125px;
    left: 75px
}

.cityWuppertal hr {
    width: 60px
}

.cityMoenchengladbach {
    top: 140px;
    left: -95px
}

.cityDuesseldorf {
    top: 145px;
    left: 20px
}

.cityKoeln {
    top: 170px;
    left: 35px
}

.cityAachen {
    top: 170px;
    left: -45px
}

.cityBonn {
    top: 195px;
    left: 60px
}

/* Thüringen */
.stateTH .stateMap {
    background-position: 0 -2119px;
    width: 234px;
    height: 227px
}

.cityErfurt {
    top: 55px;
    left: 75px
}

.cityEisenach {
    top: 80px;
    left: 5px
}

.cityWeimar {
    top: 85px;
    left: 85px
}

.cityJena {
    top: 70px;
    left: 125px
}

.cityGera {
    top: 95px;
    left: 160px
}

/* Hessen */
.stateHE .stateMap {
    background-position: -157px -1429px;
    width: 139px;
    height: 226px
}

.cityKassel {
    top: 5px;
    left: 75px
}

.cityGiessen {
    top: 35px;
    left: 30px
}

.cityMarburg {
    top: 85px;
    left: 15px
}

.cityFulda {
    top: 60px;
    left: 90px
}

.cityFrankfurtMain {
    top: 110px;
    left: 45px
}

.cityWiesbaden {
    top: 125px;
    left: -5px
}

.cityDarmstadt {
    top: 155px;
    left: 20px
}

/* Sachsen */
.stateSN .stateMap {
    background-position: 0 -2351px;
    width: 280px;
    height: 227px
}

.cityLeipzig {
    top: 15px;
    left: 15px
}

.cityChemnitz {
    top: 105px;
    left: 55px
}

.cityDresden {
    top: 75px;
    left: 125px
}

/* Rheinland-Pfalz */
.stateRP .stateMap {
    background-position: 0 -2583px;
    width: 159px;
    height: 220px
}

.cityKoblenz {
    top: 35px;
    left: 70px
}

.cityMainz {
    top: 70px;
    left: 115px
}

.cityHamm {
    top: 105px;
    left: 120px
}

.cityTrier {
    top: 90px;
    left: 15px
}

.cityKaiserslautern {
    top: 140px;
    left: 55px
}

/* Bayern */
.stateBY .stateMap {
    background-position: 0 -2808px;
    width: 202px;
    height: 220px
}

.cityAugsburg {
    top: 140px;
    left: 35px
}

.cityMuenchen {
    top: 130px;
    left: 95px
}

.cityMuenchen .cityDot {
    text-indent: -40px
}

.cityNuernberg {
    top: 45px;
    left: 50px
}

/* Baden-Württemberg */
.stateBW .stateMap {
    background-position: 0 -3033px;
    width: 178px;
    height: 215px
}

.cityMannheim {
    top: 10px;
    left: 60px
}

.cityKarlsruhe {
    top: 55px;
    left: -15px
}

.cityStuttgart {
    top: 75px;
    left: 90px
}

/* Saarland */
.stateSL .stateMap {
    background-position: 0 -3253px;
    width: 248px;
    height: 212px
}

.cityHomburg {
    top: 80px;
    left: 195px
}

.citySaarlouis {
    top: 100px;
    left: 50px
}

.citySaarbruecken {
    top: 120px;
    left: 110px
}

/* @section 4.7.2.3 Karte */

.titleSEO .titleDefaultSub {
    font-size: 0.8em
}

.countryMap {
    background: url('../img/sprite_states.png');
    display: block;
    height: 136px;
    margin: 5px auto;
    overflow: hidden;
    text-align: left;
    width: 102px
}

.countryMapInner {
    background: url('../img/sprite_states.png')
}

.countryInfo {
    display: inline-block;
    font: 11px/12px Rubik, sans-serif;
    max-width: 110px;
    text-align: left
}

.icoCountryInfo {
    background: #fa7d00;
    background: -moz-linear-gradient(top, #fa7d00 50%, #fa5600 50%);
    background: -ms-linear-gradient(top, #fa7d00 50%, #fa5600 50%);
    background: -o-linear-gradient(top, #fa7d00 50%, #fa5600 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#fa7d00, 50%), color-stop(#fa5600, 50%));
    background: -webkit-linear-gradient(top, #fa7d00 50%, #fa5600 50%);
    background: linear-gradient(top, #fa7d00 50%, #fa5600 50%);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: inline-block;
    float: left;
    height: 10px;
    margin: 0 5px 10px 0;
    width: 10px
}

/* Bundesländer */

.stateSH .countryMapInner {
    background-position: -107px -1px;
    width: 32px;
    height: 30px;
    margin: 1px 0 0 32px
}

.stateMV .countryMapInner {
    background-position: -145px 0;
    width: 43px;
    height: 24px;
    margin: 11px 0 0 53px
}

.stateHH .countryMapInner {
    background-position: -216px -100px;
    width: 8px;
    height: 7px;
    margin: 22px 0 0 43px
}

.stateNI .countryMapInner {
    background-position: -193px 0;
    width: 50px;
    height: 46px;
    margin: 21px 0 0 11px
}

.stateHB .countryMapInner {
    background-position: -218px -112px;
    width: 7px;
    height: 11px;
    margin: 25px 0 0 29px
}

.stateBB .countryMapInner {
    background-position: -105px -46px;
    width: 41px;
    height: 39px;
    margin: 26px 0 0 59px
}

.stateST .countryMapInner {
    background-position: -152px -46px;
    width: 30px;
    height: 38px;
    margin: 34px 0 0 50px
}

.stateBE .countryMapInner {
    background-position: -218px -89px;
    width: 8px;
    height: 6px;
    margin: 39px 0 0 76px
}

.stateNRW .countryMapInner {
    background-position: -187px -48px;
    width: 40px;
    height: 39px;
    margin-top: 43px
}

.stateTH .countryMapInner {
    background-position: -106px -90px;
    width: 31px;
    height: 28px;
    margin: 59px 0 0 43px
}

.stateHE .countryMapInner {
    background-position: -143px -89px;
    width: 28px;
    height: 41px;
    margin: 59px 0 0 19px
}

.stateSN .countryMapInner {
    background-position: -174px -89px;
    width: 39px;
    height: 28px;
    margin: 58px 0 0 64px
}

.stateRP .countryMapInner {
    background-position: -107px -134px;
    width: 27px;
    height: 34px;
    margin: 72px 0 0 1px
}

.stateBY .countryMapInner {
    background-position: -137px -133px;
    width: 59px;
    height: 58px;
    margin: 78px 0 0 32px
}

.stateBW .countryMapInner {
    background-position: -202px -134px;
    width: 35px;
    height: 40px;
    margin: 91px 0 0 14px
}

.stateSL .countryMapInner {
    background-position: -107px -173px;
    width: 14px;
    height: 10px;
    margin: 92px 0 0 2px
}

/* @section 3. Layout */

/* @section 3.1 Sidebar */

.titleSidebar {
    margin-bottom: 10px;
    position: relative
}

.boxSidebar {
    padding-left: 5px;
    color: #909090;
    margin-bottom: 20px
}

.boxSidebarInner {
    position: relative;
    background: #ecf8ff
}

.boxSidebarStep {
    position: relative
}

.boxSidebarLeft .titleSidebar,
.boxSidebarLeft .boxSidebarInner,
.boxSidebarLeft .boxSidebarStep {
    margin-left: -18px;
    margin-right: -5px
}

.boxSidebarLeft .cornerSidebar {
    display: block;
    left: -1px
}

.boxSidebarLeft .boxSidebarStep .cornerSidebar {
    left: 0;
    top: 100%
}

.boxSidebarRight .titleSidebar,
.boxSidebarRight .boxSidebarInner,
.boxSidebarRight .boxSidebarStep {
    margin-left: -5px;
    margin-right: -17px
}

.specialcustomerIndex .boxSidebarRight .titleSidebar,
.specialcustomerIndex .boxSidebarRight .boxSidebarInner,
.specialcustomerIndex .boxSidebarRight .boxSidebarStep {
    margin-right: 0;
}

.specialcustomerIndex .boxSidebarRight .cornerSidebar {
    right: 0;
}

.boxSidebarRight .cornerSidebar {
    display: block;
    right: -1px;
    background-position: -41px 0
}

.boxSidebarRight .boxSidebarStep .cornerSidebar {
    right: 0;
    top: 100%
}

.icoTickList {
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}

.icoTickList li {
    line-height: 1.25em;
    margin-bottom: 0.5em;
    position: relative;
}

.icoTickList li:last-child {
    margin-bottom: 0;
}

.icoTickList .icoTick {
    left: -20px;
    position: absolute;
}

/* @section 3.1.1 Faq */

/* @section 3.1.4 Check */

.boxCheck ul {
    margin-bottom: 10px
}

.boxCheck ul li {
    margin-left: 10px
}

.boxCheck ul li.sidebarHeadline {
    font-weight: 500;
    margin: 0 0 2px 0
}

.boxCheck ul li.sidebarHeadline span {
    float: left
}

.boxCheck .editLink {
    font-size: 0.8em;
    text-decoration: underline;
    font-weight: normal;
    float: right
}

/* @section 3.1.6 Feedback */

.boxFeedback {
    position: relative
}

.boxFeedback .boxText {
    width: 100%
}

.linkFeedback {
    font-size: 10px
}

/* @section 3.1.7 Anzeige */

.productOfMonth .indication {
    color: #909090;
    float: right
}

.productOfMonth .advertisement {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    -ms-transition: box-shadow 0.2s;
    -o-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}

.productOfMonth .advertisement:hover {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.productOfMonth .innerBox li {
    font: 1em/1.5em Rubik, sans-serif;
    position: relative;
    padding-left: 1.325em;
}

.productOfMonth .innerBox li:before {
    position: absolute;
    left: 0;
    top: 50%;
    content: '';
}

.productOfMonth .logo {
    display: block;
    text-indent: -999em;
}

/* @section 3.1.7.1 E wie einfach */

.productOfMonth.EWE .advertisement {
    background: #000;
    color: #fff;
    padding: 10px;
}

.productOfMonth.EWE .advertisement p {
    color: #12b4fe;
    line-height: 1.4em;
    text-align: center;
}

.productOfMonth.EWE .innerBox li {
    font-size: 0.9em;
}

.productOfMonth.EWE .innerBox li:before {
    width: 11px;
    height: 11px;
    margin-top: -5px;
}

.productOfMonth.EWE .logo {
    background-position: -81px -77px;
    width: 102px;
    height: 22px;
    margin: 0 auto 5px;
}

/* @section 3.1.7.2 voltera */

.productOfMonth.voltera .advertisement {
    background: #fff;
    border: 2px solid #e2000a;
    color: #e2000a;
}

.productOfMonth.voltera .advertisement p {
    text-align: center;
    font: bold 0.875em Rubik, sans-serif;
    margin: 0.5em 0;
}

.productOfMonth.voltera .innerBox {
    background: #E2000A;
    color: #fff;
    padding: 0.5em 0;
}

.productOfMonth.voltera .innerBox li {
    font-weight: 500;
}

.productOfMonth.voltera .innerBox li:before {
    border: 5px solid;
    border-color: transparent transparent transparent #fff;
    border-color: rgba(227, 0, 8, 0) rgba(227, 0, 8, 0) rgba(227, 0, 8, 0) #fff;
    left: 0.5em;
    margin-top: -5px;
}

.productOfMonth.voltera .logo {
    background-position: -82px -103px;
    width: 109px;
    height: 30px;
    margin: 0.5em 1em;
}

/* @section 4.2.3 News Box */

.boxNews {
    padding: 0
}

.boxNews dl {
    border-bottom: 1px dotted #d2cdd2;
    padding: 15px
}

.boxNews dl.last {
    border-bottom: 0
}

.boxNews dt {
    display: inline-block;
    width: 11%;
    margin-right: 3%;
    vertical-align: top
}

.boxNews dd {
    display: inline-block;
    font-size: 16px;
    line-height: 1.62;
    width: 85%;
}

.boxNews img {
    width: 75px;
    height: 75px;
    display: block
}

.newsHeadline .titleFifthLevel,
.newsHeadline.titleFifthLevel {
    font-size: 18px;
    line-height: 1.62;
}

.boxNews .newsHeadline {
    float: left;
}

.boxNews .info {
    color: #909090;
    float: right;
    font-size: 16px;
}

.linkMoreNews {
    background: #f8f8f8;
    border: 1px solid #d2cdd2;
    border-width: 0 1px 1px 1px;
    display: block;
    font-size: 16px;
    margin: 0 5px;
    padding: 10px;
    text-align: right;
}

/* @section 4.7 SEO */

/* @section 4.7.1 SEO-Elements */

.seoContent .titleSEO {
    font-size: 18px;
    line-height: 1.62;
    margin: 10px 0 0;
}

.seoContent .titleSEO + .line,
.seoContent .titleSEO + .lineSpace {
    margin: 0;
    border-top: 0
}

.paginationHeadline li {
    float: left;
    height: 20px;
    border-right: 1px solid #D6D6D6;
    padding: 0 5px;
}

.paginationHeadline li a {
    color: #0022AA;
    font-weight: normal;
    cursor: pointer
}

.paginationHeadline li .anchorLinkActive {
    color: #F95400;
    font-weight: 500;
    font-style: italic
}

div.seoNews {
    margin: 0
}

.seoNewsBox {
    font-size: 16px;
    padding: 10px;
}

.seoNewsBox a {
    text-decoration: underline
}

.seoNewsBox p {
    margin-bottom: 5px
}

.seoNewsBox .seoBoxHeadline {
    color: #2a4d8f;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.62;
}

.seoNewsBox .seoBoxContent {
    height: 42px;
    overflow: hidden
}

.seoNewsBox img {
    width: 75px;
    height: 75px;
    display: block
}

.seoNewsBox dt {
    display: inline-block;
    width: 36%;
    vertical-align: top
}

.seoNewsBox dd {
    display: inline-block;
    width: 62%;
    line-height: 1.4em
}

.seoLinkBox ul {
    font-size: 16px;
    width: 100%;
}

.seoLinkBox ul li {
    width: 33%;
    float: left;
}

.seoLinkBox a {
    text-decoration: underline
}

.seoAccordion p {
    margin-bottom: 10px
}

.seoAccordion .boxImg {
    float: left;
    margin: 0 15px 10px 0
}

.seoAccordion img {
    display: block;
    height: 120px
}

.seoTableBox {
    border: 1px solid #D6D6D6;
    padding: 0
}

.seoTableBox table {
    width: 100%
}

.seoTableBox th,
.seoTableBox td {
    padding: 5px 2%;
    text-align: left
}

.seoTableBox thead tr {
    border-bottom: 1px solid #C3C3C3;
    background: #F5F5F5;
    background: -moz-linear-gradient(top, #fff, #F5F5F5);
    background: -ms-linear-gradient(top, #fff, #F5F5F5);
    background: -o-linear-gradient(top, #fff, #F5F5F5);
    background: -webkit-linear-gradient(top, #fff, #F5F5F5);
    background: linear-gradient(top, #fff, #F5F5F5);
}

.seoTableBox tbody tr {
    border-bottom: 1px dotted #C3C3C3
}

.seoTableBox .odd {
    background-color: #f8fbff
}

.seoTableBox .last {
    border-bottom: 0
}

.seoWidgetResults .textSmaller {
    font-size: 12px;
    margin-top: 0.5em;
}

/* @section 4.7.1 Galerie */

.seoGalerie {
    padding: 10px
}

.seoGalerie .listSeoMenu li {
    background-position: -12px -1869px;
    margin-left: 5px;
    padding-left: 15px
}

.imageGallerySEO {
    margin: 5px;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5)
}

.imageGallerySEO .jcarousel-container-horizontal {
    padding: 5px 5px 0
}

.imageGallerySEO .jcarousel-clip {
    margin: 0 5px
}

.imageGallerySEO .jcarousel-next-horizontal, .imageGallerySEO .jcarousel-prev-horizontal {
    top: 5px;
    height: 215px;
    width: 30px;
    margin: 0;
    background: #fff;
    background: rgba(255, 255, 255, 0.75);
    opacity: 1
}

.imageGallerySEO .jcarousel-next-horizontal:after, .imageGallerySEO .jcarousel-prev-horizontal:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -8px
}

.imageGallerySEO .jcarousel-prev-horizontal:after {
    background-position: -10px -518px
}

.imageGallerySEO .jcarousel-next-horizontal:after {
    background-position: -10px -488px
}

.imageGallerySEO .jcarousel-prev-disabled, .imageGallerySEO .jcarousel-next-disabled {
    opacity: 0
}

.imageGallerySEO .jcarousel-next-horizontal {
    right: 10px
}

.imageGallerySEO .jcarousel-prev-horizontal {
    left: 10px
}

.imageGallerySEO .jcarousel-item-horizontal {
    margin: 0
}

.galleryLegend {
    float: right;
    margin: 5px 10px;
    font-size: 0.825em
}

.icoEnlarge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #bccee2;
    margin: 2px 10px 5px;
    background-position: -8px -1025px;
    background-color: #e9f0f8
}

/* @section 4.7.1 Linkliste */

.boxSEO .listTableOfContent li {
    border-top: 1px dotted #ccc;
    list-style: none;
    margin-left: 5px;
    padding: 5px 5px 5px 25px;
    position: relative
}

.listTableOfContent {
    counter-reset: li
}

.listTableOfContent a {
    text-decoration: none
}

.listTableOfContent li:first-child {
    border: none
}

.listTableOfContent li:before {
    content: counter(li) '.';
    counter-increment: li;
    position: absolute;
    margin: 5px 0;
    background: #e9f0f8;
    width: 18px;
    height: 18px;
    left: 0;
    top: 0;
    text-align: center
}

/* @section 11. News Details */

.newsDetailsBox img {
    background-color: #FFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 4px #ABABAB;
    padding: 2px
}

.newsDetailsBox .date {
    color: #909090;
    font-size: 0.8em;
    text-align: right;
    margin: 0
}

.newsDetailsBox h2,
.newsDetailsBox h3 {
    margin-bottom: 5px
}

/* @section 4.7.1 Strom News Seite */

.indexAllnews .newsDetailsBox,
.newsDetailsBox.allNewsBox {
    font-size: 16px;
    line-height: 1.62;
    padding: 0;
}

.newsDetailsBox .newsDetail {
    border-top: 1px dotted #D2CDD2;
    padding: 15px 15px 10px
}

.newsDetailsBox .newsDetail.first {
    border-top: 0
}

.newsDetailsBox .newsDetail .detailsImg {
    float: left;
    margin: 0 15px 15px 0
}

.newsDetailsBox .newsDetail .detailsImg img {
    display: block;
}

.newsDetailsBox .newsHeadline {
    width: 100%
}

.newsDetailsBox .newsHeadline a {
    display: inline-block;
    width: 60%
}

.newsDetailsBox .newsHeadline .info {
    color: #909090;
    display: inline-block;
    font: 16px Rubik, sans-serif;
    text-align: right;
    vertical-align: top;
    width: 13%;
}

.newsDetailsBox + .paginationDefault {
    border-top: 0
}

.noNewsImage .newsHeadline .info {
    width: 30%
}

/*Clicked radio button with icons*/
.form-radio-group {
    display: inline-block;
    vertical-align: top;
}

.powerCalculator .form-radio-group.usg-radio-group {
    font-size: 12px;
    width: 170px;
}

.gasCalculator .form-radio-group.usg-radio-group {
    width: 173px;
}

.usg-radio-group .icon-radio-label {
    box-sizing: border-box;
    margin-left: 4px;
}

.powerCalculator .usg-radio-group .icon-radio-label {
    width: calc(25% - 3px);
}

.gasCalculator .usg-radio-group .icon-radio-label {
    /* Subtract 1px due to float point division causing
       rendering differences in browsers and overfloating */
    width: calc(((100% - 1px) / 5) - 3px);
}

.powerCalculator .usg-radio-group .icon-radio-label:first-of-type {
    margin-left: 0;
}

.form-radio-group input {
    display: none;
}

.form-radio-group label.icon-radio-label {
    border: 1px #ccc solid;
    cursor: pointer;
    display: inline-block;
    height: 3.5em;
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
}

.form-radio-group label.icon-radio-label:first-of-type {
    margin-left: 0;
}

.boxTeaserMain .form-radio-group label.icon-radio-label {
    height: 2.75em;
    padding: 1px;
}

@media (max-width: 800px) {
    .boxTeaserMain .gasCalculator .form-radio-group label.icon-radio-label {
        margin-left: 3.5px;
    }

    .boxTeaserMain .gasCalculator .form-radio-group label.icon-radio-label:first-of-type {
        margin-left: 0;
    }

    .resultsTable .tariffNumbering {
        left: 5%;
    }
}

@media (max-width: 650px) {
    .boxTeaserMain .form-radio-group.usg-radio-group {
        font-size: 16px;
    }

    .boxTeaserMain .form-radio-group label.icon-radio-label {
        height: 51.5px;
        margin-left: 2.5px;
    }
}

.boxTeaserMain .form-radio-group label.icon-radio-label:first-of-type {
    margin-left: 0;
}

.form-radio-group label .house-icon,
.form-radio-group label .man-icon {
    display: inline-block;
    vertical-align: top;
}

.form-radio-group label .icon {
    height: 100%;
    position: relative;
}

.form-radio-group .tariff-meta {
    margin-top: .5em;
    color: #a9a9a9;
    text-align: center;
}

.form-radio-group .icon {
    color: #bbb;
    height: 1em;
}

.form-radio-group input + label .icon:before {
    content: "W";
    color: inherit;
    font: 1.75em/2rem "icon pvg";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.form-radio-group input + label .house-icon:before {
    content: "X";
}

.form-radio-group input + label:nth-of-type(1) .house-icon:before {
    font-size: 24px;
}

.form-radio-group input + label:nth-of-type(2) .house-icon:before {
    font-size: 27px;
}

.form-radio-group input + label:nth-of-type(3) .house-icon:before {
    font-size: 30px;
}

.form-radio-group input + label:nth-of-type(4) .house-icon:before {
    font-size: 33px;
}

.form-radio-group input + label:nth-of-type(5) .house-icon:before {
    font-size: 36px;
}

.form-radio-group input + label .man-icon {
    width: 1em;
}

.form-radio-group input + label .man-icon.small {
    width: .5em;
}

.form-radio-group input + label .man-icon.small:before {
    font-size: .75rem;
}

.formBox #usg + label {
    display: none;
}

.formBox .usgBox {
    position: relative;
}

.formBox .usgBox .value,
.seoForm input[name="usg"] + .value,
.selectPro ~ .value {
    color: #aaa;
    line-height: 3em;
    margin-left: -2.5em;
    pointer-events: none;
    position: absolute;
    right: .5em;
    top: 0;
}

.minorTeasers input[name="usg"].selectPro ~ .value {
    left: 0;
    position: relative;
    right: auto;
}

.minorTeasers input[name="usg"].selectPro.hidden + .value {
    display: none;
}

.selectPro.hidden + .labelError {
    display: none;
}

.boxTeaserMain .formBox .usgBox .value,
.seoForm input[name="usg"] + .value,
.selectPro ~ .value {
    line-height: 1.62;
}

.selectPro + .error + .value {
    margin-left: calc(-2.5em - 20px);
}

.form-radio-group input:checked + label .icon,
.form-radio-group input:checked + label {
    border-color: #f95400;
    color: #f95400;
}

.boxTeaserMain .label,
.boxTeaserMain .label-el {
    display: inline-block;
    pointer-events: none;
    text-align: left;
    vertical-align: top;
    width: calc(100% - 170px);
}

.boxTeaserMain .gasCalculator .label,
.boxTeaserMain .gasCalculator .label-el {
    width: calc(100% - 173px);
}

.boxTeaserMain .label {
    line-height: 2em;
}

@media (max-width: 650px) {
    .newsDetailsBox .newsHeadline .info {
        width: 60%;
    }

    .boxTeaserMain .label,
    .boxTeaserMain .label-el {
        width: calc(100% - 270px);
    }

    .boxTeaserMain .gasCalculator .label,
    .boxTeaserMain .gasCalculator .label-el {
         width: calc(100% - 243px);
     }

    .boxIndexForm li.formButton .slidingButton {
        margin-left: 140px;
    }

    .boxTeaserMain .form-radio-group label.icon-radio-label {
        background-color: #fff;
    }

    .portal1000 .boxTeaserMain .slidingButton,
    .powerCalculator .form-radio-group.usg-radio-group,
    .portal1000 .boxTeaserMain input:not([type="checkbox"]):not([type="radio"]) {
        width: 214px;
    }

    .portal1000 .boxTeaserMain .city:not([type="checkbox"]):not([type="radio"]) {
        width: 160px;
    }

    .portal1000 .boxTeaserMain select.citySelect,
    .portal2000 .boxTeaserMain select.citySelect {
        width: 156px;
    }

    .portal2000 .boxTeaserMain .slidingButton,
    .portal2000 .boxTeaserMain input:not([type="checkbox"]):not([type="radio"]),
    .portal2000 .boxTeaserMain select {
        width: 234px;
    }

    .portal2000 .boxTeaserMain select.citySelect {
        width: 178px;
    }

    .seoForm {
        overflow: hidden;
    }

    .portal2000 .seoForm .image {
        opacity: .6;
    }

    .seoLinkBox ul li {
        width: 50%;
        font-size: .9em;
    }

    .seoForm .badgeDefault {
        margin-top: -13px;
        margin-right: -13px;
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -ms-transform: scale(.7);
        -o-transform: scale(.7);
        transform: scale(.7);
    }

    .seoForm.boxDefault .titleThirdLevel {
        margin: 0 30px;
        text-align: center;
    }

    .seals .seal-widget {
        position: relative;
        width: 140px;
    }

    .resultsTable .tariffNumbering {
        left: 4%;
    }
}

@media (max-width: 550px) {
    .resultsTable .tariffNumbering {
        left: 5%;
    }

    .resultsTable .indication + .badgeBox + .tariffNumbering {
        top: 70px;
    }
}

@media (max-width: 500px) {
    .newsDetailsBox .newsHeadline {
        position: relative;
    }

    .newsDetailsBox .newsDetail .detailsImg img,
    .newsDetailsBox .newsHeadline a {
        width: 100%;
    }

    .newsDetailsBox .newsHeadline .info {
        position: absolute;
        right: 0;
        top: 0;
    }

    .boxDefault.boxIndexForm .boxImg,
    .boxDefault.boxIndexSw .boxImg,
    .boxDefault.boxIndexSlex .boxImg {
        display: none
    }

    .boxTeaserMain .sloganMain {
        margin-bottom: 0;
    }

    .portal2000 .boxTeaserMain .label,
    .portal2000 .boxTeaserMain .label-el,
    .boxTeaserMain .label,
    .boxTeaserMain .label-el,
    .boxDefault.boxIndexForm form,
    .boxDefault .boxIndexList {
        width: 100%;
        text-align: center;
    }

    .boxIndexSw .readMore,
    .boxIndexSlex .readMore {
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }

    .seoForm label.formLabel {
        display: block;
        width: 100%;
    }

    .seoForm label.formLabel {
        text-align: center;
    }
}

/* @section 4.8 Sondervertragskunden Layer */

.specialcustomerContent {
    padding: 20px 10px 0;
    text-align: left;
}

body:not(.searchResults) .specialcustomerContent {
    margin-top: 15px;
}

.specialcustomerContent.landingSpecialCustomer {
    padding-top: 0;
}

.specialCustomer li {
    padding: 2px 0
}

.specialCustomer label {
    display: inline-block;
    width: 115px
}

.specialCustomer .icoError {
    margin: 0 0 0 -3px
}

.specialcustomerContent .buttons {
    margin-top: 20px;
    text-align: right
}

.specialcustomerContent .buttons a {
    margin-right: 10px
}

/* @section 5 Shoprating Weiterleitung */
.shopRating {
    text-align: center;
}

.shopRating h2 {
    margin: 2em 0 1.5em 0;
}

.shopRating p {
    margin: 2em;
}

@media (max-width:400px) {
    .boxIndexForm .formSelect label, .boxIndexForm .formInput label {
        display: block;
    }

    .boxIndexForm .formSelect label,
    .boxIndexForm .formInput label,
    .boxIndexForm li.formButton,
    .boxIndexForm li.formRadio {
        width: 100%;
        text-align: center;
    }

    .boxIndexForm li.formButton .slidingButton {
        margin: 0;
    }

    .seoLinkBox ul li {
        width: 100%;
    }
}