* {
  box-sizing: border-box;
}

/* Stil der Schrift */
body {
  font-family: Times, sans-serif;
  font-size: 150%;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Kopfzeile */
.header {
  background-image: url('../bilder/headertest.png'); 
  background-repeat: no-repeat;
  background-position: top;

  text-align: center;  
  height: 20vh;
  margin: 0;
  padding: 0;
}

section {
	margin-bottom: 5em;
}

/* Vergrößerung der Überschrift Typ h1 */
h1 {
  font-family: Helvetica, sans-serif;
  font-size: 40px;
}

h2 {
	font-family: Helvetica, sans serif;
}

a {
	font-family: Helvetica, sans-serif;
}

table {
	border-collape: seperate;
	border-spacing: 0.2em;
}
th,td{
	padding: 0.2em 0.5em;
	border-radius: 0.1em;
}

thead th{
	background-color: #f1f1f1
}
td{
	font-style: italic;
	text-align: right;
	box-shadow: inset 2px 4px 6px -4px rgba(0,0,0,1);
}
td:empty{
	box-shadow: none;
}
	

/* Überschriften vom Typ h2 werden sticky */
.sticky_h2{
	position: -webkit-sticky; 
	position: sticky;
	top: 64px;
	width: 100%;
	padding: 0px 20px;
	background-color: #333;
	color: white;
	z-index: 2;
}

.sticky_ul{
	position: -webkit-sticky; 
	position: sticky;
	top: 64px;
	width: 100%;
	background-color: #333;
	color: white;
	z-index: 2;
}

.sticky_ul a{
	display: block;
	color: white;
	text-align: left;
	padding: 14px 20px;
	text-decoration: none;
}

.sticky_ul a:hover{
	background-color: #ddd;
	color: black;
}
.sticky_ul a.active{
	background-color: #666;
	color: white;
}

/* Sticky Navbar - Wechsel zwischen relativ und fix, abhängig von der Scrollposition. */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 3;
}

/* Style Navbar links */
.navbar a {
  float: left;
  display: inline-block;
  color: white;
  font-size: 1.7vw;
  text-align: center;
  padding: 1vh 1vw;
  text-decoration: none;
  border-right: 2px solid #ddd;
}


/* Rechtsbündiger Link */
.navbar a.right {
  float: right;
}

/* Farbwechsel, wenn Mauszeiger auf Element */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Activer link */
.navbar a.active {
  background-color: #666;
  color: white;
}

/* Spalten-Container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Erzeuge zwei ungleich große Spalten nebeneinander */
/* Sidebar/Linke Spalte */
.side {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  background-color: #f1f1f1;
  padding: 1vh 1vw;
  font-size: 1.7vw;
  
}

/* Hauptspalte/Rechte Spalte */
.main {   
  -ms-flex: 80%; /* IE10 */
  flex: 80%;
  background-color: white;
  padding: 20px;
}

/* Fake Image - Platzhalter für Bilder */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}



figcaption {
	color: blue;
	text-align: right;
}

/* Footer */
.footer {
  padding: 20px;
  height: 20vh;
  text-align: center;
  background: white;
  background-image: url('../bilder/headertest.png'); 
  background-repeat: no-repeat;
  background-position: top;
}

/* Responsives Layout - wenn der Bildschirm kleiner als 700px breit ist, werden die beiden Spalten übereinander gestapelt 
@media screen and (max-width: 700px) {
    .sticky_h2{
	  position: static;
	  top: 0px;
  }
  .row {   
    flex-direction: column;
  }
  
  .sticky_ul{
	  top: 0px;
  }

}
*/
/* Responsives Layout - wenn der Bildschirm kleiner als 400px breit ist, werden die Links gestapelt 
@media screen and (max-width: 400px) {
     .sticky_h2{
	  position: static;
	  top: 0px;
  }
 .navbar a {
    float: none;
    width: 100%;
  }
    .sticky_ul{
	  top: 0px;
  }

}
*/
/* Grid für die Gallerie */
.column {
	float: left;
	width: 25%;
	padding: 10px;
}

/* Bilderstyle für das Grid */
.column fakeimg {
  opacity: 0.8; 
  cursor: pointer; 
}

.column fakeimg:hover {
  opacity: 1;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

.galerie {
	margin: 5em;
}

.galerie li {
	margin: 1em;
	width: 20em;
	border: 2px solid #333;
	display: inline-block;
	list-style-type: none;
		float: initial;

}



figure {
	float:right;
	padding: 0.1em;
}

img {

	max-width: 300%;
	max-height: 300%;
	}

figure img {
	padding: 0;
	margin: 0;
	width: 100%;
	/* Bild passt sich an verfügbaren Raum im li ann */
}


/* Large screens */

@media all and (min-width: 35em) {

	figure {
		padding: 0.1em;
		width: 18em;
		height: 13em;
		position: relative;
	}
	figure img {
		border: 0;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 1;
		box-shadow: 0;
		width: 18em;
		height: 13em;
		transition: all 1s;
	}
figure:focus img,
figure:hover img {
		border: 2em solid #eee;
		border-radius: 1em;
		position: absolute;
		left: -200%;
		top: -4%;
		width: 200%;
		height: 200%;
		z-index: 5;
		box-shadow: 1px 1px 5px #333;
		transition: all 1s;
	}
}

.galerie figure:focus img,
.galerie figure:hover img {
		border: 2em solid #eee;
		border-radius: 1em;
		position: absolute;
		left: -50%;
		top: -4%;
		width: 200%;
		height: 200%;
		z-index: 5;
		box-shadow: 1px 1px 5px #333;
		transition: all 1s;
	}
}