/* ===== allgemein ===== */




.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after { clear:both; }
.clearfix { *zoom: 1; }

.section { clear: both;
margin: 0rem;
}

/* horizontale linie */
hr {margin-top:0.5rem;
margin-bottom:0.3rem;
background:transparent;
width:100%;
border:none; /* IE */
height:0.1rem;  /* IE */
}

Body {width:100%;
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:16px;
line-height:26px;
color:#3F3F3F;
margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;
background-position:50% 50%;
background-attachment:fixed;

background-color: #E4E9ED;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}

#container-haupt {display:block;width:1100px;
margin:0 auto;
text-align:center;
padding:0;
border-radius: 0px;border-left:solid 20px white;border-right:solid 20px white;box-shadow:0 0  5px #BFBFBF;
}

#backtop {text-align:justify;
width: 900px;background: #FFFFFF;
padding:,0px 50px;
border-radius: 0px;
}

#top {
background: white;
margin:0 auto;
padding:20px 20px 2px 20px;
}

#top h1, #top h2 {text-transform:uppercase;
color:#2B3439;text-align:center;text-shadow:2px 2px 4px #E2E6E7;
font-weight:bold;text-align:center;
}

#top h1 {letter-spacing:4px;
}

#top h2 {letter-spacing:1px;text-transform:none;margin-top:-20px;
}


header {position:relative;background-image:url(hp60/images/logo03.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;solid 2px black;height:30rem
}
/*
header {position:relative;background-image:url(images/ostern.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;solid 2px black;height:30rem
}*/



#header {position:absolute;
background:transparent;
margin:0;
padding:20px 20px 50px 20px;
border-radius: 0px;
z-index:2;
}


#particles-js {width:100%;position:absolute;top:0rem;
margin:0 auto;
padding:0;height:29.5rem;
z-index:1;
}

/* = = = = = = = = = = = = = = = = = = = = = =  */
/* SCHRÄG GESTELLTER ribbon style */
/* = = = = = = = = = = = = = = = = = = = = = =  */

.ribbon-container {
  width: 100%; height: 100%;
  position: relative;
  background: transparent;
}
.ribbon {
  position: absolute;
  left: -0.5rem; top: -0.5rem;
  z-index: 1;
  overflow: hidden;
  width: 7.5rem; height: 7.5rem;
  text-align: right;
}
.ribbon span {
  font-size: 1rem;
  font-weight: normal;letter-spacing:0.1rem;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 2rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 10rem;
  display: block;
  background: #496565;
  background: linear-gradient(#496565 0%, #96B4B4 100%);


  box-shadow: inset 0 0 3px white, 0 0.3rem 1rem -0.5rem rgba(0, 0, 0, 1);
  position: absolute;
  top: 1.9rem; left: -2.1rem;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0rem; top: 100%;
  z-index: -1;
  border-left: 0.3rem solid #496565;
  border-right: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-top: 0.3rem solid #496565;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0rem; top: 100%;
  z-index: -1;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid #496565;
  border-bottom: 0.3rem solid transparent;
  border-top: 0.3rem solid #496565;
}

#main {text-align:justify;
background: #FFFFFF;
margin:0;
padding:0px 0px;
border-radius: 0px;
}

#footer {
background: #f8f8f8;
margin:0;
padding:60px 20px;
border-radius: 0px;
margin:0;
background-image:url(hp23/images/picture14.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size: cover;
}


h1, h2, h3, h4 {
color:#3F3F3F;text-align:left;
font-weight:bold;
font-variant:normal;
}


h1{
margin-bottom:30px;letter-spacing:-1px;
font-size: 28px;
line-height:32px;
}

h2{letter-spacing:-1px;
font-size: 22px;
line-height:26px;
margin-bottom:30px;
}

h3{letter-spacing:-1px;
font-size: 20px;line-height: 24px;
margin-bottom:40px;font-style:italic;
}

h4{letter-spacing:1px;
font-size: 15px;line-height: 20px;
margin-bottom:2px;
margin-top:8px;
}

b {color:#2F2F2F}

/* liste3  - mit standard-aufzählungszeichen square */

.liste3  {
padding:0rem 0 1rem 1rem;
}

.liste3 li {
list-style-type: none;
padding:.3rem 1.5rem;
}

.liste3 li:nth-child(odd)   {
background:#F0F4FB;
}

.liste3 li:nth-child(even)   {
background:#fff;
}


.liste3.bes li:nth-child(odd)   {
background:whitesmoke;
}

.liste3.bes li:nth-child(even)   {
background:transparent;
}


.suptext  {
margin-bottom:2rem;
}

.suptext p {font-size:16px;
margin:.4rem 0;
}


/* ===== inhaltsbereich ===== */
/* ========================== */


.inhalt{ width:100%;background:white;
padding:0 0px;
}

.menuvorlagen {width:100%;text-align:center;background:transparent;
margin:0 auto;
margin:0rem 0 2rem 0 ;
text-align:center;padding:0px;
}


.templatevorst {position:relative;background:transparent;
width:100%;
font-size:19px;
line-height:30px;
margin:0;
padding:60px 50px;
}

.templatevorst.aa {
background:#F3F5F5;background:linear-gradient(to right top,#F3F5F5 ,#FDFDFC, #F3F5F5)
}

.templatevorst.bb {
background:#FFFFFF;
}

.templatevorst h4 {display:inline-block;
width:100%;
font-size:18px;
line-height:26px;
text-transform:uppercase;
}


.templatevorst:nth-child(even)  {position:relative;background:#fff;
}

.namefeld{padding:0px;
padding:1rem 14px;border-radius:6px
}

.name {font-size:26px;
line-height:32px;
color:#000;
text-shadow: 1px 1px 1px #x000;
}

.zahlfeld{width:50px;
padding:10px
}

.zahl {font-size:50px;line-height:40px;
color:#4F4F4F;
text-shadow: 2px 2px 4px #x3F3F3F;
}

.fotos {
padding:10px;
}

.preisfeld {padding-left:2px;
font-size:13px;
line-height:18px;
}

.preis {font-size:24px;color:#fff;display:inline-block;
font-weight:bold;
background:firebrick;
padding:.3rem .6rem;
margin-left:1rem;
}

.pfeil {background-image:url(images/arrow.png);
background-repeat:no-repeat;
background-position:20% 50%;
}


.nodownshow{color:#000;
width:auto;
padding:0px;
text-align:right;
}

.trenner {height:1px;line-height:1px;font-size:24px;background:#fff;
margin:0rem;
text-align:center;
padding:0px 0px;
}

img.stanz { background-color :#97B8CA;
box-shadow:  0 0 1px #000;
}

img.stanzstart { background-color :#97B8CA;
                 border-top:groove 1px #2C323A;
                 border-left:groove 1px #4E4E4E;
                 border-bottom:groove 2px #EAF0F2;
                 border-right:groove 2px #CFD7DA;
                 }



.text {display:table-cell;;border:xsolid 1px black;vertical-align:top;
padding:0rem 1rem ;
margin:0rem -.25rem -.5rem -.25rem ;/* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

/* WERBUNG */

.werbung {display:block;margin:.4rem;font-size:11px;color:#000;font-family:arial;helvetica,sans-serif;letter-spacing:4px;text-transform:uppercase;
background-image:url(images/werbung.png);
background-repeat:no-repeat;
background-position:50% 50%;
margin:0rem 0;
}

.werbung_ende {display:block;margin:.7rem;font-size:11px;color:#000;font-family:arial;helvetica,sans-serif;letter-spacing:4px;text-transform:uppercase;
background-image:url(images/werbung_ende.png);
background-repeat:no-repeat;
background-position:50% 50%;
}



/* DATENSCHUTZ */


#datenschutz li {
list-style-type: square;
padding-left:1rem;
}

#datenschutz .adresse {
color:#800000;
}

.info  {display:inline-block;
font-size:20px;
background:#455F5F;
color:#fff;
padding:8px 14px;
border-left:20px solid #CCD9D9;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset 0 0 10px white,0px 0px 0 1px #BFBFBF;background: radial-gradient(circle,#547272 0%, #96B4B4 100%);

}

.info .fas,
.info .far,
.info .fab {inline-block;
padding-right:10px;
color:#FFFFFF;
text-shadow:0 0px 2px #000;
}



/* ############################################################ */
/* fotoschau smartphone */
/* ############################################################ */

.wrapper-fotoschau {width:40rem;margin:0 auto;padding:3rem;width:840px;

background:
linear-gradient(135deg, #2E3F3F 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #2E3F3F 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#A4BDBD;
background-size: 64px 128px;

background-image:url(images/back_holz.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

#fotoschau-smartphone {width:320px;
border-top:solid 50px ;
border-bottom:solid 30px ;
border-left:solid 10px ;
border-right:solid 10px ;
border-radius:30px ;
border-color:#fff;
background:white;
box-shadow: 4px 4px 10px #4F4F4F;margin:0 auto;
text-align:center;
position:relative;z-index:0;#607D8B
}

#fotoschau-smartphone span a {display:inline-block;
font-size:20px;
color:#fff;
text-shadow:0px 0px 2px #7F7F7F;
background:rgba(0,0,0,.5);
font-weight:bold;
padding:.5rem;border-radius:0px;
margin-top:1rem;
text-decoration:none;
position:absolute;
bottom:0rem;right:0rem;
}

#fotoschau-smartphone span a:hover {
color:#fff;
background:red;
}





/* RWD-style */

.rwd-style {
position:relative;
transform:perspective(1000px) rotateY(40deg);
width:50rem;
background:gold;background:linear-gradient(to top,dodgerblue,#D7EFFD,dodgerblue);
margin-left:5rem;height:22rem;
}

.fotos-rwd {margin:0;
padding:0;position:relative;
}

.kreis-wrapper{position:absolute;display:table;z-index:2;
top:0rem;
left:-2.4rem;
width: 11rem;
height: 11rem;
padding:.5rem;
background: black;
border-radius:36rem;
font-size:1rem;line-height:1.4rem;
color:#fff;
background:linear-gradient(to right bottom ,#000,#7F7F7F ,#000);
text-shadow:0rem 0rem 0.1rem black;
}

.kreis-wrapper-hell {position:absolute;display:table;z-index:2;
top:0rem;
left:-2.4rem;
width: 11rem;
height: 11rem;
padding:.5rem;
background: white;
border-radius:36rem;
font-size:1rem;line-height:1.4rem;
color:#3F3F3F;
background:linear-gradient(to right bottom ,#E5E5E5,#F9F9F9, #F9F9F9, #E5E5E5);
text-shadow:0rem 0rem 0.2rem #FFFFFF;
}

.kreis-wrapper-red {position:absolute;display:table;z-index:2;
top:0rem;
left:-2.4rem;
width: 11rem;
height: 11rem;
padding:.5rem;
background: white;
border-radius:36rem;
font-size:1rem;line-height:1.4rem;
color:#fff;
background:linear-gradient(to right bottom ,maroon,firebrick,tomato,tomato, firebrick, maroon);
text-shadow:0rem 0rem 0.1rem red;
}

.kreis-wrapper-blue {position:absolute;display:table;z-index:2;
top:0rem;
left:-2.4rem;
width: 11rem;
height: 11rem;
padding:.5rem;
background: white;
border-radius:36rem;
font-size:1rem;line-height:1.4rem;
color:#fff;
background:linear-gradient(to right bottom ,#005D96,dodgerblue,dodgerblue, #005D96);
text-shadow:0rem 0rem 0.1rem slategray;
}


.kreis {display:table-cell;font-weight:normal;
vertical-align:middle;text-align:center;
}




.rwd-start {margin-bottom:16rem;
}

.desk-style {position:absolute;top:2rem;left:7rem;z-index:1;}
.tablet-style {position:absolute;top:10rem;left:4rem;z-index:2}
.smart-style {position:absolute;top:15em;left:13rem;z-index:3}


.desk {border:solid 1.2rem #fff;
border-radius:1rem;
box-shadow: 0 0 1px rgba(0,0,0,.7);
}

.tablet {border:solid .8rem #fff;
border-radius:1rem;
border-color:#fff;
box-shadow: 0 0 1px rgba(0,0,0,.7);
}

.smart {border-top:solid .9rem #fff;
border-bottom:solid .9rem #fff;
border-left:solid .3rem #fff;
border-right:solid .3rem #fff;
border-radius:.7rem;
border-color:#fff;
box-shadow: 0 0 2px rgba(0,0,0,.7);
}

.device-color1 {
border-color:#fff;

}
 .device-color2 {
border-color:#000;
}
 .device-color3 {
border-color:#CFCFCF;
}

 .device-color4 {
border-color:#4E5358;
}

.device-color5 {
border-color:#DAF4F8;
}



/* ############################################################ */
/* WENDEN */
/* ############################################################ */

.wenden { -webkit-animation: wenden 30s infinite linear }
@-webkit-keyframes wenden {
   0% {-webkit-transform:perspective(1000px) rotateY(0deg)}
   25% {-webkit-transform:perspective(1000px) rotateY(90deg)}
   50% {-webkit-transform:perspective(1000px) rotateY(180deg)}
   60% {-webkit-transform:perspective(1000px) rotateY(-270deg)}
   100% {-webkit-transform:perspective(1000px) rotateY(360deg)}
}

.wenden { animation: wenden 30s infinite linear; }
@keyframes wenden {
   0% {transform:perspective(1000px) rotateY(0deg)}
   25% {transform:perspective(1000px) rotateY(90deg)}
   50% {transform:perspective(1000px) rotateY(180deg)}
   60% {transform:perspective(1000px) rotateY(-270deg)}
   100% {transform:perspective(1000px) rotateY(-360deg)}
}





/* ############################################################ */
/* Animation - TEXT-ROTATION  */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Start: Automatisch beim Laden der Seite  */
/* Ablauf:unendlich - Rotation  360grad  */
/* Dauer: 20sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.text-rotate {
-webkit-animation:text-rotate infinite 20s;
animation:text-rotate ease-out infinite 20s;
}

-webkit-@keyframes text-rotate {
0% {-webkit-transform:rotate(0deg);}
10% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}

@keyframes text-rotate {
0% {transform:rotate(0deg);}
10% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}


/* ############################################################ */
/* Animation - SCHWINGEN (+ Farbänderung)  */
/* ############################################################ */


.schwingen {
-webkit-animation-name: schwingen;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: schwingen;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}


@-webkit-keyframes schwingen {

25% {-webkit-transform: rotate3d(0, 0, 1, 15deg);  }

45% {-webkit-transform: rotate3d(0, 0, 1, -10deg);  }

65% {-webkit-transform: rotate3d(0, 0, 1, 5deg); color:green }

85% {-webkit-transform: rotate3d(0, 0, 1, -5deg); color:green }

to {-webkit-transform: rotate3d(0, 0, 1, 0deg);  }
}

@keyframes schwingen {

25% {transform: rotate3d(0, 0, 1, 15deg); }

45% {transform: rotate3d(0, 0, 1, -10deg);  }

65% {transform: rotate3d(0, 0, 1, 5deg); color:green }

85% {transform: rotate3d(0, 0, 1, -5deg);color:green  }

to {transform: rotate3d(0, 0, 1, 0deg);  }
}

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.schwingen {
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}

/* ############################################################ */
/* Animation - BIGSCALE2 (Vergrössern mit scale - (Wert 1= mittel, darunter verkleinert, darüber vergrössert*/
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 0.8sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.bigscale2 {
-webkit-transition: all .7s ease-out;
transition: all .7s ease-out;
}

.bigscale2:hover {
-webkit-transform:perspective(1000px) rotateY(-55deg) scale(1);
transform:perspective(3000px) rotateY(-55deg) scale(1);
}


/* ############################################################ */
/* Animation - BIGSCALE (Vergrössern mit scale - (Wert 1= mittel, darunter verkleinert, darüber vergrössert*/
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 0.8sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.bigscale {
-webkit-transition: all .8s ease-out;
transition: all .8s ease-out;
}

.bigscale:hover {z-index:1;
-webkit-transform:scale(1.2);
transform:scale(1.2);
}


/* ############################################################ */
/* Animation - GLEITEN */
/* ############################################################ */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 40sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

 .gleiten {
-webkit-animation: gleiten 40s infinite linear  ;
animation: gleiten 40s infinite linear  ;
}

@-webkit-keyframes gleiten {
 0% {left: 50%;}
 50% {left: 0%}
 100% {left: 50%}
}

@keyframes gleiten {
 0% {left: 50%;}
 50% {left: 0%}
 100% {left: 50%}
}

/* ############################################################ */
/* Animation - GLEITEN 2 */
/* ############################################################ */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 40sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

 .gleiten2 {
-webkit-animation: gleiten2 40s infinite linear  ;
animation: gleiten2 15s infinite linear  ;
}

@-webkit-keyframes gleiten2 {
 0% {left: 50%;}
 50% {left: 0%}
 100% {left: 50%}
}

@keyframes gleiten2 {
 0% {left: 0%;}
 50% {left: 70%;top:x35%}

 100% {left: 0%}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 40sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

 .gleiten3 {
-webkit-animation: gleiten3 20s infinite linear  ;
animation: gleiten3 20s infinite linear  ;
}

@-webkit-keyframes gleiten3 {
 0% {left: 50%;}
 50% {left: 0%}
 100% {left: 50%}
}

@keyframes gleiten3 {
 0% {left: 50%;}
 50% {left: 0%}
 100% {left: 50%}
}


/* ############################################################ */
/* backposmovie-4b */
/* ############################################################ */

.backposmovie-4b {
animation: backposmovie-4b 40s infinite;
animation-fill-mode:forwards;
}

@keyframes backposmovie-4b {
0% {background-position:0% 100%;}
50% {background-position:50% 0%;}
75% {background-position:80% 100%;}
100% {background-position:100% 100%;}
}

/* ############################################################ */
/* Animation |  KÄFER KRABBELT */
/* ############################################################ */

.slide-ani {
animation-name: slide-ani;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}

@keyframes slide-ani  {
0% {transform: translate(0) }
30%{transform: translate(0px, -220px)}
45%{transform:  translate(0px, -220px) rotate(180deg)}
80%{transform: translate(0px, 0px) rotate(180deg)}
90% {transform: translate(0) }
}

/* icon käfer */
.bug .fas {
color:#B70000;
font-size:2.5rem;
}

/* icon child */
.child .fas {
color:gold;
font-size:3rem;
}

.slide-ani2 {
animation-name: slide-ani2;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}

@keyframes slide-ani2  {
0% {transform: translate(0) }
30%{transform: translate(0px, -220px)}
45%{transform:  translate(0px, -220px) rotate(180deg)}

}


/* bilder -anpassen der grösse */
img {max-width: 100%;display:block;
margin:0 auto;
height: auto;
}

/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM  - für Bilder / Spalten */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {display:block;
text-align:center;
padding:0rem;margin:0 auto;
}

.box {display:inline-block;vertical-align:middle;
width:100%;
padding:.4rem;
text-align:left;
margin:0rem -.22rem 0rem -.22rem ;/* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

/*  boxen - grundsystem */
.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3,
.box-1_of_4,
.box-1_of_5 {width:100%; }


/*  boxen - für abweichungen vom boxen-grundsystem */




/*  boxen - boxen mit text */

article.text {font-size:x1.4rem;font-family:arial;
margin:0;margin-bottom:1.5rem;
text-align:left;letter-spacing:0px;
padding:1rem ;
}

article.text h3 {
font-size:x1.4rem;
line-height:x1.7rem;
margin: 0rem 0rem 1.5rem 0rem;
text-align:left;
}

/*  ----------------------------------------  */
/*  SLIDER Slick                           */
/*  ----------------------------------------  */

.schieber {padding:0rem;width:820px;}
.schieber .box-1_of_1  {width: 100%; }

.myslider.schieberegler-1 ximg {border:1rem solid white;padding:0;box-shadow:0 0 10px rgba(0,0,0,.9) }
.myslider.schieberegler-1 div {padding:1rem 0 0 0rem }