/* CSS Melotte*/
*{
	box-sizing:border-box;
	font-family:Verdana, sans-serif;
	font-color:black;
	margin:0;
	padding:0;
	font-size:1em;
	
	scroll-margin-top:34vw;
	
	
}
*, *::bevore, *::after {
	box-sizing: inherit ;
}

h1{font-size:2em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}

/*scroll-padding-top: 30vw;*/
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	
	
	/*background-image:url(img/Berg4.jpg);
	background-repeat:no-repeat;
	background-position:right top;
	background-size:100% auto;
	background-attachment:fixed;*/
	
}



.grid {
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	grid-template-columns:5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}

.header{
	grid-column:1 / 21;
	grid-row:1 / 2;
	position:-webkit-sticky;
	position:sticky;
	top:-0px;
	background-color:orange;
	background:linear-gradient(to right, white 20%, orange 70%);
	height:30vw;
	/*max-height:15em;*/
	z-index:3;

	
}

	.melottelogo{
		/*width:60%;*/
		height:54%;
		/*max-width:40em;*/
		
	}
	.melottelogo{
		box-shadow:0px 0px 0px 0px black;
		transition:box-shadow 1s ease-in-out;
	}
	.melottelogo-a :hover{
		box-shadow:0px 0px 20px 9px black;
		transition:box-shadow 1s ease-in-out;
	}
	.titelbild{
		/*width:40%;*/
		/*max-width:15em;*/
		height:120%;
		float:right;
		border-radius:0% 0px 0% 80%;
		box-shadow:0px 0px 0px 0px black;
		transition:box-shadow 1s ease-in-out;
		
		
	}
	
	.titelbild-a :hover{
		box-shadow:0px 0px 20px 4px black;
		transition:box-shadow 1s ease-in-out;
	}
	.div-menue-search{
		height:11vw;    /*9vw*/
		max-height:8em; /*4em*/
	}
	.menueButton{
		z-index:2;
		background-color:orange;
		 border: none;
		 border-radius:10px;
		color: white;
		padding: 0vw 3vw; /*0vw 1vw*/
		height:100%;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 3vw;
		margin: 0px 2%;
		cursor: pointer;
	}
	.search{
		/*height:6vw;*/
		height:100%;
		width:35vw; /*40vw*/
		margin:0;
		position:relative;
		top:0.7vw;    /*0.4vw*/
		font-size: 5vw; /*4vw*/
		padding:0;
		
	}
	
	.keinErgebnis{
		color:red;
		margin-left:17vw;
		font-size: 3vw;
	}
	.listeSuchwörter{
		width:70%;
		/*top:-5vw;*/
		max-height:20em;
		margin-left: 15vw;
		/*position:relative;*/
		position:sticky;
		overflow:auto;
		background:linear-gradient(to right, white 20%, gray 70%);
		box-shadow:  0px 0px 20px 10px gray ;
		
	}
	.suwo{
		border:1px solid white;
		
	}
	.suchwort{
		display:block;
		text-decoration:none;
		color:black;
		font-size: 200%;
		padding:1em 0.5em;
	}
	.suwo a:hover{
		color:#da4a00;
		
	}
	
	

.nav{
	grid-column:1 / 21;
	grid-row:2 / 3;
	
	position:fixed;
	
	
	left:-100%;
	width:100%;
	/*top:30vw;*/
	
	height:100%;
	
	transition:all 0.4s ease-in-out;
	z-index:2;
	
	/*overflow-x:hidden;
	overflow-y: scroll;*/
	overflow:auto;
}

	
	
	
	.div-nav{
		height:30vw;
	/*max-height:15em;*/
	}

	.nav-ul{
		
		/*background-color:orange;*/
	background:linear-gradient(to right, white 20%, gray 70%);
		margin:0;
		/*display:none;*/
		
		
	}
	.nav-li{
		list-style:none;
		margin-left:0;
		border:1px solid #efefef;
	}
	.nav-li-a{
		/*padding:0.6em 2rem;*/
		padding:1em 0.5em;
		display:block;
		font-size: 200%;
		color:black;
		
	}
	.nav-ul a:link{
		text-decoration:none;
		color:black;
	}
	/*.nav-ul a:link , .nav-ul a:visited{
		color:black;
	}*/
	.nav-ul a:hover, /*.nav-ul a:focus,*/ .nav-ul a:active {
		/*background-color:#000;*/
		/*color:#efefef;*/
		
		
		
	}
	.nav-ul a:hover{
		color:#da4a00;
		
	}
	.nav-active{
		color:#000;
		background-color:#fff;
	}
	
		.nav-ul-ul1{
			/*display:none;*/
			box-shadow: inset 8px 8px 20px 4px black , inset -1px -1px 0px 4px black ;
			
		}
		.nav-ul-ul2{
			/*display:none;*/
			box-shadow: inset 8px 8px 20px 4px black , inset -1px -1px 0px 4px black ;
			
		}
		
.article_1 {
	text-align:center;
	
}	

.article_2 {
	text-align:left;
	padding:0 5px;
}
.article_3{
	/*text-align:center;*/
	padding:0 5px;
	margin: 0 0 5em 0;
	
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	grid-template-columns:50% 50% ;
}
.article_3 h3 {
	text-align:center;
	grid-column:1 / 3;
	grid-row:1 / 2;
	
	margin:0 0 3em 0;
}
/*.article_3 img {
	grid-column:1 / 3;
	grid-row:2 / 3;
	
	width:50%;
	margin: 0 25% 3em 25%;
}*/

.article_3 ul {
	grid-column:1 / 3;
	grid-row:5 / 6;
	
	margin: 0 25% 
}
.article_3 li {
	
	
	margin:0 0 1em 0;
}
.article_img_1{
	grid-column:1 / 3;
	grid-row:2 / 3;
	
	width:50%;
	margin: 0 25% 1em 25%;
}

.article_img_2{
	grid-column:1 / 3;
	grid-row:3 / 4;
	
	width:50%;
	margin:0 0 1em 25%;
	/*margin: 0 25% 3em 25%;*/
}
.article_img_3{
	grid-column:1 / 3;
	grid-row:4 / 5;
	
	width:50%;
	margin:0 0 1em 25%;
	/*margin: 0 25% 3em 25%;*/
}

.content{
	grid-column:1 / 21;
	grid-row:3 / 4;
	
	padding:4em 0 0 0;
}
.contact{
	text-align:center;
}
/*h1{
	font-size:2em;
	padding:1em 0 1em 0;
}*/


	.bild1{
		width:100%;
	}
	.bild2{
		width:60%;
	}

.braeuerprospekt_1{
			padding:1em 0.5em;
		display:block;
		font-size: 100%;
		color:black;
		text-decoration:none;
		background-color:green;
		border:4px solid green;
		margin:0 10%;
		text-align:center;
		transition:box-shadow 1s ease-in-out;
}
.braeuerprospekt_1 a:link{
	text-decoration:none;
		color:black;
}
.braeuerprospekt_1:hover{
	background-color:white;
	
}

.braeuerprospekt{
	width:80%;
	height:100vh;
	margin:0 0 0 10%;
	display:none;
}




.aside{
	grid-column:1 / 21;
	grid-row:4 / 5;
	
	/*background-color:#ffc966;*/
	padding:0 0 4em 0;
}
.news{
	padding: 2em 5px 0 5px;
	text-align:center;
	font-size:2em;
}

.footer{
	grid-column:1 / 21;
	grid-row:5 / 6;
	
	margin-top:10em;
	background:darkgrey;
	z-index:1;
}
.gridFooter {
	display: grid;
	grid-template-rows: auto auto auto auto auto auto;
	grid-template-columns:20% 20% 20% 20% 20% ;
	
	padding:2em 2em;
}
.adressFooter{
	grid-column:1 / 5;
	grid-row:1 / 1;
	
	padding:0em 0em 3em 0em;
}
.adressFooter p {
	font-size: 1.5em;
}

.sitemap-unternehmen{
	grid-column:1 / 6;
	grid-row:2 / 3;
}
.sitemap-kontaktFooter{
	grid-column:1 / 6;
	grid-row:3 / 4;
}
.sitmap-melktechnik{
	grid-column:1 / 6;
	grid-row:4 / 5;
}
.sitemap-stalltechnik{
	grid-column:1 / 6;
	grid-row:5 / 6;
}
.sitemap-onlineshop{
	grid-column:1 / 6;
	grid-row:6 / 7;
}
.sitemap-unternehmen, .sitemap-kontaktFooter, .sitmap-melktechnik, .sitemap-stalltechnik, .sitemap-onlineshop {
	margin:2em 0em 0em 0em;
}
.sidemap-titel{
	/*border:1px solid white;*/
	margin:0em 1em 0em 0em;
	padding:0em 1em 0.3em 0em ;
	font-size: 2em;
}
.sitemap-link{
	text-decoration:none;
	color:black;
	display:block;
	padding:0.2em 0em;
}
.sitemap-link:hover{
	color:#da4a00;
}










@media screen and (min-width: 70em){
	
	*{
		scroll-margin-top:32vw;
	}
	
	
	
	
	.listeSuchwörter{
		width:50%;
		top:-5vw;
		max-height:20em;
		margin-left: 15vw;
		position:relative;
		overflow:auto;
	}
	.suchwort{
		display:block;
		text-decoration:none;
		color:black;
		font-size: 150%;
		padding:1em 0.5em;
	}
	.nav{
		/*top:15em;*/
		
	}
	.content{
		grid-column:1 / 14;
		grid-row:3 / 5;
		
		padding:1em 5% 1em 5%;
	}
	
	
	.article_3{
	/*text-align:center;*/
	padding:0 5px;
	margin: 0 0 5em 0;
	
	display: grid;
	grid-template-rows: auto auto auto ;
	grid-template-columns:30% 70% ;
	}
	
	.article_3 h3 {
	text-align:left;
	grid-column:2 / 3;
	grid-row:1 / 2;
	
	margin:0 0 1em 2em;
	}
	/*.article_3 img {
	grid-column:1 / 2;
	grid-row:1 / 4;
	
	width:100%;
	margin: 0;
	}*/

	.article_3 ul {
	grid-column:2 / 3;
	grid-row:1 / 2;
	
	margin: 4em 0 0 0 ; 
	}
	.article_3 li {
	margin:0 0 1em 3em;
	}
	
	.article_img_1{
		grid-column:1 / 2;
		grid-row:1 / 2;
		
		width:100%;
		margin: 0 0 1em 0 ;
	}

	.article_img_2{
		grid-column:1 / 2;
		grid-row:2 / 3;
		
		width:100%;
		margin:0 0 1em 0;
		/*margin: 0 25% 3em 25%;*/
	}
	.article_img_3{
		grid-column:1 / 2;
		grid-row:3 / 4;
		
		width:100%;
		margin:0 0 1em 0;
		/*margin: 0 25% 3em 25%;*/
	}	
	
	.braeuerprospekt{
	width:100%;
	height:100vh;
	margin:0 0 0 0%;
}
	
	.aside {
		grid-column:14 / 21;
		grid-row:3 / 5;
		
		padding:1em 5% 0% 0% ;
	}
	
	
	
	
	.sitemap-unternehmen{
		grid-column:1 / 3;
		grid-row:2 / 3;
	}
	.sitemap-kontaktFooter{
		grid-column:3 / 6;
		grid-row:2 / 3;
	}
	.sitmap-melktechnik{
		grid-column:1 / 3;
		grid-row:3 / 4;
	}
	.sitemap-stalltechnik{
		grid-column:3 / 6;
		grid-row:3 / 4;
	}
	.sitemap-onlineshop{
		grid-column:1 / 3;
		grid-row:4 / 7;
	}
	
	
}


@media screen and (min-width: 90em){
	
	*{
		scroll-margin-top:14em;
	}
	
	
	
	.melottelogo{
		/*width:60%;*/
		height:70%; /*54*/
		/*max-width:40em;*/
		
	}
	
	.titelbild{
		height:160%; /*160*/
	}
	.header{
		max-height:12em;
	}
	.div-menue-search{
		height:9vw;
		max-height:2em;
		margin:-0em 0 0 0;
	}
	.menueButton{
		display:none;
	}
	.search{
		max-width: 20vw;
		font-size: 1.5em;
		margin-left:1vw;
		padding:0;
		
	}
	.keinErgebnis{
		color:red;
		margin:1em 0 0 1vw;
		font-size: 1em;
	}
	.listeSuchwörter{
		width:20%;
		top:2vw;
		max-height:20em;
		margin-left: 2vw;
		position:relative;
		overflow:auto;
	}
	.suchwort{
		display:block;
		text-decoration:none;
		color:black;
		font-size: 100%;
		padding:0,6em 2em;
	}
	.nav{
		grid-column:1 / 5;
		grid-row:2 / 5;
		
		
		position:fixed;
		width:20%;
		
		left:0%;
		z-index:1;

		
		/*position:-webkit-sticky;
		position:sticky;
		top:40em;*/
	}
	
	.div-nav{
		
	max-height:15em;
	}
	.nav-li-a{
		padding:0.6em 2em;
		display:block;
		font-size: 100%;
	}
	.content{
		grid-column:5 / 17;
		grid-row:2 / 5;
	}
	
	.braeuerprospekt_1{		
		display:none;
	}
	.braeuerprospekt{		
		display:block;	
	}
	
	
	
	.aside {
		grid-column:17 / 21;
		grid-row:2 / 5;
		
		margin-top:4em;
	}
	.footer{
		z-index:2;
	}
	
	
	
	.sitemap-unternehmen{
		grid-column:1 / 2;
		grid-row:2 / 7;
	}
	.sitemap-kontaktFooter{
		grid-column:2 / 3;
		grid-row:2 / 7;
	}
	.sitmap-melktechnik{
		grid-column:3 / 4;
		grid-row:2 / 7;
	}
	.sitemap-stalltechnik{
		grid-column:4 / 5;
		grid-row:2 / 7;
	}
	.sitemap-onlineshop{
		grid-column:5 / 6;
		grid-row:2 / 7;
	}
}