/* CSS HOME 2020 =================================== */


@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');


/* ---------- beziehungsgrafik --------  */
.grafik {width:70%; margin-left:15% }

@media all and (max-width: 960px) {
        .grafik {width:100%; margin-left:0% }
}




/* ---------- set --------  */

/* Small screens */
@media all and (max-width: 560px) {
        h1,
        .h1_eng {
                font-size:200%;
                }
}


.imgright {
        float: right;
        width: 30%;
        margin: 0 0 1.6em 2em;
}



/* Small screens */
@media all and (max-width: 560px) {
        .imgright {
                float: none;
                width: 100%;
                margin: 0 0 5px 0;
                }
}



/* -------------------- Portfolio Hero pictures mit Innenschriften --------------------- */

.bgimage1 {
         background-image: url(images_home/wald_04e.jpg);
}





.bgimage1 {
                 background-size: cover;
                 background-position: center;
                 width:100%;
                 height:500px;
                 margin-top:-17px;
                }


.bgimage1 {
         background-position: left;

}


/* Small screens */
@media all and (max-width: 1800px) {
        .bgimage1 {
                 height:500px;
                }
}

/* Small screens */
@media all and (max-width: 560px) {
        .bgimage1 {
                 height:300px;
                 margin-top:-13px;
                }
}


.h1_portfolio {
        font-family: 'Rubik', sans-serif;
        font-size: 4em;
        line-height: 0.8em;
        text-transform: uppercase;
        text-align:center;
        position:relative;
        top:155px;
        color:#ffffff;

}

/* Small screens */
@media all and (max-width: 560px) {
        .h1_portfolio {
                 font-size: 2em;
                 top:85px;
                }
}



.p_portfolio_oben {
        font-family: 'Noto Sans', sans-serif;
        font-size: 110%;
        color: #FFFFFF;
        letter-spacing: 0.05em;
        line-height:160%;
        text-transform: uppercase;
        text-align:left;
        position:relative;
        top:186px;
        padding-left:170px;
}

/* Small screens */
@media all and (max-width: 560px) {
        .p_portfolio_oben {
                 font-size: 80%;
                 top:110px;
                 padding-left:70px;
                }
}


.p_portfolio_unten {
        font-family: 'Noto Sans', sans-serif;
        font-size: 110%;
        color: #ffffff;
        letter-spacing: 0.05em;
        line-height:160%;
        text-transform: uppercase;
        text-align:center;
        position:relative;
        top:142px;
}


/* Small screens */
@media all and (max-width: 560px) {
        .p_portfolio_unten {
                 font-size: 80%;
                 top:75px;
                 line-height:120%;
                }
}






.pixa { opacity:1; }

.pixa:hover {

        transition: all .2s ease-in-out;
         }








/* ----------- borderbutton ----------- */
.gotoHB {
  background: #FFFFFF;
  height: 120px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #133645;
  margin-top:0px;
  margin-bottom:0px;
  width:70%;
  margin-left:15%;

  font-family: 'Roboto', sans-serif;
        font-size: 100%;
        color: #000000;
        line-height:1.3em;
        letter-spacing: 0.3em;
        text-align:center;
        text-transform: uppercase;
        hyphens: none;

  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .9s ease-in-out;
  transition: .9s ease-in-out;
}






.gotoHB:hover {
  background: #CEAD16;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #CEAD16;
  color: #FFFFFF;
  letter-spacing: 0.5em;
  transform:scale(1.0);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}


@media all and (min-width: 560px) {
        .gotoHB     {height: 200px; width:50%;  margin-left:25%; margin-right:0%; margin-top:0px; margin-bottom:0px; font-size: 120%;}

}

@media all and (min-width: 1000px) {
        .gotoHB     {height: 200px; width:30%; margin-left:35%; margin-right:0%; margin-top:0px; margin-bottom:00px; font-size: 120%;}
}











.p_noway {
        font-family: 'Roboto Slab', serif;
        font-size: 120%;
        color: #000000;
        letter-spacing: 0.05em;
        line-height:180%;
}

/* office screens */
@media all and (max-width: 1000px) {
        .p_noway {
        font-size: 100%;
        }
}

/* Mid screens */
@media all and (max-width: 810px) {
        .p_noway {
        font-size: 90%;
        }
}

/* Small screens */
@media all and (max-width: 560px) {
        .p_noway {
        font-size: 90%;
        }
}








/*   INTRO und H2 styles */




.wrapper_2 {
        max-width: 100%;
        margin: 0 auto;
         }


#container {
         position: relative;
         height:200px;
         width: 50%;
         background: linear-gradient(135deg, #AFAFAF, #FFFFFF);
         margin: 0px;
         float: left;
         }



#container div {
         position:absolute;
         left:0;
         top:0;
         height: 200px;

         background: linear-gradient(135deg, #BF0000, #FDF800);
         border:0px solid #00C0FF;
         -webkit-transition: 0.3s ease-in-out;
         -moz-transition: 0.3s ease-in-out;
         -ms-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
         transition: 0.3s ease-in-out;
         }

@media (min-width: 560px) {
         #container { width: 50%; height: 200px; }
         #container div { height: 200px; }
         }


@media (min-width: 760px) {
         #container { width: 33.33%; height: 250px; }
         #container div { height: 250px; }
         }


@media (min-width: 960px) {
         #container { width: 25%; height: 250px; }
         #container div { height: 250px; }
         }


@media (min-width: 1200px) {
         #container { width: 20%; height: 250px; }
         #container div { height: 250px; }
         }



#container div.lower {
         background: linear-gradient(135deg, #BF0000, #FDF800);
         -moz-backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         -moz-transform: perspective(600px) rotateY(180deg);
         -webkit-transform: perspective(600px) rotateY(180deg);
         transform: perspective(600px) rotateY(180deg);
         }

#container div.lower h2 { font-size:18px; padding-left:10px; padding-top:10px; margin:0; color:#FFFF00; line-height:110%;  }
#container div.lower p  { font-size:12px; padding-left:10px; margin-top:15px; color:#fff; line-height:130%; }

#container div.upper h2 { font-size:18px; padding-left:10px; padding-top:10px; margin:0; color:#FFFFFF; line-height:110%; }
#container div.upper p  { font-size:12px; padding-left:10px; margin-top:15px; color:#fff; line-height:130%; }



@media (min-width: 760px) {
         #container div.lower h2 { font-size:22px; padding-left:5%; padding-top:10px; margin:0; color:#FFFF00; line-height:110%;  }
         #container div.lower p  { font-size:14px; padding-left:5%; margin-top:15px; color:#fff; line-height:140%; }

         #container div.upper h2 { font-size:22px; padding-left:5%; padding-top:10px; margin:0; color:#FFFFFF; line-height:110%; }
         #container div.upper p  { font-size:14px; padding-left:5%; margin-top:15px; color:#fff; line-height:18px; }
         }


@media (min-width: 560px) {
         #container div.upper h2 {padding-right:20%;}
         }


@media (min-width: 1000px) {
         #container div.upper h2 {padding-right:40%;}
         #container div.lower p  {padding-right:20%;}
         }

#container div.upper {
         -moz-backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         -moz-transform: perspective(600px) rotateY(0deg);
         -webkit-transform: perspective(600px) rotateY(0deg);
         transform: perspective(600px) rotateY(0deg);
         background: none;
         }

#container:hover div.lower {
         -moz-transform: perspective(600px) rotateY(0);
         -webkit-transform: perspective(600px) rotateY(0);
         transform: perspective(600px) rotateY(0);
         }

#container:hover div.upper {
         -webkit-transform: perspective(600px) rotateY(-179.9deg);
         -moz-transform: perspective(600px) rotateY(-179.9deg);
         transform: perspective(600px) rotateY(-179.9deg);
         }




/* -------------------- Leitidee BOXEN mobil ------------2018 NICHT MEHR VERWENDET --------- */


.framebox {
        width: 19.0%;
        height: 100px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 3px;
        margin-bottom: 3px;
        c
        border:1px solid #00C0FF;
        float:left;
    }





/* office screens */
@media all and (max-width: 1000px) {
        .framebox {
                margin-top: 2px;
                margin-bottom: 2px;
                }
}


/* Mid screens */
@media all and (max-width: 810px) {
        .framebox {
                margin-top: 2px;
                margin-bottom: 2px;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        .framebox {
                width: 31.5%;
                margin-left: 0.5%;
                margin-right: 0.5%;
                margin-top: 2px;
                margin-bottom: 2px;
                }
}


.h2_framebox {
        font-family: 'Noto Sans', sans-serif;
        font-size: 160%;
        font-weight: normal;
        line-height: 1.1em;
        color: #000000;
        text-transform: uppercase;
        padding-left: 3px;
        margin-top:36px;
}



/* office screens */
@media all and (max-width: 1000px) {
        .h2_framebox {
        font-size: 120%;
        }
}

/* Mid screens */
@media all and (max-width: 810px) {
        .h2_framebox {
        font-size: 90%;
        }
}

/* Small screens */
@media all and (max-width: 560px) {
        .h2_framebox {
        font-size: 80%;
        }
}













/* --------------- 1000er screens ---------- */

@media all and (max-width: 1000px) {
    .comments {
                display:none;
        }
}




/* --------------- branchenerfahrung und gmbh ---------- */

.listeerfahrung {margin-left:30%;
        padding-left: 0px;
        list-style:none;
        font-family: 'Noto Sans', sans-serif;
        font-weight:700;
        color: #000000;
        font-size: 110%;
        line-height: 1.4em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
}

/* Small screens */
@media all and (max-width: 560px) {
        .listeerfahrung {
                font-size:90%;
                margin-left:0%;
                }
}


.gmbh {
         margin-left:30%;
    }

@media all and (max-width: 560px) {
        .gmbh {
        margin-left: 0%;
        }
}










/* ------- ==================  Styles Seite Agentur ===============================================================  --------- */
.besonder_L {
        width:50%;
        background: linear-gradient(90deg, #FFFFFF, #FFFFFF);
        float:left;
}


.besonder_R {
        width:50%;
        float:left;

}

.h2_besonder {
        font-size: 160%;
        font-weight: 700;
        letter-spacing: 0.00em;
        line-height: 1.1em;
        color: #000000;
        text-transform: uppercase;
        margin-top:15px;
        text-align:right;
        padding-right:10px;
}

.p_besonder {
        font-size: 100%;
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 150%;
        color: #6F6F6F;
        margin-top:21px;
        padding-left:10px;
}



@media all and (max-width: 560px) {
        .besonder_L { width:100%; float:none;  }
        .besonder_R { width:100%; float:none;  }
        .h2_besonder {font-size:130%;  line-height: 1.3em; margin-top:0px;  margin-bottom:10px; text-align:left; padding-right:0px;}
        .p_besonder { font-size:85%;  line-height: 1.3em;  margin-top:00px; margin-bottom:0px; padding-left:20px; }
}




.linehalf
         {
         margin-left: auto;
         margin-right: auto;
         width: 0.0em;
         height:10px;
         background-color:#FFFFFF;
         border-left: 0px solid #FFFFFF;
         }


@media all and (max-width: 560px) {
        .linehalf { height:1px;}
}



.color_white     { color: #FFFFFF;  }
.color_lightgrey  { color: #EFEFEF; }
.color_midgrey     { color: #AFAFAF; }
.color_black     { color: #000000; }
.color_gold     { color: #C9B319; }




/* ======================================= 2020 NEU =============================================== */

/* ----------- borderbutton ----------- */
.startmenu {
  background: #FFFFFF;
  height: 60px;

  margin-top:0px;
  margin-bottom:0px;
  width:50%;
  margin-left:0%;
  border-left:1px solid #CFCFCF;

  float:left;

  font-family: 'Roboto', sans-serif;
        font-size: 100%;
        color: #7F7F7F;
        line-height:1.3em;
        letter-spacing: 0.2em;
        text-align:center;
        text-transform: uppercase;
        hyphens: none;

  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .9s ease-in-out;
  transition: .9s ease-in-out;
}

.active {
  background: #FFFFFF;
  color:#000000;
  letter-spacing: 0.4em;
  font-weight:600;
}


.startmenu:hover {
  background: #FFFFFF;
  color:#000000;
  letter-spacing: 0.4em;
  font-weight:600;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}


@media all and (min-width: 560px) {
        .startmenu     {height: 80px; width:50%; font-size: 120%;}

}

@media all and (min-width: 1000px) {
        .startmenu     {height: 80px; width:25%; font-size: 120%;}
}











/* ----------- botton  ----------- */

.gotobuttons {
  margin-top:20px;
  margin-bottom:0px;
  width:100%;
}

.gotomore {
  background-color:rgba(255,255,255,0.5);
  height: 60px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #133645;
  width:60%;


  float:left;

  font-family: 'Roboto', sans-serif;
        font-size: 75%;
        color: #000000;
        line-height:1.3em;
        letter-spacing: 0.2em;
        text-align:center;
        text-transform: uppercase;
        hyphens: none;

  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .9s ease-in-out;
  transition: .3s ease-in-out;
}


.gotomore:hover {
  background-color:rgba(100,100,100,1.0);
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #133645;
  color: #FFFFFF;
  letter-spacing: 0.4em;
  transform:scale(1.0);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}


@media all and (min-width: 560px) {
        .gotomore     {height: 60px; width:60%;  font-size: 80%;}

}

@media all and (min-width: 1200px) {
        .gotomore     {height: 60px; width:60%; font-size: 90%;}
}









/* ----------- botton  ----------- */
.gotoanfrage {
  background: #E0EEB1;
  height: 60px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 0px solid;
  border-right: 1px solid;
  border-color: #133645;
  width:40%;
  margin-left:0%;

  font-family: 'Roboto', sans-serif;
        font-size: 75%;
        color: #000000;
        line-height:1.3em;
        letter-spacing: 0.2em;
        text-align:center;
        text-transform: uppercase;
        hyphens: none;

  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-transition: .9s ease-in-out;
  transition: .3s ease-in-out;
}


.gotoanfrage:hover {
  background: #1B9050;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 0px solid;
  border-right: 1px solid;
  border-color: #133645;
  color: #FFFFFF;
  letter-spacing: 0.4em;
  transform:scale(1.0);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}


@media all and (min-width: 560px) {
        .gotoanfrage     {height: 60px; width:40%; font-size: 80%;}

}

@media all and (min-width: 1200px) {
        .gotoanfrage     {height: 60px; width:40%; font-size: 90%;}
}







.headsub {
         margin-top:600px;
         background-color:rgba(255,255,255,0.0);
         padding:2px 0 2px 2px;
}

@media all and (max-width:1200px) {.headsub {margin-top:400px;}}
@media all and (max-width: 960px) {.headsub {margin-top:420px;}}
@media all and (max-width: 760px) {.headsub {margin-top:20px; margin-left:20px;}}
@media all and (max-width: 560px) {.headsub {margin-top:20px; margin-left:20px;}}


.headlogo { width:50%;margin-left:20px; margin-top:500px}
@media all and (max-width:1200px) {.headlogo { width:75%;margin-left:20px;}}
@media all and (max-width: 760px) {.headlogo { width:75%;margin-left:20px;}}
@media all and (max-width: 560px) {.headlogo { width:75%;margin-left:20px;}}

.iconreihe {width:60%; margin-left:0%;}
@media all and (max-width:1200px) {.iconreihe {width:70%; margin-left:0px;} }
@media all and (max-width: 760px) {.iconreihe {width:60%; margin-left:20px;} }
@media all and (max-width: 560px) {.iconreihe {width:90%; margin-left:20px;} }





.bu_parax {
        font-size: 90%;
        color: #7F7F7F;
        text-transform: uppercase;
        text-align:right;
        padding:0 20px 0 0px;
}

@media all and (max-width:1200px) {.bu_parax {font-size: 90%; text-align:right; padding:0 20px 0 0;} }
@media all and (max-width: 760px) {.bu_parax {font-size: 90%; text-align:right; padding:0 10% 0 20px;} }
@media all and (max-width: 560px) {.bu_parax {font-size: 80%;  text-align:left; padding:0 15px 0 20px; max-width:70%;} }








.methode {
         margin-top:550px;
         background-color:rgba(255,255,255,0.0);
         padding:2px 0 2px 0px;
}

@media all and (max-width:1200px) {.methode {margin-top:400px;}}
@media all and (max-width: 960px) {.methode {margin-top:450px; padding:2px 0 2px 0px;}}
@media all and (max-width: 760px) {.methode {margin-top:400px; margin-left:50%;padding:2px 0 2px 20px;}}
@media all and (max-width: 560px) {.methode {margin-top:250px; margin-left:0%; padding:2px 0 2px 20px;}}



.bu_methode {
        font-size: 100%;
        color: #2F2F2F;
        text-transform: uppercase;
        text-align:left;
        padding:0 10px 0 0px;
}

@media all and (max-width:1200px) {.bu_methode {font-size: 90%; text-align:left; padding:0 10% 0 0;} }
@media all and (max-width: 760px) {.bu_methode {font-size: 90%; text-align:left; padding:0 10% 0 0;} }
@media all and (max-width: 560px) {.bu_methode {font-size: 80%;  text-align:left; padding:0 15px 0 0px; max-width:70%;}
}



.bu_remark {
        font-size: 100%;
        color: #B89D1B;
        text-transform: ;
        text-align:left;
        padding:0 0px 0 20px;
}

@media all and (max-width:1200px) {.bu_remark {font-size: 90%; text-align:left; padding:0 0 0 20px;} }
@media all and (max-width: 760px) {.bu_remark {font-size: 90%; text-align:left; padding:0 0 0 20px;} }
@media all and (max-width: 560px) {.bu_remark {font-size: 80%;  text-align:left; padding:0 0 0 20px; }
}










/* Jarallax - Werte
max-width: 1200px: height: 800px;
max-width: 760px:  height: 800px;
max-width: 560px:  height: 300px;
*/


@media all and (max-width: 961px) {
        .displayprlxnone {
                display:none;
                }
}



/*  ... schaltet bei kleineren ein
                 bei größeren  aus*/
@media all and (min-width: 960px) {
        .displayprlxmob {
                display:none;
                }
}





.leftgap {margin-left:20px;}






.subtit {
        font-family: 'Lato', sans-serif;
        font-weight:600;
        font-size: 180%;
        color: #F0FF00;
        text-transform: uppercase;
        text-align:right;
        padding-left:0px;
        padding-right:10%;
        line-height:110%;

}

@media all and (max-width: 760px) {
        .subtit {padding-left:00px; }
}


@media all and (max-width: 960px) {
        .subtit {font-size: 140%; padding-right:10px;}
}




.park {
        font-family: 'Lato', sans-serif;
        font-weight:700;
        }


.maxwidth_R {max-width:700px; padding-right:15px;}



.blend {

mix-blend-mode: multiply;
mix-blend-mode: screen;

}






/* ======== GRIDS =========== */
.parent_vier_22 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 2fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin-bottom:0px
}

.vier_22_a { grid-area: 1 / 1 / 2 / 3; border:0px solid #FF9F00;}
.vier_22_b { grid-area: 1 / 3 / 2 / 5; border:0px solid #FF0000; }

/* Small screens */
@media all and (max-width: 760px) {
        .vier_22_a { grid-area: 1 / 1 / 2 / 5; border:0px solid #DF00FF;}
        .vier_22_b { grid-area: 2 / 1 / 3 / 5; border:0px solid #00FFFF; }
}



.vier_1111_a {border-left:0px solid #AFAFAF; padding:2px 0 2px 0;}
.vier_1111_b,
.vier_1111_c,
.vier_1111_d {border-left:1px solid #AFAFAF; padding:2px 0 2px 0;}


.vier_1111_a,
.vier_1111_b,
.vier_1111_c,
.vier_1111_d {}






.vier_1111_a { grid-area: 1 / 1 / 2 / 2; }
.vier_1111_b { grid-area: 1 / 2 / 2 / 3; }
.vier_1111_c { grid-area: 1 / 3 / 2 / 4; }
.vier_1111_d { grid-area: 1 / 4 / 2 / 5; }


/* Small screens */
@media all and (max-width: 760px) {
         .vier_1111_a { grid-area: 1 / 1 / 2 / 3; }
         .vier_1111_b { grid-area: 1 / 3 / 2 / 5; }
         .vier_1111_c { grid-area: 2 / 1 / 3 / 3; }
         .vier_1111_d { grid-area: 2 / 3 / 3 / 5; }
}








.parent_fuenf_11111 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin-bottom:-4px
border:0px solid #FF0000;
}

.fuenf_a { grid-area: 1 / 1 / 2 / 2; }
.fuenf_b { grid-area: 1 / 2 / 2 / 3; }
.fuenf_c { grid-area: 1 / 3 / 2 / 4; }
.fuenf_d { grid-area: 1 / 4 / 2 / 5; }
.fuenf_e { grid-area: 1 / 5 / 2 / 6; }



/* ======== SVG Words =========== */
/* ==== competence  =========== */
.luxury    {width:49%; margin-left:49%; margin-top:0px; }
.tech      {width:50%; margin-left:35%; margin-top:-4px; }
.mobi      {width:50%; margin-left:15px; margin-top:-2px; }
.xxx  {width:97%; margin-left:15px; margin-top:-4px; mix-blend-mode:screen;}


@media all and (max-width: 1200px) {
.luxury    {width:75%; margin-left:15px; margin-top:-0px;  }
.tech      {width:65%; margin-left:15px; margin-top:0px; }
.mobi      {width:65%; margin-left:15px; margin-top:0px; }
.xxx  {width:97%; margin-left:15px; margin-top:-4px;}

}

@media all and (max-width: 760px) {
.luxury    {width:95%; margin-left:15px; margin-top:0px;  }
.tech      {width:65%; margin-left:15px; margin-top:0px; }
.mobi      {width:65%; margin-left:15px; margin-top:0px; }
.xxx  {width:95%; margin-left:15px; margin-top:-4px; mix-blend-mode:;}

}



/* ======== disziplinen =========== */

.ziffer          {width:15%; margin-left:35%; margin-bottom:-4px;}
.zifferdrei      {width:25%; margin-left:25%; margin-bottom:-4px;}
.andersdenken    {width:50%; margin-left:50%; margin-top:-3px;}
.produktideen    {width:45%; margin-left:15px; margin-top:0px;}
.werte           {width:60%; margin-left:15px; margin-top:-0px;  mix-blend-mode: multiply;}
.strategie       {width:70%; margin-left:15px; margin-top:10px;  mix-blend-mode: ; opacity:1;}
.argumentationen {width:70%; margin-left:15px; margin-top:-2px;  }
.branddesign     {width:70%; margin-left:15px; margin-top:10px;  mix-blend-mode: ; opacity:0.9;}
.cd              {width:70%; margin-left:15px; margin-top:-2px;  mix-blend-mode: multiply;}
.keyvisuals      {width:70%; margin-left:15px; margin-top:-2px;  mix-blend-mode: ; opacity:0.8;}
.packaging       {width:69%; margin-left:15px; margin-top:-2px;  mix-blend-mode: ;}
.print           {width:50%; margin-left:15px; margin-top:-0px;  mix-blend-mode: ;}
.online          {width:69%; margin-left:15px; margin-top:-2px;  mix-blend-mode: ;}
.video           {width:69%; margin-left:30%; margin-top:-4px; mix-blend-mode: multiply;}
.messe           {width:80%; margin-left:15px; margin-top:-4px; mix-blend-mode:screen;}
.auchnoch        {width:97%; margin-left:15px; margin-top:0px; mix-blend-mode:screen;}
.moeglichkeiten  {width:97%; margin-left:15px; margin-top:-4px; mix-blend-mode:screen;}


@media all and (max-width: 1200px) {
.ziffer          {width:30%; margin-left:20%; margin-bottom:-4px;}
.zifferdrei      {width:40%; margin-left:10%; margin-bottom:-4px;}
.andersdenken    {width:50%; margin-left:50%; margin-top:-3px;}
.produktideen    {width:75%; margin-left:15px; margin-top:-0px;  }
.werte           {width:75%; margin-left:15px; margin-top:-0px;  }
.strategie       {width:75%; margin-left:15px; margin-top:-0px;  }
.argumentationen {width:70%; margin-left:15px; margin-top:-2px;  }
.branddesign     {width:70%; margin-left:15px; margin-top:-2px; }
.cd              {width:75%; margin-left:15px; margin-top:-2px;}
.keyvisuals      {width:75%; margin-left:15px; margin-top:-1px;}
.packaging       {width:75%; margin-left:15px; margin-top:-3px;}
.print           {width:75%; margin-left:15px; margin-top:-0px;}
.online          {width:75%; margin-left:15px; margin-top:-1px;}
.video           {width:70%; margin-left:28%; margin-top:-2px;}
.messe           {width:80%; margin-left:15px; margin-top:-4px;}
.auchnoch        {width:97%; margin-left:15px; margin-top:0px;}
.moeglichkeiten  {width:97%; margin-left:15px; margin-top:-4px;}

}

@media all and (max-width: 760px) {
.ziffer          {width:25%; margin-left:5px; margin-bottom:-3px;}
.zifferdrei      {width:40%; margin-left:5px; margin-bottom:-4px;}
.andersdenken    {width:50%; margin-left:50%; margin-top:-3px;}
.produktideen    {width:95%; margin-left:5px; margin-top:0px;  }
.werte           {width:95%; margin-left:5px; margin-top:0px;  }
.strategie       {width:95%; margin-left:5px; margin-top:0px;  }
.argumentationen {width:95%; margin-left:5px; margin-top:0px;  }
.branddesign     {width:95%; margin-left:5px; margin-top:0px;  }
.cd              {width:95%; margin-left:5px; margin-top:0px;  }
.keyvisuals      {width:95%; margin-left:5px; margin-top:-2px;  }
.packaging       {width:95%; margin-left:5px; margin-top:-2px;  }
.print           {width:95%; margin-left:5px; margin-top:-0px;  }
.online          {width:95%; margin-left:5px; margin-top:-2px; }
.video           {width:95%; margin-left:5px; margin-top:-4px; }
.messe           {width:95%; margin-left:5px; margin-top:-4px; }
.auchnoch        {width:95%; margin-left:5px; margin-top:0px; }
.moeglichkeiten  {width:95%; margin-left:5px; margin-top:-4px; }

}



.shine           {mix-blend-mode:screen;}




/* ===== aufklappliste collapsible == */
button{
   font-size:100%;
}



.collapsible {
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  padding: 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;


}

.collapsible:hover {
  background-color: #FFFFFF;
}

.active {
  background-color: #FFFFFF;
}

.content {
  padding: 0px 0px 0 17px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background-color: #FFFFFF;
  border-left:1px solid #000000;

}

.mehrlist
        {
        line-height: 1.7em;
        color: #3F3F3F;
        padding:0 0 5px 0px;
        margin:0px;
}


.mehrlist:hover
        {
        line-height: 1.7em;
        color: #B89D1B;
        padding:0 0 5px 0px;
        margin:0px;
}


.plusbullet
        {
        line-height: 1.7em;
        font-weight: 900;
        color: #C1A41A;
        padding:0px 6px 0px 4px;
        margin-left:3px;

        border-radius:0%;
        border-left:1px solid #C1A41A;
        border-right:1px solid #C1A41A;
        border-top:0px solid #C1A41A;

}

.erklaerung
        {
        font-size:105%;
        line-height: 1.6em;
        color: #B89D1B;
        padding:00px 10px 20px 10px;

}

@media all and (max-width: 1300px) {
       .erklaerung     {font-size:95%;}
}


@media all and (max-width: 560px) {
       .erklaerung     {font-size:90%;}
}




.eyecatch
        {
        font-family: 'Roboto', sans serif;
        font-size: 140%;
        font-weight: 900;
        letter-spacing: 0.12em;
        line-height: 1.4em;
        color: #B89D1B;
        padding:10px 0 0 0px;
        text-align:left;
        text-transform: uppercase;
}


@media all and (max-width: 560px) {
       .eyecatch     {font-size:120%;}
}


.leistungenlist
        {
        font-family: 'Roboto', sans serif;
        font-size: 100%;
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 1.4em;
        color: #000000;
        padding:0 0 0 0px;
        text-align:left;
        text-transform: uppercase;
}








.number
        {
        font-family: 'Lato', sans serif;
        font-size: 21em;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.0em;
        color: #000000;
        padding:0 0 0 0px;
        margin:0px;
        text-align:right;
        text-transform: uppercase;
}



.benefit
        {
        font-family: 'Lato', sans serif;
        font-size: 200%;
        font-weight: 900;
        letter-spacing: 0.05em;
        line-height: 1.3em;
        color: #000000;
        padding:0 0 0 15px;
        margin-bottom:26px;
        text-transform: uppercase;
}



@media all and (max-width: 1300px) {
       .benefit     {font-size:165%;}
}


@media all and (max-width: 560px) {
       .benefit     {font-size:140%;}
}




.bold           {font-weight:600;}




.demo-gap {
    padding-top: 10px;
    background-color: #FFFFFF;

}





.imgfilmpreis {
        width: 50%;
}

/* Small screens */
@media all and (max-width: 560px) {
        .imgfilmpreis {
                width: 60%; margin-left:17%; margin-top:20px;
                }
}



.bgcolor_introfade {background: linear-gradient(135deg, #FFFFFF, #000000) }


@media all and (max-width: 760px) {
.bgcolor_introfade {background: linear-gradient(135deg, #9F9F9F, #000000) }
}