.iframe-16by9,
.iframe-youtube
{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.iframe-16by9 iframe,
.iframe-youtube iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* override padding bottom for youtube embeds and add margin */
.iframe-youtube {
    padding-bottom: 56.55%; /* 16:9 */
    margin-bottom: 1rem;
}

@media only screen and (max-width: 975px)
{
    #footer a span
    {
        display: none;
    }

    #navi-main > li > ul > li
    {
        width: 33.333%;
    }

    body:not(.shop) #navi-main > li > ul:not(.thirds) > li:last-child
    {
        display: none;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1000px)
{
    #quick-about a.wrap strong br
    {
        display: none;
    }
}

@media only screen and (min-width: 600px)
{
    #home-petition p.icon:before
    {
        content: none;
        display: none;
    }

    picture.half
    {
        width: 50%;
    }

    picture.half.left
    {
        float: left;
        clear: both;
        margin: 0 15px 15px 0;
    }

    picture.half.right
    {
        float: right;
        clear: both;
        margin: 0 0 15px 15px;
    }

    picture.half.left + ul,
    picture.half.right + ul,
    picture.half.left + p,
    picture.half.right + p
    {
        overflow: hidden
    }

    #navi-main > li.mobile-only
    {
        display: none;
    }

    ul#navi-main > li > ul.thirds
    {
        left: 12.5%;
        right: 12.5%;
        width: 75%;
    }

    ul#navi-main > li > ul.thirds > li:first-child
    {
        display: none;
    }
}

@media only screen and (min-width: 800px)
{
    .data-entry div.row.remember-me input[type="checkbox"] + label
    {
        font-size: 13px;
    }
}

/* sobald kleiner als Ipad bestimmte Teile ausblenden / anders */
@media only screen and (max-width: 767px)
{
    .page
    {
        padding: 20px 15px;
    }

    /****/
    /*#navi-main > li.active > a,
    #navi-main > li.open > a,
    #navi-main.hover-mode > li:hover > a
    {
        /*color: #B1D46E;* /
        background: #8FBD50;
        border-right: 15px solid #8FBD50;
        border-left: 15px solid #8FBD50;
        margin: 0 -15px;
    }*/

    /****/
    div.sidebar ~ div.section
    {
        padding-left: 25%;
    }

    div.sidebar
    {
        width: 25%;
        padding-right: 25px;
    }

    div.sidebar + div.section
    {
        width: 75%;
        padding-left: 0;
    }

    #content div.page.split-content div.section
    {
        display: block;
        width: auto;
        padding: 0;
    }

    #content div.page.split-content div.section ~ div.section
    {
        margin-top: 20px;
    }

    div.page.split-content div.section.sticky
    {
        position: static;
    }

    /***/
    div.cards,
    #content div.cards > .card.card,
    div.cards > .seperator,
    div.split-content,
    #content #home-map > div,
    #home-donation > div.content,
    #home-donation > div.content > div
    {
        display: block;
        /*width: auto; <- macht probleme innerhalb der flex-box, d.h. Inhalt ist breiter als die Seite darum 100% */
        width: 100%;
        /*margin-left: 0;*/
    }

    #content #home-map > div
    {
        position: static;
        min-height: 0;
    }

    div.cards > .card.fourth
    {
        display: inline-block;
        width: 46.75%;
        /* Prozente sind nur näherungsweise */
        width: calc(50% - 25px);
    }

    .card[data-badge]:before,
    picture[data-badge]:before,
    div.slider[data-badge]:before
    {
        font-size: 11px;
    }

    div.page.detail .card div.content
    {
        border-top: 2px solid #9B9B9B;
        border-bottom: 2px solid #9B9B9B;
    }

    /***/
    #quick-about
    {
        padding: 0px 20px 5px 20px;
    }

    #quick-about > a.wrap
    {
        padding: 15px 0 10px 0;
        width: 100%;

        display: table-row;
    }

    #quick-about a.wrap > div,
    #quick-about a.wrap > p
    {
        display: table-cell;
        vertical-align: top;
        padding-top: 15px;
        padding-bottom: 10px;
        float: none;
    }

    #quick-about a.wrap > p
    {
        width: 90%;
    }

    #quick-about > a.wrap ~ a.wrap > div,
    #quick-about > a.wrap ~ a.wrap > p
    {
        border-top: 1px solid #33923C;
    }

    #social-bar strong,
    #quick-about > a.wrap strong
    {
        font-size: 20px;
        line-height: 24px;
    }

    /***/

    #home-donation > div.content > div
    {
        text-align: center;
    }
    #home-donation > div.content > div + div
    {
        margin-top: 10px;
        text-align: center;
    }

    /****/
    /****/

    progress
    {
        height: 10px;
    }

    /****/

    #home-petition
    {
        background: #fff;
        margin: -25px -15px 25px -15px;
    }

    #home-petition a.wrap,
    #home-petition form
    {
        width: auto;
        display: block;
        text-align: center;
    }

    #home-petition > a.wrap > picture
    {
        position: static;
        width: 100%;
        height: auto;
    }

    #home-petition form:before,
    #home-petition form .data-entry,
    #home-petition strong.link,
    #home-petition button
    {
        display: none;
    }

    #home-petition a.button
    {
        display: block;
        margin-top: 10px;
    }

    #home-petition form
    {
        padding: 15px 15px 20px 15px
    }

    /****/

    #content #formjumper
    {
        visibility: hidden;
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        text-align: center;
        background: #E9E9E1;
        padding: 12px;
        width: 100%;
    }

    #content #formjumper.show
    {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s linear, opacity 0.5s ease;
    }

    /****/


    input[type=range]::-webkit-slider-runnable-track
    {
        height: 15px;
    }

    input[type=range]::-moz-range-track
    {
        height: 15px;
    }

    input[type=range]::-ms-track,
    input[type=range]::-ms-fill-lower,
    input[type=range]::-ms-fill-upper
    {
        height: 15px;
    }


    input[type=range]::-webkit-slider-thumb
    {
        height: 40px;
        width: 40px;
        border-width: 12px;
        top: -12px;
    }

    input[type=range]::-moz-range-thumb
    {
        height: 16px;
        width: 16px;
        border-width: 12px;
    }

    input[type=range]::-ms-thumb
    {
        height: 16px;
        width: 16px;
        border-width: 12px;
    }

    /****/

    #footer div.page
    {
        display: block;
    }

    #footer div.page > div
    {
        display: inline-block;
        vertical-align: top;
        width: 100%;

        margin-bottom: 20px;
    }

    #footer div.page > div ~ div
    {
        width: 30%;
        padding: 0;
    }

    #footer div.page > div:last-child
    {
        width: 40%;
    }

}

@media only screen and (max-width: 699px)
{
    ul#navi-main > li.secondary,
    ul#navi-main ul li.desktop-only
    {
        display: none;
    }

    ul#navi-main ul li.secondary
    {
        display: list-item;
    }



}

/* Zu lange Texte ausblenden */
@media only screen and (min-width: 600px) and (max-width: 975px)
{
    #navi-main > li > a[data-abbr] > span
    {
        display: none;
    }

    #navi-main > li > a[data-abbr]:after
    {
        content: attr(data-abbr);
    }
}

@media only screen and (max-width: 599px)
{
    #navi-main > li > a[data-abbr]:lang(nl) > span,
    #navi-main > li > a[data-abbr]:lang(fr) > span
    {
        display: none;
    }

    #navi-main > li > a[data-abbr]:lang(nl):after,
    #navi-main > li > a[data-abbr]:lang(fr):after
    {
        content: attr(data-abbr);
    }
}

/* "Mobile Ansicht" */
@media only screen and (max-width: 599px)
{
    #header
    {
        position: relative;
        top: 0;
        /* Die Meta-Navi liegt über dem Header, soll aber nicht ÜBER der Navi liegen, daher ohne z-index
        und stattdessen die Hintergrundfarbe entfernen */
        background: none;
    }

    #quick-search
    {
        margin-left: auto;
    }

    #header #logo img
    {
        width: auto;
        height: auto;
    }




    /****/
    /* Hauptnavi unten am Boden festtackern */
    #header #navigation
    {
        background: #33923C;
        top: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;

        font-size: 12px;

    }

    #navigation,
    #navi-main > li > ul
    {
        border-top: 1px solid #272D2B;
        box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.50);
    }

    #navi-main
    {
        /*display: table;*/
        padding: 0;
    }

    #navi-main > li
    {
        position: static;
        /*display: table-cell;*/
        /*width: 20%;*/
    }

    #navi-main#navi-main > li
    {
        padding: 0;
        text-align: center;
        letter-spacing: 0.43px;
    }

    #navi-main > li > a
    {
        font-size: inherit;
        font-weight: normal;
        color: #fff;
        text-align: center;
    }

    ul#navi-main > li > ul > li > strong,
    ul#navi-main > li > ul > li > p,
    ul#navi-main > li > ul > li ~ li,
    ul#navi-main.hover-mode li.hide-sub-mobile > ul
    {
        display: none;
    }

    ul#navi-main > li > a > svg
    {
        margin: 0 auto;
        display: block;
        padding: 9px 0 3px 0;
    }

    ul#navi-main > li > ul
    {

    }

    ul#navi-main > li > ul > li,
    ul#navi-main > li > ul > li > ul
    {
        display: block;
        width: auto;
        padding:0;
    }

    #navi-main > li.active,
    #navi-main > li.secondary.active + li,
    #navi-main > li.open,
    #navi-main.hover-mode > li:hover
    {
        background: #8FBD50;
        color: #fcfcfc;
    }

    #navi-main > li.secondary.active + li > a,
    #navi-main > li.active > a,
    #navi-main > li.emphasize > a,
    #navi-main > li.open > a,
    #navi-main.hover-mode > li:hover > a
    {
        /*color: #B1D46E;*/
        background: #8FBD50;
        border-right: 15px solid #8FBD50;
        border-left: 15px solid #8FBD50;
        margin: 0 -15px;
    }

    #navi-main.hover-mode > li.emphasize > a
    {
        background: #E63554;
        border-color: #E63554;
    }

    #navi-main.hover-mode > li li:hover
    {
        color: #33923c;
    }

    #navi-main > li > ul
    {
        display: none;
        visibility: visible;
    }

    #navi-main.hover-mode > li:hover > ul,
    #navi-main > li.open > ul/*,
    #navi-main > li:first-child + li > ul*/
    {
        display: block;
    }

    #navi-main > li > ul
    {
        bottom: 100%;
        top: auto;
        left: 0;
        right: 0;
        padding: 0;
        z-index: -1;
        font-size: 18px;
        background: #E9E9E1;
        border-top: 4px solid #33923C;
    }

    #navi-main > li > ul > li
    {
        color: #33923C;
        font-weight: bold;
    }


    #navi-main > li > ul > li ~ li
    {
        border-top: 1px solid #8FBD50;
    }

    #navi-main > li > ul > li > ul > li a
    {
        padding: 15px 5px;
    }



    /* Aussparung für die Navi */
    #footer
    {
        padding-bottom: 60px;
    }

    #content #formjumper
    {
        bottom: 56px;
    }

    /* Mobile Navi Experiment */
    /* Ein Element das alles überdecken soll, und den Hover Status "klaut" wenn man drauf kommt */
    /* Erscheint sofort und überdeckt nicht die Navi selbst */
    #navi-main + div
    {
        position: fixed;
        left: 0;
        right: 0;
        background: black;
        opacity: 0;
        bottom: 60px;
        z-index: 0;
        height: 0;
        transition: height 0s linear 0.4s;
    }

    /* Dieser Teil liegt über die Navi und erscheint und verschwindet verzögert um die Click-Trigger-Test-Zeit von 300ms zu überbrücken */
    #navi-main + div:after
    {
        background: red;
        content: "";
        opacity: 0;
        position: absolute;
        top: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        transition: bottom 0s linear 0.4s;
    }

    /* Anzeigen wenn ein Menüpunkt und damit auch das ul ":hover" hat */
    #navi-main:hover + div
    {
        height: 100%;
        opacity: 0.2;
        transition: height 0s linear 0s;
    }

    #navi-main:hover + div:after
    {
        bottom: -60px;
    }

    /* Die Navipunkte liegen vor dem Fake Hover Target um aktiviert werden zu können */
    /* z index am <a> damit das ul nicht im Stacking Context vom <li> landet */
    #navi-main > li > a
    {
        z-index: 1;
        transition: z-index 0s linear 0.4s;
        position: relative;
    }

    /* Der aktive Punkt soll hinter dem Fake Hover Target Liegen damit man zuklappen kann*/
    #navi-main > li > a:hover
    {
        z-index: 0;
    }

    /* Die eigentliche Aufklappnavi ÜBER dem Fake Hover Target */
    #navigation #navi-main > li > a + ul
    {
        z-index: 1;
    }

    /***/
    #content
    {
        border-top: none;
    }

    #content > div.page.detail:first-child
    {
        border-top: 1px solid #E9E9E1
    }

    #content h1
    {
        font-size: 30px;
    }

    #content h2,
    #content h3
    {
        font-size: 24px;
    }

    #content h1,
    div.overview p.intro
    {
        text-align: center;
    }

    /***/

    #content > div.page
    {
        display: flex;
        flex-direction: column;
    }

    #content > div.page > div.sidebar:not(.navigation)
    {
        order:1;
    }

    #content > div.page > div.sidebar,
    #content > div.page > div.section
    {
        display: block;
        width: auto;
        padding: 0;
    }

    /* Vorerst keine Dritte Unternavi anzeigen, siehe folgende Styles */
    /*#content div.sidebar.navigation
    {
        display: none;
    }*/

    div.sidebar.navigation > strong,
    div.sidebar.navigation > ul > li.active > a,
    div.sidebar.navigation > ul > li:not(.active),
    div.sidebar ~ div.sidebar > div ~ div
    {
        display: none;
    }

    div.sidebar.navigation > ul,
    div.sidebar.navigation > ul li
    {
        border: none;
    }

    div.sidebar.navigation > ul > li.active.has-sub
    {
        margin-bottom: 25px;
    }

    div.sidebar.navigation > ul > li.active li,
    ul.quick-access li
    {
        display: inline-block;
        border: 1px solid #33923C;
        border-radius: 5px;
        color: #33923C;

        margin-right: 5px;
        margin-bottom: 5px;
    }

    div.sidebar.navigation > ul > li.active.has-sub > ul > li > a,
    ul.quick-access li > a
    {
        padding: 3px 15px;
    }


    div.sidebar.navigation > ul > li.active li:hover > a,
    div.sidebar.navigation > ul > li.active li.active > a,
    ul.quick-access li:hover > a,
    ul.quick-access li.active > a
    {
        background: #33923C;
        color: #FCFCFC;
    }

    #content div.sidebar > div strong.h-like
    {
        font-size: 36px;
        text-align: center;
        right: 0;
        left: 0;
    }

    div.sidebar > div .content
    {
        text-align: center;
    }

    div.sidebar > div .content p:first-child br
    {
        display: inline;
    }

    /* Content an nicht Pseudo Element funktioniert kurioserweise in Webkit, aber es ist eh nur ein enhancement und daher ok */
    div.sidebar > div .content br.mobile-inline
    {
        content: "";
    }

    /* funktioniert ebenfalls kurioserweise in Webkit */
    div.sidebar > div .content br.mobile-inline:before
    {
        content: ', ';
    }

    div.sidebar > div div.content > span.button, div.sidebar > div div.content > a.button
    {
        display: inline-block;
    }

    /****/

    #content div.spread-buttons.sticky
    {
        position: static;
        float: none;
        width: auto;
        text-align: center;
        margin-bottom: 10px;
    }

    #content div.spread-buttons.sticky a
    {
        display: inline-block;
        margin: 0 10px
    }

    #content div.spread-buttons.sticky + div.content
    {
        padding-left: 0;
    }

    #content.full div.detail.page div.section div.content
    {
        margin: 0;
    }

    /*****/

    label[data-help]:after,
    small[data-help]:after
    {
        font-size: 2em;
        vertical-align: -0.25em;
    }

    /******/

    #social-bar
    {
        padding: 15px 50px 10px 50px;
        text-align: center;
    }

    #social-bar ul
    {
        float: none;
        display: block;
        margin-top: 1em;
    }

    #social-bar ul:before
    {
        display: block;
    }

    #social-bar ul svg
    {
        height: 3em;
    }

    #quick-about a.wrap strong br
    {
        /* Hack damit der Text früher umbricht und es so auf Mobil gut aussieht */
        display: inline;
    }


    #home-donation picture.custom img
    {
        height: 250px;
        width: auto;
    }

    /******/

    /* Footer */

    #footer div.page
    {
        padding: 0;
    }

    #footer a span
    {
        display: inline;
    }

    #footer div.page.page > div
    {
        display: block;
        width: 100%;
        padding: 20px 15px 00px 15px;
    }

    #footer div.page > div ~ div
    {
        border-top: 1px solid #fcfcfc;
    }
}