/**
 * wst-quarz - CSS Styling
 *
 * Set global styling definitions
 *
 * @category   content
 * @package    wst-quarz
 * @author     Christian Brinkert <christian.brinkert@sector27.de>
 * @copyright  2022 sector27 GmbH
 * @version    1.0.0
 */




.headerLogoMenu{
    position: relative;
    z-index: 10000;
}
header{
    padding:0;
}
nav{
    padding:0;
    position:relative;
    width:unset;
}



.mobileMenu{
    display: none;
    position: absolute;
    right: 40px;
    top: 18px;
    z-index:1000;
}


.logomenu{
    position: relative;
    background-color: #fff;
    margin:1em 0;
}
.logomenu .logo{
    display: inline-block;
    float: left;
}
.logomenu .logo a{
    border-bottom: unset;
}
.logomenu .logo img{
    width: 12rem;
}




/*!* main menu *!*/
.logomenu .menu{
    margin-right: 4rem;
    float: right;
}
.logomenu .menu .mobilePrefix{
    display:none;
}
.logomenu .menuBox{
    display: none;
    position: absolute;
    padding:0 1em 1em 1em;
    margin-top: 3.4em;
}

.logomenu .menu a{ color:#000; border-bottom:unset; font-style: normal; }
.logomenu .menu a:hover{ color:rgb(0,150,170); }
.logomenu .menu ul{
    list-style-type: none;
}
.logomenu .menu ul li.current,
.logomenu .menu ul li.current a,
.logomenu .menu ul li.current > a span{
    color:rgb(0,150,170);
}
.logomenu .menu ul.firstLevel{
    display:inline-block;
}
.logomenu .menu ul.firstLevel > li{
    display:inline-block;
    font-size: 1rem;
    padding:0;
    position: relative;
}
.logomenu .menu ul.firstLevel > li > .menuBox{
    position:absolute;
    right:-6em;
}
.logomenu .menu ul.firstLevel > li{
    padding: 2em 2em 1em;
    display: inline-block;
    color:rgb(0,0,0);
    text-transform: uppercase;
}
.logomenu .menu ul.firstLevel > li::marker{
    display:none;
}
.logomenu .menu ul.firstLevel > li:hover{
    color: rgb(0,150,170);
    cursor:pointer;
}
.logomenu .menu ul.firstLevel > li.opened{
    color: rgb(0,150,170);
}
.logomenu .menu ul.firstLevel > li.opened .menuBox{
    display: inline-block;
}
.logomenu .menu ul.firstLevel > li.hasSublevel:after{
    content:"\f078";
    color:#000;
    font-family: FontAwesome, fantasy;
    font-size: 0.8em;
    margin:-0 0 0 .9em;
    position: absolute;
    top: 2.7em;
}
.logomenu .menu ul.firstLevel > li.currentStart > span,
.logomenu .menu ul.firstLevel > li.active > span{
    position:relative;
}
.logomenu .menu ul.firstLevel > li.currentStart > span:after,
.logomenu .menu ul.firstLevel > li.active > span:after{
    content:"\f111";
    font-family: FontAwesome, fantasy;
    color:rgb(0,150,170);
    position:absolute;
    top: -14px;
    right: -1px;
    font-size: 0.8em;
}


/*!* first level *!*/
.logomenu .menu ul.firstLevel li:before{
    content:unset;
}



/*!* second level *!*/
.logomenu .menu ul.secondLevel{
    display:table;
    justify-content:    center;
    align-items:        flex-start;
    background-color:   #fff;
    -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    border-spacing: 25px 0;
    padding-bottom: 10px;
}
.logomenu .menu ul.secondLevel > li{
    display:table-cell;
    min-width: 14rem;
    border-right:1px solid rgb(0,150,170);
    text-transform: none;
    font-size:1.2rem;
}
.logomenu .menu ul.secondLevel > li > a{
    color: rgb(0,150,170);
    padding: 1em 0;
    display: inline-block;
}
.logomenu .menu ul.secondLevel > li > a:hover{
    color:#000;
}
.logomenu .menu ul.secondLevel > li > span.header{
    padding:0 0 1em 0;
    display: inline-block;
}
.logomenu .menu ul.secondLevel > li:last-child{
    border-right:none;
}



/*!* third level *!*/
.logomenu .menu ul.thirdLevel{
    margin-right:2rem;
}
.logomenu .menu ul.secondLevel li:last-child ul.thirdLevel{
    margin-right:0;
}
.logomenu .menu ul.thirdLevel > li{
    /*padding-right:2rem;*/
}
.logomenu .menu ul.thirdLevel > li > a > .header{
    font-size:.9em;
    color: rgb(0,0,0);
    display: block;
    margin-bottom: .5em;
    padding-bottom:.5em;
}
.logomenu .menu ul.thirdLevel > li > a:hover > .header{
    color: rgb(0,150,170);
}
.logomenu .menu ul.thirdLevel > li > a > .header{
    font-size:1.1rem;
}
.logomenu .menu ul.thirdLevel > li .header span.row-1{
    display:block;
}
.logomenu .menu ul.thirdLevel > li .header span.row-2{
    display:block;
    font-size:.8em;
    color:#666;
    font-style:italic;
}



/*!* fourth level *!*/
.logomenu .menu ul.fourthLevel > li{
    padding:0;
}
.logomenu .menu ul.fourthLevel > li a{
    padding: .75em .75em .75em .75em;
    font-size: .9em;
    color: #3b3b3b;
    display:block;
    margin:0;
    line-height: 1.2em;
}
.logomenu .menu ul.fourthLevel > li a:hover{
    color: rgb(0,150,170);
    background: #d3d3d3;
    background: linear-gradient(135deg, #d3d3d3 0%,#ffffff 51%,#ffffff 51%);
}



/*!* fifth level *!*/
.logomenu .menu ul.fifthLevel{
    margin-top: -.2em;
    margin-bottom: 0.5em;
}
.logomenu .menu ul.fifthLevel{
    padding-top: 0;
    padding-bottom: 0;
}
.logomenu .menu ul.fifthLevel > li a:before{
    content: "\f105";
    color: rgb(175, 175, 175);
    position: absolute;
    left: 1.3em;
    font-family: 'FontAwesome', sans-serif;
}
.logomenu .menu ul.fifthLevel > li a{
    font-size: .8em;
    padding-top: .25em;
    padding-bottom: .25em;
    padding-left: 2.3em;
    position: relative;
    color: rgb(129, 129, 129);
}


/* Search box */
.logomenu .search{
    display:inline-block;
    position:relative;
}
.logomenu i.fa-search{
    padding: 0 1em 0 2em;
    cursor: pointer;
}
.logomenu i.fa-search:hover{
    color:rgb(0,150,170);
}
.logomenu .searchBox{
    /*display:none;*/
    position:absolute;
    background-color: #fff;
    -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
}
.logomenu .searchBox.show{
    display: inline-block;
}
.logomenu .searchBox{
    display:none;
    right: -20px;
    top: 35px;
}
.logomenu .searchBox .tx-indexedsearch-searchbox-sword{
    padding: 0.4rem;
    font-size: 1rem;
    color: #000;
    /*border: 1px solid rgb(197, 197, 197);*/
    -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    border: 1px solid #fff;
}
.logomenu .searchBox .tx-indexedsearch-searchbox-sword:focus-visible {
    outline: none;
}
/* Search box*/


.logomenu .langSelector{
    display:inline-block;
    position: relative;
}
.logomenu .langSelector .langCurrent{
    padding: 0 1rem 1rem 2rem;
    white-space: nowrap;
}
.logomenu .langSelector .langSwitcher{
    padding: .75rem 1rem .75rem 2rem;
    white-space: nowrap;
    background-color: #fff;
}

.logomenu .langSelector .langCurrent:hover{
    color:rgb(0,150,170);
    cursor: pointer;
}
.logomenu .langSelector .langCurrent:after{
    content: "\f078";
    color: #000;
    font-family: FontAwesome, fantasy;
    font-size: 0.8em;
    margin: -0 0 0 0.9em;
    position: absolute;
    top: .2em;
}
.logomenu .langSelector .langSwitcher{
    position: absolute;
    display:none;
}
.logomenu .langSelector .langSwitcher.show{
    display:inline-block;
    -webkit-box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
    box-shadow: 0 7px 10px -5px rgba(0,0,0,1);
}
.logomenu .langSelector .langCurrent img,
.logomenu .langSelector .langSwitcher img{
    margin: 0 0.7rem -0.2rem 0;

}



    /* set min height to the content area */
.contents {
    padding: 0 0 3em 0;
    min-height:40em;
}

/* set multicolumn config */
/*.contents .multicolumn {*/
/*    display: flex;*/
/*    flex-direction:     row;*/
/*    justify-content:    center;*/
/*    align-items:        flex-start;*/
/*    flex-wrap:          nowrap;*/
/*}*/
/*.contents .contentRight {*/
/*    flex-grow: 1;*/
/*    flex-basis: 20rem;*/
/*}*/
/*.contents .contentLeft {*/
/*    width:17rem;*/
/*    padding-right:2rem;*/
/*}*/
/*!* set min height to the content area *!*/
/*.contents .contentRight {*/
/*    padding-left:2rem;*/
/*}*/
.content > .keyvisual{
    overflow:hidden;
}





/**
 * FOOTER
 */

footer .footerBorder{
    height:1.2em;
    width:75%;
    background: #007785;
    background: -webkit-linear-gradient(-45deg,  #007785 0%,#0096aa 70%);
    background: linear-gradient(135deg,  #007785 0%,#0096aa 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007785', endColorstr='#0096aa',GradientType=1 );

}
footer .footerRow {
    min-height: 10em;
    background: url(/typo3conf/ext/sc27_sitepackage/Resources/Public/Images/fusszeile_piktogramm.svg) no-repeat #007785;
}
footer .contentRow p{
    color:#fff;
}
footer .contentRow a{
    color:#fff;
    border-bottom: unset;
    font-style: normal;
}
footer .contentRow a:hover{
    color:#fff;
    border-bottom: 1px dotted #fff;
}





/**
 * LIMITED WIDTH CONTAINERS
 */
.fullWidth, .max960Width, .max1600Width{
    width:100%;
}
.fullWidth > .contentColumn, .max960Width > .contentColumn,
.max1180Width > .contentColumn, .max1600Width > .contentColumn{
    margin-left:auto; margin-right:auto;
}
.max960Width > .contentColumn{
    max-width:960px; margin-left:auto; margin-right:auto;
}
.max1180Width > .contentColumn{
    max-width:1280px; margin-left:auto; margin-right:auto;
}
.max1600Width > .contentColumn{
    max-width:1600px; margin-left:auto; margin-right:auto;
}
header > .max960Width > .contentColumn,
header > .max1180Width > .contentColumn{
    position:relative;
}
.maxContentWidth > .contentColumn > .pageContent{ margin:0 20px; min-height:300px; }
/* End of LIMITED WIDTH CONTAINERS */

/* LIMITED WIDTH CONTAINER LAYOUTS */
.maxContentWidth{ display:table; width:100%; box-sizing:border-box;}
.maxContentWidth.layout1{}
.maxContentWidth.layout2{background-color:#fff;}
.maxContentWidth.layout3{background-color:#efefef;}
.maxContentWidth.layout4{background-color:rgb(225,235,237);}
.maxContentWidth.layout5{background-color:rgb(0,150,170);}
.maxContentWidth.layout5 *{color:#fff;}
.maxContentWidth.layout5 li:before{color:#fff;}
/*.maxContentWidth.layout6{background-color: rgb(0,150,170);}*/
/*.maxContentWidth.layout6 *{color:#fff;}*/
/*.maxContentWidth.layout6 li:before{color:#fff;}*/
.maxContentWidth.layout7{background-color:rgb(250,250,250);}
.maxContentWidth.layout8{background-color:rgb(246,251,252);}

.maxContentWidth.shadowTop{
    -webkit-box-shadow: 0 -5px 5px -5px rgba(0,0,0,.66);
    box-shadow: 0 -5px 5px -5px rgba(0,0,0,.66);
}
.maxContentWidth.shadowBottom{
    -webkit-box-shadow: 0 5px 5px -5px rgba(0,0,0,.66);
    box-shadow: 0 5px 5px -5px rgba(0,0,0,.66);
}
.maxContentWidth.shadowBoth{
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,.66);
    box-shadow: 0 0 5px 0 rgba(0,0,0,.66);
}
/* End of LIMITED WIDTH CONTAINERS */