body{
	margin: 1em auto;
	font-family: 
		-apple-system, /* Safari auf OS X oder iOS (San Francisco) */
		BlinkMacSystemFont, /* Chrome < 56 auf OS X (San Francisco) */
		"Segoe UI", /* Windows */
		Roboto, /* Android */
		Verdana, /*Fallback */
		sans-serif;
	font-size: 0.8em;
	color: black;
	vertical-align: middle;
	hyphens: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:	"head head "
									"nav nav"
									"main main"
									"news aside"
									"foot foot";
}

@media (min-width: 30em) { 
	body{
	font-size: 1.0em;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:	"head head head "
									"nav news aside"
									"main main main"
									"foot foot foot";
	}
}

@media (min-width: 60em) { 
	body{
	font-size: 1.2em;
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas:	"head head head head"
										"nav main main news"
										"nav main main aside"
										"foot foot foot foot";
	max-width: 90%;
	min-height: 90%;
	}
}

header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0.5em;
	padding: 0.25em;
	margin: 0.25em;
}

header {
	grid-area: head;
	justify-items: center;
	text-align: center;
	min-height: 5em;
	background-image: url('../images/logokopf.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: red;
}

nav {
	grid-area: nav;
	background-image: linear-gradient(90deg, #F5BCA9, #F8E6E0);
}

article {
	grid-area: main;
	background-color: #F8E6E0;
}

article .bild {
	max-width: 29%;
	height: auto;
	border-radius: 0.5em;
	padding: 0.25em;
	margin: 0.25em;
}

article .karte {
	max-height: 30em;
	max-width: auto;
	border-radius: 0.5em;
}

@media (min-width: 30em) {
	article .bild {
		max-width: 49%;
		height: auto;
	}
}

@media (min-width: 50em) {
	article .bild {
		max-width: 90%;
		height: auto;
	}
}

aside {
	grid-area: aside;
	background-image: linear-gradient(90deg, #F8E6E0, #F5BCA9);
}

#news {
	grid-area: news;
	background-image: linear-gradient(90deg, #F8E6E0, #F5BCA9);
}

footer {
	grid-area: foot;
	justify-items: center;
	color: white;
	background: red;
	min-height: 5em;
}

#mbmcookie {
	top: 15px;
	z-index:10000;
	width: auto;
	background: #FFD1D1;
	color: black;
	border: 2px dotted black;
	border-radius: 0.3em;
	padding: 1.5em;
	font-size: 1rem;
}

/* Definitionen für Datenschutz-Cookie */
#mbmcookie a.button {
	margin-right: 5px;
	cursor: pointer;
	color: red;
	background: #ccc;
	padding: 4px;
	margin-left: 10px;
	border-radius: 0.3em;
	font-weight: bold;
	float: right;
}

#mbmcookie a.button:hover {
	background-color: #aaa;
}

#mbmcookie p.cookiemessage {
	display: block;
	padding: 0;
	margin: 0;
}

/* Definitionen für menuhandler .php */
#menu {
	display: block;
	text-align: left;
	vertical-align: middle;
	}

#menu a, #menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
	}

#menu p {
	text-indent: 0.5em;
	border: 1px solid black;
	border-radius: 0.3em;
	background: transparent;
	}

#menu p:hover {
	background-image: linear-gradient(90deg, #FF0000, transparent);
	}

#menu p.aktuell {
	background-image: linear-gradient(90deg, transparent, #FF0000);
	}

#menu p.ebene1 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	}

#menu p.ebene2 {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	}

#menu p.ebene3 {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	}

#menu p.ebene4 {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	}

/* Webstatistik */
.counter_table {
	margin-top: 1em;
	overflow-x: visible;
	overflow-y: visible;
}
.header {
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	border-bottom: 1px solid black;
}
.data {
	color: #555555;
	font-size: 0.7rem;
	line-height: 1.3em;
}
.module {
	text-align: left;
	padding: 0px 5px 0px 3px;
}
.hits {
	text-align: right;
	padding: 0px 3px 0px 5px;
}
.user {
	font-weight: bold;
}
.footer {
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	border-top: 1px solid black;
}

/* iframe für Wettereinblendung */
#wetter, #insertWidget {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	background: transparent;
	max-width: 95%;
	max-height: auto;
	padding-left: 0px;
	border: 0px;
	}

#zaehler {
	padding-top: 30px;
	height: auto;
	}

/* Tabelle für Kontaktseite */
#kontakt {
	font-size: 1.0rem;
  }

#kontakt ul {
  list-style-type: none;
  padding: 0px;
  width: 95%;
  text-align: center;
  }

#kontakt li {
	vertical-align: middle;
	list-style-type: none;
	margin: 5px;
	float: left;
	width: 45%;
	min-height: 3em;
	border: 1px solid black;
	border-radius: 0.3em;
  }

#kontakt li img {
	max-width: 2.5em;
	height: auto;
  }

/* Feld-Definitionen für Anzeige der Mailempfänger */
#mailbox1 {
	float: left;
	top: 10px;
	left: 5px;
	padding: 1px;
	background-color: #FFFFFF;
	font-size: 0.8rem;
	border: 1px solid black;
	border-radius: 0.3em;
	width: 25%;
	height: 95%;
	overflow: scroll;
	}

/* Feld-Definitionen für Mailinhalt */
#mailbox2 {
	float: left;
	top: 10px;
	margin-left: 5px;
	padding: 1px;
	background-color: #FFFFFF;
	font: 0.8rem;
	border: 1px solid black;
	border-radius: 0.3em;
	width: 70%;
	height: auto;
	}

input[type=text], input[type=file], input[type=password] {
	font-weight: bold;
	border: 1px solid #000;
	border-radius: 0.3em;
	vertical-align: middle;
	width: 70%;
	min-height: 1.5em;
	padding-left: 0.5em;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color: #F5BCA9;
}
  
textarea {
	font-size: 1.4rem;
	font-weight: bold;
	border: 1px solid #000;
	border-radius: 0.3em;
	width: 70%;
	padding-left: 0.5em;
}

.inputField {
	font-weight: bold;
	border: 1px solid #000;
	border-radius: 0.3em;
	vertical-align: middle;
	width: 70%;
	min-height: 1.5em;
	padding-left: 0.5em;
	}

.errorField {
	font-size: 1rem;
	font-weight: bold;
	background-color: #FFDCDC;
	border: 1px solid red;
	width: 70%;
	min-height: 1.5em;
	padding-left: 0.5em;
	}

.errorTable {
	font-size: 1rem;
	font-weight: bold;
	color: red;
	background-color: #E2E1E1;
	border: 1px solid red;
	border-radius: 0.3em;
	width: 70%;
	}

.succTable {
	font-size: 1rem;
	font-weight: bold;
	color: green;
	background-color: #DAFFD1;
	border: 1px solid green;
	border-radius: 0.3em;
	width: 70%;
	}
/* Ende Mailinhalt */

fieldset {
	vertical-align:middle;
	color: black;
	border: 1px solid black;
	border-radius: 0.3em;
	padding: 3px;
	top: 30px;
	width: 90%;
  }



/* Tabellen für Teilnehmerdaten */
#daten table {
	width: 95%;
	border-collapse: collapse;  
	}

#daten tr {
	padding: 1px;
	vertical-align: middle;
	text-align: center;
	}

#daten th {
	width: 30%;
	padding: 1px;
	border: 1px solid black;
	border-radius: 0.3em;
	vertical-align: middle;
	text-align: center;
	min-height: 1.5em;
	color: red;
	font: italic 1.0rem;
	}

#daten td {
	width: auto;
	padding: 1px;
	border: 1px solid black;
	border-radius: 0.3em;
	vertical-align: middle;
	text-align: center;
	color: black;
	font-size: 1rem;
	font-weight: bold;
	min-height: 1.5em;
	}

/* Allgmeine Deklarationen */
a, a:visited {
	color: red;
	text-decoration: none;
	font-size: 1rem;
}
  
.formular2 {
	width: 100%;
	color: #000000;
	font-size: 1rem;
	font-weight: bold;
	vertical-align: middle;
  }

.zeile1 tr, .zeile1 td {
	margin: 3px;
	background-color: #FFD6D6;
	line-height: 100%;
	border-radius: 0.3em;
	padding: 2px;
  }

.zeile2 tr, .zeile2 td {
	margin: 3px;
	background-color: #ffffff;
	line-height: 100%;
	border-radius: 0.3em;
	padding: 2px;
	}

	/* Tabelle zu Detail der Treffen */
.zeile11 {
	margin: 3px;
	background-color: #FFD6D6;
	font-size: 1.2rem;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	min-height: 1.5em;
	border: 1px solid black;
	border-radius: 0.3em;
	padding: 5px;
	width: 95%;
  }

.zeile12 {
	float: left;
	margin: 3px;
	font-size: 1rem;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	min-height: 1.5em;
	border: 1px solid black;
	border-radius: 0.3em;
	padding: 5px;
	width: 46%;
	  }

.zeile13 {
	float: left;
	margin: 3px;
	font-size: 1.2rem;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	min-height: 1.5em;
	border: 1px solid black;
	border-radius: 0.3em;
	padding: 5px;
	width: 46%;
	}

.mitte {
  top: 30px;
  left: 5px;
  }

.kopf {
  position: absolute;
  top: 5px;
  left: 420px;
  color: black;
  }
  
.lirand {
  margin-left: 20px;
  }
  
.rerand {
  margin-left: 480px;
  }

.umlinks {
	float: left;
	margin: 3px;
	}
  
.umrechts {
	float: right;
	margin: 8px;
	}

.einruecken {
	text-indent: 15px;
  }

.hinweis {
  color: #f00;
	font-size: 0.8rem;
	font-weight: bold;
  vertical-align: middle;
  text-align: left;
  }


.caption {
	text-align: center;
	color: black;
	font-size: 2rem;
	font-weight: bold;
	}
  
.rot {
  color: red;
  vertical-align: top;
  }
  
.gelb {
  color: yellow;
  vertical-align: top;
  }
  
.blau {
  color: blue;
  vertical-align: top;
  }
  
.gruen {
  color: green;
  vertical-align: top;
  }
  
.donic {
	color: #7fff00;
	vertical-align: top;
	}
  
.schwarz {
	color: black;
	vertical-align: top;
	}

.gross {
	font-size: 1.2rem;
	font-weight: bold;
  }

.klein {
	font-size: 0.6rem;
	font-weight: bold;
  }

.unterstrich {
	text-decoration: underline;
}

.scrollen {
	overflow: scroll;
}

h1 {
	font-size: 2rem;
	font-weight: bold;
  }
  
h2 {
	font-size: 1.8rem;
	font-weight: bold;
  }
  
h3 {
	font-size: 1.6rem;
	font-weight: bold;
  }
  
h4 {
	font-size: 1.4rem;
	font-weight: bold;
  }

/* Deklarationen für Lauftext */
.marqueebox1{
	font-weight: bold;
	max-width: 75%;
	min-height: 1.3em;
	background: transparent;
	overflow: hidden;
	border-radius: 0.3px;
	transform: rotate(-2deg);
	-webkit-animation: colr 1s infinite linear;
	animation: colr 1s infinite linear;
}

.marqueebox1 span{
	position: relative;
	white-space: normal;
	left: 100%;
	-webkit-animation: marquee_h 6s linear infinite;
	animation: marquee_h 6s linear infinite;
}

.marqueebox1 span:hover{
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.marqueebox1 img{
	max-height: 1.5em;
	max-width: 1.5em;
}

@-webkit-keyframes marquee_h{
	to {left:-100%;}
}

@keyframes marquee_h{
	to {left:-100%;}
}

@-webkit-keyframes colr{
	from{box-shadow:0 0 5px 5px red;}
	50% {box-shadow:0 0 12px 5px red;}
	to {box-shadow:0 0 5px 5px red;}
}

@keyframes colr{
	from{box-shadow:0 0 5px 5px red;}
	50% {box-shadow:0 0 12px 5px red;}
	to {box-shadow:0 0 5px 5px red;}
}

/* Mobile first - für schmale Viewports */
#galerie ul,li {
	margin: 0.05em;
	padding: 0.05em;
}

#galerie li {
	display: inline-block;
	list-style-type: none;
	width: 51%;
}

#galerie img {
	padding: 0;
	margin: 0;
	height: auto;
	width: 100%; /* Bild passt sich an verfügbaren Raum im li ann */
}

#galerie button {
	padding: 0.1em;
	background-color: transparent;
	border: none;
}

#galerie figcaption {
	color: white;
	background: red;
	padding: 0.1em;
	text-align: center;
	margin-bottom: 0.3em;
	border-radius: 0.3em;
	font-size: 0.9rem;
	vertical-align: middle;
	text-align: center;
	max-width: 9.5em;
}

		/* Large screens */
@media all and (min-width: 31em) {
	#galerie li {
		width: auto;
		height: auto;
	}
 
	#galerie button {
		background-color: transparent;
		margin: 0.75em;
		margin-bottom: 1em;
		width: 10em;
		height: 13em;
		position: relative;
	}
 
	#galerie button img {
		border: 1px solid black;
		border-radius: 0.3em;
		position: absolute;
		left: -4%;
		top: -4%;
		z-index: 1;
		box-shadow: none;
		width: 10em;
		transition: all 1s;
	}
 
	#galerie button:focus img, 
	#galerie button:hover img {
		border: 3px solid black;
		border-radius: 0.3em;
		position: absolute;
		left: -175%;
		top: -4%;
		width: 350%;
		z-index: 5;
		transition: all 2s;
	}
}