/* 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: black; /* Schriftfarbe*/
  background-color: #585858; /* Hintergrund*/
}

* {
	box-sizing: border-box;
	
}

/* === Farben, Formen und Schriftgrößen === */
h1 {
	color: black;
	margin: 0 0 1em;
	font-size:20pt;

}

h2 {	
	
	margin: 0 0 1em;
	font-size:16pt;
	color: black;
}
h3 { 
	color:red;  
	font-size:20pt;  /* Größe */
	font-family:Chiller; /* Schriftart */
}	

a:hover,
a:focus	{ 
	color: red;  /* Farbe Link */
	background: none;
	text-decoration: none; 
}
a:visited.menu  { color:white; }
a:active.menu  { color:white; }
a:link.menu  { color:white; }
a:hover.menu  { color:red; }


a.more	{ 
	float: right; 
	font-weight: bold; 
	padding: 0.3em 1em; 
	color: white; 
	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;
}




/** CONTENT  - Layout **/
header {
	color:white;
	background: #585858;
}

#logo{
	display:inline-block;
	color:white;
	padding: 0em;
	font-size:150%;
}

#fenster{
	
	font: bold 1em 
	display:inline-block;
	color:grey;
	padding: 0.5em;
	background: #fff;
	font-size:100%;
}

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

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

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

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

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

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

section#bar {
	position:relative;	
	background: #d2d2d1;
	margin-bottom:2em;
	display: grid;
			
}

section#bar:before,
section#bar:after,

#bar:before {
	left: 0;
	top: 2;
}

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

#bar form {
	float:right;
	padding: 1em 0 0 1em;
	text-aling: right;
}

img.resp {width:100%}



ul.feature{
}

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

p.tweet-box{
	background: none repeat scroll 0 0 #000000;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 12px;
}
p.tweet-box span, p.tweet-box a {
    color: #07B2E6;
}


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

header a#navlink {
	display:block;
}


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

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