@charset "utf-8";

html {
    background: transparent!important;    background: pink;
}

body {
	margin: 1em auto;
	max-width: 65em;
	font-family: Arial, sans-serif;
	/* color: #333333; */
	color: navy;
}

h1, main, aside, main svg {
	border-radius: 0 8px 8px;
	border: 1px solid;
	padding: 1em;
	margin: 1em;
}

h1 {
	/* border-color: #d5d5d5; */
	border:none;
}

main {
	display: block;     /* für IE */	
	min-height: 400px;
}



/* Beginn Ergänzung */
body { 
	background-color:#C0C0C0; 
}

h3 {
	color:green;
}

ul {
	padding-left: 1em
}

a {
	text-decoration:none; 
	color:blue;
} 


article :link:focus, article :visited:focus {text-decoration:underline; color:blue; } 
article :link {text-decoration:none; color:blue;} 
article :visited {text-decoration:none; color:blue;} 
article :link:hover, article :visited:hover {text-decoration:underline; color:blue;} 
article :link:active, article :visited:active {text-decoration:none; color:blue; }

footer :link:focus, footer :visited:focus {text-decoration:underline; color:navy; } 
footer :link {text-decoration:none; color:navy;} 
footer :visited {text-decoration:none; color:navy;} 
footer :link:hover, footer :visited:hover {text-decoration:underline; color:navy;} 
footer :link:active, footer :visited:active {text-decoration:none; color:navy; }

.verweis :link:focus, .verweis :visited:focus {text-decoration:underline; color:green; } 
.verweis :link {text-decoration:none; color:green;} 
.verweis :visited {text-decoration:none; color:green;} 
.verweis :link:hover, .verweis :visited:hover {text-decoration:underline; color:green;} 
.verweis :link:active, .verweis :visited:active {text-decoration:none; color:green; }

/*******************************************************************************************************
/* Formatierung Karte */
/*******************************************************************************************************/
.marker {background-color:#ffffff;color:navy;border:2px #C0C0C0 solid; font-size:.8em;
          text-align:center; padding:1px}
.markerx {background-color:yellow;color:navy;border:2px #C0C0C0 solid; font-size:0.95em;
          text-align:center; padding:1px; font-weight:bold;}
#mapid{width: 95%; height: 500px; margin-left:10px; margin-bottom:20px;}		

/* ############################################################################################################ */
/* responsives Layout */
/* ############################################################################################################ */

body {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, section, aside, footer {
  border-radius: 0px 0.5em 0.5em;
  border: 1px solid;
  padding: 1em;
  margin: .4em;
  flex: 1 100%;
}

header {
  background: #F1F3F4;
  border-color: #d5d5d5;
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 0%;
  margin: 0 1em;
}
header nav {
  flex: 1 1 100%;
  margin: .5em 2em;
 /* border-color: #d5d5d5; */
  border:none;
}
nav ul, nav li{
  margin: 0 0.5em;
  padding: 0 0.5em;
  border: 0;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type:none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
nav a {
  display:inline-block;
  width:95%;
  /* background: #fffbf0; */
  background: white;
  /* border: 1px solid #dfac20; */
  border: 1px solid green;
  margin: 0;
  text-decoration: none;
  text-align: center;
}
nav a:link, nav a:visited {
  color:navy;	
}
nav a:hover, nav a:focus {
  background-color: #dfac20;
}

nav a[aria-current=page] {
	color:navy;
	font-weight:bold;
}
/* Anfang Ergänzung */
nav a.sprache {
  display:inline-block;
  width:95%;
  background: #F1F3F4;
  border: none;
  margin: 0;
  text-decoration: none;
  text-align: center;
}
nav a.sprache:hover, nav a.sprache:focus {
  text-decoration:underline;
}
/* Ende Ergänzung */

section {
  background: #F1F3F4;
  border-color: slateblue;
}
article {
  /*
  background: #ffede0;
  border-color: #df6c20;
  */
  background: white;
  /* border-color: #df6c20; */
  border:none;
}

aside {
  /* background: #ebf5d7; */
  background:white;
  /* border-color: #8db243; */
  border:none;
}

footer {
  background: #e4ebf2;
  border-color: #8a9da8;
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right;
}

/* Anfang Ergänzung */
input.hackbox {
  display:none;
}
.navigation {
  display:none;
}
label.mehr_lesen {
  display:inline; 			
}
input.mehr_lesen:checked ~ .navigation {
	display:inline;
}

footer ul {
  display: flex;
  flex-direction: column;
}
footer li {
  list-style-type:none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}

header {
	padding:.1em;
}
footer {
	padding-bottom: .1em;
	padding-top: .1em;
	padding-left:10%;
	padding-right:10%;
}
h1 {
	padding-bottom:.1em;
}
nav {
	padding:.1em;
}

/* Ende Ergänzung */

/* ************************************************************************* */
/* Smart Phones und Tablets mit mittlerer Auflösung */
/* ************************************************************************* */

@media all and (min-width: 42em) {
header img {
  margin-right: 50px;
}
/*
nav ul {
  flex-direction:column; 
}
nav li {
  margin: 0 10px;
  flex: 1 1 0%;
}
.navigation {
  display:flex;
}
label.mehr_lesen {
  display:none; 			
}
*/
article {
  order: 2;
}
aside {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
  flex: 1 auto;
  order: 3;
}
footer {
  order: 4;
}
footer ul {
  flex-direction: row;
}
article {
  padding-left:5%;
  padding-right:5%;
}
/* Ende Ergänzung */
}

/* ************************************************************************* */
/* Large screens */
/* ************************************************************************* */

@media all and (min-width: 54em) {
  article {    
    order: 2;
    flex: 1 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  article {
  padding-left:10%;
  padding-right:10%;
}
nav ul {
  flex-direction: row; 
}
nav li {
  margin: 0 10px;
  flex: 1 1 0%;
}
.navigation {
  display:flex;
}
label.mehr_lesen {
  display:none; 			
}
}

/* weitere individuelle Formatierungen */
table, th, td {border-color:#C0C0C0; border-style:solid; border-collapse:collapse; text-align:center; padding:5px;}


/* Formatierungen für Hauptseite (Kontaktformular) */

/* Notizfeld */
textarea{
	/* caret-color: red;   */
	width: 90%;
	height: 15em;
	border: 1px solid #cccccc;
	padding: 0.5em;
	font-family: Arial, sans-serif;
	font-size:.9em;
}	  

textarea:focus {
      background: #FFC;
}

/* Textfelder */
input[type="text"] {
	font-size:.9em;
	border: 1px solid #cccccc;
	width:90%;
	padding: 0.5em;
}
@media all and (min-width: 35em) {
	input[type="text"] {
		width:75%;
	}	
}
@media all and (min-width: 50em) {
	input[type="text"] {
		width:50%;
	}
}

input[type="text"]:focus  {
      background: #FFC;
}

/* Submit-Button */
input[type="submit"] {
   font-size: 1em; 
   padding: 5px 12px; 
   font-family: Arial, sans-serif;
   font-weight: 300;
   /* color: teal; */
   border: 1px solid silver;
   /* background-image: linear-gradient(to top, gainsboro 0%, white 90%); */
   border-radius: 20px;
   color: navy;
}