html { 
  box-sizing: border-box; 
  padding: 0;
  margin: 0;
} 

*, ::before, ::after { 
  box-sizing: inherit; 
} 


 body {
	background: url(hintergrund-2.jpeg) ;
	background-size: cover ; }
	

 main {
	background: url(hint-2.jpg)  ;
	background-size: cover ;
	color: black ;
	padding: 0.8em ; 				
	border-radius: 1em ; }
	
	
	
	  
	.links {
		float:left;
		margin: 0 10px 10px 0; }
	

	.rechts {
		float:right;
		margin: 0 0 10px 10px;
		}

	section > img {
		width: 100%;  }
	

	section p > img {
		width: 50%;  }


	

  nav#navigation{ }

  #navigation ul {
	padding: 0 ;
	margin: 0 ; }

  #navigation li {
    list-style-type: none;
	display: inline-block;  }
	
  #navigation a {
	display: block;
	text-align: center;
	padding: 0.6em;
	width: 7em;
	color: #bd9016 ;	
	text-decoration: none;
    font-weight: bold;  }

 
  #navigation a:hover {
	background: #312160 ;
	color: lightyellow ; }
	
	


body	{
  margin: 0;	
  padding: 0;
}

header {
	background: black ;
	background-size: cover ;
	font-size:  ;
	text-align: center ;
}

main {
	max-width: 80em;
	margin: 3em auto;		
}



@media only screen and (min-width: 40em) {
header {
	display: grid;
	grid-template-columns: 1fr [main-links] minmax(10em, 75em) [main-rechts] 1fr;  }
	

footer {
	display: grid;
	grid-template-columns: 1fr [main-links] repeat(3, minmax(10em, 25em)) [main-rechts] 1fr;
	grid-gap: 1em;
}

#navigation {
	grid-column-start: main-links;
	grid-column-end: main-rechts;	
}

main {
  display: grid;
  grid-template-columns: 1fr [main-links] minmax(10em, 75em) [main-rechts] 1fr;
  grid-template-rows: min-content [main-oben] 1fr [main-unten] min-content;	
  grid-gap: 1em;
}
	
header {
    position: -webkit-sticky; 
    position: sticky;
    top: 0; 
	z-index: 9;
}

main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;			
}

main  h1,	
.carousel {
	grid-column: 1 / 4 ;
	display: block ; }
	
	
.friends {
	grid-column: 2 / 3;
}
}


@media only screen and (min-width: 40em) {
main	{
	grid-template-columns: repeat(3, 1fr);
}
	
main, .carousel     {
	grid-column: 1 / 4 ;  }