@charset "utf-8";
/* CSS Document */
		body{
	margin: 10px auto;
	max-width: 64em;
	font-family: sans-serif;
	color: #000000;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas: "head head"
                       "sect sect"
					   "quer quer"
					   "nav aside"               
					   "main main"
					   "retro retro"
					   "sect_u sect_u"
					   "teil_01 teil_02"
					   "teil_03 teil_04"
					   
					   
					   
					   
					   "foot foot";
	}

@media (min-width: 40em) { 
  body{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "head head head "
						 "sect sect sect"
						 "quer quer quer"
						 "nav main aside"
						 "retro retro retro"
						 "sect_u sect_u sect_u"
						 "teil_01 teil_01 teil_01"
						 "teil_02 teil_02 teil_02"
						 "teil_03 teil_03 teil_03"
						 "teil_04 teil_04 teil_04"
						 "foot foot foot";
 }
}

@media (min-width: 50em) { 
  body{
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "head head head head head head head head head head head head"
						 "sect sect sect sect sect sect sect sect sect sect sect sect"
						 "quer quer quer quer quer quer quer quer quer quer quer quer"
						 "nav nav nav main main main main main main aside aside aside"
						 "retro retro retro retro retro retro retro retro retro retro retro retro"
						 "sect_u sect_u sect_u sect_u sect_u sect_u sect_u sect_u sect_u sect_u sect_u sect_u" 
						 "teil_01 teil_01 teil_01 teil_02 teil_02 teil_02 teil_03 teil_03 teil_03 teil_04 teil_04 teil_04"
						 "foot foot foot foot foot foot foot foot foot foot foot foot";
 }
}

		header, nav, main, article, section, section_unten, aside, footer {
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			padding: 5px;
			margin: 5px;
			font-size: smaller;
		}
		
		p.smaller {
			font-size:smaller;
		}
		
		ul,ol,dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
			padding: 0;
			margin:0;
		}
		ol.innen {
			padding: 10px;
			margin: 10px;
			font-size:smaller;
			list-style-position: outside;
			list-style-type: decimal;
		}
		
		ol.punkte {
			padding: 10px;
			margin: 10px;
			font-size: smaller;
			list-style-position: outside;
			list-style-type: disc;
			font-weight: bold;
		}
		
		header {
			background: #799bbe;
			border-color: #0a5c93;
  grid-area: head;	
		}

		nav {
			background: #d7d7d7;
			border-color: #0a5c93;
  grid-area: nav;
	
		}
		
		nav_quer {
			display: inline;
			background: #f8f864;
			border-color: #0a5c93;
			font-size: smaller;
			text-align: center;
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			padding: 2px;
			margin: 2px;
  grid-area: quer;
	
		}

		#topnav {
			/*align: bottom;*/
			display: inline-block;
			border-color: #0a5c93;
  grid-area: tnav;
		}
		
		#bottomnav {
	/*align: bottom;*/
	display: block;
	border-color: #0a5c93;
	grid-area: bnav;
		}
				
		#rotario {
			background: #fca201;
			border-color: #0a5c93;
  grid-area: rot;
		
		}

		article {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: main;				
		}
		
		aside {
			background: #d7d7d7;
			border-color: #0a5c93;
  grid-area: aside;
			}
		
		#news {
			background: #fca201;
			border-color: #0a5c93;
  grid-area: news;			
			}
			
		section {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: sect;
		}
		
		#section_unten {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: sect_u;
		}
		
		#section_retro {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: retro;
		}
		
		#teil_01 {
			display: block;
			margin-left: auto;
    		margin-right: auto;
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_01;
		}
		
		#teil_02 {
			display: block;
			margin-left: auto;
    		margin-right: auto;
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_02;
		}
		
		#teil_03 {
			display: block;
			margin-left: auto;
    		margin-right: auto;
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_03;
		}
		
		#teil_04 {
			display: block;
			margin-left: auto;
    		margin-right: auto;
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_04;
		}	
		
		
		footer {
			background: #d5d5d5;
			border-color: #0a5c93;
  grid-area: foot;				
		}
		
		img {
			max-width: 100%;
			height: auto;
			border-color: #0a5c93;
			border-radius: 2%;
		}
		
		div.polaroid {
			  width: 100%;
			  background-color: #efefef;
			  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			  margin-bottom: 10px;
		}

		div.container {
			text-align: left;
			padding: 5px 10px;
			/*font-size: inherit;*/
		}
		

		
/* ~~ Stile für die Navigationslisten (können entfernt werden, wenn Sie ein vordefiniertes Ausklappmenü wie Spry verwenden) ~~ */
ul.nav {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	border-top: 1px solid #0a5c93; /* Hiermit wird der obere Rand für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rand im LI-Element platziert. */
	border-left: 1px solid #0a5c93;
	border-right: 1px solid #0a5c93;
	margin-bottom: 5px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
	}
ul.nav li {
	border-bottom: 1px solid #0a5c93; /* Hiermit wird die Trennung der Schaltflächen erstellt. */
}
ul.nav a, ul.nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
	padding: 5px 5px 5px 15px;
	display: block; /* Hiermit werden die Blockeigenschaften für den Hyperlink angegeben, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
	text-decoration: none;
	background-color: #799bbe;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
	background-color: #6F7D94;
	color: #FFF;
}

/* Beginn nav_quer */		
ul.nav_quer {
	text-align: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*width: 100%; */
}

ul.nav_quer li a {
	display: inline-block;
	color: #fff;
	padding: 4px 6px;
	text-decoration: none;
}

ul.nav_quer li {
	display: inline-block;
	float: center;
	border: 1px solid #555;
}

ul.nav_quer li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.nav_quer li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

ul.nav_quer a {
	display: inline-block;
	padding: 8px;
	background-color: #799bbe;
}

/* Beginn topnav */		
ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*width: 100%; */
}

ul.topnav li a {
	display: inline-block;
	color: #000;
	padding: 4px 6px;
	text-decoration: none;
}

ul.topnav li {
	display: inline-block;
	float: right;
	border: 1px solid #555;
}

ul.topnav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.topnav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

ul.topnav a {
	display: inline-block;
	padding: 8px;
	background-color: #d5d5d5;
}



/* Beginn bottomnav */
ul.bottomnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*width: 100%; */
}

ul.bottomnav li a {
	display: inline-block;
	color: #000;
	padding: 4px 6px;
	text-decoration: none;
}

ul.bottomnav li {
	display: inline-block;
	float: right;
	border: 1px solid #555;
}

ul.bottomnav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.bottomnav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

ul.bottomnav a {
	display: inline-block;
	padding: 8px;
	background-color: #d5d5d5;
}

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin: 5px auto}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1250px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}