/* todo: Scroller ausblenden? */

::-webkit-scrollbar { display: none; }

.page section { min-height: 100%;  background-color: #f9f9f9; text-align: center; }
.page section > .left { min-height: 100vh; height: 100%; float: left; width: 50%; }
.page section > .left > .themepic { min-height: inherit; height: 100%; float: left; width: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; }
.page section > article { min-height: 100%; height: 100%; float: left; width: 50%; padding: 8em 8em 3em 8em; margin: 0em auto 0em auto; text-align: left; }
.page section > .back-mobile { display: none; text-align: left; height: auto; padding: 2em 0em 1em 5.5em; background-image: url(/images/ico_pfeil_zurueck.png); background-position: left 1em center; background-repeat: no-repeat; background-size: 3.5em; }
.page section > .back-mobile span { font-size: 2em; text-transform: uppercase; font-weight: bold; position: relative; top: -0.2em; }
.isnews section > article { padding-top: 3em; }

.head > .back { display: block; height: 2em; padding: 0em 0em 0em 4em; margin-bottom: 3em; background-image: url(/images/ico_pfeil_zurueck.png); background-position: left center; background-repeat: no-repeat; background-size: contain; }
.head > .back span { font-size: 2em; text-transform: uppercase; font-weight: bold; position: relative; top: -0.1em; }
.head > h1 { font-size: 6em; font-weight: normal; margin: 0em 0em 0em 0em; line-height: 1.1em; }
.head > h2 { font-size: 2.5em; font-weight: normal; color: #9C9C9C; text-transform: uppercase; margin: 0em 0em 0.5em 0em; }
.head > .state { font-size: 1.6em; color: #9C9C9C; margin-top: 0.3em; }
.head .social { cursor: pointer; }
.head .social img { margin-top: 1em; }

.page section > article .article:first-of-type { margin-top: 7em; }
.page section > article .article { margin-top: 3em; }
.page section > article .article h2 { font-size: 2.2em; }
.page section > article .article h3 { font-size: 1.7em; }
.page section > article .article p { font-size: 1.7em; line-height: 1.8em; }

.article > div[data-images] img.preview { width: 49%; margin-right: 1%; float: left; margin-bottom: 1em; }
.article > div[data-images="1"] img.preview { width: 100%; clear: both; }
.article > div[data-images="3"] img.preview { width: 32%; margin-right: 1%; float: left; }
.article > div[data-images="3"] a:nth-last-child(2) img.preview { width: 99%; margin-right: 0%; float: left; }
.article > div[data-images="5"] a:nth-last-child(2) img.preview { width: 99%; margin-right: 0%; float: left; }
.article > div[data-images="7"] a:nth-last-child(2) img.preview { width: 99%; margin-right: 0%; float: left; }

.template-imageshorizontal > div[data-images] img.preview { width: 32%; margin-right: 1%; float: left; }
.article > div[data-images="3"] img.preview { width: 32%; margin-right: 1%; float: left; }
.article > div[data-images="3"] a:nth-last-child(2) img.preview { width: 32%; margin-right: 1%; float: left; }
.article > div[data-images="5"] a:nth-last-child(2) img.preview { width: 32%; margin-right: 1%; float: left; }
.article > div[data-images="7"] a:nth-last-child(2) img.preview { width: 32%; margin-right: 1%; float: left; }

.article > div.template-imagebottomcenter[data-images="1"] > a { display: block; width: 100%; text-align: center; }
.article > div.template-imagebottomcenter[data-images="1"] img.preview { max-width: 50%; float: none; margin: 1em auto 0em auto; }

.article > div.template-imagebottomleft[data-images="1"] img.preview { max-width: 50%; margin: 1em auto 0em auto; }

.page section .template-togglebox { border-bottom: solid 1px #9C9C9C; border-bottom: solid 1px #E6E6E6; padding: 0em 1em 0em 1em; }
.page section .template-togglebox > .title { font-family: gara; font-weight: normal; font-size: 2.8em; padding: 0em 20% 0em 0em; cursor: pointer; background-image: url(/images/ico_pfeil_dropdown.png); background-position: center right; background-repeat: no-repeat; }
.page section .template-togglebox > .totoggle { display: none; }
.page section .article:last-of-type > .template-togglebox { border-bottom-width: 0em; }

.page section .template-video { width: 50%; padding-right: 2%; float: left; margin-bottom: 1em; padding-bottom: 2em; }
.page section .template-video > a { position: relative; top: 0em; left: 0em; text-align: center; display: inline-block; width: 100%; }
.page section .template-video > a > span { width: 100%; height: 100%; display: block; position: absolute; top: 0em; left: 0em; background-image: url(/images/video-play.png); background-repeat: no-repeat; background-position: center center; background-size: 30%; }
.page section .article > .template-video > h3 { font-size: 3.5em; font-family: gara; font-weight: normal; margin-top: 0em; }
.page section .article > .template-video > h3 + p { padding-top: 0em; }
.page section .article:nth-child(2n+1) .template-video { clear: both; }
.lightboxvideo { position: relative; top: 0em; left: 0em; display: inline-block; text-align: center; width: 100%; }
.playicon { display: block; position: absolute; top: 0em; left: 0em; background-image: url(/images/video-play@2x.png); width: 100%; height: 100%; background-size: 30%; background-position: center; background-repeat: no-repeat; }

.article > div.template-ratgeber img.preview { width: 15em; float: left; clear: none; margin-right: 2.5em; }
.article > .template-ratgeber > .docs { display: none; }
.article > .template-ratgeber > .file { display: none; }
.article > .template-ratgeber h2 { margin: 0.5em 0em 0.2em 0em; }
.article > .template-ratgeber + .docs { display: none; }
.article .subtitle { display: none; }

.article:after { content: ' '; clear: both; }

.docs h4 { font-size: 1.6em; text-transform: uppercase; color: #A8A8A8; padding-left: 0.3em; margin: 0.5em 0em 0.4em 0em; font-weight: normal; }

.page.hasnoimage section > article { float: none; padding-top: 3em; width: 100%; max-width: 110em; }
.page.hasnoimage section > .left { display: none; }
.page.hasnoimage section > .left > .themepic { display: none; }

.social > img           { display: inline; z-index: 2; width: 2.6em; }
.socialicons            { opacity: 0; display: inline-block; padding-left: 1em; position: relative; left: 0.5em; top: 4em; z-index: 1; background-color: transparent; }
.socialicons img        { width: 3em; margin-right: 0.5em; display: inline; opacity: 0.8; }
.socialicons img:hover  { opacity: 1; }
.socialicons.fadeIn     { transition: 0.5s; opacity: 1; top: 0em; }
.socialicons a:nth-child(4) { display: none; }

.mfp-close { color: #5aa6cc; font-size: 5em; top: -1rem; }
.mfp-title { font-size: 1.6rem; line-height: 2.6rem; padding-top: 1rem; }

.page.quer section > .left > .themepic { min-height: 50%; height: 50%; background-size: cover; }
.page.quer section > .left > .head { clear: both; text-align: left; padding: 6em 6em 2em 6em; }
.page.quer section > article { padding-top: 6em; }
.page.quer section > article .article:first-of-type { margin-top: 0em; }


.article[data-aid="437"] > div[data-images] img.preview { width: 97%;  max-height: 26rem; }
.article[data-aid="437"] .lightboxvideo { width:48%; }

video { width:100%; height:100%; }
.video { width:100%; height:100%; }


@media screen and (max-width:1280px) { section > article       { padding: 6em 8em 3em 8em; }
    section > article h1    { font-size: 5em; }
}

@media screen and (max-width:1024px) {
    .page.hoch section > .left { width: 40%; }
    .page.hoch section > article { width: 60%; padding: 4em 4em 3em 4em; }

    .page.quer section > article { padding: 4em 4em 3em 4em; }

    .page.hasnoimage section > article { width: 100%; }

    .head > h1 { font-size: 4em; }
}

@media screen and (max-width:768px) /*, screen and (orientation:portrait)*/
{

    .head > .back { display: none; }
    .page section > .back-mobile { display: block; }

    .page.hoch section { height: auto; }
    .page.hoch section > .left { width: 100%; height: auto; clear: both; display: block; }
    .page.hoch.hasnoimage section > .left { display:none; }
    .page.hoch section > .left > .themepic { width: 100%; height: 60vh; }
    .page.hoch section > article { width: 100%; height: auto; clear: both; padding: 2em 3em; min-height: 0em; }
    .page.hasnoimage section > article { padding-top: 4em; }

    .page.quer section > .left { min-height: 0em; width: 100%; }
    .page.quer section > .left > .head { padding: 2em; clear: both; }
    .page.quer section > .left > .themepic { width: 100%; height: 50%; min-height: 0em; }
    .page.quer section > article { width: 100%; padding: 2em 3em; }
    .head > h2 { font-size: 2em; }
    .head > h1 { font-size: 5em; }

    .page section > article .article p { font-size: 1.8em; line-height: 1.7em; }
}

@media screen and (max-height:768px) and (orientation:portrait) {

    section > .left { min-height: 25em; width: 100%; }

    .page.quer section > .left > .themepic { min-height: 25em; }
}

@media screen and (max-height:768px) and (orientation:landscape) {
}

@media screen and (max-width:680px) {

    .head > h1 { font-size: 4em; }

    .page.hoch section > article { padding: 2em; }
    .page.quer section > article { padding: 2em; }

    .socialicons a:nth-child(4) { display: inline; }
}

@media screen and (max-width:620px) {
    .article p > iframe { max-height: 20em; }

    .article > div[data-images] img.preview { margin-bottom: 0.5em; }

    .page section .template-video { width: 100%; float: none; clear: both; }
}

@media screen and (max-width:500px) {
    .article > div.template-ratgeber img.preview { width: 100%; clear: both; margin-bottom: 3em; }
    .article > .template-ratgeber + .docs { display: block; }
}

@media screen and (max-width:425px) {
    .head > h1 { font-size: 3em; }

    .article p > iframe { max-height: 15em; }

    .article > div.template-imagebottomcenter[data-images="1"] img.preview { max-width: 100%; float: none; margin-left: auto; margin-right: auto; }
}