/* General Style */ 
/* Base1*/
/* by Thomas Schmid, below the line, Webmarketing, Friedberg*/


@font-face { font-family: 'Farro-Reg';src: url('../font/Farro-Regular.ttf') format('truetype'); }









             html {
  scroll-behavior: smooth;
}

body {
	background: #ffffff;
	font-size:100%;
	margin:0em;
	padding:0em;
	font-family: "Farro-Reg", arial, san-serif;
	color:#676767;	
}


h1 {
	font-size:3em;
	font-weight:700;
	margin:0;
    padding:0;color:#339678;
}
.start h1{font-family:'fisherman';font-size:5em;}

h2 {
	font-size:1.8em;
	font-weight:400;
	margin:0em 0 0.5em;
	padding:0em;
}

h3 {
	margin:0;
	padding:0;
    font-size:1.4em;
}

h4 {
	font-size:1.5em;
	color:#054f95;
	margin:0em;
	padding:0em;

}
h5 {
	font-size:1.6em;
	color:#054f95;
	margin:0em;
	padding:0em;

}
p{font-size:1.1em;text-align:left;margin:0;}
.start #main p{text-align:center;}
hr{
	border: none;
	margin:2em 0;
}
hr.style01{
	border-top: 1px dashed #339678;
	text-align: center;
}

/*Sprachen*/
#start-top{height:2em;background:#339678;text-align:center;}
#start-top .info-top {max-width:1200px;margin:0 auto;text-align:right;}
#start-top .info-top p{display:inline-block; color:#ffffff;font-size:0.9em;}
#start-top .info-top p a{color:#ffffff;}



/* Header */ 





header{background:#ffffff;height: 5em;margin: 0 auto;position: absolute;top:0;width: 100%;z-index: 9999;border-bottom:#339678 solid 5px;border-top:#339678 solid 5px;}
header.neu{height:5em;background:#ffffff;margin: 0;	position:fixed;	z-index:9999;}
header #banner{max-width:1200px;margin:auto;height:3em;}
header #banner #banner-top{width:28%;display:none;}
header #banner #banner-top-1{display:none;}
header #banner #banner-top{display:none;}
header #banner #banner-top img{height:8em;}
header #banner #banner-top a {color: #bc0000;display: block;margin: 0;padding:0;}
header #banner #banner-top a img{max-width:100%;}
.start header #banner #banner-top a img{display:none;}
header.neu #banner #banner-top-1{display:inline-block;}
header.neu #banner #banner-top{display:none;}
header.neu #banner #banner-top-1 img{margin-top:0.5em;}





#main{text-align: center;margin:7em 0 5em;}
#main article {
	max-width:1200px;
	vertical-align: top;
	margin:1em auto 0;
	padding:0 2% 0 2%;
    text-align:left
}
.start #main article{text-align:center;}




.grid-2 {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap:1%;
  padding:1%;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.grid-2-infos-1 {
  display: grid;
  grid-template-columns: 66% 33%;
  grid-gap:1%;
  padding:20px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.grid-2-infos-2 {
  display: grid;
  grid-template-columns: 33% 66%;
  grid-gap:1%;
  padding:20px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.grid-2-item {

  padding: 0 1%;
  font-size: 1em;
  text-align: center;
/*  height:22em;*/
  position:relative;
}
.prozess .grid-2-item{margin: 1em 0 0 0;height:550px;}
.grid-2-item img{width:100%;}
.grid-2-item .text{position: relative;
font-size: 2em;
margin: -5.2em 0 0 0;
background: rgba(97, 146, 0, 0.8);
height: 3em;
padding: 2em 0 0 0;}
.grid-2 .left{position:relative;right:0;}
.grid-2 .right{position:relative;left:0;}
.grid-2 .grid-2-item a{font-weight:800;text-decoration:none;color:#ffffff; text-shadow: 0 0 5px #000000;}
.grid-2 .grid-2-item a:hover{color:#000000;text-shadow: 0 0 15px #ffffff;}
.about-us .grid-2{padding:0;}
.about-us .grid-2 .grid-2-item{height:auto;}
.about-us .grid-2-infos-2 .grid-2-item{height:auto;}
.about-us .grid-2 .grid-2-item p{margin:0;}
.gewuerze .grid-2 .grid-2-item p{font-size:1em;}
.kraeuter .grid-2 .grid-2-item p{font-size:1em;}
.samen .grid-2 .grid-2-item p{font-size:1em;}

.grid-2 .grid-2-item h2{margin:0;}
.grid-2 .grid-2-item p{margin:1em 0 0 0;}
.grid-2 .grid-2-item p.bold{font-weight:700;}
/*.grid-2 .grid-2-item ul{margin:0 0 1em;}*/
.grid-2 .grid-2-item ul li{text-align:left;list-style:none;}


.grid-3 {
  display: grid;
  grid-template-columns: 31.33% 31.33% 31.33%;
  grid-gap:0 3%;
  padding:0;
  width:100%;
  margin:0 auto;
  text-align:center;}
  
.grid-3-item{
    font-size:2em;
    line-height:2em;background: #339678;
    padding:0;
    margin:0;
    font-weight:800;
}
.grid-3-item a{color:#ffffff;text-decoration:none;}

.grid-4{
  display: grid;
  grid-template-columns: 21% 21% 21% 21%;
  grid-gap:0 5.3%;
  padding:0;
  width:100%;
  margin:0 auto;
  text-align:center;}
.grid-4 .grid-4-item{width:100%;margin:1em 0; padding:0 0 2em;}
.grid-4 .grid-4-item a{text-decoration:none;}
.grid-4 .grid-4-item p{line-heigt:2em;vertical-aling:middle;margin:1em 0;}
.grid-4 .grid-4-item img{width: 100%;}
/*.grid-4 .grid-4-item img{width: 100%;border-radius: 20px;box-shadow: 10px 10px 10px rgba(97, 146, 0, 0.5);transition:1s;}*/

.grid-4 .grid-4-item p{width:100%; text-align:center;margin:1em 0 0; font-weight:700;font-size:1.2em;line-height:3em;background:#ffffff;}
.grid-4 .grid-4-item p.weiter{margin: -0.4em 0 0;font-weight:500;font-size:0.9em;font-style:italic;}

.grid-4 .samen{background:rgba(222, 204, 0, 1);border:solid 1px rgba(222, 204, 0, 1);}
.grid-4 .kraeuter{background:rgba(129, 196, 0, 1);border:solid 1px rgba(129, 196, 0, 1);}
.grid-4 .gewuerz{background:rgba(196, 129, 0, 1);border:solid 1px rgba(196, 129, 0, 1);}
.grid-4 p{color:#000000;}
/*.grid-4 .samen p{color:rgba(222, 204, 0, 1);}
.grid-4 .kraeuter p{color:rgba(129, 196, 0, 1);}
.grid-4 .gewuerz p{color:rgba(196, 129, 0, 1);}*/

/*.grid-4 .grid-4-item p{width:100%; text-align:center;margin:1em 0 2em 0; font-weight:700;font-size:1.2em;color:rgba(97, 146, 0, 1);}*/
/*.grid-4 .grid-4-item img:hover{box-shadow: -10px -10px 10px rgba(205, 205, 205, 1);}*/
.prozess .grid-4 .grid-4-item{margin-top:2em;}
.prozess .grid-4 .grid-4-item img{box-shadow:none;}

.icon-slider{position:relative;z-index:9988;text-align:center;max-width:1200px;margin:0 auto;}
.icon-slider img{width:30%;margin: -1em auto 0;}

.start .icon-slider{max-width:500px;}
.start .icon-slider img{width:100%;}



#slider{margin-top:5em;/*background:#339678;*/background-image:url(../images/bg.jpg);;padding:0;height:17em;}
.kraeuter #slider{background-image:none;background:#81c400;}
.gewuerz #slider,.gewuerze #slider{background-image:none;background:#c48100;}
.samen #slider{background-image:none;background:#decc00;}
#slider .slider-grid-2{display: grid;grid-template-columns: 40% 60%;max-width:1200px;width:100%;margin:0 auto;}
#slider .slider-grid-2 .logo-slider{background:#ffffff;text-align:center;}
#slider .slider-grid-3{display: grid;grid-template-columns: 33.33% 33.33% 33.33%;max-width:1200px;width:100%;margin:0 auto;color:#ffffff;font-size:1.3em;margin-top:-0.2em;}
#slider .slider-grid-3 a{text-decoration:none;color:#ffffff;font-weight:600;}

.produkt-label{line-height:3em;vertical-align:middle;text-align:center;width:100%;}

.produkt-label .links{background:#81c400;}
.produkt-label .mitte{background:#c48100;}
.produkt-label .rechts{background:#decc00;}
    



/*#slider .logo-slider{width:40%;position:absolute;left:0;text-align:right;display:inline-block;}
#slider .logo-slider img{background:#ffffff;}
#slider #slider-img{position:absolute;width:60%;right:0;text-align:left;display:inline-block;}
#slider img{height:18em;width:auto;}*/




/*#slider img{width:100%;}*/


/*#slider-help{font-size:3em;transform:uppercase;max-width:1200px;margin:-5em auto;color:#ffffff;text-align:left;font-weight:800;}*/
/*.start #slider img{height:auto;}*/
/*.start #slider-help{margin:2em auto 1em;}*/


.start #main article{margin:0 auto;}

.about-us .more-infos-1{background-image: linear-gradient(to right, #f7f0e7 0%, #eee1cf 100%);padding:2em 0;}
.about-us .more-infos-4{margin:2em auto;}
.prozess .more-infos-1{max-width:1200px;margin:2em auto 1em;text-align:center;}
.prozess p{margin:1em 0 0 0;}
.prozess h3{text-align:center;}
.more-infos-2{max-width:1200px;margin:6em auto 0;}
.more-infos-2 img{width:auto;}
.more-infos-2 img.left{float:right;}
.more-infos-2 img.right{float:left;}
.more-infos-2 h3{margin:1em 0;font-size:2em;color:#339678;text-align:left;}

.more-infos-4{margin:3em auto 0;background-image: linear-gradient(to bottom, #c6ffce 0%, #deeee2 100%);padding:1em 0;}
.more-infos-4 h3{font-size:2em;color:#339678;}
.more-infos-4 p{text-align:center;font-size:1.5em;}
.kontakt p.dsnote{font-size:0.8em;}

/* Navigation */ 
ul {
	margin:0px;
	padding:0px;
}


#main-menue{width:71%;display:inline-block;vertical-align: top;text-align: right;}
.neu #main-menue{width:80%;}
nav ul{margin:0; width:100%;padding:0;}
nav ul li{display:inline-block;list-style:none;margin-left:4%;vertical-align:middle;line-height:3em;}
nav ul li a{color:#339678;text-decoration:none;}


.sprachen{display:inline-block;}
li.lang-active a{display:none;}
div.mod-languages li.lang-active{margin:0;padding:0;width:0;}
/* Footer */ 

footer {
	display:block;
	background:#49685f;
	margin:-5em auto 0;
	text-align:center;
    padding:2em 0 0 0;
    color:#ffffff;
    
}
footer p{font-size:1em;}

footer ul {
	max-width:1200px;
	width:96%;
	color:#ffffff;
}
footer ul li {
	display:block;
	margin:0;
	vertical-align:top;
	padding: 0.5em 0;
    color:#ffffff;
}
footer .footer-item ul li{color:#ffffff;}
footer ul li a:hover {
	color:#ffffff;
	padding:0;
}
footer ul li a.active {
	border-bottom:#ffffff;
}

footer a,
footer ul li a {
	color:#ffffff;
	transition: filter 0.9s ease 0s;text-decoration:none;}
.footer-grid {
  display: grid;
  grid-template-columns: 45% 10% 45%;

  padding:1%;
  max-width:1200px;
  margin:0 auto;
}

.footer-item {

  padding: 0 1%;
  font-size: 1em;
  text-align: center;
}
.footer-item ul li{text-align:right;}


.footer h3{text-align:left;}









fieldset{border:none;}
/* Mobile Style */




/*Slider*/

#gallery {
	position: relative;
	background: none;
	border: none;
    width:%;
}

/*#gallery {
	position: relative;
	background: none;
	border: none;
    width:100%;
    margin:0;
    padding:0;
    height:55vh;
}*/
#gallery figure img{width:100%;}

#gallery figure {
	position: absolute;

	top: 0;
	left: 0;
        width:100%;
    margin:0;
    padding:0;
	animation: wechseln 25s infinite;
}

#gallery figure:last-of-type {
	position: relative;
}

#gallery > figure figcaption {
	position: absolute;
	left: 15%;
	font-size: 2em;
	font-weight: bold;
	top:5em;
	color: white;
}

#gallery h3{color:#ffffff;text-shadow: 2px 1px 8px #000000;font-size:1.5em;text-transform:uppercase;}
#gallery h4{color:#ffffff;text-shadow: 2px 1px 8px #000000;width:100%;text-transform:uppercase;}
#gallery p{margin: 0 0 0 0; padding:0;text-shadow: 2px 1px 8px #000000;}



p.b-kontakt{margin-top:1em;padding:0;}
p.b-kontakt a{color:#339678;border:1px solid #000000;background:#ffffff;padding: 0.3em 1em;border-radius: 1em;font-size:0.5em;text-shadow:none;transition: background 1s;text-decoration:none;}
p.b-kontakt a:hover{color:#ffffff;background:#339678;transition: background 1s;}
.more-infos-4 p.b-kontakt a{font-size:1em;}





@keyframes wechseln {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

#gallery figure:nth-of-type(2) {
	animation-delay: 5s;
	opacity: 0;
}

#gallery figure:nth-of-type(3) {
	animation-delay: 10s;
	opacity: 0;
}
#gallery figure:nth-of-type(4) {
	animation-delay: 15s;
	opacity: 0;
}
#gallery figure:nth-of-type(5) {
	animation-delay: 20s;
	opacity: 0;
}
/*hamburger*/

.hamburger {display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible;text-align:left;width:96%;}
.hamburger-box {width: 10%;height: 2em;display: inline-block;position: relative;margin:1em -1% 0 0;}
.hamburger #banner-text{text-align:center;display:inline-block;width:78%;vertical-align:top;}
.hamburger #banner-text #logo{float:none;display:inline-block;width:100%;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 40px;height: 4px;background-color: #339678;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
.hamburger--collapse .hamburger-inner {top: auto;bottom: 0;transition-duration: 0.13s;transition-delay: 0.13s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {top: -20px;transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {transform: translate3d(0, -10px, 0) rotate(-45deg);transition-delay: 0.22s;transition-timing-function: cubic-bezier(0.215, 0.61,0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {top: 0;opacity: 0;transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {top: 0;transform: rotate(-90deg);transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

.desk{display:inline;}
.mobil{display:none;}

/*@media screen and (max-width:1300px){
    nav ul li{margin-right:3%;}

    #main {width:90%;margin: 0 auto 5em;}
    .footer-grid{width:90%;padding:0;}
    header #banner{width:90%;}
    .neu #main-menue {width: 78%;}
    .about-us .more-infos-1 {padding: 2em;}
    .grid-2-item{height:auto;}
    
}*/
@media screen and (max-width:1200px){
    #slider .slider-grid-2{grid-template-columns:30% 70%;background:#ffffff;}
    #main article{margin:0 auto;width:90%;}
    header.neu #banner{width:90%;margin:auto;}
    header.neu #main-menue{width:77%;}
    #start-top .info-top{margin: 0 5%;}
    .footer-grid{width:90%;}
    .more-infos-2{width:90%;}
    .more-infos-1 .grid-2{width:90%;}
    .prozess .more-infos-1{width:90%;}
    
    
/*    
    nav ul li{margin-right:5%;}
    .grid-2-item .text{background:none;}
    #gallery > figure figcaption{top:3em;}
    .more-infos-4{margin:0 auto;}
    .more-infos-2{margin:0 auto;} 
    footer{padding:2em 0;}
    .start #slider{height:24em;}*/
   
}
@media screen and (max-width:1100px){
/*    .neu #main-menue {width:76%;}
    #slider-help{margin:-3em auto;}
    #main article{margin-top:14em;}
    .about-us .grid-2-item{padding:0;height:auto;}
    .about-us .grid-2-infos-1,.about-us .grid-2-infos-2{padding:0;}*/
    
}
@media screen and (max-width:1000px){
    #main{margin:3em 0 5em;}
    #slider .slider-grid-2{grid-template-columns:40% 60%;background:#ffffff;}
    .logo-slider img{width:60%;}
    header.neu #banner-top-1{width:20%;}
    .more-infos-4 p{font-size:1.2em;}
    .more-infos-4 h3{font-size:1.5em;}
    
    
    
    
    
/*    #gallery > figure figcaption{top:2em;}
    .footer .nav,footer h3,.grid-footer .grid-item{text-align:center;}
    #main{margin:1em auto 1em;}
    .start .grid-2-item{height:auto;}
    .start .grid-2{grid-gap:0;}
    .about-us article .text-2{grid-template-columns: 100%;padding:0}
    .about-us article .text-2 .grid-2-item{padding:0 0 0.5em 0;}
    .more-infos-1{margin:0 auto 3em;}
    .more-infos-4{margin: 0 auto 3em;}
    #gallery h3{font-size:1.2em;}
    #gallery h4{font-size:1.2em;}
    #gallery p{font-size:1.1em;}
    header.neu #banner #banner-top-1 {width: 23%;}
    .more-infos-2 img {width:100%;}
    .start #slider{height:19em;}*/

    
}

@media screen and (max-width:800px){
    header.neu #main-menu{width:100%;}
    .logo-slider img{width:70%;}
    .grid-4{grid-template-columns:30% 30% 30%;}
     .mobil{display:inline;}
    .desk{display:none;}   
    nav.nav{display:none;}
    nav.nav ul{background:#ffffff;}
     header #banner #banner-kontakt{display:none;}
    header #banner img{width:auto;}   
    #main-menue{width:100%;}
    .hamburger-box{margin:0;}
    .grid-2-infos-2, .grid-2-infos-1,
    .grid-2{grid-template-columns:98%;}
    .grid-2-infos-2 .info-more img{display:none;}
    .grid-2-item {padding:0;}
    
      nav ul li {width: 100%;padding:0.5em 0;margin: 0 5%;text-align:center;}
        nav.nav ul{width:100%;}
      p{margin: 0.5em 0 0 0;}
      .more-infos-2{margin:0 auto;}
      .prozess .grid-4{grid-template-columns:44% 44%;}
      .prozess .grid-2-item{height:auto;}
      
/*    h1{font-size:2em;}
    #gallery > figure figcaption{font-size:1.5em;}
    .grid-3-item{margin-bottom:2em;}
    .grid-3-text{grid-template-columns:100%;}



    .center{text-align:right;}

    .start #slider{height:19em;}
    #main{margin:1em auto 1em;}
    .neu #main-menue {width: 75%;}
    .start #slider{height:14em;}
    #slider-help{font-size:2em;margin:-4em auto 2em;}
    .grid-4{grid-template-columns: 50% 50%;}
    .prozess article .grid-2{grid-template-columns:100%;padding:0;}
    .prozess .grid-2-item{height:auto;}
    #main article{margin-top:1em;}
    .grid-3-item {font-size:1em;line-height:3em;}*/

}
@media screen and (max-width:600px){
    #gallery{display:none;}
    #slider .slider-grid-3{grid-template-columns:100%;}
    #slider{height:auto;margin-top:6em;}
    .start h1{font-size:4em;}
    h2{font-size:1.5em;}
    h1{font-size:2em;}
    p{font-size:1em;}
    .grid-4{grid-template-columns:47% 47%;}
    .more-infos-4 h3{font-size:1.3em}
    .more-infos-4 p{font-size:1em;width:90%;margin:auto;}
    .more-infos-4 p.b-kontakt{margin: 1em 5% 0;}
    .prozess .grid-4 .grid-4-item{margin-top:0;}
    
    
    
    
    
    
    
    
/*    #gallery > figure figcaption{top:1em;}
    #gallery h3{font-size:1.2em;}
    .beratung{background-size: auto 100%;}
    .footer-kontakt img{width:50%;}
    #slider{height:12em;}
    #main{margin:1em auto 1em;}
    #gallery h4{display:none;}
    .grid-2-text{display:grid;grid-template-columns:100%;}
    nav ul li {width:90%;}
    .grid-2{grid-template-columns:100%;}
    #gallery h3{font-size:1em;}
    #gallery p{font-size:1em;}
    .hamburger-box{margin-right:0;}
    .start #slider{height:9em;}
    .grid-3-item {font-size: 1em;}*/
}
@media screen and (max-width:500px){
    header #banner #banner-top{width:46%;}
    .footer-grid{grid-template-columns:100%;text-align:center;padding:0;}
    .footer p, .footer h3{text-align:center;}
    .footer ul li{text-align:center;}
    #slider-help{color:#339678;margin:-4em auto 0em;}
    .grid-3-item{line-height:2em;}
    .grid-2-infos-2,
    .grid-2-infos-1{width:90%;}
}
@media screen and (max-width:400px){
    #start-top{height:3em;}
    #main-menue{width:90%;}
    header.neu{height:6em;}
    header{height:5.5em;}
}