@charset "utf-8";

html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

body {	 
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Verdana",sans-serif;
	font-size: 16px;
	line-height: 1.3;
	background-color: #70685d;
	color: #d4d2cf;
	height: 100%;
	overflow-x: hidden;
}	 

.show-on-mobile { display: none !important; }

.smalltext { font-size: 80%; }

.bigtext { font-size: 125%; } 

.button {
	-webkit-appearance: none;
	border: none;
	font-family: "Verdana",sans-serif;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	background-color: #d4d2cf;
	color: #70685d;
	padding: 8px 25px 8px 25px;
	border-radius: 3px;
}

.button:hover { background-color: white; }

/**** HEADER ****/

.header {
	box-sizing: border-box;
	position: fixed;
	z-index: 99;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 25px 40px 35px 40px;
	background: linear-gradient(
		to bottom,
	rgba(112,104,93,1) 0%,
	rgba(112,104,93,0.5) 80%,
	rgba(112,104,93,0) 100%	); 
}

.startseite .header { 
	background: linear-gradient(
		to bottom,
	rgba(0,0,0,1) 0%,
	rgba(0,0,0,0.5) 70%,
	rgba(0,0,0,0) 100%	); 
	); 
}

.header .logo {
	display: inline-block;
	width: 500px;
}	

.header .menu {
	position: absolute;
	right: 40px;
	top: 60px;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	font-weight: bold;
}

.header .menu a {
	text-decoration: none;
	margin-left: 3pxx;
}

.header .menu a:hover { color: white; }

.header .menu .stern { width: 13.9px; }

.header .instagram-icon { 
	position: relative;
	top: 5px;
	width: 22px; 
	margin-left: 4px;
}

.header .menuicon {
	position: absolute;
	right: 40px;
	top: 65px;
	display: none;
}

.header .suchformular { 
	position: absolute;
	right: 40px;
	top: 25px;
}

.header .suchformular .suchfeld { 
	-webkit-appearance: none;
	border: none;
	padding: 5px;
	background-color: #d4d2cf;
	border-radius: 4px;
	font-family: "Verdana",sans-serif;
	color: #70685d;
	font-size: 14px;
	font-weight: 500;
	width: 200px;
}

.startseite .header .suchformular .suchfeld { color: black; }

.header .suchformular .lupe { 
	position: absolute;
	right: 5px;
	top: 4px;
	width: 19px;
	height: 19px;
	cursor: pointer;
}

.header .suchformular .lupe path { fill: #70685d; }

/**** FOOTER ****/

.footer {
	font-size: 11px; 
	text-align: center;
	padding: 25px 40px;
}

.startseite .footer { 
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.5) 0%,
		rgba(0,0,0,0.494) 8.1%,
		rgba(0,0,0,0.476) 15.5%,
		rgba(0,0,0,0.448) 22.5%,
		rgba(0,0,0,0.412) 29%,
		rgba(0,0,0,0.37) 35.3%,
		rgba(0,0,0,0.324) 41.2%,
		rgba(0,0,0,0.275) 47.1%,
		rgba(0,0,0,0.225) 52.9%,
		rgba(0,0,0,0.176) 58.8%,
		rgba(0,0,0,0.13) 64.7%,
		rgba(0,0,0,0.088) 71%,
		rgba(0,0,0,0.052) 77.5%,
		rgba(0,0,0,0.024) 84.5%,
		rgba(0,0,0,0.006) 91.9%,
		rgba(0,0,0,0) 100%
	); 
 }

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer .stern { width: 11px; margin-left: 3px; margin-right: 3px; }

/**** MAIN ****/

.main {
	box-sizing: border-box;
	position: relative;
	padding: 150px 30px 100px 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-slide {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.main h1 { 
	text-align: center; 
	font-size: 22px;
}

.main h1 a { text-decoration: none; }
.main h1 a:hover { color: white; }

.startseite .stoerer {
	position: absolute;
	top: 150px;
	right: 200px;
	background-color: #ff2626;
	color: white;
	width: 250px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 50%;
}

/**** GRID ****/

.grid {
	max-width: 1197px;
	min-height: 509px;
	margin: auto;
	font-size: 0;
	text-align: center;
}

.grid .inner {
	margin-left: -9px;
	margin-right: -9px;
}

.startseite .grid {
	max-width: 972px;
} 

.grid-element {
	display: inline-block;
	vertical-align: top;
	width: 225px;
	text-align: center;
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	text-decoration: none;
	margin: 5px 9px;
	color: #d4d2cf;
}

.grid-element.produkt { width: 155px; }

.grid-element img {
	 border: 2px solid #d4d2cf;
	 border-radius: 6px; 
	 width: 100%;
}

.grid-element:hover img { border: 2px solid white; filter: brightness(120%); }

.footnote {
	text-align: center;
	font-size: 16px; 
	font-weight: bold;
	margin-top: 10px;	
	margin-bottom: 15px;	
	color: #F0FF40;
}

/**** PRODUKT-DETAILS ****/

.produkt-details {
	font-size: 0;
	max-width: 972px;
	margin: auto;
}

.produkt-details .imageblock {
	display: inline-block;
	width: 45%;
	vertical-align: top;
}

.produkt-details .imageblock .bigimage { 
	display: none; 
	border: 2px solid #d4d2cf;
	border-radius: 6px; 
}

.produkt-details .imageblock #bigimage-0 { display: block; }

.produkt-details .imageblock .thumbs {
	margin-top: 15px;
	margin-left: -10px;
}

.produkt-details .imageblock .thumbs .thumb {
	display: inline-block;
	vertical-align: top;
	width: calc(20% - 14px);
	margin-left: 10px;
	margin-bottom: 10px;
	border: 2px solid #d4d2cf;
	border-radius: 6px; 
}

.produkt-details .imageblock .thumbs #thumb-0 { display: none; }

.produkt-details .imageblock .thumbs .thumb:hover { border: 2px solid white; filter: brightness(120%); }

.grid-element:hover img { border: 2px solid white; filter: brightness(120%); }

.produkt-details .infoblock {
	box-sizing: border-box;
	display: inline-block;
	width: 55%;
	vertical-align: top;
	font-size: 16px;
	line-height: 1.3;
	padding-left: 30px;
}

.produkt-details .infoblock .breadcrumbs {
	font-weight: 600;
	margin-bottom: 15px;
}	

.produkt-details .infoblock .breadcrumbs a { text-decoration: none; }
.produkt-details .infoblock .breadcrumbs a:hover { color: white; }

.produkt-details .infoblock h1 {
	text-align: left;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	margin-top: 0px;
	margin-bottom: 25px;
}

.produkt-details .infoblock table {
	margin-bottom: 25px;
}

.produkt-details .infoblock table th { 
	min-width: 150px; 
	text-align: left;
	vertical-align: top;
}

.produkt-details .infoblock table td {
	padding-bottom: 8px;
	vertical-align: top;
} 

.produkt-details .infoblock table td p {
	margin: 0;
}

.produkt-details .related {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.3;
}

.produkt-details .related p {
	margin-bottom: 8px;
}

.produkt-details .related a { text-decoration: none; }
.produkt-details .related a:hover { text-decoration: underline; }

.produkt-details .related .imagelink {
	display: inline-block;
	margin-right: 3px;
	margin-bottom: 6px;
}

.produkt-details .related .imagelink img {
	width: 100px;
	border: 2px solid #d4d2cf;
	border-radius: 6px; 
}

.produkt-details .related .imagelink:hover img { border: 2px solid white; filter: brightness(120%); }

/**** TEXT ****/

.text {
	box-sizing: border-box;
	max-width: 1197px;
	min-height: 509px;
	padding-top: 10px;
	padding-bottom: 50px;
}
	
/**** SMALL SCREENS ****/

@media only screen and (max-width: 1000px) {	
	.header .menu { display: none; }
	.header .suchformular { display: none; }
	.header .menuicon { display: block; }
}

@media only screen and (max-width: 800px) {	
	.produkt-details .imageblock { width: 100%; max-width: 400px; }
	.produkt-details .infoblock { width: 100%; padding-left: 0px; margin-top: 10px; }
}

@media only screen and (max-width: 660px) {
	.header { padding: 20px 25px; }
	.header .logo { width: 78vw; }
	.header .menuicon { right: 25px; top: 9.3vw; }
}

@media only screen and (max-width: 540px) {
	.grid .inner { margin-left: -7px; margin-right: -7px; }
	.grid-element { width: calc(50% - 14px); font-size: 12px; margin: 5px 7px; }
	.grid-element img { margin-bottom: 2px; }
}

@media only screen and (max-width: 430px) {
	body, .produkt-details .infoblock, .produkt-details .related { font-size: 14px; }
	.main {	padding: 80px 15px 60px 15px; }
	.header { padding: 15px; }
	.header .menuicon { right: 15px; top: 8.3vw; }
	.produkt-details .infoblock h1 { font-size: 18px; }
	.produkt-details .infoblock table th { min-width: 120px; }
}