html {
    -webkit-text-size-adjust: 100%;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="submit"],
input[type="button"],
button,
select,
textarea {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}
input:focus {
    outline: none;
    box-shadow: none;
}




@media (max-width: 767px) {

    /***** Globals - Start *****/
    body {
        font-size: 20px;
    }

    h1 {
        font-size: 32px;
    }
    h2 {
        margin: 0 0 10px;
        font-size: 26px;
    }
    #page3 header h2 {
        margin: 0 0 20px;
        font-size: 36px;
    }
    h3 {
        margin: 0 0 10px;
        font-size: 22px;
    }

    p {
        margin: 0 0 14px;
    }

    a[href^="tel:"],
    .content a[href^="tel:"] {
        text-decoration: underline;
    }

    .content ul li {
        position: relative;
        margin: 0 0 20px;
        padding: 0 0 0 24px;
    }
    .content ul li::before {
        top: 8px;
        width: 8px;
        height: 8px;
    }

    .content ol {
        margin: 0 0 16px;
    }
    .content ol li {
        margin: 0 0 24px;
        padding: 0 0 0 32px;
    }
    .content ol li:last-of-type {
        margin: 0;
    }

    input[type="text"],
    input[type="tel"],
    input[type="password"],
    input[type="email"] {
        height: 40px;
        padding: 0 12px;
        font-size: 20px;
    }
    select {
        height: 40px;
    }

    .form-group {
        display: block;
        width: 100%;
    }
    .form-group.preview {
        display: flex;
    }
    /***** Globals - End *****/

    /***** RTE - Start *****/
    .align-justify {
        flex-wrap: wrap;
    }
    .align-justify .button {
        margin-bottom: 20px;
    }
    a.button {
        margin: 0 20px 0 0;
        padding: 6px 40px 7px 16px;
    }
    a.button::before {
        top: 10px;
        right: 12px;
    }
    .ce-bodytext a.button {
        margin-bottom: 20px;
    }
    /***** RTE - End *****/

    /***** TYPO3 - Start *****/
    .frame-type-textmedia {
        margin: 0 0 40px;
    }
    .ce-intext .ce-gallery img {
        max-width: 258px;
    }
    .frame-grid {
        margin-bottom: 40px;
    }
    .frame-grid.frame-layout-110 {
        margin-bottom: 40px;
        padding-bottom: 16px;
    }

    .header-layout-11 h2 {
        font-size: 36px;
    }
    .header-layout-12 h2 {
        font-size: 36px;
    }
    .header-layout-13 h2 {
        font-size: 36px;
    }
    .header-layout-14 h2 {
        font-size: 36px;
    }

    .frame-layout-31 {
        margin: 0 0 40px;
        padding: 40px 0 40px;
    }

    .content ol li[class*="icon-"] {
        min-height: 72px;
        margin: 0 0 40px;
        padding: 12px 0 0 126px;
    }
    .content ol li[class*="icon-"]::before {
        left: 74px;
        width: 40px;
        height: 40px;
    }
    .content ol li[class*="icon-"]::after {
        top: 16px;
        width: 62px;
        height: 72px;
    }
    .content ol li.icon-lens::after {
        background-size: 58px auto;
    }
    .content ol li.icon-document::after {
        background-size: 45px auto;
    }
    .content ol li.icon-photovoltaik::after {
        background-size: 60px auto;
    }

    .frame-layout-110 header .inner {
        padding: 104px 30px 0;
    }
    .frame-layout-110 header .inner::before {
        top: 22px;
        right: auto;
        left: calc(50% - 34px);
    }
    .frame-layout-110 .inner {
        padding: 10px 30px 30px;
        background-color: rgb(var(--color-secondary));
    }
    .frame-layout-33 {
        margin: 0 0 40px;
        padding: 40px 0 40px;
    }
    /***** TYPO3 - End *****/

    /***** Header - Start *****/
    header.main .header-stage {
        align-items: flex-start;
        height: 74px;
    }
    header.main.scrolled .header-stage {
        height: 74px;
    }
    header.main::before {
        height: 10px;
        background-position: -10px 0;
    }
    header.main .logo {
        width: 181px;
        height: 60px;
        margin: 10px 0 0;
        background-size: contain;
    }
    header.main.scrolled .logo {
        height: 60px;
    }
    header.main .header-actions {
        margin: 20px 0 0;
    }
    header.main .header-actions .btn-nav {
        width: 40px;
        height: 30px;
        background-size: auto 30px;
    }
    header.main .header-actions .customer {
        width: 39px;
        height: 30px;
        margin: 0 16px 0 0;
        background-size: auto 30px;
    }
    header.main .header-actions .search {
        margin: 2px 24px 0 0;
    }
    header.main .header-actions .search .btn {
        width: 28px;
        height: 28px;
        margin: 0 6px 0 0;
    }
    header.main .header-actions .search .btn::before {
        width: 30px;
        height: 28px;
        background-size: auto 28px;
    }
    header.main .header-actions .search .btn::after {
        top: 2px;
        left: 2px;
        width: 23px;
        height: 23px;
        background-size: auto 23px;
    }
    header.main .header-actions .search .search-field {
        top: 84px;
        padding: 16px 12px;
    }
    header.main.scrolled .header-actions .search .search-field {
        top: 84px;
    }
    header.main .header-actions .search .search-field .inputs {
        height: 40px;
    }
    header.main .header-actions .search .search-field .inputs input[type="text"] {
        flex: 0 0 calc(100% - 46px);
        width: 100%;
        height: 40px;
        font-size: 20px;
    }
    header.main .header-actions .search .search-field .inputs input[type="submit"] {
        flex: 0 0 46px;
        width: 46px;
        height: 40px;
        background-size: 30px auto;
    }
    /***** Header - End *****/

    /***** Navigation - Start *****/
    nav.main {
        width: 100%;
        padding: 32px 24px 40px 18px;
    }
    nav.main .btn-nav-close {
        top: 18px;
        right: 20px;
        z-index: 2;
    }
    nav.main > ul {
        width: auto;
    }
    nav.main > ul > li {
        margin: 0 0 24px;
        padding: 0 0 0 38px;
    }
    nav.main > ul > li .toggle {
        left: 0;
    }
    nav.main .subnav {
        margin: 0 0 0 -12px;
        padding: 20px 0 0 0;
    }
    nav.main .subnav > ul > li {
        padding-left: 42px;
    }
    /***** Navigation - End *****/

    /***** Layout- und Rahmenklassen - Start *****/
    .container.layout-0 {
        margin-bottom: 40px;
    }
    .frame-layout-100 .inner {
        padding: 24px 24px 44px 24px;
    }
    .col-md-4 .frame-layout-100 header .inner::before {
        top: 24px;
        left: 24px;
        width: 50px;
        height: 54px;
        background-size: contain;
    }
    .frame-layout-100 header .inner::before {
        display: block;
        top: 24px;
        left: 24px;
        width: 50px;
        height: 54px;
        background-size: contain;
    }
    .frame-layout-100 > .container .inner::before {
        display: none;
    }
    .frame-layout-100 h3 {
        display: flex;
        align-items: center;
        margin: 0 0 20px 70px;
        font-size: 20px;
        min-height: 58px;
    }
    .col-md-4 .frame-layout-100 h3 {
        margin: 0 0 20px 70px;
    }

    .frame-layout-32 a.button::before, .layout-32 a.button::before {
        top: 11px;
    }
    /***** Layout- und Rahmenklassen - End *****/

    /***** Startseite - Start *****/
    .extern-app {
        margin: 0 0 40px;
    }
    .extern-app .inner .box {
        position: relative;
        width: auto;
        height: auto;
        bottom: auto;
        right: auto;
        margin: -40px 0 0;
        padding: 24px 24px 62px;
    }
    .extern-app .inner .box::before {
        right: 0;
        width: 266px;
        height: 88px;
    }

    #page3 h2 {
        font-size: 34px;
    }
    #page3 .col-md-4 h2 {
        margin: 0 0 16px;
        font-size: 28px;
    }
    #page3 .ce-above .ce-gallery {
        min-height: unset;
    }
    /***** Startseite - End *****/

    /***** Bootstrap-Carousel - Start *****/
    .header-image {
        min-height: unset;
    }
    .header-image img {
        display: block;
        width: 100%;
        height: 240px;
        object-fit: cover;
    }
    .header-image .hills .bg {
        width: 215px;
        height: 80px;
    }
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        height: 200px;
        object-fit: cover;
    }
    /***** Bootstrap-Carousel - End *****/

    /***** Pagetitle - Start *****/
    .pagetitle {
        margin: -120px 0 40px;
    }
    .pagetitle .inner {
        max-width: 100%;
        min-height: unset;
        padding: 24px 24px 24px;
    }
    .pagetitle .headline-page {
        margin: 0 0 10px;
        font-size: 20px;
    }
    .pagetitle .headline-custom h1, .pagetitle .headline-custom h2 {
        font-size: 30px;
    }
    /***** Pagetitle - End *****/

    /***** Tarifrechner - Start *****/
    #page3 .tx-tarifrechner.tab-box {
        max-width: 100%;
        margin: -123px auto 40px;
    }
    .tx-tarifrechner .title.home {
        top: -90px;
        font-size: 36px;
    }
    .tab-contents {
        padding: 15px;
    }
    .tx-tarifrechner.tab-box .tabs .tab {
        position: relative;
    }
    .tabs .tab button {
        text-indent: -9999em;
    }
    .tx-tarifrechner.tab-box .tabs .tab button::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 0;
        display: block;
        height: 70%;
        width: 100%;
    }
    .tx-tarifrechner.tab-box .tabs .tab.gas button::before {
        background: url("../Images/bg-icon-gas-2.svg") no-repeat center;
        background-size: contain;
    }
    .tx-tarifrechner.tab-box .tabs .tab.electricity button::before {
        background: url("../Images/bg-icon-tenant-electricity.svg") no-repeat center;
        background-size: contain;
    }
    .tx-tarifrechner.tab-box .tabs .tab.photovoltaik button::before {
        background: url("../Images/bg-icon-photovoltaik.svg") no-repeat center;
        background-size: contain;
    }
    .tx-tarifrechner.tab-box .tabs .tab.heating button::before {
        background: url("../Images/bg-icon-radiator.svg") no-repeat center;
        background-size: contain;
    }

    .tx-tarifrechner input,
    .tx-tarifrechner button {
        margin: 0;
    }

    .tab-teaser .icon {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        margin: 10px 20px 0 0;
    }
    .tab-teaser h2,
    #page3 .tab-teaser h2 {
        font-size: 28px;
    }
    .tab-teaser .text {
        max-width: 100%;
        margin: 0 0 30px;
    }

    .tx-tarifrechner form .form-content {
        margin: 20px 0 20px;
        flex-wrap: wrap;
    }
    .tarifrechner_formfield.tarifrechner_formfield_jahresverbrauch {
        margin: 0 0 16px;
    }
    .tx-tarifrechner-rechner {
        display: flex;
        flex-wrap: wrap;
    }
    .tx-tarifrechner-result {
        margin: 0 0 20px;
    }
    .tx-tarifrechner-result .tarifstufe {
        min-width: 120px;
    }
    /***** Tarifrechner - End *****/

    /***** Bild vollflächig mit grünem Kasten - Start *****/
    .image-fullwidth-text {
        position: relative;
        margin: 0 0 40px;
        padding: 40px 0;
    }
    .image-fullwidth-text.pos-1 {
        height: 460px;
        padding-bottom: 0;
    }
    .image-fullwidth-text.var-2 {
        min-height: 376px;
    }
    .image-fullwidth-text .image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .image-fullwidth-text .text-box {
        height: auto;
        margin: 0 24px;
        padding: 20px 24px;
    }
    .image-fullwidth-text.var-2 .text-box {
        margin-top: 60px;
    }
    .image-fullwidth-text .text-box .title {
        font-size: 26px;
    }
    .image-fullwidth-text.var-2 .text-box .title {
        font-size: 36px;
    }
    /***** Bild vollflächig mit grünem Kasten - End *****/

    /***** Bild vollflächig mit HTML - Start *****/
    .image-fullwidth-html .html-wrapper .newsletter-teaser input[type="submit"] {
        background-position-y: 12px;
    }
    /***** Bild vollflächig mit HTML - End *****/

    /***** Trenner mit Text ohne Bild - Start *****/
    .tr-text {
        margin: 0 0 40px;
        padding: 35px 0 20px;
    }
    .tr-text .title {
        font-size: 26px;
        margin: 0 0 16px;
    }
    /***** Trenner mit Text ohne Bild - End *****/

    /***** Tabelle - Start *****/
    .table-responsive {
        font-size: 20px;
    }
    .table.rm th,
    .table.rm td {
        padding: 12px 12px 12px;
    }
    /***** Tabelle - End *****/

    /***** Info-Teaser, in zwei Teilen und vollflächig - Start *****/
    .it2 {
        min-height: unset;
    }
    .it2 .image {
        background-position-x: calc(100% - 0px);
        background-size: contain;
    }
    .it2 .text-content {
        padding: 14px 12px 20px 82px;
    }
    .it2 .text-content .icon {
        top: 24px;
        left: 24px;
        width: 40px;
        height: 40px;
    }
    .it2 .text-content .title {
        font-size: 26px;
    }
    .it2 .text-content .text {
        margin: 0 0 12px;
    }
    .it2 .text-content .it2-btn {
        padding: 9px 50px 8px 20px;
        font-size: 20px;
    }
    .it2 .text-content .it2-btn::before {
        top: 12px;
    }
    /***** Info-Teaser, in zwei Teilen und vollflächig - End *****/

    /***** Powermail - Start *****/
    .tx-powermail {
        padding: 12px;
    }
    .rm-form {
        font-size: 20px;
    }
    .powermail_field input[type="text"],
    .powermail_field input[type="tel"],
    .powermail_field input[type="number"],
    .powermail_field input[type="password"],
    .powermail_field input[type="email"],
    .powermail_field textarea {
        font-size: 20px;
    }
    .tx-powermail h3 {
        margin: 0 0 20px;
    }
    fieldset legend .page-title {
        margin: 0;
    }
    .tx-powermail input[type="submit"] {
        font-size: 20px;
        background-position-y: 14px;
    }

    .frame-layout-210 .powermail_fieldwrap {
        width: 100%;
    }
    .frame-layout-210 .powermail_fieldwrap.powermail_fieldwrap_type_select.powermail_fieldwrap_anrede select {
        width: 100%;
    }
    /***** Powermail - End *****/

    /***** Multipage-Form - Start *****/
    .tx-powermail form.multipageform h3 {
        font-size: 36px;
    }
    .multipageform fieldset:last-of-type .powermail_fieldwrap {
        width: 100%;
    }
    .multipageform fieldset:last-of-type .powermail_fieldwrap.powermail_fieldwrap_type_html,
    .multipageform fieldset:last-of-type .powermail_fieldwrap.powermail_fieldwrap_type_submit {
        width: calc(50% - 12px);
    }
    .tx-powermail .multipageform input[type="submit"] {
        padding: 7px 54px 6px 20px;
        background-position-y: 12px;
    }
    /***** Multipage-Form - End *****/

    /***** Suche - Start *****/
    ul.tx-indexedsearch-browsebox {
        flex-wrap: wrap;
    }
    .tx-indexedsearch-form {
        display: block;
    }
    .tx-indexedsearch-form input[type="text"] {
        height: 50px;
    }
    .tx-indexedsearch-search-submit {
        display: flex;
        width: 100%;
    }
    .tx-indexedsearch-description {
        overflow: hidden;
    }
    /***** Suche - End *****/

    /***** Aktuelles-Teaser - Start *****/
    .news-teaser .news-teaser-content {
        margin-bottom: 40px;
        padding: 104px 15px 20px;
    }
    .news-teaser .news-teaser-content::before {
        right: auto;
        left: calc(50% - 35px);
        width: 69px;
        height: 64px;
    }
    .news-teaser .folding-actions button::before {
        top: calc(50% - 10px);
    }
    .news-teaser .folding-actions button:hover::before {
        top: calc(50% - 10px);
    }
    .news-teaser .active .folding-actions button:hover::before {
        top: calc(50% - 10px);
    }
    /***** Aktuelles-Teaser - End *****/

    /***** Teaser - Start *****/
    .teaser-image-icon .teaser-content {
        display: block;
    }
    .teaser-image-icon .icon {
        left: -48px;
        width: 104px;
        height: 79px;
    }

    .teaser-image-icon .icon.i-1::before {
        width: 59px;
        height: 59px;
    }
    .teaser-image-icon .icon.i-2::before {
        width: 53px;
        height: 58px;
    }
    .teaser-image-icon .icon.i-3::before {
        width: 45px;
        height: 45px;
    }
    .teaser-image-icon .icon.i-4::before {
        width: 60px;
        height: 60px;
    }
    .teaser-image-icon .icon.i-5::before {
        width: 49px;
        height: 56px;
    }

    .teaser-image-icon.has-icon .teaser-content {
        margin: 40px 0 0 48px;
    }
    .teaser-image-icon .image {
        margin: 0 0 24px;
    }
    /***** Teaser - End *****/

    /***** Bild mit Textbox - Start *****/
    .image-text .text-box-wrapper {
        left: 15px;
        right: 15px;
        width: auto;
        padding: 15px 15px 80px 15px;
    }
    .image-text a:hover .tb-btn::after {
        right: 24px;
    }
    /***** Bild mit Textbox - End *****/

    /***** Energiebausteine - Start *****/
    .energy-blocks .image img {
        width: auto;
        object-fit: cover;
    }
    .energy-blocks .title {
        font-size: 40px;
    }
    .energy-blocks .text-content .inner {
        margin: -212px 0 0;
    }
    .energy-blocks .blocks .blocks-text-header {
        padding: 0 12px;
        font-size: 26px;
    }
    .energy-blocks .blocks .blocks-inner {
        flex-wrap: wrap;
        margin: 0 12px;
    }
    .energy-blocks-child {
        width: 50%;
        margin: 0 0 32px;
    }
    .energy-blocks-child .child-content .text-1 {
        margin: 4px 0 6px;
        line-height: 1;
    }
    .energy-blocks-child .layer .layer-icon {
        bottom: -2px;
    }
    .energy-blocks-child .layer .layer-content {
        top: -22px;
        left: auto;
        right: -32px;
        border-radius: 0 10px 0 0;
    }
    .energy-blocks .subtext {
        margin: 0;
        font-size: 26px;
    }
    .energy-blocks .subtext .button-light {
        margin: 10px 6px 0;
        font-size: 22px;
    }
    .energy-blocks .subtext .button {
        font-size: 24px;
    }
    .energy-blocks .subtext a.button::before {
        display: inline-block;
        position: relative;
        top: 2px;
        left: 0;
        margin: 0 8px 0 0;
    }
    /***** Energiebausteine - End *****/

    /***** Sonderlocke: Mieterstrom - Start *****/
    #c1205 .ce-gallery .ce-row:nth-of-type(1) .ce-column:nth-of-type(1) {
        display: none;
    }
    #c1205 .ce-gallery .ce-row:nth-of-type(1) .ce-column:nth-of-type(2) {
        display: block;
    }
    #c1205 .ce-gallery .ce-row:nth-of-type(1) {
        display: none;
    }
    #c1205 .ce-gallery .ce-row:nth-of-type(2) {
        display: block;
    }
    /***** Sonderlocke: Mieterstrom - End *****/

    /***** Content-Footer - Start *****/
    .footercontent {
        padding: 24px 0 0;
        font-size: 18px;
    }
    .footercontent .link-arrow-right::before {
        top: 13px;
    }
    .footercontent h3 {
        margin: 0 0 10px;
        line-height: 1.2;
    }
    .footercontent .customer::before {
        left: -2px;
        width: 44px;
    }
    .footercontent a.button {
        margin-bottom: 40px;
    }
    /***** Content-Footer - End *****/

    /***** Footer - Start *****/
    footer.main {
        margin: 0 0 40px;
        font-size: 16px;
    }
    footer.main::before {
        height: 10px;
        background-position: -10px 0;
    }
    footer.main .totop a {
        padding: 0 26px 0 0;
    }
    footer.main .totop a::before {
        bottom: 4px;
        width: 18px;
        height: 10px;
    }
    footer.main .totop a:hover::before {
        bottom: 7px;
    }
    /***** Footer - End *****/
    .white .chart-content p{
        padding: 0;
    }
    .agn-main .text-content {
        padding: 40px 25px 45px;
        margin: 0;
        width: 100%;
    }
    .agn-offset-picture {
        margin: 80px 0 -40px;
    }
    .agn-main .agn-content p {
        font-size: 20px;
    }
    .agn-main .subtitle {
        font-size: 20px;
    }
    .agn-main .date {
        font-size: 22px;
    }
    .agn-main .title {
        font-size: 28px;
    }
}
@media (max-width: 575px) {
    /***** TYPO3 - Start *****/
    .ce-intext.ce-right .ce-gallery {
        margin-left: 0;
    }
    .ce-intext.ce-left .ce-gallery {
        margin-right: 0;
    }
    .ce-intext .ce-gallery img {
        width: 100%;
        max-width: unset;
        height: auto;
    }
    /***** TYPO3 - End *****/

    /***** Aufklapper - Start *****/
    .folder {
        margin: 0 0 40px;
    }
    .folder .fold .fold-title {
        font-size: 24px;
    }
    .folder .fold .fold-title::before {
        top: 22px;
    }
    .folder .fold .fold-content {
        padding: 14px 12px 14px;
    }
    .folder .fold .fold-content .video.pos-1,
    .folder .fold .fold-content .video.pos-2 {
        padding-bottom: 56.25%;
    }
    .folder .fold .fold-content .image.pos-1,
    .folder .fold .fold-content .video.pos-1 {
        float: none;
        width: auto;
        margin-left: 0;
    }
    .folder .fold .fold-content .image.pos-2,
    .folder .fold .fold-content .video.pos-2 {
        float: none;
        width: auto;
        margin-right: 0;
    }
    /***** Aufklapper - End *****/

    /***** Teaser mit Bild, versetzt - Start *****/
    .tb-offset .text-content {
        max-width: calc(100% - 60px);
    }
    /***** Teaser mit Bild, versetzt - End *****/

    /***** Aufklapper mit Bild, versetzt - Start *****/
    .ab-offset .text-content {
        max-width: calc(100% - 60px);
    }
    /***** Aufklapper mit Bild, versetzt - End *****/

    /***** Contactperson - Start *****/
    .contact-person {
        padding: 96px 24px 24px;
    }
    .contact-person::before {
        left: calc(50% - 30px);
        width: 60px;
        height: 60px;
    }
    /***** Contactperson - End *****/

    /***** Teaser - Start *****/
    .teaser {
        margin: 0 0 40px;
    }
    .teaser .image {
        margin: 0 0 16px;
    }
    /***** Teaser - End *****/

    /***** Info-Teaser, in zwei Teilen und vollflächig - Start *****/
    .it2 {
        display: block;
    }
    .it2 .image {
        width: auto;
        height: 100px;
    }
    .it2 .text-content {
        width: auto;
    }
    /***** Info-Teaser, in zwei Teilen und vollflächig - End *****/

    /***** Bild mit Textbox - Start *****/
    .image-text .title {
        font-size: 30px;
    }
    /***** Bild mit Textbox - End *****/

    /***** Content-Footer - Start *****/
    .col-right::before {
        right: 0;
    }
    /***** Content-Footer - End *****/

    /***** Energiebausteine - Start *****/
    .energy-blocks .image img {
        height: 280px;
    }
    /***** Energiebausteine - End *****/

    /***** Footer - Start *****/
    footer.main .footer-meta {
        display: block;
    }
    /***** Footer - End *****/
    .confirmation[data-powermail-form="34"] {
        width: auto;
    }
}
@media (max-width: 374px) {

    /***** Header - Start *****/
    header.main .header-actions .customer {
        margin: 0 4px 0 0;
    }
    header.main .header-actions .search {
        margin: 2px 10px 0 0;
    }
    header.main .logo {
        width: 162px;
    }
    /***** Header - End *****/
}

@media (max-width: 1399px) {


}

@media (max-width: 1199px) {


}

@media (min-width: 768px) and (max-width: 1199px) {

    .align-justify {
        flex-wrap: wrap;
    }
    .align-justify .button {
        margin-bottom: 20px;
    }

    #page3 .tx-tarifrechner.tab-box {
        margin-top: -234px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    body {
        font-size: 20px;
    }

    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 24px;
    }

    #page3 h2 {
        font-size: 40px;
    }
    #page3 .col-md-4 h2 {
        margin: 0 0 20px;
        font-size: 26px;
    }
    .frame-layout-100 h3 {
        font-size: 24px;
    }

    .content .button {
        margin: 0 20px 20px 0;
    }
    a.button::before {
        top: 11px;
    }

    header.main .header-actions .search .search-field {
        padding-left: 24px;
        padding-right: 24px;
    }

    .header-image img {
        display: block;
        width: 100%;
        height: 360px;
        object-fit: cover;
    }

    .pagetitle {
        margin: -119px 0 56px;
    }
    .pagetitle .inner {
        max-width: 100%;
        min-height: 142px;
        padding: 30px 24px 28px;
    }
    .pagetitle .headline-custom h1, .pagetitle .headline-custom h2 {
        font-size: 32px;
    }

    .news-teaser .folding-actions button::before {
        top: calc(50% - 11px);
    }

    .frame-layout-100 .inner {
        padding: 24px 24px 44px 162px;
    }
    .frame-layout-100 .inner::before {
        left: 34px;
    }

    .extern-app {
        margin: 0 0 76px;
    }
    .extern-app .inner .box {
        position: relative;
        bottom: auto;
        right: auto;
        margin: -60px 0 0 0;
    }

    .tb-offset .text-content {
        width: 290px;
    }
    .tb-offset .title {
        font-size: 24px;
    }

    .ab-offset .text-content {
        width: 290px;
    }
    .ab-offset .title {
        font-size: 24px;
    }

    .image-fullwidth-text.pos-1 {
        height: 480px;
    }

    .frame-layout-210 .powermail_fieldwrap {
        width: 100%;
    }
    .frame-layout-210 .powermail_fieldwrap.powermail_fieldwrap_type_select.powermail_fieldwrap_anrede select {
        width: 100%;
    }

    #page3 .tx-tarifrechner.tab-box {
        margin-top: -123px;
    }
    .tx-tarifrechner .title.home {
        top: -108px;
        font-size: 40px;
    }

    .teaser-image-icon .image {
        flex: 0 0 280px;
    }

    .contact-person {
        overflow: hidden;
    }

    .energy-blocks .title {
        font-size: 70px;
    }
    .energy-blocks .text-content .inner {
        margin: -220px 0 0;
    }
    .energy-blocks .text-content {
        padding: 0 0 22px;
    }
    .energy-blocks .subtext {
        margin: 0;
    }
    .energy-blocks-child .child-content .text-1 {
        margin: 10px 0 10px;
        font-size: 32px;
        line-height: 1;
    }
    .energy-blocks-child .layer .layer-icon {
        bottom: -2px;
    }
    .energy-blocks-child .layer .layer-content {
        left: auto;
        right: -30px;
        border-radius: 0 10px 0 0;
    }

    .footercontent {
        padding: 40px 0;
        font-size: 18px;
    }
    .footercontent h3 {
        font-size: 20px;
    }
    .footercontent .link-arrow-right::before {
        top: 14px;
    }
    .footercontent .col-right > div:last-of-type {
        margin-bottom: 128px;
    }

    footer.main {
        position: relative;
        margin: 0 0 40px;
        font-size: 17px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    .header-image img {
        display: block;
        width: 100%;
        height: 360px;
        object-fit: cover;
    }

    .image-fullwidth-text.pos-1 {
        height: 480px;
    }

    #page3 .tx-tarifrechner.tab-box {
        margin-top: -128px;
    }
    .tx-tarifrechner .title.home {
        top: -108px;
        font-size: 40px;
    }
    .tgn-main .tgn-button{
        font-size: 26px;
    }

    .energy-blocks .text-content .inner {
        margin: -280px 0 0;
    }
    .energy-blocks .blocks .blocks-inner {
        margin: 0;
    }
    .energy-blocks .blocks .blocks-inner .text-2 {
        margin: 0 10px;
    }
    .energy-blocks-child .layer .layer-icon {
        bottom: -2px;
    }
    .energy-blocks-child .layer .layer-content {
        left: auto;
        right: -30px;
        border-radius: 0 10px 0 0;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {

    #page3 .tx-tarifrechner.tab-box {
        margin-top: -204px;
    }
    .tx-tarifrechner .title.home {
        top: -138px;
        font-size: 50px;
    }

    .energy-blocks .text-content .inner {
        margin: -320px 0 0;
    }
    .energy-blocks-child .layer .layer-content {
        left: auto;
        right: -30px;
        border-radius: 0 10px 0 0;
    }
}
@media (min-width: 1400px) and (max-width: 1599px) {

    .tx-tarifrechner .title.home {
        top: -138px;
        font-size: 50px;
    }

    .energy-blocks .text-content .inner {
        margin: -380px 0 0;
    }
    .energy-blocks-child .layer .layer-content {
        left: auto;
        right: -30px;
        border-radius: 0 10px 0 0;
    }
}
@media (min-width: 575px) and (max-width: 1399px) {

    /***** Content-Footer - Start *****/
    .col-right::before {
        right: -100px;
    }
    /***** Content-Footer - End *****/
}
@media (max-width: 508px) {

    .infochart {
        padding: 0 0 100px;
    }

    .infochart .chart-row.white {
        padding: 100px 0 0;
    }

    .infochart .chart-content {
        padding: 94px 5px 16px;
    }

    .infochart .chart-row {
        padding: 23px 0px 0;
    }

    .infochart .chart-row {
        min-height: 240px;
    }
}
@media (min-width: 992px) {
    /* scolling header fixed */
    .infochart {
        max-width: 75%;
    }
}
@media (max-width: 991px) {
    .agn-main .agn-btn::before {
        top: 6px;
        width: 21px;
        height: 13px;
    }
}
@media (max-width: 1700px) {

    .energy-blocks-child .layer .layer-content {
        left: auto;
        right: -30px;
        border-radius: 0 10px 0 0;
    }
}