/*=============== Tarifrechner ===============*/
.tarifrechner-container {
    width: 100%;
}

@media only screen and (min-width: 800px) {
    .tarifrechner-container {
        padding-left: 35px;
        padding-right: 35px;
    }
}

.startseite .tarifrechner-container {
    margin-top: 50px;
}

.tarifrechner {
    width: 100%;
    background-color: #231f20;
    position: relative;
}

@media only screen and (min-width: 800px) {
    .tarifrechner {
        width: 580px;
        height: 149px;
        padding: 0 20px;
        border-radius: 1000px;
        position: absolute;
        z-index: 50;
        -webkit-transform: translateY(-70%);
        -ms-transform: translateY(-70%);
        transform: translateY(-70%);
    }

    .tarifrechner--big .tarifrechner {
        width: calc(100% - 70px);
        height: auto;
        padding: 0 60px;
        border-radius: 1000px;
        /* position: initial; */
        -webkit-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    .startseite .tarifrechner--big .tarifrechner {
        width: 100%;
        position: relative;
        -webkit-transform: initial;
        -ms-transform: initial;
        transform: initial;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner {
        padding: 0 30px;
    }
}

.tarifrechner__fieldset {
    padding: 20px 5%;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__fieldset {
        padding: 30px 5%;
    }
}

legend {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tarifrechner__ueberschrift {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 20px;
    cursor: pointer;
}

@media only screen and (min-width: 800px) {
    .tarifrechner__ueberschrift {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .tarifrechner--big .tarifrechner__ueberschrift {
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__ueberschrift {
        font-size: 36px;
    }
}

@media only screen and (min-width: 1200px) {
    .tarifrechner--big .tarifrechner__ueberschrift {
        font-size: 42px;
    }
}

.tarifrechner__hauptauswahl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__hauptauswahl {
        margin-bottom: 5px;
    }
}

.tarifrechner__versorgungstyp,
.tarifrechner__kundentyp {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media only screen and (min-width: 600px) {

    .tarifrechner__versorgungstyp,
    .tarifrechner__kundentyp {
        /* width: 46%; */
        width: 48%;
        /* width: 48.6667%; */
    }
}

@media only screen and (min-width: 900px) {

    .tarifrechner--big .tarifrechner__versorgungstyp,
    .tarifrechner--big .tarifrechner__kundentyp {
        width: 48.6667%;
    }
}

.tarifrechner__hauptauswahl label {
    width: 48%;
    color: #fff;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 25px;
}

@media only screen and (min-width: 800px) {
    .tarifrechner__hauptauswahl label {
        margin-bottom: 15px;
    }

    .tarifrechner--big .tarifrechner__hauptauswahl label {
        margin-bottom: 25px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__hauptauswahl label {
        font-size: 18px;
    }
}

.tarifrechner__hauptauswahl input {
    opacity: 0;
    width: 22px;
}

/* Visible Hidden */
.tarifrechner--default .tarifrechner__radio--strom,
.tarifrechner--default .tarifrechner__radio--gas {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
    word-wrap: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tarifrechner__hauptauswahl .tarifrechner__bezeichnung {
    margin-left: 5px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__bezeichnung {
        margin-left: 15px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__bezeichnung {
        margin-left: 25px;
    }
}

.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__strom .tarifrechner__bezeichnung,
.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__gas .tarifrechner__bezeichnung {
    margin-left: 35px;
}

@media only screen and (min-width: 900px) {

    .tarifrechner--big.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__strom .tarifrechner__bezeichnung,
    .tarifrechner--big.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__gas .tarifrechner__bezeichnung {
        margin-left: 45px;
    }
}

@media only screen and (min-width: 1024px) {

    .tarifrechner--big.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__strom .tarifrechner__bezeichnung,
    .tarifrechner--big.tarifrechner--default .tarifrechner__hauptauswahl .tarifrechner__gas .tarifrechner__bezeichnung {
        margin-left: 55px;
    }
}

.tarifrechner__hauptauswahl label>.tarifrechner__bezeichnung:before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__hauptauswahl label>.tarifrechner__bezeichnung:before {
        width: 30px;
        height: 30px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__hauptauswahl label>.tarifrechner__bezeichnung:before {
        width: 35px;
        height: 35px;
    }
}

.tarifrechner__hauptauswahl label>input:checked~.tarifrechner__bezeichnung:before,
.tarifrechner--default .tarifrechner__radio--strom:checked~.tarifrechner__hauptauswahl .tarifrechner__strom .tarifrechner__bezeichnung:before,
.tarifrechner--default .tarifrechner__radio--gas:checked~.tarifrechner__hauptauswahl .tarifrechner__gas .tarifrechner__bezeichnung:before {
    background-image: url(../images/check-tarifrechner-active.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

@media only screen and (min-width: 900px) {

    .tarifrechner--big .tarifrechner__hauptauswahl label>input:checked~.tarifrechner__bezeichnung:before,
    .tarifrechner--big.tarifrechner--default .tarifrechner__radio--strom:checked~.tarifrechner__hauptauswahl .tarifrechner__strom .tarifrechner__bezeichnung:before,
    .tarifrechner--big.tarifrechner--default .tarifrechner__radio--gas:checked~.tarifrechner__hauptauswahl .tarifrechner__gas .tarifrechner__bezeichnung:before {
        background-size: 20px;
    }
}

.tarifrechner__hauptauswahl label>.tarifrechner__bezeichnung:after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tarifrechner__hauptauswahl label.tarifrechner__strom>.tarifrechner__bezeichnung:after {
    background-image: url(../images/strom-tarifrechner-weiss.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right center;
    right: 15px;
}

.tarifrechner__hauptauswahl label.tarifrechner__gas>.tarifrechner__bezeichnung::after {
    background-image: url(../images/gas-tarifrechner-weiss.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center bottom;
    right: 25px;
}

/*-- Extra Feld aus Basisangaben in Hauptauswahl -> E-Mobilität PLZ passt nicht mehr in Basisangaben --*/
.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra {
    width: 100%;
}

@media only screen and (min-width: 800px) {
    .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra {
        width: 48.6667%;
        margin-top: -20px;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra {
        width: 48%;
    }
}

@media only screen and (min-width: 800px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra {
        width: 100%;
        margin-top: 0;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra {
        width: 48.6667%;
        margin-top: -20px;
    }
}

.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra label {
    display: block;
}

@media only screen and (min-width: 800px) {
    .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra label {
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 800px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra label {
        margin-left: initial;
        margin-right: initial;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra label {
        margin-left: auto;
        margin-right: auto;
    }
}

.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    margin-bottom: 2px;
}

.tarifrechner--big .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung {
    margin-left: 0;
    font-size: 10px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung {
        font-size: 12px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung {
        font-size: 14px;
    }
}

.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung:before,
.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__bezeichnung:after {
    display: none;
}

.tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__input {
    opacity: 1;
    border: 1px solid transparent;
    border-radius: 30px;
    font-size: 12px;
    padding: 2px 10px;
    width: 100%;
    height: 25px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__input {
        height: 30px;
        font-size: 14px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__hauptauswahl .tarifrechner__basisangaben-extra .tarifrechner__input {
        height: 35px;
        font-size: 16px;
    }
}

.tarifrechner__basisangaben {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.tarifrechner__basisangaben label .tarifrechner__basisangaben .label {
    width: 48%;
    display: block;
    margin-bottom: 20px;
}

@media only screen and (min-width: 800px) {

    .tarifrechner__basisangaben label,
    .tarifrechner__basisangaben .label {
        width: 23%;
        margin-bottom: 5px;
    }

    .tarifrechner--big .tarifrechner__basisangaben label,
    .tarifrechner--big .tarifrechner__basisangaben .label {
        width: 48%;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 900px) {

    .tarifrechner--big .tarifrechner__basisangaben label,
    .tarifrechner--big .tarifrechner__basisangaben .label {
        width: 23%;
        margin-bottom: 5px;
    }
}

.tarifrechner__basisangaben input,
.tarifrechner__basisangaben button {
    border: 1px solid transparent;
    border-radius: 30px;
    font-size: 12px;
    padding: 2px 10px;
    width: 100%;
    height: 25px;
}

@media only screen and (min-width: 900px) {

    .tarifrechner--big .tarifrechner__basisangaben input,
    .tarifrechner--big .tarifrechner__basisangaben button {
        height: 30px;
        font-size: 14px;
    }

    .tarifrechner--big .tarifrechner__basisangaben button {
        font-size: 14px;
    }
}

@media only screen and (min-width: 1024px) {

    .tarifrechner--big .tarifrechner__basisangaben input,
    .tarifrechner--big .tarifrechner__basisangaben button {
        height: 35px;
        font-size: 16px;
    }

    .tarifrechner--big .tarifrechner__basisangaben button {
        font-size: 16px;
    }
}

.tarifrechner__basisangaben button {
    background-color: #ffde00;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
}

.tarifrechner__basisangaben .tarifrechner__bezeichnung {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    margin-bottom: 2px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__basisangaben .tarifrechner__bezeichnung {
        font-size: 12px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .tarifrechner__basisangaben .tarifrechner__bezeichnung {
        font-size: 14px;
    }
}

.personen__helper {
    background-color: #fff;
    height: 25px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2px 10px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .personen__helper {
        height: 30px;
    }
}

@media only screen and (min-width: 1024px) {
    .tarifrechner--big .personen__helper {
        height: 35px;
    }
}

.personen__helper span {
    display: inline-block;
    width: 13px;
    height: 20px;
    background-image: url(../images/personen-tarifrechner.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.personen__helper span.person--active {
    background-image: url(../images/personen-tarifrechner-active.svg);
}

.personen__helper span.person--6 {
    background-image: url(../images/plus-tarifrechner.svg);
    background-size: 9px 9px;
}

.personen__helper span.person--6.person--active {
    background-image: url(../images/plus-tarifrechner-active.svg);
}

.tarifrechner__flaeche {
    position: relative;
}

.tarifrechner__flaeche input {
    padding: 0 35px 0 32px;
}

.tarifrechner__flaeche:before,
.tarifrechner__flaeche:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 5;
    background-image: url(../images/home-schwarz.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.tarifrechner__flaeche:before {
    bottom: 2.5px;
    left: 10px;
    width: 15px;
    height: 15px;
}

.tarifrechner__flaeche:after {
    bottom: 2.5px;
    right: 10px;
    width: 20px;
    height: 20px;
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big .tarifrechner__flaeche:before {
        bottom: 7.5px;
    }

    .tarifrechner--big .tarifrechner__flaeche:after {
        bottom: 7.5px;
    }
}

.tarifrechner__leer {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
    word-wrap: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tarifrechner__radio--strom:checked~.tarifrechner__basisangaben .tarifrechner__flaeche,
.tarifrechner__radio--strom:checked~.tarifrechner__basisangaben .tarifrechner__verbrauch--gas,
.tarifrechner__radio--strom:checked~.tarifrechner__basisangaben .tarifrechner__submit--gas {
    display: none;
}

.tarifrechner__radio--gas:checked~.tarifrechner__basisangaben .tarifrechner__personen,
.tarifrechner__radio--gas:checked~.tarifrechner__basisangaben .tarifrechner__verbrauch--strom,
.tarifrechner__radio--gas:checked~.tarifrechner__basisangaben .tarifrechner__submit--strom {
    display: none;
}

/*---- Tarifrechner Single ----*/
.tarifrechner--single .tarifrechner__versorgungstyp {
    width: 100%;
}

@media only screen and (min-width: 800px) {
    .tarifrechner--single .tarifrechner__versorgungstyp {
        width: 48.6667%;
    }

    .tarifrechner--big.tarifrechner--single .tarifrechner__versorgungstyp {
        width: 100%;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big.tarifrechner--single .tarifrechner__versorgungstyp {
        width: 23%;
    }
}

@media only screen and (min-width: 600px) {
    .tarifrechner--single .tarifrechner__kundentyp {
        width: 100%;
    }
}

@media only screen and (min-width: 800px) {
    .tarifrechner--single .tarifrechner__kundentyp {
        width: 48.6667%;
    }

    .tarifrechner--big.tarifrechner--single .tarifrechner__kundentyp {
        width: 100%;
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner--big.tarifrechner--single .tarifrechner__kundentyp {
        width: 48.6667%;
    }
}

.tarifrechner--single .tarifrechner__versorgungstyp label {
    width: 100% !important;
    margin-bottom: 30px;
}

@media only screen and (min-width: 800px) {
    .tarifrechner--single .tarifrechner__versorgungstyp label {
        margin-bottom: 15px;
    }

    .tarifrechner--big.tarifrechner--single .tarifrechner__versorgungstyp label {
        margin-bottom: 30px;
    }
}

.tarifrechner--single .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
    /* background-color: #f3997f; */
    font-size: 20px;
    width: 100%;
    margin-left: 0;
    height: 35px;
    border-radius: 30px;
    position: absolute;
    padding-left: 20px;
}

.tarifrechner--single .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:before {
    display: none;
}

.tarifrechner--single .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:after {
    position: absolute;
    right: 0 !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    border: 2px solid #fff;
    /* background-color: #e3051b; */
    background-size: 25px !important;
    /* margin-top: -1px; */
}

/*--- Tarifrechner Strom ---*/
.tarifrechner--single.tarifrechner--strom .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung {
    background-color: #f3997f;
}

.tarifrechner--single.tarifrechner--strom .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:after {
    background-color: #e3051b;
}

.tarifrechner--single.tarifrechner--strom .tarifrechner__basisangaben button {
    background-color: #e3051b;
    color: #fff;
}

/*--- Tarifrechner Gas ---*/
.tarifrechner--single.tarifrechner--gas .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung {
    background-color: #ffee9b;
}

.tarifrechner--single.tarifrechner--gas .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:after {
    background-color: #ffdd00;
    background-size: 18px !important;
}

.tarifrechner--single.tarifrechner--gas .tarifrechner__basisangaben button {
    background-color: #ffdd00;
}

/*--- Tarifrechner Wärme ---*/
.tarifrechner--single.tarifrechner--waerme .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung {
    background-color: #f6a758;
}

.tarifrechner--single.tarifrechner--waerme .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:after {
    background-image: url(../images/waerme-tarifrechner-weiss.svg);
    background-color: #ef7d00;
    background-size: 22px !important;
    background-repeat: no-repeat;
    background-position: center center;
    right: 25px;
}

.tarifrechner--single.tarifrechner--waerme .tarifrechner__basisangaben button {
    background-color: #ef7d00;
}

/*--- Tarifrechner E-Mobilität ---*/
.tarifrechner--single.tarifrechner--e-mobilitaet .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung {
    background-color: #8cc0b6;
    color: #fff;
}

.tarifrechner--single.tarifrechner--e-mobilitaet .tarifrechner__versorgungstyp label .tarifrechner__bezeichnung:after {
    background-image: url(../images/emobilitaet-tarifrechner-weiss.svg);
    background-color: #41a090;
    background-size: 30px !important;
    background-repeat: no-repeat;
    background-position: center bottom;
    right: 25px;
}

.tarifrechner--single.tarifrechner--e-mobilitaet .tarifrechner__basisangaben button {
    background-color: #41a090;
    color: #fff;
}

/*--- Tarifrechner Toogle ---*/
.tarifrechner__toggle {
    width: 120px;
    height: 120px;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #231f20;
    border-radius: 50%;
    position: absolute;
    left: 35px;
    z-index: 50;
    -webkit-transform: translateY(-70%);
    -ms-transform: translateY(-70%);
    transform: translateY(-70%);
    cursor: pointer;
}

@media only screen and (min-width: 600px) {
    .tarifrechner__toggle {
        width: 149px;
        height: 149px;
    }
}

@media only screen and (min-width: 800px) {
    .tarifrechner__toggle {
        left: initial;
    }
}

.tarifrechner__toggle--aktiv {
    display: block;
}

.tarifrechner__toggle-inner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tarifrechner__toggle-header {
    color: #ffdd00;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    /* width: 88px; */
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px
}

@media only screen and (min-width: 600px) {
    .tarifrechner__toggle-header {
        font-size: initial;
        padding-left: 30px;
        padding-right: 30px;
    }
}

.tarifrechner__toggle-cta {
    color: #fff;
    font-style: italic;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 600px) {
    .tarifrechner__toggle-cta {
        font-size: initial;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/*--- Helper Klassen für JS ---*/
.tarifrechner--inaktiv .tarifrechner {
    display: none;
}

.tarifrechner--aktiv-small800 .tarifrechner {
    display: block;
    width: 149px;
}

.tarifrechner--aktiv-small800 .tarifrechner__fieldset {
    display: none;
}

/*--- Tarifrechner Startseite ---*/
.tarifrechner__schliessen {
    position: absolute;
    top: 0;
    right: 5%;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
}

@media only screen and (min-width: 800px) {
    .tarifrechner__schliessen {
        top: 10px;
        right: calc(5% + 60px);
    }
}

@media only screen and (min-width: 900px) {
    .tarifrechner__schliessen {
        top: 15px;
        right: calc(5% + 30px);
    }
}