.main-nav {
    --border-width: 1px;
}



.page > .header,
.mobile-header,
.mm-menu
{

    --gradient-1: linear-gradient(180deg, var(--theme-gradient-1) 0%, var(--theme-gradient-2) 50%, var(--theme-gradient-3) 50%, var(--theme-gradient-4) 100%);
    --gradient-2: linear-gradient(180deg, var(--theme-gradient-4) 0%, var(--theme-gradient-2) 50%, var(--theme-gradient-3) 50%, var(--theme-gradient-1) 100%);
}





.main-nav-container {height: 115px; background: #3a3a3a; display: flex; align-items: center; width: 100%; margin: 40px 0 58px 0; pointer-events: all;}
.mobile-nav-container {display: none;height: 70px; justify-content: space-between; align-items: center; padding: 0 15px; background: var(--gradient-1); width: 100%;pointer-events: all; z-index: 1000;}


.main-nav { height: 90px; background: var(--gradient-1); width: 100%;}

.main-nav .main-ul {margin: 0; padding: 0; list-style: none;  display: flex; height: 100%; justify-content: flex-end; align-items: center;}
.main-nav .main-ul > li {height: 100%; position: relative;}
.main-nav .main-ul > li:hover .sub {display: block;}

.main-nav .main-ul .sub {width: 300px;  position: absolute; top: 90px ;left: 0; color: var(--theme-text-color); font-family: var(--font-1);display: none; box-shadow: 0 0 9px 2px rgba(0,0,0,0.1);}
.main-nav .main-ul .sub a {text-decoration: none;}
.main-nav .main-ul .sub .sub-item {width: 100%; height: 40px;  position: relative;}
.main-nav .main-ul .sub .sub-item .bg {    background: linear-gradient(180deg, var(--theme-gradient-1) 0%, var(--theme-gradient-4) 100%);width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.main-nav .main-ul .sub .sub-item .lbl {    width: 100%;height: 100%;position: absolute;top: 0;left: 0; z-index: 1;display: flex; align-items: center; padding: 0 20px;}
.main-nav .main-ul .sub .sub-item:hover .bg {filter: brightness(0.9);}
.main-nav .main-ul .sub > ul {margin: 0; padding: 0; list-style: none;}


.main-nav .item { width: 170px; height: 100%; position: relative; background: linear-gradient(90deg, var(--theme-gradient-1) 50%, var(--theme-gradient-4) 50%); font-family: var(--font-1); font-weight: bold; color: var(--theme-text-color); font-size: 18px; user-select: none; cursor: pointer;}
.main-nav .item.small { width: 130px; }
.main-nav .item > div { width: calc(100% - (var(--border-width) * 2)); height: 100%; position: absolute; top:0; left: var(--border-width); background: var(--gradient-1); display: flex; justify-content: center; align-items: center; text-align: center; }
.main-nav .item.active > div { background: var(--gradient-2); }
.main-nav li:hover .item > div { background: var(--gradient-2); }


.main-nav .logo {width: 180px; height: 180px; min-width: 180px; min-height: 180px; position: absolute;top: -45px; left:0; display: flex; justify-content: center; align-items: center;}
.main-nav .logo img {box-shadow: 6px 6px 10px 2px rgba(0,0,0,0.1); border-radius: 100%; position: relative; top:0px;}


.main-nav .ul-box {display: flex; justify-content: flex-start; padding-left: 167px; height: 100%;}
.main-nav .ul-box > div {  background: linear-gradient(90deg, var(--theme-gradient-4) 50%, var(--theme-gradient-1) 50%);width: 942px;display: flex;justify-content: center;}


/* AB HIER CODE FÜR "LINKS KEIN RAND" */
.main-nav .ul-box > div { width: fit-content;display: flex;justify-content: flex-start;}
.main-nav .item { width: 147px; }
.main-nav .item.big { width: 150px; }
.main-nav .item.small { width: 130px; }
.main-nav .item:first-child { }
.main-nav .logo {z-index: 1;}