@charset "UTF-8";

/* ----------------------------------------------------------------------------- *
 *       Änderung des default-Box-Modells aller Elemente auf "border-box"        *
 *          https://www.paulirish.com/2012/box-sizing-border-box-ftw/            *			 
 * ----------------------------------------------------------------------------- */

html {
  box-sizing: border-box; }

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

/* ----------------------------------------------------------------------------- */
.header {
height:139px;
  text-align: center;
  border-bottom-style : solid;
  border-width : 1px;
  border-color : #666666;
 }

.main-content {
	padding: 2rem 2rem 1rem 3rem;
}

.aside {
  border-top: 1px dashed #ddd;
  padding-top: 1em;
  margin-top: 1em; }

.footer {
  padding: 0.6em 2rem;
  text-align: center; 
  border-top-style : solid;
  border-width : 1px;
  border-color : #666666;
}

.section {
  margin: 1em 0; }

}

/*** Textauszeichnungen ***/
h1 {
  margin: 0 0 0.625em; }

h2 {
  margin: 0.5em 0; }

h3 {
  margin: 0.6em 0; }
h4 {
  margin: 0.5em 0; }
h5 {
  margin: 0.4em 0; }
h6 {
  margin: 0.3em 0; }
  

p {
  margin: 0.5em 0; }

ul, ol {
  padding: 0;
  margin: 0 0 0.625em 2rem; }


.main-nav {
  margin: 0;
   }
  .main-nav > li {
    margin-left: 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.6); }
  .main-nav li > a,
  .main-nav li > b {
    padding: 0.6em 2rem;
    display: block;
    font-size: 1.8rem; }
  .main-nav a:link {
    text-decoration: none; }

.main-nav__item-act b {
  font-weight: 600; }
  
.Logobild {
	float: left;	
}

.Logobild img{
vertical-align: middle;
width:176px;
height:139px;
/*width:100%;
height:auto;*/	
}
.Logotext {
	font-size: 3rem;
	text-align: center;
    margin-top:1rem;
	margin-left:18rem;
	
}
.Logotext p{
	font-size:1.4rem;
}



@media screen and (max-width: 40em) {
  .header {
 
height:139px;
   }
}



/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) and (max-width:80em){
body {
		font-size: 1.5rem; /* 15px */
	}
}

@media screen and (min-width: 40em) {
  .header {
 

   }

 

  .main-content {
 
    border-right: 1px dashed #ddd;
  
    }

  .aside {
  
    margin:0;
    border-top: none; 
    }

  .footer {
 
     }

  /*** Textauszeichnungen ***/
 
  h1 {
    font-size: 2.8rem;/* 28px */
    margin: 0; }

  p.teasertext {
    margin: 0.8em 0; }

 

  .main-nav {
    padding: 0 2rem;
   
     }
    .main-nav > li {
  
      text-align:center;
      border: none;
      width: auto; }
    .main-nav > li > a, .main-nav > li > b {
      padding: 0.7em 1.2rem;
   
      
      font-size: 1.8rem;
      /* 18px */ }  
      
  .main-nav::after {
		content: '';
		display: table;
		clear: both;
	}
    
      
 		
}


@media screen and (min-width: 40em) and (max-width: 63.938em) {
	
	/* 2-spaltiges Grid festlegen */
	.page-wrapper {
		/* nur Internet Explorer */
		display: -ms-grid;
		-ms-grid-columns: 6.5fr 3.5fr;
		
		/* W3C-Syntax */
		display: grid;
		grid-template-columns: 6.5fr 3.5fr;
	}
   
	.header {
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 1 / 1 / 2 / 3;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
   
	.nav {
		height: 3.25em;
		
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 2 / 1 / 3 / 3;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

	.main-content {
	background-color: #fff;

		/* 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; */
	}
	
	.aside {
	background-color: #fff;

		/* nur Internet Explorer */
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 3 / 2 / 4 / 3;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
   
	.footer {
		padding: 0.8em 2rem;
		text-align: right;
		
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 4;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 4 / 1 / 5 / 3;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
	
   
   
	.main-nav {
		/* nur Internet Explorer */
		display: -ms-grid;
		-ms-grid-columns: 0.167fr 0.167fr 0.167fr 0.167fr 0.167fr 0.167fr;
		/*-ms-grid-rows: auto;*/
		
		/* W3C-Syntax: */
		display: grid;
		grid-template-columns: repeat(6, auto);
		/*grid-template-rows: auto;*/
	}
	
	/* Navigation nur Internet Explorer - Start */
	.main-nav > li {
		-ms-grid-column-span: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
	}
	.main-nav > li:nth-of-Type(1) {
		-ms-grid-column: 1;
	}
	.main-nav > li:nth-of-Type(2) {
		-ms-grid-column: 2;
	}
	.main-nav > li:nth-of-Type(3) {
		-ms-grid-column: 3;
	}
	.main-nav > li:nth-of-Type(4) {
		-ms-grid-column: 4;
	}
	.main-nav > li:nth-of-Type(5) {
		-ms-grid-column: 5;
	}
	.main-nav > li:nth-of-Type(6) {
		-ms-grid-column: 6;
	}
	/* Navigation nur Internet Explorer - Ende */
	
}





/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media screen and (min-width:64em) {
  /* .main-wrapper macht Platz für .nav */
	.page-wrapper {
		
		
		display: -ms-grid;
		-ms-grid-columns: 2fr 6fr 2fr;
       /*-ms-grid-rows: auto auto auto;*/
		
		display: grid;
		grid-template-columns: 2fr 6fr 2fr;
       /*grid-template-rows: auto auto auto;*/
	}

 	.main-content {
		padding: 2em 2rem;
		background-color: #fff;
		
		/* nur Internet Explorer */
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 2 / 2 / 3 / 3;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

	.aside {
		padding: 3rem;
		background-color: #fff;
		
		/* nur Internet Explorer */
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 2 / 3 / 3 / 4;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

 .header {
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		
	
		
		grid-area: 1 / 1 / 2 / 4;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

.nav {
		/* 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; */
	}



  /* Navigation wird links neben dem Inhalt angeordnet */
  .main-nav {
 
    box-shadow: none;
    margin: 1.6em 0 0;
    padding: 0; }
        
    .main-nav > li {
      width: 100%;
     /* float: none;*/
     text-align:left; }
         
    .main-nav > li > a {
      padding: 0.5em 3rem;
      border-left: 0.5em solid #AAB;

      display: block; }
      
     .main-nav > li > b {
      padding: 0.5em 3rem;
      border-left: 0.5em solid red;

      display: block; }
 
      
 	.footer {
 
		/* nur Internet Explorer */
		-ms-grid-column: 1;
		-ms-grid-column-span: 4;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		
		
		
		grid-area: 3 / 1 / 4 / 4;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
     
      
      
      
    .main-nav a:link, .main-nav a:visited {
      color: #fff; }
    .main-nav a:hover, .main-nav a:focus, .main-nav a:active {
     background-color:#696969;
   color: #fff;
   border-color: #fe3;
 } 
 #Logotext {
	font-size: 5rem;
	text-align: center;
    margin-top:1rem;
	margin-left:140px;
}				
 }

.code-box{
background-color:lemonchiffon;
font-family:"Courier New";
	border: 1px solid #ddd;
	margin: 0 0 1em 0;
padding: 1em;

}

/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1280px / 16px/em = 80em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 80em) {
.page-wrapper {
	margin: 0 auto;
	max-width: 90em;
	}
}



/* ----------------------------------------------------------------------------- * 
 *                            Styles für Tables                                  *
 * ----------------------------------------------------------------------------- */

caption {
	margin: 0 0.2rem;
	padding: 0.4em;
	font-size: 1.8rem;
	line-height: 1;
	color: #fff;
	background-color: #da0545;
}

table {
	width: 100%;
	font-size: 1.5rem;
	text-align: center;
}

th,
td {
	padding: 0.5em;
}

th {
	font-weight: normal;
	color: #fff;
	background-color: #189ca4;
}



/* 
 * Scrollbalken für Tabellen, wenn diese mehr Platz brauchen als vorhanden ist:
 * -> unter 35em (560px) für das einspaltige Basislayout und 
 * -> von 40em (640px) bis 50em (800px) für das zweispaltige Layout
 **/

@media screen and (max-width: 35em),
screen and (min-width: 40em) and (max-width: 50em) {
	table {
		display: block;
		overflow-x: scroll;
	}
	/* automatischen Umbruch verhindern */
	table th,
	table td {
		white-space: nowrap;
	}
}


/* ----------------------------------------------------------------------------- *
 *                           Anpassungsfähige Bilder                             *
 * ----------------------------------------------------------------------------- */





/* Bilder flexibel machen */

img {
	max-width: 100%;
	height: auto;
}


/* figure.slides-Container um die Bilder */

.slides {
	margin: 2rem 0;
	line-height: 0;
}


/* Bildunterschrift */

figcaption {
	line-height: 1.4;
	padding: 0.5em 0 0;
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für Teaserboxen                               *
 * ----------------------------------------------------------------------------- */


/* clearing für floatende Teaserboxen .box.teaser */

.section.teaser-articles {
	overflow: auto;
	padding: 0;
	margin-top: 4rem;
}

.teaser-box {
	border: 1px solid #ddd;
	margin: 0 0 1em 0;
}

.box-inner {
	padding: 1em;
}

.box-inner a{
	color:#da0545;

}

@media screen and (min-width: 25em) {
	.teaser-box img {
		width: 45%;
		float: left;
		margin: 1em;
	}
	.teaser-box {
		overflow: auto;
	}
	.box-inner {
		line-height: 1.3;
	}
}

@media screen and (min-width: 40em) {
	.teaser-box img {
		width: 100%;
		float: none;
		margin: 0;
	}
	/* Wenn der Screen breiter wird werden 2 Teaserboxen nebeneinander dargestellt. */
	.teaser-box {
		float: left;
		margin-right: 4%;
		margin-bottom: 2em;
		width: 48%;
	}
	/* 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(even) {
		margin-right: 0;
	}
}