@charset "utf-8";

html { 
  box-sizing: border-box; 
} 

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

html {
	background: url(../img-background/wust.jpg) ;
    background-size: cover ;
	color: black ;	
    font: normal 1em Arial, sans-serif  ;  
}

body {
  margin: 0 auto;
  padding: 0;
}

body > * {
  padding: 1em;
  margin: 1em 0;
}



header {
  margin: 0;
  padding: 0;
}



nav {
}

nav ul {
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr;  
}

nav a {
	display: block;	
	background: black;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 0.5em;
	margin: 0.5em ;
	margin-right: 2.85em ; 
}

nav a:hover {
	background: #0d3558 ;
}

nav a[aria-current=page]{
	font-weight: bold ;
	color: gold ;
}




#styleswitcher ul {
  list-style-type: none ;
}

footer {
	background: black;
	color: white;
  	margin: 0;
	display: grid;	
	grid-template-columns: 1fr 1fr;  	
}

footer p:last-child {
	text-align: right;
}

a[href^="tel"] { white-space: nowrap; }


@media (min-width: 30em) { 
	body {
		display: grid;
		grid-template-columns: repeat(2, 1fr);  
	}
	
	nav {
		background: black;
	}
	
	nav ul {
		grid-template-columns: repeat(4, 1fr);  
		max-width: 40em;
		margin: 0 auto;		
		 }
		
	
	nav a {
		margin: 0;
	}
	
	
	header,
	article,
	footer {
    	grid-column: 1 / 3;
  	}
	
	.galerie {
		display: grid;
		grid-template-columns: repeat(2, 1fr);  
		grid-gap: 1em;	
	}
	
	.galerie > h2,
	.galerie > p {
		grid-column: 1 / 3;
	}
	
	.galerie > figure {
		margin: 0;
		padding: 0;
	}
	
	.galerie img {
		width: 100%;
	}	
}

@media (min-width: 40em) { 
	body {
		grid-template-columns: 1fr 32em 15em 1fr;  		
  		grid-template-rows: 2em auto 1fr 3em;
		grid-gap: 1em;
  		min-height: 100vh;		
	}
	
	header,
	footer {
    	grid-column: 1 / 5;
  	}	
	
	aside {
    	grid-column: 3 / 4;
    	grid-row:    2 / 3;					
  	}
	

	
	
	#styleswitcher {
	  	grid-column: 3 / 4;
	  	grid-row:    3 / 4;					
	}  

	article, table {
    	grid-column: 2 / 3;
    	grid-row: 	 2 / 4;		
  	}  	
	
	.galerie > h2,
	.galerie > p {
		grid-column: 1 / 4;
	}
	
	.galerie {
		grid-template-columns: repeat(3, 1fr);  
	}
	



	caption {
		caption-side: bottom;
		padding-top: 4em;
		font-size: .75em;  }