/* --- VIEWPORTS --- */

@media only screen and (min-width: 200px) and (max-width: 1200px) {

/* --- GLOBALS --- */

html,body{font-size:14px}
figcaption{font-size:10px}
hgroup h1,hgroup h1 a,hgroup h2,hgroup h2 a{font-size:25px}
hgroup h3,hgroup h3 a{font-size:20px}
.result-title,.result-title a{font-size:16px}
footer *{font-size:14px}
footer aside.adds section h2{font-size:30px}
footer aside.adds section h3{font-size:25px}
p{margin:0 0 20px}

/* --- OUTER BOXES --- */

#page{margin:0;padding:0;width:100%}
#page *{display:block}
#page * span{display:inline}
#page #layoutPanel,#page #toTopBox,#page .rootLine,#page header.small .rootLine,#page legend,#page .button.acc + *{display:none}

/* header */
header > *:nth-child(1){order:1} /* logo */
header > *:nth-child(2){order:2} /* nav */
header > *:nth-child(3){order:3} /* image */
header.small > *{height:auto}
header > figure,header nav{position:static;height:auto}
#page header > figure{padding:30px 0 0;width:100%}
#page header > figure a{display:block;width:100%;text-align:center}
#page header.small > figure a{width:100%}
#page header > figure img{display:inline-block;width:50%!important;padding:10px}
#page header nav{position:relative;padding:0;width:100%}
aside > section{margin-bottom:0}

/* body */
#page main{padding-bottom:0;display:webkit-flex;display:ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
main > *{margin-right:0;padding-right:0;border-right-width:0}
main > *:nth-child(1){order:2} /* left */
main > *:nth-child(2){order:1} /* center */
main > *:nth-child(3){order:3} /* right */
#page main article,#page main > aside{margin:0 0 40px;padding:0;width:100%!important;border-width:0}

/* aside */
#page aside#below > section{margin-bottom:20px;width:100%!important;border-bottom-width:1px}
#page aside#below > section:last-child{border-bottom-width:0}
#page aside#below > section.subBox{margin-right:0;padding-right:0;border-right-width:0}

/* footer */
#page footer aside > *,#page footer .credits,#page footer nav{padding:0;width:100%;border-width:0}
#page footer aside > *{margin:0!important}
#page footer .credits{padding:40px 3% 0!important}
#page footer .credits p{text-align:center}
#page footer .credits p a{display:inline}
#page footer nav{padding:20px 3% 5vw!important}


/* --- COLUMNS CONFIG --- */

header > figure,main,aside#below,aside.adds,aside.credits,.breadcrumb{padding-left:3%}
header nav,main,aside#below,aside.adds,footer nav,.breadcrumb{padding-right:3%}


/* --- MENUES --- */

#page .menu{display:webkit-flex;display:ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
#page .menu > section{position:static}
#page .menu .ceItem{display:inline-block}

/* header */
li.home span,.subhandler,li.handler span,.menu .button.acc,.searchAcc{font-size:40px}
#page ul.level-0{height:auto;text-align:center}
#page ul.level-0 li.home{display:inline-block}
#page ul.level-0 li.home span::after{content:'\f015'}
#page ul.level-0 li.handler{display:none}
#page ul.level-0 li.handler span::after{content:'\f047'}
#page ul.level-0 li.submenu{display:inline-block;position:static}
#page ul.level-0 .subhandler{display:inline-block;position:static;cursor:pointer}
#page ul.level-0 li.home:hover *,#page .subhandler:hover,#page .subhandler.cur{color:#000!important}
#page ul.level-0 .subhandler::after{content:'\f0c9'}
#page ul.level-0 li a,.menu ul.level-0 li > span{display:block!important;padding:20px;width:100%}
#page ul.level-1{display:none;position:absolute;top:100%;right:auto;left:0;margin:0;padding:10px 0 20px;width:100%}
#page ul.level-1 li.divider{display:none}
#page ul.level-2{display:none;position:relative;padding:0}
#page ul.level-2 li > *{text-align:center}
#page ul.level-3{display:none}
#page .menu .button.acc{display:inline-block;padding:20px}
#page .menu .button.acc::before{display:none}
#page .menu .button.acc::after{margin-left:.5vw}
#page .menu section:nth-child(2) .button.acc::after{content:'\f023'}
#page .menu section:nth-child(2) .button.acc:hover::after,.menu section:nth-child(2) .button.acc.act::after{content:'\f13e'}
#page .menu .button.acc + *{display:none;right:auto;left:0;margin-top:0;padding:20px;width:100%}

/* footer */
.menu.page ul li{margin-left:0;text-align:center}
.menu.page ul li a{padding:10px 0}

/* rootlines */
#page .breadcrumb{text-align:center}
#page .breadcrumb *{display:inline;font-size:30px;font-weight:600}
#page .breadcrumb::before{content:' '}

/* cmenu */
#page ul.cmenu li{margin-bottom:20px}
#page ul.cmenu li.divider{display:none}
#page ul.cmenu li.divider:last-child{display:none}
#page ul.cmenu li.divider span,#page header ul.cmenu li a{display:block;padding:10px 0}
#page ul.cmenu li a{display:block;width:100%}
#page ul.cmenu li > input{display:none}
#page ul.cmenu ul{margin:0}
#page ul.cmenu ul li{margin:0}
#page .cmenu .menuTxt{display:block;padding-top:10px}


/* --- CE ITEMS --- */

#page figcaption{display:none}
.ceItem .above .galWrap{padding-bottom:20px}
.ceItem .below .galWrap{padding-top:20px}
.frame-102,.frame-103{padding:30px!important}
.frame-104,.frame-105,.frame-106{padding:0;border-width:0}
.frame-107{padding-top:20px;padding-bottom:20px}
.frame-ruler-before,.ruler-before,.rulerBefore{margin-top:20px;padding-top:20px}
.frame-ruler-after,.ruler-after,.rulerAfter{margin-bottom:20px;padding-bottom:20px}
#page .ceItem table{display:table;margin-top:20px}
#page .ceItem tbody{display:table}
#page .ceItem tr{display:table-row}
#page .ceItem td,.ceItem th{display:table-cell;padding:10px}
.ceItem.uploads ul li span.txtWrap{padding:3vw 5vw 5vw}
header > section .textPic .txtWrap{position:static;padding:3%;width:100%;height:auto!important;background-color:transparent}
#page .ceItem .imgRow{display:flex!important}


/* --- GALLERIES --- */

.galItem figure img{padding:3vw 3% 10vw}
.mainGal{position:relative}
.mainGalHeader{top:3vw}
.galItem.act .mainGalHeader{position:static;background-color:transparent}
.mainGalHeader h2{padding:1vw 1.5vw!important;font-size:14px;border-bottom:1px solid rgba(255,255,255,.6)}
.mainGalHeader p{padding:1vw 1vw!important}
#page .mainGalBody .picArea,.subGalItem .subGalImg{display:none}
#page .galItem span.expd{display:block;right:auto;bottom:2.5vw;left:0;margin:0;padding:0 3%;width:100%;text-align:right}
#page .galItem span.expd::after{top:1vw;right:3%;font-size:20px}
#page .galItem span.expd button{display:inline-block;padding:.5vw 0;width:100%;font-size:14px;text-align:left;background-color:transparent}
#page .galItem.act .mainGal span.expd::after{content:'\f057';display:inline-block;position:static;margin-top:1vw;font-size:3vw}
#page .galItem.act .mainGal span.expd button,.subGalItem .subGalImg figure a .expd{display:none}
#page .galItem.act .subGal span.expd button{display:block;padding:.3vw 2.5vw .3vw .5vw}


/* --- NEWS --- */

#page .news > h2{display:none}
.newsLatest .newsHeader{margin-bottom:20px}
.newsLatest .newsHeader *{font-size:20px}
.newsLatest .newsText{width:100%}
.newsLatest .newsTeaser p{margin:0 0 20px}
#page .newsLatest .newsMedia,#page .newsLatest .newsAuthor,#page .newsLatest .newsMore{display:none!important}
#page main aside .newsLatest .newsHeader,#page main aside .newsLatest .newsTeaser p{margin:0 0 20px}
#page .newsSingle .newsSocial{display:none}

/* misc */
#page .newsLatest .newsBody{margin-top:20px}
#page .newsLatest .expNews .fullText{display:none}
#page .news .link *{display:inline-block;margin:0 25%;padding:2vw 1.5vw;width:50%;color:rgba(255,255,255,.8);background-color:rgba(0,0,0,.5)}
#page .newsLatest .expNews .newsPic{display:none}
.newsLatest .expNews .fullText{margin-bottom:20px}
.newsLatest .expNews .link{margin-top:20px}
#page .news .link.close{display:none}


/* --- FORMS --- */

input[type="text"],input[type="tel"],input[type="email"],input[type="password"],input[type="date"],textarea,select,
.fieldwrap.powermail_fieldwrap_betreff input{padding:2vw 1vw;width:100%!important}
.fieldwrap{width:100%}
textarea{height:150px}
#page .tx-powermail h3{display:none}

/* system */
#page main .formGroup{width:100%}
#page .formItems > h2{display:none}
#page .formGroup textarea{height:100px}
#page .formGroup input,#page .formGroup textarea,#page .formGroup select{width:100%!important}
#page .formActions{margin-top:20px}


/* --- SEARCH --- */

#page .tx-kesearch-pi1{padding-left:0}
#page .tx-kesearch-pi1 .searchAcc{display:inline-block;position:static;padding:15px 20px 20px}
#page .tx-kesearch-pi1 .searchAcc::after{content:'\f002';font-size:35px;cursor:pointer}
#page .tx-kesearch-pi1 .searchContent{display:none;position:absolute;top:100%;right:auto;left:0;margin-top:0;padding:20px;width:100%;background-color:rgba(0,0,0,.8)}
#page .tx-kesearch-pi1 .searchInput input{padding:10px!important}
#page .tx-kesearch-pi1 .searchSubmit{width:80px;font-size:30px;display:webkit-flex;display:ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
#page .tx-kesearch-pi1 .button.reset{display:none}

#page main .tx-kesearch-pi1{position:static;padding:0;width:100%;text-align:center}
#page main .tx-kesearch-pi1 .searchAcc{display:none}
#page main .tx-kesearch-pi1 .searchContent{display:block;position:relative;top:0;padding:0;background-color:#8f8f8f}
#page main .tx-kesearch-pi1 .searchInput input{padding:10px!important;color:#fff;background-color:#5f5f5f}
#page main .tx-kesearch-pi1 .searchSubmit{right:3vw}
#page main .tx-kesearch-pi1 .button.reset{display:block;width:5vw}
#page main .tx-kesearch-pi1 .button.reset a{padding-top:15px}
#page main .tx-kesearch-pi1 .button.reset a::before{font-size:3vw}
#page main .tx-kesearch-pi1 .button.reset a::after{display:none}
#page main #kesearch_results ul li a{display:inline}
#page main #kesearch_results .result-title{margin-bottom:10px}
#page main #kesearch_results .teaser-icon{display:none}


/* --- LOGIN --- */

.tx-felogin-pi1 h3,.tx-felogin-pi1 h3 + div{margin-bottom:20px}
.tx-felogin-pi1 h3{font-size:30px}
header .tx-felogin-pi1 h3{margin-bottom:0}
#page .tx-felogin-pi1 legend{display:none}
.tx-felogin-pi1 form{margin-top:20px}
header .tx-felogin-pi1 form{margin-top:0}
.tx-felogin-pi1 fieldset > div{margin-bottom:20px}
header nav .tx-felogin-pi1 fieldset > div{margin-bottom:20px;width:100%}
header nav .tx-felogin-pi1 fieldset > div:nth-child(4){margin:0;width:100%;text-align:center}
main .tx-felogin-pi1 fieldset div.loginSubmit{margin-bottom:20px}
#page .tx-felogin-pi1 label{display:none}
.tx-felogin-pi1 input{padding:2vw 1vw;background-color:rgba(255,255,255,.6)}
#page .tx-felogin-pi1 .submit input{display:inline-block!important;width:50%!important}


/* --- DATESBOX --- */

#page .dateArchive .dateItem{padding:20px;width:100%}
#page .dateItem .dateBody{display:flex}
#page .dateItem h3{font-size:20px}
.datebox .button.acc{padding:20px}
.datebox .button.acc.act::after{display:none}
.datebox .button.acc.act::before{content:'Artikel schließen';font-size:16px}
.dateReview{position:static;padding:0;height:auto}
.dateReview .revBody{padding:0;height:auto}


/* --- BUTTONS --- */

#page .button{display:inline-block}
#page .button > *{padding:2vw 1.5vw}
#page .teaser .fullText,#page .teaser .fullText hgroup{display:none}
#page .expdText,#page .clpsText{display:inline-block;margin-top:20px;padding:2vw 1.5vw}
#page .expdText::before,.clpsText::before{padding-right:10px}
#page .datebox .button.acc + *{background-color:transparent!important}
#page .dateReview *{color:#000}
#page .dateReview h4{color:#8f8f8f}
#page .dateReview .revPics{float:none;padding:0 0 20px;width:100%}


/* --- WIDTH DIMENSIONS */

#page main aside#cb1,#page main aside#cb2,
#page input[size="10"],#page input[size="20"],#page input[size="30"],#page input[size="40"],#page input[size="50"],#page input[size="60"],#page input[size="70"],#page input[size="80"],#page input[size="90"],
#page .w0,#page .w1,#page .w2,#page .w3,#page .w4,#page .w5,#page .w6,#page .w7,#page .w8,#page .w9,#page .w10,#page .w11,#page .w12,#page .w13,#page .w14,#page .w15,#page .w16,#page .w17,#page .w18,#page .w19,#page .w20,#page .w21,#page .w22,#page .w23,#page .w24,#page .w25,#page .w26,#page .w27,#page .w28,#page .w29,#page .w30,#page .w31,#page .w32,#page .w33,#page .w34,#page .w35,#page .w36,#page .w37,#page .w38,#page .w39,#page .w40,#page .w41,#page .w42,#page .w43,#page .w44,#page .w45,#page .w46,#page .w47,#page .w48,#page .w49,#page .w50,#page .w51,#page .w52,#page .w53,#page .w54,#page .w55,#page .w56,#page .w57,#page .w58,#page .w59,#page .w60,#page .w61,#page .w62,#page .w63,#page .w64,#page .w65,#page .w66,#page .w67,#page .w68,#page .w69,#page .w70,#page .w71,#page .w72,#page .w73,#page .w74,#page .w75,#page .w76,#page .w77,#page .w78,#page .w79,#page .w80,#page .w81,#page .w82,#page .w83,#page .w84,#page .w85,#page .w86,#page .w87,#page .w88,#page .w89,#page .w90,#page .w91,#page .w92,#page .w93,#page .w94,#page .w95,#page .w96,#page .w97,#page .w98,#page .w99,#page .w100
{width:100%!important}

}

@media only screen and (min-width: 200px) and (max-width: 600px) {

hgroup{margin-bottom:20px}
hgroup h2,hgroup h2 a,footer aside.adds section h2,.coBox h2,.subBox h2,hgroup h2{font-size:20px;width:100%!important}
hgroup h3,hgroup h3 afooter aside.adds section h3,.coBox h3,.subBox h3{font-size:18px}
#page .mainGalHeader h2{font-size:14px}
footer *{font-size:12px}

.frame-102,.frame-103{padding:20px!important}

#page header > figure{padding:15px}
#page header > figure img{width:90%!important}
#page main .textpic .galWrap{display:none!important}

#page .cmenu{padding-top:0}

#page .button,#page .button > *,#page .link,#page .link > *,#page .tx-felogin-pi1 .submit input{display:block;margin:0!important;width:100%!important}
#page .button > *{padding:10px}

#page main .tx-kesearch-pi1 .button.reset,#page #kesearch_ordering{display:none}
#kesearch_results ul{display:block}
#page main .tx-kesearch-pi1 .searchSubmit{right:10px;width:auto}
#page main .tx-kesearch-pi1 .searchSubmit:hover::after{color:#fff}
#kesearch_results ul li{margin:20px 0 0!important;width:100%}

}
