/*modules*/

@media all
{
    .moduleHeader .m-buttons {display: none;}
    .moduleImageTeaser {position:relative; margin:0 0 27px 0; overflow:hidden}
    .moduleImageTeaser .boxOpacity {display:block; position:absolute; height:190px; width:225px; top:0; right:0; filter:alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; z-index:2;}
    .moduleImageTeaser .boxContent {position:absolute; width:180px; top:13px; right:20px ; color:#fff; z-index:3;}
    .moduleImageTeaser img {max-width: none;  height: 190px;}
}

@media only screen and (max-width: 980px) {
    /* moduleC2 */
    .moduleC2 {max-width:940px; width: 100%; padding-bottom: 20px}  /*border-bottom: 2px solid #CDCDCD;*/
    .moduleC2 h1 {max-width:100%; width: 100%}
    .moduleC2 .boxLeft {max-width:100%; width: 100%}
    .moduleC2 .boxLeft p {max-width:500px; width: 100%}
    .moduleC2 .boxLeft a {float: none !important}
    .moduleC2 .boxLeft a:first-child {margin-bottom: 10px !important;}
    .moduleC2 .boxMap span, .moduleC2 .boxList span {display: block; width: 200px;  padding-left: 40px; padding-top: 7px;}
    .moduleC2 .boxList span { padding-top: 0; }
    .moduleC2 .boxLeft {float: none;}
}

@media only screen and (max-width: 768px) {
    .moduleHeader .boxSearch .globalFormText {width: 100% !important; box-sizing: border-box;  height: 32px; border-radius: 5px;}

    .moduleAuthor .boxLeft {margin:0 10px 10px 0;}
    .pageOverview h1 {margin:0 0 20px 0;}

    .moduleCategory2 {font-size:18px; background:url(../img/sprites/sprite_icons.gif) no-repeat 0 -94px;}

    .moduleArticleControler select {
        width: 100%;
        max-width: 455px;
    }

    .moduleIndex .boxList a {
        max-width: calc(100% - 80px);
    }

    .moduleC15 {
        padding: 12px 11px;
    }

    .moduleC14 object {
        width:100% !important; height:22px !important;
    }

    .moduleC11 img {float:none; margin-bottom: 20px;}
    .moduleC11, .moduleC12 {border-top: none}

    .innerModuleTwoCols .innerBoxLeft {
        float: none;
    }

    /* innerModuleImageGallery */
    .innerModuleImageGallery {height: auto;  position: relative; margin-top: 50px;}
    /*.innerModuleImageGallery:after {*/
    /*content: '';*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-top: 20px solid transparent;*/
    /*border-bottom: 20px solid transparent;*/
    /*border-right: 20px solid rgba(8, 0, 109, 0.5);*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: -10px;*/
    /*transform: translate(0, -50%);*/
    /*}*/

    /*.innerModuleImageGallery:before {*/
    /*content: '';*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-top: 20px solid transparent;*/
    /*border-bottom: 20px solid transparent;*/
    /*border-left: 20px solid rgba(8, 0, 109, 0.5);*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: -10px;*/
    /*transform: translate(0, -50%);*/
    /*z-index: 2*/
    /*}*/

    .innerModuleImageGallery span {position:relative}
    .innerModuleImageGallery .innerBoxImage3 {
        background: none;
        position: absolute;
        top: -60px;
        right: -20px;
        left: auto;
        max-width: 90px;
    }
    .innerModuleImageGallery .innerBoxImage2 {
        background: none;
        position: absolute;
        top: -30px;
        right: -10px;
        left: auto;
        max-width: 116px;
    }
    .innerModuleImageGallery .innerBoxImage1 {width: 100%;}
    .innerModuleImageGallery .innerBoxImage1 img {width: 100%;}
    .innerModuleImageGallery .globalZoomIcon {display: none;}

    .moduleCheckboxList legend { width: 100%; border: none; text-align: center;}
    .moduleCheckboxList input {  position: absolute; left: 0; top: 0; border: 2px solid #CDCDCD; width: 15px; height: 15px;}
    .moduleCheckboxList .boxSpacer {column-count: 2;}
    .moduleCheckboxList label {width: auto;   border: none; padding-left: 22px;
        position: relative;}

    /* Modul kommt nicht von uns??*/
    .impImgContainer {
        float: none !important;
    }

    /* moduleImageTeaser */
    .moduleImageTeaser {overflow:hidden; max-width: 455px;}
    .moduleImageTeaser .boxOpacity {right:0; left: auto}
    .moduleImageTeaser .boxContent {left: auto; right:20px ;}

    /* moduleImageTeaserB */
    .moduleImageTeaserB {height: auto}
    .moduleImageTeaserB > h1 > a {text-decoration: none;  display: block;}
    .moduleImageTeaserB .boxOpacityC1 {display:none;}
    .moduleImageTeaserB .boxContent {background: #57292B; position:relative; width:100%; top:0; left:0;display: block;  padding: 30px 20px 20px 20px; max-width: 455px; box-sizing: border-box;}
    .moduleImageTeaserB .boxText {color: #fff}
    .moduleImageTeaserB .boxSubHeadline {left: 20px;}
    .moduleImageTeaser:last-child {margin-bottom: 0;}

    /* innerModuleTabs */
    .innerModuleTabs {background: none; padding: 0 !important;}
    .innerModuleTabs ul {border-top: 2px solid #e7e7e7;}
    .innerModuleTabs li {float:none; margin:2px 20px; padding:0; border: none; display: block;  width: calc(100% - 40px);  box-sizing: border-box;}
    .innerModuleTabs a {float:none; display:block; width: 100%; box-sizing: border-box; padding: 9px 18px !important;}
    .innerModuleTabs ul .active a {font-weight: bold}
    /*.innerModuleTabs > ul a {width:auto;}*/
    /*.innerModuleTabs a:hover {color:#000; text-decoration:none;}*/
    /*.innerModuleTabs ul .active {}*/
    /*.innerModuleTabs li:hover, .moduleTabs li:hover a {background-position:0% -50px;}*/
    /*.innerModuleTabs li:hover a {background-position:100% -50px;}*/

    .innerInstTabs {background: none; padding: 0 !important;}
    .innerInstTabs ul {border-top: 2px solid #e7e7e7;}
    .innerInstTabs li {float:none; margin:2px 20px; padding:0; border: none; display: block;  width: calc(100% - 40px);  box-sizing: border-box;}
    .innerInstTabs a {float:none; display:block; width: 100%; box-sizing: border-box; padding: 9px 18px !important;}
    .innerInstTabs ul .active a {font-weight: bold}

    .moduleC12 .globalSpriteIcons {
        display: block;
    }

    .moduleC3 p {
        padding: 6px 0 10px 0;
    }

    .moduleListDisplaySettings .boxLeft {
        float: none !important;
        width: 100%;
    }

    .moduleListDisplaySettings .boxRight {
        float: none;
        width: 100%;
        margin-top: 10px;
    }

    .moduleMaps {
        left: 0;
        top: 0;
    }

    .moduleF1B .mapContainer {
        min-height: 0;
    }



    .moduleF1B #testBtn {
        display: none;
    }
}

@media only screen and (max-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .mapContainer .mapContent svg {
        height: 480px;
        width: 270px;
    }

    .mapContainer  {
        height: 480px;
        width: 320px;
    }

    .mapContainer .stateMapContainer {
        top: 50px;
        height: 370px;
        width: 270px;
    }
}

@media only screen and (max-width: 1024px) {
    .moduleTopNavi  { margin: 0; max-height: 0; opacity: 0;position: absolute; width: 100%; z-index: 99; border-top: 1px solid #E7E7E7; overflow: hidden; transition: max-height 0.5s ,opacity 0.5s}
    .moduleTopNavi.is-open  { max-height: 9999px; opacity: 1}
    .moduleTopNavi ul {background-color: #08006D; color: #E7E7E7;}
    .moduleTopNavi ul li {float:none !important; display: block !important; font-size: 18px; padding: 0 !important;  cursor: pointer; width: 100% !important;}
    .moduleTopNavi ul li:not(:last-child) {border-bottom: 1px solid #E7E7E7} /*2A2481*/
    .moduleTopNavi ul li.active {background: none}
    .moduleTopNavi ul a {float: none !important; color: #E7E7E7 !important;  padding: 20px 20px 10px 20px !important;
        display: block !important}
    .moduleTopNavi ul a:hover {color: #E7E7E7; text-decoration: none;}
    .moduleTopNavi ul li.active a{border: none}
    .moduleTopNavi ul li.is-flyout{  position: relative;}
    .moduleTopNavi ul li.is-flyout:after{content: ''; position: absolute; width: 15px; height: 24px; top: 15px; right: 25px; background:url(../img/icons/mobile/arrow-right.svg) center no-repeat; transition: transform 0.3s;}
    .moduleTopNavi ul li.is-flyout.is-open:after{transform: rotate(90deg)}
    .moduleTopNavi ul li.is-flyout a{ pointer-events: none;}
    .moduleTopNavi ul li ul.flyout li a {font-size: 80%;  text-transform: uppercase; pointer-events: all}
    .moduleTopNavi ul li ul.flyout li {font-size: 80%;  text-transform: uppercase; }
    .moduleTopNavi ul li ul.flyout {margin: 0; max-height: 0; opacity: 0; transition: max-height 0.5s ,opacity 0.5s}
    .moduleTopNavi ul li ul.flyout.is-open  {margin: 10px 0 20px 0; max-height: 9999px; opacity: 1; display: block !important; padding: 0 !important; left: 0!important; top: 0!important;  position: relative!important;}
    .moduleTopNavi ul li:hover ul.flyout {padding: 0 !important; width: 100% !important;}
    .moduleTopNavi ul.flyout li a {border-bottom: none!important; width: 100%; background: #08006D!important;}
    .moduleTopNavi ul.top {margin-top: 0;}


    /* moduleHeader */
    .moduleHeader {height: auto; background-color: #08006D;  padding: 15px 20px 0 15px; display: flex; justify-content: space-between; position: relative;}
    .moduleHeader.clearfix::after {display: initial;}
    .moduleHeader img {float: none; top: auto; max-width: 200px;}
    .moduleHeader a img{visibility: hidden}
    .moduleHeader a {max-width: 200px;  position: relative; background:url(../img/icons/mobile/logo.svg); background-size: contain}
    .moduleHeader .m-buttons {flex: 1 1 auto; display: flex; justify-content: flex-end; position: relative; top: -15px;}
    .moduleHeader .m-buttons img {  cursor: pointer;}
    .moduleHeader .m-buttons .js-search {position: absolute; bottom: 3px; right: 50px;}
    .moduleHeader .m-buttons .js-close {position: absolute; bottom: 3px; right: 0; display: none}
    .moduleHeader .m-buttons .js-open {position: absolute; bottom: 3px; right: 0;}

    .moduleHeader .boxSearch { opacity: 0; pointer-events: none; position: absolute; bottom: -8px; right: 115px; padding-left: 20px; transition: opacity 0.3s;}
    .moduleHeader .boxSearch.is-open { opacity: 1; pointer-events: auto;}
    /*.moduleHeader .boxSearch:after {  content: ''; position: absolute; top: -9px; left: 50%; width: 200vw; height: calc(100% + 20px); transform: translate(-80vw); background-color: #08006D; z-index: 0;}*/
    .moduleHeader .boxSearch:after {  content: ''; position: fixed; top: -9px; left: 0; width: 100vw; height: 100px; background-color: #08006D; z-index: 0;}
    .moduleHeader .boxSearch form {position: relative; z-index: 1;}
    .moduleHeader .boxSearch .globalSubmitButton {display: none}
    .moduleHeader .boxSearch .globalFormPrevText {width: 100%; box-sizing: border-box; height: 32px;  border-radius: 5px;}
    .moduleHeader .boxSearch div:nth-child(2) {}

    .moduleArticleControler {  position: static; margin-bottom: 15px;}
    .moduleArticleControler .boxTop {width:100%; background:none}
    .moduleArticleControler .boxMiddle {width:100%; background:none; padding: 0}
    .moduleArticleControler .boxBottom {width:100%; background:none}

    /*Tooltips kommen nicht von uns, ledigliche die Klasse wird per js eingefügt. Blindversuch*/
    .tooltipp {
        background: #fff !important;
        border: 1px solid gray !important;
        border-radius: 10px !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
    }

    .tooltipp .hbcontainer {
        left: 15px !important;
        top: 15px !important;
        width: calc(100% - 30px) !important;
        height: calc(100% - 30px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .tooltipp .hbcontainer img {
        right: 10px !important;
    }

    .tooltipp .hbcontent {
        width: 100% !important;
        height: auto !important;
    }
}

@media only screen and (min-width: 1025px) {
    .moduleTopNavi  { max-height: none !important; opacity: 1}
}


/*grid*/
@media all
{
    body {font-family:Arial,Verdana,Helvetica,sans-serif;font-size: 75.00%;text-align:center;
        position: relative; overflow-x: hidden;}
    fieldset {border:none;}
    img {border:none; max-width: 100%;  height: auto;}

    .pageForm { width: 100%; max-width: 480px; padding: 17px 20px;}
    .pageBg1:after {background:#fff url("../img/bg/bg_head_1.jpg") no-repeat top center;}
    .pageBg2:after {background:#fff url("../img/bg/bg_head_2.jpg") no-repeat top center;}
    .pageBg3:after {background:#fff url("../img/bg/bg_head_3.jpg") no-repeat top center;}
    .pageBg4:after {background:#fff url("../img/bg/bg_head_4.jpg") no-repeat top center;}
    .pageBg5:after {background:#fff url("../img/bg/bg_head_5.jpg") no-repeat top center;}
    .pageBg6:after {background:#fff url("../img/bg/bg_head_6.jpg") no-repeat top center;}
    .pageBg7:after {background:#fff url("../img/bg/bg_head_7.jpg") no-repeat top center;}

    body:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 1;
        background:#fff url("../img/bg/bg_head_1.jpg") no-repeat top center
    }

    body >* {
        position: relative;
        z-index: 2;
    }
}
@media only screen and (max-width: 768px) {
    #footer {max-width: 100%;
        margin: 0 20px;
        width: calc(100% - 40px);}

    .pageArticle #main, .pageOverview #main {background:#fff;}
    .grid2Cols .gridColLeft {float:none;margin-bottom: 30px;
        overflow: hidden; padding-top: 2px;}
    .grid2Cols .gridColRight {float:none; max-width: none !important;}

    .pageArticle .grid2Cols {background:#fff}
    .pageArticle .grid2Cols .gridColLeft {float:none;}
    .pageArticle .grid2Cols .gridColRight {float:none; max-width: none; padding-top: 30px;} /*border-top: 2px solid #DADADA;*/
    .pageArticle .grid3Cols .gridColLeft {float:none; order: 2; max-width: 100% !important; box-sizing: border-box;}
    .pageArticle .grid3Cols .gridColMiddle {float:none; order: 1; max-width: 100% !important; box-sizing: border-box;}
    .pageArticle .grid3Cols .gridColRight {float:none; order: 3; max-width: 100% !important; box-sizing: border-box; padding-left: 0}



    .pageArticle #box_institute_search .grid3Cols .gridColLeft,
    .pageArticle #box_institute_search .grid3Cols .gridColMiddle,
    .pageArticle #box_institute_search .grid3Cols .gridColRight{
        border-top: 1px solid #CDCDCD;
        margin-top: 10px;
        padding-top: 40px;
        position: relative;
        padding-left: 0;

        padding-right: 0;
    }

    .pageArticle #box_institute_search .grid3Cols .gridColLeft:before,
    .pageArticle #box_institute_search .grid3Cols .gridColMiddle:before,
    .pageArticle #box_institute_search .grid3Cols .gridColRight:before  {
        content: '';
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 24px solid #CDCDCD;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        z-index: 2
    }

    .pageArticle #box_institute_search .grid3Cols .gridColLeft:after,
    .pageArticle #box_institute_search .grid3Cols .gridColMiddle:after,
    .pageArticle #box_institute_search .grid3Cols .gridColRight:after  {
        content: '';
        width: 0;
        height: 0;
        border-left: 29px solid transparent;
        border-right: 29px solid transparent;
        border-top: 23px solid #fff;
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translate(-50%);
        z-index: 2
    }

    .pageArticle #box_institute_search .grid3Cols .gridArrow {
        display: none;
    }

    .pageArticle #box_institute_search .grid3Cols {
        background: none;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 1024px) {
    /*body {*/
    /*overflow-x: hidden;*/
    /*}*/
    body { background: none !important;}
    #outer { width: 100%; max-width:1008px; }
    #header {width: 100%; max-width:940px; z-index: 99;   position: relative;}

    .grid2Cols {width: 100%; max-width:940px;}
    * html .grid2Cols {width: 100%; max-width:942px;}
    .grid2Cols .gridColLeft {width: 100%; max-width:455px;}
    .grid2Cols .gridColRight {width: 100%; max-width:455px;}


    .pageArticle .grid2Cols {width: 100%; max-width:960px; margin:0 0 30px 0;}
    .pageArticle .grid2Cols .gridColLeft {width: 100%; max-width:610px;}
    .pageArticle .grid2Cols .gridColRight {width: 100%; max-width:289px;}

    .pageArticle .grid3Cols {width: 100%; max-width:960px; }
    .pageArticle .grid3Cols .gridColLeft { width: 100%; max-width:367px;}
    .pageArticle .grid3Cols .gridColMiddle { width: 100%; max-width:204px; }
    .pageArticle .grid3Cols .gridColRight { width: 100%; max-width:268px; }
    .pageArticle .grid3Cols .gridArrow { width: 100%; max-width:21px;}

    /*html {overflow-x: hidden}*/
    html {width: 100vw; max-width: 100vw}
    #main {background:#fff !important; padding: 27px 20px 7px 20px;}
    #header {max-width: 100%; margin: 0;}
    /*#header h1 {margin-left: 20px; margin-top: 40px; position: absolute; top: 80px;}*/
    #header h1 {margin-left: 20px; margin-top: 40px; margin-bottom: 20px}
    .pageArticle #header, .pageOverview #header { height:auto; }
}

@media only screen and (min-width: 1024px) {
    #header {height:210px}
    .pageHome h1 {
        z-index: 1;
        position: absolute;
        top: 6em;
    }
}

/*layer*/

@media only screen and (max-width: 768px) {
    .innerModuleLayer img {width: 100% !important; max-width: 100% !important}
    .innerModuleLayer p {width: auto; !important}
}

/*html5 map*/

@media only screen and (max-width: 768px) {
    /* country container*/
    .mapContainer { position: relative; width: 100%; min-height:0; max-height: none; margin: 0 0 10px 0; overflow: hidden; }

    /* country-svg wrappers*/
    .mapContainer .mapContent { position: relative;}
    .mapContainer .mapContent.mapContentat { top: 10px; left: 25px;}
    .mapContainer .mapContent.mapContentch { top: 10px; left: 25px;}
    .mapContainer .mapContentBorder { display: none;}

    .moduleF1 a.linkButton, .moduleF1B a.linkButton { padding: 12px 30px 12px 30px; background: #f5bd29 url(../img/sprites/sprite_icons.gif) 7px 14px no-repeat; font-size: 114.67%;
        display: inline-block;
        margin-left: 50%;
        transform: translate(-50%);
    }

    .moduleF1 > .mapFilter, .moduleF1B > .mapFilter {display: block;}
    .moduleF1 .countrySelection, .moduleF1B .countrySelection {margin-bottom: 10px; justify-content: flex-start;}
    .moduleF1 .globalFormTextarea, .moduleF1B .globalFormTextarea { margin-bottom: 10px; width: 100%; float: none}
}

@media only screen and (max-width: 768px) {
    #layerContainer {
        position: absolute;
        top: 0;
    }

    #layerContainer .layerWrap {
        width: auto;
        margin: 10px auto;
        padding: 52px 25px 40px 25px;
    }
}

/*knavigator*/

@media only screen and (max-width: 768px) {
    /*.moduleHeader img {top:;}*/
}