@charset "UTF-8";

/* ----------------------------------------------------------------------------- *
 *                           Styles des Programms                           *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *       Ä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; }

/* ----------------------------------------------------------------------------- */
main {
	display:block;
	
}
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: black;/* schwarz */;
	background-color: #fff; /* weiß */
}

header,
nav,
main,
article,
section,
aside,
footer {
	/*border-radius: 0.5em;*/
	border: 1px solid;
	border-color:black;
	/*padding: 1rem;*/
	margin: 1rem;
}

.page-wrapper {
   background-color: #fff;
}

.header {
	background:rgb(128,128,0);
	text-align: center;
}

.nav {
background:rgb(224,224,160);
}

.footer {
  background:rgb(224,224,160);
   color: #fff;
    padding: 0.6em 2rem;
  text-align: center;
}

h1, h2, h3 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 130%;
}

h1 {
   font-size: 2.6rem; /* 26px */
    margin: 0 0 0.625em;
}

h2 {
   font-size: 2.2rem; /* 22px */
    margin: 0.5em 0;
}

h3 {
   font-size: 1.8rem; /* 20px */
    margin: 0.6em 0;
}



.main-content {
	padding: 2rem 2rem 1rem 3rem;
	background-color: #fff;

}

.aside {
 
  background:rgb(224,224,160);
 }

.aside h3 {
  	font-size:14pt;
  	padding-left:15px;
    background:rosybrown;
    }

.aside a {display: block; text-decoration:none;padding-left:15px;}

.aside a:link {color:blue;}
  .aside a:active {color:blue;}
  .aside a:visited {color:blue}
  .aside a:hover {color:red;}


/*** Textauszeichnungen ***/

p {
  margin: 0.5em 0; }

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

.main-nav {
   background-color:rgb(224,224,160);
 
}

.main-nav li {
   list-style: none;
}

.main-nav a, .main-nav b {
   font-weight: 300;
}

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

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



.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; }

  


/* ----------------------------------------------------------------------------- *
 *                           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) {

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

  p.teasertext {
    margin: 0.8em 0; }

 

  .main-nav {
    padding: 0 2rem;
    /*overflow: hidden;*/
     }
    .main-nav > li {
    /* float: left;
      display: inline-block;*/
      text-align:center;
      border: none;
      width: auto; }
    .main-nav > li > a, .main-nav > li > b {
      padding: 0.7em 1.2rem;
     /* display: inline-block;*/
      
      font-size: 1.4rem;
      /* 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;
		
		/* W3C-Syntax:
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		*/
		
		/* Alternativ Shorthands: 
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		*/
		
		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;
		
		/* W3C-Syntax: 
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		*/
		
		/* Alternativ Shorthands: 
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		*/
		
		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;
		
		/* W3C-Syntax:
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 4;
		*/
		
		/* Alternativ Shorthands: 
		grid-column: 1 / 2;
		grid-row: 3 / 4; 
		*/
		
		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;
		
		/* W3C-Syntax:
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
		*/
		
		/* Alternativ Shorthands: 
		grid-column: 2 / 3;
		grid-row: 3 / 4;
		*/
		
		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;
		
		/* W3C-Syntax:
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
		*/
		
		/* Alternativ Shorthands: 
		grid-column: 1 / 3;
		grid-row: 4 / 5;
		*/
		
		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: 1fr 6fr 1fr;
	-ms-grid-rows:10rem 1fr 10rem;
			
		display: grid;
		grid-template-columns: 1fr 6fr 1fr;
		grid-template-rows: 10rem 1fr 10rem;

        grid-template-areas:"nav head head"
		                    "nav main aside"
		                    "foot foot foot";

	}


 	.main-content {
	    -ms-grid-column: 2;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1; 

		
		
		grid-area: main;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

	.aside {
		
		 -ms-grid-column: 3;
		-ms-grid-column-span: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;

		
		
		grid-area: aside;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}

 .header {
		 -ms-grid-column: 2;
		-ms-grid-column-span: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;

		
		grid-area: head;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
	
#logoleiste {
	 background:rgb(192,192,63);
	
}
.nav {
		 -ms-grid-column: 1;
		-ms-grid-column-span: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;


		
		grid-area: nav;
		/* 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%;
     
     text-align:left; }
         
    .main-nav > li > a {
      padding: 0.5em 3rem;
      display: block; 
      }
      
 	.footer {	
 	    -ms-grid-column: 1;
		-ms-grid-column-span: 3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;

		grid-area: foot;
		/* grid-area: row-start / column-start / row-end / column-end; */
	}
     
      
      
      
    .main-nav a:link, .main-nav a:visited {
      color: red; }
    .main-nav a:hover, .main-nav a:focus, .main-nav a:active {
     background-color:#696969;
   color: #fff;
   border-color: #fe3;
 } 
 			
		

 }


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

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



/* Bilder flexibel machen */

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