html { width: 100%; height: 100%;
	/*background-image: linear-gradient(to right, #66554D, #4E664C, #4E664C, #4B6860, #4B6860); , #85AAB8
	background-image:url(../../assets/svgs/SB-LKW-BACK-CORNER-R.svg
	*/
	background-image: linear-gradient(to right, #1C5947, #5AABA0, #5AABA0, #1C5947);
	background-repeat:no-repeat;
	background-attachment:fixed;
}
* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
  }
  body {
	min-height:240px;
	border:0;
	margin: 0 auto; /*horizental zentriert*/
	padding:0;
	text-align: center;
	letter-spacing:0.08em;
	
}
#wrapper {
	display:block;
	border:0;
	max-width: 1280px;

	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 15mm;
	padding-left: 0;
/*	overflow-y: scroll;
	scroll-behavior: smooth;*/
}


h1, h2, h3, div, p {
	border:0;
	margin:0;
	padding-top:10px;
	width: 100%;
	text-align: left;	
}

h1, h2 {
	font-family:"Times New Roman", Times, serif;
}

h1 {
	margin-bottom: 0;
	padding:10px 0 10px 0;
	background: linear-gradient(to top, rgba(51,51,51,0.92), rgba(51,51,51,0.92)), url(../../assets/jpgs/bg-flieder_01.jpg);
	/*background: linear-gradient(to top, rgba(35,107,89,0.92), rgba(35,107,89,0.92)), url(../../assets/jpgs/bg-flieder_01.jpg);*/
	background-position:left top;
	background-repeat:no-repeat;
	background-size: cover;
	line-height:1.1em;
	text-align:center;
	text-shadow: 1px 1px 2px #333;
	/*color: rgba(173,193,97,1);*/
	color: #86b44e;
	/*background-color: rgba(51,51,51,0.98);#edf5e6*/
}
h1#header img {
width: 96%;
height: auto;

}
h2 {
	text-align:right;
	color: #333333;
}
h3 {
	margin-bottom:10px;	
}
@media screen and (max-width: 240px) {
	h2 {
	font-size: 1.2em;
}
}
/*responsives grid: 2 Spalten auf eine reduzieren*/
.grid_menu_2c {
	border:0;
	margin:0;
	/*margin: 0 0 16px 0;*/
	padding: 0;
	display: -ms-grid;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));

	/*background-color: rgba(53,36,26);
	MULTI-BACKGROUND-Pic w. layer background: url(../../assets/jpgs/bg-flieder_03.jpg);
	radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)),*/
	background-color: rgb(51,51,51);
	background-position:top left;
	background-repeat:no-repeat;
	background-size: cover;
}
@media screen and (max-width: 960px) {
	.grid_menu_2c {
	grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
	}
}
.article, .biopools, .recyclinggar, .streuobstw, .pic {
	min-height:460px;
	border:0;
	margin:0;
	padding:0 16px 16px 16px;
	opacity:1 !important;	
}
.pic {
	display:block;
	padding: 0;
	overflow: hidden;
	background-size: 100%;
	background-position:bottom right;
	background-repeat:no-repeat;
	background-color: #6DC7CF;
	cursor: pointer;
}
figure {
	max-height:460px;
	position: relative;
	border:0;
	margin:0;
	padding:0;
	overflow: hidden;
}
figure > figcaption {
	position: absolute;
	left: 0;
	border:0;
	margin:0;
	padding:16px 16px 16px 16px; /*padding: 0 10px 0 10px;*/
	width: 100%;
	max-height:100%;
	background-image: linear-gradient(100deg,  rgba(173,193,97,0.7), rgba(109,199,207,0.9), rgba(22,100,7,0.7)); /*to right*/
	text-align: center;
	/*line-height: 2em;*/
	color: #000000;
	opacity: 0;
	bottom: 4em;
	transition: all 1s ease;
}

figure:hover > figcaption, figure:focus > figcaption, figure:active > figcaption {
	opacity: 1;
	bottom: 0;
	left: 0;

}

.article {
	background-image: url(../../assets/svgs/BG-ART-BL.svg), url(../../assets/svgs/BG-ART-TR.svg) ;
	background-size: 60% auto, 40% auto;
	background-position:bottom left, top right;
	background-repeat:no-repeat, no-repeat;
	background-color: #91B854;
	color: rgba(33,33,33,1);
	/*background-color: rgba(173,193,97,1),rgba(118,166,74,1);background-color: rgba(109,152,73,1);#4A9D8F;background-image: linear-gradient(to top, #D8C99A, #D6D9B8, #D8C99A);*/
}
.biopools {
	background-image: url(../../assets/svgs/BG-water.svg);
	background-size: 98% auto;
	background-position:bottom right;
	background-repeat:no-repeat;
	background-color: #6DC7CF;
}
.streuobstw {
	background-image: url(../obstbaum/touch_finger.svg),url(../obstbaum/logo_gr_obstbaum.svg),url(../obstbaum/BG_Obst.svg);
	background-size:  auto, auto, cover;
	background-position: 95% 90%, 7% 95%, center center;
	background-repeat: no-repeat, no-repeat;
	color: #353535;
}
.recyclinggar {
	background-image: url(../recyclinggarten/touch_finger.svg),url(../recyclinggarten/logo_gr_recycl.svg),url(../recyclinggarten/BG-upcycl.png);
	background-size:  auto, auto, cover;
	background-position: 5% 60% , 92% 95%, center center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	color: #353535;
}
.recyclinggar h2, .recyclinggar h3{
	color: #353535;
}


/*LINK-BUTTONSbackground-color: #6DC7CF;*/


.article a, .biopools a, .recyclinggar a, .streuobstw a, figure figcaption a {
	display: block;
	border-radius: 10px;
	padding: 10px;
	margin: 10px 0 10px 0;
	box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
	text-align: center;
	font-weight: normal;
	text-decoration:none;
	transition: 0.4s ease;
}

.article a {
	background-color: rgba(55,55,55,0.4);
	color: #ADD771;
	text-shadow: 1px 1px 2px #666;
	text-align: center;
}

.biopools a:hover {
	background-color: rgba(55,55,55,0.6);
	text-align: center;
	color: #EEEEEE;
}
figure figcaption a {
	color: #FFFFFF;
	text-shadow: 1px 1px 2px #333;
}
figure figcaption a:hover {
	background-color: rgba(55,55,55,0.6);
}
#btn_smartphone, #btn_sms, #btn_whatsapp, #btn_mail, #btn_phone, #btn_fax, #btn_linkedin, #btn_twitter, #btn_facebook, #btn_googleplus, #btn_xing, #btn_gala, #btn_pools {
	background-size: auto 90%;
	background-position: 1.6%;
	background-repeat:no-repeat;
}
#btn_smartphone {
	background-image:url(../../assets/svgs/BG-smartphone.svg);	
}
#btn_sms {
	background-image:url(../../assets/svgs/BG-sms.svg);
}
#btn_whatsapp {
	background-image:url(../../assets/svgs/WhatsApp-GR.svg);
}
#btn_mail {
	background-image:url(../../assets/svgs/BG-mail.svg);	
}
#btn_phone {
	background-image:url(../../assets/svgs/BG-fon.svg);
}
#btn_fax {
	background-image:url(../../assets/svgs/BG-fax.svg);
}
#btn_xing {
	background-image:url(../../assets/svgs/BG_xing_gr.svg);
}
#btn_facebook {
	background-image:url(../../assets/svgs/BG_facebook_gr.svg);
}
#btn_googleplus {
	background-image:url(../../assets/svgs/BG_googlepl_gr.svg);
}
#btn_twitter {
	background-image:url(../../assets/svgs/BG_twitter_gr.svg);
}
#btn_linkedin {
	background-image:url(../../assets/svgs/BG_linkedin_gr.svg);
}
#btn_gala img, #btn_pools img {
	height: 50%;
	width: 50%;
}
#btn_gala img:hover, #btn_pools img:hover {
	background-color: rgba(119,167,71,1);
	border: 0.3em solid rgba(119,167,71,1);
	border-radius: 0.3em;
}
.article a:hover {
	background-color: rgba(119,167,71,0.6);
	color: #000000;
	text-shadow: none;
	/* offset-x | offset-y | blur-radius | spread-radius | color 
	box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);*/
	/*border:2px solid rgba(127,178,75,0.6);
	border-radius: 10px;*/
	/*background-color: rgba(119,167,71,0.6);*/
	/*font-weight:bold;*/
}

.step_bar {
	margin: 0 0 16px 0;
	padding: 0;
	background: linear-gradient(to top, rgba(51,51,51,0.92), rgba(51,51,51,0.92)), url(../../assets/jpgs/bg-flieder_05.jpg);
	background-position:left bottom;
	background-repeat:no-repeat;
	background-size: cover;
	font-size: 2em;
	line-height:2em;
	text-align:center;
	text-shadow: 1px 1px 2px #333;
	color: rgba(173,193,97,1);
}
.step_bar a {
	color: rgba(200,200,200,1);
	text-decoration:none;
	transition-duration:0.4s;
}

.step_bar a:hover {
	color: rgba(173,193,97,1);
}
/*Referenzlink Kundenmenu*/
.article a.txtl {
	text-align:left;
}
.article a.txtr {
	text-align:right;
}
.impress {
	background-image: url(../../images/schilf.png), linear-gradient(to top, #1C5947 , #5AABA0, #5AABA0, #1C5947);
	background-repeat: no-repeat;
	background-position:bottom right;
	background-size:contain;
	
	/*opacity:0.7;background-color: #35241A; dunkelbrauncolor: #35241A;
	 url(../../images/BG_article.png),linear-gradient(to top, #1C5947 , #5AABA0); background-position:bottom 10px right 10px;*/
	
}

#speacial {
	/*padding:0; H1*/
	background: #EC9941;
	color: #FFFFFF;
}

/* erzeugt 1 Reihe dessen Inhalte umbrechen dürfen */
.tr {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

/* erzeugt 2 Spalten */
.tc {
  flex: 50%;
  padding: 0;
}

.tc img {
  width: 100%;
  margin: 0;
  vertical-align: middle;
   
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1023px) {
  .tc {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 280px) {
  .tc {
    flex: 100%;
    max-width: 100%;
  }
}

#fon {
	width:100%;
	max-width:1280px;
	min-height:10mm;
	max-height: 15mm;
	/*box-shadow: inset 0px 1px 1px 1px #5AABA0;*/
	margin:0;
	padding-bottom:8px;
	background-color: rgb(51,51,51);
	color: #FFFFFF;
	text-align: center;
	font-size:10mm;
	line-height:100%;
	font-weight: bold;
	position: fixed;
	bottom:0;
	z-index:99;
}
#fon a {
	color:  #5AABA0;
	text-decoration:none;
	font-weight: bold;
	transition-duration:0.4s;
}
#fon a:hover {
	color: rgba(200,200,200,1);
}
#whatsapplink {
		width:22pt;
		height:auto;	
}
@media (max-width: 2560px) {
	#fon, #fon a {
		font-size:26pt;
		/*line-height:13mm;*/
	}
	#whatsapplink {
		width:20pt;
		height:auto;	
	}
}


@media (max-width: 380px) {
	#fon, #fon a {
		font-size:14pt;
		box-shadow: 0;
		/*line-height:12mm;*/
	}
	#whatsapplink {
		width:12pt;
		height:auto;	
	}
}

.img-responsive, video { 
	border: 0;
	margin: 0;
	padding: 0;
	/*margin:10px 0 10px 0;max-height:480px;max-width: 639px;max-height: 640px;*/
	width: 100%;
	height: 100%;	
}
video[poster] {
	width:100%;
	height:auto;
	object-fit: fill;

}
#galab {
	max-width: 54%;
	height: auto;
}

@media (min-width: 640px) {
.article, .biopools, .recyclinggar, .streuobstw, figure figcaption {
	font-size: 1.1em;
}	
}

@media (max-width: 640px) {
#fon, #fon a {
		font-size:16pt;
		box-shadow: 0;
		/*line-height:13mm;*/
}
#whatsapplink {
		width:14pt;
		height:auto;	
}
h1 {
	font-size: 2em;
}

.article, .biopools, .recyclinggar, .streuobstw, figure figcaption {
	font-size: 1em;
}
.step_bar {
	font-size: 1em;
}
}

@media (max-width: 360px) {
	h1 {
	font-size: 1.2em;
}

.article, .biopools, .recyclinggar, .streuobstw, figure figcaption, .pic {
	font-size: 0.8em;
	max-width: 360px;
}
.img-responsive { 
	border: 0;
	margin: 0;
	padding: 0;
	max-width: 360px;
	height: auto;
	
	}
.step_bar {
	font-size: 1.2em;
}
#fon {
box-shadow: 0;	
}
}

@media (max-width: 240px) {
	#btn_smartphone, #btn_sms, #btn_whatsapp, #btn_mail, #btn_phone, #btn_fax {
	background-size: auto 60%;
	background-position: left 2px center;
}
	
	#fon, #fon a {
		font-size:13pt;
		box-shadow: 0;
}

#whatsapplink {
		width:12pt;
		height:auto;	
}
}
@media (min-width: 1024px) {

	h1 {
	font-size: 2.8em;
}
.article, .biopools, .recyclinggar, .streuobstw, figure figcaption, .pic {
	font-size: 1.2em;
}
.step_bar {
	font-size: 2em;
}
}

@media (min-width: 1281px) {
body {
	background-image: url(../../assets/svgs/BG-BODY-BL.svg), url(../../assets/svgs/BG-body-TR.svg) ;
	background-size: auto 74%, 18% auto;
	background-position:bottom left, top right;
	background-attachment:fixed, fixed;
	background-repeat:no-repeat, no-repeat;	
}
	h1 {
	font-size: 3em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.article, .biopools, .recyclinggar, .streuobstw, figure figcaption, .pic {
	font-size: 1.3em;
}

.step_bar {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#fon {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;	
}
}

/*@media (min-width: 1600px) {
	h1 {
	font-size: 4em;
}
p {
	font-size: 3em;
}
}
@media (min-width: 1800px) {
	h1 {
	font-size: 5em;
}
p {
	font-size: 4em;
}
}*/

/*#m_leistung {
	animation: transitionIn 0.5s;	
}

@keyframes {

from {
	transition: 0.9s all;
}

to {
	
}
	
}*/