@font-face{
	font-family: 'orbi';
	src: url('../font/Orbitron-Regular.ttf')format('truetype');
	font-weight: 600;
}
@font-face{
	font-family: 'Montserrat-Regular';
	src: url('../font/Montserrat-Regular.ttf')format('truetype');
}
:root{
	/*
	calc(minfont + (maxFont-minFont)*(maxScreen-minScreen)/(maxScreen-minScreen)
	= 40px font-size : 300px min-screen-size
	= 22px     "     : 1600px  max-screen
	*/
	--maxWidth: 1600px;
	--h1_font: calc(22px + (40	- 22)*(100vw - 300px)/(1600 - 300));
	--h2_font: calc(18px + (28 - 18)*(100vw - 300px)/(1600 - 300));
	--h3_font: calc(14px + (22 - 14)*(100vw - 300px)/(1600 - 300));
	--h5_font: calc(12px + (18 - 12)*(100vw - 300px)/(1600 - 300));
	--p_font: calc(14px + (18 - 14)*(100vw - 300px)/(1600 - 300));
	--small_font: calc(10px + (16 - 10)*(100vw - 300px)/(1600 - 300));
	--red: #c7000d;
	--blue: #3e628f;
	--softGrey: #f5f4f2;
}
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Montserrat-Regular', sans-serif;
	max-width: var(--maxWidth);
	margin: 0 auto;
	animation: fadeIn 1.5s;
}
@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
h1, h2, h3, p, small{
	pointer-events: none;
	hyphens:auto;
}
h1{
	font-weight: 400;
	font-size: var(--h1_font);/*check*/
	font-variant: small-caps;
	margin-bottom: 5%;
}
h2{
	letter-spacing: 2px;
	font-weight: 600;
	font-size: var(--h2_font);/*check*/
	font-variant: small-caps;
	margin-bottom: 2%;
}
h3{
	font-weight: 400;
  color: #cacaca;
	letter-spacing: 2px;
	font-size: var(--h3_font);
}
h4{
	letter-spacing: 2px;
	font-size: var(--h3_font);
	padding: 10px 0;/*media que*/ 
}
h5{
	letter-spacing: 2px;
	/* font-size: var(--h5_font); */
	font-size: 16px;
	color:#555;
	padding: 10px 0;/*media que*/ 
}
p{
	font-weight: 400;
	color: #555;
	font-size: var(--p_font);/*check*/
	line-height: calc(20px + (25 - 20)*(100vw - 300px)/(1600 - 300));/*check*/
	letter-spacing: 1px;
	padding-bottom: 15px;
}
.pStyle{
	font-weight: 400;
	font-size: var(--p_font);/*check*/
	letter-spacing: 1px;
	padding-bottom: 5px;
	margin: 0;
}
a{
	text-decoration: none;
	font-size: var(--p_font);
	color: #000;
}
.aStyle:hover{
	color: var(--red);
}
button, .btnStyle{
	background-color: var(--blue);
	border: none;
  color: #fff;
  padding:10px;
  text-align: center;
  text-decoration: none;
	border-radius:5px;
  font-size: 14px;
	font-variant: small-caps;
	cursor: pointer;
}
.btnShadow{
	box-shadow: 4px 6px 12px #bababa;
}
.btnShadow:active{
	box-shadow: none;
}
.centerLinkBox{
	width: 100%;
	margin-top: 50px;
	text-align: center;
}
.cartBtnError{
	color:var(--red);
}
small{
	font-size: 10px;
	letter-spacing: 1px;
}
/* img passt sich so parentElement an*/
img{
	width: 100%;
}
/*-----------------------------------------------------------*/
/*------------------- header defaults -----------------------*/
/*-----------------------------------------------------------*/
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #000;
	width: 100%;
}
header div:first-child{
	padding-left: 30px;
}
#menuBox{
	text-align: center;
}
#shopContainer{
	display: flex;
	align-items: center;
}
#cartContainer{
	text-align: right;
}
#cartContainer img{
	width: 40%;
}
#cartContainer span{
	margin-right: 10px;
}
#logoSVG{
	width: 48%;
}
#menuSVG{
	width:68%;
}
#logoSVG:hover, #menuSVG:hover{
	cursor:pointer;
}
@media only screen and (max-width: 768px){
	#cartContainer img{
		width: 35%;
	}
	#logoSVG{
		width: 48%;
	}
	#menuSVG{
		width: 58%;
	}
}
/*collapseMenu default */
#collapseMenu{
	z-index: 1;
	overflow: hidden;
	-webkit-display: flex;
	display: flex;
	justify-content: center;
}
#menu{
	max-height: 0;
	transition: max-height .4s ease-out;
	width: 100%;
}
#menu ul{
 	padding-bottom: 25px;
	transition: 0.2s;
	list-style: none;
}
#menu li{
	padding: 15px  0;
	text-align: center;
	font-variant: small-caps;
}
#menu li:nth-child(odd){
	background: var(--softGrey);
}
/* default hamburger animation */
#lineTop, #lineMid, #lineBot{
	fill: none;
	transition: stroke-dasharray .4s ease-out,
	stroke-dashoffset .4s ease-out;
}
.line1{
  stroke-dasharray: 55 186;
  stroke-width: 6;
}
.line2{
  stroke-dasharray: 55 55;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 55 186;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 55 186;
  stroke-dashoffset: -128;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 55;
  stroke-dashoffset: -27.5;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 55 186;
  stroke-dashoffset: -128;
  stroke-width: 6;
}
/*-------------------------------------------*/
/*------------ footer defaults---------------*/
/*-------------------------------------------*/
.footerSec{
	border-top: 1px solid #000;
	padding-top: 15px;
	margin-bottom: 5px;
	text-align: center;
}
.footerSec img{
	width: 100px;
	margin-bottom: 15px;
}
footer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 10px;
}
footer a{
	margin-right: 30px;
}
footer a:last-child{
	margin-right: 0;
}
@media only screen and (max-width: 768px){
	.footerSec img{
		width: 80px;
	}
	footer{
		flex-direction: column;
		margin-bottom: 0;
	}
	footer a{
		margin-bottom: 10px;
		margin-right: 0;
	}
}
/*-------------------------- table layout --------------------------*/
/*-------------------------- table layout --------------------------*/
/*-------------------------- table layout --------------------------*/
table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
	background: var(--softGrey);
  table-layout: fixed;/*ja*/ 
}
table caption{
	opacity: .2;
}
table th{
  padding: 15px 0;
  font-size: 14px;
	color: #555;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #000;
}
/*table th:last-child{
	text-align: right;
	padding-right: 20px;
}*/
table td{
  border-bottom: 1px solid #ddd;
  padding: 10px 15px;
	text-align: center;
	font-size: 14px;
	color: #555;
}
table td:last-child{
	text-align: right;
}
/*order.php/payment.php*/
.gesamtSum{
	width: 100%;
	padding-right: 10px; 
	text-align: right;
	font-size: 14px;
	margin-top: 10px;
}

/*-------------------------------------------*/
/*-------- form defaults --------------------*/
/*-------------------------------------------*/
.nlSection{
	background: var(--softGrey);
}
#nlEmail{
	background-color: #fff;
}
form{
	padding: 15px;
	width: 100%;
}
input[type=text],input[type=email]{
	width: 70%;
	height: 25px;
	margin: 5px 0 10px 0;
	border: transparent;
	background: var(--softGrey);
	text-indent: 5px;
	font-size: 14px;
}
input:focus{
	outline: none;
}
input:valid{
	background: var(--softGrey);
}
input[type=checkbox]{
	cursor: pointer;
	width: 15px;
	height: 15px;
	margin-top: 5px;
}
label{
	font-size: 10px;
	letter-spacing: 1px;
}
::placeholder{
	opacity: .5;
}
@media only screen and (max-width: 900px){
	input[type=text],input[type=email]{
		width: 70%;
	}
}
/*----------------------------------------------*/
/*---------------main defaults -----------------*/
/*----------------------------------------------*/
main{
	margin: 0 20px;
}
section{
	margin: 5vh 0 15vh;
}
.grid-2-columns{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.grid-2-columns div{
	 -ms-display: flex;
	 display: flex;
  flex-direction: column;
}
.grid-4-columns{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 20px;
}
.grid-4-columns div{
	display: flex;
	flex-direction: column;
}
.baseLine{
	display: flex;
	justify-content: space-between;
}
@media only screen and (max-width: 900px){
	.grid-2-columns{
  grid-template-columns: 1fr;
	}
	.grid-4-columns{
  grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 500px){
	.grid-4-columns{
  grid-template-columns: 1fr;
	}
}
/*----------------------------------------------*/
/*---------------index.php --------------------*/
/*----------------------------------------------*/
.mainImgBox{
	width: 70%;
	justify-self: end;
	margin-top: 15vh;
}
#parallaxContainer{
	width: 100%;
}
#parallaxBox{
	position: relative;
	background-image: url('../img/sets/wallArt1920.webp'); 
	height: 50vh;
	background-attachment: fixed; 
	background-position: center; 
	background-repeat: no-repeat;
	background-size: cover;
}
#parallaxBoxH2{
	position: absolute;
	bottom: 0%;
	left: 25%;
	width: 50%;
}
#parallaxBoxH2 h2{
	font-variant: small-caps;
	text-align: center;
	padding-top: 2%;
	color: #fff;
}
.btnBox{
	display: flex;
	align-items: center;
	padding: 20px 0 0;
	filter: url(#svgFilter);
}
@media only screen and (max-width: 900px){
  #parallaxBox{
		background-attachment: scroll;		 
	}
	.mainImgBox{
		width: 100%;
		justify-self:center;
		margin-top: 0;
	}
}
@media only screen and (max-width:768px){
  #parallaxBox{
		height: 32vh;
	}
}
/*--------------  nlRegistry.php -----------------------------*/
/*--------------  nlRegistry.php -----------------------------*/
/*--------------  nlRegistry.php -----------------------------*/
#regisBox{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50vh;
}
/*--------------  nlsignOut.php -----------------------------*/
/*--------------  nlsignOut.php -----------------------------*/
/*--------------  nlsignOut.php -----------------------------*/
#nlAbmBox{
	width: 100%;
	height: 55vh;
}
#nlAbmBox p{
	text-align: center;
}
#nlAbmForm{
	width: 60%;
}
@media only screen and (max-width:900px){
  #nlAbmForm{
		width: 100%;
	}
}
/*--------------------------------------------------------*/
/*-------------------------------artikel pages-------------*/
/*--------------------------------------------------------*/
.auswahlBtn{
	padding: 10px 0; 
	background: var(--softGrey);
	text-align: center;
}
.auswahlBtn h4{
	margin-bottom: 0 ;
}
.grid-names-columns{
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
	"one one two two"
	"one one three three"
	"one one . ."
	"one one . .";
	grid-gap: 20px;
}
.imgContainer{
	grid-area: one;
}
.infoContainer{
	grid-area: two;
}
#artName{
	text-align:center;
}
.utilContainer{
	grid-area: three;
}
.utilBox{
	text-align: center;
	margin-bottom: 40px;
}
#artPreis{
	color: var(--red);
	font-weight: bold;
}
.artSzene{
	text-align: center;
	background: var(--softGrey);
	padding: 15px 0;
}
.artSzene img{
	width: 50%;
}
.artSzeneBg{
}
@media only screen and (max-width:500px){
	.artSzene img{
		width: 100%;
	}
	.artSzeneBg{
		background: none;
		padding: 0;
	}
	.grid-names-columns{
		/* display: grid; */
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
		grid-template-areas:
		"two"
		"one"
		"three";
	}
}
.smallImgGroup{
	 display: flex;
	 justify-content: space-between;
}
.smallImgBox{
	cursor: pointer;
	margin: 1%;
}
.proTextContainer h4{
	text-align: center;
}
.proTextContBox{
	padding: 10px 0;
	text-align:center;
}
.numField{
	margin-top: 15px;
  display: flex;
	width: 100%;
	justify-content: center;
}
.minusBtn, .plusBtn{
	padding: 0 15px; 
	font-size:var(--p_font);
	cursor: pointer;
	background-color: var(--blue);
  color: #fff;
}
.quantity{
	padding:0 15px;
	 background: var(--softGrey);
	color: #000;
	cursor: default;
}
/* ------- accordion ------*/
.accordion{
	background-color: transparent;
	outline: none;
	border: none;
	border-bottom: 1px solid #d3d3d3;
	text-align: left;
	color: #444;
	margin-bottom:1%;
	padding: 10px;
	width: 100%;
	cursor: pointer;
}
.accordion:first-of-type{
	border-top: 1px solid #d3d3d3;
}
.accordion:after{
	content: '\002B';
	font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.panel{
	max-height: 0;
	overflow: hidden;
	/* border-bottom:1px solid #d3d3d3;  */
  transition: max-height 0.2s ease-out;
}
.panel p{
	padding: 2%;
	font-size: .8rem;
}
/*--------------------------------------------------*/
/*------------------cart.html-----------------------*/
/*--------------------------------------------------*/
#cartMessage{
	color: var(--red)
}
.artBox, .numField1, .preisBox{
	margin: 10px 0;
}/*ja*/
.artBox{
	 display: flex;
}
.cartImg{
	width: 80px;
	display: block;
	margin-right: 10px;
}
.artBoxInfo p, .artBoxInfo a{
	font-size: 14px;
	padding: 0;
}
.cartName{
	margin: 0;
}
.cartPreis{
	margin: 0;
}
.btnRemove{
	cursor: pointer;
	width: 20px;
	margin-top: 10px;
}
.numBox{
	display: flex;
	justify-content: center;
}
.cartMinusBtn, .cartPlusBtn{
	padding: 0 15px;
	font-size:var(--p_font);
	background-color: var(--blue);
  color: #fff;
	cursor: pointer;
}
.cartQuantity{
	padding: 0 15px; 
	background: var(--softGrey);
	border-radius: 0;
	color: #000;
	cursor: default;
}
.preisBox{
	text-align: right;
}
#cartSum{
	width: 100%;
	text-align: right;
	padding-top: 10px;
	padding-right: 15px;
}
@media only screen and (max-width: 550px){
	.cartImg{
		display: none;
	}
	.numBox{
		flex-direction: column;
	}
	.numBox > button{
		padding: 3px 0;
		 /*margin: 0 30px; */
	}
	.numBox > button:nth-child(1){
		margin-top: 15px;
		/* background: green; */
	}
	.numBox > button:nth-child(2){
		padding: 0;
		margin: 6px 0;
		/* background: red; */
	}
	.numBox > button:nth-child(3){
		margin-bottom: 15px;
		/* background: red; */
	}
}
/*-------------- ---------- -----------*/
/*-------------- order.html -----------*/
/*-------------- ---------- -----------*/
main p{
	margin-top: 25px;
}
#orderContainer{
	display: block;
}
.orderProcess{
	display: flex;
	justify-content: center; 
	border-bottom: 1px solid #000;
	padding: 0 20px;
	margin-top: 25px;
}
.orderSign{
	text-align: center;
}
.orderSign img{
	width: 60%;
}
#lieferanschrift{
	margin-bottom: 25px;
	display: none;
}
#lieferanschrift em{
	font-size: .8rem;
	color: var(--red);
}
.error{
	color: var(--red);
	font-size: 12px;
}
#errorOverlay{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}
#textOverlay{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: var(--p_font);
  color: #fff;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
/*----------------- payment.html ---------------*/
/*----------------- payment.html ---------------*/
/*----------------- payment.html ---------------*/
#shipment div{
	 margin-bottom: 10px;
	 padding-left: 10px;
	background: var(--softGrey);
}
#shipment p{
	font-size: 14px;
	margin: 0;
	padding:0  0 3px 15px;
}
#shipment a{
	width: 50px;
}
#versandInfo{
	width: 100%;
	text-align:center;
	padding: 0;
	margin: 30px 0 10px;
}
#paypalBox{
	width: 50%;
	margin: 0 auto 30px;
}
#paypalError{
	display: none;
	color: var(--red);
	border: 3px dotted var(--red);
	padding: 10px;
}
#paypalLink{
	/* width: 100%; */
	background: red;
	text-align: center;
}
#paypalLink a{
	 /*width: 20%; 
	margin: 0 auto;*/
}
/*----------------- fazit.html ---------------*/
/*----------------- fazit.html ---------------*/
/*----------------- fazit.html ---------------*/
#fazitBox{
	height: 45vh;
	display: flex;
	justify-content: center;
	align-items: center;
}