@charset "utf-8";
/* CSS Document by buntsucht 2025 */

.navi::after, .navi::before {content: ""; display: table;}
.navi::after {clear: both;}
.navi {display: table; position: absolute; bottom: 20px; right: 160px; z-index: 10; font-family: "Roboto Condensed", sans-serif; transition: all .5s ease;}
.navi ul {list-style-type: none; padding: 0; margin: 0;}
.navi ul li {float: left; padding: 10px 18px; background-color: transparent; position: relative; color: var(--black); font-size: 16px; margin-left: 5px; border: 1px rgba(29,29,27,0.6) solid;}
.navi ul li:hover {background-color: var(--blue); color: #ffffff; border-color: var(--blue);}
.navi ul li:hover a {color: #ffffff;}
.navi ul li:hover ul li a {color: #fff;}
.navi ul li:hover ul li:hover a {color: #ffffff;}
.navi ul li a {color: var(--black); text-decoration: none; font-size: 16px;}
.navi ul li a:hover {color: #ffffff;}
.navi ul li ul li {float: none; margin-left: 0; position: relative; font-size: 16px; background-color: var(--black); border-bottom: 1px #434342 solid; border-radius: 0!important; padding: 14px 18px;}
.navi ul li ul li a {font-size: 16px; font-weight: 300;}
.navi ul li ul, .navi ul li ul li ul {display: none;}
.navi ul li:hover ul {display: block; position: absolute; top: 38px; left: 0px; border-top: 14px transparent solid; width: 260px;}
.navi ul li:hover ul li ul {display: none;}
.navi ul li ul li:hover ul {display: block; position: absolute; top: 0; left: 100%; border-left: 4px transparent solid; border-top: 0;}

.navi .parent::after {font-family: 'Font Awesome 5 Free'; content: "\f107"; margin-left: 5px; font-weight: bold;}
.navi ul li ul li:hover {background-color: var(--blue); color: #ffffff;}
.navi ul li.active {background-color: var(--blue); border-color: var(--blue);}
.navi ul li.active a {color: #ffffff;}
.navi .active a, .navi .active {color: #ffffff;}
.navi ul li.current a {color: #ffffff!important;}

.mobil-nav {width: 41px; height: 41px; background-color: var(--blue); color: var(--white); position: absolute; right: 130px; bottom: 20px; text-align: center; font-size: 16px; box-sizing: border-box; cursor: pointer; display: none; padding: 11px 0;  transition: all .5s ease;}


.mo-navi-main {width: 100%; height: 100%; max-width: 400px; position: fixed; top: 0; right: -100%; background-color: var(--blue); z-index: 222222; transition: all .3s ease;}
.mo-navi-closer {position: absolute; top: 20px; right: 30px; color: var(--white); font-size: 26px; cursor: pointer;}
.mo-navi-inner {position: absolute; top: 46px; left: 30px; width: calc(100% - 60px); height: calc(100% - 46px); overflow-x: hidden;}
.mo-navi {}
.mo-navi ul {list-style-type: none; padding: 0; margin: 0;}
.mo-navi ul li {font-size: 18px; color: var(--white); line-height: 26px; font-weight: 600; padding: 8px 0;}
.mo-navi ul li a {font-size: 18px; color: var(--white); text-decoration: none; font-weight: 600;}
.mo-navi .parent span::after {font-family: 'Font Awesome 5 Free'; content: "\f107"; margin-left: 5px; font-weight: bold;}
.mo-navi ul li ul {margin: 10px 0 0 20px;}
.mo-navi ul li ul li {position: relative; border-top: 1px rgba(255,255,255,0.2) solid;}
.mo-navi ul li ul li:last-child {border-bottom: 1px rgba(255,255,255,0.2) solid;}
/*.mo-navi ul li ul li::before {font-family: 'Font Awesome 5 Free'; content: "\f30b"; font-weight: bold; font-size: 12px; position: absolute; top: 1.5px; left: -15px;}*/
.mo-navi ul li ul li a {font-size: 17px; font-weight: 500;}

@media screen and (max-width: 970px){
.navi {display: none;}
.mobil-nav {display: block;}
}
@media screen and (max-width: 540px){
.mobil-nav {width: 34px; height: 34px; right: 98px; padding: 8px 0;}
}