@charset "UTF-8";
html {
  box-sizing: border-box; }

*, *::before, *::after {
  box-sizing: inherit; }
  
html {
   font-size: 62.5%; /*1.0rem entspricht 10px*/
}

body {
	font-size: 1.6px; /* Fallback für alte Browser, die rem nicht kennen */;
	font-size: 1.6rem; /* 16px */;
	line-height: 1.5; /* 24px */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: 300;
	color: #444;/* dunkelgrau */;
	background-color: #efefef; /* hellgrau */
	
background:url("../Bilder/abstrakt-blau-bokeh-370799.jpg") repeat fixed;
}

p,h1,h2,h3 {
	margin:2rem;
}
main {
	
	display:block;
}
.page-wrapper {
		margin: 0 auto;
		
		max-width: 80em;
	}

.intro {
	font-size: 1.8px; /* Fallback für alte Browser, die rem nicht kennen */;
	font-size: 1.8rem; /* 18px */;
	font-weight: 700;	
}

ul {
	
	list-style-type:square;
}


figure, figcaption {
	background-color:purple;
	color:white;
	margin:2rem;
	padding:0;
}
  
figure img{
	width:100%;

}  
figcaption {
	
	/*width:100%;*/
}

.nav {
  
    box-shadow: none;
  
    margin:1.6em 0 1.6em 0.8em;
     }
        
         
    .nav   a {
    margin-left:2rem;
    margin-right:2rem;
      padding: 0.5em 0;
   
    border-top:solid thin;

      display: block; }
      
     
.main {
	
	margin:1.6em 0 1.6em 0;
}



.nav a:link {
    text-decoration: none; }

.nav a:link, .nav a:visited {
   color: #696969;
}

.nav a:hover, .nav a:focus, .nav a:active {
     background-color:#696969;
   color: #fff;
}
.section {
	 border-top:solid thin;
	 margin-left:2rem;
	 margin-right:2rem;
}
.section a:link {
	text-decoration:none;
display:block;
}

.secimg{
vertical-align: middle;
	
	margin:2px;	
	
}
.section a:link, .section a:visited {
   color: #696969;
}

.section a:hover, .section a:focus, .section a:active {
     background-color:#696969;
   color: #fff;
}

.page-wrapper {
		/* nur Internet Explorer */
		display: -ms-grid;
		-ms-grid-columns: 1fr;
		
		/* W3C-Syntax */
		display: grid;
		grid-template-columns: 1fr;
	}
   
	.header {background-color: red;
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		
		
		
		grid-area: 1 / 1 / 2 / 2;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
   

	.main {
	background-color: #fff;

		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 2 / 1 / 3 / 2;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
	
		
	.footer {background-color:blue;
		padding: 0.8em 2rem;
		text-align: left;
		
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		
		
		
		grid-area: 3 / 1 / 4 / 2;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
	
   .teaser-box img {
	max-width:100%;
	height:auto;
}
	.section.teaser-articles {
	overflow: auto;
	padding: 0;
	margin-top: 4rem;
}

	.teaser-box {
		float: left;
		margin-right: 1%;
		margin-bottom: 2em;
		width: 13%;
	}
	/* Bei jeder zweiten Teaserbox wird das margin auf 0 gesetzt. 
   * :nth-of-type(2n+2) entspricht :nth-of-type(even) */
	.teaser-box:nth-of-type(7n+0) {
		margin-right: 2%;
	}
	.vorschau{
	margin-left:2rem;
	margin-right:2rem;
}