/* neu */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	position: relative;
}
/* end neu */
body        { 
	background-color: #e0f2e9; 
	margin: 0; 
	padding: 0; 
	/* right: 41em; */ 
	width: 100vw;
}
#wrap   { 
	color: #2a2a2a; 
	font-family: Arial, Helvetica, sans-serif; 
	/* width: calc(100vw - 12px) ; */
	max-width: 950px;
	min-height: 100vh;
	margin-inline: auto;
	/* implementing grid  */
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
	grid-template-rows: max-content max-content max-content 1fr max-content;
	grid-template-areas: 
	"header"
	"nav"
	"main"
	"aside"
	"footer";
}
#wrap > * {
	min-width: 0;
}
h1         { 
	text-align: left; 
	margin: 0 0 7px 0; 
	padding: 0 ;
}
/* neu */
/* header selector (better: in <header> instead of <h1> */
h1:first-of-type {
	grid-area: header;
}
h1 > a > img {
	max-width: 100%;
	object-fit: cover;
	object-position: 2% 100%;
}
/* slide in slogan */
#slide-in-slogan {
	width: 122px; /* vorher 124 */
	position: absolute;
	right: 8px;  /* vorher 7 */
	top: -18px;
	}
/* end slide in slogan */

/* end neu */
p      { 
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 17px; 
	margin: 0; 
	padding: 0 ;
}
a:link    { color: #2a2a2a; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; text-decoration: none }
a:visited  { color: #2a2a2a; text-decoration: none }
a:hover  { color: #007f50; text-decoration: none }
a:active  { color: #2a2a2a; text-decoration: none }
ul#Navigation   { 
	display: none;
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 17px; 
	margin: 0; 
	padding: 0; 
	/* width: 300px;  */
	/* float: left ; */
}
ul#Navigation li { 
	display: block; 
	color: #7aa787; 
	font-size: 11px; 
	line-height: 17px; 
	list-style: none; 
	margin: 0; 
	padding: 7px; 
}
ul#Navigation li.unter    { color: #7aa787; text-indent: 2em; list-style-image: none; list-style-position: outside; padding: 0 }
ul#Navigation li.unteractive   { color: #7aa787; text-indent: 2em; list-style-image: none; list-style-position: outside; margin: 0; padding: 0 }
ul#Navigation a       { color: #7aa787; text-decoration: none; display: block; padding: 0 }
ul#Navigation a:link       { color: #7aa787; text-decoration: none }
ul#Navigation a:visited       { color: #7aa787; text-decoration: none }
ul#Navigation a:hover       { color: #007f50; text-decoration: none }
ul#Navigation a:active      { color: #007f50; text-decoration: none }
ul#Navigation li.active a    { color: #007f50 }
ul#Navigation li.unteractive a    { color: #007f50 }
ul#Navigation span    { color: #007f50; text-decoration: none; display: block; padding: 0.2em 0 0.2em 1.5em }

/* neu */
#Navigation {
	grid-area: nav;
}
/* end neu */

/* burger menu */
details {
	width: 30px;
	height: 30px;
	grid-area: nav;
	z-index: 1;
	display: inline;
	justify-self: flex-end;
	margin-right: 7px;
}
summary {
	list-style: none;
	display: inline;
}
summary::-webkit-details-marker {
	display: none; 
}
#burger-menu:before {
	content: url('/Buttons/burger-bars.png');
}
details[open] #burger-menu:before {
	content: url('/Buttons/burger-x.png');
}
details[open] + ul#Navigation {
	display: block;
}
/* end burger menu */
/* better: <main> */
div#Inhalt  { 
	grid-area: main;
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 17px; 
	padding: 10px; 
	max-width: 72ch;
	/* float: left;  */
	border-width: 0;
 }
div#Inhalt p     
{ font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; margin: 0; padding: 0 
}
div#Inhalt h1    
{ color: #007f50; font-size: 20px; font-family: Georgia; font-weight: normal; line-height: 23px; letter-spacing: 1px; margin: 0; padding: 0 0 20px 
}
div#Inhalt h2 
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 17px; letter-spacing: 1px; margin: 0; padding: 25px 0 10px }


/*mit abstand danach, ohne davor*/
div#Inhalt h3 
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 17px; letter-spacing: 1px; margin: 0; padding: 0 0 10px 
}

.gruen      
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 17px; margin: 0; padding: 0
}
.gruenkursiv    
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; font-weight: normal; line-height: 17px; margin: 0; float:right; 
}
.gruenname      
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 17px; margin: 0; padding: 0; float:right; 
}
/* bildunterschrift */
.bukursiv    
{ font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; font-weight: normal; line-height: 17px; margin: 0; float:right; 
} 
.gruenkursivLi    
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; font-weight: normal; line-height: 17px; margin: 0;  word-spacing: -0.1em;
}
.grueneinzug      
{ margin-left: 10px;
}

.gruenh      
{ font-weight: bold; 
}

.gruenschmal    
{ color: #007f50; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; line-height: 17px; margin: 0;  word-spacing: -0.1em;
}


/* better: <aside> */
div#rechts  { 
	grid-area: aside;
	font-size: 11px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 17px; 
	background-color: white; 
	margin: 13px 0 0 10px; 
	padding: 11px; 
	width: 180px; 
	height: fit-content;
	/* float: left;  */
	border-width: 0 ;
}

/* temporäre meldung oder besondere Hervorhebung*/
div#sonder                { 
	background-color: white; 
	color: #ce0000; 
	margin: 0 0px 35px 0px; 
	margin-top: -10px; 
	padding: 15px 15px 17px; 
	/* width: 407px;  */ 
}
div#corona h1    { color: #ce0000; font-size: 20px; font-family: Georgia; font-weight: normal; line-height: 23px; letter-spacing: 1px; margin: 0; padding: 0 0 20px }
.rot      { color: #ce0000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 17px; margin: 0; padding: 0; }
/* ende tempor�re meldung */

/* better: <footer> */
#Fusszeile  { 
	grid-area: footer;
	grid-row-end: -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-size: 11px; 
	/* background: white; */
	text-align: left; 
	margin-inline: auto;
	bottom: 0; 
	width: calc(100vw - 12px); 
	max-width: 950px;
	border-width: 0 ;
}

ul#Liste           { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; list-style-type: none; margin: 0; padding: 15px 0 20px }
ul#Liste li     { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none; margin: 0; padding: 0 }
ul#Liste1         { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none; margin: 0; padding: 0 }
ul#Liste1 li     { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background: url(Bilder/strich.png) no-repeat 0 5px; padding: 0 0 7px 10px }
ul#Liste1A    { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none; margin: 0; padding: 0 0 20px }
ul#Liste1A li   { font-size: 11px; background: url(Bilder/strich.png) no-repeat 0 5px; padding: 0 0 10px 10px }
ul#Liste2      { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none; margin: 0; padding: 0 0 20px }
ul#Liste2 li    { font-size: 11px; background: url(Bilder/strich.png) no-repeat 0 5px; padding: 0 0 0 10px }
ul#ListeRE    { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none; margin: 0; padding: 0 0 20px }
ul#ListeRE li   { font-size: 11px; padding: 0 0 10px 10px }
ul#ListeDown        { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 17px; list-style-type: none; margin: 0; padding: 0px 0 20px }

a img   { margin-bottom: 5px; border-width: 0 }

/* rechts Einzug erste Zeile */


/* Bild im Content */
.imgcon {
      max-width:100%;
      height: auto;
      }


/* in #Fusszeile */
/* all child elements in #Fusszeile */
#Fusszeile > * {
	display: inline;
	padding: 7px;
}
.button             { 
	padding-top: 0; 
	padding-bottom: 0; 
	/* padding-left: 100px;  */
	/* float: left; */ 
	border-width: 0 ;
}
.button1 { 
	/* float: left;  */
	border-width: 0;
}
.uhr      { 
	grid-column: 1 / span 2;
	display: block;
	color: #7aa787; 
	font-size: 9px; 
	line-height: 10px; 
	/* margin-right: 218px; */ 
	margin: 0 0 0 4px;
	padding: 0; 
	/* float: left;  */
	border-width: 0 ;
}
/* neu */
div[class^="butt"] > a > svg {
	margin: 0;
	width: 80px;
	height: 16px;
}
div[class^="butt"]:hover .cls-1 {
	fill: #007f50;
}
/* end: in #Fusszeile */

.linie     { 
	color: #e0f2e9;  
	border-top: 6px solid; 
	border-right: 0 solid; 
	border-bottom: 0 solid; 
	border-left: 0 solid ;
}

/* media queries */
@media screen and (min-width: 510px) {
	#wrap {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content max-content 1fr max-content;
		grid-template-areas: 
		"header header"
		"nav nav"
		"main aside"
		"footer footer";
	}
	#slide-in-slogan {
		top: -40px;
		right: 3px; /* vorher 18 */
	}
	details {
		display: none;
	}
	ul#Navigation {
		display: block;
	}
	ul#Navigation li {
		display: inline-block;
	}
	ul#Navigation li.unter,
	ul#Navigation li.unteractive
	 {
		display: block;
	}
}
@media screen and (min-width: 760px) {
	#wrap {
		grid-template-columns: 237px 500px 1fr; /* vorher 1fr 1fr 1fr; */
		grid-template-rows: max-content 1fr max-content;
		grid-template-areas: 
		"header header header"
		"nav main aside"
		"footer footer footer";
	}
	#slide-in-slogan {
		top: -63px;
	}
	details {
		display: none;
	}
	ul#Navigation {
		display: block;
	}
		ul#Navigation li {
		display: block;
	}
	#Fusszeile {
		grid-template-columns: repeat(5, 1fr);
	}
	.uhr {
		grid-column: 1 / span 1;
	}
}
/* @media screen and (min-width: 800px) {
	
} */
/* end media queries */

/* Nun für den MSIE */

/* * htnl * html body
		{
		
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: hidden;
		
		}

* html #wrap
		
		{
		
		padding: 0;
		height: 95%;
		overflow: auto;
		
		}

* html #Fusszeile
		
		{
		
		height: 5%;
		
		}
 */