@charset "utf-8";
@font-face {
    font-family: 'matchbook';
    src: url('../fonts/matchbook-webfont.eot');
    src: url('../fonts/matchbook-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/matchbook-webfont.woff') format('woff'),
         url('../fonts/matchbook-webfont.ttf') format('truetype'),
         url('../fonts/matchbook-webfont.svg#matchbookmatchbook') format('svg');
}
@font-face {
    font-family: 'montserrat_alternatesregular';
    src: url('../fonts/montserratalternates-regular-webfont.eot');
    src: url('../fonts/montserratalternates-regular-webfont.eot?#iefix') format('../fonts/embedded-opentype'),
         url('../fonts/montserratalternates-regular-webfont.woff') format('woff'),
         url('../fonts/montserratalternates-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserratalternates-regular-webfont.svg#montserrat_alternatesregular') format('svg');
}
/*
@font-face {
    font-family: 'creampuffregular';
    src: url('../fonts/creampuf4-webfont.eot');
    src: url('../fonts/creampuf4-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/creampuf4-webfont.woff') format('woff'),
         url('../fonts/creampuf4-webfont.ttf') format('truetype'),
         url('../fonts/creampuf4-webfont.svg#creampuffregular') format('svg');
}*/
/*
:root {
	--gruen: #B5C056;
	--orange: #ee9958;
	--rosa: #ffacab;
	--beige: #f0f3db;
	--grau: #3b3b3b;
	--blau: #b4d6d9;	
	}
*/
* {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



html, body {
	font-size: 14px;
	font-family: 'montserrat_alternatesregular', 'Arial', sans-serif;
	color: #3b3b3b;
	line-height: 2rem;
}

header, main, nav, aside, section {
	display: block;
}

h1, h2,h3,h4 {
	font-family: 'matchbook', sans-serif;
	font-weight: normal;
}
	

	
	


/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/
/*----------------------small devices------------------------------------*/


@media screen and (max-width:550px)
{
	abbr {
		text-decoration: none;
	}	

h1 {
	font-size:3.5rem;
	text-align: center;
}

h2 {
	font-size:2.2rem;
	margin-bottom: 1rem;
	line-height: 2.5rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	line-height: 1.5rem;
}
 
em, i {
	font-style:italic;
}

b, strong {
	font-weight: 600;
}

img {
		max-width: 100%;/*  alle img responsive;max. die Breite, die des Fotos selbst hat --- */
		height: auto;
	}

a{
	text-decoration: none;
	outline:none;
}

nav a{
	font-family: 'matchbook';
	font-size:2rem;
}
/*header und  topnavigation*/

header#wellcome {
	width:100%;
	height:100vh;
	background-image: url(../img/pattern_045bwebsite.gif);
	background-repeat: repeat;
	text-align:center;
	color:#fff;
	
}



header#wellcome h1{
	font-size: 5vw;	
}

header#wellcome img {
	width: 60vw;
	height: auto;
}

div#logo {
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	/*padding-top:-webkit-calc(100vh /5);
	padding-top:-moz-calc(100vh /5);*/
	padding-top:20vh;
	
}

header img#logoklein{
	position: absolute;
	bottom:10px;
	width: 150px;
	opacity: 0;
	
	left:calc(100vw/2 - 150px/2);
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}


header#wellcome a {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
	background-image:url(../img/pfeil.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 3vw;
	
}


header#wellcome a:last-of-type {
	background-image: none;
}

header#wellcome a:focus, 
header#wellcome a:hover,
header#wellcome a:active{
	background-position: -40px top;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*top navigation*/
/*.startseite .js-header-sticky{
	position: fixed;
	left: 0;
	top:calc(-100vh + 80px);
	display: block;
	width: 100%;
	z-index: 50;
}*/

.js-header-sticky{
	position: fixed;
	left: 0;
	top:calc(-100vh + 80px);
	display: block;
	width: 100%;
	z-index: 55;
}

.startseite .js-header-sticky #logoklein{
	opacity:1;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.startseite .js-nav-sticky + main {
	margin-top:calc(100vh + 40px);
	/*margin-top:calc(100vh + 40px);*/
}
.startseite .js-nav-sticky {
	position: fixed;
	left: 0;
	top:80px;
	display: block;
	width: 100%;
	z-index: 55;
}

#topnav {
	background-color: #fff;
}

#topnav > a{
display: none;
		
	}

#topnav ul{
	width:100%;
	max-width: 600px;
	display: table;
	margin: auto;

}

#topnav li {
	display:table-cell;
	text-align: center;
	width: 25%;
}


#topnav a {
	display: block;
	line-height: 40px;
	text-decoration: none;
	color:inherit;
}
#topnav a:focus,
#topnav a:hover,
#topnav a:active{
	color:#fff;
	background-color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}



/*main */
.clearfix:after {
	content:"";
	display: block;
	clear: both;
}



main article {
	background-image:url(../img/muster.png);
	background-repeat: repeat;
	-webkit-background-size: 15px;
	-moz-background-size: 15px;
	background-size: 15px;
	padding: 2rem 0;

}
article div.content{
	width: 95%;
	margin: auto;
	padding: 1rem;

		
}
/*main ueber*/
article#ueber {
	background-color:#b4d6d9;
}

article#ueber .content {
	background-color: #fff;
	
}
article#ueber img {
	float:left;
	margin-right:1rem;
	width: 40%;
	max-width: 361px;
}

#apfel {
	float:right;
	width: 120px;
	height:97px;
	background-image:url(../img/apfel_sprite.png);
	background-repeat:no-repeat;
	background-position:45px bottom;

}

#apfel:focus,
#apfel:hover,
#apfel:active {
	background-position: -60px bottom;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*main produkte*/

article#produkte {
	background-color:#f0f3db;
	padding-top:0;
}

#produkte > img	{
		display: block;
	}

	
#demo1, .sy-box{
		display: none;
	}

#prod_nav ul{
	width: 100%;
	max-width: 900px;
	display: block;
	margin: auto;
	position: relative;
	z-index: 20;
}

#prod_nav li {
	display:block;
	text-align: center;
	width: 100%;
	margin:5px;

}

#prod_nav a {
	display: block;
	line-height: 40px;
	color:inherit;
	border: 1px solid #3b3b3b;
	margin:3px;
	background-color: #fff;
}


#prod_nav a:focus,
#prod_nav a:hover,
#prod_nav a:active{

	background-color:#b4d6d9;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/

}

/*kurs*/

article#kurs {
	background-color:#ecb5b4;
}

article#kurs .content {
	background-color: #fff;
	
}

article#kurs h2:before {
	content: url(../img/apfel_50x.png) " ";
}
mark {
	padding:3px;
	background-color:#b4d6d9;

	
}
/*kontakt*/

article#kontakt {
	background-color:#f0f3db;
}
article#kontakt .content {
	background-color: #fff;
	
}

article#kontakt img{
	width: 20%;
	min-width: 40%;
	display: block;
	margin: 0 auto 20px;
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	margin-bottom: 20px;
}

/*formulare*/
form {
		margin-top:1rem;
	
		line-height: 1.5rem;
	}
		
		
fieldset {
	padding:1rem;
}
	
	legend {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	}

input[type="text"], input[type="email"], input[type="tel"] {
	width:100%;
	height: 2rem;
	margin: 5px 0 0 0;
	padding-left:5px;
	font-family: inherit;
}
input[type="text"]#anzahl {
	width:50%;
}

textarea {
	width:100%;
	resize: vertical;
	margin-top: 5px;
	font-family: inherit;
	padding:5px 0 0 5px;
}

form span {
	color:#ecb5b4;
}


button[type="submit"] {
	width: 12rem;
	line-height: 3rem;
	background-color:#b4d6d9;
	border: none;
	font-size: 1rem;
	color:#fff;
	float:right;
}


button[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:active {

	background-color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*footer*/

#foot_nav {
	background-color:#fff;
	position: relative;
	left: 0;
	bottom:2px;
	
	
}

#foot_nav ul{
	width: 60%;
	max-width: 200px;
	display: table;
	margin: auto;
}

#foot_nav li {
	display:table-cell;
	text-align: center;
	width: 50%;
}

#foot_nav a {
	display: block;
	line-height: 40px;
	text-decoration: none;
	color:inherit;
}

#foot_nav a:focus,
#foot_nav a:hover,
#foot_nav a:active{
	color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}

/*-------------------unterseiten--------------------------*/
/*-------------------unterseiten--------------------------*/

header#wellcome.produkte {
	width:100%;
	height:60px;

	background-repeat: repeat;
	text-align:center;
	color:#fff;
	position: fixed;
	left:0;
	top:0;
	
}


header#wellcome.produkte a.produkte img#logoklein{
	position:absolute;
	display: block;
	top:15px;
	left:5%;
	width: 90px;
	opacity: 1;
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
}

header#wellcome a.produkte {
	display: block;
	margin: auto;
	width: auto;
	height: auto;
	background-image:none;
	margin-top: 0;
	
}
	
	
/*unterseiten navigation*/	
	
#topnav.produkte {
	background-color:#f0f3db;
	position: fixed;
	top:0px;
	right:-100%;
	width: 100%;
	transition: all 1s linear;
	z-index:100;
}


	
#topnav.produkte:target {
	right:0px
	}	
	
#closenav {
		opacity: 0;
		display: block;
		visibility: hidden;
		position: absolute;
		transition: opacity 0.5s ease-in-out;
		text-indent: -999em;/*text verstecken aus viewport raus*/
		overflow: hidden;
	}
	
#topnav.produkte:target + #closenav{
		opacity: 1;
		visibility: visible;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		background-color: rgba(255,255,255,0.8);
		z-index: 50;
	}	
	
#topnav.produkte > a{
		background: url(../img/Apfel_burger.png) no-repeat;
		background-position: center center;
		display: block;
		height: 60px;
		width: 60px;
		background-color:#f0f3db;
		position:absolute;
		left:-60px;/*button ist in navigation, die um 100% rechts raus ist;  der button ist mit -60px wieder relativ zur navigaton in das fenster geschoben*/
		top:0;
	
	}

#topnav.produkte a{
		padding-left:5px;
	}
	
#topnav.produkte > a:focus,
#topnav.produkte > a:hover,
#topnav.produkte > a:active{
		background-color:#fff;
	}
	

	
#topnav.produkte ul {
		display: block;
		
	}	
	
#topnav.produkte li{
	width:100%;
	display: block;
	
}

/*navigation datenschutz impressum*/
#topnav.produkte.ds_impress li{
	width:25%;
}
	
#topnav.produkte a:focus,
#topnav.produkte a:hover,
#topnav.produkte a:active{
	color:inherit;
	background-color:#fff;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}

/*main unterseiten*/
	

	
 main.produkte {
	 margin-top:60px;
}
	
	

.js-nav-sticky + main.produkte {
	margin-top:60px;
	/*margin-top:calc(100vh + 40px);*/
}



#produkte.produkte-wrap {
	background-color:#f0f3db;	
	margin-top:10px;
}

.produkte_head h1{
	margin-bottom:2rem;
	display:inline
}

.produkte_head{
	padding:2rem 1rem;
	line-height: 1.5rem;
}

.produkte_head p {
	display: inline;

}

.produkte_head.saft{
	background-color: #ffacab;
}


.produkte_head.sirup{
	background-color: #f0f3db;
}

.produkte_head.lecker{
	background-color: #b4d6d9;
}

.produkte_head.trocken{
	background-color:#f0f3db;
}

.produkte-wrap h2{
	font-size:2rem;
	text-align: center;
}


.produkte-item{
	text-align: center;
	line-height: 1.2rem;
	float:left;
	width: 48%;
	margin:1rem 3% 1rem 0;
	background-color:#fff;
	border: 1px solid #3b3b3b;
}

.produkte-item:nth-of-type(2n) {
	margin-right: 0;
}

.produkte-item img {
	width: 30%;
	max-width:228px;
	margin-top: 1rem;
	-webkit-filter:drop-shadow(3px 3px 0px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	
}

.produkte-item div {
	padding:0 1rem 1rem 1rem;

}


.produkte-item mark {
float:right;
margin-top:1rem;
}

.produkte-item a > mark:focus,
.produkte-item a > mark:hover,
.produkte-item a > mark:active	{

background-color:#ee9958;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}	
	
	

#produkte.saft {
	background-color:#ffacab;
}

#produkte.lecker {
	background-color:#b4d6d9;
}


/* impressum und datensschutz*/

#produkte.ds_impress {
	background-color:#f0f3db;
	padding-top:3rem
}

.ds_impress h1,
.ds_impress h2,
.ds_impress h3{
	background-color:#f0f3db;
	padding: 0.5rem;
	margin-top:1rem;
	text-align: center;
}

.ds_impress h1{
	font-size: 3rem;
	margin-top:0;
	margin-bottom:5px;
}

.ds_impress h2{
	font-size: 2rem
}

.ds_impress p{
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.ds_impress ul {
	font-size: 0.9rem;
	line-height: 1.2rem;
	list-style: none;
	font-style: normal;
}

.ds_impress img {
	margin-top: 1em;
}

.content.ds_impress {
	background-color:#fff;
}

.ds_impress span {
	display: block;
	margin-top:2rem;
	padding:5px;
	font-weight: 700;
	border-top: 1px solid #3b3b3b;
}

.ds_impress adress {
	font-size: 0.9rem;
	line-height: 1.2rem;	
}
	
	}
	
	
/*----------------------verysmall devices------------------------------------*/
/*----------------------verysmall devices------------------------------------*/
/*----------------------verysmall devices------------------------------------*/
/*----------------------verysmall devices------------------------------------*/
/*----------------------verysmall devices------------------------------------*/
/*----------------------verysmall devices------------------------------------*/


@media screen and (max-width: 330px)/*wird hier zwischen max 550px und min 551px gesetzt, damit nur das geändert werden kann, was durch die folgenden css nicht mehr überschrieben wird. setzte ich die very small css vor die small, werden die änderungen im very small wieder überschrieben; eine andere version ist, in die very small-media query alles von der max550px zu schreiben und die mittlere 550px media query zu begrenzen von min331px bis max500px. dann kann ich die media query in der reihenfolge ganzklein, klein, groß im css lassen*/
{
	

/*main */



main article {
	background-image:none;
	padding: 2rem 0;

}
article div.content{
	width: 100%;
	margin: auto;
	padding: 1rem;

		
}

/*-------------------unterseiten--------------------------*/
/*-------------------unterseiten--------------------------*/


	
	
/*unterseiten navigation*/	
	



/*main unterseiten*/
	


.produkte-item{
	text-align: center;
	line-height: 1.2rem;
	float:none;
	width: 100%;
	margin:1rem 0;
	background-color:#fff;
	border: 1px solid #3b3b3b;
}


	}
	
	

/*---------------------------------------desktop---------------------------------*/
/*---------------------------------------------desktop---------------------------------*/
/*-----------------------------------------------------desktop---------------------------------*/
/*----------------------------------------------------------------desktop---------------------------------*/
/*------------------------------------------------------------------------------desktop---------------------------------*/	
/*---------------------------------------desktop---------------------------------*/
/*---------------------------------------------desktop---------------------------------*/
/*-----------------------------------------------------desktop---------------------------------*/
/*----------------------------------------------------------------desktop---------------------------------*/
/*------------------------------------------------------------------------------desktop---------------------------------*/	

@media screen and (min-width: 551px)
{
	abbr {
		text-decoration: none;
	}	

h1 {
	font-size:3.5rem;
	text-align: center;
}

h2 {
	font-size:3rem;
	margin-bottom: 1rem;
	line-height: 2.5rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
 
em, i {
	font-style:italic;
}

b, strong {
	font-weight: 600;
}

img {
		max-width: 100%;/*  alle img responsive;max. die Breite, die des Fotos selbst hat --- */
		height: auto;
	}

a{
	text-decoration: none;
	outline:none;
}

nav a{
	font-family: 'matchbook';
	font-size:2rem;
}	
	
/*header und  topnavigation*/

header#wellcome {
	width:100%;
	height:100vh;
	background-image: url(../img/pattern_045bwebsite.gif);
	background-repeat: repeat;
	text-align:center;
	color:#fff;
	
}



header#wellcome h1{
	font-size: 5vw;	
}

header#wellcome img {
	width: 60vw;
	height: auto;
}

div#logo {
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	/*padding-top:-webkit-calc(100vh /5);
	padding-top:-moz-calc(100vh /5);*/
	padding-top:20vh;
	
}

header img#logoklein{
	position: absolute;
	bottom:10px;
	width: 150px;
	opacity: 0;
	left:calc(100vw/2 - 150px/2);
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}


header#wellcome a {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
	background-image:url(../img/pfeil.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 3vw;
	
}


header#wellcome a:last-of-type {
	background-image: none;
}

header#wellcome a:focus, 
header#wellcome a:hover,
header#wellcome a:active{
	background-position: -40px top;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*top navigation*/
.js-header-sticky{
	position: fixed;
	left: 0;
	top:calc(-100vh + 80px);
	display: block;
	width: 100%;
	z-index: 50;
}

.js-header-sticky #logoklein{
	opacity:1;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.js-nav-sticky + main {
	margin-top:calc(100vh + 40px);
	/*margin-top:calc(100vh + 40px);*/
}
.js-nav-sticky {
	position: fixed;
	left: 0;
	top:80px;
	display: block;
	width: 100%;
	z-index: 55;
}

#topnav {
	background-color: #fff;
}
	
	
	
#topnav > a{
display: none;
		
	}

#topnav ul{
	width: 80%;
	max-width: 600px;
	display: table;
	margin: auto;

}

#topnav li {
	display:table-cell;
	text-align: center;
	width: 25%;
}


#topnav a {
	display: block;
	line-height: 40px;
	text-decoration: none;
	color:inherit;
}
#topnav a:focus,
#topnav a:hover,
#topnav a:active{
	color:#fff;
	background-color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}

#closenav{
		display: none;/*nur für small devices benötigt*/
	}

/*main */
.clearfix:after {
	content:"";
	display: block;
	clear: both;
}



main article {
	background-image:url(../img/muster.png);
	background-repeat: repeat;
	-webkit-background-size: 15px;
	-moz-background-size: 15px;
	background-size: 15px;
	padding: 3rem 0;

}
article div.content{
	width: 80%;
	max-width: 900px;
	margin: auto;
	padding: 3rem;

		
}
/*main ueber*/
article#ueber {
	background-color:#b4d6d9;
}

article#ueber .content {
	background-color: #fff;
	
}
article#ueber img {
	float:left;
	margin-right:2rem;
	width: 50%;
	max-width: 361px;
}

#apfel {
	float:right;
	width: 120px;
	height:97px;
	background-image:url(../img/apfel_sprite.png);
	background-repeat:no-repeat;
	background-position:45px bottom;

}

#apfel:focus,
#apfel:hover,
#apfel:active {
	background-position: -60px bottom;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*main produkte*/

article#produkte {
	background-color:#f0f3db;
	padding-top:0;
}

	#produkte > img	{
		display: none;
	}

#prod_nav ul{
	width: 100%;
	max-width: 900px;
	display: table;
	margin: auto;
	position: relative;
	z-index: 20;
}

#prod_nav li {
	display:table-cell;
	text-align: center;
	width: 25%;
	margin:5px;

}

#prod_nav a {
	display: block;
	line-height: 40px;
	color:inherit;
	border: 1px solid #3b3b3b;
	margin:3px;
	background-color: #fff;
}


#prod_nav a:focus,
#prod_nav a:hover,
#prod_nav a:active{

	background-color:#b4d6d9;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/

}
.sy-caption-wrap .sy-caption {
    position: relative;
    left: -50%;
    background-color: rgba(255,255 , 255,0.3);
    color: #3b3b3b;
    border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 0.2rem 2rem;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	}
	
	.sy-caption-wrap {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 0.5rem;
}
/*kurs*/

article#kurs {
	background-color:#ecb5b4;
}

article#kurs .content {
	background-color: #fff;
	
}

article#kurs h2:before {
	content: url(../img/apfel_100x.png);
}
mark {
	padding:3px;
	background-color:#b4d6d9;

	
}
/*kontakt*/

article#kontakt {
	background-color:#f0f3db;
}
article#kontakt .content {
	background-color: #fff;
	
}

article#kontakt img{
	width: 20%;
	display: block;
	margin: 0 auto 20px;
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	margin-bottom: 20px;
}

/*formulare*/


fieldset {
	padding:2rem;
}

input[type="text"], input[type="email"], input[type="tel"] {
	width:45%;
	height: 2rem;
	margin: 5px 0 0 0;
	padding-left:5px;
	font-family: inherit;
}
input[type="text"]#anzahl {
	width:10%;
}

textarea {
	width:100%;
	resize: vertical;
	margin-top: 5px;
	font-family: inherit;
	padding:5px 0 0 5px;
}

form span {
	color:#ecb5b4;
}


button[type="submit"] {
	width: 12rem;
	line-height: 3rem;
	background-color:#b4d6d9;
	border: none;
	font-size: 1rem;
	color:#fff;
	float:right;
}


button[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:active {

	background-color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}
/*footer*/

#foot_nav {
	background-color:#fff;
	position: relative;
	left: 0;
	bottom:2px;
	
	
}

#foot_nav ul{
	width: 60%;
	max-width: 200px;
	display: table;
	margin: auto;
}

#foot_nav li {
	display:table-cell;
	text-align: center;
	width: 50%;
}

#foot_nav a {
	display: block;
	line-height: 40px;
	text-decoration: none;
	color:inherit;
}

#foot_nav a:focus,
#foot_nav a:hover,
#foot_nav a:active{
	color:#B5C056;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}

/*-------------------unterseiten--------------------------*/
/*-------------------unterseiten--------------------------*/

header#wellcome.produkte {
	width:100%;
	height:80px;

	background-repeat: repeat;
	text-align:center;
	color:#fff;
	position: fixed;
	left:0;
	top:0;
	
}


header#wellcome.produkte a.produkte img#logoklein{
	position:absolute;
	display: block;
	top:15px;
	width: 150px;
	opacity: 1;
	-webkit-filter:drop-shadow(0px 0px 3px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
}

header#wellcome a.produkte {
	display: block;
	margin: auto;
	width: auto;
	height: auto;
	background-image:none;
	margin-top: 0;
	
}

#topnav.produkte {
	background-color:#f0f3db;
	position: fixed;
	left:0;
	top:80px;
	width:100%;
}
#topnav.produkte li{

	width:20%;
}


#topnav.produkte.ds_impress li{

	width:25%;
}
#topnav.produkte a:focus,
#topnav.produkte a:hover,
#topnav.produkte a:active{
	color:inherit;
	background-color:#fff;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}


 main.produkte {
	 margin-top:120px;
}

.js-nav-sticky + main.produkte {
	margin-top:120px;
	/*margin-top:calc(100vh + 40px);*/
}



#produkte.produkte-wrap {
	background-color:#f0f3db;	
}

.produkte_head h1{
	margin-bottom:2rem;
	display:inline
}

.produkte_head{
	padding:2rem 1rem;
	line-height: 1.5rem;
}

.produkte_head p {
	display: inline;

}

.produkte_head.saft{
	background-color: #ffacab;
}


.produkte_head.sirup{
	background-color: #f0f3db;
}

.produkte_head.lecker{
	background-color: #b4d6d9;
}

.produkte_head.trocken{
	background-color:#f0f3db;
}

.produkte-wrap h2{
	font-size:2rem;
	text-align: center;
}


.produkte-item{
	text-align: center;
	line-height: 1.2rem;
	float:left;
	width: 48.5%;
	margin:1rem 3% 1rem 0;
	background-color:#fff;
	border: 1px solid #3b3b3b;
}


.produkte-item:nth-of-type(2n) {
	margin-right: 0;

}

.produkte-item img {
	width: 30%;
	max-width:228px;
	margin-top: 1rem;
	-webkit-filter:drop-shadow(3px 3px 0px #3b3b3b);
	filter:drop-shadow(0px 0px 3px #3b3b3b);
	
}

.produkte-item div {
	padding:0 1rem 1rem 1rem;

}


.produkte-item mark {
float:right;
margin-top:1rem;
}

.produkte-item a > mark:focus,
.produkte-item a > mark:hover,
.produkte-item a > mark:active	{

background-color:#ee9958;
	-webkit-user-select: none;/*für apfelgeräte*/
	-webkit-touch-callout: none; /*für apfelgeräte*/
}	
	
#produkte.saft {
	background-color:#ffacab;
}

#produkte.lecker {
	background-color:#b4d6d9;
}


/* impressum und datensschutz*/

#produkte.ds_impress {
	background-color:#f0f3db;
	padding-top:3rem
}

.ds_impress h1,
.ds_impress h2,
.ds_impress h3{
	background-color:#f0f3db;
	padding: 0.5rem;
	margin-top:1rem;
	text-align: center;
}

.ds_impress h1{
	font-size: 3rem;
	margin-top:0;
	margin-bottom: 1rem;
}

.ds_impress h2{
	font-size: 2rem
}

.ds_impress p{
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.ds_impress ul {
	font-size: 0.9rem;
	line-height: 1.2rem;
	list-style: none;
	font-style: normal;
}
.ds_impress img {
	margin-top: 1em;
}

.content.ds_impress {
	background-color:#fff;
}

.ds_impress span {
	display: block;
	margin-top:2rem;
	padding:5px;
	font-weight: 700;
	border-top: 1px solid #3b3b3b;
}

.ds_impress adress {
	font-size: 0.9rem;
	line-height: 1.2rem;	
}
	
	}