@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"
					   "news rot"
					   "nav aside"               		   "main main"
					   "sect_video sect_video"
					   "sect_u sect_u"
					   "teil_01 teil_01"
					   "teil_02 teil_02"
					   "teil_03 teil_03"
					   "teil_04 teil_04"
					   "teil_05 teil_05"
					   "teil_06 teil_06"
					   "retro retro"
					   "foot foot";
}

@media (min-width: 40em) { 
  body{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "head head head "
						 "sect sect sect"
						 "news rot nav"
						 "main main aside"
						 "sect_video sect_video sect_video" 
						 "sect_u sect_u sect_u"
						 "teil_01 teil_02 teil_03"
						 "teil_04 teil_05 teil_06"
						 "retro retro retro" 
		  			     "foot foot foot";
 }
}
/*
@media (min-width: 50em) { 
  body{
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "head head head head head"
						 "nav  main main main news"
                         "nav  main main main aside"
						 "sect sect sect sect sect" 
		  			     "foot foot 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"
						 "rot rot rot main main main main main main news news news"
                         "nav nav nav main main main main main main aside aside aside"
						 "sect_video sect_video sect_video sect_video sect_video sect_video sect_video sect_video sect_video sect_video sect_video sect_video"
						 "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_01 teil_02 teil_02 teil_02 teil_02 teil_03 teil_03 teil_03 teil_03"
						 "teil_04 teil_04 teil_04 teil_04 teil_05 teil_05 teil_05 teil_05 teil_06 teil_06 teil_06 teil_06"
						 "retro retro retro retro retro retro retro retro retro retro retro retro"
		  			     "foot foot foot foot foot foot foot foot foot foot foot foot";
 }
}

		header, nav, main, article, section, sect_video section_unten, aside, footer {
			border-radius: 0px 0.5em 0.5em;
			border: 1px solid;
			padding: 5px;
			margin: 5px;
			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;
		}

		header {
			background: #799bbe;
			border-color: #0a5c93;
  grid-area: head;	
		}

		nav {
			background: #daf4fa;
			border-color: #0a5c93;
  grid-area: nav;
	
		}

		#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: #0097e8;
			border-color: #0a5c93;
  grid-area: rot;
		
		}

		article {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: main;				
		}
		
		aside {
			background: #daf4fa;;
			border-color: #0a5c93;
  grid-area: aside;
			}
		
		#news {
			background: #0097e8;
			border-color: #0a5c93;
  grid-area: news;			
			}
			
		#topnav {
			/*align: bottom;*/
			display: inline-block;
			border-color: #0a5c93;
  grid-area: tnav;
		}

		section {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: sect;
		}
		
		#sect_video {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: sect_video;
		}
	
		#section_unten {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: sect_u;
		}
		
		#section_retro {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: retro;
		}
		
		#teil_01 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_01;
		}
		
		#teil_02 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_02;
		}
		
		#teil_03 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_03;
		}
		
		#teil_04 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_04;
		}	
		#teil_05 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_05;
		}	
		#teil_06 {
			background: #efefef;
			border-color: #0a5c93;
  grid-area: teil_06;
		}	
		
		footer {
			background: #d5d5d5;
			border-color: #0a5c93;
  grid-area: foot;				
		}
		
		img {
			max-width: 100%;
			height: auto;
			border-color: #0a5c93;
			border-radius: 2%;
			padding-bottom: 3px;
		}

		video {
			max-width: 90%;
			height: auto;
		}
		
		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 #666; /* 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 #666;
	border-right: 1px solid #666;
	margin-bottom: 5px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
	}
ul.nav li {
	border-bottom: 1px solid #666; /* 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: #FBE170;
	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 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}
}