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

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


 body {
	background: url(back/braun03.jpg ) ;
	background-size: cover ; }
	


 main {
	background: url(back/braun03.jpg ) ;
	background-size: cover ;
	color: black ;
	padding: 0.5em ; 				
	border-radius: 1.5em ; }
	
	 

	.kontakt a, .contact a, em a 	{ 
		color: saddlebrown ; }

	.kontakt a:hover, .contact a:hover, em a:hover {
		color: yellowgreen ;  }

	.kontakt a:focus, .contact a:focus, em a:focus {
		color: #C1803B ;  }


	#text a	{ 
		color: saddlebrown ; }
		
	#text a:hover	{ 
		color: yellowgreen ; }	
		
	#text a:focus	{ 
		color: saddlebrown ; }		
		



	 footer {
		background: black ;
		color: #a5682a ; 
		font-family: sans-serif ; }

	  
	footer a {
		color: #00a000  ; }

	footer a:hover  {
		background: transparent ;
		color: yellowgreen ; } 

	footer a:focus  {
		background: transparent ;
		color: darkgreen ; } 
	
	
	

.contact ul {
	list-style-type: none;
	margin: 0.5em 0;
	padding: 0; }



.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%;  }


 
 footer p span {
	text-align: left;
	 display: block; 
	 margin-left: 1em ; }
	


 #social {
	display: inline;
 }
 #social li {
	display: inline-block;
	padding: 0;
	margin: 0 0 0 .7em;
 }
 #social a {
	text-indent: 100%;
	display: block;
	width: 37px;
	height: 37px;
	margin-top: 6px;
	overflow: hidden;
	white-space: nowrap; }
	
 #social a, #social a:hover {
	transition: none;
}
	
	#social a.fb {
		background: url("../img/facebook-49x50.png") ;
		background-position: -7px 0; }
		
		
	#social a.instagram {
		background: url("../img/instagram-38x38.png") ;
		background-position: 0px 0;  }
		
		
	#social a.twitter	{
		background: url("../img/twitter-x-42.png") ; 
		background-position: -3px 0; }

		
	#social a.bluesky	{
		background: url("../img/bluesky-45x40.png") ; 			
		background-position: -3px 0; }						
		
		
		
	#social a:hover, 
	#social a:focus {
	box-shadow:0 0 10px rgba(0,191,255,0.9); }

		
		

  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.5em;  	
		width: 8em;
		color: #bd9016 ;	
		text-decoration: none;
		font-weight: bold;  }

	#navigation a[aria-current=page]{
		color: #de621f ; 
		background: transparent ; }

	#navigation a:hover {
		background: #312160 ;
		color: lightyellow ; }
	
	#navigation a:focus {
		color: #9d6736 ; 
		background: transparent ; }
	




body	{
  margin: 0;	
  padding: 0;
}

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

main {
	max-width: 77em;		
	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 ;  }