/*  ================================================================================== */
/*                      Mobile und  Desktop Version                                    */
/*  ================================================================================== */

/*  ======== Body ================== */  
  body {
	overflow-y: scroll;
}


/*  ======== html ================== */  
html, body {
	max-width:		65em;
	margin-left:		auto;
	margin-right:		auto;
	line-height:		1.5em;
	font-size:		1em;
	font-family:		"helvetica", sans-serif;
	background-image:	url(../images/backgr_gruen.png);
}


/*  ======= CONTAINER Kopfzeile  ================== */
#kopfzeile {
	border-bottom:		1px solid #116600;
	text-align:		center;
}

/*  ======== Motivfoto ================== */  
#m_foto img{
	max-width:			80%; 
	border-radius:			5px;
	box-shadow:			1px 2px 4px rgba(0,0,0,.4);
}



#mehrspaltig { 
	flex:			1;
	display:		flex;
	flex-direction:		row;
}





/*  ======== CONTAINER Content  =========================== */  
#content {
	flex:				5;
	float:				left;
	padding:			2em 0.5em 3em 1em;
	min-height:			23em;
	background-color:		white;
}



/* ========= Fußzeile =========================== */
#footer { /* Telefon - E-Mail */
	text-align: 		center;
	background-color:	white;
	border-top:		1px solid #116600;
	border-bottom:		1px solid #116600;
	background-image:	url(../images/backgr_gruen.png);
}


a.TelMail{	/*  ======== Tel.-Nr. und Mail-Adresse  =========================== */
	text-decoration: 	none;
	font-weight:		bold;
	color: 			black;
}


#letzteZeile {
	border-top:		1px solid #116600;
	line-height:		1.2em;
}


a.Impressum{	/*  ======== Letzte Zeile: Anfahrt / Datenschutz / Impressum  =========================== */
	font-size:		0.9em;
	color: 			black;
	text-decoration: 	none;
}



/*  ======= Überschrift für Themen im Content ================== */
h1 {
	font-size:			30px;
	margin-bottom:		1em;
	text-align: 		center;
}


/*  ======= Überschrift für Themen im Content ================== */
h2 {
	font-size:			1.3em;
	margin-top:			2em;
	margin-bottom:			0.5em;
	color:				black;
}


/*  ======= Überschrift für Themen in Datenschutzerklärung ================== */
h3 {
	font:				1.1em;
	font-weight:			bold;
	color:				white;
	margin:				2.5em 0 1em 0;
	background-color:		#116600;
	padding:			3px 0 3px 7px;
}



/*  ======== Linie im Footer ================== */  
hr{
	background-color:		#116600;
	color:				#116600;
	border:				#116600;
	height:				1px;
}


nav a:hover {	/*  ======== DESKTOP + MOBIL: hover Menüpunkt ======== */
	background-color:	#dbdbdb;
}

/*  ====================== DESKTOP + MOBIL: aktueller Menüpunkt ============ */
#start 		#menuStart a, 
#Angebote	#menuAngebote a,
#Meine_Vita	#Meine_Vita a,
#anfahrt	#menuAnfahrt a,
#kurzinfo	#menuKurzinfo a,
#daten		#menuDaten a,
#vorteile	#menuVorteile a,
#leer		#menuLeer a,
#impressum	#menuImpressum a
	{
	font-weight:		bold;
	Color:			white;
	background-color: 	#116600;
}


/*  ================================================================================== */
/*                            Mobile Version  bis 600 px                               */
/*  ================================================================================== */
@media (max-width: 600px) {



/*  ======= CONTAINER für Foto über Menü  ================== */
#fotounterkopf {
	text-align:		center;
	padding-top:		1em;
	padding-bottom: 	1em;
	border-bottom:		2px solid #A52A2A; 
	background-color:	#FFEFD5;
}


#fotomenu{display:		none;}


#content {
	padding:		4em 0.4em 3em 0.4em;
}


#footer{
	position: 		sticky;		/*  Damit die Fußzeile unten fest angehängt bleibt */
	bottom:			0px;		/*  Damit die Fußzeile unten fest angehängt bleibt */
}


nav ul {	/*  == MOBIL Der Menükasten == */  
	left: 				-250%;
	width: 				37em;
	position: 			fixed;
	top: 				0em;
	list-style-type:		none;
	background-color: 		white; 
	border:	  			0px solid  black;
	margin: 			0 0 1em 0;
}



h6{		/*  == MOBIL Ueberschrift über Menü == */   
	color:				black;
	font-size:			1.7em; 
	font-weight:			bold;
	font-style:			normal;
	text-align:			left;
	padding:			0.5em 1em 0.5em 1em;
	border-bottom:			1px solid black;
	border-top:			1px solid black;
	background: 			#ddffdd;
}

nav ul li a {	/*  == MOBIL Die Menüfelder == */
	display:			block;
	font-style:			normal;
	font-weight:			normal;
	font-size:			1.1em;
	color:				Black;
	text-decoration:		none;
	padding: 			0 0 0 1.5em;
	margin: 			0em;
	text-align: 			left ;
	line-height: 			2.2em;
	background: 			white;
	border-top:		0px solid black;
	border-bottom:		1px solid black;
}

/*  ======== MOBIL: letzter Menüpunkt ======== */

nav ul li:last-child a {
	border-bottom:			1px solid  black;
	margin-bottom: 			23em;
}


/*  ====== Hamburger-Icon ======== */
nav a#nav-m img, nav a.close img {   /*  ==  Platz für Hamburger-Menü == */  
	width: 		3.5em;
	right: 		0em;
	top: 		0.7em;
	position:	fixed;
}

nav > .close, nav a#nav-m:target {
	display: none;
}

nav a:target ~ ul, nav a:target ~ .close {       
	display: inline-block;

}

nav a:target ~ .close {   /*  ==  Hamburger-Icon mit Menü == */  
	position:		absolute; 
	left:			100%;
	margin-top:		0em;
	margin-left:	-5em;

}

nav a:target ~ ul {
	left: 0em;
}
}

/*  ================================================================================== */
/*                   ENDE   Mobile Version  bis 600 px                                 */
/*  ================================================================================== */





/*  ================================================================================== */
/*                            Desktop Version  > 601 px                                */
/*  ================================================================================== */
@media (min-width: 601px) {

/*-- Hamburger Icon ausblenden -- */
nav a#nav-m,  nav a.close {display: none;}

#fotounterkopf{display: 	none;}




/*  ======= CONTAINER für Foto und  Menü  ================== */
#fotomenu {
	flex:			0;
	text-align:		center;
	padding-top:		2em;
	flex-basis:		11.5em;
	padding-left: 		1.3em;
background: white;
}


#site {
	height:		auto; 
	min-height:	100%;
}



#content { /*  ======== Inhalt  =========================== */
	padding-top:				2em;
	padding-right:				2.5em;
	padding-left:				2.5em;
}




/*  ============================================================================ */  

nav ul {			/*  ======== DESKTOP Der Menükasten ======== */  
	position:		absolute;
	width:			9.5em;
	padding:		0 1em 0 2.5em;
	top:			22em;
background: ;
}


h6{				/*  ======== DESKTOP Ueberschrift über Menü ======== */  
	font-size:		1.3em; 
	color: 			#116600;
	font-style: 		italic;
	font-weight: 		bold;
	padding-left:		0.2em;
	padding-bottom: 	0.8em;
	margin: 		2em 0 0 0; 
	text-align: 		center;
}


nav ul li a {			/*  ======== DESKTOP Die Menüfelder  ======== */  
	display:		block;
	font-style: 		normal;
	font-size:		1em; 
	Color:			Black;
	text-decoration: 	none;
	text-align:		center;
	line-height:		1.8em;
	margin:			0 0 0.5em 0;
	padding:		0em;
	font-weight:		bold;
	border-bottom:		1px solid black;
	background-color:	white;
	border:			2px solid black;
	border-radius:		0.5em;
}

#footer {/* =========  Fußzeile  Desktop =========================== */
	background-color: 	white;
	background-image:	none;	
}

#letzteZeile {
	line-height:		1.5em;
}

}


/*  ================================================================================== */ 
/*               Mitte mit runden Ecken ab 65em                                        */ 
/*  ================================================================================== */ 

@media (min-width: 65em) {

body {	
	margin:				1em;
}


#kopfzeile {/*  =======  Kopfzeile großer Desktop   ================== */
	border-radius:		3em 3em 0em 0em;
	border-top:		0px solid #116600;
	border-left:		0px solid #116600;
	border-right:		0px solid #116600;
	border-bottom:		0px solid #116600;
}


#fotomenu { /*  =======  Fotomenü großer Desktop  ================== */
	border-left:		1px solid #116600;
	border-radius:		3em 0em 0em 0em;
	border-top:		1px solid #116600;
}


#content { /*  =======  Inhalt großer Desktop ================== */
	border-top:		1px solid #116600;
	border-right:		1px solid #116600;
	border-radius:		0em 3em 0em 0em;
}


#footer {/* =========  Fußzeile  großer Desktop =========================== */
	border-radius:		0em 0em 3em 3em;
	border-left:		1px solid #116600;
	border-right:		1px solid #116600;
        padding: 		0 0.5em 0 0.5em;
	line-height:		1.8em;
}


}