body{
background:black;
width:100%;

}

*  {font-family: "acumin-pro", sans-serif;
margin:0px;
	padding:0px;
	text-decoration:none;
	box-sizing:border-box;
}
	




.w3-animate-top
{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.w3-animate-right{position:relative;animation:animateright 0.5s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.w3-animate-fading{position:relative;animation:fading 10s infinite}@keyframes fading{.1%{opacity:0}100%{opacity:.6}100%{opacity:.1}}

.w3-animate-left{position:relative;animation:animateright 1s}@keyframes animateright{from{left:-300px;opacity:0} to{left:0;opacity:1}}
/* Scripts für ModalPopups */

.w3-modal{z-index:100;display:none;padding:2.45rem 0 0 0;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}


.w3-modal-content{background-color:white;position:relative; left:0%; top:0%; width:100%; height:auto;}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-hover-opacity:hover{opacity:0.60}


#touchScroller
			{
				width:100%;
				height: 330px;
				position: relative;
			}
			
			/* Replace the last selector for the type(s) of element(s) you have in
			   your scroller.
			   If you have images use #touchScroller div.scrollableArea img,
			   If you have div's use #touchScroller div.scrollableArea div,
			   if you have links use #touchScroller div.scrollableArea a,
			   or add several selectors if you have mixed content
			   ...and so on. */
			#touchScroller div.scrollableArea img
			{
				position: relative;
				float: left;
				margin: 0;
				padding: 0 5px;
				/* If you don't want the images in the scroller to be selectable, try the following
				   block of code. It's just a nice feature that prevent the images from
				   accidentally becoming selected/inverted when the user interacts with the scroller. */
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				user-select: none;
			}

div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}



header{

	z-index: 55;
		height: 6.0rem;
border-top:.3rem;
background:white;

position:fixed;

width:100%;
top:0;
}




#myVideo {

	background-color:black;
  top: 2.4rem;
position:fixed;   
left: -18%;
width: 145%; 
  z-index:-10;
}





.filmschrift{
		z-index:50;
  position: absolute;
  top: 10%;
  left: 9%;
  transform: translate(-0%, -0%);

  }

.services{
max-width:96%;
  position: absolute;
  bottom: 8px;
  left: 16px;

  }


img {
    vertical-align: middle;
}

.gridsliderzwei{
	
padding:0 0 0 0;
  position: relative;
}


.Abstand {
z-index: 9;
position:fixed;
width:100%;
background-color: rgba(0,0,0,0.5);
height:.1rem;
top:3.4rem;
}


.abstandartikel{
	height:2px;
	color;black;
}	
	
.abstandsechzehn{
	height:16px;
	color;white;
}
	
.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -200px;}


.logo{
	transform:scale(.5,.5);
	position:absolute;
left:-5rem;
top:-.8rem;

}






.burger{
	cursor: pointer;
	position:relative;
	top: 1.9rem;
left:calc(100% - 170px);
  background-color: white;
  transition: transform .8s;
  width: 170px;
  height: 30px;
  border-style: solid;
   border-width: 2px;
  border-color:#000000;
background-image:url(bilder/basic/burgertxt.jpg);
}




	
	

.close{
cursor: pointer;
	width:48px;
	height:26px;


position:fixed;
top: 2rem;
left:calc(100%  - 2.2rem);
}

.closer {
			display:block;
	position:relative;
          height:26px;
            width: 2px;
            margin-left: 6px;
            background-color: white;
            transform: rotate(45deg);
            Z-index:5;
        }
		
.closel {
			display:block;
	position:relative;

          height:26px;
            width: 2px;
            margin-left: 7px;
			margin-bottom: -26px;
            background-color: white;
            transform: rotate(-45deg);
            Z-index:13;
        }

.closermini {
		display:block;
	position:relative;
	left: 180px;
	top:2px;
          height:22px;
            width: 2px;
            margin-left: 10px;
            background-color: white;
            transform: rotate(45deg);
            Z-index:5;
        }
.closelmini {
	display:block;
	position:relative;
		left: 180px;
	top:-20px;
          height:22px;
            width: 2px;
            margin-left: 10px;

            background-color: white;
            transform: rotate(-45deg);
            Z-index:13;
        }

.kapeinsaktiv {
	z-index:3;
left:calc(100% - 228px); 
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#a1975b;
   border-width: 1px 0px 1px 8px;
background-image:url(bilder/basic/kap1txt.jpg);
background-repeat:no-repeat;
}

.kapzweiaktiv {
	z-index:3;
	left:calc(100% - 228px);
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#d19aa9;
   border-width: 1px 1px 1px 8px;
background-image:url(bilder/basic/kap2txt.jpg);
background-repeat:no-repeat;
}		

.kapdreiaktiv {
	z-index:3;
	left:calc(100% - 228px);
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#4f4443;
   border-width: 1px 1px 1px 8px;
background-image:url(bilder/basic/kap3txt.jpg);
background-repeat:no-repeat;
}

.kapvieraktiv {
	z-index:3;
	left:calc(100% - 228px);
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#2f7b8c;
   border-width: 1px 1px 1px 8px;
background-image:url(bilder/basic/kap4txt.jpg);
background-repeat:no-repeat;
}

.kapfuenfaktiv {
	z-index:3;
	left:calc(100% - 228px);
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#eb6f37;
   border-width: 1px 1px 1px 8px;
background-image:url(bilder/basic/kap5txt.jpg);
background-repeat:no-repeat;
}

.kapsechsaktiv {
	z-index:3;
	left:calc(100% - 228px);
	position:fixed;
	top: calc(2.4rem + 8px);
  width: 228px;
  height:30px;
    border-style: solid;
  border-color:#3e4750;
   border-width: 1px 1px 1px 8px;
background-image:url(bilder/basic/kap6txt.jpg);
background-repeat:no-repeat;
}

			
.closelmini:hover {	
color:purple;
}
	
	
a:hover{
color:purple;
}


h1 {
   text-align: left;
   line-height:2.6rem;
   font-weight:600;
   font-size: 2.2rem;
   letter-spacing:.04rem;
   color: black;
}


h11 {
   font-weight:400;
   font-size: .7rem;
   letter-spacing:.01rem;
   color: white;
   background-color:rgba(50,50,50,0.6);
      line-height:1rem;
   padding: 0rem .15rem 0rem .15rem ;
}

h2 {
text-align: left;   
   font-size: 1.34rem;
   line-height:1.7rem;
   font-weight:300;
   letter-spacing:;
}

a{
color: black;
}

footer a{
color: #bd6e6a;
}

a:hover{
color:rgba(255,255,255,0.8);
}

h3{

color:black;
   text-align: left;   
   font-size: .9rem;
   line-height:1.2rem;
   font-weight:600;

   letter-spacing:.03rem;

	}

h4{
	
	   font-weight:300;
	font-size:1rem;
	color:white;
	letter-spacing:.03rem;
line-height:2rem;

 	}


h5{
   text-align: left;   
   font-size: 2rem;
   line-height:2.4rem;
   font-weight:500;
   letter-spacing:;
	}

h6 {
   color:black;
   text-align: left;   
   font-size: 2rem;
   line-height:2.4rem;
   font-weight:200;
   letter-spacing:;
}

h7 {
   text-align: left;
   line-height:1.5rem;
   font-weight:300;
   font-size: 1.2rem;
   color: white;
}



p{
	
		font-weight:400;
padding: 0;
font-size:.9rem;
	      line-height:1.125rem;
		    letter-spacing:.05rem;
	}
	
header p{
color:black;
padding: 1.2rem 1.2rem 1.2rem 2.4rem;
font-size:.9rem;

	text-align: left;
	      line-height:1.5rem;
		    letter-spacing:.05rem;
	}	
	
p a{
color:black;
}

p a:hover{
color:#99E5FF;
}

pvier{
	font-weight:300;
font-size: 1rem;
color:white;
line-height:2rem;
letter-spacing:.1rem;
}





pdrei {
   text-align: left;
   line-height:1.1rem;
   font-weight:300;
   font-size: 1rem;
   color: black;
   padding: 1.2rem 1.2rem 0 1.2rem;
}
nav{
 padding:3.6rem 1.2rem 1.2rem 1.2rem ; 

}
 
 nav a{	
	text-decoration:none;

	 text-align:left;
	font-size:1.8rem;
	color:black;

}

footer h2{
   text-align: left;
   font-size: 1.2rem;
   line-height:1.5rem;
   font-weight:300;
   
   letter-spacing:.06rem;
   color:#71906c;
}

footer{
	padding:16px 8px 30px 16px;
min-height:200px;
	position: relative;
background-color: black;
width: 100%; 
}
		
footer div{
	width:auto;

}

.abschluss{
	position:relative;
height:8px;
width:100%;
background-color: white;	
}


.inhalt {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;

}

.impressum {
	overflow-y: scroll;
  position: fixed;
  display: grid;
width:60%;
height:auto;
grid-template-columns: auto;


}


.fixspalter {

  display: grid;
  grid-gap: 8px;
  grid-template-columns: 49% 49%;
  padding:0px 1px 1.2rem 1.2rem;

}

.fixspalter > div {
color:black;
   text-align: left;   
   font-size: .9rem;
   line-height:1.2rem;
   font-weight:200;

   letter-spacing:.03rem;
}




.item3 {
	color:black;
padding: 0;
font-size:.9rem;
height:70%;
	text-align: left;
	      line-height:1.5rem;
		    letter-spacing:.05rem;

  grid-area: 1 / 1 / 2 / 2;
}

.item4 {
	color:black;
padding: 0;
font-size:.9rem;

	text-align: left;
	      line-height:1.5rem;
		    letter-spacing:.05rem;

  grid-area: 2 / 1 / 3 / 2;
}


#overlay {
padding:0 10px 0 2.4rem;
	overflow-y: scroll;
	color:black;
  position: fixed;
display:none;
  left: 0%;
width:100%;
height: 100%;
  top:6rem;

  background-color: #7aa560;
  z-index: 100;
}

.overlaydesktop {
visibility:hidden;
}


.overlayhalb{
line-height:.6rem;	
}
.overlaymobil {
	
	
	font-size:.9rem;
	      line-height:1.2rem;
		    letter-spacing:.05rem;
	

	height:200px;
visibility:visible;
}


.kapiteln{	
	width:100%;
	background:black;
	position:fixed;
top: 2.4rem;
right: 0%;
		
}


#eins{
		color:#62707e;
padding: 6rem 16px 4px 16px;
background-color:white;
width:100%;
}

#einsslider{
width:100%;
padding:0 0 0 0;	
background:white;
margin:0 0 0 0;
}	
.gridslider{
padding:8px;
  position: relative;
  background:white;

}

#zwei{

		color:;
padding:2px 16px 2px 16px;
background-color:white;
height:;
width:100%;
}

#drei{
		color:#62707e;
padding: 16px;
background-color:black;
width:100%;
}

#vier{
		color:;
padding:.05rem 16px 16px 16px;
background-color:white;
height:;
width:100%;
}

#fuenf{
		color:;
padding:16px 16px 0px 16px;
background-color:white;
height:;
width:100%;
}

#sechs{
		color:;
padding:16px 16px 16px 16px;
background-color:white;
height:;
width:100%;
}

#sieben{

padding: 0 16px 2px 16px;
background-color:white;
height:;
width:100%;
}

#acht{
padding: 1px 16px 16px 16px;
background-color:white;
height:;
width:100%;
}

#neun{
		color:;
padding:16px 16px 16px 16px;
background-color:white;
height:;
width:100%;
}

#zehn{
}



.farbe {
	 min-height: ;
		z-index:;
		padding:0 16px 16px 16px;
    width: 100%;
	height:;
	margin:0 0 0 0;
   background-color: #b56f74;
   position: relative;

}

.farbetxt {
min-height: ;
		z-index:;
		padding:16px 0 16px 0;
    width: 100%;
	height:;
	margin:0 0 0 0;

   position: relative;
   color:black;
   text-align: left;   
   font-size: 2rem;
   line-height:2.4rem;
   font-weight:300;
}

.farbegruen{
   background-color: #7aa560;
}

.farberosa{
   background-color: #b56f74;
}

.farbesand{
   background-color: #b8b4ad;
}



.illus {
padding: 0 0 0 16px;

}
.illus img{
margin: 0 1% 2rem 1%;
}

.mitte {
text-align: center;

}

#viermobil{

position: relative;
  display: grid;
 
  grid-template-columns: auto;
  grid-template-rows:auto auto; 
  grid-gap: 8px;
padding: 8px;
  background-color: white;
}



#vierthema{

padding:0 0 0 0;
background:white;
}


.vierzudrei{

	position:fixed;
}
.gridvierthema {
	font-size: 10px;
line-height:15px;
letter-spacing:.04rem;
font-weight:700;
width:100%;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows:auto;
  grid-gap: 0px;
padding: 12px 8px 8px 8px;
}



.dreispalter {
width:100%;
column-count: 3;
  column-gap: 1 rem;
padding: 1.2rem 0 1.2rem 0;
   break-inside: avoid;
}




.gridviertitel {
width:100%;
text-aligne:center;
padding: 1.6rem 1.9rem 1.2rem 0;
}

.gridviergrafik {
width:100%;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1.6rem auto;
  grid-gap: 10px;
padding: 1.2rem 1.9rem 1.2rem 1.2rem;
}

.gridmodal {
position:relative;
display:grid;
  grid-template-columns: auto auto auto auto auto ;
  grid-template-rows: auto auto auto auto;
  grid-gap: 10px;
padding: 0
}






#sechseins{
  border-top-style: solid;
  border-width: 1px;
  border-color:white;
	color:white;
	padding:0 0 0 0;
  background-color:black;
}

#sechszwei{
  border-top-style: solid;
  border-width: 1px;
  border-color:black;
	color:black;
	padding:0 0 0 0;
  background-color:white;
}



.gridsliderzwei{
	
text-align:center;
  position: relative;
z-index:3;

}

.grideins {
			  width: 100%; 
			  display:none;
}

.einsmobil {
			  width: 100%; 
display:block;

}


.gridzwei {

	   min-height: 5rem;
		z-index:3;
		padding:20px 16px 20px 19px;
    width: 100%;
	margin:0 0 0 0;
   background-color: #b8b4ad;
   position: relative;
   color:white;
   text-align: left;   
   font-size: .9rem;
   line-height:1.2rem;
   font-weight:300;

   letter-spacing:.04rem;

}

.griddrei {
	   min-height: 5rem;
width:100%;
  position: relative;
  display: grid;
  grid-template-columns: 90% auto;
  grid-template-rows: auto;
  grid-gap: 0;
  padding:8px 1px 8px 8px;


background-color:9d8a50;
}




.gridvier{
width:100%;
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 5px;
padding: 0 0 0 0;
  background-color: white;

}



.gridtext { 
text-align:center;
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -130%);
}


.bildtext {
  position: relative;  

}


hr.linie{
border: 1.5px solid white;
line-height:1.2rem;
}

hr.linieblack{
border: .1rem solid black;

}



.gridvierbild {
display:flex;
 flex-direction:column;
 justify-content:center;
 text-align:center;

}

.span {
	position:absolute;
	left:0;
	top:0;
			  width: 100%; 
visibility: visible;
z-index:2;
}


/* desktop Version ab  1024 px*/

@media screen and (min-width: 1560px) 
{

.w3-modal-content{background-color:white;position:relative; left:0%; top:0%; width:100%; height:auto;}
.w3-modal-content{background-color:white;position:relative; left:15%; width:70%; height:auto;}


header{

		height: 9.0rem;

}

#overlay {
  top:9rem;
}
.close{

top: 4.1rem;
left:calc(100%  - 2.2rem);
}


#eins{

padding: 9rem 16px 4px 16px;

}

.logo{
	transform:scale(.8,.8);

left:-.8rem;
top:.8rem;

}

.burger{

	top: 4rem;

}


h2 {

	font-size: 2.2rem;
	line-height:3.3rem;
letter-spacing:.03rem;
   text-align: left;
   font-weight:300;
}

h5 {
   font-size: 3.3rem;
   line-height:4.66rem;
   font-weight:500;
}


h6 {
   font-size: 3.3rem;
   line-height:4.66rem;
}


h3{
color:black;
   text-align: left;   
   font-size: 1.1rem;
   line-height:1.5rem;
   font-weight:600;

   letter-spacing:.03rem;
	}

.fixspalter {

  display: grid;
  grid-gap: 8px;
  grid-template-columns: 33% 49%;
  padding:1.2rem 1px 1.2rem 4.8rem;

}

.fixspalter > div {
color:black;
   text-align: left;   
   font-size: 1.1rem;
   line-height:1.5rem;
   font-weight:200;

   letter-spacing:.03rem;
}

.gridzwei {

 font-size: 1.1rem;
   line-height:1.46rem;


   letter-spacing:.05rem;
}

.farbe {
	
		padding:1.2rem 1px 1.2rem 4.8rem;
}





h4{
	   font-weight:400;
	font-size:1.2rem;
	letter-spacing:.0366rem;
 	}