*
{
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: 'Montserrat';
    font-style: normal;
  font-weight: 400;
   src: local (''),  
  url('Montserrat-Regular.ttf') format('truetype'),
   url('Montserrat-Regular.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: "Montserrat", "OpenSans",sans-serif;
  background:#fff;
  line-height:1.5;
}

.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; display: flex; justify-content:center;  align-items: center; width:vw; 	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; ;}
main li {margin-left:30px; line-height:1.5;}
main ul {margin-bottom:20px;}

.bildbox img {display:flex; justify-content:center; align-items: center; height: 25vw; width: 20vw;	position: relative; overflow: hidden; object-fit:cover;}
.bildboxzwei {display:flex; justify-content:center; align-items: center;  overflow: hidden; object-fit:cover;}
.bildboxzwei img{  width:800px; height:450px;}

@media(max-width: 1100px)
{
.bildboxzwei img{  width:80vw; height:45vw;}
}







/* ~~~~~~~~~~~ section ~~~~~~~~~~~ padding-left:calc(50vw - 600px); */
section {display:flex; justify-content:center; align-items: center; max-width:1200px; width:100%; }
section:nth-child(even) {background:#fff4f2; }
section:nth-child(odd) {background:#fff; }
section figure img{max-width:600px; width:100%; height:auto;}





@media(max-width: 800px)
{

.textbox {width:calc(80vw); margin-left:-50px; font-size:13px; hyphens:auto; }
main {width:calc(100vw - 80px); font-size:13px; hyphens:auto; }
section { flex-wrap: wrap; flex-direction: column-reverse; } 
section figure img{ width:calc(96vw - 40px); height:auto;}
}


.bildslider {
	width: 40vw;
	height: 28vw;
max-width:500px;
	position: relative;
	overflow: hidden;

}



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

@keyframes sliderani {
	/*
	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 }



@media(max-width: 800px)
{
	.bildslider {
		width: 98vw;
	height: 67vw;
	}
}








.materialoben {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 40px;
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;
	
}








.inheader {	display:flex; justify-content:space-between; align-items:center; padding:10px;  width:100%; max-width:1200px;}
.inheader img {width: clamp(250px, 34vw, 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;}



.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:1200px; text-align:center; font-size: clamp(11px, 2vw, 18px);}


.objektkontakt {
text-align:left; margin-right:4vw;
}


.content {background:#fff; width:100vw; display:flex; justify-content:center; align-items:center; padding:10px 0 10px 0; }

 .drittelbild {width:100vw; height:33vw; object-fit: cover; object-position:50% 50%;}



.incontent { max-width:1200px; margin:0 auto;  font-size:18px; text-align:left; }
.incontent p {display:block; margin-bottom:20px; text-align:justify; }
.incontent h2 {display:block; margin-bottom:10px; text-align:center; color:#808080;}
.incontent hr { margin-bottom:10px; }

.contentzwei {background:#fff4f2; width:100%;  margin:0 auto; padding:30px 0 30px 0;}


.contentdrei { background-color:#d3beb1;}


.incontentzwei {padding:10px; max-width:1200px;  margin:0 auto; display: flex; justify-content:center; flex-wrap: wrap;  text-align:center;}
.incontentzwei h2 {font-size:18px; margin:0 0 10px 0;}

.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;}

@media(max-width: 800px)
{
	
.kollektion h2 {font-size:14px;}
.incontentzwei p{font-size:13px; text-align:justify; hyphens:auto;}
.incontent {margin:0 20px;}
.incontent h2 {font-size:14px;}
.incontent p {font-size:13px;}
.incontentzwei h2 {font-size:14px; display:block; }
.objektkontakt {font-size:13px; margin-top:12px;}
}


.incontentdrei {display:block;  padding:10px; max-width:1200px;  margin:0 auto; text-align:center; font-size:18px;  }


.incontentvier {padding:10px; max-width:1200px;  margin:0 auto; display: flex; justify-content:center; flex-wrap: wrap;  }
.incontentvier a {text-decoration:none;}

.incontentfuenf {display:flex;  justify-content:space-between; align-items:center; font-size:24px; }

.incontentsechs {padding:10px; max-width:1200px;  margin:0 auto; display: flex; justify-content:center; align-items:center; justify-content:space-between; }



.incontentsieben {display: flex; justify-content:center; align-items:center;}

@media(max-width: 800px)
{
.incontentsechs {flex-direction:column;}
.incontentsieben span {width:50vw; margin:0 0 10px 10px;}
.incontentsieben img {margin:0 0 20px 0;}
}


		.incontentzwei figure
		{
		display: flex;
		flex-direction:column;		
		justify-content : flex-end;
		align-items : center;
		margin:8px;
		text-align:center;
		width: 270px;
		height: 250px;
		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: 600px)
{
.incontentzwei figure {			font-size:16px;}
.incontentfuenf { font-size:18px; hyphens:auto;}
}
	
		.incontentzwei figcaption {
			height:50px;
			margin-top:12px;
			padding:6px;
			width:100%;
			color:#2d4130;
			overflow:hidden;
			background:#fff;
			z-index:5;
			font-size:16px;

		}
		
	.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: 220px;
		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: 380px;
		height: 300px;
		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: 380px;
		height: 240px;
		object-fit:cover;´
		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: 390px; height:400px; 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:13px; 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; max-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; hyphens:auto; text-align:center;}

.zentriert {display:flex; justify-content:center; align-items:center;}
.zentriertrechts {display:flex; justify-content:flex-end; align-items:center; margin:10px 0 10px 10px;}	
.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: auto auto auto auto;
	max-width:1200px;
	width:100%;
	margin:0 auto;
	gap:0;
	justify-items:start; 
	}
	@media (max-width: 700px)
{
.materialien {	grid-template-columns: auto; grid-template-rows:auto; align-items:end;}
.zentriertrechts {display:flex; justify-content:center; align-items:end;}
.dekorbox {width:calc(33vw - 10px); }
.dekorbox img {width:calc(33vw - 10px); }
}	
	@media (max-width: 430px)
{
	.dekorbox {width:calc(50vw - 10px); }
.dekorbox img {width:calc(50vw - 10px); }
}



	
		
/*	
#sortiment {position:absolute; display:block;  display:block; height:50px; width:50px;  background:#550000; }
#sortiment:target{
	scroll-margin-top: 200px;
	
}	
	@media (max-width: 800px)
{
#sortiment:target{}
}	
*/		
		

.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;}
.objekt-u {background:#315b69;}

.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;}


.incontentacht {padding:10px; max-width:1200px; margin:0 auto;  font-size:18px; text-align:center;}
.incontentacht h2 {color:#808080; margin-bottom:10px;}
.incontentacht p {margin-top:10px;}


@media(max-width: 800px)
{
	.incontentacht h2 {font-size:14px;}
	.incontentacht p {font-size:13px;}
}








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:156px; 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;
}

@media (width < 800px )  
{
	#warenkorbinhalt0 {width:100vw; left:calc(-100vw + 40px);}
}

.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;}

.materialicon {
  font-family: 'Material Icons';
 color:#666;
  transition: 1s all; padding-top:18px; padding-right: 8px;
}

.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);}


a.objektbutton {

	color:#d3beb1;
	transition:all 1s;
	border-radius:5px;
	font-size:clamp(15px,2vw,19px);
	border:1px solid #222;
	padding:10px 50px;
	background:#315b69;

}
a.objektbutton:hover {background:#d3beb1; color:#315b69; 	transition:all 1s; }


.buttonlink {text-decoration:none;   display:flex; align-items:center; justify-content: flex-start; flex-wrap: nowrap; color:#808080;}
.content {display:block;}

footer {background:#fef4f2; border-top:2px solid #808080;  display:flex; align-items:flex-start; justify-content:center; }

.unten { display:flex; align-items:flex-start; justify-content:center; padding:20px; max-width:1200px; width:100vw; }
.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  {display: none; }
	.block {font-size:10px; width:45vw;}
	.materialbutton {font-size:16px; width:18px; height:18px;}
	.block:last-child {    display: none;}
	}


.buttonlink:hover .materialbutton{

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

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

}

.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;
}

.wbutton {

  cursor: pointer;
  padding: 4px;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
color: white; background:#ED1C24; 
  
  
}

.wbutton: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;
}



/* ~~~~~~~~~~~~~~~~~~~~~ Grundgerüst Bilderslider ~~~~~~~~~~~~~~~~~~~~~~~~ */
.slider-container {
  width: 100vw;
  max-width: 100%;
  overflow: hidden; /* Versteckt die anderen Bilder */
  position: relative;
  margin: auto;
}

.bilderslider {
  display: flex;
  width: 300%; /* 3 Bilder = 300% */
  animation: slide 24s infinite;
}

.bilderslider img {
  width: 100%; /* Ein Drittel von 300% = 100% des Containers */
  height: auto;
}

/* Die Punkte */
.dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  animation: dot-highlight 24s infinite;
}

/* Zeitversetzte Animation für die Punkte */
.dot:nth-child(2) { animation-delay: 0s; } /* Startpunkt */
.dot:nth-child(1) { animation-name: dot1; }
.dot:nth-child(2) { animation-name: dot2; }
.dot:nth-child(3) { animation-name: dot3; }

/* Animation: Bilder wechseln */
@keyframes slide {
  0%, 25% { transform: translateX(0); }
  33%, 58% { transform: translateX(-33.33%); }
  66%, 91% { transform: translateX(-66.66%); }
  100% { transform: translateX(0); }
}

/* Animation: Welcher Punkt leuchtet wann? */
@keyframes dot1 {
  0%, 25%, 100% { background-color: #333; }
  33%, 91% { background-color: #bbb; }
}

@keyframes dot2 {
  33%, 58% { background-color: #333; }
  0%, 25%, 66%, 100% { background-color: #bbb; }
}

@keyframes dot3 {
  66%, 91% { background-color: #333; }
  0%, 58%, 100% { background-color: #bbb; }
}

.incontentzentriert {padding:10px; max-width:1000px; line-height:1.5;   margin:0 auto; text-align:center;}

.incontentstart {padding:10px; max-width:1200px; line-height:1.5;   margin:0 auto; display: flex; justify-content:center; flex-wrap: wrap;}

		.incontentstart figure
		{
		display: flex;
		flex-direction:column;		
		justify-content : flex-end;
		align-items : center;
		margin:10px;
		text-align:center;
		width: 30vw;
		height: 24vw;
		text-decoration:none;
		border: 0px solid #ccc;
		border-radius: 2px;
		font-size:clamp(12px,2vw,20px);
		position: relative;
		background:#fff;
		color:#333;
		overflow:hidden;
		box-shadow: 5px 10px 8px silver;
		transition: 0.8s all;
		}
		
		.incontentstart figure img
		{
			object-fit: cover; width:100%; height:16vw; 
		}
		
		.incontentstart figcaption
		{
			
			padding:24px; height:8vw; width:100%; hyphens:auto;
		}
@media(max-width: 1200px)
{
.incontentstart figure {width:45vw; height:43vw;		margin:4px;	}
.incontentstart figure img	{object-fit: cover; width:100%; height:30vw; 	}
	.incontentstart figcaption		{padding:20px; height:13vw; width:100%; padding:4px; line-height:1.5;}
}


.vorteil {
	display:flex;
	align-items:flex-start;
	width:550px;
	margin-top:10px;
}
.vorteil img {

}
.vorteil p {
	hyphens: auto; padding:0 10px 0 12px; line-height:1.5;
}

.grid-block {
		display: grid;
		grid-template-columns: 1fr 1fr;

		
}

@media screen and (max-width: 1100px) {
	.grid-block {grid-template-columns: 1fr;}
	.vorteil {margin:0;}
	.vorteil img {margin-right:12px;}
}

@media screen and (max-width: 600px) {
	.vorteil {	width:85vw;}
	.vorteil p {font-size:13px; padding:0 10px 0 0;}
}

/* ~~~~~~~~~~~~~~~~~~~ Webseite Objekte ~~~~~~~~~~~~~~~~~~ */


.kompetenzbox
{
position: relative;


display: inline-block;
vertical-align: top;
text-align:center;
hyphens:auto;
box-shadow: 0 0 2px #ccc;
font-size: 16px;
border-radius: 5px;
transition: 0.2s all;
box-shadow: 0 0 6px #ccc, 0 0 6px #ccc, 0 0 6px #ccc, 0 0 6px #ccc;
margin:10px;
}



@media screen and (min-width: 1099px) {
	
.kompetenzbox {	max-width:300px;}
	
.kompetenzbox .eins
{

	display: block;
  padding: 20px;
  background: #ccc;
  font-size:20px;


}
	
	.kompetenzbox .zwei
	{
		
	height: 120px;
	background: #f0f0f0;
	padding:10px;
	}
	
	
}

@media screen and (max-width: 1100px) {

.kompetenzbox {max-width:90vw; margin-left:4vw;}


.kompetenzbox .eins
{
	display: block;
  padding: 10px;
  background: #ccc;
  font-size:13px;
  cursor: pointer;
}

.kompetenzbox .zwei
{
	max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Schöner Animationseffekt */
  background: #f0f0f0;
    font-size:13px;
}



#toggle-check1:checked ~ .zwei, #toggle-check2:checked ~ .zwei, #toggle-check3:checked ~ .zwei, #toggle-check4:checked ~ .zwei, #toggle-check5:checked ~ .zwei, #toggle-check6:checked ~ .zwei {
  max-height: 180px; 
  padding: 10px;
}

}

	.haekchen
	{
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 98;
	cursor: pointer;
	}


/* ~~~~~~~~~~~~~~~~~~~~ webseite wir-ueber-uns ~~~~~~~~~~~~~~~ */

.werkstoffe {
	display:flex;
	align-items:flex-start;
	width:570px;
	margin:20px;

}
.werkstoffe img {
	width:320px;
}
.werkstoffe p {
	hyphens: auto; padding:0 10px 0 12px; text-align:left;
}

.grid-block {
		display: grid;
		grid-template-columns: 1fr 1fr;
		
}

@media screen and (max-width: 1100px) {
	.grid-block {grid-template-columns: 1fr;}

}

@media screen and (max-width: 600px) {
	.werkstoffe {	width:92vw;}
	.werkstoffe img {	width:40vw; }
}


/*Tooltip text*/
.tooltipp {
  position: relative;
  color: #111;
}

.tooltipp .tooltipp-text {
  font-family: "Open Sans",'-apple-system', 'Arial', 'sans-serif';

  visibility: hidden;
  max-width:600px;
  height:250px;
  width:auto;
  background-color: #fff;
  color: #fff;
  text-align: center;
 border-radius:10px;
 border:1px dotted silver;
  position: absolute;
  z-index: 1;
  top: -280px;
  right: 25%;

  opacity: 0;
  transition: .8s;
  transform: translate3d(0px, 20px, 0px);
  z-index:99999999999999999999999999999999;
}
.tooltipp-text img {height:250px;}


.tooltipp .tooltipp-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
}

.tooltipp:hover .tooltipp-text {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

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

		color:#d57e7f;
	}
	
.shopcontent {display:flex; flex-direction:row; }
.darstellung {width:63vw; background:#d3d8e4; }
.konfiguration {position:absolute; top:70px; right:0px; width:37vw; box-shadow: -6px 0px 6px silver; background:#efefef; min-height:calc(100vh - 70px); z-index:10;}
	@media (max-width: 1000px)
{
.shopcontent { flex-direction:column; }
.darstellung {width:100vw; display:block; height:auto; }
.konfiguration {position:relative; display:block; width:100vw; top:0px;}
}