@charset "utf-8";
/* MASTER-CSS für www.lernatelier.eu */

/* FARBEN
#b5cc3d - Grün (Logo)
#373a41 - H1/H2
#969798 - Text
#ceb716 - Ocker (Button)
#f7f7f7 - Hellgrau
#38393e - Dunkelgrau (Foot)
#e4e4e4 - Linien hellgrau
*/
	
/* +++++++++++++++++++++++++++++++++++++++ GENERALLY FORMATTING +++++++++++++++++++++++++++++++++++++++ */
html					{ width: 100%; height: 100%; -webkit-tap-highlight-color: #000; }
body					{ width: 100%; height: 100%; position: relative; scrolling: auto; font-family: 'Open Sans'; font-weight: 400; color: #969798; font-size: 74%; background: #f7f7f7; -webkit-tap-highlight-color: transparent; }

h1,h2,h3				{ color: #373a41; }

#pageinfo				{ position: fixed; z-index: 99999; top: 1px; left: 1px; color: #000; background: #fff; padding: 3px; display: none; }
.boxlink:hover			{ cursor: pointer; }
.clear					{ clear: both; height: 0px; overflow: hidden; }
.rounded				{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.shadow					{ -moz-box-shadow: 1px 1px 5px #a7a6a6; -webkit-box-shadow: 1px 1px 5px #a7a6a6; box-shadow: 1px 1px 5px #a7a6a6; }
.border-box, div, section, aside, article, nav, main, header, footer, nav, a, li, ul, button, h1, h2, h3, h4, p, label, input, select, textarea, table, td, tr, span, picture
						{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behaviour: url(/boxsizing.htc); }
.transition_all			{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.transition_bg			{ -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
.small					{ font-size: 0.9em; }

/* +++++++++++++++++++++++++++++++++++++++ LINKS +++++++++++++++++++++++++++++++++++++++ */
a[href^="tel"]{ color: inherit; text-decoration: none; } /* removing autoformat of phone numbers */

a:hover, a:active 		{ outline: none; } /* for screenreaders */
a						{ color: #969798; text-decoration: underline; }
a:hover					{ color: #b5cc3d; text-decoration: underline; }
a:before				{ text-decoration: none !important; }

a.noline				{ color: #969798; text-decoration: none; }
a.noline:hover			{ color: #b5cc3d; text-decoration: underline; }

a.next					{ position: relative; display: block; padding: 0 0 0 25px; }
a.next:before			{ position: absolute; top: 0; left: 0; content: "\f061"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #b5cc3d; font-size: 18px; line-height: 1; }
a.next:hover			{ text-decoration: underline !important; }
a.next:hover:before		{ color: #b5cc3d; }

a.back					{ position: relative; display: block; padding: 0 0 0 25px; }
a.back:before			{ position: absolute; top: 0; left: 0; content: "\f053"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #b5cc3d; font-size: 18px; line-height: 1; }
a.back:hover			{ text-decoration: underline !important; }
a.back:hover:before		{ color: #b5cc3d; }

a.link					{ position: relative; display: block; padding: 0.1em 0 0 1.6em; }
a.link:before			{ position: absolute; top: 3px; left: 0; content: "\f35d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #b5cc3d; font-size: 19px; line-height: 1; }
a.link:hover			{ text-decoration: underline !important; }
a.link:hover:before		{ color: #0083bf; }

a.email					{ position: relative; display: block; padding: 0 0 0 26px; }
a.email:before			{ position: absolute; top: 0; left: 0; content: "\f0e0"; color: #969798; font-size: 18px; font-family: 'Font Awesome 5 Free'; font-weight: 400; line-height: 1; }
a.email:hover			{ text-decoration: underline !important; }
a.email:hover:before	{ color: #b5cc3d; }

a.phone					{ position: relative; display: block; padding: 0 0 0 26px; }
a.phone:before			{ position: absolute; top: 1px; left: 2px; content: "\f095"; color: #969798; font-size: 15px; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: 1; }
a.phone:hover			{ text-decoration: underline !important; }
a.phone:hover:before	{ color: #b5cc3d; }

a.website				{ position: relative; display: block; padding: 0 0 0 26px; }
a.website:before		{ position: absolute; top: 0; left: 0; content: "\f05a"; color: #969798; font-size: 18px; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: 1; }
a.website:hover			{ text-decoration: underline !important; }
a.website:hover:before	{ color: #b5cc3d; }

a.download					{ position: relative; padding: 0.2em 0 0.2em 24px; }
a.download:before 			{ position: absolute; top: 0; left: 1px; content: "\f016"; font-family: 'Font Awesome 5 Free'; font-weight: 400; font-size: 21px; color: #b5cc3d; }
a.download span.fileinfo	{ font-size: 0.8em; white-space: nowrap; }
a.download.pdf:before		{ content: "\f1c1"; }
a.download.zip:before, a.download.rar:before		{ content: "\f1c6"; }
a.download.doc:before, a.download.docx:before		{ content: "\f1c2"; }
a.download.xls:before, a.download.xlsx:before		{ content: "\f1c3"; }
a.download.jpg:before, a.download.jpeg:before, a.download.tif:before, a.download.bmp:before	{ content: "\f1c5"; }

.zoom 		{ position: relative; display: inline-block; }
.zoom:after 	{ position: absolute; bottom: 1px; right: 1px; width: 20px; height: 20px; padding: 6px 4px 4px 6px; content: "\f00e"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #fff;
					font-size: 20px; line-height: 1; background: rgba(255,255,255,0.5); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
					-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.zoom:hover:after 	{ width: 24px; height: 24px; padding: 6px 4px 4px 6px; font-size: 22px; color: #b5cc3d; }


a.button 	{ position: relative; display: inline-block; margin: 1em 0; padding: 0.6em 1em 0.7em 38px; font-size: 1.1em; line-height: 1; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
a.button:before			{ position: absolute; top: 8px; left: 8px; content: "\f061"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #fff; font-size: 22px; line-height: 1; }
a.button.green 			{ background: #b5cc3d; }
a.button.green:hover 	{ background: #a4bb29; }

/* +++++++++++++++++++++++++++++++++++++++ PLUGINS +++++++++++++++++++++++++++++++++++++++ */
#lightbox span.lb-caption	{ color: #fff; }

/* +++++++++++++++++++++++++++++++++++++++ PAGE +++++++++++++++++++++++++++++++++++++++ */
#page			{ position: relative; width: 100%; height: auto; min-width: 300px; max-width: 1300px; margin: 0px auto; font-size: 1.3em; background: #fff; overflow: hidden; }
.container		{ width: 100%; padding-left: 15px; padding-right: 15px; }
@media screen and (min-width: 800px) {
.container		{ width: 100%; padding-left: 30px; padding-right: 30px; }
}
@media screen and (min-width: 1200px) {
.container		{ width: 100%; padding-left: 50px; padding-right: 50px; }
}

	/* +++++++++++++++++++++++++++++++++++++++ HEADER +++++++++++++++++++++++++++++++++++++++ */
	header		{ position: relative; width: 100%; }

		nav { position: relative; z-index: 11; background: #fff; -moz-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); }

			#nav_sec	{ width: 100%; height: 4px; background: #b5cc3d; color: #fff; }

			a#logo { float: left; height: auto; }
			body.lat a#logo { width: 80px; margin: 1em 0; }
			body.arp a#logo { width: 58px; margin: 0.5em 0; }
			a#logo img { float: left; width: 100%; height: auto; }
		@media screen and (max-width: 767px) {
			#nav_main 	{ position: absolute; top: 78px; left: 0; z-index: 100; width: 100%; height: auto; background: #fff; padding: 1em 15px;
							-moz-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.1); }
			#nav_main ul 	{ list-style: none; }
			#nav_main ul li a 	{ display: block; text-decoration: none; }
			#nav_main ul li.active a 	{ color: #b5cc3d; font-weight: 700; }
			#nav_main ul#nav_main_ul li			{ position: relative; }
			#nav_main ul#nav_main_ul > li:before	{ position: absolute; top: 9px; left: 0; content: "\f054"; color: #b5cc3d; font-size: 22px; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: 1;
										    			transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; }
			#nav_main ul#nav_main_ul li a 	{ padding: 5px 0 5px 25px; font-size: 1.5em; }
			
			#nav_main ul#nav_main_ul > li.sub.active:before { left: 2px; transform: rotate(90deg); }
	        #nav_main #nav_main_ul > li > ul { width: auto; height: 0; margin: 0; padding: 0; opacity: 0; overflow: hidden;
							        transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }
	        #nav_main #nav_main_ul > li.sub.active > ul { width: 100%; height: auto; margin: 0.2em 0 0.6em 0; padding-top: 0.2em; border-top: 1px solid #b5cc3d; opacity: 1; }
	        #nav_main #nav_main_ul > li > ul > li > a { display: block; margin-bottom: 0.1em; padding: 0.3em 0 0.3em 25px; font-size: 1.2em; font-weight: 400; color: #373a41; }
	        #nav_main #nav_main_ul > li > ul > li.active > a { color: #b5cc3d; }
			
			#nav_main ul#nav_sec_ul { margin-top: 0.5em; padding-top: 0.5em; border-top: 4px solid #f7f7f7; }
			#nav_main ul#nav_sec_ul li a { padding: 0.3em 0; font-size: 1.2em; }

			#navbar { position: relative; float: right; margin: 16px 20px 0 0; width: auto; cursor: pointer; }
				.nav_icon { display: block; position: relative; margin: 0 auto; padding: 0; width: 50px; height: 50px; box-shadow: none; border-radius: none; border: none; background: none; cursor: pointer; }
				.nav_icon:focus { outline: none; }
				#navbar.active .nav_icon:before	{ opacity: 0.8; }
				.nav_icon span { display: block; position: absolute; top: 18px; left: 0; right: 0; height: 5px; background: #b5cc3d; transition: background 0s 0.3s; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; }
				.nav_icon span::before, .nav_icon span::after { position: absolute; display: block; left: 0; width: 100%; height: 5px; background-color: #b5cc3d; content: "";  -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;
																	transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; }
				.nav_icon span::before { top: -14px; transition-property: top, transform; }
				.nav_icon span::after { bottom: -14px; transition-property: bottom, transform; }
				/* active state, i.e. menu open */
				#navbar.active .nav_icon span { background: none; }
				#navbar.active .nav_icon span::before { top: 0; transform: rotate(45deg); }
				#navbar.active .nav_icon span::after { bottom: 0; transform: rotate(-45deg); }
				#navbar.active .nav_icon span::before, #navbar.active .nav_icon span::after { transition-delay: 0s, 0.3s; }
			
			/* Anpassung für allgemeine Seiten */
			body.gen #nav_main_ul { display: none; }
			body.gen #nav_main ul#nav_sec_ul { margin-top: 0; padding-top: 0; border-top: none; }
			body.gen #nav_main_wrap a#logo { display: none; }
		}
		@media screen and (min-width: 768px) {
			body.lat a#logo { width: 12%; margin: 1em 0; }
			body.arp a#logo { width: 8.5%; margin: 0.45em 0; }
			
			#nav_sec	{ height: 36px; }
			#nav_sec > ul 	{ float: right; width: auto; font-size: 1.1em; list-style: none; }
			#nav_sec > ul > li { float: left; text-align: center; }
			#nav_sec > ul > li:before { float: left; content: "|"; font-size: 0.9em; margin-top: 0.35em; }
			#nav_sec > ul > li:first-child:before { content: ""; }
			#nav_sec > ul > li > a { float: left; padding: 0.3em 0.6em; color: #fff; text-decoration: none; }
			#nav_sec > ul > li:last-child a:before { float: left; margin: 0.1em 0.4em 0 0; content: "\f015"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 18px; line-height: 1; }
			
			#nav_main 	{ float: right; width: 86%; margin-top: 4.9%; }
			#nav_main > ul 	{ float: right; width: auto; font-size: 1.1em; list-style: none; }
			#nav_main > ul > li { position: relative; float: left; text-align: left; }
			#nav_main > ul > li > a { float: left; padding: 0.5em 0.5em; color: #373a41; text-decoration: none; }
			#nav_main > ul > li > a:hover { color: #b5cc3d; }
			#nav_main > ul > li.active > a { color: #b5cc3d; font-weight: 700; }

            #nav_main_ul > li > ul { position: absolute; top: 100%; left: 0; z-index: 100; display: block; width: auto; height: 0; font-size: 0.9em; padding: 0 0.6em 0.6em 0.6em; background: rgba(255,255,255,0); list-style: none; opacity: 0; overflow: hidden;
                                        -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
            #nav_main_ul > li:hover > ul { height: auto; opacity: 1; background: #fff; }
            #nav_main_ul > li > ul > li { display: block; width: 100%; }
            #nav_main_ul > li > ul > li a { display: block; width: 100%; padding-top: 0.6em; color: #373a41; text-align: left; white-space: nowrap; text-decoration: none; }
            #nav_main_ul > li > ul > li a:hover, #nav_main_ul > li > ul > li.active a { color: #b5cc3d; }
			
			#navbar { display: none; }
			
			/* Anpassung für allgemeine Seiten */
			body.gen #nav_main_wrap { display: none; }
		}
		@media screen and (min-width: 900px) {
			body.lat a#logo { margin: 1.5em 0; }
			body.arp a#logo { margin: 0.9em 0; }
			#nav_main 	{ margin-top: 5.8%; }
			#nav_main > ul 	{ font-size: 1.2em; }
			#nav_main > ul > li > a { padding: 0.5em 0.6em; }
            #nav_main_ul > li > ul { padding: 0 0.8em 0.65em 0.65em; }
		}
		@media screen and (min-width: 1000px) {
			body.lat a#logo { margin: 2em 0; }
			body.arp a#logo { margin: 1.3em 0; }
			#nav_main 	{ margin-top: 6.5%; }
			#nav_main > ul 	{ font-size: 1.2em; }
			#nav_main > ul > li > a { padding: 0.5em 0.8em; }
            #nav_main_ul > li > ul { padding: 0 0.8em 0.9em 0.9em; }
		}
		@media screen and (min-width: 1200px) {
			#nav_main > ul 	{ font-size: 1.3em; }
			#nav_main > ul > li > a { padding: 0.5em 1em; }
            #nav_main_ul > li > ul { padding: 0 0.8em 1.2em 1.1em; }
		}

		#scrollnavi_wrap { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: auto; display: none; }			
			body.lat #scrollnavi_wrap a#logo { width: 6%; margin: 1em 0 0.8em 0; }
			body.arp #scrollnavi_wrap a#logo { width: 4%; margin: 0.6em 0 0.4em 0; }
				#scrollnavi { min-width: 300px; max-width: 1300px; margin: 0px auto; background: #fff; border-top: 2px solid #b5cc3d;
							 -moz-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1); box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1); }
				#scrollnavi #nav_main { width: 90%; margin-top: 1.7%; }

		#headpic { position: relative; z-index: 10; width: 100%; height: 200px; background-repeat: no-repeat; background-size: auto auto; background-size: cover; overflow: hidden; }
		body.lat #headpic { background-image: url("../images/lat/slider_background.jpg"); }
		body.arp #headpic { background-image: url("../images/arp/slider_background.jpg"); }
			#headpic > div.container { position: relative; width: 100%; height: 100%; }
		@media screen and (min-width: 800px) {
		#headpic { height: 230px; }
		}
		@media screen and (min-width: 900px) {
		#headpic { height: 280px; }
		}
		@media screen and (min-width: 1000px) {
		#headpic { height: 320px; }
		}
		@media screen and (min-width: 1250px) {
		#headpic { height: 380px; }
		}			

	
	/* +++++++++++++++++++++++++++++++++++++++ MAIN +++++++++++++++++++++++++++++++++++++++ */
	main		{ position: relative; font-size: 1em; line-height: 1.1; }
	body.site main	{ background: #f7f7f7; padding-bottom: 4em; }

		#headline { }
			#headline_wrap { padding-top: 1.8em; padding-bottom: 0.8em; border-bottom: 1px solid #e4e4e4; }
			#headline h1 { font-size: 1.8em; font-weight: 700; margin-bottom: 0.4em; color: #b5cc3d; }
			#headline h2 { font-size: 1.2em; font-weight: 600; margin-bottom: 0.6em; }

		#content { }
			body.tp1 #content { width: 100%; }
			@media (min-width: 1024px) {
			body.tp2 #content { float: left; width: 70%; padding-right: 4%; }
			}

			/* CMS article */
			#content > article	{ position: relative; font-size: 1em; line-height: 1.2; overflow: hidden; }
			body.site.tp1 #content > article, body.site.tp1 #content > form { max-width: 1000px; }
			#content > article.no_title	{ margin-top: 1em; }
			#content > article.first	{ margin: 1em 0 0.3em 0; }
			#content > article > h3	{ color: #b5cc3d; font-size: 1.2em; font-weight: 00; line-height: 1.3; margin: 0 0 0.3em 0; }
			#content > article > p	{ max-width: 900px; }
			article a.download	{ display: block; margin-top: 0.5em; }
			article a.link		{ display: block; margin-top: 0.5em; }
			article a.next		{ display: block; margin-top: 0.5em; }
			
			/* CMS article - Bildformatierungen */
			#content > article picture.left	{ float: left; margin: 0.1em 1em 0.5em 0; }
			#content > article picture.right	{ float: right; margin: 0.1em 0 0.5em 1em; }
			#content > article picture.pic1	{ float: left; }
			#content > article picture.pic2	{ float: right; }
			#content > article picture.top		{ margin: 0.5% 0 2% 0; }
			#content > article picture.bottom	{ margin-top: 2%; }
			#content > article picture img	{ float: left; width: 100%; height: auto; }
			#content > article picture > a	{ float: left; width: 100%; }
			@media (max-width: 520px) {
			#content > article picture.pic1, #content > article picture.pic2 { float: left; width: 100% !important; }
			#content > article picture.bottom	{ margin-top: 5%; }
			}
			#content > article picture div.copyright	{ float: right; text-align: right; padding: 0.3em 0.1em 0 0; font-size: 0.74em; font-style: italic; }
			div.lightbox span.lb-caption > span		{ font-size: 0.8em; font-weight: normal; font-style: italic; }
			#content > article img.left, #content > article picture.left, #content > article img.right, #content > article picture.right { min-width: 45% !important; }
			@media (min-width: 520px) {
			#content > article img.left, #content > article picture.left, #content > article img.right, #content > article picture.right { min-width: 5% !important; }
			}

			/* CMS - Listen */
			main article ul { margin-top: 0.8em; margin-bottom: 0.4em; list-style: none; }
				main article ul li { position: relative; padding-left: 24px; padding-bottom: 1em; }
				main article ul li:before { position: absolute; top: 0; left: 0; content: "\f138"; font-size: 17px; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #b5cc3d; line-height: 1; }

			/* CMS - Tabellen */
			main article table { margin: 0; border-collapse: collapse; }
				main article table tr { }
				main article table th { padding: 0 1em 0.5em 0; white-space: nowrap; text-align: left; vertical-align: top; }
				main article table td { padding: 0 0 0.5em 0; text-align: left; vertical-align: top; }


			/* CMS article - Spalten */			
			#content > article .column_left		{ float: left; clear: left; width: 100%; margin-top: 1%; }
			#content > article .column_left img.logo	{ width: 65%; }
			#content > article .column_right 	{ float: left; width: 100%; margin-top: 1%; padding-bottom: 1.1em; }
			#content > article .column_left > p, #content article .column_right > p 	{ padding-top: 3px; }
			@media (min-width: 600px) {
			#content > article .column_left		{ width: 50%; }
			#content > article .column_left img.logo	{ width: 80%; }
			#content > article .column_right 	{ width: 50%; padding-bottom: 0; }
			#content > article .column_right + p { clear: left; }
			}

			/* CMS article - Standard */
			#content > article.standard	{ margin: 1.8em 0 0.3em 0; }

			/* CMS article - Single Picture */
			article.singlepic	{ clear: left; display: block; margin: 1.8em 0 0.3em 0; padding: 0; overflow: hidden; }
				article.singlepic a, article.singlepic img  	{ display: block; width: 100%; height: auto; }
				article.singlepic div.copyright	{ float: right; text-align: right; padding: 0.2em 0.1em 0.1em 0; font-size: 0.74em; font-style: italic; color: #595a5c; }

			/* CMS article - Quote */
			article.quote	{ display: block; margin: 2.4em 0 2.2em 0; }
				article.quote.first	{ margin: 1.4em 0 2em 0; }
				article.quote p	{ max-width: 900px; font-family: 'Indie Flower'; font-weight: 400; font-size: 1.8em; line-height: 1.1; color: #b5cc3d; text-align: center; }
				article.quote div	{ width: 100%; max-width: 900px; padding-top: 0.4em; text-align: center; font-size: 0.9em; font-weight: 300; font-style: italic; line-height: 1.2; color: #8d8b8b; }
				@media (min-width: 500px) {
				#content > article.quote p	{ font-size: 2.3em; line-height: 1.1; }
				aside > article.quote p	{ font-size: 2em; line-height: 1.1; }				
				}

			/* CMS article - Teaser */
			article.teaser	{ position: relative; clear: left; width: 100%; margin-bottom: 1.8em; overflow: hidden; }
				article.teaser a.titlelink { position: relative; display: block; color: #8f8c8c; text-decoration: none; overflow: hidden; }
				article.teaser h3 { position: absolute; bottom: 0; left: 0; z-index: 29; display: block; width: 100%; padding: 0.5em 0.5em 0.4em 0.5em; margin-bottom: 0 !important;
												font-size: 1.2em; color: #b5cc3d; background: #eeeeee; border-bottom: 1px solid #b5cc3d; }
				article.teaser.nopic h3 { position: relative; bottom: auto; left: auto; }
				article.teaser:hover { background: rgba(255,255,255,0.6); }
				body.touch article.teaser { background: rgba(255,255,255,0.6); }
				article.teaser:hover h3 { color: #fff; background: #b5cc3d; border-bottom: 1px solid #fff; }
				article.teaser img	{ float: left; height: auto; }
				article.teaser div.text	{ float: left; padding: 0.4em 0.2em 0.4em 0.5em; }
				article.teaser a.next { margin: 5px 0 3px 0; }
				article.teaser a.download:before { font-size: 18px; }
				@media (max-width: 599px) {				
				article.teaser img	{ width: 100% !important; }
				article.teaser div.text	{ width: 100% !important; }
				}
				@media (min-width: 600px) {
				article.teaser a.titlelink { display: inline; }
				article.teaser h3 { position: relative; bottom: auto; left: auto; padding: 0.5em 0.2em 0.5em 0.5em; background: #eeeeee; border-bottom: 1px solid #b5cc3d; }
				article.teaser img	{ float: left; width: 30%; height: auto; }
				article.teaser div.text	{ width: 70%; padding: 0.5em 0.6em 0.6em 0.7em; }
				article.teaser.nopic div.text	{ width: 100%; padding: 0.6em 0.6em 0.6em 0.7em; }
				}

			/* CMS article - Topic-Slider */
			article.topic	{ display: block; clear: left; width: 100%; margin: 1em 0 0.2em 0; overflow: hidden; }
			article.topic.active {  }
			article.topic.first	{ margin-top: 1.6em; }
				article.topic h3		{ position: relative; width: 100%; padding: 0.5em 3em 0.6em 0.5em; margin: 0 !important; font-size: 1.2em; font-weight: 600; background: #e4e4e4; cursor: pointer; }
				article.topic:hover h3, article.topic.active h3	{ color: #fff; background: #b5cc3d; }
				article.topic h3:after	{ content: "\f078"; position: absolute; top: 3px; right: 0.4em; z-index: 29; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 30px; color: #b5cc3d; }
				article.topic.active h3:after	{ content: "\f077"; color: #fff; }
				article.topic:hover h3:after	{ color: #fff; }
				article.topic h3 > a	{ color: #969798; text-decoration: none; }
				article.topic.active h3 > a, article.topic:hover h3 > a	{ color: #fff; }
				article.topic div.text	{ padding: 0.5em 0.7em 0.7em 0.7em; }
				article.topic div.text picture	{ float: right; width: 40%; margin: 0.2em 0 0.7em 1em; }
				article.topic div.text picture img	{ width: 100%; height: auto; }
				article.topic a.download	{ margin-top: 0.3em; }
				article.topic a.next	{ margin-top: 0.3em; }
				@media (min-width: 600px) {
				article.topic div.text picture	{ width: 30%; }
				}

			/* CMS article - iFrame */
			article.iframe	{ margin: 1.8em 0 0.3em 0; overflow: hidden; }
				article.iframe div.iframe_wrap { position: relative; float: left; height: auto; margin: 1em 0 1em 0; overflow: hidden; }
			    	article.iframe div.iframe_sizer { position: relative; float: left; width: 100%; height: 0; overflow: hidden; }
			        	article.iframe div.iframe_sizer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
				@media (max-width: 500px) {
				body#sid6 #content > article.iframe div.iframe_sizer { padding-bottom: 90% !important; } /* Matomo iFrame */
				}
				@media (max-width: 599px) {
				article.iframe div.iframe_wrap.left, article.iframe div.iframe_wrap.right { width: 100% !important; } /* Format 16:9 */
				}
				@media (min-width: 600px) {
				article.iframe div.iframe_wrap.left { float: left; margin: 0.2em 1em 0.5em 0; }
				article.iframe div.iframe_wrap.right { float: right; margin: 0.2em 0 0.5em 1em; }				
				}
				article.iframe div.iframe_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

			/* ASIDE */
			aside { }
				aside div.line { display: block; width: 100%; height: 1px; margin: 2em 0 1em 0; background: #e4e4e4; }
			@media (min-width: 1024px) {
			body.tp2 aside { float: right; width: 30%; padding-left: 0; }
				aside div.line { display: none; }
			}

			aside > article	{ position: relative; font-size: 1em; line-height: 1.2; overflow: hidden; }
			aside > article.standard	{ margin: 1.8em 0 0.3em 0; }
			aside > article.standard h3	{ padding-bottom: 0.3em; font-size: 1.2em; color: #b5cc3d; }
		
			
		/* TOPICS - HOME */
		#topics { background: #f7f7f7; padding-top: 1.5em; padding-bottom: 1.5em; }
			#topics > a { float: left; width: 100%; margin-top: 1em; text-align: center; text-decoration: none; }
			#topics > a:first-child { margin-top: 0; margin-left: 0; }
			#topics > a:before { display: inline-block; margin: 0.5em 0; font-family: 'Font Awesome 5 Free'; color: #fff; line-height: 1;
											background: #b5cc3d; border: 2px solid #b5cc3d; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
											-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
			#topics > a:hover:before { color: #b5cc3d; background: #fff; }
			#topics > a.gears:before { padding: 4.4% 3.6%; content: "\f085"; font-size: 36px; font-weight: 900; }
			#topics > a.comments:before { padding: 4.2% 4%; content: "\f086"; font-size: 40px; }
			#topics > a.thumbs-up:before { padding: 4%; content: "\f164"; font-size: 40px; }
			#topics > a.light:before { padding: 4% 5%; content: "\f0eb"; font-size: 48px; font-weight: 900; }
			#topics > a.plant:before { padding: 4%; content: "\f4d8"; font-size: 48px; font-weight: 900; }
			#topics > a h2 { font-size: 1.2em; color: #373a41; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
			#topics > a:hover h2 { color: #b5cc3d; }
			#topics > a p { padding: 0.6em 1em; color: #969798 !important; font-size: 1em; line-height: 1.2; }
		@media screen and (min-width: 768px) {			
			#topics.col2 > a { float: left; width: 48%; margin-top: 0; margin-left: 2%; text-align: center; }
			#topics.col3 > a { float: left; width: 32%; margin-top: 0; margin-left: 2%; text-align: center; }
			#topics > a:first-child { margin-top: 0; margin-left: 0; }
			#topics > a p { padding: 0.6em 1.4em; }
		}

			/* CMS article - HOME */
			body.home #content article { padding-top: 2em; padding-bottom: 2em; }
			body.home #content article.white { background: #fff; }
			body.home #content article.grey { background: #f7f7f7; }
			body.home #content article > h1, #content article > h2  { display: block; text-align: center; }
			body.home #content article > h1  { font-size: 1.5em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; }
			body.home #content article > h2  { font-size: 1.2em; font-weight: 600; margin-bottom: 1.2em; }
			body.home #content article.pic_left > picture { float: left; width: 100%; margin: 0 0 1em 0; overflow: hidden; }
			body.home #content article.pic_left > div { float: left; width: 100%; }
			body.home #content article.pic_right > picture { float: left; width: 100%; margin: 0 0 1em 0; overflow: hidden; }
			body.home #content article.pic_right > div { float: left; width: 100%; height: auto; }
			body.home #content article picture img { float: left; width: 100%; height: auto; }
			body.home #content article.pic_zoom picture img { -ms-transform: scale(1); transform: scale(1); -webkit-animation-name: pic_zoom; -webkit-animation-duration: 1s;
			animation-name: pic_zoom; animation-duration: 1s; }
			@-webkit-keyframes pic_zoom {
				0%	{ opacity: 1; -ms-transform: scale(1); transform: scale(1); }
				70%  { opacity: 0.8; -ms-transform: scale(1.1); transform: scale(1.1); }
				100% { opacity: 1; -ms-transform: scale(1); transform: scale(1); }
			}
			@keyframes pic_zoom {
				0%	{ opacity: 1; -ms-transform: scale(1); transform: scale(1); }
				70%  { opacity: 0.8; -ms-transform: scale(1.1); transform: scale(1.1); }
				100% { opacity: 1; -ms-transform: scale(1); transform: scale(1); }
			}

		@media (min-width: 450px) {
			body.home #content article > h1  { font-size: 1.8em; }
		}
		@media (min-width: 768px) {
			body.home #content article.pic_left > picture { float: left; width: 45%; margin: 0 2% 0.5em 0; overflow: hidden; }
			body.home #content article.pic_left > div { float: left; width: 53%; }
			body.home #content article.pic_right > picture { float: right; width: 45%; margin: 0 0 0.5em 2%; overflow: hidden; }
			body.home #content article.pic_right > div { float: left; width: 53%; height: auto; }
		}


		/* +++++++++++++++++++++++++++++++++++++++ FOOTER +++++++++++++++++++++++++++++++++++++++ */
		footer		{ display: block; width: 100%; height: auto; background: #7d7d7d; color: #fff; font-size: 1em; line-height: 1.2; padding-top: 2em; padding-bottom: 1.6em; overflow: hidden; }
		body.gen footer		{ display: block; width: 100%; height: 2em; background: #7d7d7d; padding: 0; }
			footer a#footerlogo		{ float: left; width: auto; height: 100px; margin-bottom: 2em; }
			footer a#footerlogo	img	{ float: left; width: auto; height: 100%; }
			footer #contact { float: left; width: 100%; }
			footer #contact h2 { display: block; margin-bottom: 1em; font-size: 1.2em; color: #fff; font-weight: 300; }
			footer #contact h2 strong { display: block; }
			body.lat footer #contact h2 span, body.arp footer #contact h2 span { display: none; }
			footer #contact > div { padding-bottom: 0.5em; }
			footer #contact > div p, footer #contact > div a { padding-bottom: 0.2em; color: #fff; }
			footer #contact > div a.phone:before { top: 1px; font-size: 18px; color: #b5cc3d; }
			footer #contact > div a.email:before { top: 2px; font-size: 20px; color: #b5cc3d; }
			footer #contact > div a.website:before { font-size: 20px; color: #b5cc3d; }
			footer #contact > div a.website { display: none; }

			footer #social_media	{ float: left; width: 100%; margin-top: 1em; }

			    footer #social_media_links	{ float: left; width: 100%; overflow: hidden; margin-bottom: 1em; }
                  footer #social_media_links > a	{ position: relative; float: left; width: 34px; height: 34px; margin-right: 0.8em; }
                  footer #social_media_links > a::before	{ position: absolute; top: 0; left: 0; font-size: 34px; font-family: 'Font Awesome 5 Brands'; font-weight: 900; color: rgba(255,255,255,0.7); line-height: 1;
                                                          transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
                  footer #social_media_links > a:hover::before	{ color: rgba(255,255,255,0.9); }
                  footer #social_media_links > a.facebook::before	{ content: "\f082"; }
                  footer #social_media_links > a.youtube::before	{ content: "\f431"; }
                  footer #social_media_links > a.xing::before	{ content: "\f169"; }
                  footer #social_media_links > a.linkedin::before	{ content: "\f08c"; }

				#social_media div.shariff	{ float: left; width: auto !important; }
                  #social_media div.shariff > ul { width: auto; list-style: none; }
                  #social_media div.shariff > ul > li.shariff-button { display: inline-block; width: 100px; height: 28px; margin: 0 1em 0 0; text-align: right; }				
                  #social_media div.shariff > ul > li.shariff-button a { float: left; position: relative; width: inherit; height: inherit; padding: 4px 4px 2px 2px; color: #fff; text-decoration: none;
                                                          transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
                                                          -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
                  #social_media div.shariff > ul > li.shariff-button.facebook a { background: #3b5998; }
                  #social_media div.shariff > ul > li.shariff-button.facebook a:hover { background: #4273c8; }
                  #social_media div.shariff > ul > li.shariff-button.whatsapp a { background: #5cbe4a; }
                  #social_media div.shariff > ul > li.shariff-button.whatsapp a:hover { background: #34af23; }
                  #social_media div.shariff > ul > li.shariff-button span.fab	{ position: absolute; width: 26px; font-size: 20px; }
                  #social_media div.shariff > ul > li.shariff-button.facebook span.fab	{ top: 3px; left: 0px; }
                  #social_media div.shariff > ul > li.shariff-button.whatsapp span.fab	{ top: 3px; left: 0px; }
                  #social_media div.shariff > ul > li.shariff-button span.share_text	{ display: inline; padding: 0 6px 0 30px; font-size: 1em; line-height: 1; }
		@media (min-width: 600px) {
			footer a#footerlogo		{ height: 80px; margin-bottom: 0; }
			body.lat footer a#footerlogo		{ margin-right: 10%; }
			body.arp footer a#footerlogo		{ margin-right: 8%; }
			footer #contact { float: left; width: auto; }
			body.arp footer #contact { min-width: 450px; }
            
			    footer #social_media_links	{ width: 50%; }
				#social_media div.shariff	{ float: right; }
		}
		@media (min-width: 1024px) {
			body.lat footer #contact h2 strong, body.lat footer #contact h2 span { display: inline; }
			footer #contact > div { float: left; width: auto; padding-right: 10%; padding-bottom: 0; }
		}
		@media (min-width: 1250px) {
			body.arp footer #contact h2 strong, body.arp footer #contact h2 span { display: inline; }
			footer #social_media	{ float: right; width: auto; margin-top: 0; }	
			    footer #social_media_links	{ float: right; width: auto; }
                footer #social_media_break { float: right; width: 100%; height: 0; }
		}
	
/* +++++++++++++++++++++++++++++++++++++++ INDEX Auswahlseite +++++++++++++++++++++++++++++++++++++++ */
body.index { background: #f7f7f7 url('/images/background.jpg') no-repeat fixed center center; background-size: auto auto; background-size: cover; }
body.index #page	{ padding: 10px 10px 16em 10px; background: none; }
body.index #page > h1, body.index #page > h2	{ display: none; }
	body.index section	{ position: relative; float: left; width: 100%; height: auto; margin-top: 1em; padding: 0.5em 2% 2em 2%; font-size: 0.9em; background: #fff; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
		section#lat a.logo { display: block; width: 60%; margin: 1em auto; }
		section#arp a.logo { display: block; width: 40%; margin: 1em auto; }
		section a.logo img { width: 100%; height: auto; }
		section h2 { font-size: 1.3em; font-weight: 600; }
		section h2 span { display: none; }

		body.index section ul { display: inline-block; width: auto; margin: 1em auto; padding-bottom: 1em; list-style: none; text-align: left; font-size: 1.2em; }
		body.index section ul li { position: relative; padding-left: 28px; padding-bottom: 0.4em; }
		body.index section ul li::before { position: absolute; top: 2px; left: 0; content: "\f138"; font-size: 20px; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #b5cc3d; line-height: 1; }
		body.index section ul li a { font-weight: 600; text-decoration: none; }

		body.index section div.link_wrap { position: absolute; bottom: 1.5em; left: 0; width: 100%; }
		body.index section a.link { width: 90%; margin: 0px auto; padding: 0.2em 0 0.2em 0.2em; background: #b5cc3d; color: #fff; font-size: 1.3em; font-weight: 600; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
		body.index section a.link:before { top: 4px; left: 8%; color: #fff; font-size: 20px; }
		body.index section a.link:hover { background: #c4da50; text-decoration: none !important; }

@media (min-width: 420px) {
	body.index section	{ margin-top: 2em; padding: 0.5em 2% 2em 2%; font-size: 1em; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; }
	section#lat a.logo { width: 75%; margin: 1.5em auto; }
	section#arp a.logo { width: 48%; margin: 1.5em auto; }
		body.index section ul li { padding-bottom: 1em; }
		body.index section a.link:before { top: 5px; font-size: 22px; }
}
@media (min-width: 600px) {
body.index #page	{ padding: 10px 10px 3em 10px; }
	body.index section	{ float: left; width: 45%; margin: 0 2.5%; }
		section#lat a.logo { width: 80%; margin: 3em auto; }
		section#arp a.logo { margin: 2.3em auto; }
		section h2 span { display: inline; }
}
@media (min-width: 800px) {
		section h2 { font-size: 1.5em; }
		body.index section a.link { width: 80%; }
		body.index section a.link:before { left: 16%; }
}
@media (min-width: 1000px) {
		body.index section a.link { width: 60%; }
		section#arp a.logo { margin: 2.3em auto 2.1em auto; }
		body.index section#arp ul li { padding-bottom: 1.3em; }
}
@media (min-width: 1300px) {
	body.index section	{ width: 40%; margin: 0 5%; padding: 1em 2% 2em 2%; }
}

	
/* +++++++++++++++++++++++++++++++++++++++ Scroll to Top +++++++++++++++++++++++++++++++++++++++ */
#scroll_to_top	{ position: fixed; z-index: 100; bottom: 0; right: 10px; width: 51px; height: 50px; background: rgba(180,180,180,0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0;
					-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#scroll_to_top:before	{ position: absolute; top: 4px; left: 8px; content: "\f062"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: block; font-size: 40px; line-height: 1; color: #fff; }
#scroll_to_top:hover	{ background: rgba(180,180,180,0.8); cursor: pointer; }
#scroll_to_top:hover:before	{ color: #373a41; }
@media (min-width: 1400px) {
#scroll_to_top	{ bottom: 0; right: 30px; width: 70px; height: 70px; }
#scroll_to_top:before	{ top: 10px; left: 13px; font-size: 48px; }
}

/* +++++++++++++++++++++++++++++++++++++++ COOKIE BANNER +++++++++++++++++++++++++++++++++++++++ */
#cookiebanner 	{ position: fixed; z-index: 300; bottom: -600px; left: 0; opacity: 0; background: rgba(247,247,247,0.9); width: 100%; font-size: 1.3em; line-height: 1.1; border-top: 1px solid #b5cc3d; display: block; }
#cookiebanner:hover	{ background: rgba(247,247,247,1); }
#cookiebanner.hover	{ background: #e6ebc9; }
	#cookiebanner > div 	{ max-width: 1140px; margin: 0px auto; padding: 1em 1em 1.1em 1em; overflow: hidden; }
	#cookiebanner > div strong	{ display: block; margin-bottom: 0.2em; font-size: 1.2em; color: #b5cc3d; }
	#cookiebanner > div p 	{ float: left; width: 100%; margin-bottom: 0.8em; }
	#cookiebanner > div form div { text-align: center; }
	#cookiebanner > div button { display: block; margin: 0px auto; padding: 0.6em 2.5em; background: #b5cc3d; border: 1px solid #b5cc3d; color: #fff; font-weight: bold; font-size: 14px; text-decoration: none; text-transform: uppercase; cursor: pointer; }
	#cookiebanner > div button:hover { background: #fff; color: #b5cc3d; }
	#cookiebanner > div form div a { display: inline-block; margin-top: 0.5em; text-decoration: none; }
@media (min-width: 660px) {	
	#cookiebanner > div p 	{ width: 70%; margin-bottom: 0; }
	#cookiebanner > div form div { float: right; padding: 0.1em 1em; }
	#cookiebanner > div button { padding: 0.6em 2em; }
}
@media (min-width: 850px) {	
	#cookiebanner > div p 	{ width: 75%; }
	#cookiebanner > div form div { margin-left: 0.5em; padding: 0.1em 1em; }
}
@media (min-width: 1200px) {	
	#cookiebanner > div p 	{ width: 80%; }
	#cookiebanner > div button { padding: 0.6em 2.6em; }
}
@media print {
	#cookiebanner	{ display: none; }
}


/* ################################################ MEDIA QUERY: >= 760 (CHANGE OF NAVIGATION) ################################################ */
@media (min-width: 760px) {
#page	{ }
}

/* ################################################ MEDIA QUERY: >= 900 ################################################ */
@media screen and (min-width: 900px) {
#page	{ }
}

/* ################################################ MEDIA QUERY: >= 1100 ################################################ */
@media screen and (min-width: 1100px) {
#page	{ }
}

/* ################################################ MEDIA QUERY: >= 1300 ################################################ */
@media screen and (min-width: 1300px) {
body { background: #f7f7f7 url('/images/background.jpg') no-repeat fixed center center; background-size: auto auto; background-size: cover; }
#page	{ }
}


/* +++++++++++++++++++++++++++++++++++++++ DRUCKVERSION +++++++++++++++++++++++++++++++++++++++ */
@media print {
	#pageinfo { display: none !important; }
	body	{ font-size: 74%; background: #fff; color: #000; }
	
	header, #scrollnavi_wrap, #breadcrumb, #services, #nav_second, #social_media, #copyright, #scroll_to_top, .zoom:after { display: none !important; }
	main		{ padding-top: 0; padding-bottom: 2em; background: #fff !important; }
		#content		{ background: #fff; }
	
	footer #contact > div a.website { display: block; margin-top: 0.2em; }
}