a
{
    color: inherit;
    text-decoration: none;
}

a.wrap
{
    cursor: pointer;
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
legend,
.h-like
{
    margin-top: 0;
    line-height: 1.2;
}

h1
{
    font-size: 35px;
    margin-bottom: 10px;
}

h2, h3
{
    font-size: 31px;
    margin-bottom: 15px;
}

strong.h-like
{
    display: block;
    margin-bottom: 15px
}

p,
div.content picture
{
    margin: 0 0 13px 0;
}

p:empty
{
    display: none;
}

p:last-child
{
    margin-bottom: 0;
}

div.section p:not([class]),
div.section ul:not([class]),
div.section ol:not([class]),
div.section table
{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

div.section ul:not([class])
{
    /* Grüner SVG Kreis */
    list-style-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' height='10' width='5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='%2333923c'/%3E%3C/svg%3E");
}

div.section ul:not([class]) li,
div.section ol:not([class]) li
{
    margin-bottom: 5px;
}

div.section p.intro
{
    font-size: 17px;
    font-weight: bold;
    line-height: 26px;
    margin-bottom: 25px;
}

/* Desktop */
@media only screen and (min-width: 600px)
{
    #content.full div.page div.section p.intro
    {
        font-size: 22px;
        line-height: 1.5;
    }
}

textarea[placeholder]::placeholder,
textarea[placeholder] ~ p.placeholder,
input[placeholder]::placeholder
{
    font-family: ZwoWeb, Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #AAAAAA;
    opacity: 1;
    white-space: pre;
}

textarea[placeholder]:focus::placeholder,
input[placeholder]:focus::placeholder {
    color:transparent;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
div.progress,
div.like-input
{
    background: #FFFFFF;
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.34);
    border-radius: 6px;

    padding: 8px;
    /*border: 1px solid #BBB;*/
    border: none;
}

select
{
    /* iOS macht sonst blau */
    color: inherit;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"]
{
    padding-bottom: 16px\0; /* IE 11 */
}

select
{
    padding-top: 11px\0; /* IE 11 */
    padding-bottom: 11px\0; /* IE 11 */
}

@supports (-webkit-appearance: none)
{
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"]
    {
        -webkit-appearance: none;
    }
    select
    {
        height: 39px;
        height: calc(1.55em + 16px); /* entspricht 1em * 1.55 line-height + 8px padding*/
    }
}


input[type=radio]:checked,
input[type=radio]:not(:checked),
input[type=checkbox]:checked,
input[type=checkbox]:not(:checked)
{
    border: 0;
    clip: rect(0 0 0 0);
    position: absolute;
}

input[type=checkbox]:disabled + label
{
    opacity: 0.5;
}

input[type=radio]:checked + label:before,
input[type=radio]:not(:checked) + label:before
{
    content: '';
    display: inline-block;
    border-radius: 50%;
    border: 0.15em solid #272d2b;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    text-align: center;
    line-height: 1em;
    padding: 0.15em;
    /* Firefox spackt rum wenn die Angabe in em ist */
    padding: 2px;
    background-clip: content-box;
}

input[type=radio]:checked + label:before
{
    background-color: #272d2b;

    background-clip: initial;
    border: 0.3em solid #33923C;
    background-color: #fff;
}

input[type=checkbox]:checked + label:before,
input[type=checkbox]:not(:checked) + label:before
{
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    border: 0.1em solid #272d2b;
    border-radius: 0.15em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    margin-left: -1.5em;
}

input[type=checkbox]:checked + label:before
{
    /* Fallback */
    background: #272d2b;
    /*background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22448%22%20height%3D%22448%22%20viewBox%3D%220,0,448,448%22%20fill%3D%22%23272d2b%22%3E%3Cpath%20d%3D%22M417.75,141.5q0,10-7,17l-215,215q-7,7-17,7t-17-7l-124.5-124.5q-7-7-7-17t7-17l34-34q7-7,17-7t17,7l73.5,73.75,164-164.25q7-7,17-7t17,7l34,34q7,7,7,17z%22%2F%3E%3C%2Fsvg%3E);*/
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='448' fill='%23272d2b'%3E%3Cpath d='M417.75 141.5q0 10-7 17l-215 215q-7 7-17 7t-17-7L37.25 249q-7-7-7-17t7-17l34-34q7-7 17-7t17 7l73.5 73.75 164-164.25q7-7 17-7t17 7l34 34q7 7 7 17z'/%3E%3C/svg%3E");
    background-size: cover;
}

input[type=checkbox]:checked + label,
input[type=checkbox]:not(:checked) + label
{
    padding-left: 1.5em;
    display: inline-block;
}

fieldset
{
    border: none;
    padding: 0;
    margin: 0;
}

/*******/

div.section a:not([class]),
div.section a.default,
div.section a.footnote,
/*div.section a[class=""],*/
#content div.page a.back,
#content a.wrap .link
{
    color: #33923c;
    overflow-wrap: break-word;
}

#content
{
    counter-reset: footnotes;
}

#content a.footnote
{
    text-decoration: underline;
    text-decoration-style: dotted;
}

html:not(.js) #content a.footnote[href^='#fn-']:after
{
    counter-increment: footnotes;
    content: counter(footnotes);
    vertical-align: super;
    font-size: 0.75em;
    text-decoration: none;
}

#content a[href^='#fnb-']
{
    display: block;
    margin-bottom: 1em;
}

html.js #content a[href^='#fnb-']
{
    display: none;
}

#footnotes + div > div:target
{
    background: #F0F1ED;
    padding: 10px;
}

#content div.page a.back
{
    position: relative;
    bottom: 10px;
}

@media screen
{
    /* Allgemein */
    a.card h2:after,
    a.card h3:after,
    a.seperator.leave:after,
    #content a.wrap .link:after,
    ul.activities li a div.button span:after
    {
        padding: 0 0.3em;
        margin-left: 0.32em;
        /* inline damit es nicht alleinig auf eine neue Zeile umbricht */
        display: inline;

        vertical-align: 1px;
    }

    /* IE und Edge */
    _:-ms-lang(x),
    a.card h2:after,
    a.card h3:after,
    a.seperator.leave:after,
    #content a.wrap .link:after,
    ul.activities li a div.button span:after
    {
        content: "";
        background-image: url(../../frontend/img/icons.svg#css-r-arrow-33923c);
    }

    _:-ms-lang(x),
    ul.activities li a div.button span:after
    {
        content: "";
        background-image: url(../../frontend/img/icons.svg#css-r-arrow-fcfcfc);
    }

    /* IE und Edge außen vor lassen, Edge kann kein inline mask siehe eine Regel vorher*/
    @supports (-webkit-mask: url(data:image/svg+xml)) and (not (-ms-ime-align:auto))
    {

        a.card h2:after,
        a.card h3:after,
        a.seperator.leave:after,
        #content a.wrap .link:after,
        ul.activities li a div.button span:after,
        #footer ul.navigation li a:before
        {
            padding: 0;

            content: "→";
            font-size: 0.735em;

            /* Safari hat einen Bug wodurch das SVG nur in der Mitte maskiert, aber nicht oben und unten, darum noch der Gradient */
            /* alle Browser nehmen -webkit, und hier steht nur -webkit um das svg nicht nochnmal zu wiederholen */
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M26.286 17.143q0 .964-.661 1.625L14 30.393q-.696.661-1.625.661-.911 0-1.607-.661l-1.339-1.339q-.679-.679-.679-1.625t.679-1.625l5.232-5.232H2.09q-.929 0-1.509-.67t-.58-1.616V16q0-.946.58-1.616t1.509-.67h12.571l-5.232-5.25q-.679-.643-.679-1.607t.679-1.607l1.339-1.339q.679-.679 1.607-.679.946 0 1.625.679l11.625 11.625q.661.625.661 1.607z'/%3E%3C/svg%3E") center no-repeat, -webkit-linear-gradient(transparent, transparent);
            /*-webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;*/
            background: currentColor;
        }

        a.card.download h2:after
        {
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.99999965 30.28549965q-.964 0-1.625-.661l-11.625-11.625q-.661-.696-.661-1.625 0-.911.661-1.607l1.339-1.339q.679-.679 1.625-.679t1.625.679l5.232 5.232v-12.571q0-.929.67-1.509t1.616-.58h2.286q.946 0 1.616.58t.67 1.509v12.571l5.25-5.232q.643-.679 1.607-.679t1.607.679l1.339 1.339q.679.679.679 1.607 0 .946-.679 1.625l-11.625 11.625q-.625.661-1.607.661z'/%3E%3C/svg%3E") center no-repeat, -webkit-linear-gradient(transparent, transparent);
            border-left-width: 0.8em;
        }

        a.card h2:after,
        a.card h3:after,
        a.seperator.leave:after,
        #content a.wrap .link:after,
        ul.activities li a div.button span:after
        {
            vertical-align: 0.175em;
        }

        a.card h2:after,
        a.card h3:after
        {
            color: #33923c;
        }

    }
}

div.section a:not([class]):after
{
    color: inherit;
}

#content div.page a.back
{
    display: flex;
    align-items: baseline;
}

#content div.page a.back:before
{
    transform: rotate(135deg);
}

/* IE und Edge */
_:-ms-lang(x),
#content div.page a.back:before
{
    transform: rotate(135deg) translate(0, 4px);
}

/********/

picture > img
{
    vertical-align: top;
}

rdr-picture
{
    display: none;
}

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

"Intrinsic Placeholder" d.h. den Platz den ein Bild haben wird schonmal beanspruchen, damit die Seite später nicht springt.
Früher ging diese mit width und height am img-Element, durch Responsive (im css "height: auto") aber nicht mehr.
Und schon gar nicht wenn man in einem Picture Element verschiedene Formate umschaltet.
Diese Lösung basiert darauf, dass man die Ratio des Bildes kennt, diese sind definiert bei den Bildgrößen in der config.yml
Das picture Element hat die Breite des Elternelements, padding-top in % bezieht sich auf diese Breite -> Kombiniert mit
der Ratio wird also genau der Platz für das Bild erzeugt. Das nicht geladene Bild hat Breite 0, und damit auch margin-top 0
Ist das Bild geladen, hat es wieder die Breite des Picture Elements und margin-top und padding-top gleichen sich genau aus,
mit dem Bonus, dass ein Bild auch höher sein kann als die angegebene Ratio.
WIP: Die zusätzlichen CALC Angaben sind um Rundungsfehlern entgegenzuwirken, führt dann natürlich aber oft zum 1px Springen :(
*/

picture[class]
{
    overflow: hidden;
    display: block;
    margin: 0;
    background: #B1D46E;
    background: #9B9B9B;
    background: #cecebf;
    position: relative;
}

picture > span.caption
{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;

    padding: 5px 10px ;
    background: #E9E9E1;
    display: block;
    font-size: 13px;

    position: relative;
}

#content.full.overview picture > span.caption,
#content.full picture.caption-absolute > span.caption,
div.page.overview > div.section > .wrap.card.full > picture > span.caption
{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.75;
}

picture.custom > img,
picture.base > img,
picture.portrait > img,
picture.wide > img,
picture.wide > svg,
picture.scope > img,
picture.wide-599 > img,
picture.wide-767 > img,
picture.wide-1030 > img
{
    position: absolute;
    top:0;
    left: 0;

    width: 100%;
    height: auto;
}


/* "base" 1.51587301587 bzw. 0.65968586387 */
picture.base
{
    padding-top: 65.968586387%;
}

/*picture.base > img
{
    margin-top: -65.968586387%;
}*/

/* "portrait" ratio 1.19 bzw. 0.84033613445%; */
picture.portrait
{
    padding-top: 84.033613445%;
    padding-top: calc((100% * 0.84033613445) - 1px);/*
}

picture.portrait > img
{
    margin-top: -84.033613445%;
    margin-top: calc((-100% * 0.84033613445) + 1px);*/
}

/* "wide" bzw. ehemals "teaser_small" ratio 1.79032258 bzw. 0.55855855855 */
picture.wide
{
    padding-top: 55.855855855%;
    padding-top: calc((100% * 0.55855855855) - 1px);/*
}

picture.wide > img
{
    margin-top: -55.855855855%;
    margin-top: calc((-100% * 0.55855855855) + 1px);*/
}

/* "scope" bzw. ehemals "teaser" ratio 2.27380952381 bzw. 0.43979057591 */
picture.scope
{
    padding-top: 43.979057591%;
    padding-top: calc((100% * 0.43979057591) - 1px);/*
}

picture.scope > img
{
    margin-top: -43.979057591%;
    margin-top: calc((-100% * 0.43979057591) + 1px);*/
}
@media only screen and (min-width: 768px)
{
    div.portrait-helper
    {
        max-width: 445px;
        width: 100%;
        clear: both;
    }

    div.portrait-helper.left
    {
        padding-right: 25px;
        float: left;
    }

    div.portrait-helper.right
    {
        float: right;
        padding-left: 25px;
    }

    div.portrait-helper > picture.portrait
    {
        margin: 0;
    }
}

@media only screen and (max-width: 767px)
{
    picture.wide-767
    {
        padding-top: 55.855855855%;
        padding-top: calc((100% * 0.55855855855) - 1px);
    }

    picture.portrait-767
    {
        padding-top: 84.033613445%;
        padding-top: calc((100% * 0.84033613445) - 1px);
    }
/*
    picture.wide-767 > img
    {
        margin-top: -55.855855855%;
        margin-top: calc((-100% * 0.55855855855) + 1px);
    }*/
}

@media only screen and (max-width: 599px)
{
    picture.wide-599
    {
        padding-top: 55.855855855%;
        padding-top: calc((100% * 0.55855855855) - 1px);/*
    }

    picture.wide-599 > img
    {
        margin-top: -55.855855855%;
        margin-top: calc((-100% * 0.55855855855) + 1px);*/
    }
}

@media only screen and (max-width: 1030px)
{
    picture.wide-1030
    {
        padding-top: 55.855855855%;
        padding-top: calc((100% * 0.55855855855) - 1px);
    }
}

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

.device-mobile-only
{
    display: none !important;
}

/* Verzerrt, aber besser so als über den Rand hinaus  */
p > iframe,
p > img,
p > a > img
{
    max-width: 100%;
}


/******/

ol:not([class])
{
    counter-reset: ol;
    list-style: none;
}

ol:not([class]) > li
{
    counter-increment: ol;
    position: relative;
}

ol:not([class]) > li:before
{
    font-family: ZwoWeb, Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    width: 1.5em;
    height: 1.5em;
    line-height: 1.6em;
    left: -2em;
    font-size: 20px;
    color: #fff;
    text-align: center;
    content: counter(ol);
    position: absolute;

    background: #33923C;
    border-radius: 50%;
}

/******/

svg:not([fill])
{
    fill: currentColor;
}

svg.icon
{
    box-sizing: content-box;
    vertical-align: -3px;
    fill: currentColor;
    height: 1em;
    width: auto;
    width: 1em\0; /* IE 11 */
}

/******/