@charset "utf-8";
/* CSS Document */

/* Theme horror vacui  */

/* alternatives Boxmodell */
/*html { 
  box-sizing: border-box; 
} 

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

html {
	background: white;
	color: #111100;	
    font: normal 1em Arial, sans-serif;   
}

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

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

/* header - Seitenkopf */

header {
  margin: 0;
  padding: 0;
}

.lightbg { 
	background-color: #F8F8FF;
	padding: 0.5em 1em;
	margin: 0.5em 0;
	hyphens: auto; 
	text-align: justify
}



/* Navigation  - zuerst untereinander. Das geht auch mit einem Raster mit EINER Spalte. Umgeschaltet wird ab 30em Breite (Zeile ...) */


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

nav a:hover, nav a:focus {
	background:#222200;
    color: white;
}

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

/* Inhalt */

a {
	color: black
}

a:hover, a:focus {
	color: #7cdfe0 ;
}


footer {
	background: black;
	color: white;
  	margin: 0;
    text-align: center;
	text-decoration: none;
	padding: 0.5em;
	/*display: grid;	
	grid-template-columns: 1fr 1fr;	 */
}

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

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


@media (min-width: 10em) { 
	body {
		display: grid;
		grid-template-columns: repeat(2, 1fr);  
	}
	nav {
		background: black;
	}
	nav ul {
		grid-template-columns: repeat(7, 1fr);  
		max-width: 40em;
		margin: 0 auto;
	}	
	
	nav a {
		margin: 0;
	}
	
	header,
	footer {
    	grid-column: 1 / 3;
  	}	
}

@media (min-width: 40em) { 
	body {
		grid-template-columns: 1fr 32em 5em 1fr;  		/* Diesmal besteht das grid aus unterschiedlich breiten Spalten  article und die beiden asides bleiben gleichbreit, der Rand erählt den überschüssigen Raum.*/
  		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;					
  	}
	

	article, table {
    	grid-column: 2 / 3;
    	grid-row: 	 2 / 4;		
  	}  	 
}

@media (min-width: 50em) { 
	body {
		grid-template-columns: 1fr 32em 15em 1fr;  		/* Diesmal besteht das grid aus unterschiedlich breiten Spalten  article und die beiden asides bleiben gleichbreit, der Rand erählt den überschüssigen Raum.*/
  		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;					
  	}
	

	article, table {
    	grid-column: 2 / 3;
    	grid-row: 	 2 / 4;		
  	}  	 
}

@media (min-width: 60em) { 
	body {
		grid-template-columns: 1fr 42em 15em 1fr;  		/* Diesmal besteht das grid aus unterschiedlich breiten Spalten  article und die beiden asides bleiben gleichbreit, der Rand erählt den überschüssigen Raum.*/
  		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;					
  	}
	

	article, table {
    	grid-column: 2 / 3;
    	grid-row: 	 2 / 4;		
  	}  	 
}

@media (min-width: 70em) { 
	body {
		grid-template-columns: 1fr 52em 15em 1fr;  		/* Diesmal besteht das grid aus unterschiedlich breiten Spalten  article und die beiden asides bleiben gleichbreit, der Rand erählt den überschüssigen Raum.*/
  		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;					
  	}
	

	article, table {
    	grid-column: 2 / 3;
    	grid-row: 	 2 / 4;		
  	}  	 
}

/* Terminkalender */

table, th, td { 
  width: 100%;
  border: 0px solid; 
  border-collapse: collapse; 
}

th, td {
	padding: .5em;
}

th {
	background: #ffebe6;
	border: 1px solid #c32e04;
	color: #c32e04;
}

td {
	border-bottom: 1px solid #c32e04;
}

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