@media all {
* {margin:0; padding:0; border: 0; box-sizing: border-box;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
	}
img {border:0; width:100%; height:auto;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, main 
{font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, address, aside, details, main, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}

html, body {width: 100%; height:100%; hyphens:auto;}

body {background:#969695; font: normal 1.0em/1.5em 'Arial', sans-serif, Verdana, Helvetic; font-weight:300; color:#000;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Allgemein ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a, a:link, a:visited {text-decoration:none; color:#9d1a2c; }
a:hover, a:focus, a:active {text-decoration:underline; color:#ec691f;}

/* ~~~ Schrift Roboto Condensed ~~~ */
h1, h2, h3, #mobil-menu ul li a, #desktop-menu ul li a, #header-oben-menu li a, #warenkorb, #breadcrumbs a, #breadcrumbs a:link, #desktop-u-menu ul li a, #desktop-u-menu ul li a:link, adress h2, #footer-menu-oben li a, #footer-main-menu li a, .warenkorb-but, .shopmenu ul li a, .submit, #bestellung th, #bestellung td::before, #bestandteile th, #bestandteile td::before, .rot, .gruen, .bildblender a:link, .paginator li a, .danke a {font-family: 'Roboto Condensed', Arial, Verdana, sans-serif; text-transform:uppercase; letter-spacing:0.03em; text-align:center; color:#323232;}

h1 {font-size:220%; line-height:1.3em; margin:10px 0;text-transform:none;}
h2 {font-size:180%; line-height:1.3em; margin:7px 0;}
h3 {font-size:120%; line-height:1.1em; margin-bottom:7px; }
.artikelgruppe h2 {text-transform:none;}

strong, b {font-weight:600;}
em {font-style:italic;}

.blocksatz {text-align:justify;}
.zentriert {text-align:center; }

hr {border:0; border-bottom:1px solid #d4d4d4; margin:15px 0; width:100%;}

#korbdone {
	background-color:#861723;
	position:absolute; left:40%; top:200px; z-index:10000;
	width:10%; min-width:200px;
	padding:15px;
	border:1px solid #000;
	border-radius:8px;
	text-align:center;
	font-weight:bold;
	color:#FFF;
	display:none;
}

/* ~~~ Zusammengefasste allgemeine Definitionen   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ FLEX-Boxen  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ row nowrap ~~~ */
#desktop-menu ul, #menu-cont, #header-unten-wrapper, #icon-wrapper, #menu-smart #but-cont, .bannerbild #herstellinfo, .beitrag-liste.artikelgruppe .bestellung {display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap;}
/* ~~~ row wrap ~~~ */
#header-oben-menu ul, .listen-cont, #footer-menu-oben ul, #footer-main-menu ul, #logo-rahmen, #footer-mitte, #pfeil-nach-oben, .pictorahmen, .detailbild-cont .bildicons, .groesse ul, .groesse ul li, .shopmenu ul, .filter-auswahl ul, .filter-auswahl p, #schnellformular, .direkt-eingabe p, .direkt-eingabe ul, #auswahl, .paginator ul {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; }
/* ~~~ column ~~~ */
.xxx {display:-webkit-flex; display:flex; -webkit-flex-flow:column; flex-flow:column; }
/* ~~~ justify-content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ flex-start ~~~ */
#footer-mitte, .listen-cont, .pictorahmen, .groesse ul {-webkit-justify-content:flex-start; justify-content:flex-start; }
/* ~~~ flex-end ~~~ */
#header-oben-menu ul, #footer-menu-oben ul, #footer-main-menu ul, #logo-rahmen, #pfeil-nach-oben {-webkit-justify-content:flex-end; justify-content:flex-end; }
/* ~~~ center ~~~ */
#menu-cont, #main-menu ul, #menu-smart #but-cont, bannerbild #herstellinfo, .beitrag-liste.artikelgruppe .bestellung, .detailbild.bildicons, .detailbild-cont .bildicons, .groesse ul li, .filter-auswahl ul, .filter-auswahl p, #schnellformular, .direkt-eingabe p, .direkt-eingabe ul, .paginator ul {-webkit-justify-content:center; justify-content:center; }
/* ~~~ space-between ~~~ */
#icon-wrapper, .shopmenu ul, #auswahl {-webkit-justify-content:space-between; justify-content:space-between; }
/* ~~~ align-items  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ flex-start ~~~ */
.pictorahmen, .groesse ul {-webkit-align-items:flex-start; align-items:flex-start; }
/* ~~~ flex-end ~~~ */
#icon-wrapper, #header-unten-wrapper, .beitrag-liste.artikelgruppe .bestellung {-webkit-align-items:flex-end; align-items:flex-end; }
/* ~~~ flex-center ~~~ */
#header-oben-menu ul, #menu-cont, #footer-menu-oben ul, #footer-main-menu ul, #logo-rahmen, #menu-smart #but-cont, .bannerbild #herstellinfo, .groesse ul li, .shopmenu ul, #auswahl, .filter-auswahl ul, .filter-auswahl p, .direkt-eingabe p, .direkt-eingabe ul, .paginator ul {-webkit-align-items:center; align-items:center; }
/* ~~~ strech ~~~ */
.listen-cont, #footer-mitte {-webkit-align-items:stretch; align-items:stretch; }

/* ~~~ Breite + Position + Eigenschaften ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	
/* ~~~ Breite max 1240px ~~~*/
#header-oben-menu, #header-unten-wrapper, #menu-cont, #content-wrapper, #footer-menu-oben, #footer-main-menu, #pfeil-nach-oben-cont, #footer-mitte {max-width:1240px; margin:0 auto;}
/* ~~~ Breite 100% ~~~*/
header, #header-oben, #header-unten, .searchbut, #menu-cont, #desktop-menu ul li, main, #breadcrumbs, .bannerbild, .listen-cont, footer, #footer-header, #footer-main-menu-wrapper, #footer-mitte, #mobil-menu ul li, .beitrag-standard table, .beitrag-standard .bild.ganze-breite,.beitrag-liste, .beitrag-liste .beschreibung, .pictorahmen, .paginator, #desktop-navi-back, .beitrag-standard, .beitrag-liste figure, .detailbild-cont .detailbild, .detailbild-cont .bildicons, .faq-aufklapp, .faq-aufklapp a, .js-faq-content, .js-faq-content h2, .faq-aufklapp:hover .js-faq-content h2, .shopmenu, .shopmenu ul li a, .shopmenu ul li a:link, #angaben-cont table, #angaben-cont tbody, #auflistung, .direkt-eingabe .warenkorb-but, #schnellformular .warenkorb-but {width:100%;} 
/* ~~~ Position "relative" ~~~*/
#header-oben-menu, #header-unten-wrapper, #menu-cont, #content-wrapper, #footer-menu-oben, #footer-main-menu, #pfeil-nach-oben-cont, #footer-mitte, #desktop-menu ul li, #desktop-u-menu ul, #mobil-menu ul li, #mobil-menu ul li ul, #content-wrapper, .beitrag-liste, .bannerbild, .beitrag-liste.button h2, .beitrag-liste.artikelgruppe .warenkorb-but, .paginator, .paginator li a, .paginator li a:link, .groesse, .but-size label, .faq-aufklapp, .faq-aufklapp h2, .js-faq-content h2, .herstellinfo a, .herstellinfo a:link, .bildblender a, .bildblender a:link, input[type='checkbox'] + label,input[type='radio'] + label, input, select, textarea, #menu-smart .but, .beitrag-standard {position:relative;}
/* ~~~ Position "absolute" ~~~*/
#logo a, #logo a:link, #logo, #icon-wrapper, #search-toggle a, #search-toggle a:link, #search-field, #desktop-menu ul li .navi-bild, #desktop-navi-back, .banner-logo, .bannerbild h2, .beitrag-liste h2, .beitrag-liste p.mehrlink a, .bannerbild.fair-fashion p.mehrlink a, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, .beitrag-liste.artikelgruppe .warenkorb-but  a, .beitrag-liste.artikelgruppe .warenkorb-but  a:link, .beitrag-liste.artikelgruppe .neu, .beitrag-liste.artikelgruppe .angebot, .beitrag-liste.artikelgruppe .nicht-verfuegbar, .faq-aufklapp img, .herstellinfo a::after, .bildblender a::after, #mobil-menu, #mobil-menu ul li a.menu-pfeil::after, #mobil-menu ul li a.menu-but::after, #mobil-menu ul li ul li a.menu-but-sub::after {position:absolute;}
/* ~~~ "overflow:hidden" ~~~*/
#logo, main, #content-wrapper, .beitrag-liste, .beitrag-liste figure, .alsDetail, .intro, .bodydiv, .beitrag-liste figure img, footer, #footer-menu-oben, #footer-main-menu, #pfeil-nach-oben-cont, #footer-mitte, #menu-smart #but-cont, #desktop-menu ul li .navi-bild, .beitrag-liste.artikelgruppe .warenkorb-but  {overflow:hidden;}
/* ~~~ "display:block" ~~~*/
#header-oben-menu li a, #header-oben-menu li a:link, #header-oben-menu li a:visited, #warenkorb a, #warenkorb a:link, #desktop-menu ul li a, #desktop-menu ul li a:link, #desktop-u-menu, #breadcrumbs, beitrag-standard .bild.ganze-breite, .alsDetail, .beitrag-liste figure img, .beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link, .bannerbild.fair-fashion p.mehrlink a, .bannerbild.fair-fashion p.mehrlink a:link, #footer-menu-oben li a, #footer-menu-oben li a:link, #footer-menu-oben li a:visited, #footer-main-menu li a, #footer-main-menu li a:link, #footer-main-menu li a:visited, #logo-rahmen figure a:focus, #mobil-menu ul li a, #mobil-menu ul li a:link, #mobil-menu ul li.akt ul, #mobil-menu ul li ul li a, #mobil-menu ul li ul li a:link, #mobil-menu ul li.akt ul li a, #mobil-menu ul li.akt ul li a:link, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, .warenkorb-but a, .warenkorb-but a:link, .paginator li a, .paginator li a:link, .faq-aufklapp a, .faq-aufklapp a:link, .shopmenu ul li a, .shopmenu ul li a:link, #auflistung .gruppenrahmen p {display:block;}

/* ~~~ "text-decoration:none" ~~~*/
#header-oben-menu li a:active, #header-oben-menu li a:focus, #header-oben-menu li a:hover, #warenkorb a, #warenkorb a:link, #desktop-menu ul li a, #desktop-menu ul li a:link, #desktop-u-menu ul li a:hover, #desktop-u-menu ul li a:focus, #desktop-u-menu ul li.akt a, #desktop-u-menu ul li.akt a:link, #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:hover, #breadcrumbs a:active, #breadcrumbs a:focus, #breadcrumbs a.akt, #footer-menu-oben li a:active, #footer-menu-oben li a:focus, #footer-menu-oben li a:hover, #footer-main-menu li a:active, #footer-main-menu li a:focus, #footer-main-menu li a:hover, adress a, adress a:link, adress a:hover, adress a:focus, adress a:active, #mobil-menu ul li a, #mobil-menu ul li a:link , .warenkorb-but a, .warenkorb-but a:link, .paginator li a:hover, .paginator li a:focus, .paginator li.akt a, .paginator li.pas a, .paginator li.pas a:hover, .paginator li.pas a:focus, .faq-aufklapp a, .faq-aufklapp a, .faq-aufklapp a:link, .faq-aufklapp a:focus, .herstellinfo a, .herstellinfo a:link, .bildblender a, .bildblender a:link {text-decoration:none;}
/* ~~~ "text-transform:none" ~~~*/
.beitrag-liste.warengruppe h2, #header-oben-menu li a, #header-oben-menu li a:link, #header-oben-menu li a:visited, #desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-u-menu ul li a, #desktop-u-menu ul li a:link, #desktop-u-menu ul li.akt a, #desktop-u-menu ul li.akt a:link, #breadcrumbs a, #breadcrumbs a:link, #footer-menu-oben li a, #footer-menu-oben li a:link, #footer-menu-oben li a:visited, #footer-main-menu li a, #footer-main-menu li a:link, #footer-main-menu li a:visited, #mobil-menu ul li ul li a, #mobil-menu ul li ul li a:link, #mobil-menu ul li.akt ul li a, #mobil-menu ul li.akt ul li a:link, .bildblender a:link {text-transform:none;}
/* ~~~ "transition:all 0.5s ease" ~~~*/
#logo a, #logo a:link, #logo a:focus, #logo a:hover,#warenkorb, #warenkorb:hover, warenkorb:focus, #search-toggle a, #search-toggle a:link, #search-toggle a:focus, #search-toggle a:hover, .beitrag-liste h2, .beitrag-liste:hover.button h2, .beitrag-liste:hover figure img, .beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link, .bannerbild.fair-fashion p.mehrlink a, .bannerbild.fair-fashion p.mehrlink a:link, .beitrag-liste:hover p.mehrlink a:hover, .beitrag-liste:hover p.mehrlink a:focus, .beitrag-liste p.mehrlink a:hover, .beitrag-liste p.mehrlink a:focus, .bannerbild.fair-fashion:hover p.mehrlink a:hover, .bannerbild.fair-fashion:hover p.mehrlink a:focus, .bannerbild.fair-fashion p.mehrlink a:hover, .bannerbild.fair-fashion p.mehrlink a:focus, #pfeil-nach-oben a, #pfeil-nach-oben a:link, #pfeil-nach-oben a:hover, #pfeil-nach-oben a:focus, #menu-smart #but-cont, .beitrag-liste.artikelgruppe .warenkorb-but a, .beitrag-liste.artikelgruppe .warenkorb-but a:link, .beitrag-liste.artikelgruppe .warenkorb-but a:hover, .beitrag-liste.artikelgruppe .warenkorb-but a:focus, .bildblender a:link, .bildblender a:hover, .bildblender a:focus, .warenkorb-but a:link, .warenkorb-but a:hover, .warenkorb-but a:focus, .beitrag-liste.bannerbild.fair-fashion .banner-logo, .beitrag-liste.bannerbild.fair-fashion:hover .banner-logo {transition:all 0.5s ease}
/* ~~~ "white-space:nowrap" ~~~*/
.umbruch, #desktop-menu ul li, #desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, .bannerbild h2, .beitrag-liste h2, #mobil-menu ul li a, #mobil-menu ul li a:link, .warenkorb-but a:link {white-space:nowrap;}
/* ~~~ "cursor:pointer" ~~~*/
.searchbut, #desktop-menu ul li a:hover, #desktop-menu ul li a:focus, #desktop-menu ul li.akt a, #desktop-menu ul li.akt a:hover, #desktop-menu ul li.akt a:focus, #desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, .beitrag-liste:hover figure img, #mobil-menu ul li:hover a, .warenkorb-but a:hover, .detailbild-cont .bildicons figure img:hover, .papierkorb, .paginator li a, .paginator li a:link, .warenkorb-but a, .warenkorb-but a:link, .submit, select:hover, select:focus {cursor:pointer;}
/* ~~~ "Hintergrund ORANGE" ~~~*/
#desktop-menu ul li a:hover, #desktop-menu ul li a:focus, #desktop-menu ul li.akt a, #desktop-menu ul li.akt a:hover, #desktop-menu ul li.akt a:focus, .gobut:hover, .gobut:focus, #menu-smart #but-cont a:hover {background:#ec691f;}
/* ~~~ "Hintergrund WEISS" ~~~*/
#header-oben, #desktop-menu ul li ul, #desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li ul li a:hover, #desktop-menu ul li ul li a:focus, #desktop-menu ul li.akt ul li a:hover, #desktop-menu ul li.akt ul li a:focus, #desktop-menu ul li.akt ul li.akt a:hover, #desktop-menu ul li.akt ul li.akt a:focus, #desktop-menu ul li.akt ul li.akt a, #desktop-menu ul li.akt ul li.akt a:link, #desktop-navi-back, #desktop-u-menu, main, .groesse ul li a, .groesse ul li a:link, .shopmenu ul li a, .shopmenu ul li a:link, #mobil-menu, #mobil-menu ul li ul li a:hover, #mobil-menu ul li.akt ul li a:hover, #mobil-menu ul li.akt ul li.akt a, #mobil-menu ul li.akt ul li.akt a:link, .paginator li a, .paginator li a:link, .but-size label, #auflistung {background:#fff;}
/* ~~~ "Hintergrund EZA-Dunkelgrau" ~~~*/
#header-unten, .warenkorb-but a, .warenkorb-but a:link, .shopmenu ul li a:hover, .shopmenu ul li a:focus, .shopmenu ul li.akt a, .shopmenu ul li.akt a:hover, .shopmenu ul li.akt a:focus, .gobut, #logo-rahmen figure a:focus {background:#323232; }	
/* ~~~ "Schriftfarbe ORANGE" ~~~*/
#desktop-menu ul li ul li.akt a::before, .rot {color:#ec691f;}
/* ~~~ "Schriftfarbe WEISS" ~~~*/
#warenkorb a, #warenkorb a:link, #desktop-menu ul li a, #desktop-menu ul li a:link, .herstellinfo a, .herstellinfo a:link, .warenkorb-but a, .warenkorb-but a:link, .gobut, #footer-menu-oben li a, #footer-menu-oben li a:link, #footer-menu-oben li a:visited, #footer-main-menu li a, #footer-main-menu li a:link, #footer-main-menu li a:visited, adress h2, adress p, adress a, adress a:link  {color:#fff;}
/* ~~~ "Schriftfarbe GRAU" ~~~*/
.faq-aufklapp h2, .groesse ul li a, .groesse ul li a:link, .shopmenu ul li a, .shopmenu ul li a:link {color:#9a9a9a; }
/* ~~~ "text-align:left" ~~~*/
#desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link {text-align:left; }

	
/* ~~~ bodyklassen ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body.home #breadcrumbs, body.produktgruppe #breadcrumbs, body.home #desktop-u-menu, body.warengruppe #desktop-u-menu, body.warenkorb #desktop-u-menu, body.direkteingabe #desktop-u-menu, body.schnelleingabe #desktop-u-menu, body.i-frame #desktop-u-menu, body.fair-fashion .beitrag-liste.artikelgruppe .bestellung {display:none;}
body.home #content, body.warengruppe #content, body.warenkorb #content, body.i-frame #content, body.schnelleingabe #content, body.login #content {width:100%; margin-left:0;}
body.schnelleingabe .alsDetail p, body.login .alsDetail p {text-align:center}
body.fair-fashion .beitrag-liste.artikelgruppe .neu {background:url(../images/artikel-neu-fashion.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
body.fair-fashion .beitrag-liste.artikelgruppe .angebot {background:url(../images/artikel-reduziert-fashion.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
body.i-frame {background:#fff;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
header {height:auto; z-index:1000; }

/* ~~~ Header OBEN > Zusatz-Menu  ~~~ */
#header-oben {z-index:1200;}
	#header-oben-menu {min-height:45px;}
	#header-oben-menu li a, #header-oben-menu li a:link, #header-oben-menu li a:visited {color:#000; padding:10px 7px 5px 7px; }
	#header-oben-menu li a:active, #header-oben-menu li a:focus, #header-oben-menu li a:hover {color:#ec691f;}
	#header-oben-menu li.akt a {color:#ec691f;}
	#header-oben-menu li:last-child a {padding:10px 0 7px 7px; }	
				
/* ~~~ Header UNTEN Haupt-Menu | Logo | Lupe + Warenkorb ~~~ */
#header-unten {height:auto;}
#header-unten-wrapper {height:110px; }
	
/* ~~~ Logo ~~~~~~~~~~~~~~~~~ */
#logo {width:142px; height:123px; left:0; top:-43px; z-index:2000; }
	#logo a, #logo a:link {left:0; top:0; width:142px; height:123px; background:url(../images/EZA-Logo.svg) 0 0 no-repeat; background-size:cover;}
	#logo a:focus, #logo a:hover {background:url(../images/EZA-Logoa.svg) 0 0 no-repeat; background-size:cover;}
		
/* ~~~ Lupe + Warenkorb ~~~ */
#icon-wrapper {width:100px; height:40px; top:28px; right:0px; z-index:2000;}
		
/* ~~~ Warenkorb ~~~ */
#warenkorb {width:35px; height:40px; background:url(../images/warenkorb-icon.svg) 0 0 no-repeat; background-size:cover; font-size:110%;}
	#warenkorb:hover, warenkorb:focus {background:url(../images/warenkorb-icona.svg) 0 0 no-repeat; background-size:cover;}
	#warenkorb a, #warenkorb a:link {color:#fff; padding:13px 0 9px 0;}
	#warenkorb a:focus, #warenkorb a:hover {color:#000; }
		
/* ~~~ Button-Suche-Einblender~~~ */	
#search-toggle {width:35px; height:35px;}
	#search-toggle a, #search-toggle a:link {right:0; top:5px; width:35px; height:35px; background:url(../images/lupe.svg) 0 0 no-repeat; background-size:cover;}
	#search-toggle a:focus, #search-toggle a:hover {background:url(../images/lupea.svg) 0 0 no-repeat; background-size:cover;}
	.searchbut {height:auto; vertical-align:middle;}
/* ~~~ eingeblendetes Suchefeld~~~ */
#search-field {display:none; right:0; top:85px; z-index:5000; width:320px; height:auto; padding:30px 10px 30px 30px; border:1px solid #ec691f; border-radius:15px; background:rgba(50,50,50,0.95);}
	#suchediv {width:320px;}
	#suchstr, #volltextsuche {display: inline-block; width:200px; height:35px; color:#000; font-size:90%; vertical-align:middle; border: 1px solid #bbb; }
	#gobutton, #suchbutton {width:40px; margin-left:10px; padding:0; border:none; box-shadow:none; vertical-align:top; background:none;}
	#suchbutton {margin-top:10px;}	
	#volltextsuche {margin:10px 0 0 7px; font-size:100%;}
	
/* ~~~~~~~~~~~~ MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		
/* ~~~ Menu Container Haupt-Navi ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#menu-cont {height:37px; margin:0 auto; }		
	
/* ~~~ Hamburger ~~~ */
#menu-smart, #mobil-menu {display:none; }

/* ~~~ HAUPTmenü DESKTOP~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ Menu 1. Ebene~~~ */
	#desktop-menu ul {z-index:2000; }
	#desktop-menu ul li a, #desktop-menu ul li a:link {padding:0.4em 0.6em; font-size:105%; color:#fff; letter-spacing:0.1em;}
	#desktop-menu ul li .navi-bild {display:none; top:70px; right:-680px; z-index:50000; width:400px;}
	#desktop-menu ul li:nth-child(2) .navi-bild {right:-541px;}
	#desktop-menu ul li:nth-child(3) .navi-bild {right:-405px;}
	#desktop-menu ul li:nth-child(4) .navi-bild {right:-199px;}
	#desktop-menu ul li:nth-child(5) .navi-bild {right:-20px;}
	#desktop-menu ul li .navi-bild a, #desktop-menu ul li .navi-bild a:link, #desktop-menu ul li.akt .navi-bild a {background:none; padding:0; margin:0; opacity: 1.0;}
	#desktop-menu ul li .navi-bild a:hover, #desktop-menu ul li .navi-bild a:focus {background:none; opacity: 0.7;}
		
/* ~~~ Menu 2. Ebene ~~~ */
	#desktop-menu ul li ul {display:none; min-width:25%; position:absolute; left:-30px; top:67px; padding:5px; z-index:50000; -webkit-flex-flow:column; flex-flow:column; overflow:visible; -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:1.0em; -moz-column-gap:1.0em; column-gap:1.0em; }
	#desktop-menu ul li ul li a, #desktop-menu ul li ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link, #desktop-menu ul li.akt ul li a, #desktop-menu ul li.akt ul li a:link {display:inline-block; padding:0.3em 0.5em 0.3em 0; color:#000; font-size:105%; text-align:left; letter-spacing:0.02em; }
	#desktop-menu ul li ul li.akt a::before {content: "> ";} 
	#desktop-menu ul li ul li a:hover, #desktop-menu ul li ul li a:focus, #desktop-menu ul li.akt ul li a:hover, #desktop-menu ul li.akt ul li a:focus, #desktop-menu ul li.akt ul li.akt a:hover, #desktop-menu ul li.akt ul li.akt a:focus, #desktop-menu ul li.akt ul li.akt a, #desktop-menu ul li.akt ul li.akt a:link {color:#ec691f; }
	#desktop-menu ul li ul li:first-child a:link {display:none;}
	#desktop-menu ul li:nth-child(2) ul {left:-172px; }
	#desktop-menu ul li:nth-child(3) ul {left:-310px; }
	#desktop-menu ul li:nth-child(4) ul {left:-444px; }
	#desktop-menu ul li:nth-child(5) ul {left:-650px; }

/* ~~~ Desktop U-Navi Background ~~~ */
#desktop-navi-back {display:none; height:350px; left:0; top:155px; z-index:5000; box-shadow: rgba(0,0,0,0.3) 0 5px 10px; }
	
/* ~~~ Unter-Menü DESKTOP über 1040px~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#desktop-u-menu {position:fixed; z-index:1800; max-width:200px; margin-top:10px; padding:9px 10px 10px 10px;}
	/* ~~~ U-Menu > 1. = 2. Ebene ~~~ */
	#desktop-u-menu ul {}
	#desktop-u-menu ul li {border-bottom:1px solid #dbdbdb;}
	#desktop-u-menu ul li a, #desktop-u-menu ul li a:link, #desktop-u-menu ul li.akt a, #desktop-u-menu ul li.akt a:link {padding:5px 0; border:none; font-size:95%; line-height:100%; color:#000; text-align:left;}
	#desktop-u-menu ul li a:hover, #desktop-u-menu ul li a:focus, #desktop-u-menu ul li.akt a, #desktop-u-menu ul li.akt a:link {color:#ec691f; }
	#desktop-u-menu ul li:first-child {border-top:1px solid #dbdbdb;}
	
	/* ~~~ U-Menu >  2. = 3. Ebene ~~~ */
	#desktop-u-menu ul li ul {border-top:1px solid #cecece; padding:3px 0; margin:3px 0;}
	#desktop-u-menu ul li ul li {border-bottom:none; margin-left:20px;}
	#desktop-u-menu ul li ul li a, #desktop-u-menu ul li ul li a:link, #desktop-u-menu ul li.akt ul li a, #desktop-u-menu ul li.akt ul li a:link {color:#717171; border:none; padding:5px 0 5px 0; }
	#desktop-u-menu ul li ul li a:hover, #desktop-u-menu ul li ul li a:focus, #desktop-u-menu ul li.akt ul li a:hover, #desktop-u-menu ul li.akt ul li a:focus, #desktop-u-menu ul li.akt ul li.akt a,#desktop-u-menu ul li.akt ul li.akt a:link {color:#ec691f; }
	#desktop-u-menu ul li.akt ul li.akt a::before {color:#ec691f; content: "> ";}
	#desktop-u-menu ul li ul li:first-child {border-top:none;}
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/* ~~~ Bereich "main" >  Beiträge  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main {z-index:50;}

/* ~~~ "conten-wrapper" = Rahmen für "U-Navi", "breadcrumbs" und "content" am Desktop ~~~*/
#content-wrapper {}

/* ~~~ breadcrumbs ~~~ */
#breadcrumbs {z-index:50; margin:0 0 0 10px;}
	#breadcrumbs a, #breadcrumbs a:link {color:#a7a7a7; margin-right:5px; font-size:80%; }
	#breadcrumbs a::before, #breadcrumbs a:link::before {content: "> "; color:#a7a7a7;}
	#breadcrumbs a:hover, #breadcrumbs a:active, #breadcrumbs a:focus, #breadcrumbs a.akt {color:#737373;}
	#breadcrumbs a:hover::before, #breadcrumbs a:focus::before, #breadcrumbs a.akt::before {content: "> "; color:#737373;}
	
/* ~~~ Container für Beiträge ~~~*/
#content {width:81.7%; margin-left:18.3%; }
	
/* ~~~ Beitrag Standard ~~~*/
	.beitrag-standard li {margin:0 0 7px 0; }
	.beitrag-standard li {line-height:120%; }
	/* ~~~ Bilder ~~~*/
	.beitrag-standard figure.ganze-breite {margin:15px 0 15px 0;}
	/* ~~~ Table ~~~*/
	.beitrag-standard table {margin:15px 0; padding:15px 0; }
	.beitrag-standard td, .beitrag-standard th {width:auto;  padding: 0.25em; text-align: left; vertical-align:top;}
	.beitrag-standard th {margin:7px 0 7px 0; padding:10px 7px 10px 7px; border:none; } 

	.alsDetail ul {margin:1% 0;}
	.alsDetail li {background:transparent url('../images/bullet.svg') 0 5px no-repeat; text-indent:0; padding-left:0.8em; margin-bottom:0.3em; }
		
/* ~~~ Listenbeiträge ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.listen-cont, .listen-cont.produktgruppe  {margin-top:40px;}
		
body.warengruppe .listen-cont, .listen-cont.warengruppe {margin-top:5px;}
	
.beitrag-liste h2 {font-size:100%; padding:7px 10px;}

/* ~~~ Bild-Boxen hover-Effekt ~~~~~~*/	
.beitrag-liste.zusatzangebot figure img, .beitrag-liste.button figure img, .beitrag-liste.artikelgruppe figure img, .beitrag-liste.produktgruppe figure img, .beitrag-liste.warengruppe figure img, .beitrag-liste.bannerbild.fair-fashion figure img {transition:transform 2s cubic-bezier(.19, 1, .22, 1)0ms;}
.beitrag-liste.zusatzangebot:hover figure img, .beitrag-liste.button:hover figure img, .beitrag-liste.artikelgruppe:hover figure img, .beitrag-liste.produktgruppe:hover figure img, .beitrag-liste.warengruppe:hover figure img, .beitrag-liste.bannerbild.fair-fashion:hover figure img { -webkit-transform:scale(1.075, 1.075); transform:scale(1.075, 1.075);}
		
/* ~~~ Bild-Boxen mehrlink~~~*/
.beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link, .bannerbild.fair-fashion p.mehrlink a, .bannerbild.fair-fashion p.mehrlink a:link {width:200%; height:100%; background:rgba(0,0,0,0.0); top:-1px; left:-231px; z-index:500; text-align:left;}
.beitrag-liste:hover p.mehrlink a:hover, .beitrag-liste:hover p.mehrlink a:focus, .beitrag-liste p.mehrlink a:hover, .beitrag-liste p.mehrlink a:focus, .bannerbild.fair-fashion:hover p.mehrlink a:hover, .bannerbild.fair-fashion:hover p.mehrlink a:focus, .bannerbild.fair-fashion p.mehrlink a:hover, .bannerbild.fair-fashion p.mehrlink a:focus, body.artikelgruppe .beitrag-liste p.mehrlink a:focus {background:rgba(0,0,0,0.3);}

/* ~~~ Bild-Boxen waren-, produkt- und artikelgruppen ~~~~~~~~~~~~~~~*/		
.beitrag-liste.produktgruppe, .beitrag-liste.button, .beitrag-liste.zusatzangebot, .beitrag-liste.warengruppe {width:31.1%; margin:0 3.35% 40px 0;}
		 
.beitrag-liste.artikelgruppe {width:23.2%; margin:0 2.27% 30px 0;}
.beitrag-liste.artikelgruppe:nth-child(4n) {margin:0 0 30px 0;}
	.beitrag-liste.warengruppe h2 {bottom:10px; }
		 
.beitrag-liste.button {height:110px; border:1px solid #c9c9c9;}
	.beitrag-liste.button h2 {color:#737373; background:none; padding:0; bottom:0; left:50%; top:42%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
	.beitrag-liste.button h2::after {content: " >";}
	.beitrag-liste:hover.button h2 {color:#000; font-size:105%;}
		
.beitrag-liste.produktgruppe:nth-child(3n), .beitrag-liste.button:nth-child(3n), .beitrag-liste.zusatzangebot:nth-child(3n), .beitrag-liste.warengruppe:nth-child(3n) {margin:0 0 40px 0;}

	.beitrag-liste.artikelgruppe p {margin:0 10px; text-align:center; }
	.beitrag-liste.artikelgruppe p.mehrlink a, body.artikelgruppe .beitrag-liste p.mehrlink a:link {height:65%; background:none;}
	.beitrag-liste.artikelgruppe:hover p.mehrlink a:hover {height:65%; background:none; }
		
	.beitrag-liste.artikelgruppe:focus p.mehrlink a:focus {height:65%; background:rgba(0,0,0,0.3); }
	.beitrag-liste.artikelgruppe {font-size:90%; }
	.beitrag-liste.artikelgruppe .bestellung {width:92%; margin-right:8%; padding:10px 0; }	
	
/* ~~~ Slider Bannerbild ~~~~~~~~~~~~~~~*/		
.beitrag-liste.bannerbild {margin-top:40px; }
	.beitrag-liste.bannerbild p {vertical-align:top; margin:0; }
	.beitrag-liste .banner-logo, .beitrag-standard .banner-logo {left:15px; top:15px; z-index:2000; width:16%; opacity:0.8;}
	.beitrag-liste.bannerbild h2, .beitrag-liste.produktgruppe h2, .beitrag-liste.warengruppe h2, .beitrag-liste.zusatzangebot h2 {left:50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); bottom:20px; padding:10px 15px; font-size:115%; background:rgba(255,255,255,0.90); z-index:200;}
	
	/* ~~~ Slider Fair-Fashion + großes Imagebild~~~*/
	.beitrag-liste.bannerbild.fair-fashion .banner-logo, .beitrag-standard .banner-logo  {top:58%; right:0; left:82%; z-index: 480; opacity:0.9;}
	.beitrag-liste.bannerbild.fair-fashion:hover .banner-logo, .beitrag-liste.bannerbild.fair-fashion:focus .banner-logo {opacity:1.0;}
	.beitrag-liste.bannerbild.fair-fashion {margin-top:0px; margin-bottom:40px;}
	.beitrag-liste.bannerbild.fair-fashion:first-child {margin-top:20px;}
		
/* ~~~ Artikel Zusatzkreise : neu, reduziert, nicht verfügbar~~~*/	
.detailbild {position:relative;}
.beitrag-liste.artikelgruppe .neu, .beitrag-liste.artikelgruppe .angebot, .beitrag-liste.artikelgruppe .nicht-verfuegbar,
.detailbild .neu, .detailbild .angebot, .detailbild .nicht-verfuegbar
	{
	width:48px; height:48px; top:0; right:0; z-index:450; opacity: 0.9;
	}

.detailbild .neu, .detailbild .angebot, .detailbild .nicht-verfuegbar {
	width:60px; height:60px; top:15px; right:15px;	
}		
		
.detailbild .neu, .detailbild .angebot, .detailbild .nicht-verfuegbar {position:absolute;}		
.beitrag-liste.artikelgruppe .nicht-verfuegbar  {width:85px; height:85px;  }	
.beitrag-liste.artikelgruppe .neu, .detailbild .neu {background:url(../images/artikel-neu.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
.beitrag-liste.artikelgruppe .angebot, .detailbild .angebot {background:url(../images/artikel-reduziert.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
.beitrag-liste.artikelgruppe .nicht-verfuegbar, .detailbild .nicht-verfuegbar {background:url(../images/artikel-nicht-verfuegbar.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
			
/* ~~~ Artikel Detailbeitrag ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/* ~~~ Artikel Detailbeitrag  Bild ~~~*/
.detailbild-cont {display:inline-block; width:49%; margin:0 2% 30px 0; vertical-align:top;}
	.detailbild-cont .detailbild figure img{border:none;}
	.detailbild-cont .bildicons figure {width:22%; margin-right:2%; margin-top:10px;}
	.detailbild-cont .bildicons figure img, .detailbild-cont figure img {transition:none; border:1px solid #d7d7d7; }
	.detailbild-cont .bildicons:hover figure.icon1 img, .detailbild-cont .bildicons:hover figure.icon2 img, .detailbild-cont .bildicons:hover  figure.icon3img, .detailbild-cont .bildicons:hover figure.icon4 img, .detailbild-cont figure.grossbild:hover img {-webkit-transform:none; transform:none; }
/* ~~~ Artikel Detailbeitrag  Text ~~~*/
.detailtext {width:48%; display:inline-block; margin:30px 0;}
	.beschreibung {margin-top:7px;}
	.beschreibung h1 {font-size:160%; text-align:left; }
	.beschreibung h2 {font-size:110%; text-align:center; -webkit-transform:translate(0,0); transform:translate(0,0); position:relative; left:0; bottom:0; background:none; padding:0; white-space:pre-wrap;}
	.artikelnummer {color:#737373;}
	.anzahl, .logistik p {font-size:90%; }
/* ~~~ Pictogramme ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */	
.pictorahmen {height:auto; margin:20px 0; }
	.pictorahmen img {width:auto; height:100px; margin:0 7px 7px 0; }
	.pictorahmen img#biokosmetiklogo, .pictorahmen img#logoeuorganic {height:60px;}
.gots_labelstufe {width:100%;font-size:0.9em;}

/* ~~~ FAQs aufklappbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ aufklapp header ~~~*/
.beitrag-faq {width:80%; margin-bottom:10px; }
.faq-aufklapp {height:auto;}
	.faq-aufklapp a {height:100%;}
	.faq-aufklapp h2 {width:90%; color:#9a9a9a; padding:7px 10px; margin:0; font-size:100%; text-align:left;}
	.faq-aufklapp:hover h2, .faq-aufklapp:focus h2 {color:#000;}
	.faq-aufklapp a, .faq-aufklapp a:link {border:1px solid #dbdbdb;}
	.faq-aufklapp a:focus {background:#dfdfdf;}
	.faq-aufklapp img { width:20px; right:10px; top:7px;}
/* ~~~ aufklapp content ~~~*/
.js-faq-content {display:none; height:auto; padding:7px; overflow:hidden; }
	.js-faq-content h2, .faq-aufklapp:hover .js-faq-content h2 {margin-bottom:10px; color:#000; padding:0; text-align:left; }
	.js-faq-content p {margin-bottom:10px;}
	.js-faq-content a, .js-faq-content a:link, .js-faq-content a:hover, .js-faq-content a:focus {background:none; display:inline;}
	.js-faq-content ul {margin:7px 0;}
	.js-faq-content li {background:transparent url('../images/bullet.svg') 0 5px no-repeat; text-indent:0; padding-left:0.8em; margin-bottom:0.3em;}
	js-faq-content figure {width:45%; float:left; margin:0 15px 7px 0; }
	.js-faq-content figure img {position:relative; right:0; top:0;}
			
	.faq-aufklapp h2, .js-faq-content h2 {-webkit-transform:translate(0,0); transform:translate(0,0); left:0; bottom:0; background:none; white-space:pre-wrap;}

/* ~~~ Animation des Pfeiles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	.pfeildown {-webkit-transition: -webkit-transform .0s ease; transition: transform .0s ease; -webkit-transform: rotate(0); transform: rotate(0);}
	.pfeilup {-webkit-transition: -webkit-transform .0s ease; transition: transform .0s ease; -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}

		
/* ~~~ Filter Beitrag~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.filter-auswahl, .direkt-eingabe, #suchediv-auswahl  {margin:10px 0 20px 0; }
	.filter-auswahl p, .direkt-eingabe p {margin:0 0 10px 0; }
	.filter-auswahl h2, .direkt-eingabe h2 {font-size:120%;}
	.filter-auswahl ul, .direkt-eingabe ul {margin:15px 0 7px 0;}
	.filter-auswahl li, .direkt-eingabe li {margin-left:10px;}
	.filter {margin-bottom:7px;  }
	#suchediv-auswahl  {border-top:3px solid #d4d4d4; padding-top:20px;}
	#suchediv-auswahl p {white-space:pre-wrap;}
		
	#auflistung {padding:10px; margin-bottom:3px; display:block; -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:1.0em; -moz-column-gap:1.0em; column-gap:1.0em; border:1px solid #dbdbdb;}
	#auflistung h2 {font-size:110%; line-height:110%; text-align:left; margin-bottom:0;}
	#auflistung h2 a, #auflistung h2 a:link {color:#000; text-decoration:underline;}
	#auflistung h2 a:hover, #auflistung h2 a:focus {color:#ec691f;}
	#auflistung .gruppenrahmen {margin-bottom:10px; margin-right:20px; break-inside:avoid;}
	#auflistung .gruppenrahmen p {font-size:95%; margin-bottom:0;}
		
	.direkt-eingabe .warenkorb-but {margin-top:15px;}
	
#schnellformular, .filter-auswahl, .warenkorb-cont, .direkt-eingabe, #login-cont, #angaben-cont {padding:7px 10px; margin:10px 0 15px 0; border:1px solid #e6e6e6; background:#f6f6f6;}
	#angaben-cont input {margin-bottom:5px;}
		
	#schnellformular ul, .filter-auswahl ul, .warenkorb-cont ul, .direkt-eingabe ul {list-style:none !important; margin:0;}
	#schnellformular li, .filter-auswahl li, .warenkorb-cont li, .direkt-eingabe li {background:none !important; text-indent:0; padding-left:0em; margin-bottom:0.3em; }
		
#login-cont {margin-bottom:30px;}
#angaben-cont p { text-align:center;}
#angaben-cont p.agbboxes {text-align:left;max-width:660px;margin:0 auto;}
		
/* ~~~ Schnellauswahl ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#schnellformular {max-width:600px; min-width:50%; padding:10px; margin:20px auto; font-size:90%; line-height:120%; text-align:left;}
	#schnellformular .artikelnr {width:150px; margin-left:5px; border:1px solid #ccc; border-radius:5px;}
	#schnellformular .menge {width:80px; margin-left:5px;}
	#schnellformular .warenkorb-but {margin:15px 0; }
	#schnellformular input { text-align:left; }	
	#schnellformular th:nth-child(2) {padding-left:15px;}
	#schnellformular th:nth-child(3) {padding-left:5px;}
		
	#schnellformular td:first-child, #login-cont td:first-child, #angaben-cont td:first-child {text-align:right; border:none;}	
	#login-cont td:first-child, #angaben-cont td:first-child {width:40%; padding-right:5px;}
	#schnellformular th {border:none;}

/* ~~~ Warenkorb DANKE ~~~*/		
.danke {text-align:center; margin:50px 0;}
	.danke a {color:#9d1a2c;}
	.danke a::before {content:"> ";}

.mitte {text-align:center;}
.mini {font-size:85%; line-height:120%; }
		
/* ~~~ Warenkorb ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.anleitung {font-size:90%; line-height:130%; margin:20px 0 20px 30px;}
.anleitung a::before, .anleitung a:link::before {content:"> ";}
.rot, .gruen {text-align:center;}
.gruen {color:#76b82a;}

/* ~~~iFrame  Fancybox SHOP Artikelbestandteile ~~~*/
#container-bestandteile {max-width:600px; height:auto; margin:0 auto; background:transparent url('../images/shop-bestandteile-header.svg') no-repeat top left; background-size:auto 130px; padding-top:140px; overflow:hidden;}
#container-bestandteile #druck {margin:20px 0; text-align:center; overflow:hidden;}
		
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ Shopmenü  nicht verwendet~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.shopmenu ul {margin-top:20px;}
	.shopmenu ul li {margin-top:20px; width:32.5%; }
	.shopmenu ul li a, .shopmenu ul li a:link {padding:0.4em 0.6em; color:#9a9a9a; letter-spacing:0.1em; border:1px solid #d4d4d4; text-align:center; text-transform:uppercase; border-radius:5px;}
	.shopmenu ul li a:hover, .shopmenu ul li a:focus, .shopmenu ul li.akt a, .shopmenu ul li.akt a:hover, .shopmenu ul li.akt a:focus {color:#fff; border:none;}

/* ~~~ paginator ~~~*/
.paginator {margin:30px 0;}
	.paginator ul {list-style:none !important; margin:0;}
	.paginator li {background:none !important; text-indent:0; padding-left:0em; margin-bottom:0; border-top:1px solid #dbdbdb; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; }
	.paginator li:first-child {border-left:1px solid #dbdbdb; }
	.paginator li a, .paginator li a:link {color:#737373; width:40px; height:40px; padding:10px; text-align:center;}
	.paginator li a:hover, .paginator li a:focus, .paginator li.akt a {background:#323232; color:#fff;}
	.paginator li.pas a, .paginator li.pas a:hover, .paginator li.pas a:focus {color:#dbdbdb; background:#fff;}
	.paginator img {width:256px;}
	
	.paginator div {padding:0.7em; text-align:center;}
	.paginator div select {width:60px;}
	
/* ~~~ INFO -Link "Die Menschen hinter dem Produkt" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */	
	.herstellinfo a, .herstellinfo a:link, .bildblender a, .bildblender a:link {width:80%; display:block; padding:7px 15px; background:#9e9e9e; color:#fff; margin-bottom:7px;}
	.herstellinfo a:hover, .herstellinfo a:focus, .bildblender a:hover, .bildblender a:focus {background:#323232;} 
	.herstellinfo a::after, .bildblender a::after {right:5px; top:10px; color:#fff; width:20px; height:20px; content:""; background:transparent url('../images/pfeil-info.svg') no-repeat;}
	.bildblender a:link {width:220px; margin:10px 0px 30px 30px; text-align:left;}
	
	.faq_rahmen a, .faq_rahmen a:link, .faq_rahmen a:visited {color:#9a9a9a; background-color:#FFF; border:1px solid #dbdbdb;}
	.faq_rahmen a:hover, .faq_rahmen a:active, .faq_rahmen a:focus {background-color:#FFF; color:#000;}
	.faq_rahmen a:after {background:transparent url('../images/pfeil-info-rechts.svg') no-repeat;}
		
.warenkorb-but {width:200px; margin:10px 0 20px 0;}
	.warenkorb-but a, .warenkorb-but a:link {padding:7px 10px; text-align:center; color:#fff; border:none;  }
	.warenkorb-but a:hover, .warenkorb-but a:focus {background:#ec691f; color:#fff; border:none;}
	.warenkorb-but a::before {content:url(../images/warenkorb-icon-klein.svg); padding-right:10px;} 
		
.beitrag-liste.artikelgruppe .warenkorb-but {width:30px; height:30px; border-radius:50%; margin:0 0 2px 0;  }	
	.beitrag-liste.artikelgruppe .warenkorb-but a, .beitrag-liste.artikelgruppe .warenkorb-but a:link  {left:0; top:0; width:30px; height:30px; background:url(../images/warenkorb-icon-klein-rund.svg) 0 0 no-repeat; background-size:cover; border-radius:50%; box-shadow:none;}
	.beitrag-liste.artikelgruppe .warenkorb-but a:hover, .beitrag-liste.artikelgruppe .warenkorb-but a:focus {background:url(../images/warenkorb-icon-klein-runda.svg) 0 0 no-repeat; background-size:cover; border-radius:50%;}
	.beitrag-liste.artikelgruppe .warenkorb-but a::before {content:""}
		
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Formularelemente ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* remove standard-styles */
input, select, textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; border-radius:0;}

/* Labels */
label {display:inline-block; margin:.2em 0;}
			
/* Select */
select {width:auto; border: 1px solid #bbb; padding:3px; box-shadow:0 3px 3px 0 rgba(0,0,0,0.25); border-radius:5px; background:#fff url('../images/pfeil-menu-zu.svg') 90% 47% no-repeat; background-size:auto 15px; }
	select:hover, select:focus { box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); border:1px solid #ec691f;}
	select .opt-abstand {padding-left:20px; }
		
/* ~~~ input~~~*/
.menge {width:50px;}
		
.submit {min-width:200px; margin:15px 0; padding:10px 15px; text-align:center; font-size:1em; overflow:hidden; background:#9e9e9e; color:#fff; border:none;}
	.submit:hover, .submit:focus {background:#323232; color:#fff; border:none;}
	
.submit, .bildblender a:link, .warenkorb-but a:link {box-shadow:0px 2px 2px 0px rgba(0,0,0,0.45); border-radius:5px;}
	.bildblender a:hover, .warenkorb-but a:hover, .bildblender a:focus, .warenkorb-but a:focus {box-shadow:none;}

.dropdown, .artikelnr, .email {width:200px; margin-bottom:5px; }

#neuseit-anzeige {width:110px; margin-left:5px;}
		
#angaben-cont .login {width:270px;}
#angaben-cont textarea.login {width:100%; max-width:660px;}
		
/* ~~~Radio-Buttons Größe Fair Fashion ~~~~~~~~~~~~ */	
.groesse {height:80px; margin:15px 0; clear:both; }
	.groesse p {font-size:90%;}
	.but-size {display:inline-block; margin-right:7px; }
	.but-size label {width:40px; height:40px; color:#9a9a9a; padding:8px; border:1px solid #dbdbdb; text-align:center;}
	.but-size label:hover {background:#9e9e9e; color:#fff;}
	.but-size [type=radio] {display:none;}
	.content {position:absolute; top:28px; left:0; background:#fff; right:0; bottom:0; padding:20px; border:1px solid #9e9e9e; }
	.but-size [type=radio]:checked ~ label {background:#323232; z-index:2000; color:#fff;}
	.but-size [type=radio]:checked ~ label ~ .content {z-index: 1;}				
		
/* Radio-Buttons Filter Auswahl*/
input[type='checkbox']:checked, input[type='checkbox']:not(:checked), .filter-auswahl input[type='radio']:checked, .filter-auswahl input[type='radio']:not(:checked), #angaben-cont input[type='radio']:checked, #angaben-cont input[type='radio']:not(:checked) 
{background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
input[type='checkbox'] + label,input[type='radio'] + label {cursor: pointer; }
.filter-auswahl input[type='radio'] + label, #angaben-cont input[type='radio'] + label 
{cursor: pointer;}
input[type='checkbox'] + label::after, .filter-auswahl input[type='radio'] + label::after, #angaben-cont input[type='radio'] + label::after 
{position:absolute; display:none; content:""; }
input[type='checkbox']:checked + label::before, input[type='checkbox']:not(:checked) + label::before, .filter-auswahl input[type=radio]:checked + label::before, .filter-auswahl input[type=radio]:not(:checked) + label::before, #angaben-cont input[type=radio]:checked + label::before, #angaben-cont input[type=radio]:not(:checked) + label::before 
{content:' '; display:inline-block; width:20px;  height:20px;  position: relative; top:4px;  border:1px solid #949494; background:#fff; margin-right:0.75em; border-radius:3px; overflow:hidden;}
.filter-auswahl input[type=radio]:checked + label::before, .filter-auswahl input[type=radio]:not(:checked) + label::before, #angaben-cont input[type=radio]:checked + label::before, #angaben-cont input[type=radio]:not(:checked) + label::before 
{border-radius: 50%;}
input[type='checkbox']:hover  + label::before, input[type='checkbox']:focus  + label::before, .filter-auswahl input[type='radio']:hover  + label::before, .filter-auswahl input[type='radio']:focus  + label::before, #angaben-cont input[type='radio']:hover  + label::before, #angaben-cont input[type='radio']:focus  + label::before 
{background:#c5c5d3; border:1px solid #b4b4c6; transition: all 0.4s ease-out; }
.filter-auswahl input[type='radio']:checked  + label::before, #angaben-cont input[type='radio']:checked  + label::before 
{background:#323232; border:1px solid #323232; overflow:hidden;}
.filter-auswahl input[type='radio']:checked + label::after, #angaben-cont input[type='radio']:checked + label::after 
{display:block; top: 13px; left:9px; width:4px; height:4px; background:#fff; border-radius:50%; transition: all 0.4s ease-out; }
input[type='checkbox']:checked  + label::before {background:#323232; border:1px solid #323232; overflow:hidden;}
input[type='checkbox']:checked  + label::after {display:block; top: 7px; left: 7px; width:5px; height:11px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border:2px solid #fff; border-top:0; border-left:0; transition: all 0.4s ease-out; }
		
/* Input & Textarea */
input, textarea {background:#fff; border: 1px solid #d4d4d4; border-radius:5px; padding:7px 10px; box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.1);}
input, select, textarea {font-size:100%; line-height:100%; color:#231f1f; }
textarea {resize:vertical;}
input:hover, input:active, input:hover, input:focus, textarea:hover, textarea:active, textarea:focus {border:1px solid #ec691f; box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.0);transition: all 0.4s ease-out;}
		
/* Tabellen  Shop Warenkorb*/
#bestellung table, #bestandteile table {border-collapse:collapse; background:#f6f6f6; margin:10px auto 20px auto; }
	/* Zebra striping */
	#bestellung tr:nth-of-type(odd), #bestandteile tr:nth-of-type(odd) {background:#fff; }
	#bestellung td, #bestellung th, #bestandteile td, #bestandteile th {padding:5px; border:1px solid #e6e6e6; vertical-align:middle; white-space: normal;}
	#bestellung th, #bestandteile th {color:#8d8f91; background:#eeeeee; text-align:left; font-size:90%;}
	#bestellung td.preis {text-align:right; margin-right:5px}
	#bestellung.menge {width: 40px; border:1px solid #ccc; padding:5px; margin-left:5px;}
	#bestellung .untenx6 {text-align:right;}
	#bestellung td .bild, #bestellung td .info, #bestellung td .papierkorb {float:right; width:30px; margin-left:10px; cursor:pointer; }
	#bestellung td .bild {width:100px; float:left; margin-right:5px;}
	.artikelnummer {vertical-align:middle;}
	#bestellung th:nth-child(2), #bestellung th:nth-child(3) {min-width:110px;}	
	#bestandteile th:nth-child(2) {min-width:400px;}
			
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/		

/* ~~~ Footer ~~~*/
	
/* ~~~ Footer Oben Menu-Oben~~*/
#footer-header {border-bottom:1px solid #b6b6b5;}
/* ~~~ Footer Mai-Menu ~~~ */
#footer-main-menu-wrapper {border-top:1px solid #b6b6b5; }	
	
/* ~~~ Footer Header Oben- & Main-Menu~~~ */
	#footer-menu-oben li a, #footer-menu-oben li a:link, #footer-menu-oben li a:visited, #footer-main-menu li a, #footer-main-menu li a:link, #footer-main-menu li a:visited {color:#fff; padding:7px 12px; }
	#footer-menu-oben li a:active, #footer-menu-oben li a:focus, #footer-menu-oben li a:hover, #footer-main-menu li a:active, #footer-main-menu li a:focus, #footer-main-menu li a:hover {color:#000;}
	#footer-menu-oben li.akt a, #footer-main-menu li.akt a {color:#861723;}

/* ~~~ Footer Mitte ~~~ */	
#footer-mitte {z-index:50;}
/* ~~~ Adresse ~~~ */
adress {width:25%; padding:10px 0; z-index:50;}
	adress h2 {font-size:100%; margin-bottom:7px; color:#fff; text-align:left;}
	adress p {font-size:90%; line-height:140%; color:#fff; margin:0;}
	adress a, adress a:link {color:#fff; font-size:95%;}
	adress a:hover, adress a:focus, adress a:active {color:#000; }
		
/* ~~~ Footer Logos ~~~ */
#logo-rahmen {width: 75%; padding:10px 12px 10px 0; }
	#logo-rahmen figure {width: 10%; margin-left:5%;}
	#logo-rahmen figure a:focus {width:100%; height:100%;}
		
/* ~~~ Nach oben Pfeil ~~~ */
#pfeil-nach-oben-cont {padding:10px;}
	#pfeil-nach-oben {}
	#pfeil-nach-oben a, #pfeil-nach-oben a:link {width:80px; height:40px; z-index:150; background:url(../images/pfeil-nach-oben.svg) 0 0 no-repeat; background-size:cover;}
	#pfeil-nach-oben a:hover, #pfeil-nach-oben a:focus {background:url(../images/pfeil-nach-oben-black.svg) 0 0 no-repeat; background-size:cover;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FANCYBOX~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
.fancybox-button, .fancybox-infobar__body {background:rgba(236,105,31,0.4);}
.fancybox-caption {padding:30px 0; font-size:1em; line-height: 20px; text-align: center; font-family: 'Open Sans',Arial,sans-serif; font-weight:400;}
.fancybox-infobar__body { display:inline-block; width:70px; line-height:44px; font-size: 1em; }
.fancybox-button {width:60px; height:60px; line-height:60px;} 
.fancybox-placeholder {box-sizing:content-box; }
.fancybox-button--play::before, .fancybox-button--fullscreen::before {top:23px; left:25px; }
.fancybox-button--thumbs::before {top:27px; left:27px; }
.fancybox-placeholder::before {content: ''; background:white; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px;}
.fancybox-controls {position:static; }
.fancybox-button--left, .fancybox-button--right {position:absolute; top:50%; transform:translateY(-50%); height:88px; width:88px; line-height:88px;}
.fancybox-button--left::after, .fancybox-button--right::after {width:18px; height:18px; margin:18px;}
.fancybox-button--left {left:0;}
.fancybox-button--right {right:0;}
.fancybox-infobar__body {position: absolute; top: 0;}
.fancybox-infobar__body, .fancybox-button--left, .fancybox-button--right, .fancybox-buttons {z-index:99994;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FLEX SLIDER~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin:0; padding:0; list-style: none;} 
/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin:0; padding:0;}
.flexslider .slides > li {display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; margin:0; padding:0; display: block;}
.flex-pauseplay {display:none;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: none;}
.flexslider {margin: 0; padding:0; border: 0; position: relative; zoom: 1;}
.flex-viewport {max-height: 650px; transition: all 0.5s ease; }
.loading .flex-viewport {max-height: 650px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 0;}
/* Direction Nav */
.flex-direction-nav {height: 0; display:none;}
.flex-direction-nav a {width: 35px; height:82px; margin:-35px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 49%; z-index: 1600; cursor: pointer; text-indent: -9999px; opacity: 0.0; transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: 0px; }
.flex-direction-nav .flex-prev {left: 0px; }
.flexslider:hover .flex-next {opacity: 0.4; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.4; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 0.7; cursor: pointer;}
.flex-direction-nav .flex-disabled {opacity:0.7; cursor: default;}
/* Control Nav */
.flex-control-nav {width:100%; position: absolute; bottom:10px; left:48%; z-index:1600; text-align:left; font-size:0px; }
.flex-control-nav li {margin: 0 5px; display: inline-block; zoom: 1; }
.flex-control-paging li a {width: 10px; height: 10px; display: block; background: rgba(255,255,266,0.3); cursor: pointer; text-indent: -9999px; border-radius: 10px;}
.flex-control-paging li a:hover {background:rgba(255,255,255,1.0); }
.flex-control-paging li a.flex-active {background:rgba(255,255,255,0.8);}
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Browser UPDATE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.buorg {position:absolute; width:100%; top:0px; left:0px; border-bottom:1px solid #A29330; background:#FDF2AB no-repeat 1em 0.55em url(http://browser-update.org/img/dialog-warning.gif); text-align:left; cursor:pointer; font-family: Arial,Helvetica,sans-serif; color:#000; font-size: 16px;}
.buorg div {padding:5px 36px 5px 40px;}
.buorg a {color:#E25600;}
#buorgclose {position: absolute; right: .5em; top:.2em; height: 20px; width: 12px; font-weight: bold; font-size:14px; padding:0;}

.faq-aufklapp table th, .faq-aufklapp table td {
	padding:0 0.1em 0 0.2em;
	border:1px solid #dbdbdb;
	font-size:90%;
}
.faq-aufklapp table th {
	font-weight:bold;
	text-align:left;
	
}

#auflistung, #uform2, #uform3 {display:none;}

.attention {margin:1em 0 0 0;  font-size:1.1em;}
.attention p {color:#F00;font-weight:bold;margin-bottom:0.4em;}
.attention li {list-style: disc outside; margin-left:1em;}

.perpage {float:left;}
.paginator.oben {float:right;margin:0;width:300px;}

.cookiealert {
	position:fixed;bottom:0;z-index:10000;background-color:#ccc;padding:0.6em;width:100%;text-align:center;
}
.cookiealert a {
	color:#000;
}

.mb-1 {margin-bottom:1em;}
.mb-2 {margin-bottom:2em;}


}
@media screen and (max-width: 1240px)  {
#header-oben-menu {padding-right:10px}
#header-oben-menu li:last-child a {padding:10px 7px 7px 7px; }	
#icon-wrapper {right:10px;}

main {padding:0 20px 0 0;}
#content-wrapper {width:100%;}

body.warenkorb #content, body.login #content, body.schnelleingabe #content {width:99%; margin-left:1%;}

.beitrag-liste.bannerbild {margin-top:20px;}
.beitrag-liste.bannerbild.fair-fashion {margin-bottom:20px;}

.beitrag-liste.button {height:80px; }

#footer-mitte {padding:0 15px;}
#content {width:80%; margin-left:20%; }

.listen-cont, .listen-cont.produktgruppe {margin-top:20px;}
body.warengruppe .listen-cont, .listen-cont.warengruppe {margin-top:5px;}

.beitrag-liste.produktgruppe, .beitrag-liste.button, .beitrag-liste.zusatzangebot, .beitrag-liste.warengruppe {width:32.2%; margin:0 1.70% 20px 0;}
.beitrag-liste.produktgruppe:nth-child(3n), .beitrag-liste.zusatzangebot:nth-child(3n), .beitrag-liste.button:nth-child(3n), .beitrag-liste.warengruppe:nth-child(3n) {margin:0 0 20px 0;}

.beitrag-liste.artikelgruppe {width:23.8%; margin:0 1.6% 20px 0;}
.beitrag-liste.artikelgruppe:nth-child(4n) {margin:0 0 20px 0;}

.beitrag-liste.bannerbild h2, .beitrag-liste.produktgruppe h2, .beitrag-liste.warengruppe h2, .beitrag-liste.zusatzangebot h2 {bottom:10px; padding:5px 7px; font-size:95%;}
.beitrag-liste.bannerbild h2 {bottom:15px;}
.beitrag-liste:hover.button h2 {font-size:100%; }
.faq-aufklapp h2 {font-size:100%; }

body.home main, body.warengruppe main {padding:0 20px;}
}
@media screen and (min-width: 1041px)  {
#menu-smart, #mobil-menu {display:none; }
}
@media screen and (max-width: 1040px)  {
#header-unten {padding-bottom:10px;}
#header-unten-wrapper {height:60px; }
#logo {top:-35px; width:115px; height:100px;}
#logo a, #logo a:link, #logo a:focus {width:115px; height:100px; }
#icon-wrapper {top:15px;}
#search-field {top:60px; }
#search-toggle {margin:5px 0 0 25px; }

#desktop-menu, #desktop-u-menu {display:none;}

/* ~~~ Menu MOBIL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#menu-cont {height:50px; -webkit-justify-content:center; justify-content:center;}

#menu-smart {display:block; z-index:20000; width:auto; } 
#menu-smart #but-cont {z-index:49000; width: 40px; height:40px; }

#menu-smart .but {width:30px; height:27px; margin:0; cursor: pointer; }
#menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3 {z-index:50000; width:30px; height:3px; left:0; background:#fff; transition: all 0.30s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart .but span.menu1 {top: 0;}
#menu-smart .but span.menu2 {top: 11px;}
#menu-smart .but span.menu3 {top: 22px;}
#menu-smart .but.move span.menu1 { top: 11px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.20s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart .but.move span.menu2 {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.20s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart .but.move span.menu3 { opacity: 0; transition: opacity 0.20s cubic-bezier(0.75, 0.25, 0.10, 0.95); }	

#mobil-menu {display:none; top:60px; left:0; min-width:320px; max-width:100%; box-shadow: rgba(0,0,0,0.3) 0 5px 10px; z-index:5000; }
#mobil-menu ul {width:100%; z-index:2000;-webkit-flex-flow:column; flex-flow:column; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; }

/* ~~~ Menu 1. Ebene ~~~ */
	#mobil-menu ul li {background:none; }
	#mobil-menu ul li a, #mobil-menu ul li a:link {padding:0.6em 10px 0.6em 10px; border-bottom:1px solid #cecece; background:none; text-align:left; color:#323232;}
	#mobil-menu ul li a:hover, #mobil-menu ul li.akt a, #mobil-menu ul li.akt a:hover {color:#ec691f; background:none;}
	#mobil-menu ul li a.menu-but::after {top:15px; right:15px; content: url("../images/pfeil-menu-auf.svg"); }
	#mobil-menu ul li a.menu-pfeil::after {content: url("../images/pfeil-menu-zu.svg"); }
	
	/* ~~~ Menu 2. Ebene ~~~ */
	#mobil-menu ul li ul {display:none; top:0px; left:0; border-bottom:1px solid #cecece;}
	#mobil-menu ul li ul li {width:100%;}
	#mobil-menu ul li ul li a, #mobil-menu ul li ul li a:link, #mobil-menu ul li.akt ul li a, #mobil-menu ul li.akt ul li a:link {padding:0.3em 15px 0.3em 15px; white-space:pre-wrap; border:none; color:#000;}
	#mobil-menu ul li ul li a:hover, #mobil-menu ul li.akt ul li a:hover, #mobil-menu ul li.akt ul li.akt a, #mobil-menu ul li.akt ul li.akt a:link {color:#ec691f; }
	#mobil-menu ul li ul li a.menu-but-sub::after {top:7px; right:15px; content: url("../images/pfeil-menu-auf-sub.svg"); }
	#mobil-menu ul li ul li a.menu-pfeil-sub::after {content: url("../images/pfeil-menu-zu-sub.svg"); }
	#mobil-menu ul li ul li:first-child a:link {display:block;}
	
	/* ~~~ Menu 3. Ebene ~~~ */
	#mobil-menu ul li ul li ul, #mobil-menu ul li.akt ul li ul {display:none; border-bottom:none;}
	#mobil-menu ul li.akt ul li.akt ul {display:block; }
	#mobil-menu ul li ul li ul li a, #mobil-menu ul li ul li ul li a:link, #mobil-menu ul li.akt ul li.akt ul li a, #mobil-menu ul li.akt ul li.akt ul li a:link {color:#717171; border:none; font-weight:normal; padding:0.15em 0em 0.25em 30px; }
	#mobil-menu ul li.akt ul li.akt ul li a::before {content: "";}
	#mobil-menu ul li ul li ul li a:hover, #mobil-menu ul li.akt ul li.akt ul li a:hover, #mobil-menu ul li.akt ul li.akt ul li a:focus, #mobil-menu ul li.akt ul li.akt ul li.akt a,#mobil-menu ul li.akt ul li.akt ul li.akt a:link {color:#ec691f; }
	#mobil-menu ul li.akt ul li.akt ul li.akt a::before {color:#ec691f; content: "> ";}
	
/* ~~~ Abdeckung ~~~ */
#abdeckung {position:fixed; top:0; left:0; z-index:500; width:100%; height:100%; background: rgba(0,0,0,0.0); display:none;}

main {padding:0 20px 0 20px;}
#breadcrumbs {display:none;}
#content, body.warenkorb #content {width:100%; margin-left:0; margin-top:15px;}

.beitrag-standard figure.ganze-breite {margin:5px 0;}
.filter-auswahl, .warenkorb-cont, .direkt-eingabe, #login-cont, #angaben-cont {margin:0 0 10px 0;}
#schnellformular {margin:0 auto 10px auto;}

.beitrag-liste.bannerbild.fair-fashion:first-child {margin-top:20px;}
.beitrag-liste.artikelgruppe {width:23.8%; margin:0 1.6% 15px 0;}
.beitrag-liste.artikelgruppe:nth-child(4n) {margin:0 0 15px 0;}

.herstellinfo a:link, .beitrag-faq {width:100%;}

#auflistung h2, #auflistung .gruppenrahmen p {margin-bottom:10px;}

.danke #auswahl {-webkit-flex-flow:column; flex-flow:column; }

.fancybox-button--close::after, .fancybox-button--close::before {height: 4px; width: 30px; top: calc(50% - 6px); left: calc(50% - 12px);}
}
@media screen and (max-width: 900px)  {
adress {width:35%; }
#logo-rahmen {width: 63%;}
#logo-rahmen figure {width: 14%; }
.fancybox-button--left, .fancybox-button--right {width:74px; }
.fancybox-placeholder::before {top:-10px; left:-10px; right:-10px; bottom:-10px;}
.fancybox-placeholder {width:96%; margin:0 auto;}
}
@media screen and (max-width: 800px)  {
.listen-cont.produktgruppe {-webkit-justify-content:space-between; justify-content:space-between; }
body.warengruppe .listen-cont, body.artikelgruppe.listen-cont, .listen-cont.warengruppe, .listen-cont.artikelgruppe {margin-top:20px;}	

.beitrag-liste.produktgruppe, .beitrag-liste.produktgruppe:nth-child(2n), .beitrag-liste.produktgruppe:nth-child(3), .beitrag-liste.button, .beitrag-liste.button:nth-child(2n), .beitrag-liste.button:nth-child(3), .beitrag-liste.zusatzangebot, .beitrag-liste.zusatzangebot:nth-child(2n), .beitrag-liste.zusatzangebot:nth-child(3) {margin:0 0 20px 0;}

.beitrag-liste.produktgruppe, .beitrag-liste.button, .beitrag-liste.zusatzangebot {width:48.5%; -webkit-justify-content:space-between; justify-content:space-between;}

.beitrag-liste.warengruppe, .beitrag-liste.artikelgruppe, .beitrag-liste.warengruppe:nth-child(4n), .beitrag-liste.artikelgruppe:nth-child(4n) {width:31.0%; margin:0 2.9% 20px 0;}
.beitrag-liste.warengruppe:nth-child(3n), .beitrag-liste.artikelgruppe:nth-child(3n) {margin:0 0 20px 0;}

.detailbild-cont {margin-top:10px;}
.detailbild-cont .detailtext {margin-top:30px;}

.fancybox-placeholder::before {background:none; position:absolute; top:0; left:0; right:0; bottom:0;}

.flex-direction-nav, .flex-control-paging li a {display:none; }
}
@media screen and (max-width: 700px)  {
#header-oben-menu {height:auto; height:100%; padding:5px 7px 5px 80px;}
#auflistung {webkit-column-count:2; -moz-column-count:2; column-count:2; }
}
@media screen and (max-width: 600px)  {
body {font-size:105%;}
#header-oben {background:#323232;}
#header-oben-menu li a, #header-oben-menu li a:link, #header-oben-menu li a:visited {color:#fff;}

h1 {font-size:160%; line-height:160%; margin:10px 0;}
h2 {font-size:140%; line-height:140%; margin:7px 0;}

.detailbild-cont {display:inline-block; width:45%; margin:0 2% 30px 0; vertical-align:top;}
.detailtext {width:52%; display:inline-block; margin:30px 0;}

#container-bestandteile h1 {font-size:140%;;}
#bestellung table, #bestellung thead, #bestellung tbody, #bestellung th, #bestellung td, #bestellung tr, #bestandteile table, #bestandteile thead, #bestandteile tbody, #bestandteile th, #bestandteile td, #bestandteile tr {display: block; margin:10px 0 10px 0; }	
#bestellung thead tr, #bestandteile thead tr  {position:absolute; top:-9999px; left:-9999px;}
#bestellung tr, #bestandteile tr {border:none; }
#bestellung td, #bestandteile td {border:none; border-bottom:1px solid #dbdbdb; position:relative; padding:10px 0 10px 130px; }
#bestellung td::before, #bestandteile td::before {color:#000; position:absolute; padding:0; bottom:0; left:50px; top:42%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:120px; padding-right:0px;  text-align:right; }
#bestellung .menge {width:60px; border:1px solid #ccc; padding:8px; margin-left:0px;}	
#bestellung td:nth-of-type(1)::before {content:"Bezeichnung:";}
#bestellung td:nth-of-type(2)::before {content:"Menge:"; }
#bestellung td:nth-of-type(3)::before {content:"ArtNr.:"; }
#bestellung td:nth-of-type(4)::before {content:"Bio:"; }
#bestellung td:nth-of-type(5)::before {content:"Neu:"; }
#bestellung td:nth-of-type(6)::before {content:"Preis EURO:";  }
#bestellung td:nth-of-type(7)::before {content:"Gesamt:"; } 
#bestandteile td:nth-of-type(1)::before {content:"Art:";}
#bestandteile td:nth-of-type(2)::before {content:"Beschreibung:"; }
#bestandteile td:nth-of-type(3)::before {content:"Wert.:";}

#bestellung tfoot tr td:before {content:"" !important;} 
#bestellung tfoot tr td:first-child {padding:10px 0 10px 10px;}
#bestellung tfoot tr td:last-child {font-size:120%;}
#bestellung td.preis {text-align:left;}

#bestellung td .bild {float:none; width:170px; }
#bestellung td .info, #bestellung td .papierkorb {width:40px;}
#bestellung td .info {margin-right:6px; margin-top:-7px;}
#bestellung td .papierkorb {margin-right:10px; margin-top:-5px;}
#bestellung .menge {margin-top:-10px;}
.artikelnummer {color:#000;}

.bildblender a:link, .anleitung {margin:10px 0px 20px 0;}

.mitte {text-align:left;}


#footer-menu-oben ul, #footer-main-menu ul, #pfeil-nach-oben {padding-right:0; -webkit-justify-content:center; justify-content:center; }
#footer-menu-oben {padding:5px 0 10px 0;}
#footer-main-menu {border-bottom:1px solid #b6b6b5; padding:10px 0 15px 0;}

adress {width: 100%; border-right:none; padding-bottom:15px;}
adress h2 {text-align:center; padding:10px 2px 5px 4px; margin:0;}
adress p {text-align:center; padding:0 2px 0 4px; margin:0; line-height:1.8em;}	

#logo-rahmen {width: 100%; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; border-top:1px solid #b6b6b5; padding:10px 0;}
#logo-rahmen figure {width: 15%; margin:0 2%;}

.listen-cont.warengruppe, .listen-cont.artikelgruppe {-webkit-justify-content:space-between; justify-content:space-between; margin-top:15px;}
.beitrag-liste.warengruppe, .beitrag-liste.artikelgruppe, .beitrag-liste.warengruppe:nth-child(4n), .beitrag-liste.artikelgruppe:nth-child(4n), .beitrag-liste.warengruppe:nth-child(3n), .beitrag-liste.artikelgruppe:nth-child(3n) {width:48.5%; margin:0 0 15px 0;}

.beitrag-standard table, .beitrag-standard thead, .beitrag-standard tbody, .beitrag-standard th, .beitrag-standard td, .beitrag-standard tr, #angaben-cont table, #angaben-cont tbody, #angaben-cont tr, #angaben-cont td, #angaben-cont th {display:block; width: 100%;}
.beitrag-standard th {padding:3px 5px 3px 5px; }
.beitrag-standard thead tr {position: absolute; top: -9999px; left: -9999px; padding-bottom:10px;}
.beitrag-standard td {position:relative; padding:5px 0 0 0; }
.beitrag-standard td:first-child { width:95%; text-align:left; padding:0; margin-bottom:0.0em;}

#login-cont td:first-child, #angaben-cont td:first-child, .email {text-align:left; width:100%; }
.dropdown, .login, #angaben-cont .login {width:100%; margin-bottom:5px;}

.submit, input, select, textarea {width:100%;}
}
@media screen and (max-width: 550px)  {
.shopmenu ul li {margin:1px 0; width:100%; }

.detailbild-cont {display:block; width:100%; margin:0 2% 10px 0; }
.detailbild-cont .detailbild {width:80%; margin:10px 0 10px 10%;}
.detailtext {width:94%; margin:10px 0 10px 3%;}
.detailtext, .beschreibung h1 {text-align:center; }
.warenkorb-but, .bestellung {width:100%; margin-top:20px;}
.pictorahmen {-webkit-justify-content:center; justify-content:center; }
.beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link {left:-200px; }
.faq-aufklapp h2, .but-size label {color:#323232;}
}
@media screen and (max-width: 500px)  {
#header-unten {padding:10px 0 20px 0;}
#header-oben-menu li a, #header-oben-menu li a:link, #header-oben-menu li:last-child a {padding:3px 7px; }
#header-unten-wrapper {height:auto; height:100%; position:relative; }
#icon-wrapper {top:5px; }
#search-field {top:70px; }
#menu-cont {-webkit-align-items:flex-end; align-items:flex-end;}

#mobil-menu {top:70px; min-width:100%; }

main, body.home main, body.warengruppe main {padding:0 10px 0 10px;}

.beitrag-standard .banner-logo {top:10%; top:10px; left:10px; z-index: 480; opacity:0.9;}

.beitrag-liste.produktgruppe, .beitrag-liste.zusatzangebot, .beitrag-liste.button, .beitrag-liste.produktgruppe:nth-child(3n), .beitrag-liste.zusatzangebot:nth-child(3n), .beitrag-liste.button:nth-child(3n) {margin:0 10px 10px 0;}
.beitrag-liste.produktgruppe:nth-child(2n), .beitrag-liste.zusatzangebot:nth-child(2n), .beitrag-liste.button:nth-child(2n) {margin:0 0 10px 0;}
.beitrag-liste.bannerbild, .listen-cont.produktgruppe, .listen-cont.bannerbild.fair-fashion, .listen-cont.bannerbild.fair-fashion:first-child {margin:10px 0;}

.faq-aufklapp h2 {padding:10px 0px; bottom:0; font-size:100%; text-align:center;}
.js-faq-content {text-align:left;}

.groesse ul, #auswahl {-webkit-justify-content:center; justify-content:center; }
#auswahl .submit {margin:20px 20px 20px 0;}

.beitrag-standard .bild.hochformat, .beitrag-standard .bild.links, .beitrag-standard .bild.rechts, .js-faq-content figure {width:100%; float:none; margin:0 0 7px 0;}

.beitrag-standard .banner-logo {top:10%; top:10px; left:10px; z-index: 480; opacity:0.9;}

#footer-mitte {-webkit-flex-direction:column; flex-direction:column; padding:0;}	
}
@media screen and (max-width: 480px)  {
#mobil-menu {max-width:100%; }
.beitrag-liste.button h2, .beitrag-liste:hover.button h2 {white-space:pre-wrap; font-size:95%;}
.filter-auswahl ul {-webkit-justify-content:flex-start; justify-content:flex-start; }
#auflistung {webkit-column-count:1; -moz-column-count:1; column-count:1; -moz-column-gap:0; -webkit-column-gap:0.0em; column-gap:0.0em;}
#auflistung .gruppenrahmen {margin-left:15px; display:block;}
.beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link {left:-180px; }
}
@media screen and (max-width: 400px)  {
#search-field {width:300px;}
.menge {width:50px; margin:0 1px;}
.beitrag-liste p.mehrlink a, .beitrag-liste p.mehrlink a:link {left:-160px; }
}
@media screen and (max-width: 360px)  {
body.warengruppe .listen-cont, .listen-cont.warengruppe, body.artikelgruppe .listen-cont, .listen-cont.artikelgruppe {margin-top:20px;}

.beitrag-liste, .beitrag-liste.produktgruppe, .beitrag-liste.button, .beitrag-liste.zusatzangebot, .beitrag-liste.warengruppe, .beitrag-liste.warengruppe:nth-child(4n), .beitrag-liste.warengruppe:nth-child(3n), .detailbild-cont .detailbild, .beitrag-liste.produktgruppe:nth-child(2n), .beitrag-liste.zusatzangebot:nth-child(2n), .beitrag-liste.button:nth-child(2n), .beitrag-liste.produktgruppe:nth-child(3n), .beitrag-liste.button:nth-child(3n), .beitrag-liste.zusatzangebot:nth-child(3n) {width:100%; margin:0 0 10px 0;}
.beitrag-liste.artikelgruppe, .beitrag-liste.artikelgruppe:nth-child(4n), .beitrag-liste.artikelgruppe:nth-child(3n) {width:100%; margin:0 0 10px 10px;}

.beschreibung {height:auto;}
.anzahl {display:block; }
.menge {width:50px; margin:0 10px;}

}
@media print {
body {background:#fff;color:#000; font: normal 0.85em/1.4em Open Sans, Sans-Serif, Arial, Verdana, Helvetica; }
h1, h2, h3, #warenkorb, #breadcrumbs a, #breadcrumbs a:link, adress h2, #footer-menu-oben li a, #footer-main-menu li a, .warenkorb-but, .shopmenu ul li a, .submit, #bestellung th, #bestellung td::before, #bestandteile th, #bestandteile td::before, .rot, .gruen, .bildblender a:link, .paginator li a, .danke a {font-family: 'TradeGothic', Arial, Verdana, sans-serif; color:#000;}
#header-oben-menu ul, #icon-wrapper, #search-field, #menu-cont, #desktop-u-menu, .filter-auswahl, #footer-header, #breadcrumbs, #footer-main-menu-wrapper, #pfeil-nach-oben-cont, .paginator, #logo-rahmen {display:none;}
.beitrag-liste p.mehrlink a {background:none;}
nav, header, header-unten-wrapper, main, #content-wrapper, #content, .beitrag-standard, .beitrag-liste {width:100%; padding:0; margin:0;}
#logo {width:35%; margin-left:10px;}
footer {border-top:1px solid #000;}
adress, adress p, adress p a:link {width:100%; color:#000; border-bottom:none; text-aling:center;}
}

.Rabattanzeige {
	line-height:1.1em;
	background-color:#D6D6D6;
	padding:10px;
	width:55%;
	min-width:120px;
	margin:0 auto;
}

.alsDetail .Rabattanzeige {
	margin:0 0 20px 0;
}

.stammkundenhinweis {
	border:1px solid #ec691f;
	background-color:#f6f6f6;
	padding: 1em;
}
.stammkundenhinweis p {
	text-align:center;
	font-weight:bold;
	line-height:2em;
	margin-bottom:1em;
	font-size:1.2em;
}
.stammkundenhinweis a, .stammkundenhinweis a:link, .stammkundenhinweis a:visited {
	color:#FFF;
	background-color:#ec691f;
	padding:10px 20px 10px 20px;
	border:1px solid #ec691f;
	border-radius:8px;
	text-decoration:none;
	line-height:3em;
	font-size:.9em;
}
.stammkundenhinweis a:hover, .stammkundenhinweis a:active, .stammkundenhinweis a:focus {
	background-color: #969695;
	border-color: #969695;
}
.stamm1 {
	height:30px;	
}
#angaben-cont .dummyinput {
	margin-bottom:5px;
	border: 1px solid #d4d4d4;
	background-color:#FFF;
	border-radius:5px;
	padding: 7px 10px;
	box-shadow: inset 0 2px 1px 0 rgba(0,0,0,0.1);
	width:300px;
}
@media screen and (max-width: 600px) {
	#angaben-cont .dummyinput {width:100%;}
}

#myname {display:none;}

.cookie-alert {
	position: fixed;
	left: 50%;
	width:500px;
	transform:translateX(-50%);
  max-width: 100%;
  margin: 30px auto;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: rgba(0,0,0,0.4) 0px 7px 7px 7px;	
  border-radius: 10px;
  z-index:100000000;
  max-height: calc(100vh - 30px);
  overflow:auto;
}
.cookie-alert h1, .cookie-alert h2, .cookie-alert h3, .cookie-alert p {text-align:center;line-height:2em;}

.cookie-alert h1 {
	color:#EC691F;
	font-weight:bold;
	font-size:2em;
	border-bottom:1px solid #EC691F;
}
.cookie-alert h2 input {
	background-color: #EC691F;
	padding:8px 15px;
	color:#FFF;
	font-size:1.1em;
	font-weight:bold;
	width:auto;
	margin-top:0.5em;
	border-radius:10px;
	border-width:0;
}
.cookie-alert p input {
	background-color: #FFF;
	font-size:1em;
	color:#EC691F;
	cursor:pointer;
	border:0;
	box-shadow:none;
}