:root {
--color-antrazit: #363C43;
--color-green: #7AA44F;
--color-browndark:#1F0E01;
--color-browndark:#311D0D;

}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
				margin: 0;padding: 0;border: 0;	font: inherit;vertical-align: baseline;}		
	
	header, main, nav, section, footer, article, aside { display: block;}
		
		* 	{		margin: 0; padding: 0;
					-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;box-sizing: border-box; }
	html, body {height:100%;scrollbar-color: silver white; }		
		/* ------------------------------ */
	
	header 		{	position:relative; margin:0 auto; width:100%;  }
	#headerbild	{	position:relative; margin:0 auto; padding:0em;line-height:0; width:auto;height:254px;background:url(../px/holzbrett1.jpg);}
	#headerbild img	{width:100%;line-height:0;}	
	#ausblendkontakt {position:absolute;top:28em;height:28px;width:12px;color:silver;background-color:red;visibility:hidden;}

/* die angegebenen Höhen der headaer-elemente sind abhängig von der höhe des #sticker */
	#logo1 {position:absolute;top:-10.0em;left:0em; line-height:0; width:421px; min-width:67px;z-index:644;}
	#logo1 img {width:100%;height:auto;}
	#logo2 {position:absolute;top:7px; left:0em; padding:0em; line-height:0; display:none;z-index:2855;width:117px;}

	.slogan 	{position:absolute;top:-7em;	padding:0px; right:6%;max-width:591px; z-index:999;}
	.slogan img	{opacity:0.8;}
	
	#schnellkontakt {position:absolute;left:0px;top:3.0em;height:auto;width:40%;line-height:1.2em;background-color:none;z-index:922;font-size:90%;}
	#sk_links {position:absolute; left:0px;  top:0.3em; z-index:9966;}
	#sk_mitte {position:relative; margin: 0 auto; line-height:100%;color:#666666;}
	#sk_rechts{position:absolute; top:0.3em; 	right:0px;  width:20%;} 
	#sk_links,#sk_mitte, #sk_rechts {text-align:center;white-space: nowrap;padding:3px;}
	#sk_links:hover, #sk_links:hover a, #sk_rechts:hover, #sk_rechts:hover a {border-radius:3px; text-decoration:underline;}

	#leiste {position:relative;background-color:var(--color-antrazit); width:100%;height:40px;top:0px;}
	#klee {position:absolute;top:-0.7em; left:0.3em;z-index:1000; }
			a:hover .rotate {
				   animation: rotate 0.5s infinite linear;
				   cursor:default;
				  	}
			@keyframes rotate { 0% {transform:rotate(0deg);}
				   100% {transform:rotate(359deg);}
		}
					
/* STICKER ------------------------*/
	#sticker, #sticker-clone.sticky {
			position:absolute !important;
			left:0 !important;
			right:0 !important; 
			padding:0px!important;
			top:12em !important; 
			height:0 !important;
			width: 100% !important;
			z-index:100 !important;
			}
	#sticker-clone.sticky{position: fixed !important;
			width: 100% !important;
			height:2.8em !important; 
			top:0em !important; 
			left:0 !important;
			background: #363C43; 
					-webkit-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.28);
					-moz-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.28);
					box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.28);}			
	#sticker-clone.sticky #logo1, #sticker-clone.sticky #slogan, #sticker-clone.sticky #schnellkontakt, #sticker-clone.sticky #ferien {  	
	display:none !important; position:relative !important;}	
	#sticker-clone.sticky #logo2 {  	margin-top:-0.3em;display:block !important; position:relative !important;}	
	#sticker-clone.sticky nav {top:-1.6em;z-index:901; }
	#sticker-clone.sticky nav a, #sticker-clone.sticky nav .activ { padding:5px 15px;}	
/* ------ END STICKER ------------------------*/		
	
	.spreader {position:relative;width:100px; height:3em;}
	
	.maxwidth 	{	position:relative; margin:0 auto; width:96%; max-width:1400px; }			
	header .maxwidth, footer .maxwidth, #sticker-clone.sticky .maxwidth {}		
	
	main		{	background-color:#F5F5DC;padding-top:7em;}
	main ul {		list-style: inside;}														
	article {		
					padding-bottom:0.5em;
							}		
					
	.flexxbox  {display: -webkit-flex;
				display: -moz-flex;
				display: flex;
				flex-direction: row;
				flex-wrap:wrap;
				-webkit-justify-content:flex-start;
				justify-content:flex-start;
				justify-content: space-between; 
				align-items: stretch;
				gap: 1em;
				margin-bottom:0.0em;}
	.logos  {	margin-top:3em;
				display: -webkit-flex;
				display: -moz-flex;
				display: flex;
				flex-direction: row;
				flex-wrap:wrap;
				-webkit-justify-content:center;
				justify-content:center;
				align-items:center ;
				align-content:center ;
				gap: 2em;
				margin-bottom:1.0em;
				background-color:white;width:100%;padding:0.5em;
				border-radius:0px;
				
				-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.27);
		-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.27);
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.27)}	
		
			.aktionsraster {position:relative;width:100%;margin:0 auto;
			display: flex;
		flex-direction:row;
		flex-wrap: wrap;
			gap:24px;
		 grid-template-columns: 1fr 1fr 1fr ;
				  grid-template-rows: auto 1fr auto;
				   grid-auto-flow: row;
			max-width:1500px;
		margin-bottom:12px;
		justify-content: center;
	
  justify-content: center;
  align-items: center;
		
			}
		
		
	.aktion {position:relative;height:auto;border:3px solid #E0C8AA;line-height:0;display:block;max-width:484px;transition: all 250ms;
	box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	animation: fadein 0.7s ease-out normal backwards;background:#C4A68E;}	
	.aktion img {width:100%; }
	.aktion a img:hover {filter: contrast(116%);
-webkit-filter: contrast(116%);
-moz-filter: contrast(116%);}
	.aktion a:hover  {display:block;line-height:0;	filter: drop-shadow(3px 5px 5px #C0F0C1);
		-webkit-filter: drop-shadow(3px 5px 5px #C0F0C1);
		-moz-filter: drop-shadow(3px 5px 5px #C0F0C1);
	transition: all 0.3s ease;
		outline: 7px solid #68B03F;
		outline-offset: 0px;
		}	
				.aktion .pop {position:absolute;top:1px;right:1px;width:44px;}
				
				
		

				
					
	.delay1 {}
	.delay2 {animation-delay:100ms;}
	.delay3 {animation-delay:200ms;}
	.delay4 {animation-delay:300ms;}
	.delay5 {animation-delay:400ms;}
	.delay6 {animation-delay:500ms;}
	.delay7 {animation-delay:600ms;}	
	
	.cont1 {order: 1;flex-grow: 1;}			
	.cont2 {order: 2;flex-grow: 2;}	
	.cont3 {order: 3;}
	.cont4 {order: 4; flex-grow: 0;
			  flex-shrink: 1;
			  flex-basis: auto;}
  
  .cont1, .cont2, .cont3, .cont4, .cont6, .cont7 {max-width:48%;margin-bottom:1.5em;text-align:left;} 
  .cont6, .cont7 { } 

  
  .cont1 img, .cont2 img, cont3 img, .cont4 img {width:100%;}			
   footer .cont1 img, footer .cont2 img, footer .cont3 img, footer .cont4 img {width:auto;}	
   footer .cont1, footer .cont2, footer .cont3, footer .cont4 {}	
   footer .flexxbox, footer .flexxbox h1, footer .flexxbox h2, footer .flexxbox a {color:white;}	

.gallery img {border:8px solid white;		-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.67);
		-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.67);
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.67);}				
.gallery img:hover {transform: rotate(-3deg) scale(1.0, 1.0);
			 -moz-transform: rotate(-3eg) scale(1.0, 1.0);
			 -webkit-transform:  rotate(-3eg)scale(1.0, 1.0);
			 -o-transform:rotate(-3eg) scale (1.0, 1.0);
			 -ms-transform: rotate(-3eg) scale(1.0, 1.0);cursor: zoom-in;	
			 transition: all 0.3s ease;}
.bilderrahmen img  {border:8px solid white;		-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.47);
		-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.47);
		box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.47);	max-width:565px;
		cursor: zoom-in;} 
	 .test {border:2px solid skyblue; background-color:#66CCCC;height:300px; position: sticky;z-index:99999;top:3em;
	 }
	 
	 
	 
	 
	footer {	
				clear:both;
				left:0; 
				right:0; 
				width:100%;
				height:auto;
				padding:1em 0 0px 0;
				margin:0 auto; 
				border-top:1px solid white;
				background-color:var(--color-antrazit);
				}	
	.footerslogan {display:none;}
	.footerslogan img{opacity:0.5;width:80%;}
	footer h1 {color:white;}	
	footer .siegel {position:absolute;margin-top:-80px;right:4%;z-index:8;}		
	
	footer address, {
					top:0;
					margin-bottom:1.0em;
					text-align:left;
					float:left;
					}
	
		
	footer .footerbreit {position:relative;	width:100%;clear:both;
					padding:1em 0 1em 0;
					border-top:1px dashed beige;
					font-size:150%;
					font-weight:bold;text-align:center;
				margin:0 auto;}	
	
	
	
	
	.clearing { clear:both; }
	.floatleft { float:left; }
	.floatright { float:right; }
	
	
	#aufzaehlung {margin-left:1.1em;}
	#aufzaehlung li {list-style:outside;}
	

	
	.show980 {display:none;}
	
	.em02 {	width:0.2em;
		height:0.2em;}
	.em03 {	width:0.3em;
		height:0.3em;}
	.em04 {	width:0.4em;
		height:0.4em;}
	.em05 {	width:0.5em;
		height:0.5em;}
	.em06 {	width:0.6em;
		height:0.6em;}
	.em07 {	width:0.7em;
		height:0.7em;}
	.em08 {	width:0.8em;
		height:0.8em;}
	.em09 {	width:0.9em;
		height:0.9em;}
	.em10 {	width:1.0em;
		height:1.0em;}
	.em11 {	width:1.1em;
		height:1.1em;}
	.em12 {	width:1.2em;
		height:1.2em;}
	.em13 {	width:1.3em;
		height:1.3em;}
	.em14 {	width:1.4em;
		height:1.4em;}
	.em15 {	width:1.5em;
		height:1.5em;}
	.em16 {	width:1.6em;
		height:1.6em;}
	.em02, .em04, .em05, .em06, .em07, .em08, .em09, .em10,.em11, .em12, .em13, .em14, .em15, .em16 {border:none;}