@charset "utf-8";


/* Grundlayout für SELFHTML-Beispiele */


	html {
         background: url(../img/skye.jpg) ;			
         background-size: cover ;
		}

	body {
		margin: 1em auto;
		max-width: 66.5em;			
		font-family: sans-serif;
		color: #333333;
		background:  ;
		}
	/*
	#logo	{
        color:  ;	
        font-size:  ;
        float:  ;
        text-align:  ;
		}
	*/
	
	h1, main, aside, main svg {
	border-radius: 0 8px 8px;
	border: 1px solid;
	padding: 1em;
	margin: 1em;
	}

	h1 {
		color: #880000 ;
		font-family: serif;
		border-color: transparent;
		text-align:  ;
		font-size: 1.9em ;
		}

	@media (max-width: 800px) {
	h1 {
		font-size: 1.6em ;
		}	}

	/*
	h1 a {
		color: #880000 ;
		font-family: serif;
		}
	*/
	
	article img {
		width: 95%;
		float: middle ;
		margin-left: 1em;
		}
	
	aside img {
		width: 100%;
		float:  ;
		margin-left: 0.5em;
		}
	

	figure {
		display: inline-block;
		width: 30%;
		margin: 0.2em;
		}
	figure img {
		width: 100%;
		}
	figure figcaption {
		font-style: italic;
		}


main {
	display: block;     /* für IE */	
	min-height: 400px;
}



/* responsives Layout */

body {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, section, aside, footer {
  border-radius: 0px 0.5em 0.5em;
  border: 1px solid;
  padding: 1em;
  margin: 1em;
  flex: 1 100%;
}

	header {
		background:  ;
		border-color: transparent ;
		display: flex;
		flex-flow: row wrap;
		}
	
header * {
  flex: 1 1 0%;
  margin: 0 1em;
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}

	header nav {
		flex: 1 1 100%;
		margin: .5em 2em;
		border-color: transparent;
		}
		
nav ul, nav li{
  margin: 0 0.5em;
  padding: 0 0.5em;
  border: 0;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type:none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
	nav a {
		display:inline-block;
		width: 95% ;				
		background: #ddbb00 ;
		color: black ;
		border: 1px solid #dfac20;
		border-radius: 1em ;
		margin: 0;
		text-decoration: none;
		text-align: center ;
		height: 1.5em ;  
		padding: 0.2em ;
		}
		
	nav a:hover {
		background-color: #aa7700 ;
		}
	nav a:focus {
		background-color: #ddbb00 ;
		}

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

	article {
		border-color: transparent ;
		}

	aside {
		border-color: transparent ;
		}


	footer {
		background: url(../img/skye.jpg) ;
		background-size: cover ;
		border-color: transparent ;
		color: white  ;
		display: flex;
		flex-flow: row wrap;
		}
		
	footer * {
	flex: 1 1 0%;
	justify-content: space-between;
		}
	
	footer p:last-child {
		text-align: right;
		}
		
	 footer a {
		color: brown ;
		}
	
	/*
	 @media (max-width: 720px) {
    aside img  {
		width: 53%;
		float: middle; } 	} 						 DIESEN bLOCK HABE ICH EINGEFÜGT   
	*/
	
		
		
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
header img {
  margin-right: 50px;
}
nav ul {
  flex-direction: row;
}
nav li {
  margin: 0 10px;
  flex: 1 1 0%;
}
article {
  order: 2;
}
#news {
  flex: 1 auto;
  order: 3;
}
aside {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
  flex: 1 auto;
  order: 4;
}
footer {
  order: 5;
}
}

/* Large screens */
@media all and (min-width: 50em) {
  article {    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 3;
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  #news {
    flex: 1 1 0%;	  
    order: 2;
    align-self: center;
    height: 12em;
  }
}

	

/* Terminkalender */

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

th, td {
	padding: .5em;
}

th {
	background: #c32e04;
	color: #ffede0;
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}