@font-face {font-family: "Lato Bold";font-display: swap;src: url(../fonts/Lato-Bold.woff2) format("woff2");}
@font-face {font-family: "Lato";font-display: swap;src: url(../fonts/Lato-Regular.woff2) format("woff2");}
@font-face {font-family: "Heuristica Bold";font-display: swap;src: url(../fonts/Heuristica-Bold.woff) format("woff");}
@font-face {font-family: "Rubik Dirt";font-display: swap;src: url(../fonts/RubikDirt-Regular.woff) format("woff");}

/*seite, bilder, headlines, links*/
*{margin:0;padding:0}
html{height:100%;overflow-x:hidden;font-size:92%;color:#5D5959;}
body{height:100%;overflow-y: auto;-webkit-overflow-scrolling: touch;scroll-snap-type: y mandatory;scroll-padding-top: 142px;overflow-x: hidden; font-family: 'Lato', sans-serif;font-weight: 400;}
a:link,a:active, a:visited{color:#5D5959;text-decoration:none;outline:none}

h1{color:#5D5959;width:80%; margin: 0 auto;font: bold 2.8em 'Lato', sans-serif; padding:40px 0 15px 0;}
h2{color:#5D5959; text-align:left;font:bold 1.5em 'Lato', sans-serif ; padding:0 50px;}
h3{color:#5D5959; text-align:left;font:bold 1.3rem/150% 'Lato', sans-serif ; padding:0 50px;}

img{max-width:100%;}
main{width:100%;position:relative;height:100%;}

/*navigation, logo*/
#wrapper{position: fixed;z-index: 90;padding:20px 0 0 12px;width:100%;background:#fff;}
#menu{max-width:1196px;margin:0 auto;}
#logo{float:left;}
.navi{padding: 1rem;text-align:right;float:right; color:#5D5959;font-size:1.3em;margin-top:35px}nav ul li{list-style:none;float:left}nav ul li a{text-decoration:none;display:block;line-height:2.1em;padding:5px 20px 0px 20px}
.main-menu{display:none}

/*sections*/
section{width:100vW;height:100vH;scroll-snap-align: start;text-align:center;}

#landing{height: auto;min-height:770px;background: url(../bilder/haelt.jpg); background-repeat: no-repeat; background-position: 50% 35%;background-attachment: fixed;}
#logo-unten{max-width:1200px;height:auto; margin: 0 auto; text-align:left;padding-top: 135px;padding-left: 30px;}
#text-section{height: auto;min-height:800px;color:#5D5959;}
#motivabsatzgebiet{height: auto;min-height:1080px;background: url(../bilder/absatz.jpg) no-repeat center center fixed;color:#fff;}
#beispiele-section{height: auto;min-height:1000px;color:#5D5959;}
#motivtrockengut{height: auto;min-height:1080px;background: url(../bilder/trockengut.jpg) no-repeat center center fixed;color:#fff;}
#mitmachen{height: auto;min-height:1075px;background: url(../bilder/teamL.jpg) no-repeat center center fixed;color:#fff;border-top:5px solid #fff;}
#kontakt-section{height: auto;min-height:800px;color:#d5d5d5;background:#5D5959;margin-top:5px;}
#legal{height: auto;min-height:1080px;background: #fff;}
#plaintext{max-width:1200px; margin: 0 auto;}

/*motivtexte*/
.coverinfo {position:relative;background:#992A2A; color:white;max-width:800px;height:auto;margin-top:75px;margin: 0 auto;margin-top:5%;text-align: center;padding:50px;font:1.5em 'Arial', serif;line-height:1.8em; }
.cover {position:relative;color:white;width:auto;height:auto;margin-left: 20%;text-align: left;padding-top:90px;font:5em 'Heuristica Bold', serif;letter-spacing:1.5px; }
.cover img {position:absolute; bottom: 2%;}
.cover span {background:none; padding:8px 12px 8px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}
.cover span2 {background:rgba(51,51,51,0.7); padding:8px 12px 8px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}
.cover span3 {background:green; padding:8px 42px 8px 2px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}

.cover2 {position:relative;color:white;width:auto;height:auto; margin-left: 10%;text-align: left;padding-top:250px;font:5em 'Heuristica Bold', serif;letter-spacing:1.5px; }
.cover2 img {position:absolute; bottom: 2%;max-width:100%;height: auto;}
.cover2 span2 {background:rgba(51,51,51,0.7); padding:8px 12px 8px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}
.cover2 span3 {background:green; padding:8px 42px 8px 2px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}

/*texte*/
.vortext{padding:30px 0 0 0;margin:0 auto;width:70%;text-align:center;color:#5D5959;font:normal 1.8rem/190% 'Lato', sans-serif;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.text{padding:5px 0 10px 50px;text-align:left;color:#5D5959;font:normal 1.3rem/150% 'Lato',sans-serif;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.text2{padding:5px 0 0 5px;text-align:left;color:#5D5959;font:normal 1.3rem/150% 'Lato', sans-serif;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

/*teamL*/
#teambox{height:1030px;width: 800px;margin-left:40%;padding-top:50px; }
.jobhead{padding:10px 0 0 0px; margin-left:2%; text-align:left;color:#fff;font:bold 2.7em 'Rubik Dirt';line-height:250%;}
.jobhead span{color:#fff;background:rgba(51,51,51,0.8); padding:10px 45px 10px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;}
.jobtext{padding:10px 0 0 0px; margin-left:2%; text-align:left;color:#fff;font:bold 1.8em 'Rubik Dirt', sans-serif;line-height:250%;}
span1 {color:#d41616;}
.jobtext span{color:#fff;background:rgba(51,51,51,0.8); padding:10px 45px 10px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;}
.button{display:inline-block;padding:0.7em 1.2em;border:0.1em solid #fff;margin:0 auto;border-radius:0.12em;box-sizing: border-box;
text-decoration:none;font:bold 1.7em 'Rubik Dirt';color:#fff;text-align:center;background:#b50404;}
.button a{color:#fff;}

/*footer*/
.foottext{padding:5% 0 0 0;margin:0 auto;width:75%;text-align:center;color:#d5d5d5;font:normal 1.8em 'Lato', sans-serif;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.foottext a {color:#d5d5d5;font:normal 1.2rem 'Lato', sans-serif;}
.footleft{float: left;width: 45%;margin-left:5%;}
.footleft p {color:#d5d5d5;font:normal 1.1rem/120% 'Lato';text-align:left;margin-bottom:2%;}

/*2-spaltig*/
#rahmen{max-width:1200px;height:auto;margin:0 auto;padding:30px 1%;}
#rahmen2{max-width:810px;height:auto;margin:0 auto;padding:1% 0% 5% 12%;}
.clearfix:before,.clearfix:after{content: " ";display: table;}
.clearfix:after{clear: both;}
.clearfix{*zoom: 1;}
.left{float: left;width: 47%;margin-right:2%;padding-right:5px;}


@media (prefers-color-scheme: light) {
  /* helles Farbschema für den Tag */
body{background:#fff;}
}

@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body {background: #fff;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	#main-menu-toggle{display:none;}}
	
@media screen and (max-width:1100px){
	html{font-size:115%;}
	body{scroll-padding-top: 130px;scroll-snap-type: none;}
	#wrapper{padding:20px 0 0 12px;}
	#logo img{max-width:432px;height:108px;}
	#logo-unten{padding-top:116px;padding-left:12px;width:100%;border-top:8px solid white;}
	#logo-unten img{max-width:432px;height:88px;}
	.navi{display:none;}
	
	/* MENU - with a little help from Mark Caron & Brad Traversy*/
	.menu-wrap{position: fixed;top: 15px;right: 0;z-index: 99;width: 92px;height: 92px;}
	.menu-wrap .toggler{position: absolute;top: 0;left:0;z-index: 2;cursor: pointer;width: 92px;height: 92px;opacity: 0;}
	.menu-wrap .hamburger{position: absolute;top: 18px;left: 18px; z-index: 1; width: 50px;height: 50px;display: flex;
		display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center; justify-content: center; -webkit-box-align: center; 
		-webkit-align-items: center; -ms-flex-align: center; align-items: center;}
	
	/* Hamburger Line */
	.menu-wrap .hamburger > div{position: relative;flex: none; width: 100%; height: 2px; background: #5D5959;display: flex;display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
	-webkit-box-pack: left;-webkit-justify-content: left;-ms-flex-pack: left; justify-content: left; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center;align-items: center;}
	
	/* Hamburger Lines - Top & Bottom */
	.menu-wrap .hamburger > div::before,.menu-wrap .hamburger > div::after{content: '';position: absolute;z-index: 1;top: -15px; width: 100%; height: 2px; background: #5D5959;}
	
	/* Moves Line Down */
	.menu-wrap .hamburger > div::after{top: 15px;}
	
	/* Button styling */
	.main-menu{position: absolute;display: none;left: -200px;top: 0;height: 100%;width:100%; z-index: 999;}
	.main-menu ul{list-style: none; margin-top: 5em; padding:5em 0 20em 0;min-height: 100%; width: 100%; background: rgba(255,255,255,1);text-align:center; font:normal 1.4em/1.4em 'Lato',sans-serif;}
	.main-menu ul li{padding:0 0 1.8em 0;float:none;}
	.main-menu a{display: block;color: #5D5959; text-decoration: none;}
	.main-menu .menu-close{position: absolute;top: 10px;right: 2px;font:100 40px/160% 'Lato',sans-serif; color:#5D5959; width: 90px;height: 90px;text-align:center;background: rgba(255,255,255,1);
	display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center; justify-content: center; 
	-webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center;align-items: center;}
	.main-menu:target,.main-menu[aria-expanded="true"]{display: block; left: 0; outline: none;}
	.main-menu:target .menu-close,.main-menu[aria-expanded="true"] 
	.menu-close{z-index: 1001;}.main-menu:target ul, .main-menu[aria-expanded="true"] ul{position: relative; z-index: 1000;}
	
	.cover {max-width:100%;margin-left: 3%;padding-top:275px;font:2.7em 'Heuristica Bold', serif;letter-spacing:1.5px;line-height:135%;}
	.cover img {position:absolute; bottom: 1%;max-width:30%;height: auto;}
	.cover2 {max-width: 100%; margin-left:3%;padding-top:250px;font:2.5em 'Heuristica Bold', serif;letter-spacing:1.5px;line-height:130%; }
	.cover2 img {position:absolute; bottom: 1%;max-width:10%;height: auto;}
	.cover2 span3 {background:green; padding:8px 30px 8px 2px;-webkit-box-decoration-break: clone; box-decoration-break: clone;border-bottom:white 2px solid;}
	
	#teambox{width: 100%;margin-left:0%;padding-top:20%; }
	.jobhead{padding:10px 0 0 0px; margin-left:0%;margin:0 auto; text-align:center;color:#fff;font:bold 2em 'Rubik Dirt';line-height:190%;}
	.jobhead span{padding:8px 12px 8px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;}
	.jobtext{padding:10px 0 0 0px; margin-left:-2%; text-align:center;color:#fff;font:bold 1.4em 'Rubik Dirt';line-height:200%;}
	.jobtext span{padding:8px 12px 8px 12px;-webkit-box-decoration-break: clone; box-decoration-break: clone;}
		
	#landing{background: url(../bilder/haelt-mob.jpg); background-repeat: no-repeat; background-position: 60% 40%;background-attachment: fixed;}
	#text-section{padding-bottom:50px}
	#motivabsatzgebiet{background: url(../bilder/absatz-mob.jpg) no-repeat center center fixed;}
	#beispiele-section{padding-bottom:50px}
	#motivtrockengut{background: url(../bilder/trockengut-mob.jpg)no-repeat 70% fixed;;}
	#steinsetzer{background: url(../bilder/teamL-mob.jpg) no-repeat 20% fixed;}
	#kontakt-section{min-height:1000px;}
	
	#rahmen2{padding:1% 0% 5% 33%;}
	.left{float: left;width: 95%;margin-right:2%;padding-right:5px;}
	.footleft{width: 90%;margin-left:0;margin: 0 auto;text-align:center; padding-right:5px;}
	.foottext{padding: 25% 0 0 0; margin-left: 0%;margin:0 auto;text-align:center;color:#d5d5d5;}
	
	}
	
	@supports (-webkit-overflow-scrolling: touch){#landing, #motivabsatzgebiet, #motivtrockengut, #mitmachen{background-attachment: initial;}}