*, *:before, *:after {
    box-sizing: border-box
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}

footer, header, nav, section, main {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: "";
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

input {
    border-radius: 0
}

    textarea:focus, input:focus {
        outline: none
    }

    input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: grid;
        grid-template-columns: 1fm;
        place-content: center;
        background-color: #fff;
        padding: .5em;
        border: 1px solid #dcdcdc;
        box-shadow: 3px 3px 3px rgba(0,0,0,.2);
        border-radius: 2px
    }

        input[type=checkbox]::before {
            content: "";
            width: 1em;
            height: 1em;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #ccc;
            transform-origin: bottom left;
            -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)
        }

        input[type=checkbox]:checked::before {
            transform: scale(1)
        }

    input[type=date] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        margin: .25em;
        padding: .25em;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 3px 3px 3px rgba(0,0,0,.2);
        text-align: center
    }

    input[type=text] {
        position: relative;
        box-shadow: 3px 3px 3px rgba(0,0,0,.2)
    }

        input[type=text]:focus {
            border: 0px;
            border: 1px solid #ccc;
            outline: 1px solid #ccc
        }

    input[type=password] {
        position: relative;
        padding: .5em;
        border: 0px solid gray;
        background-size: auto 70%;
        box-shadow: 3px 3px 3px rgba(0,0,0,.2)
    }

        input[type=password]:focus {
            border: 0px;
            border: 1px solid #ccc;
            outline: 1px solid #ccc
        }

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: .25em;
    padding: .25em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0,0,0,.2);
    text-align: left
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: .25em;
    padding: .25em;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' fill-opacity='0.4' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 1%;
    box-shadow: 3px 3px 3px rgba(0,0,0,.2)
}

    select option {
        margin: .25em;
        padding: .25em;
        background-color: #fff;
        color: #535353;
        font-size: x-small
    }

a {
    text-decoration: none
}

.bold {
    font-weight: bold
}

.hide {
    display: none;
    visibility: hidden
}

.blur {
    filter: blur(3px);
    -webkit-filter: blur(3px)
}

.even {
    background-color: #eee
}

.odd {
    background-color: #d5d5d5
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1
}

.flex-container {
    display: flex
}

.flexColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.flexRow {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline
}

.flex-wrap {
    flex-wrap: wrap
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;
    align-items: center
}

.col {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    padding: .75rem
}

.nowenergy {
    color: #45b248
}

.kostensenker {
    color: #ff8224
}

.primastrom {
    color: #2d9e55
}

.border_button {
    border-bottom: 2px solid #eee;
    margin-bottom: 1em
}

.hr {
    border-bottom: 2px solid #eee;
    margin: 1em
}

.container_flex {
    display: flex;
    width: 100%;
    height: 100%
}

.underline {
    text-decoration: underline
}

.box-shadow {
    box-shadow: 0px 0px 14px 10px rgba(0,0,0,.3)
}

.space_around {
    justify-content: space-around
}

.space-between {
    justify-content: space-between
}

#msgResponseContainer {
    position: fixed;
    top: 0;
    right: 0;
    padding: 50px;
    margin: 10px;
    border-radius: 5px;
    z-index: 100;
    min-width: 200px;
    min-height: 100px;
    background-color: #333;
    color: #fff;
    opacity: .9;
    font-size: 2rem;
    animation: ResponseFadein .5s,ResponseFadeout .5s 2.5s
}

@keyframes ResponseFadein {
    from {
        top: 0px;
        opacity: 0
    }

    to {
        top: 10px;
        opacity: 1
    }
}

@keyframes ResponseFadeout {
    from {
        top: 10px;
        opacity: 1
    }

    to {
        top: 0px;
        opacity: 0
    }
}

.Jumbotron {
    background-color: #eee;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 5px;
    margin: 3px
}

.tooltip {
    position: relative;
    display: inline-block
}

    .tooltip .tooltiptext {
        visibility: hidden;
        max-width: 400px;
        max-height: 400px;
        padding: 10px;
        background-color: #000;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        top: 15px;
        left: -400px;
        opacity: 0;
        transition: opacity 1s;
        overflow-y: scroll
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1
    }

.voxenergie {
    color: #6E9426
}

.bg-voxenergie {
    background-color: #6E9426
}

.nowenergy {
    color: #45b248
}

.bg-nowenergy {
    background-color: #45b248
}

.paketsparer {
    color: #FABB00
}

.bg-paketsparer {
    background-color: #FABB00
}

.kostensenker {
    color: #ff8224
}

.bg-kostensenker {
    background-color: #ff8224
}

.primastrom {
    color: #2D9E55
}

.bg-primastrom {
    background-color: #2D9E55
}

.border {
    color: #eee
}

.bg-border {
    background-color: #eee
}

.green {
    color: #45b248
}

.bg-green {
    background-color: #45b248
}

.gray {
    color: #F8F8F8
}

.bg-gray {
    background-color: #F8F8F8
}

.cyan {
    color: #0dcaf0
}

.bg-cyan {
    background-color: #0dcaf0
}

.red {
    color: #dc3545
}

.bg-red {
    background-color: #dc3545
}

.yellow {
    color: #ffc107
}

.bg-yellow {
    background-color: #ffc107
}

.orange {
    color: #fd7e14
}

.bg-orange {
    background-color: #fd7e14
}

.white {
    color: #ffffff
}

.bg-white {
    background-color: #ffffff
}

.black {
    color: #666
}

.bg-black {
    background-color: #666
}

.success {
    color: #45b248
}

.bg-success {
    background-color: #45b248
}

.info {
    color: #0dcaf0
}

.bg-info {
    background-color: #0dcaf0
}

.danger {
    color: #dc3545
}

.bg-danger {
    background-color: #dc3545
}

.warning {
    color: #ffc107
}

.bg-warning {
    background-color: #ffc107
}

.pr-1 {
    padding-right: 0.25em
}

.mr-1 {
    margin-right: 0.25em
}

.pl-1 {
    padding-left: 0.25em
}

.ml-1 {
    margin-left: 0.25em
}

.pt-1 {
    padding-top: 0.25em
}

.mt-1 {
    margin-top: 0.25em
}

.pb-1 {
    padding-bottom: 0.25em
}

.mb-1 {
    margin-bottom: 0.25em
}

.p-1 {
    padding: 0.25em
}

.m-1 {
    margin: 0.25em
}

.pr-2 {
    padding-right: 0.5em
}

.mr-2 {
    margin-right: 0.5em
}

.pl-2 {
    padding-left: 0.5em
}

.ml-2 {
    margin-left: 0.5em
}

.pt-2 {
    padding-top: 0.5em
}

.mt-2 {
    margin-top: 0.5em
}

.pb-2 {
    padding-bottom: 0.5em
}

.mb-2 {
    margin-bottom: 0.5em
}

.p-2 {
    padding: 0.5em
}

.m-2 {
    margin: 0.5em
}

.pr-3 {
    padding-right: 0.75em
}

.mr-3 {
    margin-right: 0.75em
}

.pl-3 {
    padding-left: 0.75em
}

.ml-3 {
    margin-left: 0.75em
}

.pt-3 {
    padding-top: 0.75em
}

.mt-3 {
    margin-top: 0.75em
}

.pb-3 {
    padding-bottom: 0.75em
}

.mb-3 {
    margin-bottom: 0.75em
}

.p-3 {
    padding: 0.75em
}

.m-3 {
    margin: 0.75em
}

.pr-4 {
    padding-right: 1em
}

.mr-4 {
    margin-right: 1em
}

.pl-4 {
    padding-left: 1em
}

.ml-4 {
    margin-left: 1em
}

.pt-4 {
    padding-top: 1em
}

.mt-4 {
    margin-top: 1em
}

.pb-4 {
    padding-bottom: 1em
}

.mb-4 {
    margin-bottom: 1em
}

.p-4 {
    padding: 1em
}

.m-4 {
    margin: 1em
}

.pr-5 {
    padding-right: 1.5em
}

.mr-5 {
    margin-right: 1.5em
}

.pl-5 {
    padding-left: 1.5em
}

.ml-5 {
    margin-left: 1.5em
}

.pt-5 {
    padding-top: 1.5em
}

.mt-5 {
    margin-top: 1.5em
}

.pb-5 {
    padding-bottom: 1.5em
}

.mb-5 {
    margin-bottom: 1.5em
}

.p-5 {
    padding: 1.5em
}

.m-5 {
    margin: 1.5em
}

.font-50 {
    font-size: 50%
}

.font-75 {
    font-size: 75%
}

.font-90 {
    font-size: 90%
}

.font-100 {
    font-size: 100%
}

.font-110 {
    font-size: 110%
}

.font-125 {
    font-size: 125%
}

.font-150 {
    font-size: 150%
}

.font-rem-50 {
    font-size: 0.5rem
}

.font-rem-75 {
    font-size: 0.75rem
}

.font-rem-90 {
    font-size: 0.90rem
}

.font-rem-100 {
    font-size: 1rem
}

.font-rem-110 {
    font-size: 1.1rem
}

.font-rem-125 {
    font-size: 1.25rem
}

.font-rem-150 {
    font-size: 1.5rem
}

.font-rem-200 {
    font-size: 2rem
}

.font-rem-250 {
    font-size: 2.5rem
}

.font-rem-300 {
    font-size: 3rem
}

.font-rem-400 {
    font-size: 4rem
}

.font-rem-500 {
    font-size: 5rem
}

.w-25 {
    width: 25%
}

.w-50 {
    width: 50%
}

.w-75 {
    width: 75%
}

.w-90 {
    width: 90%
}

.w-100 {
    width: 100%
}

.w-px-30 {
    width: 30px
}

.w-px-50 {
    width: 50px
}

.w-px-75 {
    width: 75px
}

.w-px-100 {
    width: 100px
}

.w-px-150 {
    width: 150px
}

.w-px-200 {
    width: 200px
}

.w-px-250 {
    width: 250px
}

.w-px-300 {
    width: 300px
}

.w-px-400 {
    width: 400px
}

.w-px-500 {
    width: 500px
}

.w-px-600 {
    width: 600px
}

.h-25 {
    height: 25%
}

.h-50 {
    height: 50%
}

.h-75 {
    height: 75%
}

.h-90 {
    height: 90%
}

.h-100 {
    height: 100%
}

.h-px-30 {
    height: 30px
}

.h-px-50 {
    height: 50px
}

.h-px-75 {
    height: 75px
}

.h-px-100 {
    height: 100px
}

.h-px-150 {
    height: 150px
}

.h-px-200 {
    height: 200px
}

.h-px-250 {
    height: 250px
}

.h-px-300 {
    height: 300px
}

.h-px-400 {
    height: 400px
}

.h-px-500 {
    height: 500px
}

.h-px-600 {
    height: 600px
}

.text-start {
    text-align: start
}

.text-end {
    text-align: end
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.col-1 {
    width: 100%
}

.col-2 {
    width: 50%
}

.col-3 {
    width: 33.3333333333%
}

.col-4 {
    width: 25%
}

.col-5 {
    width: 20%
}

.col-6 {
    width: 16.6666666667%
}

.col-7 {
    width: 14.2857142857%
}

.col-8 {
    width: 12.5%
}

body {
    font-family: "Ubuntu",sans-serif;
    background-color: #fff;
    color: #535353;
    margin: 0px;
    padding: 0px;
    width: 99.7vw;
    height: 99.2vh;
    margin: auto auto;
    font-size: xx-large
}

#MyHeader {
    display: inline-block;
    z-index: 1
}

#MyContent {
    display: inline flow-root list-item
}

section {
    width: 99vw;
    min-height: 85vh;
    padding: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 13vh;
    overflow-y: scroll
}

.SectionContainer {
    max-width: 99vw;
    font-size: xx-large
}

.pinContainer {
    display: flex;
    align-content: space-between
}

    .pinContainer input {
        width: 75px;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 5px;
        font-size: x-large;
        text-align: center
    }

.ForTwo {
    display: flex;
    flex-direction: column;
    align-items: center
}

.MixInfo {
    display: flex;
    align-items: center;
    gap: .5em
}

.ZertifikatContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    justify-items: center
}

.ZertifikatKundenFreundliche {
    border: 3px solid #7d7c7a;
    border-radius: 15px
}

.KontoinformationenInput {
    background: #f8f8f8;
    border: 2px solid #b8b8b8;
    border-radius: 3px;
    text-align: center;
    padding: 15px;
    margin: 5px;
    width: 400px;
    font-weight: bold
}

.IconPlace {
    display: flex;
    justify-content: center;
    align-content: center
}

    .IconPlace i {
        font-size: 126px
    }

.ForTwo {
    display: flex;
    flex-direction: column;
    align-items: center
}

.Tarifkonditionen {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1em;
    text-align: left;
    align-self: center
}

.unterschrift_buttons {
    display: flex;
    flex-direction: row;
    gap: 2em
}

@media(orientation: portrait)and (max-width: 767px) {
    section {
        font-size: 28px
    }

        section h1 {
            font-size: 64px
        }

        section .IconPlace i {
            font-size: 512px
        }

    .SectionContainer {
        width: 95vw;
        height: 75vh;
        overflow-y: scroll
    }

    .tooltip, .tooltiptext {
        font-size: 28px
    }

        .tooltip i, .tooltiptext i {
            font-size: 32px
        }

    .unterschrift_buttons {
        display: flex;
        flex-direction: column;
        gap: 2em
    }
}

.ImgInPage {
    width: 800px
}

#ContainerTarife {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: .5em;
    text-align: left;
    justify-content: space-around
}

#AktuellerTarif {
    background-color: #e6e7e9;
    padding: 1em
}

#NeuerTarif {
    background-image: url("/images/background_highligths.png");
    background-repeat: no-repeat;
    background-position: right;
    background-color: #d1e5ca;
    padding: 1em;
    width: 100%
}

label {
    display: inline-block;
    padding: .35em
}

.fussnote {
    font-size: 50%;
    padding: .25em;
    vertical-align: top
}

.fussnoteContainer {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: baseline;
    line-height: 1.25em
}

.tableTarifeInhalt td:first-child {
    min-width: 230px;
    padding: 10px
}

.VertragszusammenfassungTables {
    font-size: small;
    width: 100%
}
.jwHeader {
    background-image: url('/images/jetzt_wechseln_logo.png');
    background-repeat: no-repeat;
}

.deactivate {
    background-color: #f2f2f2; /* Grauer Hintergrund */
    pointer-events: none; /* Deaktiviert Klick-Ereignisse */
    opacity: 0.5; /* Reduziert die Deckkraft, um es grau erscheinen zu lassen */
}

/*page_51 (jetztwechseln33)*/

.container {
    display: flex;
    margin-top: 20px;
}

.left-column {
    flex: 1;
    margin-right: 20px;
}

/*aus irgendeinem Grund ist die rechte Seite leicht nach unten versetzt. Fixe das fürs erste mit einem extra Abstand
    muss nochmal richtig gemacht werden
*/
.right-column {
    margin-top: 10px;
    white-space: nowrap;
    flex: 1;
}

.text-left-column {
    text-align: left;
    height: 25px;
    font-weight: 500;
    white-space: nowrap;
}

.text-right-column {
    text-align: left;
    height: 25px;
    font-weight: 600;
    white-space: nowrap;
}

.ueberschrift {
    text-align: left;
    font-weight: bold;
    font-size: 25px;
}

.mitteButton {
    display: flex;
    justify-content: center;
}