/* Stylesheet für Eintracht Zaberfeld Start
  responsives Layout mit Grid Layout */

/* ====================================================  GLOBAL DEFINITION  ==================================================== */

/* alternatives Boxmodell */

*, ::before, ::after {
  box-sizing: border-box;
}
header {
	background: black;
	background-size: 100%;
	height:auto;
	margin: auto; 0;
	font: normal 1em Times New Roman serif;
	text-align: center;
	color: red}
img {
	background: white;
	border: 1px solid black;
	width: 100%;
	height: auto;}
#main {background-color: white;}
body {
  max-width: none;
  margin-top: auto;
  padding: 0 0em;
  font: normal 1em Times New Roman serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
  color: #000000; 
  background-color: #BDBDBD;
}

* {
	box-sizing: border-box;
	
}

/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
}

nav#navigation{
	float: 
    right: 2%;
	top: 100em;
}

#navigation li {
	display:inline;
    list-style-type: none;	
}

#navigation a {
    color: black;
	font-size:1em;
	font-weight: bold;
	text-decoration: none;
    text-transform: uppercase;
    margin: .5em;
	padding: 0.5em 1em;
}

#navigation li:hover a, 
#navigation li:focus a, 
#navigation li:active a {
	background: #BDBDBD linear-gradient(135deg, #aaa 0%, #fff 49%, #aaa 100%);
	color: black;
}
.mehrspaltig {
	-webkit-column-count: 3;
	-webkit-column-width: 12em;
	columns: 3 12em;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	
}
.hintergrund2 {
background-color: white;}
.hintergrund3 {
background-color: #BDBDBD;}
.chorleiter {
	background-color: white;}
#Termine {
	border-width: thin;
	border-style: solid;
	background-color: white;
	padding-right: 1em;
	float: right;
	margin-right: 3em;
}

#Termine p {
	text-align: left;
	font-family: serif;
}
a[aria-current=page]{
	background: #FFFFFF linear-gradient(135deg, #dfac20 0%, gold 49%, #dfac20 100%);
	color: black;
}
@media only screen and (min-width: 40em) {
	main,
	footer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}


@media only screen and (min-width: 60em) {
	main,
	footer {
		grid-template-columns: repeat(5, 1fr);
	}
}
#social {
	float: left;
}

#social li {
	margin: 0 20px 0 0;
	display:inline-block;;
}
	
#fb {
	background: url("...img/fb.png") no-repeat;
	float: left;
	width: 16px;
	height: 16px;
}