@charset "utf-8";

@font-face {
    font-family: 'im_fell_dw_pica_proregular';
    src: url('../webfonts/imfepirm29c-webfont.eot');
    src: url('../webfonts/imfepirm29c-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/imfepirm29c-webfont.woff2') format('woff2'),
         url('../webfonts/imfepirm29c-webfont.woff') format('woff'),
         url('../webfonts/imfepirm29c-webfont.ttf') format('truetype'),
         url('../webfonts/imfepirm29c-webfont.svg#im_fell_dw_pica_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ars_maquette_proregular';
    src: url('../webfonts/ARSMaquettePro-Regular-webfont.eot');
    src: url('../webfonts/ARSMaquettePro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/ARSMaquettePro-Regular-webfont.woff2') format('woff2'),
         url('../webfonts/ARSMaquettePro-Regular-webfont.woff') format('woff'),
         url('../webfonts/ARSMaquettePro-Regular-webfont.ttf') format('truetype'),
         url('../webfonts/ARSMaquettePro-Regular-webfont.svg#ars_maquette_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../webfonts/oswald-v48-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../webfonts/oswald-v48-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* krona-one-regular - latin */
@font-face {
  font-family: 'Krona One';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../webfonts/krona-one-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../webfonts/krona-one-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
	background-color: #9e8f87;
	margin: 0px;
	color: black;
	height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
}

body {	 
	font-family: 'im_fell_dw_pica_proregular', serif;
	font-size: 16px;
	line-height: 23px;
	margin: 0;
	padding: 0px;
	width: 100%;
	height: 100%;
}	  

a {					
	zoom: 1;
	color: black;
	text-decoration: underline;
}			   
 
img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   
	
a img {
	border-width: 0px;
}	   

form {
	margin: 0px;
	padding: 0px;
}
		
textarea, input, select {
	font-family: Arial, Helvetica;
	font-size: 9pt;
	letter-spacing: 0px;
}		

ul, li {
	padding: 0px;
	margin: 0px;
}

sup {
	font-size:60%;
	vertical-align:top;
}

p {
	margin: 0;
}

/*** BASICS ***/

.main {
	position: relative;
	min-height: 100%;
}

.background {
	position: fixed;
	z-index: -1;
}

.rahmen {
	position: absolute;
	z-index: 1;
}

.rahmen.linksoben { left: 20px; top: 20px; }
.rahmen.rechtsoben { right: 20px; top: 20px; }
.rahmen.linksunten { left: 20px; bottom: 20px; }
.rahmen.rechtsunten { right: 20px; bottom: 20px; }

.rahmen.links { left: 20px; top: 100px; height: calc(100% - 200px);}
.rahmen.rechts { right: 20px; top: 100px; height: calc(100% - 200px);}
.rahmen.oben { left: 100px; top: 20px; width: calc(100% - 200px);}
.rahmen.unten { left: 100px; bottom: 20px; width: calc(100% - 200px);}

.footer {
	position: absolute;
	left: 0px;
	bottom: 50px;
	width: 100%;
	text-align: center;
}

.weiterlink {
	font-size: 15px;
	letter-spacing: 2px;
	text-decoration: none;
}

/*** MENU ***/

.logo {
	position: absolute;
	left: 65px;
	top: 65px;
}

.menu {
	position: absolute;
	top: 210px;
	left: 90px;
	text-align: center;
}

.menu li {
	list-style-type: none;
}

.menu li a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 17px;
	line-height: 27px;
	letter-spacing: 2px;
}

.icons {
	padding-top: 7px;
}

.icons a {
	margin: 5px;
}

.impressum-link {
	position: absolute;
	z-index: 5;
	right: 50px;
	bottom: 46px;
}

.mobile-header {
	display: none;
}

.dvd-stoerer {
	position: absolute;
	right: 120px;
	top: 1px;
	z-index: 99;
}


/*** TEXTSEITEN ***/

.textcontent {
	padding: 110px 240px 150px 340px;
	max-width: 680px;
	min-height: 400px;
	letter-spacing: 1px;
}

.textcontent h1 {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 17px;
	line-height: 25px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.textcontent p {
	margin-bottom: 13px;
}

.textcontent .img-float-left {
	float: left;
	margin-right: 20px;
	margin-bottom: 5px;
}

.textcontent .img-float-right {
	float: right;
	margin-bottom: 5px;
}

.sendetermine .textcontent {
	padding-bottom: 210px;
}

.textcontent .thumbnail {
	margin-right: 7px;
}

.credits {
	clear: both;
	text-align: center;
	padding-top: 20px;
}

/*** ILLUSTRATIONEN ***/

.illustration {
	position: absolute;
	z-index: 0;
}

/* Die Idee */
.illustration.kohl-und-zwiebel { left: 0px; bottom: 0px; }
.illustration.gummiring { right: 0px; top: 110px; }
.illustration.glaeserstapel { right: 100px; bottom: 5px; }
.illustration.axt { right: 335px; bottom: 0px; }

/* Das Tier */
.illustration.gruenzeug { right: 0px; top: 60px; }
.illustration.hand-und-kartoffel { left: 0px; bottom: 0px; }
.illustration.knoblauch-und-tomaten { right: 80px; bottom: 40px; }

/* Die Menschen */
.illustration.tomate-und-salbei { left: 0px; bottom: 0px; }
.illustration.waage { right: 80px; bottom: 0px; }
.illustration.messer { right: 0px; top: 150px; }
.nowak { position: relative; top: -8px; }
.holzer { position: relative; top: -15px; }

/* Trailer */
.illustration.ochs-und-saege { left: 0px; bottom: 10px; }
.illustration.pflanze { right: -90px; top: -30px; }

/* Sendetermine */
.illustration.ochs-gabel-ruebe { left: 80px; bottom: 0px; }
.illustration.messersortiment { right: 71px; top: 32px; }
.illustration.radieschen { right: 0px; bottom: 100px; }

/* Presse */
.illustration.ochs-loeffel-topf { left: 40px; bottom: 0px; }
.illustration.zwiebel-und-pflanze { right: 55px; bottom: 0px; }
.illustration.loeffel { right: 82px; top: 17px; }

/* Kontakt, Impressum */
.illustration.karotte-und-gewuerze { right: 0px; top: 0px; }
.illustration.suppentopf { left: 60px; bottom: 5px; }
.illustration.ochs-und-champignon { right: 70px; bottom: 2px; }


/*** STARTSEITE ***/

.main.startseite {
}

.startseite-container {
	min-height: 550px;
}

.startseite-content {
	display: block;
	position: absolute;
	width: 600px;
	height: 390px;
	z-index: 1;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -195px;
}

.logo-big {
	position: absolute;
	left: 0px;
	top: 0px;
}

.startseite-ochs {
	position: absolute;
	left: 238px;
	top: 225px;
}

.startseite-slogan {
	position: absolute;
	bottom: 15px;
	width: 600px;
	text-align: center;
	font-size: 23px;
	letter-spacing: 2px;
}

.fehler404 {
	position: absolute;
	bottom: 15px;
	width: 600px;
	text-align: center;
	font-size: 18px;
	letter-spacing: 1px;
}

/*** TRAILER ***/

.trailer .textcontent {
	padding-bottom: 50px;
}

.trailer-container {
	position: relative;
}

.trailer-frame {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 5;
	background-color: black;
}

/*** PRESSESTIMMEN ***/

.pressquote-container {
	width: 100%;
	text-align: center;
	margin-top: 25px;
	letter-spacing: 0px;
}

.pressquote {
	display: inline-block;
	vertical-align: top;
	margin: 20px;
	font-family: 'Oswald',sans-serif;
	font-weight: 300;
	font-size: 17px;
	line-height: 20px;
	text-align: center;
}

.pressquote .source {
	font-family: 'ars_maquette_proregular',sans-serif;
	font-weight: 900;
	font-size: 13px;
}

/*** MITTELGROSSE SCREENS ***/

@media only screen and (max-width: 1000px) {

	.textcontent { 
		padding-right: 100px;
		padding-bottom: 100px;
	}

	.illustration.gummiring { display: none; }
	.illustration.glaeserstapel { display: none; }
	.illustration.axt { display: none; }
	.illustration.gruenzeug { display: none; }
	.illustration.knoblauch-und-tomaten { display: none; }
	.illustration.waage { display: none; }
	.illustration.messer { display: none; }
	.illustration.messersortiment { display: none; }
	.illustration.radieschen { display: none; }
	.illustration.zwiebel-und-pflanze { display: none; }
	.illustration.loeffel { display: none; }
	.illustration.karotte-und-gewuerze { display: none; }
	.illustration.ochs-und-champignon { display: none; }
}

/*** KLEINE SCREENS ***/

@media only screen and (max-width: 750px) {

	body {
		font-size: 14px;
		line-height: 20px;
	}

	.main { overflow-x: hidden; }

	.rahmen.linksoben { left: 5px; top: 5px; width: 40px; height: 40px; }
	.rahmen.rechtsoben { right: 5px; top: 5px; width: 40px; height: 40px; }
	.rahmen.linksunten { left: 5px; bottom: 5px; width: 40px; height: 40px; }
	.rahmen.rechtsunten { right: 5px; bottom: 5px; width: 40px; height: 40px; }
	
	.rahmen.links { left: 5px; top: 45px; width: 8px; height: calc(100% - 90px);}
	.rahmen.rechts { right: 5px; top: 45px; width: 8px; height: calc(100% - 90px);}
	.rahmen.oben { left: 45px; top: 5px; height: 8px; width: calc(100% - 90px);}
	.rahmen.unten { left: 45px; bottom: 5px; height: 8px; width: calc(100% - 90px);}

	.illustration.pflanze { display: none; }
	.illustration.ochs-gabel-ruebe { left: auto; right: 15px; }
	.illustration.ochs-loeffel-topf { left: 15px; }
	.illustration.hand-und-kartoffel { left: -80px; bottom: 0px; }
	.illustration.suppentopf { left: 10px; bottom: 5px; }

	.carson {
		width: 145px;
		height: 140px;
	}

	.startseite-container {
		min-height: 280px;
	}
	
	.startseite-content {
		width: 280px;
		height: 205px;
		margin-left: -140px;
		margin-top: -110px;
	}
	
	.logo-big {
		width: 280px;
		height: 129px;
	}
		
	.startseite-ochs {
		left: 111px;
		top: 105px;
		width: 80px;
		height: 52px;
	}

	.startseite-slogan {
		width: 280px;
		text-align: center;
		font-size: 13px;
		letter-spacing: 0px;
	}

	.footer {
		bottom: 20px;
	}

	.weiterlink {
		font-size: 13px;
		letter-spacing: 0px;
	}
	
	.logo {
		position: absolute;
		left: 25px;
		top: 25px;
	}
	
	.logo img {
		width: 105px;
		height: 48px;
	}
	
	.menu {
		display: none;
	}

	.mobile-header {
		display: block;
		padding-top: 90px;
	}

	.mobile-menu-button {
		position: absolute;
		right: 25px;
		top: 40px;
	}

	.mobile-menu-close {
		display: none;
		position: absolute;
		right: 25px;
		top: 40px;
	}
	
	.mobile-menu {
		display: none;
		margin-left: 25px;
		margin-right: 25px;
		text-align: center;
		border-top: 1px solid black;
	}

	.mobile-menu li {
		list-style-type: none;
		border-bottom: 1px solid black;
		padding-top: 2px;
	}

	.mobile-menu li.icons {
		padding-top: 6px;
	}
	
	.mobile-menu li a {
		text-decoration: none;
		text-transform: uppercase;
		font-size: 17px;
		line-height: 27px;
		letter-spacing: 2px;
	}

	.mobile-menu li.icons a {
		line-height: 24px;
	}
	
	.impressum-link {
		display: none;
	}

	.textcontent {
		padding: 30px 25px 290px 25px;
		max-width: 680px;
		min-height: 200px;
		letter-spacing: 1px;
	}

	.menschen .textcontent {
		padding-bottom: 350px;
	}

	.trailer .textcontent {
		min-height: 200px;
		padding-bottom: 260px;
	}
	
	.dvd-stoerer {
		top: 1px;
		right: 65px;
	}

	.startseite .dvd-stoerer {
		top: 1px;
		right: 20px;
	}

	.dvd-stoerer img {
		width: 85px;
		height: 85px;
	}
}