/* ========== Header ========== */

header {

}

.sticky {
    position: fixed;
    top: 0;
    width: 100%
}


/* ---------- Header (Top Menu) ---------- */

/*#top-menu-container > div {*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    justify-content: space-between;*/
/*}*/

.menu-top-container {
    border-bottom: 1px solid #B4B4B4;
}

.top_menu {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 20px;
    margin: 0;
}

.top-menu-link {
    font: normal normal normal 15px/20px TheSans;
    letter-spacing: 0px;
    color: #5E5E5D;
}
.top-menu-link:hover {
    color: #5E5E5D;
    text-decoration: none;
}

.top-menu-link span {
    position: relative;
}

.top-menu-link span:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 10px;
    content: "";
    border-bottom: 1px solid #5E5E5D;
    opacity: 0;
    transition: all 0.3s ease-out;
}
.top-menu-link:hover span:after {
    width: 100%;
    opacity: 1;
}

#header-mein-akwl-logo {
    padding-bottom: 8px;
}


/* ---------- Header (Logos) ---------- */

#logo-container-inner {
    padding: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#logo-container-inner a {
    color: #5E5E5D;
    font: normal normal normal 16px/20px TheSans;
    letter-spacing: 0px;
}

#logo-container-inner a:hover {
    color: black;
}

#logo-container-inner i.bi-chevron-right {
    font-size: 80%;
}


/* ---------- Header (Main Menu) ---------- */

#main-menu-container {
    /*border-bottom: 1px solid lightgrey;*/
}

#main-menu-lvl-1-container {
    /*border-bottom: 1px solid #DDDDDD;*/
    z-index: 100;
}

#main-menu-lvl-1-container nav {
    /*background-color: #C4182A;*/
    padding-bottom: 0;
}
#main-menu-lvl-1-container .nav-item:hover {
    cursor: pointer;
}

#main-menu-lvl-1-container .nav-link-text {
    position: relative;
}

#main-menu-lvl-1-container .nav-link-text:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 10px;
    content: "";
    border-bottom: 2px solid white;
    opacity: 0;
    transition: all 0.3s ease-out;
}
#main-menu-lvl-1-container .nav-item:hover .nav-link-text:after {
    width: 100%;
    opacity: 1;
}


#main-menu-lvl-1-container li {
    padding-bottom: 0.5rem;
}

#main-menu-lvl-1-container li.active {
    background-color: white;
}

#main-menu-lvl-1-container li.active > a {
    color: #C21729;
    font-weight: bold;
}

#main-menu-lvl-1-container .nav-link {
    color: white;
}

.pseudo-partial-border::after {
    position: absolute;
    width: 33px;
    height: 20px;
    content: "";
}

#main-menu-lvl-1-container-inner {
    display: flex;
    justify-content: space-between;
    background-color: #C4182A;
    position: relative;
}

#main-menu-right-container {
    background-color: var(--akwl-light-red);
    color: var(--akwl-red);
    display: flex;
    align-items: center;
}

#main-menu-right-container > div {
    width: 58px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#main-menu-right-container > div:hover {
    background-color: var(--akwl-light-red-hover);
}

#main-menu-right-container > div.active {
    background-color: var(--akwl-light-red-hover);
}

.main-menu-right-item {
    position: relative;
    font-size: 33px;
}
.main-menu-right-item .bi-search {
    font-size: 78%;
}
.main-menu-right-item .bi-cart-check {
    font-size: 90%;
}

.main-menu-right-item-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    border: 2px solid var(--akwl-red);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.main-menu-right-item:hover .main-menu-right-item-bottom, .main-menu-right-item.active .main-menu-right-item-bottom {
    opacity: 1;
    width: 58px;
}

#uni-akwl-extra-menu-toggle, #uni-akwl-search-toggle, #uni-akwl-buchungskorb-link {
    border-right: 1px solid var(--akwl-red);
}

#uni-akwl-buchungskorb-link {
    display: none !important;
}
#uni-akwl-buchungskorb-link.show {
    display: inherit !important;
}
#uni-akwl-buchungskorb-link a {
    color: inherit;
}


/* ---------- Header (Main Menu, Level 2 - 3) ---------- */

.uni-akwl-main-menu-dropdown-container {
    box-shadow: 0px 63px 99px #0000000F;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    display: none;
    position: absolute;
    top: 57px;
    left: 0;
    right: 0;
    /*width: 100%;*/
    background-color: white;
    z-index: 20;
}

.uni-akwl-main-menu-dropdown-container.show {
    display: block;
}

.uni-akwl-main-menu-dropdown {

    padding-top: 30px;
    padding-bottom: 30px;

}

.uni-akwl-main-menu-dropdown > div {

}

/*#menu-main {*/
/*    list-style-type: none;*/
/*    padding-left: 0;*/
/*    margin-bottom: 0;*/
/*    display: flex;*/
/*    column-gap: 20px;*/
/*}*/

.main-menu-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}



.main-menu-link {
    color: black;
}
.main-menu-link:hover {
    color: var(--akwl-red);
    text-decoration: none;
}

.main-menu-item-lvl-2 {
    font: normal normal bold 18px/24px TheSans;
    letter-spacing: 0px;
    color: #C4182A;
}
.main-menu-item-lvl-2:hover {
    text-decoration: none;
}

.main-navigation-item-3 {
    padding-bottom: 0 !important;
}

.main-menu-item-lvl-3 {
    font: normal normal normal 18px/24px TheSans;
    letter-spacing: 0.09px;
    color: #5E5E5D;
}
.main-menu-item-lvl-3:hover {
    text-decoration: none;
}

hr.main-menu-item-seperator {
    border-color: #F3DCDF;
    margin-top: 1px;
    margin-bottom: 1px;
}

.main-menu-close-icon {
    color: #C31729;
    cursor: pointer;
}


/* ---------- Header (Main Menu, Externe Links) ---------- */

.main-menu-external-link {
    font: italic normal normal 18px/25px TheSans;
    letter-spacing: 0.09px;
    color: #5E5E5D;
    margin-right: 2em;
}

.main-menu-external-link:hover {
    color: var(--akwl-red);
    text-decoration: none;
}

.main-menu-external-link:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    content: '\f08e';
    margin-left: 0.5em;
}


/* ---------- Header (Extra Menu) ---------- */

#uni-akwl-extra-menu-container {
    display: none !important;
    position: absolute;
    right: 0;
    top: 57px; /* Height of menu bar +1 */
    z-index: 21;
    background-color: white;
    border: 1px solid #B7B7B6;
}

#uni-akwl-extra-menu-container.show {
    display: block !important;
}

#uni-akwl-extra-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.extra-nav-item {
    border-bottom: 1px solid #E9E8E8;
    padding-bottom: 0 !important;
}

.extra-nav-item:last-of-type {
    border-bottom: none;
}

.extra-nav-link {
    font: normal normal normal 22px/30px TheSans;
    letter-spacing: 0.22px;
    color: #5E5E5D;
    display: block;
    padding: 10px 5px;
    border-left: 10px solid transparent;
}

.extra-nav-link:hover {
    border-left-color: #C4182A;
    background-color: #F5F5F5;
    color: black;
    text-decoration: none;
}


/* ---------- Header (Search) ---------- */

#main-menu-search-container {
    display: none;
    position: absolute;
    right: 58px;
    left: 0;
    top: 57px; /* Height of menu bar +1 */
    z-index: 21;
    background-color: white;
    padding: 41px 58px 41px 15px;
    box-shadow: 0px 40px 66px #0000000F;
}

#main-menu-search-container.show {
    display: block;
}

#search-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

#search-form h2 {
    font: normal normal 600 60px/68px TheSans;
    letter-spacing: 0px;
    color: #5E5E5D;
    margin-bottom: 0;
}

#search-form input {
    height: 52px;
    margin-left: 52px;
    border: 1px solid #B1B1B1;
    border-radius: 0;
}

#search-form button {
    border: none;
    background-color: unset;
    width: 58px;
    height: 52px;
    flex-shrink: 0;
    font-size: 25px;
    color: #5E5E5E;
}

#search-form button:focus {
    outline: none;
}

#search-close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    color: var(--akwl-red);
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#search-close-icon:hover {
    cursor: pointer;
}


/* ---------- Header (Login) ---------- */

#main-menu-login-container {
    display: none;
    position: absolute;
    right: 0;
    top: 57px; /* Height of menu bar +1 */
    z-index: 23;
    background-color: white;
    padding: 27px 25px 6px;
    width: min-content;
    min-width: 300px;
    box-shadow: 0px 63px 59px #0000000F;
}

#main-menu-login-container.show {
    display: block;
}

#main-menu-login-container h2 {
    font: normal normal bold 25px/33px TheSans;
    letter-spacing: 0px;
}

#login-close-icon {
    position: absolute;
    top: 30px;
    right: 25px;
    color: var(--akwl-red);
    font-size: 25px;
}

#login-close-icon:hover {
    cursor: pointer;
}

#main-menu-lvl-1-container-inner .uni-login-form {
    /*display: none;*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 57px; !* Height of menu bar +1 *!*/
    /*z-index: 23;*/
    /*background-color: white;*/
    /*padding: 15px 15px 0;*/
    /*width: min-content;*/
    /*min-width: 300px;*/
    /*box-shadow: 0px 63px 59px #0000000F;*/
}

#main-menu-lvl-1-container-inner .uni-login-form.show {
    display: block;
}

#main-menu-lvl-1-container-inner .uni-login-form button {
    width: 100%;
    margin-top: 30px;
}


/* ---------- Header (Main Menu, Mobile) ---------- */

#header-mobile {
    margin-top: 84px; /* Height of #header-mobile-top */
}

#header-mobile-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
}

.header-logo-mobile {
    padding: 10px 0 10px 15px;
    height: 84px;
}

#header-mobile-toggle {
    float: right;
    height: 84px;
    width: 84px;
    background-color: var(--akwl-red);
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-mobile-toggle:hover {
    cursor: pointer;
}

#header-mobile-toggle-icon {
    color: white;
    font-size: 32px;
}

#main-menu-mobile {
    background-color: white;
    overflow: hidden;
    display: none;
}

#main-menu-mobile.show {
    display: block;
}

#main-menu-mobile-top {
    position: relative;
}

#main-menu-mobile-top-link-container {
    margin-bottom: 15px;
}

#main-menu-mobile-top-link-container a {
    font: normal normal normal 16px/20px TheSans;
    letter-spacing: 0px;
    color: #5E5E5D;
}

#main-menu-mobile-top-link-container a:hover {
    color: black;
}

#main-menu-mobile-top-button-container {
    height: 45px;
    margin: 0 -5px 15px;
}

.main-menu-mobile-top-button {
    width: fit-content;
    height: 100%;
    background-color: var(--akwl-light-red);
    color: var(--akwl-red);
    font: normal normal bold 16px/21px TheSans;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0 5px;
    position: relative;
}

.main-menu-mobile-top-button:hover {
    text-decoration: none;
    cursor: pointer;
}

.main-menu-mobile-top-button-icon {
    font-size: 150%;
}

.main-menu-mobile-top-button-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid transparent;
}

.main-menu-mobile-top-button:hover .main-menu-mobile-top-button-bottom, .main-menu-mobile-top-button.active .main-menu-mobile-top-button-bottom {
    border-color: var(--akwl-red);
}

#main-menu-mobile-top-search-container {
    height: 45px;
}

#main-menu-mobile-top-search-container form {
    width: 100%;
    height: 100%;
    position: relative;
}

#searchfield-mobile {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.btn-search-mobile {
    background-color: white;
    border: none;
    position: absolute;
    right: 1px;
    top: 1px;
    height: 43px;
    width: 43px;
    color: #5E5E5D;
}


#main-menu-mobile-inner {
    position: relative;
    width: 200%;
    left: 0%;
    transition: left 0.3s;
}

#main-menu-mobile-inner.shifted {
    left: -100%;
}

.main-menu-mobile-lvl-1-container {

    /*z-index: 100;*/

    float: left;
    width: 50%;
    display: inline-block;
}

.main-menu-mobile-lvl-1-container.active {
    /*left: 0%*/
}

.main-menu-mobile-lvl-1 {
    /*background-color: blue;*/
}

ul#mobile-menu-lvl-1 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: normal normal 600 18px/24px TheSans;
    letter-spacing: 0px;
    color: #000000;
}

#mobile-menu-lvl-1 .nav-item {
    border-top: 1px solid #E9E8E8;
    cursor: pointer;
}

#mobile-menu-lvl-1 .nav-item:last-child {
    border-bottom: 1px solid #E9E8E8;
}

#mobile-menu-lvl-1 .nav-link {
    display: block;
    padding: 0.75rem 0;
    position: relative;
    top: 2px;
}

#mobile-menu-lvl-1 .nav-link span {
    color: var(--akwl-red);
    float: right;
    position: relative;
    right: 2px;
}

.main-menu-mobile-lvl-2-3-container {
    float: left;
    width: 50%;
    display: inline-block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0s linear 0.3s;
    margin-bottom: 15px;
}

.main-menu-mobile-lvl-2-3-container.active {
    max-height: 2000px;
    transition: max-height 0s linear;
}

.main-menu-mobile-lvl-2-3 {


}


/* ---------- Header (Main Menu, Mobile, Externe Links) ---------- */

.mobile-menu-external-link-container {
    margin-bottom: 0.8em;
}

.mobile-menu-external-link {
    font: italic normal normal 18px/25px TheSans;
    letter-spacing: 0.09px;
    color: #5E5E5D;
}

.mobile-menu-external-link:hover {
    color: var(--akwl-red);
    text-decoration: none;
}

.mobile-menu-external-link:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    content: '\f08e';
    margin-right: 0.8em;
}


/* ---------- Header (Main Menu, Mobile, Level 2 & 3) ---------- */

.mobile-menu-back-item-container {
    background-color: var(--akwl-light-red);
    border-bottom: 2px solid var(--akwl-red);
    padding: 0.5em 0.6em;
    margin-bottom: -25px;
    cursor: pointer;
}

.mobile-menu-back-item {
    color: var(--akwl-red);
    font: normal normal bold 18px/24px TheSans;
    letter-spacing: 0px;
}

.mobile-menu-back-item:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    content: '\f053';
    margin-right: 0.8em;
}

.mobile-menu-item-container {
    border-bottom: 1px solid #E9E8E8;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mobile-menu-item-container-lvl-2 {
    margin-top: 25px;
}

.mobile-menu-item-container-lvl-3 {
    padding-left: 35px;
}

.mobile-menu-item {
    font: normal normal bold 18px/24px TheSans;
    letter-spacing: 0px;
    color: #000000;
}

.mobile-menu-item-lvl-2 {
    color: var(--akwl-red);
}

.mobile-menu-item-lvl-3:hover {
    color: black;
    text-decoration: none;
}


/* ---------- Header (Main Menu, Mobile, Extra Menu) ---------- */

#uni-akwl-extra-menu-container-mobile {
    display: none !important;
    position: absolute;
    top: 60px;
    z-index: 21;
    background-color: white;
    border: 1px solid #B7B7B6;
    width: calc(100% - 30px);
}

#uni-akwl-extra-menu-container-mobile.show {
    display: block !important;
}

#uni-akwl-extra-menu-container-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ---------- Header (Main Menu, Mobile, Top Menu) ---------- */

.top_menu_mobile {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    margin: 0;
}

.mobile-top-menu-item {
    margin-bottom: 0.8rem;
}

.mobile-top-menu-link {
    font: normal normal normal 18px/25px TheSans;
    letter-spacing: 0.09px;
    color: #5E5E5D;
}
.mobile-top-menu-link:hover {
    color: var(--akwl-red);
    text-decoration: none;
}



.fill-div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}