/*meta header layout*/
#mainHeader {
    padding-bottom: 29px;
}
.header #logo, .header #customlogo {
    position: relative;
    top: -6px;
}
#mainHeader .header-meta {
    padding-top: 9px;
}
#mainHeader #logo a {
    background-size: 100%;
    display: block;
    height: 104px;
    width: 314px;
    background-image: url('../../Img/logo-uni-luebeck.svg');
    background-repeat: no-repeat;
    background-position: center;
}

#mainHeader #customlogo a {
    background-size: 100%;
    display: block;
    height: 104px;
    width: 314px;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 550px) {
    .header #logo,  .header #customlogo {
        position: relative;
        top: 0;
    }
    #mainHeader #logo a, #mainHeader #customlogo a {
        width: 175px;
        height: 56px;
    }
}
#mainHeader #logo a span, #mainHeader #customlogo a span  {
    display: none;
}
#mainHeader .header-meta, #mainHeader .langselect .language-navigation {
    display: flex;
    align-items: center;
}
#mainHeader .header-meta {
    justify-content: flex-end;
}

/*inner header layout*/
#mainHeader .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
#mainHeader .header-inner .menues {
    display: flex;
}

/* search */
#mainHeader #headerSearch > input {
    display: none;
}
#mainHeader #headerSearch .searchWrap {
    max-height: 0;
    width:calc(100% + 40px);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    padding: 0 55px;
    background-color: white;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    font-size: 18px;
    line-height: 45px;
    z-index: 1001;
    overflow: hidden;
}

#mainHeader #headerSearch input:checked ~ .searchWrap {
    max-height: 1000px;
    padding: 25px 70px 25px 70px;
}
#mainHeader #headerSearch .searchOpenButton {
    margin-left: 35px;
    display: inline-block;
}
#mainHeader #headerSearch .list.ke_search_pi1 {background: none;}
#mainHeader #headerSearch .searchOpenButton svg, #mainHeader #headerSearch .searchCloseButton svg, #mainHeader .header-meta label.searchOpenButton svg, #mainHeader .header-meta label.searchCloseButton svg {
    fill: var(--color-sherpa-blue);
    cursor: pointer;
    transition: fill 0.2s ease-in-out;
}

#mainHeader #headerSearch .searchOpenButton svg{
    height: 37px;
    width: 37px;
    margin-top: 5px;
}

#mainHeader #headerSearch .searchOpenButton svg:hover, #mainHeader #headerSearch .searchCloseButton svg:hover {
    fill: var(--color-orange);
}
#mainHeader #headerSearch .searchCloseButton {
    display: none;
    margin-left: 35px;
}
#mainHeader #headerSearch .searchCloseButton.visible {
    display: inline-block;
}
#mainHeader #headerSearch .searchOpenButton.invisible {
    display: none;
}
#mainHeader #headerSearch input:checked ~ .searchOpenButton {
    display: none;
}
#mainHeader #headerSearch input:checked ~ .searchCloseButton {
    display: inline-block;
}
#mainHeader .mobileFooter {
    display: none;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 9999;
}
#mainHeader .mobileFooter .socialMedia {
    background-color: var(--color-sherpa-blue);
    padding-block: 27px 32px;
}
#mainHeader .mobileFooter .footer-bottom-after.wrap {
    background-color: var(--color-sherpa-blue-80);
    padding-block: 28px 10px;
}
#mainHeader .mobileFooter .socialMedia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    padding-inline: 20px;
}
#mainHeader .mobileFooter .footer-bottom-after .langselectImprint {
    padding-inline: 20px;
}
#mainHeader .mobileFooter .imprint ul {
    display: flex;
    justify-content: space-between;
}
#mainHeader .mobileFooter .langselect .language-navigation .menu-item {
    display: flex;
    align-items: center;
    margin-right: 24px;
}
#mainHeader .mobileFooter .langselect .language-navigation .menu-item a {
    display: flex;
    align-items: center;
    min-width: unset;
    min-height: unset;
}
#mainHeader .mobileFooter .langselect .language-navigation .menu-item.active a {
    font-weight: bold;
}
#mainHeader .mobileFooter p {
    color: var(--color-sherpa-blue-40);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}
#mainHeader .mobileFooter a {
    color: white;
}
#mainHeader .mobileFooter .langselect {
    margin-bottom: 15px;
}
#mainHeader .mobileFooter .langselect .language-navigation .menu-item:after {
    margin-left: 24px;
}
#mainHeader .mobileFooter a[href*="newsletter"] {
    display: block;
    position: relative;
    padding: 17px 0 17px 17px !important;
    background-color: var(--color-pion-purple);
    transition: background-color 0.3s ease-in-out;
}
#mainHeader .mobileFooter a[href*="newsletter"]:after {
    content:'';
    display:block;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
    width: 25px;
    height: 25px;
    background-color: white;
    -webkit-mask: url('../../Img/Arrow-intern.svg');
    mask: url('../../Img/Arrow-intern.svg');
    -webkit-mask-position: center;
    mask-position: center;
    transition-property: transform, background-color;
    transition-timing-function: ease-in-out;
    transition-duration: 0.2s;
}
#mainHeader .mobileFooter a[href*="newsletter"]:hover {
    background-color: rgba(25, 92, 106, 0.8);
}
#mainHeader .mobileFooter a[href*="newsletter"]:hover:after {
    transform: translate(8px, -50%);
    background-color: var(--color-orange);
}
#mainHeader .mobileFooter .social-navigation a span.label {
    display: none
}
#mainHeader .mobileFooter .social-navigation li {
    display:inline-block;
}
#mainHeader .mobileFooter .social-navigation a {
    color: white;
    transition: color 0.3s ease;
    padding: 0 !important;
}
#mainHeader .mobileFooter .social-navigation li:last-child a {
    margin-right: 0;
}
#mainHeader .mobileFooter .social-navigation a:hover {
    color: var(--color-sherpa-blue-40);
    text-decoration: none;
}
#mainHeader .mobileFooter .social-navigation a:after {
    font-family: 'Font Awesome 5 Brands';
    display: inline-block;
    font-size: 30px;
    line-height: 36px;
    font-weight: 300;
}
#mainHeader .mobileFooter a[href*="facebook"]:after {
    content: '\f09a';
}
#mainHeader .mobileFooter a[href*="instagram"]:after {
    content: '\f16d';
}
#mainHeader .mobileFooter .langselect .language-navigation .menu-item:after {
    color: white;
}


/* search */


#headerSearch input[type="text"]#ke_search_sword {
    padding: 8px 20px 7px 10px;
    max-width: 100%;
    width: 100%;
}

@media screen and (min-width: 1025px){
    #mainHeader .header-meta label.searchOpenButton, #mainHeader .header-meta label.searchCloseButton{
        margin: -3px 10px 0 -10px;
    }

    #mainHeader #headerSearch .searchWrap .searchCloseButton{
        position: absolute;
        display: block;
        right: 25px;
        top: 0;
    }

     #mainHeader .header-meta label.searchCloseButton, #mainHeader #headerSearch label.searchOpenButton, #mainHeader #headerSearch input:checked ~ .searchCloseButton {
        display: none;
    }

    #mainHeader:has(#headerSearch input:checked) .header-meta label.searchCloseButton{
        display: inline-block;
    }
}

@media screen and (max-width: 1024px) {
    #mainHeader {
        padding: 15px 0 15px 0px;
    }

    #mainHeader #mainNav, #logo, #customlogo{
        padding-left: 20px;
    }

    #mainHeader .header-meta {
        display: none;
    }
    #mainHeader .mobileFooter {
        display: block;
    }
    #mainHeader #headerSearch input:checked ~ .searchWrap {
        max-height: 960px;
        padding: 38px 100px 25px 70px;
    }
    #mainHeader #headerSearch .searchOpenButton, #mainHeader #headerSearch .searchCloseButton {
        margin-left: 0;
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 25px;
        z-index: 5;
    }
    #mainHeader #headerSearch input:checked ~ .searchCloseButton {
        display: block;
        z-index:201
    }
    #mainHeader .list.ke_search_pi1 .typo3element * {
        min-height: unset;
        height: 100%;
    }
    #mainHeader #headerSearch .searchCloseButton i {
        font-size: 29px;
        width: 25px;
        height: 25px;
    }
    #mainHeader .list.ke_search_pi1 .typo3element {
        padding: 0;
    }
    #mainHeader .list.ke_search_pi1 .kesearch_searchbox {
        border: none;
    }
    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper #mainHeader #headerSearch .searchWrap {
        max-height: 1000px;
        padding: 0 !important;
        left: 0;
        top: 30px;
        transform: translate(0,0);
        width: 94%;
    }
    #mainHeader #headerSearch .searchWrap {
        left: 0;
        top: -16px;
        transform: translate(0,0);
        width: 98%;
    }
    #mainHeader #headerSearch .searchCloseButton.visible {
        display: none;
    }
    #mainHeader .list.ke_search_pi1 {
        background: none;
    }
    #mainHeader .list.ke_search_pi1 .kesearch_searchbox input[type="text"]#ke_search_sword {
        height: 68px;
    }

    #mainHeader .header-meta label.searchOpenButton, #mainHeader .header-meta label.searchCloseButton{
        display: none;
    }

    #mainHeader #headerSearch .searchWrap {
        z-index: 200;
    }
    #mainHeader #headerSearch input:checked ~ .searchWrap {
        z-index: 4;
        margin-top: 10px;
    }


}

@media screen and (max-width: 700px){
    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper #mainHeader #headerSearch .searchWrap {
        top: 30px;
        width: 92%;
    }
}

@media screen and (max-width: 550px) {
    #mainHeader {
        padding: 22px 0 22px 20px;
    }
    #mainHeader #headerSearch input:checked ~ .searchWrap {
        padding: 23px 20px;
        max-height: 92px;
    }
    .kesearch_searchbox .submitbutt input[type="submit"] {
        padding-right: 0;
        margin-right: -18px;
    }

    .kesearch_searchbox .submitbutt svg{
        top: 55%;
        width: 37px;
        height: 37px;
    }
    .kesearch_searchbox #ke_search_sword::placeholder{
        font-size: 20px;
    }

    #headerSearch #ke_search_sword::placeholder{
        font-weight: bold;
    }


    #headerSearch .kesearch_searchbox .kesearchbox{
        border-bottom: none;
    }

    #mainHeader .list.ke_search_pi1 .kesearch_searchbox input[type="text"]#ke_search_sword {
        height: 57px;
    }
    #mainHeader #headerSearch  .searchWrap {
        left: 0;
        top: -25px;
        transform: translate(0,0);
        width: 80%;
       /* transition: all 0.1s ease-in-out;*/
        transition: none;
    }

    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper #mainHeader #headerSearch .searchWrap {
        top: 5px;
        width: 87%;
    }
    #mainHeader .mobileFooter .socialMedia {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }

    #mainHeader #headerSearch input:checked ~ .searchWrap {
        margin-top: 10px;
    }

    #mainHeader #mainNav, #logo, #customlogo{
        padding-left: 0;
    }

}

@media screen and (max-width: 390px){
    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper #mainHeader #headerSearch .searchWrap {
        top: 10px;
        width: 85%;
    }

    #mainHeader #headerSearch .searchWrap{
        width: 77%;
    }
    .kesearch_searchbox .submitbutt svg {
        top: 45%;
    }

}