/* ----------------------------------- NAVIGATION ----------------------------------- */

/* MAIN-NAVIGATION */
body.navi_line .navi_wrapper {box-shadow: 0px 2px 5px #ccc;} 	



.navi_wrapper { background-color: #FFF; transition: box-shadow 1s; position: fixed; height: 100px; overflow: hidden; z-index: 2000; width: 100%; top: 0px; overflow: visible;}
.navi_wrapper.onScroll {box-shadow: 0px 2px 5px #ccc;}
.make_shadow .navi_wrapper {box-shadow: 0px 2px 5px #ccc;}

.navi {position: relative; width: 93%; left: 3.5%; right: 3.5%; margin-right: auto;  height: 90px; border: 0px solid red; display: grid; grid-template-columns: 230px auto 50px; grid-template-rows: 45px 45px;}

.navi_logo {position: relative; top: 26px;}
.navi_logo img {width: 220px; height: auto;}
		
.navi_minor ul li a, .navi_minor ul li a:active, .navi_minor ul li a:visited {font-family: 'Regular'; font-weight: normal; color: rgba(var(--grey100)); text-decoration: none;}
		
.navi_minor {background-color: white; grid-column: 2; grid-row: 1; text-align: right; align-self: end; padding-right: 10px;} 
.navi_minor ul li {display: inline-block; margin-left: 20px;}
.navi_minor ul li, .navi_minor ul li a {font-family: "Bold"; font-weight: normal; font-size: 15px;}
.navi_minor ul li:hover, .navi_minor ul li:hover a {color: rgb(var(--pColor));}
.navi_minor ul li.active a { color: rgb(var(--pColor));}

.navi_major {background-color: white; grid-column: 2; grid-row: 2; padding-top: 15px;}
.navi_major ul li {display: inline-block; margin-left: 0px; transition: 0.5s;}
.navi_major ul li:hover {color: rgb(var(--pColor));}

.navi_major ul li, .navi_major ul li a  {font-size: var(--baseFontSize); }

.navi_major ul li a, .navi_major ul li a:active, .navi_major ul li a:visited {font-family: 'Regular'; font-weight: normal; color: rgba(var(--grey100)); text-decoration: none;}

.navi_major ul li.active a {font-family: "Regular"; font-weight: normal; color: rgb(var(--pColor));}
.navi_major ul li a:hover {text-decoration: none; font-family: "Regular"; font-weight: normal; color: rgb(var(--pColor)); }
.navi_major ul li.active a:hover {text-decoration: none; }
.navi_major ul li:hover i {transform: rotate(-180deg); color: var(--pColor);}
.navi_major ul li.desktop_hide {display: none;}
.navi_major ul li.active ul li a {font-family: "Regular"; font-weight: normal; color: rgb(var(--grey100));}
.navi_major ul li ul li {display: block;}

/* NEU: Language in Header */
.language { grid-column-start: 2; grid-column-end: 4; grid-row: 2; align-self: center; border: 0px solid red; justify-self: end; align-items: center; overflow: hidden; box-sizing: border-box; position: relative; transition: 1s; height: 30px; display: grid; grid-template-columns: 0px 30px; gap: 0px; grid-template-rows: 30px; align-content: center; justify-content: start; background-color: rgba(var(--grey5)); border-radius: 100px; z-index: 500000;}
.language img.language-icon {width: 15px; height: 15px; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; line-height: 0px;transition: 0.5s;}
.language .flag-wrapper {grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 30px 30px 10px; gap: 20px; align-self: center; justify-self: end;}
.language .flag-wrapper a, .language .flag-wrapper img {line-height: 0px;}

.language .flag-wrapper.lang0 a:nth-child(1) {opacity: 0.5; filter: grayscale(100%);}
.language .flag-wrapper.lang1 a:nth-child(2) {opacity: 0.5; filter: grayscale(100%);}

.language-open {height: 30px; grid-template-columns: 470px 30px; border-radius: 30px; background-color: #FFF;}

/* SUCHE IN HEADER */
.search { grid-column-start: 2; grid-column-end: 4; grid-row: 1; align-self: center; border: 0px solid red; justify-self: end; align-items: center; overflow: hidden; box-sizing: border-box; position: relative; transition: 1s; height: 30px; display: grid; grid-template-columns: 0px 30px; gap: 0px; grid-template-rows: 30px; align-content: center; justify-content: start; background-color: rgba(var(--grey5)); border-radius: 100px; z-index: 500000;}
.search img.searchbox-icon {width: 15px; height: 15px; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; line-height: 0px;transition: 0.5s;}
.search.searchbox-open img.searchbox-icon {opacity:0;}
.search form {grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-self: center; justify-self: end;}
.search form input { height: 40px; padding-left: 20px;  border: 1px solid rgba(var(--grey10)); border-left: 10px solid rgba(var(--grey10)); background-color: rgb(249, 249, 249);
	border-radius: 10px; width: 100%; font-size: var(--baseFontSize); box-sizing: border-box; font-family: "Regular";}
.search form button {width: auto; height: 30px; padding: 6px 5px 6px 13px; margin-right: 10px; align-self: center;}
.search form button:after {font-family: "comtac"; content: "\003E"; padding-left: 0px; }
.search form button:hover:after {transform: none;}
.searchbox-open {height: 40px; grid-template-columns: 470px 30px; border-radius: 30px; background-color: #FFF;}

@media only screen and (max-width: 767px) {
	.navi_wrapper { box-shadow: 0px 2px 5px #ccc; height: 70px;}
	.navi_wrapper.onScroll {}
	.navi {position: relative; width: 100%; left: 0; right: 0; margin-right: auto;  height: auto; border: 0px solid red; display: grid; grid-template-columns: 100%; grid-template-rows: 1fr; grid-auto-rows: fit-content(20000px);}	
	.navi .background_form {display: none;}
	.navi .navi_logo {grid-row: 1; grid-column: 1; top: 0px; padding: 20px 20px 0px 20px; height: 70px; box-sizing: border-box;}
	.navi .navi_logo img {width: 130px;}
	.navi .navi_major {grid-row: 2; grid-column: 1; background-color: rgba(var(--grey5)); border: 0px solid red; padding-top: 0px; }
	.navi_major ul li {display: block;}
	.navi .navi_minor {display: none;}
	.navi .navi_major ul li.desktop_hide {display: block;}
	.navi .search {display: none;}
	.navi .navi_major .main-menu-btn {position: fixed; top: 20px; right: 20px;}
	.navi .container {display: none;}
	.sm-clean a .sub-arrow {right: 20px;}
	
	.language { grid-row: 1; grid-column: 1; margin-right: 60px;}
	.language-open {grid-template-columns: 120px 30px;}
	.language .flag-wrapper {grid-template-columns: 30px 30px 0px; gap: 15px; }


	
}