*
{
border: none;
outline: none;
padding:0;
margin:0;
scroll-behavior: smooth;
}

@font-face {
  font-family: 'Dragor';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('dragor.ttf') format('truetype'),
   url('dragor.ttf') format('embedded-opentype'); 
  font-display: block;
}


@font-face {
  font-family: 'OpenSans';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('opensans.ttf') format('truetype'),
   url('opensans.ttf') format('embedded-opentype'); 
  font-display: block;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');
    font-size: 50px;

}  

body {
  font-family: "OpenSans", sans-serif;
  background:#fff;
}

.overheader {z-index:99991;  background: rgba(254, 244, 242, 0.9); width:100%; box-sizing:border-box; padding:0 10px 0 10px;}
.zwischen {width:40px;}

header  {position:sticky; top:0px;    background: rgba(254, 244, 242, 0.9); z-index:99999999990;
width:100%; 	box-shadow: 0px 3px 2px rgba(50, 50, 50, 0.9);}



/* ~~~~~~~~~~~~~~ BildSlider Section ~~~~~~~~~~~~~ */

.textbox,main {width:50vw; padding:20px; text-align:justify; }
.textbox p, main p {margin-bottom:16px;}


.bildbox img {display:flex; justify-content:center; align-items: center; width: calc(36vw - 40px); height: 24vw;	position: relative; overflow: hidden; object-fit:cover;}
.bildslider {
	width: 20vw;
	height: 14vw;

	position: relative;
	overflow: hidden;
background:#eee;

}





/* ~~~~~~~~~~~ section ~~~~~~~~~~~ */
section {display:flex; justify-content:space-around; align-items: center; padding:0 5vw 0 5vw; padding-left:15vw; padding-right:15vw; }
section:nth-child(even) {background:#fff4f2; }
section:nth-child(odd) {background:#fff;}






@media(max-width: 800px)
{
.bildslider, .bildbox, .bildbox img {display:block; margin:15px; width:calc(100vw - 60px); height: calc(66.66vw - 40px);}
.textbox,main {width:calc(100vw - 40px); }
section {flex-direction: column; padding-left:1vw; padding-right:1vw;} 
}

.bildslider > * {
	position: absolute; 
	top:0%; left:0; right:0; opacity:0;
	width:100%;
	height:100%;
	object-fit:cover;
	animation: 12s slider infinite ease-in-out;
}

@keyframes slider {
	/*
	0%   { top: 100%; }
	5%   { top: 0% }
	33.4%   { top: 0% }
	38.4%   { top: -100% }
	100% { top: -100%;}
	*/
	0%   { opacity: 0%; }
	5%   { opacity: 100%; }
	33.4%   { opacity: 100% }
	38.4%   { opacity: 0% }
	100% { opacity: 0%;}
}

.bildslider > *:nth-child(1) { animation-delay: 0s }
.bildslider > *:nth-child(2) { animation-delay: 4s }
.bildslider > *:nth-child(3) { animation-delay: 8s }















.headerlinks { display:flex; align-items:flex-end; margin-top:10px;}
.materialoben {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
margin: 0 6px 0 0;
 color:#5f6368;
	width:36px;
	height:36px;
	overflow:hidden;
	display:inline-block;
	justify-content: center;
		border:1px solid transparent;
	
}

.materiallinks {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
margin: 0 6px 0 0;
 color:#fff;
	width:36px;
	height:36px;
	overflow:hidden;
	display:inline-block;
	justify-content: center;
		border:1px solid transparent;
	
}


.headerlinks a {text-decoration:none; color:#5f6368; font-size:16px; margin:0 10px 0 10px;}
.headerlinks a:hover {color:#c73d38; transition:all 1s;}

.inheader {	display:flex; justify-content:space-between; align-items:center; padding:10px; }
.inheader img {width:40vw; margin-right:60px; max-width:500px;}
.streifen {background-image: linear-gradient(to right, #ebebeb 0%, #cbcbcb 50%); display:block; height:8px; width:100vw;}


.svgboxunten{width:10vw;}

/* ~~~~~~~~~ WebsiteEditor ~~~~~~~~~~~~~~*/
.image-style-align-right {float:right; margin:10px; width:25vw; height:auto;}
li {margin-left:30px;}


.zwischentxt {
display:flex; justify-content:center;  color:#000; width:calc(100% - 40px); padding:20px; margin:20px 0 20px 0; font-size:20px;
}

.zwischentxt p {max-width:1400px; text-align:center; font-size: clamp(11px, 2vw, 18px);}





.content {background:#fff; width:100%;  margin:0 auto;}
.incontent {padding:10px; max-width:1500px;  margin:0 auto; text-align:center; font-size:18px; line-height:1.8; }

.contentzwei {background:#fff4f2; width:100%; min-height:30vh;  margin:0 auto;}
.incontentzwei {padding:10px; max-width:1500px;   margin:0 auto; display: flex; justify-content:center; flex-wrap: wrap;}

.kollektion {	display: flex; justify-content:center; margin:0 auto; text-align:center;}
.kollektion p{ box-shadow: 5px 10px 8px silver; background:#fff; padding:3px 20px 3px 20px; margin:20px; font-size:24px;}

.incontentdrei {padding:10px; max-width:1500px;  margin:0 auto; text-align:left; font-size:18px; line-height:1.8; }
.incontentvier {padding:10px; max-width:1000px;  margin:0 auto; display: flex; justify-content:center; flex-wrap: wrap;  }
.incontentvier a {text-decoration:none;}




		.incontentzwei figure
		{
		display: flex;
		flex-direction:column;		
		justify-content : flex-end;
		align-items : center;
		margin:10px;
		text-align:center;
		width: 200px;
		height: 280px;
		text-decoration:none;
		border: 0px solid #ccc;
		border-radius: 2px;
					font-size:20px;
		position: relative;
		background:#fff;
		color:#333;
		overflow:hidden;
		box-shadow: 5px 10px 8px silver;
		transition: 0.8s all;
		}
		

@media(max-width: 500px)
{
.incontentzwei figure {width:calc(50% - 24px); 			font-size:16px;}
}
	
		.incontentzwei figcaption {
			height:120px;
			margin-top:12px;
			padding:6px;
			width:100%;
			color:#2d4130;
			overflow:hidden;
			background:#fff;
			z-index:5;

		}
		
	.incontentzwei figure:hover
		{
		border: 0px solid #2d4130;
		background:#fff;
		color: #fff;
			transform: scale(1.2); transition: 0.8s all;
			z-index:7;
		}
			
		.incontentzwei figure img
		{
		display: block;
		width: 100%;
		height: 150px;
		object-fit:cover;
		mix-blend-mode: darken;
		transition: 0.8s all;
		overflow:hidden;
		}

/* ~~~~~~~~~~~ incontentvier ~~~~~~~~~~~~ */

		.incontentvier figure
		{
		display: flex;
		flex-direction:column;		
		justify-content : flex-end;
		align-items : center;
		margin:10px;
		text-align:center;
		width: 240px;
		height: 280px;
		text-decoration:none;
		border: 0px solid #ccc;
		border-radius: 2px;
					font-size:20px;
		position: relative;
		background:#fff;
		color:#333;
		overflow:hidden;
		box-shadow: 5px 10px 8px silver;
		transition: 0.8s all;
		}
		

@media(max-width: 500px)
{
.incontentvier figure {width:calc(50% - 24px); 			font-size:16px;}
}
	
		.incontentvier figcaption {
			height:40px;
			margin-top:12px;
			padding:6px;
			width:100%;
			color:#2d4130;
			overflow:hidden;
			background:#fff;
			z-index:5;

		}
		
	.incontentvier figure:hover
		{
		border: 0px solid #2d4130;
		background:#fff;
		color: #fff;
		transition: 0.8s all;
			transform: scale(1.1); transition: 0.8s all;
			z-index:7;
		}
			
		.incontentvier figure img
		{
		display: block;
		width: 100%;
		height: 240px;
		object-fit:cover;
		mix-blend-mode: darken;
		transition: 0.8s all;
		overflow:hidden;
		}
	

	
/*  ~~~~~~~~~~~~~ Modellinhalt ~~~~~~~~~~~~~~~~~~~ */

.modelleinhalt {
			width:100%; height:auto;
		display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
}


		.modelleinhalt figure
		{
		display: flex;
		flex-direction:column;		
		justify-content : flex-end;
		align-items : center;
		margin:10px;
		text-align:center;
		width: 280px;
		height: 480px;
		text-decoration:none;
		border: 0px solid #ccc;
		border-radius: 2px;
		font-size:20px;
		position: relative;
		background:#fff;
		color:#333;
		overflow:hidden;
		box-shadow: 0px 0px 5px silver;
		transition: 0.8s all;
		}
		.modelleinhalt figure
		{
		font-size:14px;
		}
		.modelleinhalt figure:hover
		{
		box-shadow: 0px 0px 5px #000; transition: all 1s;
		}
		.modelleinhalt figure img
		{
		display: block;
		max-width: 90%;
		max-height: 240px;
		margin:0 auto;
		object-fit:contain;
		transition: 0.8s all;
		overflow:hidden;
		}

		.modelleinhalt figcaption {
			height:170px;
			margin-top:12px;
			padding:6px;
			width:100%;
			color:#2d4130;
			overflow:hidden;
			background:#fff;
			z-index:5;

		}
		

	

		.modelleinhalt figcaption i{font-size:12px;}
		
		
		a {text-decoration:none;}
		
		
		
		
		
		
	@media (max-width: 800px)
{
	.modelleinhalt figure { width:calc(50vw - 30px); min-height: 290px; height:300px; margin:4px; padding:3px;}
	.modelleinhalt figure img {max-height:160px; max-width:100%;}
	.modelleinhalt figcaption {height:140px;}
	.modelleinhalt figcaption h2 {font-size:18px; margin:4px; line-height:1; padding:0px;}
	.modelleinhalt figcaption p {font-size:16px; margin:0px; padding: 0px;}
	.modelleinhalt figcaption li, figcaption ul {margin:1px; padding:1px;}
	.modelleinhalt figcaption i {font-size:18px;}
	.modelleinhalt figcaption i{font-size:10px;}
}	
		
		
		



/* ~~~~~~~~~~~ Dekorbox ~~~~~~~~~~~~ */	
		
		
.dekorbox {
display:flex; flex-direction:column; text-align:center; text-shadow: #fff 1px 0 10px; height:150px; width:210px; margin:4px; justify-content:center; align-items:center; hyphens:auto;
}

.dekorbox img {width:210px; height:70px; object-fit:cover; border-radius:12px;}
.dekorbox p {font-size:13px;}

.zentriert {display:flex; justify-content:center; align-items:center;}
.zentriertrechts {display:flex; justify-content:flex-end; align-items:center;}	
.zentriertrechts p {font-weight:bold; background:#fff; box-shadow: 0px 0px 5px #000; width:180px; text-align:center; padding:8px;}

.zentriertrechts span
	{
		
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
	position: relative;
	top: -20px;
	right: 11px;
	z-index: 98;
	cursor: pointer;

		color:#d57e7f;
	}
		.wabpkugel img
		{
		width: 40px;
		height: 40px;
		transition: 0.2s all;
		transform: scale(0,0);
		}
		.weartikelboxp:hover .wabpkugel img
		{
		width: 40px;
		height: 40px;
		transition: 0.2s all;
		transform: scale(1,1);
		}


	
/* ~~~~~~~~~~ Materialien ~~~~~~~ */
.materialien {
	display:grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	max-width:1400px;
	margin:0 auto;
	}
	@media (max-width: 800px)
{
.materialien {	grid-template-columns: 1fr; grid-template-rows:1fr;}
.zentriertrechts {display:flex; justify-content:center; }
}	




	
		
		
#sortiment {position:absolute; display:block; }
#sortiment:target{top:80vh;}	
	@media (max-width: 800px)
{
#sortiment:target{top:100vh;}
}	
		
		

.ueberschrift {display:block; text-align:center; color:#fff;
  font-family: 'Dragor';
  font-weight: normal;
  font-style: normal;
  font-size: clamp(30px, 9vw, 120px )
}	

.novum-u {background:#d57e7f;}
.rialto-u {background:#952C14;}
.no-limit-u {background:#7D9A8D;}
.riva-u {background:#BC7318;}
.vado-u {background:#533315;}
.vido-u {background:#4A6946;}


.novum-h {background:#F1D3D3;}
.rialto-h {background:#BD7359;}
.no-limit-h {background:#ACBBB4;}
.riva-h {background:#FCB55D;}
.vado-h {background:#866E5A;}
.vido-h {background:#719C6A;}

h2 {margin:20px; color:#808080;}

hr {
  border: 2px solid #808080;
  border-radius: 50%;
  display:block;

}

#datenschutztext,#impressumtext,#agbtext{
	position:fixed;
	overflow:auto;
	background: rgba(0,0,0,0.6);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:10000009999;
	transition: all 2.5s;
}

 



#datenschutztext p,#impressumtext p,#agbtext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1,#agbtext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2,#agbtext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a,#agbtext a{text-decoration:none; color:#fefefe;}
#datenschutztext:hover,#impressumtext:hover,#agbtext:hover{background: rgba(0,0,0,0.95);}
#datenschutztext:target,#impressumtext:target,#agbtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target,#agbtext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}
}

/* ~~~~~~~~~~~~~ Typen ~~~~~~~~~~~ */
.typen {
padding: 1vw;
display:flex; flex-direction: column; justify-content:center; align-items:center;
cursor:pointer;
}
.typen p {  font-size: clamp(8px, 2vw, 20px); hyphens:auto; text-align:center;}
.typen img {display.block; transition: 0.8s all;}

.textlink:hover, .textlinksel {background:#fff;color:#333; transition:all 1s;}


.typen:hover img
{
transform: scale(1.4); transition: 0.8s cubic-bezier(0.29, 1.01, 1, -0.68);
}

@media (width < 800px )  
{
.typen {padding:3px;}
}





#warenkorbinhalt0 {
	position:fixed; top:196px; left:calc(-50vw + 40px); background:#ED1C24; width:50vw; height:40px; color:#000; border-top-right-radius:6px; border-bottom-right-radius:6px; transition:all 1.5s;
overflow:hidden;
}

#warenkorbinhalt0:hover, .wkoffen {transition:all 1.5s; left:0px; height:calc(100vh - 210px); overflow-y:scroll; background: rgba(254, 244, 242, 1); border:1px solid #ED1C24;}

.wkoffen {transition:all 1.5s; left:0px; background:#333; }


#warenkorbinhalt0 img {widht:150px;}
#wksign {position fixed; right:300px; top:-100px; background:black; width:30px; height:30px;}


.search {position:fixed; top:150px; left:0px; background:#ED1C24; width:40px; height:40px; border-top-right-radius:6px; border-bottom-right-radius:6px; transition:all 1.5s;
overflow:hidden;

}
.search:hover {transition:all 1.5s; width:300px; display:flex;	justify-content:center; align-items:center;}

.fadetxt {overflow:hidden;}



.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;
  	display:flex;
	justify-content : center;
	width:60px;
	height:60px;
 color:#c73d38;
  text-decoraion:none;
  position:sticky;
  top:32px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {	color:#c73d38;	transition:all 1s;	border-radius:50%;	border:1px solid #c73d38; transform: rotate(360deg);}




.buttonlink {text-decoration:none;   display:flex; align-items:center; justify-content: flex-start; flex-wrap: nowrap; color:#808080;}
.content {display:block;}
.unten {background:#fef4f2; border-top:2px solid #808080;  display:flex; align-items:flex-start; justify-content:space-between; padding:20px; }
.block {width:30vw; box-sizing:border-box;  color:#5f6368; position:relative;}
.rechts  { display:flex; justify-content:flex-end; }
.rechts img {width:15vw; }


.materialbutton {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
margin: 0 6px 0 0;
 color:#5f6368;
	transition:all 1s;
	width:36px;
	height:36px;
	overflow:hidden;
	display:flex;
	justify-content: center;
		border:1px solid transparent;
		transition:all 1s;
	
}


@media screen and (max-width: 800px) {
	.rechts img {width:27vw; }
	.block {font-size:10px;}
	.materialbutton {font-size:16px; width:18px; height:18px;}
	}


.buttonlink:hover .materialbutton{

	color:#c73d38;
	transition:all 1s;
	border-radius:50%;
	border:1px solid #c73d38;
	background:#fff;
	
}



.varianten {
  background-color: #eee;
  color: #444;
  padding: 8px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  box-sizing:border-box;

}

button {

  cursor: pointer;
  padding: 8px;
  width: calc(100% - 20px);
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
 margin:10px; display:flex; justify-content: center; align-items: center; color: white; background:#ED1C24; 
  
  
}

.active, button:hover {
  background-color: #550000;
}




.panel {
  padding: 0 8px;
  background-color: white;
  //max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display:flex;
  flex-wrap:wrap;
}

.panelzwei {
	display:grid; grid-template-columns: auto auto;
}

.paneldrei {
	display:grid; grid-template-columns: 1fr 1fr 3fr; padding:14px;   background-color: white;
}


.nullpanel {
	display:grid; grid-template-columns: auto auto; padding:14px;   background-color: white;
}


.kaestchen2,.kaestchen3, .kaestchen4, .kaestchen5, .kaestchen6, .kaestchen7, .kaestchen8{
	display:flex; flex-direction:column; border-radius:12px; cursor:pointer; margin:1px; height:80px; width:120px; z-index:5;
	}
 .kasten {
	 height:60px; width:120px;  justify-content:center; align-items:center; hyphens:auto;  
	background-size:cover;  border-top-left-radius:8px; border-top-right-radius:8px; z-index:1;
}
.panel p{font-size:13px; height:40px; text-align:center;}

.kaestchen2:hover,.kaestchen3:hover, .kaestchen4:hover, .kaestchen5:hover, .kaestchen6:hover, .kaestchen7:hover, .kaestchen8:hover {transition: all 0.7s; border:3px solid red; }

.selekt div {border:3px solid silver; }
.selekt div:first-child {
	border: 3px solid black;
}