/* Styles für die Seite von M. Lowisch
. = Klasse; mit Klassen werden Werte von Eigenschaften definiert, die man im HTML-Dokument direkt einsetzen kann, z.B. <h1 class=Name der Klasse ohne Punkt">
*/
h1 {text-transform:uppercase; color:#8dae10}
body {font-family:arial; background: #999999; color: #003560;
}
table {table-layout:auto;}
h2 {
    font-size: xx-large;
    padding: 60px 0 10px 0;
    margin: 0px;
}
h3 {text-transform:uppercase;}

figcaption {font-size:10px;}

article {padding: 10px;}
aside {padding: 10px;}
footer {padding: 10px;}

/* keine Aufzählungszeichen für Listen allgemein*/
li {list-style: none;
}

/*Styles für das Navigationsmenü - siehe dazu auch: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten */
nav {
 padding: 0;
 margin: 0;
}

nav ul {
	padding: 5px;
margin: 0 auto;
display: flex;
flex-direction: column;
list-style: none;
background-color: #8dae10;
}
nav li a{
	color: white;
	font-size:12px!important;
	letter-spacing: 0.085em;
border-right: 1px solid white;
padding: .4em 0.7em;
line-height: 1.5em;	
}


/*Diese Anweisung ist für das responsive Design zuständig: sobald der Bildschirm eine Größe von 45em unterschreitet, wird die Darstellung des Menüs wieder untereinander erfolgen und die Schriftgröße auf 1em wechseln*/
@media (min-width: 45em) {
  nav ul {	
    flex-direction: row;  
  }
  nav li {
    font-size: 1em;
  }  
}
nav a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}
nav a:focus,
nav a:hover,
nav a:active {    
  text-decoration:underline;
}




/*Navigation für die Submenus*/

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
	text-align: left;
	flex-direction: column;
}
nav .submenu li { 
  display: block; 
  width: 15em;
}
nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu,
nav li:focus-within .submenu  { 
  visibility: visible;
  height: auto;
}

/*Formatierung von Absätzen in Aside*/

aside p{
	text-align: center;
}

aside a{
	text-decoration: none;
	font-weight: bold;
}

/*Hier kommen Klasse*/
.rubgruen {color:#8dae10;}
.arial {font-family:arial;}
.rubblau {color: #003560;}



/*IDs werden zur Definition von nur einmal vorkommenden Elementen benutzt (guter Stil) */

/* Farbverlauf im Header */
#gradient {background-image: linear-gradient(white, #e7e7e7); padding-top: 10px; padding-left: 10px; padding-bottom:1px;}

#blue {color:blue;}

/* Kasten, in dem alle Inhalte drin stehen */
#wrapper {

    margin: 0 auto;
    max-width: 62em;
    background: #ffffff;
    background-repeat: repeat-y;

}

/* Navigation rechts oben */
#metanavigation {
	text-align: right;
	padding-top: 8px;
	padding-right: 20px;
}

#metanavigation a {
 	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
    padding: 2em 0.5em 0 0.5em;
    color: #5c5c5c;
    font-size: 0.689em;
}
#metanavigation a:hover {

	text-decoration: underline;
}


#wo_bin_ich {
    font-size: 0.689em;
	padding-left: 10px;
	padding-top: 8px;
	text-decoration: none;
	color: #5c5c5c;
}

/* Links im Bereich wo bin ich sind nicht unterstrichen und erscheinen als Links beim Überfahren mit der Maus */
#wo_bin_ich a {
	text-decoration: none;
	color: #5c5c5c;
}
#wo_bin_ich  a:hover {
	text-decoration: underline;
}

#wo_bin_ich  a:visited {
	color: #5c5c5c;
}


/* Styles für die Galerie */
/* Ausrichtung und Position */
#gallery {
  position: relative;
}

#gallery figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
}

#gallery figure:last-of-type {
  position: relative;
}

#gallery figcaption {
 position: relative;
  left: 1em;
  bottom: 0.5em;
  z-index: 2;
}

/* Animation */
#gallery figure {
  animation: wechseln 27s infinite;
}

/* Animationsschritte */
@keyframes wechseln {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}

/* Taktung der Animation: animation startet beim zweiten Bild (nth-of-type) */
#gallery figure:nth-of-type(2) {
  animation-delay: 9s;
  opacity: 0;
}

#gallery figure:nth-of-type(3) {
  animation-delay: 18s;
  opacity: 0;
}