/* ====================================================  GLOBAL DEFINITION  ==================================================== */
/* alternatives Boxmodell */

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

body {
  max-width: 75em;
  margin: 0 auto;
  padding: 0 1em;
  font: normal 1em Arial;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
  color: #000000; 
  background-color: #ffffff;
}

* {
	box-sizing: border-box;
}

/* === Farben, Formen und Schriftgrößen === */
h1, h2 {
	margin: 0 0 1em;
	color: #303030;	
}
	
a { 
	color: 303030; 
	outline: none; 
	text-decoration: none;
}
a:hover,
a:focus	{ 
	color: #818181; 
	background: #585858;
	text-decoration: none; 
}

a.more	{ 
	float: right; 
	font-weight: bold; 
	padding: 0.3em 1em; 
	color: midnightblue; 
	text-decoration: none; 
	background: url('../img/icon/arrow.png') no-repeat right; }
a.more:hover,
a.more:focus { 
	color: #535353; 
}

main img {
	width: 100%;
}

[alt=decoration]{
	width: auto;
}

/* Durch class="button" kann jeder Link oder Button unseren eigenen Stil bekommen */
button,
.button {	
	font: bold 1em Arial, Verdana, sans-serif;
	border-radius: 1em;
	text-decoration: none; 
	color: black;
	border:1px solid minbightblue;
    box-shadow: inset 1px 1px 5px 0px,
				inset 2px 2px 5px white, 
	            inset -1px -1px 5px black;	
	background:grey linear-gradient(135deg, grey 0%, #EFEFEF 49%, grey 100%);
	margin:  4px 2px; 
	padding: 4px 8px;	
}

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


/** CONTENT  - Layout **/
header {
	color:white;
	background: #585858;
	display: grid;
	grid-template-columns: 1fr;
}

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

/*  section.flexslider ist im eigenen flexslider.css definiert!  */

main {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

article,
main > h1,

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

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

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

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


img.resp {width:100%}

ul.feature li{
	border-bottom: 2px dotted #616161;
    color: white;
    list-style: square;
    padding: 15px 0 5px 15px;
}

p.feature a {
    color: white;
}

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

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

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

#navigation a {
    color: white;
	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 {
	background: #ccc linear-gradient(135deg, #aaa 0%, #fff 49%, #aaa 100%);
	color: black;
}

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


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

footer p {
	display:inline;
	float:right;
	font-size:11px;
}

@media only screen and (max-width: 1000px) {
body{width:100%}	
}
/* 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:#585858;
	width:90%;
	padding: 20px 2%;
	font-size:2em;
	border-radius:5px;
}
			
}

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

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