﻿body {
    margin: 0;
    padding: 0;
    font-family: Lexend-VariableFont_wght;
}

.video {
    width: 146%;
    margin-bottom: 5.6vw;
    margin-left: -9vw;
}

.flex {
    display: flex;
}

.text-align-center {
    text-align: center;
}

.relative {
    position: relative;
}

.sprechblase-text {
    position: absolute;
    top: 33.5%;
}

.green-bg {
    background-color: #05a5c8;
}

.blue-bg {
    background-color: #05a5c8;
}

.black-bg {
    background-color: #000;
}

.grey-bg {
    background-color: #f7f7f7;
}

.p30 {
    width: 35%;
}

.p40 {
    width: 42.2%;
}

.p50 {
    width: 50%;
}

.p57 {
    width: 57%;
}

.p60 {
    width: 60%;
}

.s6and10 {
    width: 27%;
    margin-left: 7vw;
}

.s15and20 {
    width: 80%;
    margin-top: -2.7vw;
}

.img-100P {
    width: 100%;
    height: 100%;
}

.img-height-auto {
    height: auto;
}

.img-readtalk {
    width: 22.7%;
    margin-top: 1.7vw;
    margin-bottom: 15%;
}

.img-readtalk-order {
    width: 10%;
    margin-bottom: 3%;
}

.img-stoerer {
    position: absolute;
    transform: translate( 261%, 42% );
    width: 16.5vw;
}

.img-stoerer-tarife-info {
    position: absolute;
    transform: translate( -50%, -45% );
    width: 13vw;
}

.img-handy {
    position: absolute;
    transform: translate( 97%, 11% );
    width: 34%;
}

.img-logo {
    position: absolute;
    transform: translate( 858%, 200% );
    width: 10%;
}

.img-line {
    position: absolute;
    transform: translate( 11.5%, 405% );
    width: 41%;
}

.img-plus {
    max-width: 2.5%;
    height: 2.5%;
    margin-right: 1%;
    transform: translate( 0px, 28% );
}

.img-plus-gruen {
    width: 0.6vw;
    height: 0.6vw;
    margin-right: 5%;
    transform: translate( 0px, 50%);
}

.img-tarif {
    width: 92%;
    position: absolute;
    left: -3%;
    z-index: -1;
}

.img-gif {
    height: 6.5vw;
}

.img-preisvorteil {
    width: 20%;
}

.smart-text {
    font-size: 15px;
    font-weight: 500;
    width: 80%;
    margin-left:auto;
    margin-right: auto;
}

.preisvorteil-instead {
    font-size: 12px;
}

.price-footnote-smart-tarif {
    font-size: 12px;
}

.first-section {
    z-index: 4;
    position: relative;
}

.header-content {
    max-width: 58.5%;
    margin-left: 7.7vw;
    margin-right: auto;
}

.header-content2 {
    max-width: 76%;
    margin-left: auto;
    margin-right: auto;
}

.header-content3 {
    max-width: 49%;
    margin-left: 5.5vw;
}

.header-content-readandtalk {
    max-width: 54%;
    margin-top: 21vw;
    margin-left: 6.9vw;
    margin-right: auto;
}

.header-font {
    font-weight: 600;
    color: #fff;
    font-size: 3vw;
    line-height: 3.4vw;
    letter-spacing: 0.05vw;
}

.infotext-font {
    font-weight: 400;
    color: #fff;
    font-size: 1vw;
    margin-top: 2.7vw;
    line-height: 1.1vw;
    letter-spacing: 0.01vw;
    margin-bottom: 1.5vw;
}

.infotext-buttons-main {
    width: 52%;
    margin-top: 1.9vw;
    margin-left: 7.8vw;
}

.infotext-buttons-readandtalk {
    width: 64%;
    margin-top: 2.9vw;
    margin-left: 6.9vw;
}

.vorteil-font {
    color: #fff;
    font-size: 1vw;
    letter-spacing: 0.015vw;
    line-height: 1.15vw;
}

.vorteil-liste {
    color: #fff;
    font-size: 1.1vw;
    letter-spacing: -0.035vw;
    line-height: 1.5vw;
}

.plus {
    font-size: 1.2vw;
    margin-right: 0.7vw;
}

.marg-top-5 {
    margin-top: 5px;
}

.marg-top-30 {
    margin-top: 30px;
}

.marg-top-50 {
    margin-top: 50px;
}


.marg-bot-30 {
    margin-bottom: 30px;
}

.marg-top-p {
    margin-top: 40%;
}

.marg-top-p2 {
    margin-top: 5.3vw;
}

.marg-top-p3 {
    margin-top: 20%;
}

.marg-top-p4 {
    margin-top: 2.3vw;
}

.marg-top-p5 {
    margin-top: 12%;
}

.marg-top-p6 {
    margin-top: 3%;
}

.marg-top-p7 {
    margin-top: 10.7vw;
}

.marg-bot-p {
    margin-bottom: 3%;
}

.marg-left-50 {
    margin-left: 50px;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-evenly {
    justify-content: space-evenly;
}

.justify-center {
    justify-content: center;
}

.link-style-1, .link-style-2, a.link-style-3, .lets-go-button {
    font-weight: 600;
    font-size: 0.9vw;
    padding: 0.7vw 2.2vw;
    text-decoration: none;
    border-top-left-radius: 1vw;
}

.link-style-1 {
    background-color: #fff;
    color: #05a5c8;
    border: 2px solid #fff;
}

.link-style-2 {
    background-color: #05a5c8;
    color: #fff;
    border: 2px solid #fff;
}

.link-style-3 {
    background-color: #05a5c8;
    color: #fff;
}

.lets-go-button {
    background-color: #05a5c8;
    color: #fff;
    margin-top: 0.5vw;
    padding: 0.5vw 1vw;
}

.link-style-1:hover, .link-style-2:hover {
    border-color: #000;
    background-color: #000;
}

.link-style-3:hover {
    background-color: #fff;
    color: #000;
}

a.tarif-button {
    padding: 0.7vw 1vw;
}

.link {
    text-decoration: none;
    color: #fff;
}

.section-headline {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.6vw;
    width: 40%;
    text-align: center;
    color: #000;
    font-size: 3.1vw;
    font-weight: 600;
    line-height: 3.3vw;
}

.section-headline2 {
    width: 60%;
    color: #000;
    font-size: 3vw;
    font-weight: 600;
    line-height: 3.5vw;
}

.section-headline3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6.7vw;
    margin-bottom: 7.5vw;
    width: 44%;
    text-align: center;
    color: #000;
    font-size: 3.1vw;
    font-weight: 600;
    line-height: 3.4vw;
}

.section-headline4 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vw;
    margin-bottom: 7.5vw;
    width: 44%;
    text-align: center;
    color: #000;
    font-size: 3.1vw;
    font-weight: 600;
    line-height: 3.4vw;
}

.section-headline5 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vw;
    width: 40%;
    text-align: center;
    color: #000;
    font-size: 3.1vw;
    font-weight: 600;
    line-height: 3.3vw;
}

.section-headline6 {
    color: #000;
    font-size: 3vw;
    font-weight: 600;
    line-height: 3.5vw;
}

.section-headline7 {
    color: #000;
    font-size: 3vw;
    font-weight: 600;
    line-height: 3.5vw;
    width: 80%;
}

.section-font {
    font-weight: 400;
    color: #000;
    font-size: 1.03vw;
    margin-top: 1.5vw;
    width: 80%;
}

.section-font2 {
    font-weight: 400;
    color: #000;
    font-size: 1.03vw;
    margin-top: 4.5vw;
    width: 80%;
}

.section-font3 {
    font-weight: 400;
    color: #000;
    font-size: 1.03vw;
    margin-top: 1.9vw;
    line-height: 1.1vw;
}

.section-font4 {
    font-weight: 400;
    color: #000;
    font-size: 1.03vw;
    margin-top: 0vw;
    width: 80%;
}

.preisvorteil {
    margin-top: 1vw;
}

.preisvorteil-tarife-info {
    margin-left: 14vw;
}

.img-preisvorteil-tarife-info {
    width: 5vw;
    margin-bottom: 0.3vw;
}

.footnote {
    font-size: 0.5vw;
    margin-top: 0.3vw;
    margin-bottom: 1.8vw;
}

.green-font {
    color: #05a5c8;
}

.white-font {
    color: #fff;
}

#schritte {
    height: 55.7vw;
}

.step {
    width: 20vw;
}

.step-header {
    font-size: 2.5vw;
    font-weight: 400;
    margin-top: 0.5vw;
    letter-spacing: -0.05vw;
}

.step-text-header {
    margin-bottom: 1.4vw;
}

.steps {
    width: 93vw;
}

.step-text {
    font-size: 0.77vw;
    color: #fff;
    width: 80%;
    text-align: center;
    line-height: 1.05vw;
}

.tarife-liste {
    margin-top: 8.2vw;
    margin-bottom: 7vw;
    margin-left: 20vw;
    margin-right: auto;
    width: 85.8vw;
}

.tarif {
    width: 18%;
    height: 23vw;
    position: relative;
    margin-right: 0.8vw;
}

.tarif-scaled {
    transform: scale(1.278);
    transform-origin: 50% 50% 0px;
    margin-left: 25vw;
    margin-right: 2.4vw;
}

.tarif-text, .tarif-text-discount {
    width: 84%;
}

.tarif-text-discount {
    margin-top: 2vw;
}

.data-volume, .price {
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
    color: #05a5c8;
    letter-spacing: 0.06vw;
}

.data-volume-footnote {
    text-align: center;
    font-size: 0.4vw;
}

.price {
    margin-top: 1.25vw;
}

.tarif-header {
    margin-top: 20%;
    font-size: 0.75vw;
    font-weight: 600;
    text-align: center;
}

.discount {
    margin-top: 1.75vw !important;
}

.nomargin {
    margin: 0!important;
}

.instead {
    margin-top: 0.3vw;
    text-align: center;
    font-size: 0.7vw;
    font-weight: 600;
}

.im-monat {
    text-align: center;
    font-size: 0.8vw;
}

.pib {
    font-size: 0.5vw;
    text-align: center;
    margin-top: 0.5vw;
}

.price-footnote, .price-footnote-discount {
    font-size: 0.4vw;
    position: absolute;
    right: 2vw;
    top: 24vw;
}

.strikethrough {
    position: relative;
}

    .strikethrough:before {
        position: absolute;
        content: "";
        left: 0;
        top: 40%;
        right: 0;
        border-top: 4px solid;
        border-color: #05a5c8;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

.tarife-info-old-volume {
    font-size: 0.8vw;
    margin-bottom: 0.5vw;
}

.img-stoerer-tarif {
    width: 7.2vw;
    position: absolute;
    z-index: 1;
    top: -3vw;
    right: -1vw;
}

.pib > a {
    color: #000;
}

.tarif-points {
    margin-top: 3%;
    margin-left: 20%;
    font-size: 0.8vw;
    line-height: 1.05vw;
    width: 70%;
}

.desktop-hidden {
    display: none;
}

.fragen {
    padding: 8%;
    text-align: center;
}

.footer {
    font-size: 1vw;
    display: flex;
    color: #fff;
    justify-content: space-evenly;
    align-items: center;
    height: 5vw;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.customer-hotline {
    margin-top: -0.6vw;
    margin-bottom: 3vw;
}

.impressum {
    font-size: 1.1vw;
    margin-left: auto;
    margin-right: auto;
}

.impressum-header {
    width: 100%;
    padding: 2%;
}

.impressum-header img {
    width: 5%;
}

.top-menu {
    width: 38.5%;
    position: absolute;
    right: 7.8vw;
    top: 2.8vw;
    font-size: 1.05vw;
    font-weight: 500;
    align-items: center;
    z-index: 5;
}

.top-menu > a {
    text-decoration: none;
    color: #000;
}

.top-menu > a:hover {
    color: #05a5c8;
}

.top-menu-mobile {
    height: 88px;
    width: 100%;
    background-color: #f7f7f7;
    position: fixed;
    z-index: 6;
}

.top-menu-fixed {
    background-color: #f7f7f7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 7vw;
    z-index: 3;
}

.img-readtalk-top-menu-fixed {
    position: relative;
    top: 20%;
    left: 7%;
    width: 7vw;
    height: auto;
}

.img-readtalk-menu-mobile {
    position: fixed;
    top: 22px;
    left: 30px;
    width: auto;
    height: 44px;
}

.img-menu-mobile {
    content: url(../images/menu_black.png);
    position: fixed;
    top: 33px;
    right: 30px;
    width: auto;
    height: 25px;
}

.img-menu {
    content: url(../images/menu_black.png);
    width: 3.5%;
}

.img-menu:hover {
    content: url(../images/menu_blau.png);
    cursor: pointer;
}

.align-items-center {
    align-items: center;
}

.menu-side {
    width: 30%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: #fff;
    font-size: 1.5vw;
    font-weight: 600;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    align-items: center;
    text-align: center;
    z-index: 5;
}

.menu-side a {
    text-decoration: none;
    color: #000;
}

.menu-side a:hover {
    color: #05a5c8;
}


.img-readtalk-menu {
    width: 15%;
}

.img-exit-menu {
    width: 3%;
    height: 3%;
    cursor: pointer;
}

.img-exit-order-panel {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 6;
    cursor: pointer;
}

.flex-dir-col {
    flex-direction: column;
}

.menu-side-links {
    height: 50%;
}

.hidden {
    display: none;
}

.input-label {
    font-size: 13px;
    font-weight: 300;
    color: #000;
    margin-top: 30px;
    margin-bottom: 5px;
}

input[type=text] {
    border: 1px #B7B7B7 solid;
    border-radius: 5px;
    color: #000;
    padding: 10px 15px;
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 95%;
    box-sizing: border-box;
}

input[type=submit] {
    border: none;
    border-radius: 5px;
    background-color: #05a5c8;
    color: #fff;
    padding: 15px 50px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.2px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 95%;
    box-sizing: border-box;
}

select {
    border: 1px #B7B7B7 solid;
    background-color: #fff;
    border-radius: 5px;
    color: #000;
    padding: 10px 15px;
    font-size: 15px;
    outline: none;
    line-height: 15px;
    width: 95%;
    box-sizing: border-box;
}


.error-text {
    font-family: Halcom,Helvetica,Arial,sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #ff0000;
    display: none;
}

.order-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

.header-font-order {
    font-size: 30px;
}

.footer-order {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.order-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 150, 150, 0.73);
    z-index: 6;
}

.iframe-bg {
    position: relative;
    background-color: #fff;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    height: 80vh;
    padding: 10px;
    z-index: 6;
}

.iframe-bg > iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-spinner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 150, 150, 0.73);
    z-index: 3;
    display: none;
}

.spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 40px;
    will-change: transform;
}

@keyframes spinner {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

@font-face {
    font-family: 'Lexend-VariableFont_wght';
    src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
}

@media only screen and (max-width:900px) {
    .p30 {
        width: 40%;
    }
}

@media only screen and (max-width:510px) {
    .offset-anchor:before {
        content: '';
        display: block;
        position: relative;
        width: 0;
        height: 88px;
        margin-top: -88px;
    }
    
    .top-menu {
        width: 30px;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 1;
    }

    .img-100P {
        height: auto;
    }

    .video {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .sprechblase-text {
        left: 30px;
        top: 55%;
        width: 70%;
        font-size: 7.5vw;
        line-height: 30px;
    }

    .handytarif-text-mobile {
        position: absolute;
        left: 40px;
        top: 45%;
        width: 70%;
        font-size: 7.5vw;
        line-height: 30px;
    }

    .mobile-margin {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mobile-margin-top {
        margin-top: 15px;
    }

    .menu-side {
        box-sizing: border-box;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 20px;
    }

    .img-readtalk-menu {
        width: 100px;
    }

    .img-readtalk-order {
        width: 100px;
        margin-bottom: 30px;
    }

    .img-exit-menu {
        width: 20px;
    }

    .mobile-hidden {
        display: none;
    }

    .p30, .p40, .p50, .p57, .p60 {
        width: 100%;
    }

    .s6and10, .s15and20 {
        width: 100%;
        margin-left: unset;
    }

    .marg-left-50 {
        margin-left: 5%;
    }

    .header-content, .header-content2, .header-content3, .header-content-readandtalk {
        max-width: 100%;
        margin: 0;
    }

    .infotext-font {
        font-size: 15px;
        line-height: unset;
    }

    .img-handy-mobile {
        position: absolute;
        right: 50.5vw;
        transform: translate( 97%, 11% );
        width: 52vw;
    }

    .img-element-line {
        width: 83%;
        margin-top: 20px;
    }

    .vorteil-text-mobile {
        font-size: 29px;
        width: 199px;
        margin-top: 80px!important;
        line-height: 30px;
    }

    .vorteil-font {
        font-size: 15px;
        line-height: 20px;
    }

    .vorteil-liste {
        margin-bottom: 20px;
        line-height: 25px;
    }

    .plus {
        font-size: 20px;
        transform: translateY(-2px);
    }

    .stichpunkt {
        font-size: 15px;
    }

    .infotext-buttons-main, .infotext-buttons-readandtalk {
        width: unset;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    a.link-style-1, a.link-style-2, a.link-style-3 {
        text-align: center;
        width: 140px;
        line-height: 40px;
        padding: unset;
        font-size: 12px;
        border-top-left-radius: 10px;
        display: inline-block;
    }

    a.tarif-button {
        text-align: center;
        width: 170px;
        line-height: 40px;
        padding: unset;
        font-size: 10.5px;
        border-top-left-radius: 15px;
        display: inline-block;
    }

    .img-plus {
        max-width: unset;
        width: 15px;
        height: 15px;
        margin-right: 1%;
        transform: translate( 0px, 3px );
    }

    .marg-top-p, .marg-top-p2, .marg-top-p3, .marg-top-p4, .marg-top-p5, .marg-top-p6, .marg-top-p7 {
        margin-top: 20px;
    }

    .marg-bot-p {
        margin-bottom: 20px;
    }

    .img-stoerer {
        position: unset;
        width: 50%;
        height: auto;
        transform: unset;
    }

    .img-readandtalk {
        width: 45%;
    }

    .section-headline, .section-headline2, .section-headline4, .section-headline5, .section-headline6, .section-headline7 {
        font-size: 25px;
        width: 90%;
        margin-bottom: 20px;
        line-height: unset;
    }

    .section-headline3 {
        font-size: 25px;
        width: 70%;
        line-height: unset;
    }

    .section-font, .section-font2, .section-font3 {
        font-size: 15px;
        line-height: unset;
        margin-top: 30px;
        width: unset;
    }

    .section-font4 {
        font-size: 15px;
        line-height: unset;
        width: unset;
    }

    .preisvorteil {
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .preisvorteil-tarife-info {
        margin-left: 46vw;
        font-size: 11px;
    }

    .img-preisvorteil-tarife-info {
        width: 80px;
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .tarife-info-old-volume {
        font-size: 10px;
        margin-bottom: 5px;
    }

    .desktop-hidden {
        display: initial;
    }

    .img-tarif {
        position: unset;
        width: 280px;
        height: 430px;
    }

    .img-stoerer-tarif {
        width: 140px;
        position: absolute;
        z-index: 1;
        top: -10px;
        right: -40px;
    }

    .tarife-liste {
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
        overflow-y: hidden;
        overflow-x: auto;
        height: 430px;
        -webkit-overflow-scrolling: touch;
        justify-content: unset;
        margin-bottom: 5px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .tarif-text {
        transform: translateY(-390px);
        width: 92%;
    }

    .tarif-text-discount {
        transform: translateY(-380px);
        width: 92%;
    }

    .tarif {
        width: 280px;
        height: auto;
        flex-shrink: 0;
        scroll-snap-align: start;
        margin-right: 30px;
        padding-top: 15px;
    }

    .tarif-scaled {
        transform: unset;
        transform-origin: unset;
        margin-left: unset;
    }

    .tarif-header {
        width: 280px;
        margin-top: 10px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
    }

    .discount {
        margin-top: unset !important;
        padding-top: 35px;
    }

    .data-volume {
        width: 280px;
        margin-top: unset;
        font-size: 33px;
    }

    .data-volume-footnote {
        width: 280px;
        font-size: 10px;
    }

    .instead {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }

    .price {
        width: 280px;
        margin-top: 20px;
        font-size: 33px;
    }

    .price-discount {
        width: 280px;
        margin-top: 10px;
        font-size: 30px;
    }

    .price-footnote, .price-footnote-discount {
        font-size: 9px;
        position: absolute;
        right: 0;
        top: 345px;
    }

    .price-footnote-discount {
        top: 315px;
    }

    .tarif-name {
        width: 280px;
        font-size: 15px;
    }

    .im-monat {
        width: 280px;
        font-size: 13px;
        margin-top: 5px;
    }

    .pib {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .img-plus-gruen {
        width: 10px;
        height: 10px;
        margin-right: 5px;
    }

    .tarif-points {
        width: 230px;
        font-size: 16px;
        margin-top: 5px;
        margin-left: 30px;
        line-height: unset;
    }


    a.lets-go-button {
        margin-left: 15px;
        text-align: center;
        width: 150px;
        line-height: 40px;
        padding: unset;
        font-size: 15px;
        border-top-left-radius: 10px;
        display: inline-block;
    }

    .tarif-anchors {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 8px;
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 5px;
    }

    .tarif-anchors > a {
        background-color: #05a5c8;
        padding: 0px 10px;
        text-decoration: none;
    }

    .tarif-anchors > a:hover {
        background-color: #000;
    }

    .steps {
        flex-direction: column;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .step {
        width: unset;
        margin-bottom: 30px;
    }

    #schritte {
        height: unset;
    }

    .step-header {
        font-size: 20px;
    }

    .step-text {
        font-size: 15px;
        width: unset;
        margin-bottom: 20px;
        line-height: unset;
    }

    .img-gif {
        width: 80px;
        height: 80px;
    }

    #tarife-info {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .footnote {
        font-size: 8px;
        margin-top: 2px;
        margin-bottom: 0px;
    }

    .footer {
        display: block;
        font-size: 10px;
        height: unset;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .footer a {
        color: #fff;
        text-decoration: none;
    }

    .footer-text {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 85%;
    }

    .impressum {
        box-sizing: border-box;
        padding: 5px;
        font-size: 14px;
    }

    .impressum-header {
        box-sizing: border-box;
        padding: 20px;
    }

    .impressum-header img {
        width: 80px;
    }
}