/*GRID*/
/* amatic-sc-regular - latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../schriftarten/amatic-sc-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
       url('../schriftarten/amatic-sc-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriftarten/amatic-sc-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriftarten/amatic-sc-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../schriftarten/amatic-sc-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriftarten/amatic-sc-v13-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
/* amatic-sc-700 - latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/amatic-sc-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Bold'), local('AmaticSC-Bold'),
       url('../schriftarten/amatic-sc-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../schriftarten/amatic-sc-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../schriftarten/amatic-sc-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../schriftarten/amatic-sc-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../schriftarten/amatic-sc-v13-latin-700.svg#AmaticSC') format('svg'); /* Legacy iOS */
}

*		{	
			font-family: sans-serif;
		}
		
.header {
  display: table;
  width: 100%;
  height: 3em;
}

.table-cell, first-table-cell {
  display: table-cell;
  vertical-align: middle;
}
.first-table-cell {
	width:1%;
	background-color: #eee;
}

.image-size-large{
height:100px;

}


h1,h2,h3{	font-family: 'Amatic SC';
			font-family: 'sans-serif';
			background-color: #FFFFFF;
			color: #000000;
			font-weight: 700;
			text-shadow: 0px -1px black;
		}
		
body	{
			background-color: #FFFFFF;
			color: #000000;
			margin: 10px auto;
			display: grid;
			min-height: 100vh;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: min-content min-content 1fr min-content;
			grid-template-areas:	"head head head head head head head head head head head head"
									"nav nav nav nav nav nav nav nav nav nav nav nav"
									"main main main main main main main main main main main main"
									"foot foot foot foot foot foot foot foot foot foot foot foot";
		}


/* Linkfarben für BBS 2 eingefügt */
a:link {
 color: #33ccff;
}
a:visited {
 color: #cecece;
}
a:hover {
 color: #336666;
}
a:active {
 color: #339999;
}

header, nav, main, footer {
			padding-left: 10px;
			padding-right: 10px;
		}

header	{
			grid-area: head;
			background-color: #FFFFFF;
			color: #162a83; /*BBS-Gelb*/
			border-top: 20px solid #162a83; /*BBS-Gelb*/
			border-bottom: 20px solid #162a83; /*BBS-Gelb*/
		}

nav 	{
			grid-area: nav;			
		}
		
main 	{
			grid-area: main;
			background-color: #FFFFFF;
			color: #000000;
		}

footer	{
			grid-area: foot;
			background-color:#162a83; /*#FCD21C; BBS-Gelb*/
			color: #FFFFFF; /*war mal schwarz, bei dem Hintergrund ist weiss besser #000000 */
		}
footer p a 	{
	text-decoration: none;
	color: inherit;
}




.hinweis {
	grid-column: 1 / -1;
	grid-row: auto;
	color: #aa2525;
}

button.bildschirmwechsel {
	background-color:#162a83; /* #FCD21C; /*BBS-Gelb*/
	color: #FFFFFF; /* Für BBS II Northeim geändert auf weiss, weil der Button Hintergrund zu dunkel ist */
	padding: 20px;
						}
		
/*Navigation*/
nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center; 
	align-content:center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

nav ul li {
	flex-grow: 1;
}

nav ul li a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 15px;
	text-decoration: none;
}

nav ul li a:hover	{
						background-color: #162a83; /*#FCD21C;*/
						color: #FFFFFF;
					}

/*Header*/
header h1 img		{
						width: 5em;
					}

/*Formulare*/
form {
	display: grid;
	grid-template-columns: [spalte_1] 1fr;
	grid-gap: 10px;
}
.spalte_1 {
	grid-column: spalte_1;
	grid-row: auto;
}
.span_2 {
	grid-column: span 2;
}
.span_all {
	grid-column: 1 / -1;
}

@media (min-width: 30em) { 
	form {
		display: grid;
		grid-template-columns: [spalte_1] 1fr [spalte_2] 1fr;
		grid-gap: 10px;
	}
}
@media (min-width: 60em) { 
	form {
		display: grid;
		grid-template-columns: [spalte_1] 1fr [spalte_2] 1fr [spalte_3] 1fr [spalte_4] 1fr;
		grid-gap: 10px;
	}
}
@media (min-width: 90em) { 
	form {
		display: grid;
		grid-template-columns: [spalte_1] 1fr [spalte_2] 1fr [spalte_3] 1fr [spalte_4] 1fr [spalte_5] 1fr [spalte_6] 1fr;
		grid-gap: 10px;
	}
}