/*----------------------------------------------------------------------------
RESET CSS
------------------------------------------------------------------------------*/
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

img {border:0;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
	margin:0;
	padding:0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/* orienta-regular - latin */
@font-face {
	font-family: 'Orienta';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/orienta-v5-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Orienta'), local('Orienta-Regular'),
			url('../fonts/orienta-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('../fonts/orienta-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			url('../fonts/orienta-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
			url('../fonts/orienta-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			url('../fonts/orienta-v5-latin-regular.svg#Orienta') format('svg'); /* Legacy iOS */
	}


/*----------------------------------------------------------------------------
Allgemein
------------------------------------------------------------------------------*/

html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color:#333; }
a:hover { color:#f7c500; }

/* IE7 image resizing
.ie7 img { -ms-interpolation-mode: bicubic; }

/* Labels ausrichten */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }



p {
	padding-bottom:15px;
}

.clear 	{
	clear:both;
	line-height:0;
	font-size:0;
	height:0;
}

.center {text-align:center;}
.right {text-align:right;}


h1,h2,h3,h4,h5,h6 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:normal;
	font-size:22px;
	margin:0;
	padding:15px 0 15px 0;
}
h1,h2,h3,h4 {
	color:#000;
}
h5,h6 {
	color:#fff;
}




.w20 {width:20%; float:left;}
.w25 {width:25%; float:left;}
.w33 {width:33.3%; float:left;}
.w40 {width:30%; margin-left:10%; float:left;}
.w48 {width:48%; margin-right:2%; float:left;}
.w50 {width:50%; float:left;}
.w55 {width:50%; margin-right:5%; float:left;}
.w60 {width:60%; float:left;}
.w70 {width:70%; float:left;}


strong {font-weight:bold;}
.abstandRight {margin-right:10%;}

.blocksatz {text-align:justify;}
/*----------------------------------------------------------------------------
Content
------------------------------------------------------------------------------*/

body {
	font-family: 'Orienta', sans-serif;
	font-size:13px;
	line-height:22px;
	color:#626262;
	margin:0;
	padding:0;
}


.rahmen {
	width:930px;
	height:auto;
	text-align:left;
	margin:0 auto;
}

#logo {float:left; width:368px;}
#header  {float:left; width:562px;}
#sprache {background-color:#dfdfdf; padding:6px 6px 0px 6px; text-align:right; width:143px; float:right; margin:20px 0 50px 0;}
#sprache img {border:solid 1px #bdbdbd; margin:0 5px 0 5px;}
#sprache a {text-decoration:none;}


a.button {background-color:#2e2f30; color:#FFFFFF; padding:4px 10px 4px 10px; font-size:14px; text-decoration:none;}
a:hover.button {background-color:#FFFFFF; color:#000000;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bild a:hover {text-decoration:none;}
.bild span { background-color:#000000; color:#FFFFFF; padding:4px 10px 4px 10px; position:relative; top:-100px; font-size:14px;}
.bild img {width:100%; height:auto;}

.bild:hover span { 
background-color:#FFFFFF; color:#000000;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.bild:hover img {
    opacity: 0.3;       /* modern browser */  
    -moz-opacity: 0.3;  /* older Mozilla browser */  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 in Standard Compliant Mode */  
    filter:alpha(opacity=30); /* IE5.x -7.0 */  
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}



.mehr {margin-top:10px; text-align:right;}
.mehr a {padding:4px 10px 4px 10px; text-decoration:none;
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
.mehr a:hover {
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */


	}

.produkt { width:90%; overflow:hidden; height:375px;}
.produkt strong {background-color:#000000; color:#FFFFFF; padding:4px 10px 4px 10px;}

.item div:hover {color:#0044CC;}


.angebote {width:70%; margin:0 0 50px 0;}
.angebote img {width:100%; height:auto;}

.angebote h3 { border-bottom:solid 1px #CCCCCC; margin-bottom:10px;}

#breadcrumb {font-size:10px; line-height:12px; color:#6F6F6F;}
#breadcrumb a { font-size:10px; line-height:12px; color:#6F6F6F;}


#footer {background-color:#2e2f30; padding:20px 0 20px 0; color:#cdcdcd; margin-top:40px;} 
#footer strong {color:#FFFFFF; font-weight:normal;}

.footerKasten {float:left; width:24%; overflow:hidden; border-top:solid 1px #8e8e8e; margin:20px 1% 20px 0;}
#footer a {color:#cdcdcd; text-decoration:none;}
#footer a:hover {color:#fff;}


.borderGrauT {border-top:solid 1px #8e8e8e; padding-top:10px;}
#footerNavi a {padding:4px 13px 4px 0;}
#footerNavi li {float:left;}

.footerKasten img { margin-top:40px;}




.controls {
	display: inline-block;
	width:25%; 
	margin-right:5%;
	float:left;
	vertical-align: top;
}

.controls li{
	cursor: pointer;
	list-style-type:none;
	border-bottom: 1px solid #2e2f30; 
	text-decoration: none; 
	padding: 3px 10px;
}

.controls li.active{
	background:#2e2f30; color:#FFFFFF;
}

#Grid{
	width: 70%;
	float:left;
}

#Grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}

#Grid .mix{
	display: none;
	opacity: 0;
}

#Grid .gap{
	display: inline-block;
	width: 200px;
}
		
		

#content ul {padding-left:30px; padding-bottom:15px;}
#content li {list-style:disc;}

.Beige {background-color:#F5F5DC;}
.Graugrün {background-color:#b8ceb9;}
.Grau {background-color:#d9d9d9;}
.Dunkelgrau {background-color:#939393;}
.Blau {background-color:#0000ff;}
.Grau-Weiss {background-color:#F0ffF0;}
.Grün {background-color:#008000;}
.Hellgelb {background-color:#ffe4e1;}
.Hellgrau {background-color:#f5f5f5;}
.Hellgrün {background-color:#9acd32;}
.Marron {background-color:#a0522d;}
.Ocker-Gelb {background-color:#daa520;}
.Oliv-grün {background-color:#9acd32;}
.Reinweiss {background-color:#ffffff;}
.Rot {background-color:#ff0000;}
.Schwarz {background-color:#000;}
.Silbergrau {background-color:#c0c0c0;}
.Weiss {background-color:#fff;}


.mobil {display:none;}


sup { vertical-align: top; font-size: 0.6em; top: -0.5em; position: relative; }


.neuheiten {background-color:#ff0000; color: #fff; font-size: 26px; line-height: 32px; padding: 5px 10px; text-transform: uppercase; font-weight: bold;}

/*------------------------------------*\
    Form
\*------------------------------------*/


form label, form select, form input, form textarea {float:left;}
form label {width:100%;}

form select, form input {width:90%; margin-bottom:15px; padding:8px 0 8px 0;}
form textarea {width:95%; margin-bottom:15px; padding:8px 0 8px 0;}

form select {width:10%;}

.unsichtbar {display:none;}
.wichtig {color:#FF0004;}
.erfolgreich {color:#00EF13;}
form input[type="submit"] {width:230px; background-color:#2e2f30; color:#FFFFFF; font-weight:bold; border:0; cursor:pointer;}
input[type="checkbox"] {width: 25px; display: inline-block;}


@media screen and (max-width: 960px) {	
	.rahmen { width:96%;}
	#logo {width:35%;}
	#header  {width:65%;}
	#footer .w70, #footer .w30 {width:100%;}
	.footerKasten img { width:100%; height:auto;}
	.w55, .w40 {width:100%; clear:left; margin:0;}
	
}
@media screen and (max-width: 768px) {	
	#logo {width:50%; clear:none;}
	#header  {width:50%; clear:none;}
	
	.footerKasten {width:50%; border-bottom:0;}
	.footerKasten img { width:auto; height:auto;}
	
	#footerNavi {border-top:solid 1px #8e8e8e; border-bottom:solid 1px #8e8e8e; margin-bottom:10px; padding:4px 0 4px 0;}
	
	.angebote {width:100%;}
	
}
@media screen and (max-width: 600px) {	
	.w48, .w50 {width:100%;clear:both;}
	.w33 {width:100%;clear:both;}
	#filter {float:none; width:100%; margin-right:0%;}
	#grid {float:none; width:90%; margin-left:10%;}
}
@media screen and (max-width: 500px) {
	.footerKasten {width:100%; border-bottom:0; height:auto;}
	.footerKasten img { margin:20px 0 0 20px;}
	#logo {float:none; width:100%; text-align:center;}
	#header  {float:none; width:100%;}
	#sprache {margin:0 0 10px 0;}
	.nav {position:absolute !important; top:0 !important; right:0 !important;}
	
	.mobil {display:block;}
	.mobil .icon {width:33%; float:left;}
	.mobil img {margin:0;}
	
	
	.controls { width:100%; float:none; margin:0; display:none;}
	#Grid { width:100%; float:none; margin:0;}
	
}

/*------------------------------------*\
    Navigation
\*------------------------------------*/
.nav {
	position:relative;
	z-index:999;
}
	
.nav-list {
	text-align:left;
}
.nav-item {
	float:right;
	*display:inline;
	zoom:1;
	position:relative;
}
.nav-item a {
	display:block;
	color:#FFF;
	font-size:14px;
	padding:4px 10px;
	background:#2e2f30;
	text-decoration:none;
	border-bottom:3px solid #fff;
}

a.over {
	background:#fff;
	color:#2e2f30;
	border-bottom:3px solid #000;
}

.nav-item > a:hover {
	background:#fff;
	color:#2e2f30;
	border-bottom:3px solid #000;
}
.nav-item:hover .nav-submenu {
	display:block;
}
/* Navigation submenu */
.nav-submenu {
	display:none;
	position:absolute;
	left:0;
	width:220px;
}
.nav-submenu-item a {
	background:#000;
	border-bottom:1px solid #666;
	display:block;
	padding:4px 10px;
}
.nav-submenu-item a:hover {
	background:#ec7404;
}
/* Mobile navigation */
.nav-mobile {
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	background:#2e2f30 url(../bilder/menue.png) no-repeat center center;
	background-size:18px;
	height:50px;
	width:50px;
}
/* Mobile navigation, clickable area for revealing <ul> */
.nav-click {
	position:absolute;
	top:0;
	right:0;
	display:none;
	border-left:1px solid #fff;
	height:49px;
	width:50px;
	cursor:pointer;
}
.nav-click i {
	display:block;
	height:48px;
	width:48px;
	background:url(../bilder/drop.png) no-repeat center center;
	background-size:20px;
}
.nav-click:hover {
	background-color:#000
}
.nav-rotate {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}



/*------------------------------------*\
    Navigation Responsiv
\*------------------------------------*/

@media only screen and (min-width: 100px) and (max-width: 890px) {
	.nav-mobile {
		display:block;
	}
	.nav {
		width:100%;
		padding:50px 0 0;
		position:relative;
		display:inline-block;
	}
	.nav-list {
		display:none;
	}
	.nav-item {
		width:100%;
		float:none;
	}
	
	
	.nav-item > a {
		padding:15px;
	}
	

	.nav-item > a:hover {
		background:#dedede;
		color:#2e2f30;
		border-bottom:3px solid #000;
	}

	.nav-click {
		display:block;
	}
	.nav-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
	.nav-item:hover .nav-submenu {
		display:none;
	}
	.nav-submenu {
		position:static;
		width:100%;
	}
}