@media only screen and (min-width: 320px) {
    /* For mobile phones: */
    @font-face {
        font-family: UbuntuRegular;
        src: url('/static/fonts/Ubuntu-Regular.ttf');
        font-weight: 600;
    }
    
    @font-face {
        font-family: UbuntuLight;
        src: url('/static/fonts/Ubuntu-Light.ttf');
        font-weight: 400;
    }
      
    @font-face {
        font-family: UbuntuBold;
        src: url('/static/fonts/Ubuntu-Bold.ttf');
        font-weight: 800;
    }

    .iframe-wrapper > img {
        max-width: 100%;
    }

    .christmas {
        background-color: red;
        padding-top: 3rem;
        color: white;
        margin-bottom: 8rem;
    }

    .christmas h2 {
        color: white;
    }

    .template-homepage .col-md-8 > .iframe-wrapper {
        margin-bottom: 8rem;
        padding-top: 3rem;
    }

    .template-homepage .col-md-8 > .buttons {
        text-align: center;
    }

    .twingle-wrapper:before {
        background-image: url('./../images/spenden_bg.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        content: ' ';
        display: block;
        opacity: 0.4;
        left: 0;
        top: 7rem;
        width: 100%;
        height: 100%;
    }

    html {
        font-size: 10px;
        scroll-behavior: smooth;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: initial;
        hyphens: auto;
    }

    .cp {
        cursor: pointer;
    }

    body {
        font-family: Ubuntu;
        counter-reset: section;
        background-color: #f4f7f6;
    }

    .hyphenation-problem {
        overflow: unset;
    }

    /* custom style elements */
    h0 {
        font-size: 5rem;
        color: rgb(0,30,50);
    }

    .ccl-head h0 {
        color: white;
        font-weight: 500;
        font-size: 4rem;
        line-height: 1.3;
    }

    h1 {
        font-size: 4rem;
        color: rgb(0,30,50);
    }
    
    h2 {
        font-size: 3rem;
        color: rgb(0,30,50);
        font-weight: 800;
    }

    .p-custom {
        font-size: 1.5rem;
        line-height: 1.6;
    }

    .p-custom-2 {
        font-size: 1.5rem;
    }

    .subline,
    .subline-clone {
        font-size: 2rem;
        font-weight: 100;
        font-style: italic;
    }

    .flex-container {
        display: flex;
        flex-direction: column;
    }

    .article-body-text ol li,
    .article-body-text ul li {
        font-size: 1.5rem;
    }

    .article-body-text ul {
        list-style-type: disc;
    }

    .bold {
        font-weight: 800;
    }

    .underline {
        border-bottom: .1rem solid rgba(0,160,230);
    }

    .underline2 {
        text-decoration: underline;
    }

    .co-disclaimer > div {
        display: inline;
    }

    .italic {
        font-style: italic;
    }

    .white {
        color: white;
    }

    .white-bg {
        background-color: white;
    }

    .green-bg {
        background-color: rgba(145, 180, 55);
    }

    .documents-page ul {
        list-style-type: circle;
    }

    .documents-page .f-text {
        margin-bottom: 2rem;
    }

    .documents-page .collapsible {
        margin-bottom: 1rem;
    }

    .documents-page a {
        text-decoration: underline;
    }

    .green-underline {
        /*border-bottom: .3rem solid rgba(145, 180, 55, .5);*/
        box-shadow: inset 0 -1rem rgba(145, 180, 55, .5);
    }

    /* Navigation */
    .navbar .container-fluid {
        padding-left: 0;
    }

    .navbar .icon-bar {
        display: block;
        width: 3rem;
        height: .3rem;
        margin-bottom: .4rem;
        background-color: white;
        border-radius: 1px;
    }
    
    .navbar-toggle {
        border: 0;
        background-color: transparent;
        position: fixed;
        z-index: 3;
        padding-top: 2rem;
        padding-left: 2rem;
    }

    .navbar-toggle img {
        width: 3rem;
        padding: .5rem;
        background-color: rgba(0,30,50);
    }
    
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
    }
    
    .navbar-nav {
        text-align: center;
        width: 80%;
        margin: auto;
        margin-bottom: 2rem;
    }
    
    .navbar-header {
        left: 1rem;
    }
    
    #myNavbar {
        position: fixed;
        top: 0;
        left: 0;
        color: #E41513;   /* rgb(0, 150, 220); */
        width: 100vw;
        height: 100vh;
        z-index: 2;
        background-color: rgb(0,30,50);
    }
    
    #myNavbar .flex-container {
        flex-direction: column;
    }
    
    #myNavbar .flex-container .flex-item {
        width: 100%;
        margin: 1rem 0;
    }
    
    .navbar-nav > li {
        padding-left: 0;
    }
    
    .navbar-nav > li > a {
        color: white;
        font-size: 2rem;
        font-weight: 800;
    }

    .center {
        text-align: center;
    }
    
    .navbar-nav > li > a:hover,
    .klimawissen .side-nav-item:hover,
    .index-lower-nav ul li a:hover,
    .module-news .blog-post-first > header h2 a:hover,
    .side-posts-title a:hover,
    .ccl-footer-2 .ccl-footer-dl .flex-container a:hover,
    a:hover {
        text-decoration: none;
        color: rgba(0,160,230);
    }

    #btn-mitmachen {
        width: 18rem;
    }

    #btn-login {
        width: 8rem;
        display: block;
        margin: auto;
    }
    
    .head-button img {
        width: 2rem;
        margin: 1rem 2rem;
    }

    .head-buttons {
        text-align: center;
    }

    .head-buttons > div {
        display: inline;
    }

    .main-logo {
        text-align: center;
        margin-bottom: 2rem;
    }

    #fb-logo {
        width: 2.5rem;
        filter: invert();
    }

    #twitter-logo {
        width: 3rem;
    }

    .ap-buttons #fb-logo {
        margin-right: 1.5rem;
        filter: unset;
        width: 2rem;
    }

    .ap-buttons #twitter-logo {
        margin-right: 1rem;
        margin-left: 1rem;
        width: 2rem;
    }

    .main-logo img,
    .main-logo-index img {
        position: relative;
        width: 8rem;
        margin-top: 1rem;
    }

    .main-head-logo img {
        position: relative;
        width: 10rem;
    }

    .main-head {
        height: 45rem;
    }


    .main-head-img > img {
        z-index: -1;
    }

    .module-1 {
        text-align: center;
        padding: 2rem;
        padding-top: 8rem;
        padding-bottom: 5rem;
    }

    .bg-stripes {
        /*background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),url("../images/bg-stripes.png");*/
        background-repeat: repeat;
    }

    .main-head-img {
        height: 54rem;
        overflow: hidden;
        position: relative;
        top: -5rem;
        background-color: rgba(0,0,0,.4);
        z-index: unset;

    }

    .main-head-img > img {
        width: 200%;
        position: relative;
        top: -9rem;
    }

    .main-head-img .main-head-button {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    a {
        text-decoration: none;
        color: rgba(0,30,50);
    }

    .main-head-logo {
        position: absolute;
        z-index: 1;
        top: 0;
        text-align: center;
        width: 100%;
    }

    .main-title {
        color: white;
        position: relative;
        font-weight: 800;
        top: -37rem;
        padding-bottom: 3rem;
        padding-left: 2rem;
    }

    .main-title-sub {
        font-size: 3rem;
    }

    .main-title-big {
       font-size: 4rem;
    }

    .main-head-link {
        position: relative;
        top: -43rem;
        padding-left: 2rem;
        padding-top: 5rem;
    }

    .btn-white-transparent {
        padding: 1rem;
        background-color: transparent;
        color: white;
        font-size: 1.5rem;
        font-weight: 400;
        border: .1rem white solid;
    }

    .btn-white-transparent a {
        color: white;
    }

    .btn-white-transparent:hover {
        background-color: rgba(0,30,50);
        color: white;
        font-size: 1.5rem;
        border: .1rem rgba(0,30,50) solid;
    }

    .btn-white-transparent img {
        width: 1.5rem;
        padding-bottom: .5rem;
        padding-right: .2rem;    }

    .buttons {
        padding-top: 5rem;
    }

    #faq-random {
        position: relative;
    }

    .buttons img {
        width: 1.5rem;
        padding-bottom: .5rem;
        padding-right: .2rem;
    }

    .buttons button {
        display: block;
        margin-bottom: 2rem;
        text-align: left;
    }

    .btn-dark-transparent {
        padding: 1rem;
        background-color: transparent;
        color: rgb(0,30,50);
        font-size: 1.5rem;
        font-weight: 400;
        border: .1rem rgb(0,30,50) solid;
    }

    .btn-dark-transparent:hover {
        background-color: rgba(0,30,50);
        color: white;
        border: .1rem rgba(0,30,50) solid;
    }

    .iframe-wrapper {
        width: 28rem;
        height: 15.5rem;
        margin: auto;
    }

    #id_bees {
        display: none;
    }

    .iframe-wrapper iframe,
    .iframe-wrapper video {
        width: 100%;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .module-2 .col-md-4 {
        padding: 3rem;
        padding-bottom: 6rem;
    }

    .module-2 .p-custom {
        padding-top: 2rem;
    }

    .module-2 .buttons {
        margin-top: 1rem;
    }

    .module-2 .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .module-news {
        padding-bottom: 5rem;
    }

    .module-news .news-header {
        text-align: center;
        background-color: rgb(0,30,50);
        padding-bottom: 10rem;
    }

    .module-news .news-header img {
        width: 28rem;
        padding-top: 3rem;
    }

    .module-news .buttons {
        padding-top: 0;
        padding-bottom: 3rem;
        margin-left: 2rem;
    }

    .module-news .blog-post h1 {
        margin-top: 1rem;
    }

    .module-3 {
        padding-bottom: 5rem;
        height: 36.3rem;
    }

    .module-3 .img-wrapper {
        text-align: center;
        position: relative;
        bottom: 4rem;
    }

    .img-wrapper img {
        width: 100%;
        padding-bottom: 2rem;
    }

    .module-3 .img-wrapper img {
        width: 50%;
    }

    .module-3 .subline {
        text-align: center;
        width: 80%;
        margin: auto;
    }

    .module-3 button {
        margin-left: 2rem;
    }

    /* Page CCL */
    .ccl-head {
        background-color: rgb(0,30,50);
        color: white;
    }

    .ccl-head h1 {
        color: white;
        margin-bottom: 2rem;
    }

    .ccl-head {
        hyphens: manual;
    }

    .ccl-head header {
        padding: 15rem 2rem 0 2rem;
    }

    .ccl-head .subline {
        padding: 0 2rem 0 2rem;
    }

    .bl-head .subline {
        padding: 0 2rem 15rem 2rem;
    }

    .ccl-head .main-head-logo img {
        width: 8rem;
        margin-top: 1rem;
        position: relative;
    }

    .mobile-nav-item {
        padding: 1rem;
        background-color: transparent;
        color: white;
        font-size: 1.5rem;
        font-weight: 600;
        border: .2rem white solid;
        margin: 0 2rem;
    }

    .mobile-nav-item:hover {
        cursor: pointer;
    }

    .mobile-nav-item-first:hover {
        cursor: unset;
    }

    .mobile-nav-item-first {
        position: relative;
        bottom: 14rem;
    }

    .buergerlobby .mobile-nav-item-first {
        bottom: 15rem;
    }

    .svg-icon-about,
    .svg-icon-kw,
    .svg-icon-kl {
        width: 4rem;
    }

    .ccl-body #presentation {
        position: relative;
        bottom: 4rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        position: relative;
        bottom: 12rem;
        text-align: center;
        height: 3rem;
    }

    .ccl-body ul li {
        padding-bottom: 1.5rem;
    }

    #ueberuns .img-wrapper img {
        width: 100%;
    }

    .mobile-nav-item > img {
        filter: invert();
        margin-right: 1rem;
        margin-bottom: .5rem;
    }

    .ccl-body .body-item-content .subline, 
    .ccl-body .body-item-content .subline-clone {
        padding-top: 4rem;
        padding-bottom: 4rem;
        color: rgba(0,160,230);
    }

    .body-kl .body-item-content .subline {
        padding-top: 1rem;
    }

    .body-item-text {
        font-size: 1.5rem;
        padding-top: 2rem;
        padding-bottom: 2rem;    }

    .body-item-text ul img {
        width: 2rem;
        padding-right: 1rem;
    }

    .body-item-text ul {
        padding-bottom: 2rem;
    }

    ul {
        list-style-type: none;
    }

    .ccl-body .buttons button {
        text-align: left;
        margin: 0 0 2rem 0;
    }

    .side-bar .ccl-side-newsletter {
        background-color: rgb(0,30,50);
        color: white;
        margin-bottom: 2rem;
    }

    .side-posts-head {
        padding: 2rem 2rem 0 2rem;
        font-size: 1.5rem;
        font-weight: 800;
        color: rgb(0,30,50)
    }

    .side-posts-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: rgb(0,30,50);
        padding-left: 4.5rem;
    }

    .ccl-side-posts .blog-post::before {
        counter-increment: section;
        content: counter(section);
        display: inline-block;
        font-size: 6rem;
        color: grey;
        position: relative;
        top: 2.5rem;
        height: 0;
        line-height: .5;
    }

    .ccl-side-posts .blog-post {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ccl-side-posts > .flex-container {
        margin-bottom: 5rem;
    }

    .ccl-side-posts .blog-post,
    .ccl-side-posts .blog-post .article-date {
        display: inline;
    }

    .ccl-side-posts .blog-post .article-date {
        padding-left: 1rem;
    }

    .ccl-side-video {
        text-align: center;
    }

    .ccl-side-video .iframe-wrapper {
        height: auto;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .video-caption {
        background-color: rgb(0,30,50);
        color: white;
        width: 94%;
        margin: auto;
        margin-bottom: 3rem;
        position: relative;
        bottom: .4rem;
        text-align: left;
        font-style: italic;
        padding-left: 1rem;
    }

    .ccl-further-links {
        background-color: rgba(0,160,230);
        text-align: center;
        padding: 0 0 3rem 0;
    }

    .ccl-further-links .il-block {
        display: inline;
    }

    .ccl-further-links .body-item,
    .mobile-nav-item-first {
        margin: 1.5rem auto;
        width: max-content;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }

    .mobile-nav-item-first {
        margin-left: 2rem;
    }

    .ccl-footer,
    .ccl-footer-2 {
        padding: 2rem;
        padding-bottom: 5rem;
    }

    .ccl-footer-3 {
        padding-bottom: 0;
        padding-top: 0;
    }

    .ccl-footer-dl .flex-container .flex-item {
        margin-bottom: 1rem;
    }

    .ccl-footer-dl {
        margin-bottom: 4rem;
    }

    .ccl-footer-dl .hr-very-dark {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .ccl-footer-dl .img-wrapper {
        text-align: center;
    }


    .ccl-footer-dl .img-wrapper img {
        width: 80%;
        margin-bottom: 2rem;
    }

    .rubrik-dl {
        font-size: 1.5rem;
        color: rgba(145, 180, 55);
        margin-bottom: 1rem;
    }

    .sub-dl {
        font-size: 1.5rem;
        font-weight: 800;
    }

    .ccl-footer-links .buttons {
        text-align: left;
        padding-top: 2rem;
    }

    .ccl-footer-links .buttons button {
        margin: unset;
        margin-bottom: 2rem;
    }

    .ccl-further-links .body-item-content {
        display: none;
    }

    #vision, #ansprechpartner, #ziele,
    #derverein, #gruender, #kontakt {
        position: relative;
        bottom: 5rem;
        display: none;
    }

    .ccl-body .body-item-content #rechner-subline {
        padding-top: 0;
    }

    #gruender {
        bottom: 2rem;
    }

    #gruender h1 {
        margin-bottom: 0;
    }

    #kontakt .flex-container .flex-item {
        padding-bottom: 0;
    }

    #vision .subline {
        padding-top: 1rem;
    }

    #vision .buttons {
        padding-top: 0;
    }

    #ueberuns_mni,
    #uebersicht_mni,
    #corechner_mni {
        display: none;
    }

    #presentation {
        padding: 2rem 2rem 0 2rem;
    }

    .body-item-content .flex-item {
        text-align: center;
    }

    .ap-name {
        font-size: 1.8rem;
        font-weight: 400;
        font-style: italic;
    }

    .ap-contact {
        font-size: 1.4rem;
        font-weight: 800;
    }

    .ap-buttons .btn-dark-transparent {
        border: 0;
    }

    .ap-gmap {
        background-color: white;
        margin-bottom: 5rem;
    }

    .map-caption,
    .map-caption-2 {
        padding: 1rem;
        background-color: white;
    }

    .map-caption-2 {
        margin-bottom: 3rem;
    }

    .body-item .flex-row {
        padding-bottom: 5rem;
    }

    .body-item .vereinsvorstand {
        padding-bottom: 0;
        padding-top: 5rem;
    }

    .vereinsvorstand .img-wrapper img {
        width: 75%;
    }

    .body-item-content h2 {
        padding-bottom: 2rem;
    }

    .body-item-content .flex-item {
        padding-bottom: 2rem;
    }

    .ap-buttons > a,
    .ap-buttons > div {
        display: inline;
    }

    .ap-buttons > a > img {
        filter: invert();
        width: 2rem;
    }

    .ap-kontaktbox,
    .ap-kontaktbox-2 {
        background-color: rgba(0,30,50);
        padding: 1rem;
        color: white;
    }

    .ap-kontaktbox .flex-container,
    .ap-kontaktbox-2 .flex-container { 
        flex-direction: row;
        padding-bottom: 1rem;
    }

    .ap-kontaktbox .img-wrapper img,
    .ap-kontaktbox-2 .img-wrapper img {
        width: 5rem;
        padding: 1rem;
    }

    .ap-kontaktbox .flex-item,
    .ap-kontaktbox-2 .flex-item {
        padding-bottom: 0;
    }

    .kontakt-first {
        font-size: 1.5rem;
        font-style: italic;
        text-align: left;
    }

    .kontakt-second {
        font-size: 1.3rem;
        font-weight: 800;
        color: white;
    }

    .kontakt-second img {
        width: 2rem;
    }

    .hr-green {
        border-top: 0.25pt solid rgba(145, 180, 55);
    }

    .hr-dark {
        border-top: 0.25pt solid rgba(0,30,50);
        width: 95%;
        margin: auto;
        margin-top: 2rem;
    }

    .hr-very-dark {
        border-top: 0.25pt solid black;
        width: 95%;
        margin: auto;
        opacity: 1;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .hr-white {
        border-top: 0.25pt solid white;
        width: 95%;
        margin: auto;
    }

    .hr-white:not([size]) {
        height: 0;
    }

    .hr-green-bold:not([size]) {
        height: 0;
    }
    
    .hr-green-bold {
        border-top: 0.5pt solid rgba(145, 180, 55);
    }

    .hr-green-dash {
        border-top: 0.25pt dashed rgba(145, 180, 55);
    }

    .ap-kontaktbox .rubrik-dl,
    .ap-kontaktbox-2 .rubrik-dl {
        font-weight: 800;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #ziele .subline img {
        width: 2rem;
        padding-right: .5rem;
    }

    #ziele > header > h1 {
        margin: 0;
    }

    .ziele-dl {
        font-size: 1.6rem;
        font-weight: 800;
        color: rgba(145, 180, 55);
        margin-top: 5rem;
    }

    .ziele-dl strong {
        color: rgb(0,30,50);
    }

    .green-dl img {
        transform: rotate(90deg);
    }

    #presentation #derverein .subline {
        padding: 0;
    }

    #presentation #derverein a button {
        margin-left: 0;
    }

    #presentation #derverein .body-item-text {
        padding-bottom: 5rem;
    }

    #presentation #derverein .flex-item .img-wrapper {
        width: 80%;
        margin: auto;
    }

    #presentation .flex-row h2 {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    #ansprechpartner .flex-row h2 {
        padding-bottom: 2rem;
        text-align: center;
    }

    #ansprechpartner .img-wrapper img {
        width: 80%;
    }

    .quoted {
        font-style: normal;
        font-weight: 800;
        font-size: 1.3rem;
    }

    #gruender .img-wrapper {
        height: 13rem;
    }

    #gruender .img-wrapper img {
        width: 100%;
        position: relative;
        bottom: 7rem;
    }

    #gruender > .flex-container iframe {
        width: 100%;
    }

    .video-header h1 {
        margin-top: 0;
        padding-bottom: 2rem;
    }

    .ap-kontaktbox > .rubrik-dl,
    .ap-kontaktbox-2 > .rubrik-dl {
        text-align: left;
    }

    .ap-kontaktbox > iframe,
    .ap-kontaktbox-2 > iframe {
        width: 100%;
    }

    #gruender .green-dl,
    #ziele .green-dl {
        color: rgba(145, 180, 55);
        font-weight: 800;
    }

    #gruender > .flex-container > .flex-item {
        padding-bottom: 0;
    }

    .vid-wrapper iframe,
    .map-wrapper iframe,
    .map-wrapper-2 iframe {
        width: 100%;
    }

    .map-wrapper,
    .map-wrapper-2 {
        margin-top: 5rem;
    }

    #uebersicht .buttons button {
        margin-left: 0;
    }

    .form-wrap {
        padding-bottom: 5rem;
    }

    .form-wrap .green-dl {
        font-size: 1.5rem;
        font-weight: 800;
    }

    .form-wrap .hr-green {
        margin-top: .3rem;
    }

    label[for="id_name"],
    label[for="id_from_email"],
    label[for="id_phone"],
    label[for="id_message"],
    label[for="id_city"],
    label[for="id_bees"] {
        display: none;
    }

    #id_gruppen {
        font-size: 1.6rem;
        margin-top: 1rem;
        padding: 1rem;
        background-color: transparent;
        border: solid .1rem rgba(145, 180, 55);
        border-bottom: solid .2rem rgba(145, 180, 55);
    }

    label[for="id_gruppen"],
    #id_gruppen {
        display: none;
    }

    #contact-form label {
        padding-top: 1rem;
        font-size: 1.4rem;
    }

    #contact-form input,
    #contact-form textarea {
        width: 100%;
        background-color: transparent;
        border: solid .1rem rgba(145, 180, 55);
        border-bottom: solid .2rem rgba(145, 180, 55);
        font-size: 1.5rem;
        line-height: 2;
        padding-left: 1rem;
        margin-bottom: 1rem;
    }

    #contact-form input[type="checkbox"] {
        width: 2rem;
        position: absolute;
        left: 2rem;
        margin-top: 1.2rem;
    }

    #contact-form button {
        font-size: 1.5rem;
        background-color: transparent;
        padding: 1rem 2rem;
        margin-top: 1rem;
    }

    #contact-form button:hover {
        background-color: rgba(0,30,50);
    }

    #contact-form button img {
        width: 2rem;
        padding-right: .5rem;
    }

    .mitmach-form {
        padding-left: 2.5rem;
    }

    #uebersicht .img-wrapper-shift,
    #klimadividende .img-wrapper-shift,
    #klimaziel .img-wrapper-shift {
        position: relative;
        bottom: 0rem;
        height: 15rem;
        overflow: hidden;
    }

    #uebersicht .body-item-text {
        padding-top: 0;
    }

    #klimadividende .img-wrapper-shift,
    #klimaziel .img-wrapper-shift {
        height: 15rem;
        overflow: hidden;
    }

    .body-kl #presentation {
        bottom: 15rem;
    }

    #klimadividende .body-item-text {
        padding-top: 0;
    }

    .img-wrapper-shift img {
        width: 100%;
    }

    #uebersicht .img-wrapper img,
    #klimadividende .img-wrapper img {
        width: 100%;
    }

    #klimadividende .img-wrapper {
        padding-top: 2rem;
    }

    .klimawissen .mobile-nav-item img {
        width: 2rem;
        padding-right: .5rem;
    }

    .klimawissen .mobile-nav-item .img-bigger {
        width: 3rem;
    }

    .zwischensummen {
        margin-bottom: 4rem;
    }

    .zwischensummen img {
        width: 2rem;
        padding-left: 0;
        padding-right: .5rem;
    }

    .zwischensummen .flex-container {
        flex-direction: row;
    }

    #input-co2head {
        width: 5rem;
    }

    .zwischensummen .flex-container .flex-item {
        width: 21%;
        padding: .5rem;
    }

    .zwischensummen .borders {
        border: .1rem solid grey;
    }

    .zwischensummen .green {
        background-color: rgba(145, 180, 55, .3);
    }

    .zwischensummen .tween-flex {
        margin-top: 2rem;
    }

    .zwischensummen .flex-head {
        padding-top: 1rem;
        padding-bottom: 0;
    }

    .zwischensummen .flex-container .flex-first {
        width: 35%;
        font-size: 1.1rem;
        border-left: 0;
    }

    .zwischensummen .flex-container .flex-last {
        border-right: 0;
    }

     /* Style the button that is used to open and close the collapsible content */
    .collapsible {
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 1.5rem;
        font-weight: 800;
    }

    .collapsible img {
        margin-right: 1rem;
    }
  
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .collapsible:hover {
        background-color: #ccc;
    }
  
    /* Style the collapsible content. Note: hidden by default */
    .content {
        padding: 1rem 1.8rem;
        display: none;
        overflow: hidden;
        font-size: 1.5rem;
    } 

    .forderungen {
        margin-top: 5rem;
    }

    .forderungen header {
        background-color: #f4f7f6 ;
        padding: 1rem;
    }

    .forderungen,
    .forderungen button {
        background-color: rgba(145, 180, 55);
        color: white;
    }

    button img {
        width: 2rem;
        padding-right: .1rem;
    }

    li img {
        width: 2rem;
        padding-right: .5rem;
    }

    .forderungen li {
        padding: 1rem 0;
    }

    #presentation .body-item-text {
        padding-bottom: 0;
    }

    .pre-links {
        font-size: 1.5rem;
        font-weight: 800;
        color: rgba(0,30,50);
        background-color: #f4f7f6;
        padding-bottom: 2rem;
    }

    .dl-item {
        background-color: white;
        padding: 1rem;
        font-size: 1.5rem;
    }

    .dl-item .flex-container {
        flex-direction: row;
    }

    .dl-item .flex-item img {
        padding: 2rem;
    }

    #downloads {
        padding-top: 5rem;
    }

    #einzelperson {
        border: 1px solid black;
    }

    #downloads > .flex-container > .flex-item > a > .dl-item {
        margin-bottom: 2rem;
    }

    #downloads > .flex-container > .flex-item > a .flex-item {
        text-align: left;
    }

    .datensatz {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    #corechner .p-custom {
        line-height: 1.5;
        font-style: italic;
        padding-bottom: 1rem;
    }

    .btn-m-left {
        margin-left: 1rem;
    }

    #corechner > .body-item-text > .buttons {
        padding-top: 0;
    }

    #corechner > .body-item-text > .buttons button {
        margin-left: 0;
    }

    .datensatz .ds-item {
        padding-bottom: 2rem;
    }

    .datensatz .ds-caption {
        font-weight: 800;
    }

    .ausgangslage .p-custom-2 img {
        width: 2rem;
        padding-left: .5rem;
    }

    .ausgangslage .p-custom-2 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .ausgangslage input,
    .ausgangslage select {
        color: white;
        padding: .5rem;
        background-color: rgba(0,160,230);
    }

    .ausgangslage select {
        max-width: 100%;
    }

    .modal-wrapper {
        background-color: rgba(0,0,0,0.5);
        width: 100vw;
        height: 100vh;
        position: fixed;
        text-align: center;
        padding-top: 2rem;
        top: 0;
        left: 0;
        z-index: 1
    }

    .modal {
        width: 90%;
        height: auto;
        max-height: 90vh;
        background-color: white;
        margin: auto;
        top: unset;
        left: unset;
        position: relative;
        padding: 2rem;
        overflow: scroll;
        text-align: left;
        font-size: 1.4rem;
        padding-top: 4rem;
    }

    .close-btn {
        filter: invert();
        position: absolute;
        right: 0;
        padding: 1rem;
        top: 1rem;
    }

    .modal-wrapper, .modal {
        display: none;
    }

    .klimarechner img {
        width: 2.5rem;
        padding-left: .5rem;
    }

    .klimarechner-mobile input {
        width: 50%;
    }

    .klimarechner .collapsible {
        background-color: rgba(145, 180, 55);
        color: white;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .klimarechner .turn {
        transform: rotate(90deg);
    }

    #sim-co2 {
        width: 50%;
        margin-left: 2rem;
    }

    .turn-up {
        transform: rotate(270deg);
    }

    .outside-link {
        margin: 5rem 0;
    }

    .outside-link .flex-container {
        flex-direction: row;
    }

    .outside-link .flex-container .flex-item {
        text-align: left;
        width: 20%;
        padding-top: 1rem;
    }

    .outside-link .flex-container .flex-first {
        width: 80%;
        padding-right: 1rem;
    }

    #select-fuel {
        margin-top: 1rem;
    }

    #input-verbrauch-1,
    #input-verbrauch-2 {
        width: 70%;
    }

    .lite-table {
        margin: 1rem 0;
    }

    .lite-table,
    .lite-table tr,
    .lite-table tr td {
        border: 1px solid black;
    }

    .lite-table tr td {
        padding: .5rem;
    }

    .lite-table .med {
        font-weight: 400;
        padding: .5rem;
    }

    .lite-table .bo {
        padding: .5rem;
    }

    #diesel, #heizoel, #erdgas, #strom {
        display: none;
    }

    .rechner-results {
        background-color: rgba(145, 180, 55);
    }

    .rechner-results .flex-item > img {
        width: 15rem;
        padding: 2rem;
        filter: invert();
    }

    .rechner-results > .ds-caption {
        padding: 1rem;
    }

    .rechner-results .flex-container {
        padding: 1rem;
    }

    .rechner-results h1 {
        color: white;
    }
    
    #faq button img {
        transform: rotate(90deg);
        margin-right: 0;
        margin-left: 1rem;
        width: 1.5rem;
    }

    #faq .rechner-content button img {
        transform: 9rem;
    }

    #faq ul,
    #modal-8 ul,
    #modal-9 ul {
        list-style-type: bullets;
    }

    #faq .content a {
        text-decoration: underline;
    }

    #faq .content img {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #faq .rechner-content img {
        width: 9rem;
    }

    .img-lbl {
        font-size: 1rem;
    }

    #faq button {
        background-color: transparent;
    }

    #faq .rechner-content button {
        background-color: rgba(145, 180, 55);
    }

    #faq .rechner-content .outside-link button {
        background-color: transparent;
    }

    #faq .rechner-content button > img {
        width: 2rem;
    }

    #faq h2 {
        padding-top: 3rem;
    }

    .ccl-body .flex-container .klimawissen {
        padding-top: 0;
    }

    .ccl-spende .subline,
    .mitmachen .subline {
        padding-bottom: 3rem;
    }

    .mitmachen-form {
        padding: 2rem;
    }

    .m2-on-mitmachen {
        padding-top: 3rem;
    }
    
    .blog-article-head {
        height: 20rem;
    }
    
    .blog-article {
        padding: 2rem 1rem;
        bottom: 11rem;
        position: relative;
    }

    .blog-article img {
        width: 100%;
        height: auto;
    }

    .blog-article .img-caption {
        font-size: 1.3rem;
        font-style: italic;
        color: rgba(0,30,50);
        position: relative;
    }
    
    .blog-article .img-caption img {
        width: 1rem;
        bottom: 0;
        filter: invert();
    }

    .article-details {
        font-size: 1.5rem;
        padding: 1rem;
        padding-left: 0;
    }

    .article-details > div {
        display: inline;
    }

    .article-author {
        font-weight: 800;
    }

    .article-body {
        padding: 1rem;
    }

    .blog-article h1 {
        font-weight: 800;
        margin-top: 1rem;
        color: white;
        background-color: rgba(0,30,50);
        width: 100vw;
        position: relative;
        left: -1rem;
        padding: 1rem;
    }

    .article-body .intro,
    .blog-post .blog-intro {
        padding-top: 2rem;
        padding-bottom: 3rem;
        font-size: 1.7rem;
        font-style: italic;
        line-height: 1.3;
    }

    .article-body-text p {
        font-size: 1.5rem;
    }

    .article-body-text a {
        text-decoration: underline;
    }

    .news-head .img-wrapper {
        text-align: center;
    }

    .news-head .img-wrapper img {
        width: 80%;
        padding-top: 5rem;
        padding-bottom: 8rem;
    }

    .news-head .main-head-logo img {
        width: 3rem;
    }

    .news-head .main-head-logo {
        text-align: right;
        padding-right: 1rem;
    }

    .news-index-body {
        position: relative;
        bottom: 4rem;
    }

    .blog-post {
        padding: 2rem;
    }

    .module-news .body-container {
        position: relative;
        bottom: 4rem;
        height: auto;
    }

    .module-news .blog-post .blog-intro {
        padding-bottom: 0;
    }

    .blog-post .img-wrapper img {
        padding-bottom: 1rem;
        height: auto;
    }

    .blog-post .article-date {
        font-size: 1.2rem;
        font-weight: 800;
        color: rgba(145, 180, 55);
    }

    .new-points {
        list-style-type: circle;
    }

    .blog-post h1 {
        font-weight: 800;
    }

    .further-head {
        font-size: 1.3rem;
        font-weight: 800;
        color: rgba(0,30,50);
    }

    .mitmachen-pretext {
        font-size: 1.4rem;
        padding: 2rem 2rem 0 2.5rem;
    }

    .lefty {
        padding-left: 0;
    }

    .rechner-lite-subtext,
    .rechner-lite-contingencies {
        padding: 1rem;
    }

    .spende-subtext {
        font-size: 1.4rem;
        padding-top: 1rem;
        padding-bottom: 5rem;
        position: relative;
    }

    .kl-head {
        padding-bottom: 13rem;
    }

    .mitmachen-pretext ul {
        list-style: disc;
    }

    .module-news .two-and-three .blog-post {
        width: 100%;  
    }

    .two-and-three img {
        width: 100%;
        height: auto;
    }

    .further-news {
        padding: 0 2rem 5rem 2rem;
    }

    .twingle-wrapper {
        padding: 7rem 2rem 12rem 2rem;
    }

    .tags button {
        font-size: 1.3rem;
        padding: .5rem;
        background-color: transparent;
        border: 0;
        border-bottom: .1rem solid rgba(145, 180, 55);
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

    .tags-page {
        padding-top: 3rem;
    }

    .module-newsletter {
        padding: 2rem;
    }

    .module-newsletter .p-custom {
        font-weight: 800;
        line-height: 1.5;
        padding-bottom: 16rem;
    }

    #mc_embed_signup h2 {
        width: 60%;
    }

    #mce-success-response {
        margin-bottom: 4rem;
    }

    #mc_embed_signup .mc-field-group #mce-EMAIL {
        display: inline-block;
    }

    .module-newsletter #mc_embed_signup .mc-field-group input {
        width: 90%;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        font-size: 1.6rem;
        font-style: italic;
    }

    #mc_embed_signup_scroll .clear {
        text-align: right;
        position: relative;
        bottom: 5rem;
    }

    #mc_embed_signup_scroll .clear img {
        width: 2rem;
        padding-top: .7rem;
    }

    #mc_embed_signup_scroll .clear .btn-news {
        color: #001e32;
        background-color: transparent;
        padding-left: 1rem;
    }

    footer {
        background-color: rgb(0,30,50);
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    footer .footer-mobile .buttons {
        text-align: center;
        position: relative;
        z-index: 1;
        padding-bottom: 3rem;
    }

    footer .footer-mobile .buttons button {
        display: inline;
        border: 1px solid white;
        font-weight: 400;
        margin-right: 2rem;
        padding: 1.5rem;
    }

    footer .footer-mobile .btn-join {
        height: 0;
        width: 0;
        position: relative;
        top: -9rem;
        left: 18rem;
    }

    footer .footer-mobile .btn-join img {
        position: sticky;
        width: 13rem;
        z-index: 0;
    }

    .imprint-head header {
        padding-bottom: 5rem;
    }

    .imprint {
        padding: 2rem;
        padding-bottom: 8rem;
        font-size: 1.4rem;
    }

    #insta-logo {
        width: 3rem;
        filter: invert();
    }

    .ap-buttons .btn-dark-transparent {
        padding: .5rem;
    }

    .ccl-footer-dl .img-wrapper img {
        border: .1rem solid black;
    }

    .ccl-side-newsletter {
        padding-left: 1rem;
    }

    .ccl-side-newsletter #mc_embed_signup h2 {
        width: 60%;
        color: white;
    }

    .ccl-side-newsletter #mc_embed_signup .mc-field-group input {
        width: 90%;
    }

    .ccl-side-newsletter #mc_embed_signup_scroll .clear {
        padding-right: 0;
    }

    .ccl-side-newsletter #mc_embed_signup_scroll .clear img {
        filter: invert();
    }

    .ccl-side-newsletter #mc_embed_signup_scroll .clear .btn-news {
        color: white;
    }

    .footer-desktop #mc_embed_signup a,
    .ccl-side-newsletter  #mc_embed_signup a {
        display: inline;
        color: white;
    }
    
    #mc_embed_signup p {
        font-size: 1rem;
    }
    
    #mc_embed_signup_scroll .clear {
        margin-top: 5rem;
        padding-right: 1rem;
    }

    .content__gdprLegal

    .hide-desktop {
        display: block;
    }
    
    .hide-desktop-tablet {
        display: block;
    }

    .hide-mobile {
        display: none;
    }
 
    .hide-mobile-small {
        display: none;
    }

    .forderungen-mobile {
        display: block;
    }

    .forderungen-tablet {
        display: none;
    }

    .kr-mobile {
        display: block;
    }

    .kr-tablet {
        display: none;
    }

    .module-news .blog-post-first > a > img,
    .news-index-body .blog-post-first > a > img {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }
}


@media only screen and (min-width: 375px) {
    /* Iphones */
    #myNavbar .flex-container .flex-item {
        margin: 1.2rem 0;
    }

    .ccl-side-newsletter #mc_embed_signup h2 {
        width: 45%;
    }

    #mc_embed_signup .button {
        margin-right: 2rem;
    }

    #ueberuns {
        margin-top: 5rem;
    }

    .ccl-body .body-item-content .subline, .ccl-body .body-item-content .subline-clone {
        padding-top: 7rem;
    }

    footer .footer-mobile .btn-join {
        left: 23rem;
    }

    .so14 {
        font-size: 1.4rem;
    }

    #ansprechpartner .img-wrapper img {
        width: 60%;
    }

    .ccl-body #presentation {
        bottom: 8rem;
    }
}


@media only screen and (min-width: 576px) {
    /* Extra break point for some boostrapping */
    .hide-mobile-small {
        display: block;
    }

    .twingle-wrapper:before {
        top: 13rem;
    }

    #ueberuns {
        margin-top: 0;
    }

    .hide-desktop-tablet {
        display: none;
    }

    #myNavbar .flex-container .flex-item {
        margin: 2rem 0;
    }

    .navbar-nav {
        margin-bottom: 4rem;
    }

    .main-head {
        height: 50rem;
    }
  
    .main-head-img {
        height: 55rem;
    }

    .main-title {
        top: -36rem;
        width: 60%;
        hyphens: none;
    }

    .main-head-img > img {
        top: -26rem;
    }

    .buttons button {
        display: inline;
        margin-right: .5rem;
        margin-left: .5rem;
    }

    .main-head-link {
        top: -42rem;
    }

    .iframe-wrapper {
        width: 48rem;
        height: 30rem;
    }

    .iframe-wrapper iframe {
        height: 100%;
    }

    .module-2 .col-md-4 {
        padding: 5rem;
        width: 85%;
    }

    .blog-post-first .img-wrapper {
        height: auto;
    }

    .blog-post-first .img-wrapper img {
        height: auto;
    }

    .module-news {
        padding-bottom: 12rem;
    }

    .module-news .flex-container {
        flex-direction: row;
    }

    .module-news .blog-post h1 {
        font-size: 3rem;
    }

    .module-3 .img-wrapper {
        bottom: 8rem;
        height: 15rem;
    }

    .module-3 {
        height: 47.6rem;
        hyphens: manual;
        padding-bottom: 1rem
    }

    .module-3 .img-wrapper img {
        width: 40%;
    }

    .module-news .buttons button,
    .module-3 .buttons button {
        display: block;
        margin: auto;
    }

    .module-3 .subline {
        font-size: 3rem;
        width: 60%;
    }

    .btn-dark-transparent {
        padding: 1.5rem;
    }

    .module-newsletter {
        padding: 0 5rem 5rem 5rem;
    }

    #mc_embed_signup h2 {
        width: 33%;
        max-width: 15rem;
    }

    footer {
        position: relative;
        z-index: 1;
    }

    footer .footer-mobile .btn-join {
        left: 44rem;
    }

    .kl-head {
        padding-bottom: 17rem;
    }

    .ccl-head .main-head-logo img {
        width: 5.8rem;
        bottom: .2rem;
    }

    .ccl-head header {
        padding: 16rem 5rem 0 3rem;
    }

    .kl-head > header {
        padding-bottom: 1rem;
    }

    .news-index-body {
        bottom: -2rem;
    }

    .ccl-head .subline {
        padding: 0 5rem 17rem 3rem;
    }

    .ccl-head .klimawissen-subline {
        padding-bottom: 2rem;
    }

    .bl-head .subline {
        padding: 0 5rem 17rem 3rem;
    }

    #ansprechpartner .flex-row h2 {
        text-align: left;
    }    

    .ccl-body .flex-container {
        flex-direction: row;
    }

    .ccl-body #presentation {
        bottom: 5rem;
    }

    .ccl-body .flex-container .body-container {
        width: 68%;
    }

    .ccl-body .flex-container .side-nav {
        width: 32%;
        min-width: 16.5rem;
        padding-top: 16rem;
        padding-left: 2rem;
        z-index: 1;
    }

    .il-block {
        padding-bottom: .5rem;
        padding-top: 1rem;
    }

    .side-nav:hover {
        cursor: pointer;
    }

    .side-nav-item > img {
        float: left;
    }

    .side-nav-item .pad-bot {
        padding-bottom: 3rem;
    }

    hr:not([size]) {
        height: unset;
    }

    .ccl-body #uebersicht .img-wrapper,
    .ccl-body #klimadividende .img-wrapper{
        height: 20rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        bottom: 12rem;
    }
    
    .ccl-body #ueberuns .subline {
        padding-top: 6rem;
    }

    .buergerlobby .flex-container .side-nav {

    }

    .body-kl #klimadividende .subline {
        padding-top: 4rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        height: 14rem;
    }

    #uebersicht .body-item-text > .subline {
        padding-top: 2rem;
    }

    .ccl-body #ueberuns .img-wrapper img,
    .ccl-body #uebersicht .img-wrapper-shift img,
    .ccl-body #klimadividende .img-wrapper-shift img,
    .ccl-body #klimaziel .img-wrapper-shift img {
        width: 90vw;
        position: absolute;
        left: -18rem;
    }

    .ccl-body #klimadividende .img-wrapper-shift img {
        height: 30rem;
        bottom: -1rem;
    }

    .ccl-body #klimaziel .img-wrapper-shift img {
        height: 30rem;
        bottom: 1rem;
    }

    #klimaziel .body-item-text {
        padding-top: 17rem;
    }

    #klimadividende .body-item-text {
        padding-top: 15rem;
    }

    .ccl-body #uebersicht .img-wrapper-shift img {
        height: 30rem;
        bottom: -2rem;
    }

    #uebersicht .body-item-text {
        padding-top: 16rem;
    }

    .side-nav-item {
        font-size: 1.4rem;
        color: rgba(0,30,50);
        font-weight: 800;
    }

    .side-nav-item img {
        margin-right: 1rem;
        position: relative;
    }

    #ueberuns .buttons button {
        display: block;
        margin-left: 0;
    }

    .side-bar {
        position: absolute;
        right: 0;
        width: 100vw;
    }

    .ccl-side-posts-3 .blog-post::before {
        counter-increment: section;
        content: counter(section);
        display: inline-block;
        font-size: 6rem;
        color: grey;
        position: relative;
        top: 3.5rem;
        right: 1rem;
        height: 0;
        line-height: .5;
    }

    .ccl-side-posts-3 .blog-post {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ccl-side-posts-3 > .flex-container {
        margin-bottom: 5rem;
    }

    .ccl-side-posts-3 .blog-post,
    .ccl-side-posts-3 .blog-post .article-date {
        display: inline;
    }

    .ccl-side-posts-3 .flex-container {
        flex-direction: row;
    }

    .ccl-side-posts-3 .blog-post {
        padding-right: 0;
    }

    .side-posts-title {
        padding-left: 3rem;
    }

    .ccl-side-posts-3 {
        padding-bottom: 1rem;
    }

    .ccl-footer > .flex-container {
        flex-direction: row;
        margin-top: 6rem;
        margin-bottom: 8rem;
    }

    .ccl-side-newsletter {
        background-color: rgba(0,30,50);
        color: white;
    }

    .ccl-side-newsletter,
    .ccl-side-video {
        width: 50%;
    }

    .ccl-side-video {
        margin-left: 1rem;
    }

    .ccl-side-video iframe {
        width: 100%;
        margin-top: 2rem;
    }

    .ccl-footer-dl h2 {
        font-size: 2rem;
    }

    .ccl-footer-dl .img-wrapper img {
        width: 60%;
    }

    .ccl-footer-dl .flex-container {
        flex-direction: row;
    }

    .rubrik-dl,
    .sub-dl {
        width: 60%;
        margin: auto;
    }

    .ccl-footer-dl {
        margin-bottom: 5rem;
    }

    .ccl-footer-links {
        margin-bottom: 3rem;
    }

    #side-nav-ueberuns,
    #side-nav-uebersicht {
        color: rgba(0,160,230);        
    }

    .side-nav-item:hover {
        color: rgba(0,160,230);        
    }

    #vision ul {
        padding-left: 5rem;
        padding-right: 2rem;
    }

    #vision .buttons button {
        margin-left: 0;
        padding: 1rem;
    }

    #ansprechpartner,
    #ziele {
        padding-top: 7rem;   
    }

    #uebersicht .img-wrapper-shift, #klimadividende .img-wrapper-shift, #klimaziel .img-wrapper-shift {
        bottom: 10rem;
        position: absolute;
        overflow: unset;
        bottom: unset;
    }

    #vision,
    #derverein,
    #kontakt,
    #gruender header {
        padding-top: 3rem;
    }

    #ansprechpartner .img-wrapper img {
        width: 100%;
    }

    .vereinsvorstand .flex-container {
        flex-wrap: wrap;
    }

    .vereinsvorstand .flex-container .flex-item {
        min-width: 45%;
        width: 45%;
        margin-left: .5rem;
        margin-right: .5rem;
    }

    .map-wrapper,
    .map-caption,
    .wrapper-2,
    .wrapper-3 {
        width: 88vw;
        position: relative;
        right: 50%;
        margin-top: 0;
        z-index: 1;
    }

    .news-head .img-wrapper img {
        width: 65%;
    }

    .ccl-footer {
        padding-bottom: 0;
    }

    .zwischensummen,
    .outside-link {
        background-color: white;
    }

    .ap-kontaktbox {
        position: relative;
        right: 50%;
    }

    #vision, #ansprechpartner, #ziele, #derverein, #kontakt {
        bottom: 0;
    }

    #gruender {
        bottom: -7rem;
    }

    #gruender > .flex-container {
        flex-direction: column;
    }

    .more-vids {
        right: 0;
    }

    #kontakt > .flex-container > .flex-item {
        position: relative;
        right: 50%;
    }

    #kontakt .map-wrapper,
    #kontakt .map-caption,
    #kontakt .ap-kontaktbox {
        right: 0;
    }

    #kontakt .flex-container {
        flex-direction: column;
    }

    #kontakt .ap-kontaktbox .flex-container {
        flex-direction: row;
    }

    #kontakt .ap-kontaktbox {
        width: 110%;
    }

    #kontakt .map-caption,
    .map-caption-2 {
        margin-bottom: 5rem;
    }

    #kontakt .rubrik-dl,
    .ap-kontaktbox-2 .rubrik-dl {
        width: 100%;
    }

    .mitmachen-form {
        padding: 5rem;
    }

    #contact-form input[type="checkbox"] {
        left: 5rem;
    }

    #contact-form {
        padding-top: 2rem;
    }

    #contact-form button {
        right: 5rem;
    }

    #id_phone {
        margin-bottom: 2rem;
    }

    #spenden .buttons {
        padding-top: 0;
    }

    #spenden .buttons button {
        display: block;
        margin: auto;
        margin-bottom: 3rem;
    }

    .blog-article .img-wrapper {
        height: 20rem;
        bottom: 3rem;
        max-height: 17rem;
        width: 90%;
        margin: auto;
    }

    .blog-article h1 {
        left: -2rem;
    }

    .blog-article .img-caption {
        width: 90%;
        margin: auto;
    }

    .blog-article .img-wrapper img {
        height: auto;
    }

    .blog-article-head {
        height: 25rem;
    }

    .article-body {
        width: 80%;
        margin-left: 10%;
    }

    .tags {
        padding: 1rem;
        position: relative;
        z-index: 1;
    }

    .news-head .img-wrapper img {
        padding-top: 6rem;
    }

    .ccl-body .flex-container .news-container {
        width: 100%;
    }

    .news-container .img-wrapper img {
        height: auto;
    }

    .news-index-body {
        height: auto;
        position: relative;
        bottom: 8rem;        
    }

    .news-container .two-and-three h1 {
        font-size: 3rem;
    }

    .blog-article {
        padding: 2rem 2rem;
    }

    .ccl-spende .subline, .mitmachen .subline {
        padding-bottom: 3rem;
    }

    .further-news .blog-post h2 {
        font-size: 2rem;
    }

    .tag-body .flex-container {
        flex-direction: row;
        padding: 1rem;
    }

    #uebersicht .img-wrapper-shift {
        height: 15rem;
    }

    #klimadividende .img-wrapper-shift{
        height: 15rem;
    }

    #klimaziel .img-wrapper-shift {
        height: 17rem;
    }

    .ccl-body #klimadividende .wrapper-2 {
        height: auto;
    }

    #downloads {
        padding-top: 5rem;
    }
    
    #downloads > .flex-container {
        flex-direction: column;
    }

    #corechner > .body-item-text > .subline {
        padding-top: 0;
    }

    .ccl-body > .flex-container .body-item > .klimawissen {
        margin-top: 6rem;
    }

    .klimawissen > .flex-container > .side-nav {
        padding-top: 4rem;
    }

    .datensatz {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .datensatz .ds-item {
        margin: 0 1rem;
        width: 43%;
    }

    .rechner-results .flex-container {
        flex-direction: column;
    }

    .outside-link .flex-item img {
        margin-left: .5rem;
    }

    .modal {
        width: 80%;
        padding: 5rem;
        border: .1rem solid black;
    }

    .close-btn {
        top: 1rem;
    }

    #faq h2 {
        padding-top: 5rem;
    }

    #faq #gradlimit {
        padding-top: 0;
    }

    .content {
        overflow: inherit;
    }

    #faq .content img {
        width: 90%;
        margin-bottom: 0;
        padding-bottom: 1rem;
    }

    .zwischensummen .tween-flex {
        width: 98%;
    }

    #faq .rechner-content img {
        width: 10rem;
    }

    .further-news .flex-container {
	flex-wrap: wrap;
    }

    .further-news .flex-container .blog-post {
	max-width: 30%;
    }

    .ccl-footer-dl .flex-container .flex-item {
        padding-bottom: 5rem;
    }
}



@media only screen and (min-width: 768px) {
    /* For tablets: */
    h0, h1, h2, footer, header {
        hyphens: manual;
    }

    .side-nav-item {
        min-height: 3.5rem;
        padding-top: .6rem;
    }

    .side-nav-item img {
        bottom: .7rem;
    }

    .template-homepage .col-md-8 > .iframe-wrapper {
        margin-bottom: 1rem;
    }

    .twingle-wrapper:before {
        top: 17rem;
    }
    
    .iframe-wrapper video {
        width: 100%;
    }

    .main-title-sub {
        font-size: 4rem;
    }
    
    .main.main-title-big  {
        font-size: 5rem;
    }

    .main-head-img .main-head-button {
        right: 4rem;
    }

    .main-title,
    .main-head-link {
        padding-left: 5rem;
    }

    .module-1 {
        padding: 6rem;
    }

    .module-2 .col-md-8,
    .module-2 .col-md-4 {
        width: 100%;
    }

    .rechner-lite-subtext {
        padding: 0 2rem 2rem 1rem;
    }


    .module-news .news-header {
        padding-bottom: 5rem;
    }

    .iframe-wrapper {
        width: 80%;
        max-width: 52rem;
        height: 35rem;
    }

    .module-2 .col-md-4 {
        padding: 5rem 22rem 5rem 8rem;
    }

    .blog-post-first .img-wrapper {
        height: auto;
        overflow: hidden;
        width: 80%;
        margin: auto;
    }

    .blog-article .img-caption {
        width: 70%;
    }

    .blog-post-first .img-wrapper img {
        height: auto;
    }

    .module-news > .body-container {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .blog-post-first .img-wrapper {
        bottom: 5rem;
    }

    .blog-post-first .article-date,
    .blog-post-first header,
    .blog-post-first .blog-intro {
        padding-left: 7rem;
    }

    #uebersicht .img-wrapper-shift, #klimadividende .img-wrapper-shift, #klimaziel .img-wrapper-shift {
        position: relative;
    }

    .ccl-body #ueberuns .img-wrapper img, .ccl-body #uebersicht .img-wrapper-shift img, .ccl-body #klimadividende .img-wrapper-shift img, .ccl-body #klimaziel .img-wrapper-shift img {
        left: -23rem;
    }

    .module-news .blog-post-first .article-date,
    .module-news .blog-post-first header,
    .module-news .blog-post-first .blog-intro {
        position: relative;
        bottom: 0;
    }

    .news-head .img-wrapper img {
        padding-top: 7rem;
        padding-bottom: 10rem;
        width: 45%;
    }

    .ccl-footer-3 {
        padding: 0rem 6rem;
    }

    .blog-post-first > a {
        display: block;
    }

    .module-3 .img-wrapper {
        bottom: 11rem;
    }

    .module-newsletter {
        padding: 0rem 7rem 5rem 7rem;
    }

    #mc_embed_signup_scroll .clear {
        padding-right: 7rem;
    }

    footer .footer-mobile .btn-join {
        left: 75%;
    }

    .ccl-head .subline,
    .ccl-head .klimawissen-subline {
        padding: 16rem 12rem 0 3rem;
    }

    .ccl-head header {
        padding: 16rem 8rem 0 3rem;
    }


    .modal {
        width: 70%;
        margin-top: 4rem;
    }

    .kl-head {
        padding-bottom: 8rem;
    }

    .kl-head h1 {
        padding-top: 3rem;
    }

    .ccl-body #klimadividende .img-wrapper-shift img {
        bottom: -2rem
    }

    #klimadividende .body-item-text {
        padding-top: 2rem;
    }

    .ccl-body #klimaziel .img-wrapper-shift img {
        bottom: -4rem;
    }

    #klimaziel .body-item-text {
        padding-top: 2rem;
    }
   
    .ccl-body #ueberuns .img-wrapper img {
        width: 70vw;
    }

    .ccl-body #ueberuns .img-wrapper {
        bottom: 16rem;
    }

    .ccl-footer-links {
        padding: 5rem;
    }

    .ap-kontaktbox-2 {
        width: 60%;
        max-width: 45rem;
    }

    .ap-kontaktbox {
        width: 85%;
        max-width: 45rem;
    }

    .more-vids {
        width: 100%;
    }

    .ccl-footer-dl .flex-container {
        flex-direction: row;
    }

    .ccl-footer-dl .flex-container .flex-item {
        width: 100%;
    }

    .ccl-head .subline {
        padding-top: 4rem;
        padding-bottom: 7rem;
        font-size: 3rem;
    }

    .ccl-head .klimawissen-subline {
        padding-bottom: 3rem;
    }

    #ansprechpartner .img-wrapper img {
        width: 90%;
    }

    #ansprechpartner .img-wrapper #dilara {
        width: 100%;
    }

    .ap-kontaktbox {
        right: 0;
    }

    #gruender .img-wrapper img {
        bottom: 4rem;
    }

    #gruender header {
        padding-top: 15rem;
    }

    #gruender > .flex-container iframe,
    .vid-wrapper iframe {
        height: 28rem;    
    }

    .body-item-content .flex-right {
        padding-left: 1rem;
        text-align: left;
    }

    .main-logo {
        margin-bottom: 3rem;
    }

    #myNavbar .flex-container .flex-item {
        margin: 2.5rem 0;
    }

    .navbar-nav {
        margin-bottom: 5rem;
    }

    #fb-logo {
        width: 2rem;
    }

    #twitter-logo {
        width: 2rem;
    }

    .ccl-head header {
        padding-top: 13rem;
    }

    .kw-head header {
        padding-top: 16rem;
    }

    .ccl-head .subline {
        padding-top: 0;
        font-size: 2rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        height: 23rem;
    }

    .ccl-body .flex-container .side-nav {
        padding-top: 32rem;
    }

    .buergerlobby .flex-container .side-nav {
        padding-top: 26rem;
    }

    .buergerlobby .body-item-content .subline {
        padding-top: 4rem;
    }

    .side-nav-item .pad-bot {
        padding-bottom: 1rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        bottom: 2rem;
        height: 26rem;
    }

    #uebersicht .img-wrapper-shift,
    #klimadividende .img-wrapper-shift {
        height: 23rem;
        bottom: -1rem;
    }

    #uebersicht .body-item-text {
        padding-top: 4rem;
    }

    #klimaziel .img-wrapper-shift {
        height: 25rem;
        bottom: 3rem;
    }

    .body-kl .flex-container .side-nav {
        padding-top: 27rem;
    }

    .forderungen-mobile {
        display: none;
    }

    .forderungen-tablet {
        display: block;
        padding: 2rem;
        font-size: 1.5rem;
    }

    .f-text {
        padding-left: 1rem;
    }
        
    .max-out {
        max-width: 55rem;
        right: 20%;
    }

    .klimawissen .flex-container .side-nav {
        padding-top: 4rem;
        z-index: 0;
    }

    .zwischensummen .flex-container .flex-first {
        width: 37%;
    }

    .kr-mobile {
        display: none;
    }

    .kr-tablet {
        display: block;
    }

    .kr-tablet .flex-container {
        flex-wrap: wrap;
    }

    .kr-tablet .flex-container .flex-item {
        width: 16.6%;
        border: .1rem solid lightgrey;
    }

    .kr-tablet .kr-2 .flex-item {
        width: 20%;
        border: .1rem solid lightgrey;
    }

    .kr-tablet input {
        width: 6rem;
    }

    .klimarechner > .ds-caption {
        margin-top: 4rem;
    }

    .kr-2 .green-bg {
        margin-top: 2rem;
    }

    .klimarechner > .zwischensummen {
        margin-top: 3rem;
    }

    .rechner-results .flex-container {
        flex-direction: row;
    }

    .rechner-results .flex-item {
        padding: 1.8rem;
        width: 33%;
    }

    .rechner-results .border-right {
        border-right: .1rem solid lightgrey;
    }

    #sim-co2 {
        margin: 2rem 0;
        width: 6rem;
    }

    .wrapper-3 .buttons {
        padding-top: 2rem;
    }

    .blog-article .img-wrapper {
        width: 70%;
        max-height: 20rem;
    }

    .twingle-wrapper,
    .mitmachen-form {
        padding: 7rem 12rem;
    }

    #contact-form input[type="checkbox"] {
        left: 11rem;
    }

    .ccl-spende .subline,
    .mitmachen .subline {
        padding-bottom: 3rem;
    }

    #contact-form button {
        right: 12rem;
    }
    
    .main-title-big {
        font-size: 5rem;
    }

    .imprint {
        padding: 5rem 5rem 8rem 5rem;
    }
}


@media only screen and (min-width: 992px) {
    .main-title,
    .main-head-link {
        padding-left: 10rem;
    }

    .iframe-wrapper {
        max-width: 58rem;
    }

    .twingle-wrapper:before {
        top: 24rem;
    }

    .ccl-body .flex-container .side-nav {
        width: 30%;
    }

    .main-head-img .main-head-button {
        right: 15rem;
    }

    .module-1 {
        padding: 6rem 12rem;
    }

    .module-2 .col-md-4 {
        padding: 5rem 22rem 5rem 10rem;
    }

    .blog-post-first .img-wrapper {
        width: 83%;
        height: 34rem;
    }

    .two-and-three .img-wrapper img {
        width: 100%;
    }

    .news-index-body .blog-post-first .article-date,
    .news-index-body .blog-post-first header,
    .news-index-body .blog-post-first .blog-intro {
        padding-left: 18rem;
    }

    .news-index-body .blog-post-first .img-wrapper {
        height: 31rem;
    }

    .two-and-three .blog-post {
        padding: 2rem 5rem;
        width: 50%;
    }

    .module-3 .img-wrapper img {
        max-width: 32rem;
    }

    .navbar-nav > li > a {
        font-size: 2.5rem;
    }

    .ccl-body #ueberuns .img-wrapper img {
        max-width: 50rem;
        left: -10rem;
    }

    .ccl-side-posts-3 .blog-post {
        width: 33%;
    }

    .ccl-side-video iframe {
        height: 15rem;
    }

    .klimarechner,
    .zwischensummen,
    .rechner-results,
    .outside-link,
    .wrapper-3 {
        padding-left: 2rem;
    }

    .ccl-footer-dl {
        padding: 0 10rem;
    }

    .ccl-footer-links {
        padding: 5rem 10rem;
    }

    .ccl-footer-dl .img-wrapper img {
        max-width: 40rem;
    }

    #ansprechpartner .img-wrapper img {
        max-width: 16rem;
        width: 16rem;
    }

    #dilara {
        margin-right: 1rem;
    }

    .vereinsvorstand .img-wrapper img {
        max-width: 16rem;
    }

    .vereinsvorstand .flex-container .flex-item {
        text-align: left;
    }

    #gruender .img-wrapper img {
        max-width: 56rem;
    }

    .more-vids .flex-left {
        width: 80%;
    }

    .more-vids .flex-right {
        width: 20%;
    }

    .form-wrap {
        padding: 0 6rem 5rem 0;
    }

    .max-out {
        max-width: 65rem;
        right: 0;
    }

    #uebersicht .img-wrapper-shift, 
    #klimadividende .img-wrapper-shift,
    #klimaziel .img-wrapper-shift {
        height: 26rem;
        bottom: 1rem;
        width: 100%;
        overflow: hidden;
        right: 25%;
    }

    #uebersicht .body-item-text {
        padding-top: 0;
    }

    #klimaziel .img-wrapper-shift {
        height: 28rem;
    }

    .ccl-body #uebersicht .img-wrapper-shift img, .ccl-body #klimadividende .img-wrapper-shift img, .ccl-body #klimaziel .img-wrapper-shift img {
        height: auto;
        position: relative;
        width: 100vw;
        left: 0;
        bottom: 70rem;
    }

    .forderungen {
        margin-left: 3rem;
    }

    #kontakt .map-caption {
        bottom: .4rem;
    }

    .map-caption-2 {
        text-align: center;
    }

    .form-wrap {
        padding-right: 10rem;
    }

    .twingle-wrapper {
        padding: 7rem 22rem;
    }

    .news-container .blog-post-first .img-wrapper {
        max-width: 60rem;
    }

    .module-news .blog-post-first .article-date, 
    .module-news .blog-post-first header,
    .module-news .blog-post-first .blog-intro {
        padding-left: 8rem;
        bottom: -1rem;
    }

    .module-newsletter {
        padding: 2rem 20rem;
    }

    .further-news {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .further-news .img-wrapper img {
        max-width: 25rem;
    }

    .news-head .img-wrapper img {
        width: 40%;
    }

    .blog-article .img-wrapper {
        width: 80%;
        height: 25rem;
        max-height: 25rem;

    }

    .blog-article .img-caption {
        width: 50%;
    }

    .article-body {
        width: 67%;
    }

    .wrapper-rechner img {
        width: 10rem;
        padding-bottom: 2rem;
    }

    .wrapper-rechner {
        height: 13.4rem;
    }

    #bilanz-img {
        padding-top: 4rem;
    }

    .rechner-results .flex-item {
        width: 33%;
    }
}


@media only screen and (min-width: 1200px) {
    /* For desktops: */
    body {
        width: 120rem;
        margin: auto;
    }

    .upper-flex .flex-container {
        min-width: 50%;
    }

    .side-nav-item img {
        bottom: 0rem;
    }

    .iframe-wrapper video {
        max-width: 100%;
    }

    .twingle-wrapper:before {
        top: 30rem;
    }

    /* Navigation */
    .main-logo {
        text-align: left;
        display: inline;
        margin-left: 2rem;
    }

    .main-logo img {
        width: 6rem;
        margin-left: 2rem;
        margin-top: 1rem;
    }

    .navbar-toggle {
        display: none;
    }

    .collapse:not(.show) {
        display: block;
    }

    #myNavbar {
        position: absolute;
	    width: 100%;
        top: 0;
        background-color: transparent;
        height: unset;
        padding-bottom: 2rem;
    }

    .ccl-body .flex-container .news-container .two-and-three {
    width: 70%;
    }

    #fb-logo {
        width: 2rem;
        filter: invert();
    }

    #twitter-logo {
        width: 2rem;
    }

    .ap-buttons .btn-dark-transparent {
        padding: 1.5rem .5rem;
    }

    .ap-buttons #fb-logo {
        margin-left: 1rem;
    }

    .navbar-nav > li > a {
        color: black;
        display: inline;
        font-size: 1.5rem;
        color: white;
        margin-left: 1.5rem;
    }

    .navbar-nav > li {
        display: inline;
    }

    #myNavbar .flex-container {
        display: inline;
    }

    .head-buttons {
        display: inline;
    }

    .head-button img {
        width: 1rem;
        margin: 0;
        margin-left: 2rem;
    }

    .navbar-nav {
        position: relative;
        bottom: 1rem;
    }    

    .head-buttons {
        position: relative;
        bottom: 1.3rem;
    }

    /* solely index nav */
    .main-logo-index img {
        margin-top: 0;
        width: 11rem;
    }

    .index-lower-nav {
        position: relative;
        bottom: 48rem;
    }

    .index-lower-nav ul {
        text-align: center;
        padding-left: 0;
        margin-top: 2rem;
        padding-right: 7rem;
    }
    
    .index-lower-nav ul li {
        display: inline;
    }

    .index-lower-nav ul li a {
        font-size: 1.6rem;
        margin: 0 1.5rem;
        font-weight: 800;
    }

    .btn-mitmachen {
        position: relative;
        left: 84%;
        bottom: 8rem;
        width: 0;
    }

    #btn-mitmachen-index {
        width: 14rem;
    }

    .index-lower-nav .main-logo-index {
        position: relative;
        bottom: 41rem;
        left: 9%;
        width: 0;
    }

    .main-head-img {
        height: 60rem;
    }

    .main-head-img > img {
        width: 150%;
        top: -100rem;
    }

    .main-title {
        width: 80%;
        padding-left: 24rem;
        top: -40rem;
    }

    .main-title-big {
        font-size: 7rem
    }

    .main-head-link {
        top: -46rem;
        padding-left: 24rem;
    }

    .main-contact-index {
        position: relative;
        text-align: right;
        bottom: 51rem;
        padding-right: 2rem;
        padding-top: 2rem;
    }

    .main-contact-index .mci-item {
        display: inline;
    }

    .main-contact-index .mci-item a:hover {
        color: rgba(0,160,230);
    }

    .main-contact-index .mci-item a {
        color: white;
        font-size: 1.6rem;
        font-weight: 800;
        margin-right: 2rem;
    }

    .module-1 {
        padding: 20rem 20rem 8rem 20rem;
    }

    .mm-1-low {
        padding-top: 5rem;
    }

    .module-1 .subline {
        padding: 0 10rem;
    }

    .module-2 .col-md-4 {
        width: 40%;
        padding: 0 0 8rem 15rem;
    }

    .template-homepage .module-2 .col-md-4 {
        width: 40%;
        padding: 0 0 8rem 10rem;
    }

    .module-2 .col-md-8 {
        width: 60%;
    }

    .module-2 .row {
        flex-direction: row;
    }

    .module-2 .col-md-8 {
        width: 55%;
    }

    .module-news .news-header {
        padding-bottom: 12rem;
    }

    .module-news .news-header img {
        width: 40rem;
    }

    .module-3 {
        height: 40rem; 
    }

    #ansprechpartner .flex-row h2 {
        padding-bottom: 4rem;
    }

    #ansprechpartner .img-wrapper img {
        padding-bottom: 3rem;
    }

    .body-item .vereinsvorstand {
        padding-bottom: 5rem;
        padding-top: 0;
    }

    .btn-first {
        padding-left: 0;
    }

    .module-news h2,
    .module-news .blog-intro {
        padding-top: 1rem;
    }
    
    .module-news .blog-post-first .article-date, .module-news .blog-post-first header, .module-news .blog-post-first .blog-intro {
        padding-left: 0;
    }

    .news-index-body .blog-post-first .article-date, .news-index-body .blog-post-first header, .news-index-body .blog-post-first .blog-intro {
        padding-left: 1.5rem;
    }

    .module-news .further-news {
        width: 100%;
        padding-left: 0;
    }

    .module-news .further-news .blog-post {
        width: 33%;
        padding-left: 0;
    }

    .hyphenation-single-blog {
        hyphens: manual;
    }

    .module-news .further-news .blog-post .img-wrapper-2 img {
        width: 100%;
        height: auto;
    }

    .body-container {
        display: flex;
        flex-direction: row;
        position: relative;
        bottom: 23rem;
    }

    .body-container > .flex-container {
        flex-direction: column;
    }

    .blog-post-first .img-wrapper {
        bottom: 0;
        width: 100%;
    }

    .blog-post-first header,
    .blog-post-first .blog-intro {
        padding-left: 0;
    }

    .blog-post-first {
        width: 70%;
        min-width: 65rem;
    }

    .further-news .blog-post h2 {
        font-size: 1.5rem;
    }

    .module-news .blog-post-first > header h2 {
        font-size: 4rem;
    }

    .module-news .blog-post-first > a {
        height: auto;
    }

    .blog-post-first .article-date, .blog-post-first header, .blog-post-first .blog-intro {
        bottom: 5rem;
    }

    .blog-post-first .article-date, .blog-post-first header, .blog-post-first .blog-intro {
        bottom: 0;
    }

    .blog-post-first .img-wrapper {
        margin-left: 0;
    }

    .two-and-three .img-wrapper img {
        width: 40rem;
        height: auto;
    }
    
    .module-news .blog-post-first .article-date, .module-news .blog-post-first header, .module-news .blog-post-first .blog-intro {
        bottom: -2rem;
    }

    .two-and-three .blog-post .article-date,
    .two-and-three .blog-post header,
    .two-and-three .blog-post .blog-intro
     {
        bottom: -1rem;
        position: relative;
    }

    .module-news .buttons {
        position: relative;
        bottom: 3rem;
    }

    .module-news {
        padding-bottom: 15rem;
    }

    .ccl-head .subline {
        padding-bottom: 11rem;
    }

    .module-3 .subline {
        width: 50%;
    }
    
    .module-newsletter {
        padding: 5rem 25rem;
    }

    .footer-desktop {
        padding: 8rem 10rem;
    }

    .footer-desktop > .flex-container {
        flex-direction: row;
    }

    .footer-desktop .flex-item {
        font-size: 1.4rem;
        color: white;
        padding-right: 7rem;
    }
    
    .footer-desktop > .flex-container a {
        display: block;
        margin-bottom: 2rem;
    }

    .footer-desktop #mc-embedded-subscribe-form {
        padding-top: 0;
    }

    .footer-desktop #mc-embedded-subscribe-form h2 {
        margin-top: 0;
        width: 80%;
        font-size: 1.4rem;
    }

    .footer-desktop .flex-middle {
        width: 33%;
    }

    .ccl-head {
        padding-top: 8rem;
    }

    #btn-mitmachen {
        width: 10rem;
    }

    .spenden {
        padding-bottom: 5rem;
    }

    .ccl-head header {
        padding-top: 3rem;
        padding-left: 23rem;
    }

    .ccl-head .subline {
        padding-left: 23rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        bottom: -21rem;
    }

    .ccl-body .flex-container .side-nav {
        width: 21%;
        padding-top: 14rem;
        position: relative;
        bottom: 6rem;
        max-width: 22rem;
    }

    #los-btn {
        display: block;
    }
    
    .side-nav-item {
        padding-bottom: .5rem;
        padding-top: .5rem;
    }

    .body-kl .flex-container .side-nav {
        padding-top: 7rem;
    }

    .kl-head > header {
        padding-bottom: 4rem;
    }

    .ccl-body #presentation {
        bottom: 0;
    }

    .buergerlobby .body-container {
        bottom: 16rem;
    }

    .ccl-body #ueberuns .img-wrapper {
        bottom: -16rem;
    }

    .ccl-body #ueberuns .subline {
        padding-top: 30rem;
    }

    .ccl-body #ueberuns .img-wrapper img {
        left: 0;
    }
    
    .ccl-body .flex-container .body-container {
        width: 60%;
    }

    .ccl-footer {
        position: relative;
        width: 27%;
        left: 75%;
        top: 10rem;
        height: 0;
        z-index: 1;
        display: none;
    }

    .ccl-footer-2 {
        padding-top: 0;
        position: relative;
        bottom: 0;
    }

    .ccl-side-newsletter #mc_embed_signup h2 {
        width: 80%;
    }

    .ccl-footer-3 {
        top: 0;
    }

    #mc_embed_signup form {
        padding-top: 5rem!important;
    }

    .buergerlobby {
        position: relative;
        bottom: 7rem;
        height: unset;
    }

    .ccl-footer .bg-stripes {
        background-image: none;
    }

    .ccl-side-posts-3 .flex-container {
        flex-direction: column;
    }

    .ccl-footer > .flex-container {
        flex-wrap: wrap;
    }

    .ccl-side-posts-3 .blog-post {
        width: 100%;
    }

    .ccl-side-posts-3 .flex-container {
        margin-bottom: 0;
    }

    .ccl-side-newsletter, .ccl-side-video {
        width: 100%;
    }

    .ccl-side-newsletter {
        padding-top: 5rem;
    }

    footer .ccl-side-newsletter {
       padding-top: 0;
    }

    #contact-form input[type="checkbox"],
    #id_gruppen {
        left: unset;
        float: left;
        position: relative;
        margin-bottom: 0;
        margin-right: 1rem;
    }

    .video-caption {
        width: 100%;
    }

    .ccl-body #ueberuns .img-wrapper img {
        max-width: 68rem;
    }

    .ccl-footer-dl {
        padding: 0;
        padding-top: 0;
    }

    .cf-3 .ccl-footer-dl {
        margin-top: 23rem
    }

    .ccl-footer-dl .flex-container .flex-item {
        padding-bottom: 0;
    }

    .ccl-footer-2 > div {
        width: 64%;
        margin: auto;
    }

    .ccl-footer-links {
        padding: 7rem 0;
    }
    
    .ccl-footer-dl .flex-container {
        flex-direction: column;
    }

    .ccl-footer-2 .ccl-footer-dl .flex-container {
        flex-direction: row;
    }

    #vision, #derverein, #kontakt {
        padding-top: 23rem;
    }

    .side-posts-title {
        padding-left: 3.5rem;
    }

    #gruender header {
        padding-top: 17rem;
    }

    #derverein > .buttons a {
        margin-right: 2rem;
    }

    .more-vids {
        width: 100%;
        max-width: 100%;
    }

    #ueberuns {
        height: 150rem;
    }

    #vision {
        height: 171rem;
    }

    #ansprechpartner {
        padding-top: 26rem;
        height: 240rem;
    }

    .map-wrapper,
    .map-caption {
        width: 94%;
        right: 0;
    }

    .ap-gmap {
        width: 50%;
        display: inline-block;
    }

    .ap-kontaktbox {
        float: right;
        width: 50%;
    }

    #gruender .ap-kontaktbox { 
        width: 100%;
    }

    .map-caption {
        text-align: center;
    }

    .vereinsvorstand .flex-container .flex-item {
        width: 23%;
        min-width: 23%;
    }

    .ap-buttons > a > img {
        width: 1rem;
        margin-right: 1rem;
    }

    #ziele {
        padding-top: 26rem;
        height: 150rem;
    }

    #ziele .subline {
        padding-top: 3rem;
    }

    #gruender h1 {
        padding-top: 3rem;
    }

    #derverein {
        height: 248rem;
    }

    #gruender {
        padding-top: 17rem;
        height: 312rem;
    }

    #gruender .subline {
        padding-top: 2rem;
    }

    #gruender .upper-flex iframe {
        height: 20rem;
    }

    .more-vids .flex-right {
        width: 27%;
    }

    .upper-flex {
        display: flex;
    }

    .more-vids .rubrik-dl {
        margin: unset;
    }

    .upper-flex .flex-right {
        margin-right: 1rem;

    }

    #kontakt {
        height: 147rem;
    }

    #kontakt .flex-container {
        flex-direction: row;
    }

    #kontakt .ap-kontaktbox {
        width: 100%;
    }

    .mitmachen-form > .flex-container {
        flex-direction: row;
    }

    #kontakt > .flex-container > .flex-item {
        right: 0;
        width: 100%;
    }

    #uebersicht .img-wrapper-shift, #klimadividende .img-wrapper-shift, #klimaziel .img-wrapper-shift {
        right: 0;
        width: 138%;
        height: 40rem;
    }

    .ccl-body #uebersicht .img-wrapper-shift img, .ccl-body #klimadividende .img-wrapper-shift img, .ccl-body #klimaziel .img-wrapper-shift img {
        width: 110%;
        bottom: 60rem;
    }

    #klimadividende .img-wrapper-shift {
        bottom: -13rem;
    }

    .ccl-body #uebersicht .subline,
    .ccl-body #klimadividende .subline {
        padding-top: 0;
    }

    #presentation #uebersicht .body-item-text {
        width: 100%;
    }

    #uebersicht > .img-wrapper-shift {

    }

    .cf-3 {
        height: 0;
    }

    .cf-3 .ccl-side-posts .flex-container {
        flex-direction: column;
    }

    .forderungen {
        margin-left: 0;
        right: 0;
        width: 100%;
    }

    #uebersicht {
        position: relative;
        bottom: -14rem;
    }
    
    #uebersicht .body-item-text .subline,
    #klimadividende .body-item-text .subline,
    #klimaziel .body-item-text .subline {
        color: white;
        font-size: 4rem;
        position: relative;
        bottom: 30rem;
        left: 6rem;
        height: 0;
    }

    #presentation #uebersicht .body-item-text {
        padding-top: 0;
    }

    .ccl-body #klimadividende .body-item-text,
    .ccl-body #klimaziel .subline {
        padding-top: 14rem;
    }

    .body-kl {
        margin-bottom: -7rem;
    }

    .kl-head {
        position: relative;
        z-index: -1;
    }

    .cf-3 .side-posts-title {
        padding-left: 4rem;
        font-weight: 400;
    }

    .cf-3 .ccl-side-posts .blog-post::before {
        top: 4.5rem;
        line-height: 0.1;
    }

    #klimadividende .body-item-text > .subline-clone,
    #klimaziel .body-item-text > .subline-clone {
        padding-top: 0;
        color: rgba(0,160,230);
        font-size: 2.5rem;
        bottom: 0;
        left: 0;
        height: unset;
    }

    #klimaziel .img-wrapper-shift {
        bottom: -13rem;
    }

    #klimaziel .img-wrapper-shift,
    #klimadividende .img-wrapper-shift,
    #uebersicht .img-wrapper-shift {
        background-color: rgba(0,0,0,0.5);
        position: relative;
        z-index: unset;
    }

    #klimaziel .img-wrapper-shift img,
    #klimadividende .img-wrapper-shift img,
    #uebersicht .img-wrapper-shift img {
        position: relative;
        z-index: -1;
    }

    #downloads {
        padding-top: 24rem;
    }

    #klimaziel .body-item-text {
        padding-top: 0;
    }

    .ccl-body > .flex-container .body-item > .klimawissen {
        margin-top: 15rem;
    }

    .mitmachen-pretext {
        line-height: 2;
    }

    .klimawissen .wrapper-3 {
        width: 100%;
    }

    .klimawissen .flex-container .side-nav {
        padding-top: 9rem;
    }

    .klimawissen .body-container {
        bottom: 15rem;
    }

    #corechner > .body-item-text > .subline {
        color: rgba(0,30,50);
        width: 75%;
    }

    .datensatz .ds-item {
        width: 20%;
    }

    .datensatz .ds-caption {
        font-size: 1.4rem;
        margin-top: 1rem;
    }

    .outside-link {
        width: 100%;
    }

    .klimarechner > .wrapper-2 {
        width: 100%;
        right: 0;
    }

    #corechner .p-custom {
        padding-bottom: 2rem;
    }

    #faq {
        padding-left: 1rem;
    }

    .ausgangslage input,
    .ausgangslage select {
        width: 20rem;
    }

    .ausgangslage #input-ausgangslage-1,
    .ausgangslage #input-ausgangslage-3 {
        width: 7rem;
    }

    .ausgangslage .p-custom-2, 
    .ausgangslage .input-field {
        display: inline;
    }

    .ausgangslage .p-custom-2 {
        margin-right: 5rem;
    }

    .klimarechner .kr-tablet {
        padding-left: 0;
        margin-top: 2rem;
    }

    .klimarechner {
        padding-left: 0;
    }

    .klimawissen .outside-link,
    .klimawissen .wrapper-3 {
        right: unset;
        padding-left: 0;
    }

    .klimawissen .outside-link button {
        padding: 1rem 0 1rem 1rem;
    }

    #tab-3 {
        max-width: 57%;
    }

    #tab-4,
    #tab-5,
    #img-1,
    #img-2{
        max-width: 80%;
    }

    #tab-6,
    #tab-8 {
        max-width: 65%;
    }

    #tab-7 {
        max-width: 40%;
    }

    #img-3 {
        max-width: 60%;
    }

    .news-head .img-wrapper img {
        width: 36%;
    }

    .news-head {
        padding-top: 0;
    }

    .ccl-body .flex-container .news-container {
        width: 100%;
        bottom: 0;
        flex-direction: column;
    }

    .ccl-body .flex-container .news-container .two-and-three {
        flex-direction: row;
    }


    .news-container .blog-post-first .img-wrapper {
        width: 100%;
        max-width: 80rem;
    }

    .blog-post-first .article-date, .blog-post-first header, .blog-post-first .blog-intro {
        padding-left: 0;
    }

    .news-container .blog-post-first > a {
        height: auto;
    }

    .news-container .blog-intro {
        font-weight: lighter;
    }

    .news-container .blog-post-first h1 {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .news-container .blog-post-first .article-date {
        padding-top: 1rem;
    }

    .blog-article h1 {
        width: 100vw;
        max-width: 120rem;
        left: -2rem;
        padding-left: 2rem;

    }

    .two-and-three .blog-post {
        padding-left: 3.5rem;
    }

    .two-and-three .blog-post h1 {
        width: 70%;
    }

    .further-news {
        width: 75%;
    }

    .news-side-bar {
        width: 25%;
        position: relative;
        left: 72%;
        bottom: 0;
        padding-top: 2rem;
        height: 0;
        z-index: 1;
    }

    .news-side-bar .ds-caption {
        font-weight: 800;
        font-size: 1.5rem;
    }

    #nsb-1 {
        width: 60%;
        display: block;
        margin: auto;
    }

    .nsb-1 {
        font-size: 1.8rem;
    }
    
    .news-side-bar .flex-item {
        padding: 0 1rem;
    }

    .news-side-bar .nsb-2,
    .news-side-bar .nsb-5 {
        font-size: 1.4rem;
        font-style: italic;
        padding-top: 1rem;
    }

    .news-side-bar .nsb-2 {
        padding-top: 2rem;
    }

    #nsb-2 {
        width: 42%;
        float: right;
        position: relative;
        bottom: 3rem;
    }

    .nsb-3,
    .nsb-4 {
        font-size: 2rem;
        font-style: italic;
    }

    .nsb-4 {
        padding-top: 1rem;
    }

    #nsb-3 {
        width: 40%;
        float: right;
        position: relative;
        bottom: 1rem;
        right: 2rem;
    }

    #nsb-4 {
        width: 20%;
        float: left;
        margin-right: 1rem;
    }

    .hr-nsb {
        margin-top: 4rem;
    }

    .blog-article-head {
        height: 30rem;
    }

    .blog-article h1 {
        background-color: unset;
    }

    .bas {
        position: relative;
        bottom: 25rem;

    }

    .blog-article .hyphenation-single-blog {
        padding-left: 23rem;
        max-width: 90rem;
    }

    .blog-article .img-caption {
        bottom: 0;
    }

    .blog-article .img-wrapper {
        bottom: 8rem;
        height: 23rem;
        width: 68%;
    }

    .blog-article img {
        max-width: 84%;
        width: unset;
    }

    .blog-article {
        width: 87%;
        min-height: 90rem;
    }

    .article-side-bar {
        width: 25%;
        position: relative;
        left: 73%;
        background-color: transparent;
        padding: 1rem;
        height: 0;
    }

    .blog-article > div {
        margin-left: 5rem;
    }
    .ap-buttons #twitter-logo {
        margin-right: 0;
        margin-left: .5rem;
    }

    .article-side-bar .tags {
        background-color: transparent;
        padding-top: 6rem;
    }

    .tags-page .flex-container {
        flex-direction: row;
    }

    .module-news .blog-post-first .img-wrapper img {
        position: relative;
        min-height: 34rem;
        width: auto;
    }

    .blog-post-first .img-wrapper img {
        
    }

    .tag-body .flex-container {
        padding-top: 1rem;
    }

    #contact-form input, #contact-form textarea {
        width: 100%;
        margin-bottom: 1rem;
    }

    #contact-form button {
        right: 0;
    }

    #mc_embed_signup form {
        padding-top: 0!important;
    }

    .map-wrapper-2 {
        width: 100%;
        margin-right: 1rem;
        margin-top: 0;
    }

    .mitmachen-form > .flex-container .the-map {
        width: 50%;
    }

    .ap-kontaktbox-2 {
        width: 100%;
    }

    .form-wrap {
        padding-bottom: 8rem;
    }

    .imprint-head header {
        padding-bottom: 5rem;
    }

    .imprint {
        padding: 5rem 23rem;
        font-size: 1.4rem;
    }

    #mc_embed_signup_scroll > #mergeRow-gdpr {
        width: 60%;
    }

    .ccl-side-newsletter #mc_embed_signup_scroll > #mergeRow-gdpr {
        width: 95%;
    }

    .module-news .blog-post-first > a > img {
        margin-bottom: 0;
    }

    .footer-desktop {
        padding-bottom: 3rem;
    }

    .footer-desktop .flex-end {
        width: 80%;
    }
   
    .hide-desktop {
        display: none!important;
    }

    .hide-mobile {
        display: block;
    }

}