/* general Style */

body {
    margin: 10px auto;
    font-family: Verdana, sans-serif, Times, Arial;
    color: #2D2D2D;
    background: #ECECEC;    /* Hintergrund hellgrau */
}
h1 {
    font-size: 1.25em;
    line-height: 2.25em;
    font-weight: normal;
    color: #1E1E1E;
    margin: 0;
}
h2 {
    font-size: 1.175em;
    line-height: 1.5em;
    font-weight: bolder;
    color: #2f2d2c;
    margin: 0;
    padding: 0 1.25em;    /*Abstand oben 0, links 1.0 */
    text-align: left;
}
h3 {
    font-size: 1.0em;
    line-height: 1.5em;
    font-weight: bolder;
    color: #2f2d2c;
    margin: 0;
    padding: 0.5em 1.5em; /* Abstand oben - links */
    text-align: center;  /* Blocksatz */
}
h4 {
    font-size: 1.0em;
    line-height: 1.5em;
    font-weight: bolder;
    color: #2f2d2c;
    margin: 0;
    padding: 0.5em 1.5em; /* Abstand oben - links */
    text-align: left;
}
p {
    line-height: 1.25em;
 /*  font-weight: normal; */
 /*  color: #1F1F1F;      */
    margin: 0;
    padding: 0.5em 1.5em; /* Abstand oben - links */ 
    text-align: left;  /* Blocksatz */
}
li {
    list-style: square;
 /*   font-weight: normal; */
 /*   color: #1F1F1F;      */
    line-height: 1.25em;
    margin: 0 0.313em;
    padding: 0;
}
a {
    text-decoration: none;  /* keine Textgestaltung */
}
/* Schriftanimation */
#p_slidein {
    animation-duration: 5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 90%;
  }
  to {
    margin-left: 0%;
    width: 90%;
  }
}
/* Ende Schriftanimation */
    /* Darstellung der Bilder */
header img {
    float: left;
    margin: 0 0.75em 0 1em;
    width: 50px;
}   
section img {
    width: 80%;
    max-width: 100%;
    display: block;
    margin: 1em auto;
/*    box-shadow:0 0 10px -5px #4c4948;     */
    border-radius: 5px;
}
figure img {
    width: 40%;
    max-width: 100%;
    display: block;
    margin: 1em auto;
/*    box-shadow:0 0 10px -5px #4c4948;     */
    border-radius: 5px;
}
aside img {
    width: 60%;   
    max-width: 100%;  
    display: block;
    margin: 1em auto;
/*    box-shadow:0 0 10px -5px #4c4948;     */
    border-radius: 5px;
}
footer img {
    float: right;
    margin: 0 10px;
    width: 35px;
}
/* Slider Start */
div#slider {
    margin: auto;
	width: 80%;
	overflow: hidden;
}
div#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
}
div#slider figure img {
	width: 20%;
	height: auto;
	float: left;
}
@keyframes slidy {
	0%  { left: 0%; animation-timing-function: ease-out;}
	23% { left: 0%; animation-timing-function: ease-in;}
	25% { left: -100%; animation-timing-function: ease-out;}
	48% { left: -100%; animation-timing-function: ease-in;}
	50% { left: -200%; animation-timing-function: ease-out;}
	73% { left: -200%; animation-timing-function: ease-in;}
	75% { left: -300%; animation-timing-function: ease-out;}
	97% { left: -300%; animation-timing-function: ease-in;}
	99% { left: -400%;  animation-timing-function: ease-out;}
	100% { left: -400%; animation-timing-function: ease-in;}
}
div#slider figure {
	animation: 20s slidy infinite;
}
/* Ende Slider */
nav { 
    display: block;
/*    padding: 0.25em; */ 
    text-align: center;      /*zentrieren vom Text*/
}
main {                      /* Internet Explorer 9 bis 11 kennt main nicht */
	display: block;         /* deswegen  display: block */
	max-width: 1600px;             /* 980px; */ 
}
footer {
    display: block;
    background: #2f2c2c;
    border-color: #2f2c2c;
    text-align: center;
}
footer ul {
    display: block;
    text-align: left;
    margin: 0 auto;
}
footer ul li {
    display: inline;
    font-size: 0.8em;
    line-height: 2.8em;
    color: #E2DBDB;
    padding:0 0.625em 0 0.625em;
}
footer ul li a {
    color: #E2DBDB;
}
    /* Mobile first mit Nav-Icon */
    /* 35em = 560 px        */

@media (max-width: 39em) {      /* 38em = 608px */
    body {
        font-size: 86%; 
    }
    article, aside {
       margin: 2em 0;     /* Abstand oben - links */
    }
    section {
    	border-bottom: 3px solid #FFFFFF;
    	margin-bottom: 1em;
    }
    .menubutton {
        display: block;
        content:"";
        position: absolute;
        top: 0.4em;
        right: 0.4em;
        width: 1.5em;
        height: 0.2em;
        font-size: 36px;
        border-top : 0.6em double black;
        border-bottom: 0.2em solid black ;
        cursor: pointer;
		text-decoration: none;
    }
	.menubutton:hover {
		color: black;
		background: #0059AA;
	}
	/* Navigation - Steuerung einzublenden */
    #nav-menu:target #nav {
	   display: block;
    }
    /* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
    #nav-menu:target .menu-open {
    	display: none ;
    }
    nav {
     	width: 98%;
        display: none; /* Steuererung erst anzeigen wenn jemand auf Button klickt*/           
    }
    nav li {
    	list-style: none;          /* ohne Aufzählungspunkt */               
    }
    nav a {
    	display: block;
    	height: 100%;
    	width: 95%;
    	padding: 1.0em;
    	text-decoration: none;     /* keine Unterstreichung */
    	color: #E1E1E1;              /* Schriftfarbe weiß */
    	background-color:  	#808080;    /* Hintergrundfarbe grau */
        border-bottom: 1px solid #E1E1E1;
    }	
    nav a:hover {
        color: #E1E1E1;
    	background: #0059AA;   /* hellblau */
    } 
    nav a:active {
        color: #E1E1E1;
    	background: #004483;   /* blau; #808080; --> grau */
    } 
    .current {
        color: #E1E1E1;
    	background: #004483;        
    }         
}
    /* Screen über 35em = 560px */
    /* Top-Navigation und 1 Spalte */
@media (min-width: 39em) {
    header, nav, main, article, section, aside, footer {
    	border-radius: 0px 0.5em 0.5em;
    	border: 1px solid;
    	padding: 1px;
    	margin: 5px;
    }
    header, main {
    	background: #ECECEC;
    	border-color: #ECECEC;
    }
    article, aside {
    	background: #FAFAFA;
    	border-color: #FAFAFA;
    }
    section {
    	background: #ECECEC;
    	border-color: #ECECEC;
    }
    nav {
 /*   	background: #4169E1; */ /* royalblue */
 /*     border-color: #4169E1;  */
    	background: #ECECEC;
    	border-color: #ECECEC;
    	margin-top: 0.5em;
    }
    nav ul {   
        list-style: none;
   	    margin: 0;
        padding: 0;
    }
    nav ul li {
        display: inline;
        padding: 0.125em;
        margin: 0;
    }
    nav ul li a {
        font-size: 1.0em;
        line-height: 2.5em;
        margin: 0.1em;
        padding: 0.5em;
        text-decoration: none;
        font-weight: bold;
/*        border: 1px solid blue;               */
        border-radius: 0.5em;
/*        box-shadow: 0 5px 10px white inset;   */
/*        color: gold;    */
        color: #454040;
        background-color: #E1E1E1; 
    }
    nav ul li a:hover {
       color: #0F0F0F;
        background: #FFD42A;
        border-bottom: 0.188em solid #FAFAFA;        
    }
    nav ul li a:active {
        color: #0F0F0F; 
        background: #FFD42A;  
        border-bottom: 0.188em solid #4169E1;
    }
    .current {
        color: #2A00FF;
        background: #FFD42A;
        border-bottom: 0.188em solid #4169E1;        
    }
}

@media (min-width: 39em) and (max-width: 51em) {      /* 51em = 816px */
/* mit 1 Spalte */
    nav li {
        display: inline;         /* horizontale Navigation */
     }
    nav ul li a {
        font-size: 0.9em;
        margin: 0;
        padding: 0.5em 0.3em;   /* Abstand oben - links */ 
        font-weight: normal;
    }
}
    /* Webansicht mit 2 Spalten und Top-Navigation */

@media (min-width: 51em) {      /* 50em = 800px */

    main { 
        float: left;
        width: 96%;
    }
    nav li {
        display: inline;        /* horizontale Navigation */
        width: 100%;
    }
    article {
        width: 65%;
        float: left;
    }
    aside {
         width: 31%;
         float: right;
    }
    footer {
        clear: left;
    }
}