body {
	max-width: 100%;
    /*max-width: 60em;*/
	/*min-height: 90%;*/

	margin: 0.2em auto;
	display: flex;
	flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

info{
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

}

header,

bla
breite,
nav,
nav a,
article,
aside,
footer {
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	border-radius: 0.0em 0.5em 0.5em;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	flex: 1 100%;
}

h1{
		text-align: center;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
	display: flex;
	flex-flow: row wrap;
}

header * {
	flex: 1 1 0%;
}
header bla,shop {
  	border-radius: 0.5em;
     padding: 2px;
	margin: 2px;

	flex: 1 1 100%;
}
header a {
     	/*text-decoration: underline;*/
     	text-decoration: none;
        color: black;
	}
header strong {
     	text-decoration: underline;
        color: red;
	}
	
header home{ /* quiz.php,antwort.php*/
     text-decoration: underline;
	 font-size: 25px;
	 padding-top: 0.7em;
	 padding-left: 0.7em;
	 padding-bottom: 0.7em;
}

header titel{/*kartei.php*/
    /* text-decoration: underline;*/
     text-align: left;
	 font-size: 25px;
	 padding-top: 0.7em;
	 padding-left: 0.7em;
	 padding-bottom: 0.7em;
}
header shop  {
	display: inline-block;
	width: 100%;	
	background: #fffbf0;
	
	border: 1px solid #dfac20;
	border-left-color:black;
	border-top-color:black;

	
	margin: 5px;
	text-decoration: none;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 25px;
	text-align: center;
}

header out{
     text-decoration: underline;
     text-align: right;
	 font-size: 25px;
	 padding-top: 0.7em;
	 padding-right: 0.7em;
	 padding-bottom: 0.7em;
}

header bla  {
	display: inline-block;
	width: 100%;	
	background: #fffbf0;		
	border: 1px solid #dfac20;
	border-left-color:black;
	border-top-color:black;	
	margin: 10px;
	text-decoration: none;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;
	text-align: center;
}

header form {

     max-width: 64em;
    	margin: auto;
	text-align: center;
}
header nav span{
	width: 30%;	
	
}


header nav li{
    display: inline;
	width: 30%;	

	flex: 1 1 100%;
    margin-left: 10px;
}
tops nav {
    margin-left: 10px;

}


fragen{
		font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
		font-size: 20px;

		background: #fffbf0;

	    border-radius: 0em 0.5em 0.5em 0.5em;

	    border: 1px solid #dfac20;
	    border-left-color:black;
	    border-top-color:black;

	    padding: 20px;
	    margin: 5px;
	    flex: 1 100%;
	    min-height: 400px;	    	   
}

menu{
		font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
		font-size: 20px;

	    /*background: #F1F3F4;*/
	    	background: #F1F3F4;

        /* background: #fffbf0;  
         background: #fffbf0;*/

	    border-radius: 0.5em 0.5em 0.5em 0.5em;
	    border: 1px solid #dfac20;
	    border-left-color:black;
	    border-top-color:black;
	    margin-top: 2px;
        margin-bottom: 6px;
	    padding: 0px;
	    margin-left: 5px;
	    margin-right: 5px;

	    flex: 1 100%;
	    min-height: 30px;	    	   
}

menu hinweis{
      font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;		
	   background: #fffbf0;   
    color: black; 
	margin-left: 15px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 15px;
	font: 18px;
	
}

menu a:hover{
  {
	background-color: #dfac20;
}


}
tops{
		font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
		font-size: 20px;

	    background: #F1F3F4;
	    border-radius: 0.5em 0.5em 0.5em 0.5em;
	    border: 1px solid #dfac20;
	    border-left-color:black;
	    border-top-color:black;
	    margin-top: 1px;

	    padding-left: 5px;
	    margin-top: 0px;
	    margin-left: 5px;
	    margin-right: 5px;
	    margin-bottom:6px;

	    flex: 1 100%;
	    min-height: 50px;	    	   
}

tops nav{
		    padding-bottom: 3px;
		    padding-top: 5px;

	        margin-left: 10px;	       
}


}



probe{
	color:red;
}

 input[type=text]{ 
  width: 15%; 
  
}



breite{
width: 15%;
	
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	display: flex;
	flex-flow: row wrap;
}

footer nav {
		        margin-left: 10px;

}



nav,
nav ul,
nav li {
	margin: 0;
	padding: 0;
	border: none;
}

nav ul {
	display: flex;
	flex-direction: column;
}

nav li {
	list-style-type: none;
	margin: 0.4em 0;
	flex: 1 1 100%;
}

nav a,
nav span {
	display: inline-block;
	width: 95%;
	background: #fffbf0;
	border: 1px solid #dfac20;
	border-left-color:black;
	border-top-color:black;
	margin: 0;
	text-decoration: none;
	text-align: center;
	font-size: 18px;

	color: black;
}

nav2 span {
	display: inline-block;
	width: 50%;
	background: #fffbf0;
	border: 1px solid #dfac20;
	border-left-color:black;
	border-top-color:black;
	margin: 0;
	text-decoration: none;
	text-align: center;
	font-size: 18px;

	color: black;
}

nav span {
	line-height: 150%;
}

nav a:hover {
	background-color: #dfac20;
}


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

	nav ul {
		flex-direction: row;
	}
	nav li {
		margin: 0 5px;
		flex: 1 1 0%;
	}
	article {
		flex: 4 1 0%;
	}
	aside {
		flex: 1 1 0%;
	}
}