/* Allgemein */

a {text-decoration: none; padding: 10px;}
ul {list-style: none;}
html, body {height: 100%;}
button {font-weight: bold; padding: 2px 10px; color: #FFF;}
button:hover {cursor: pointer;}
form {margin: 0;}
h1 {font-size: 2.5em;}
h2 {margin-bottom: 40px; font-size: 2em;}
.bold {font-weight: bold;}
@font-face {font-family: 'Ueberschrift'; src: url('BenBrousseau.ttf') format('truetype');}
h1, h2 {font-family: 'Ueberschrift', sans-serif;}

.branding-title {font-size: 2.7em; float: left; margin: 5px 100px 5px 20px;}
.header a, .footer a, .footer li, .footer p {color: #FFF;}
.header a:hover, .footer a:hover {color: #FF5A00;}
/* .header, .footer {padding-top: 10px; padding-bottom: 10px; background: #09712B; width: 100%; position: absolute; z-index: 2;} */
.header, .footer {padding-top: 10px; padding-bottom: 10px; background: #09712B; width: 100%;}
.header {border-radius: 0 0 15px 0; background-image:url("header.jpg"); background-repeat: repeat-x;}
.header p {color: #FFF; margin: 0 10px 0 0; display: inline-block; font-weight: bold;}
.header button {margin: 0 0 0 10px; background-color: #09712B; font-size: 15px; padding-bottom: 1px;}
.nav li {display: inline-block;}
.nav li:after {content:"I"; color: #FFF;}
.nav li:last-child:after {display: none;}
.nav {float: right; margin-right: 20px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em;}
.nav_footer li {display: inline-block; float: left}
.nav_footer li:after {content:"I"; color: #FFF; font-size: #FFF;}
.nav_footer li:last-child:after {display: none;}
.nav_footer {margin-left: -20px; margin-top: 23px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em;}
.page-wrap {background-color: #f9fff7; min-height: 100%; margin-bottom: -82px;}
.page-wrap:after {content: ""; display: block; height: 178px;}
.wrapper {display: inline-block; width: 100%;}
.on a:hover {color: #FF5A00;}
.on a {color: #FF5A00;}
/* .hauptbereich {position: absolute; left: 300px; top: 78px; width: calc(100% - 301px); border-left: solid 1px; min-height: calc(100% - 78px);} */
/* .hauptbereich {min-height: 100%; margin-left: 20px; padding: 10px 0;} */
.hauptbereich {margin-left: 20px; padding: 10px 0;}
/* .hauptbereich_produkte {width: calc(100% - 301px); min-height: 100%; margin-left: 300px; padding: 10px 0;} */
.hauptbereich_produkte {width: calc(100% - 301px); margin-left: 300px; padding: 10px 0;}
.footer {border-radius: 0 15px 0 0; height: 62px; background-image:url("footer.jpg"); background-repeat: repeat-x;}
.banner_footer {float: right; display: inline-block;}
.banner_footer h4 {margin-top: 23px; margin-right: 30px;}


/* Startseite & Hersteller & Produkt */

.haupt_start, .haupt_hersteller {margin: 70px auto 0 auto; width: 80%; font-size: 18px;}
.haupt_start a {text-decoration: underline;}
.haupt_start a:hover {text-decoration: none; color: #FF5A00;}
.haupt_produkt {margin: 70px auto 0 auto; width: 80%; font-size: 28px; line-height: 42px;}
.keine_artikel, .benachrichtigung_artikel {margin: 70px auto 0 auto; width: 80%; font-size: 20px; line-height: 30px;}
.haupt_start ul, .haupt_hersteller ul {list-style: disc;}
.haupt_start a, .haupt_hersteller a, .haupt_produkt a {color: #000; padding: 0;}
.haupt_hersteller a:hover, .haupt_produkt a:hover {text-decoration: underline;}
#fehlermeldung2 {width: 100%; border: 3px solid #ff0303; padding: 5px; font-weight: bold;}
.benachrichtigung_artikel a {color: #000; text-decoration: underline; font-weight: bold;}
.benachrichtigung_artikel a:hover {color: #FF5A00;}


/* Hersteller */

.haupt_hersteller h1 {margin-bottom: 30px;}
.haupt_hersteller h2 {margin-top: 50px; margin-bottom: 30px;}


/* Filter & Suche */

/* .suche_filter {min-height: calc(100% - 159px); width: 300px; position: absolute; z-index: 1; top: 77px; color: #FFF; background-color: #054202; border-right: solid 1px #000;} */
.suche_filter {height: calc(100% - 159px); min-height: 564px; width: 300px; position: absolute; z-index: 1; top: 77px; color: #FFF; background-color: #054202; border-right: solid 1px #000;}
.auswahl {margin-left: 20px; display: inline-block; width: 200px;}
.auswahl h3 {margin-top: 40px;}
.auswahl p {margin: 0;}
.auswahl select {width: 250px; margin-bottom: 10px;}
.auswahl input {width: 250px; margin-bottom: 10px;}
.filter_absenden {display: inline-block;}
.filter {background-color: #09712B; font-size: 15px; padding-bottom: 1px; margin-top: 5px;}
.suche_eingabe {display: inline-block;}
.suche_absenden {display: inline-block;}


/* Artikelliste */

.keine_artikel {color: red; font-weight: bold; margin-left: 5px; margin-top: 10px;}
.artikelliste:nth-child(odd) {background: #E0E6E2;}
.uebersicht {border-top: 1px solid; margin-top: 10px;}
.uebersicht hr {margin-bottom: 0;}
.uebersicht a {padding: 0; color: #000;}
.uebersicht a:hover {text-decoration: underline;}
.hersteller, .produkt, .vegan, .stand, .ean, .kategorie {padding: 5px 1%; display: inline-block; font-size: 12px; line-height: 16px;}
.hersteller, .kategorie {width: 13%;}
.ean {width: 9%}
.vegan, .stand {width: 7%;}
.produkt {width: 36%;}
.top {text-transform: uppercase; font-weight: bold; letter-spacing: 0.2em; margin-top: 10px;}
.nein {color: red;}
.ja {color: #09712B;}
.TV {color: #FF5A00;}
.seite {margin-top: 10px; float: right; margin-right: 30px;}
.seite_nav {clear: right; float: right; margin-right: 20px;}
.seite_nav a {color: #000; padding-bottom: 5px;}
.seitenzahl {clear: right; float: right; margin-right: 20px; margin-top: 10px;}
.seitenzahl input {width: 40px;}
.seitenzahl button {margin-top: 0;}
.mobil {display: none;}


/* Artikelansicht */

.linke_spalte {display: inline-block; float: left; width: 300px; margin-bottom: 20px;}
.rechte_spalte {display: inline-block; width: calc(100% - 310px); margin-bottom: 20px;}
.benachrichtigung_artikel {font-weight: bold; margin-left: 5px; margin-top: 20px;}
.produktlink, .banner_produkt {margin-top: 40px;}
.produktlink {font-weight: bold;}
.produktlink a {color: #0013FF;}


/* Kontaktformular */

.eingabefelder h3 {margin: 50px 0 30px 0}
.eingabefelder input {width: 70%;}
.eingabefelder input:focus, #nachrichtenfeld:focus {border: 2px solid #064405;}
#nachrichtenfeld {width: 70%; height: 150px; margin-bottom: 20px; resize: none;}
.pflicht {font-weight: bold;}
.absenden_kontakt {background-color: #09712B; font-size: 15px;}
#fehlermeldung {width: calc(70% - 14px); border: 3px solid #ff0303; padding: 5px; font-weight: bold;}
#fehlermeldung p, #verschickt p {margin: 0;}
#verschickt {width: calc(70% - 14px); border: 3px solid #0A712C; padding: 5px; font-weight: bold;}
.eingabe_nachname {display: none;}
#abgeschickt {display: none;}


/* Vegan Total */

.vegan_total {font-size: 16px; line-height: 24px;}


/* Responsive */

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

.hauptbereich_produkte {width: 100%; margin-left: 0; }
.suche_filter {display: block; position: static; min-height: 0; height: 250px; padding-bottom: 40px; width: 100%; border-right: none;}	
.auswahl {width: 100%; display: block; width: 610px; margin: auto; padding-top: 1px; text-align: center;}
.auswahl h3, .auswahl p {text-align: left;}
.auswahl button {width: 95px;}
.header {border-radius: 0;}
.footer {border-radius: 15px 15px 0 0;}
.eingabefelder input {width: 95%;}
#nachrichtenfeld {width: 95%; height: 350px;}
#fehlermeldung, #verschickt {width: calc(95% - 14px);}


.vegan_total {font-size: 16px; line-height: 24px;}
		
}

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

.nav li:nth-child(3):after {content: "";}	
.suche_filter {background-color: #E0E6E2; color: #000; font-size: 24px; min-height: 0; height: auto;}	
.header, .footer {background-image: none;}	
.footer {height: auto;}
.branding-title {float: none; margin: 10px auto 30px auto; width: 500px; text-align: center; font-size: 50px;}	
.nav, .nav_footer {float: none; margin: 20px auto; width: 950px; text-align: center; padding: 0; font-size: 24px;}
.banner_footer {width: 600px; float: none; margin: 20px auto; text-align: center; display: block;}
.nav_footer li {float: none; width: 100%; margin-bottom: 25px;}
.nav_footer li:after {content: none;}
.banner_footer h3 {margin: 0; font-size: 24px;}
.hersteller, .produkt, .vegan, .stand, .ean, .kategorie {width: 60%; font-size: 24px; line-height: 36px; display: inline-block;}
.top, .uebersicht hr {display: none;}
.mobil {width: 30%;}
.page-wrap:after {height: 200px;}
.hauptbereich_produkte {font-size: 24px; margin-top: -20px;}
.header button, .filter {height: 33px; width: 130px; font-size: 20px; margin: 0 10px 0 10px;}
.absenden_kontakt {height: 33px; font-size: 20px;}
.auswahl button {width: 130px;}
.seitenzahl button {width: 80px;}
.auswahl {width: 950px;}
.auswahl h3 {text-align: center; text-transform: uppercase;}
.artikelliste {padding: 30px 10px; border-bottom: solid 1px;}
.haupt_start, .haupt_hersteller, .haupt_produkt, .keine_artikel, .benachrichtigung_artikel {font-size: 24px;}


.vegan_total {font-size: 16px; line-height: 24px;}

}

@media screen and (max-width:1000px){
	
h1 {font-size: 2.3em;}	
.branding-title {width: 100%; font-size: 110px; margin-bottom: 60px;}	
.nav {width: 100%;}
.nav li {font-size: 60px; margin-bottom: 40px; width: 100%;}
.nav li:after {content: none;}
.header p {width: 100%; margin-top: 20px;}	
#eingabe_ean_header {margin-top: 25px;}
button {height: 76px; font-size: 36px;}
#buttone_ean_header {display: block; margin: 15px auto 0 auto; height: 76px; font-size: 36px; width: 250px;}
.filter, .absenden_kontakt {height: 76px; font-size: 36px;}
.auswahl {width: 100%; font-size: 60px;}
.auswahl h3 {margin-bottom: 20px; margin-top: 60px;}
.auswahl select {display: block; margin: 20px auto; width: 700px;}
.auswahl p {display: block;}
.auswahl input {display: block; width: 700px; margin: 20px auto;}
.auswahl button {width: 250px;}
.suche_absenden {display: block;}
.hauptbereich_produkte {font-size: 40px;}
.hersteller, .produkt, .vegan, .stand, .ean, .kategorie, .haupt_produkt, .keine_artikel, .benachrichtigung_artikel {font-size: 40px; line-height: 60px;}
.page-wrap:after {height: 350px;}
.seitenzahl input {width: 150px;}
.nav_footer {font-size: 60px; margin-bottom: 30px; width: 100%;}
.banner_footer h3 {font-size: 60px; margin-bottom: 30px;}
.banner_footer {width: 90%;}
.seite, .seite_nav, .seitenzahl {font-size: 60px;}
.produkt {font-weight: bold;}
.vegan {font-weight: bold;}
.mobil {font-weight: normal; float: left;}
.haupt_start, .haupt_hersteller {font-size: 40px;}
.haupt_produkt {width: 80%;}
.linke_spalte, .rechte_spalte {width: 48%;}
.rechte_spalte {margin-bottom: 60px;}
.keine_artikel, .benachrichtigung_artikel {width: 100%;}


.vegan_total {font-size: 16px; line-height: 24px;}
	
}