*, ::before, ::after {
  box-sizing: border-box;
}

body {
  max-width: 90em;
  margin: 0 auto;
  padding: 0 1em;
  background-color: #ffffff;
}
/* assistant-300 - latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/assistant-v3-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Assistant Light'), local('Assistant-Light'),
       url('fonts/assistant-v3-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/assistant-v3-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/assistant-v3-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/assistant-v3-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/assistant-v3-latin-300.svg#Assistant') format('svg'); /* Legacy iOS */
}

/* assistant-600 - latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/assistant-v3-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Assistant SemiBold'), local('Assistant-SemiBold'),
       url('fonts/assistant-v3-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/assistant-v3-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/assistant-v3-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/assistant-v3-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/assistant-v3-latin-600.svg#Assistant') format('svg'); /* Legacy iOS */
}




h1 {font-family: Assistant;
    font-weight: 300
	font-size: 22px;
}

h2 {font-family: Assistant;
    font-weight: 600;
    font-size: 30px;
	
}

h3 {font-family: Assistant;
    font-weight: 300;
	font-size: 22px;
}

h4 {
    font-family: Assistant;
    font-weight: 300;
	font-size: 15px;
    
}

p {font-family: Assistant;
    font-weight: 300;
	font-size: 15px;}

a {font-family: Assistant;
    font-weight: 300;
	font-size: 15px;}

* {
	box-sizing: border-box;
	
}

ul {font-family: Assistant;
    font-weight: 300;
	font-size: 15px;}

/* Formen, Farben und Schriftgrößen */
h1, h2 {
	margin: 0 0 1em;
	color: #303030;	
}
	




button,
.button {	
	font: font-family: Assistant;
    font-weight: 600;
	font-size: 22px;
	text-decoration: none; 
	color: white;
	background:#3263a2;
	margin:  4px 2px; 
	padding: 4px 8px;	
}

button:hover, button:focus, button:active, 
.button:hover,
.button:active,
.button:focus {
	background:skyblue;
	margin:  0px  2px; 
	padding: 8px; 
}




/** Inhalte **/
header {
	color:white;
	background: #ffffff;
}

#logo{
	display:inline-block;
	color:white;
	padding: 10px;
	font-size:150%;

}

.headline{
	
	float: right;
    margin-top: 5em;
    margin-right: 2em;


}





main {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    margin-top: 3em;
    background-color: #ffffff;
}

article,
main > h1,
#bar {
	grid-column: 1 / -1;     /* nimmt volle Breite ein */	
}

article {
	margin-top: 2em;	
  	-webkit-column-count: 4;  
  	-webkit-column-width: 20em; 
  	columns: 4 20em;  
  	-ms-hyphens: auto;
  	-webkit-hyphens: auto;
  	hyphens: auto;  
     background-color: #3761a8;
}

aside {
	color:white;
	background: #3761a8;	
	padding: 1em;
}

aside h2,aside section ul{color:white;}	

section{
   
	margin-bottom: 1em;
	padding: 1em;
}



section#bar {
	position:relative;	
	background: #d2d2d1 linear-gradient(to bottom, #e8e7e5 0%,#d2d2d1 100%); 
	margin-bottom:2em;
	display: grid;
	grid-template-columns: 1fr 25em;	
}

section#bar:before,
section#bar:after{    
    position:absolute;
    bottom: -2em;
    content: '';
    background: url('../img/shadow.png') no-repeat top left;
	background-size: cover; 	
    width: 50%;
    height: 2em;
}

#bar:before {
	left: 0;
}

#bar:after{    
	transform: scale(-1,1);
	right:0;
}

#bar form {
	float:right;
	padding: 0em 0 0 0em;
	text-align: left;
}

img.resp {width:100%}





ul.feature li{

    color: #ffffff;
    list-style: square;
    
}



/* =============== NAVIGATION ============= */

nav#navigation{
	float: right;
    right: 3%;
	top: 20em;
}

#navigation li {
	display:inline;
    list-style-type: none;	
}

#navigation a {
    color: black;
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
    text-transform: uppercase;
    margin: .5em;
	padding: 0.5em 1em;
}

#navigation li:hover a, 
#navigation li:focus a, 
#navigation li:active a {
	
}

a[aria-current=page]{
	background: #ccc linear-gradient(135deg, #dfac20 0%, gold 49%, #dfac20 100%);
	color: black;
}


footer {
	margin-top: 2em;
	padding:0;
}




footer p {
	display:inline;
	float:right;
} 

@media only screen and (max-width: 1000px) 
{
    
body{width:100%}
    
    
 }
/* 3-Spaltenlayout  */
@media only screen and (max-width: 860px) 
{

header a#navlink {
	display:block;
}

article section, section.spalte {width:50%;}
    




nav#navigation{
	position:relative;
	float:left;
	clear:left; 
	width:90%; 
	padding:0; 
	margin:0;
}
#navigation ul {
	padding:0;
	margin:2%;
	top:0;
	left:0%;
	width:100%;
	clear:left;
}

#navigation ul li a {
	display:block;
	background:#333;
	width:90%;
	padding: 20px 2%;
	font-size:2em;
	border-radius:5px;
}
			
}   
    
}
/* 2-Spaltenlayout  */
@media only screen and (max-width: 700px) 
{

header a#navlink {
	display:block;
}

article section, section.spalte {width:50%;}
    




nav#navigation{
	position:relative;
	float:left;
	clear:left; 
	width:90%; 
	padding:0; 
	margin:0;
}
#navigation ul {
	padding:0;
	margin:2%;
	top:0;
	left:0%;
	width:100%;
	clear:left;
}

#navigation ul li a {
	display:block;
	background:#333;
	width:90%;
	padding: 20px 2%;
	font-size:2em;
	border-radius:5px;
}
			
}

/* 1-Spaltenlayout  */
@media only screen and (max-width: 300px) {

article section, section.spalte {width:100%;}
}

.flexslider
{width:100%;}





a#headline img{
	
    width:90%;
  display: block;
    margin: 0 auto;
}