/* Prym Ladenbau */

* {     -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
         box-sizing: border-box;
         }




body {
         animation:fadein 0.9s;
         -moz-animation:fadein 0.9s;
         -webkit-animation:fadein 0.9s;
         scroll-behavior: smooth;
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;

}

body  {
         max-width:2540px;
         margin: 0 auto;
         outline:none;
         }

.wrapper {
        max-width: 1280px;
        padding: 0 0 0 0;
        margin: 0 auto;
         }

@media all and (max-width: 1179px) {
        .wrapper {
        padding: 0 15px 0 15px;
         }
}


.wrapper960 {
        max-width: 960px;
        padding: 0 0px 0 0px;
        margin: 0 auto;
         }


@media all and (max-width: 959px) {
        .wrapper {
        padding-left: 15px;
        padding-right: 15px;
         }
}













/* --- hintergrundfarben --- */
.bgcolor_creme {background-color: #F9F7EB; }
.bgcolor_brown {background-color: #522405 ; }

.bgcolor_white {background-color: #FFFFFF; }
.bgcolor_black {background-color: #000000; }
.bgcolor_lightblack {background-color: #3F3F3F; }
.bgcolor_darkgrey {background-color: #5F5F5F; }
.bgcolor_lightgrey {background-color: #EFEFEF; }
.bgcolor_shinygrey {background-color: #f4f4f5; }
.bgcolor_midgrey {background-color: #DFDFDF; }
.bgcolor_mittelgrau {background-color: #5F5F5F; }

.bgcolor_kartongrau {background-color: #cbd1cb; }
.bgcolor_kartonhell {background-color: #e9ece9; }


.bgcolor_darkbrown {background-color:#40312a; }
.bgcolor_shabby {background-color:#f3eee8; }
.bgcolor_sustain {background-color:#eedfce; }


.bgcolor_intro3 {background-color:#535f61; }


.bgfac { background-color:#40312a;}
.bgshab { background-color:#f3eee8;}
.bgstud { background-color:#ffffff;}
.bgsus { background-color:#eedfce;}












.padding {
        padding:0% 2% 0% 2%;
}











/* --------------- BILDER ===================================  ------------- */
img      {width: 100%;}


.img100  {width: 100%;margin-bottom:-3px;}

.bigmargin  {width: 60%;margin-left:2.5%;}






/* --------------- zwei Bilder ohne Abstand nebeneinander ------------- */
.imgtwin {width: 50%;float:left;}

@media all and (max-width: 560px) {
        .imgtwin {width: 100%;}
}


.imgthirds {width: 33.33%;float:left;}

@media all and (max-width: 560px) {
        .imgthirds {width: 100%;}
}



.imgquads {width: 25%;float:left;}

@media all and (max-width: 560px) {
        .imgquads {width: 50%;}
}



/* --------------- zwei Bilder mit Abstand nebeneinander ------------- */
.imgdouble {
        width: calc(50% - 20px);
        margin:10px 10px 10px 10px;
        background-color: #DFDFDF;
        box-shadow: 5px 10px 10px #CFCFCF;
        float:left;
}

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




/* --------------- Box für 1 Bild halb ------------- */
.imghalf {
        width: 50%;
        margin:10px 0px 10px 0px;
        box-shadow: 5px 10px 10px #CFCFCF;
}

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



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


.img33 {width: 33.3333%; margin-left:33.3%;}
@media all and (max-width: 560px) {
        .img33 {width: 50%; margin-left:25%;}
}


.img25 {width: 25%; margin-left:37.5%;}
@media all and (max-width: 560px) {
        .img25 {width: 50%; margin-left:25%;}
}


.imgclock {
        width: 25%;
        margin-left:37.5%;
        margin-bottom:40px;
}

/* Small screens */
@media all and (max-width: 560px) {
        .imgclock {
                width: 50%;
                margin-left:25%;
                }
}






/* LOGOHEADER */
.logoheader {
        margin:30px 0 30px 0;
        vertical-align: bottom;

}

.logoleft {
        width: 30%;
        vertical-align: bottom;
}

.logoright {
        width: 70%;
        padding-left:10px;
        vertical-align: bottom;
}

.logoline {
        font-size:160%;
        font-weight: 300;
        color: #3F3F3F;
        text-transform: uppercase;
        line-height:100%;
        margin-bottom:5px;
        vertical-align: bottom;
}

@media all and (max-width: 760px) {
         .logoleft {width: 40%;}
         .logoright {width: 60%;}
         .logoline {font-size:140%;  }

}


@media all and (max-width: 660px) {
         .logoheader {margin:20px 0 20px 0;}
         .logoleft {width: 50%;}
         .logoright {width: 50%;}
         .logoline {font-size:120%;  }

}


@media all and (max-width: 560px) {
         .logoleft {width: 90%;}
         .logoright {width: 10%;}
         .logoline {font-size:80%;  }

}




/* LOGOS FÜR STYLES */
.stylelogo {
        width: 60%;
        margin-left:20%;
        margin-top:00px;

}

@media all and (max-width: 1200px) {
        .stylelogo { width: 100%; margin-left:00%;}
}


/* Small screens */
@media all and (max-width: 650px) {
        .logo {
                width: 25%;
                }
}




.arrow_filled_down {
        margin-top:-2px;

}
















/* ============= buttons =========== */


.goto1,
.goto2 {
        width: 16.2%;
        height: 100px;
        margin:2px 0.2%;
        border: 1px solid #FFFFFF;
        border-radius: 8px;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        float:left;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #2F2F2F;
                line-height:1.3em;
               letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.goto1 {
        background: #CFCFCF;

}

.goto2 {
        background: #EFEFEF;
}

.goto1:hover,
.goto2:hover {
        cursor:pointer;
        color: #FFFFFF;
        border: 1px solid #AFAFAF;
        background: #FF0000;
        transform: scale(1.2);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
opacity:0.7;
}


/* Mid screens */
@media all and (max-width: 1200px) {
         .goto1,
         .goto2 {
                width: 24.55%;
                }
}

/* Small screens */
@media all and (max-width: 560px) {
         .goto1,
         .goto2 {
                width: 49.6%;
                }
}







.goto2_mid {
        width: 32.8%;
        height: 120px;
        margin-left:33.3%;
        margin-bottom:40px;
        border: 1px solid #DF0000;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
         background: #E21E11;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #FFFFFF;
                line-height:1.3em;
               letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.goto2_mid:hover {
        cursor:pointer;
        color: #d3000c;
        border: 1px solid #DF0000;
        background: #f6f6f6;
        transform: scale(1.1);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
opacity:0.8;
}

/* Mid screens */
@media all and (max-width: 1200px) {
        .goto2_mid {
                width: 50%;
        height: 120px;
        margin-left:25%;
                }
}

/* Small screens */
@media all and (max-width: 560px) {
        .goto2_mid {
                width: 100%;
        height: 120px;
        margin-left:0%;
                }
}






.gotostyle {
        width: 100%;
        height: 40px;
        margin-left:0%;
        margin-bottom:20px;
        border: 0px solid #AFAFAF;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
         background: #000000;
        opacity:0.6;
        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #CFCFCF;
                line-height:1.3em;
               letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.gotostyle:hover {
        cursor:pointer;
        color: #FF0000;
        border: 0px solid #AFAFAF;
        background: #EFEFEF;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
opacity:0.8;
}

/* Mid screens */
@media all and (max-width: 1700px) {
        .gotostyle {
                width: 100%;
        height: 40px;
        margin-left:00%;
                }
}


@media all and (max-width: 560px) {
        .gotostyle {
                width: 100%;
        height: 40px;
        margin-left:00%;
        margin-bottom:0px;
                }
}








/* ======== Buttonleiste oben auf den 4 Sparten ======= */
.switcher_fac,
.switcher_shab,
.switcher_sus
         {
        width: 25%;
        height: 60px;
        margin-bottom:0px;
        margin-right:-2px;
          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        float:left;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


/* Mid screens */
@media all and (max-width: 1200px) {
         .switcher_fac,
         .switcher_shab,
         .switcher_sus {
                width: 25%;
                }
}

/* Small screens */
@media all and (max-width: 560px) {
         .switcher_fac,
         .switcher_shab,
         .switcher_sus {
                width: 50%;
                height: 36px;
                margin-bottom:0px;
                border-bottom: 1px solid #8F8F8F;
                }
}





.switcher_fac {
        border-left: 2px solid #8F8F8F;
        border-right: 2px solid #8F8F8F;
        color: #AFAFAF;
}



.switcher_shab {
        border-left: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        color: #AFAFAF;
}

.switcher_sus {
        border-left: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        color: #AFAFAF;
}


.switcher_fac:hover,
.switcher_shab:hover,
.switcher_sus:hover
         {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
         transition: .2s ease-in-out;
         opacity:0.7;
}




.switcher_fac:hover
         {
        color: #FFFFFF;
        border-left: 2px solid #8F8F8F;
        border-right: 2px solid #8F8F8F;
        background: #8F8F8F;
}

.switcher_shab:hover
         {
        color: #FF0000;
        border-left: 2px solid #FFFFFF;
        border-right: 2px solid #FFFFFF;
        border-bottom:0px solid #FF0000;
        background: #FFFFFF;
}

.switcher_sus:hover
         {
        color: #FFFFFF;
        border: 1px solid #AFAFAF;
        background: #AFAFAF;
}


.onn
        {
        color: #FF0000;
        opacity:0.7;
}










/* ======== bu startseite ======= */
.heropicbu
         {
        width: 25%;
        height: 30px;
        margin-bottom:-40px;
        padding-left:20px;
        border-left: 2px solid #8F8F8F;
        color: #AFAFAF;
          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}

.heropicbu:hover
         {
        cursor:pointer;
        background: #6F6F6F;
        color: #FFFFFF;
        border-left: 2px solid #8F8F8F;

        -webkit-transition: .3s ease-in-out;
         transition: .2s ease-in-out;
         opacity:0.8;
}

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



/* ======== Headerbuttons links/rechts im Bild ======= */
.header {
        position:relative;
        width:100%;
}

.left {
  position: absolute;
  top: calc(50% - 50px);
  left: 16px;
  cursor:pointer;
  opacity:0.8;

}

.right {
  position: absolute;
  top: calc(50% - 50px);
  right: 16px;
  cursor:pointer;
  opacity:0.7;
}


.left:hover, .right:hover {
        transform: scale(1.1);
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
        opacity:1;
}



.arrow {
        width: 100px;
}


/* Small screens */
@media all and (max-width: 760px) {
        .left { display:none;}
         .right { display:none;}
}








.butcenter {
        width: 100px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top:40px;
        margin-bottom:40px;
}

/* Small screens */
@media all and (max-width: 560px) {
        .butcenter {
                width: 70px;
                }
}










/* ============= artiboxes =========== */


.icoL {width:50px; }
.txtR {width: calc(100% - 50px); }
.icon_erkl {width:50px; position:relative; top:0px; margin:0px 10px 0px 0px; border:0px solid #afafaf;}




.middler  {margin-left:2%; margin-right:2%;}




.artibox_type4 {display: block;float:left;margin:0.5%;padding:0px;position:relative;}
.artibox_type4 {width:65.666%;height:auto;}

.artibox_type5 {display: block;float:left;margin:0.5%;padding:0px;position:relative;}
.artibox_type5 {width:32.333%;height:auto;}

.artibox_type6 {display: block;float:left;margin:0.5%;padding:0px;position:relative;}
.artibox_type6 {width:32.333%;height:auto; }

.artibox_but5 {margin-top:00px; height:60px; margin-left:12px;
               -webkit-transition: .3s ease-in-out;
               transition: .2s ease-in-out;
               border:0px solid #000000;}

@media all and (max-width: 2300px) {
        .artibox_type4 {  width:65.666%;}
        .artibox_type5 {  width:32.333%;}
        .artibox_type6 {  width:32.333%;}

}


@media all and (max-width: 1500px) {
        .artibox_type4 {  width:100%;}
        .artibox_type5 {  width:100%;}


}

@media all and (max-width: 1200px) {
        .artibox_type4 {  width:100%;}
        .artibox_type5 {  width:100%;}
        .artibox_type6 {  width:48%;}

}



@media all and (max-width: 540px) {
        .artibox_type4 {  width:100%;}
        .artibox_type5 {  width:100%;}
        .artibox_type6 {  width:100%;}

}


/* ============= accordeon =========== */
.collapsible {
    background-color: #4F4F4F;
    color: #FFFFFF;
}

.collapsible_last {
    background-color: #4F4F4F;
    color: #FFFFFF;
}

.active, .collapsible:hover,
.collapsible_last:hover {
    background-color: #6F6F6F;
}

.innertext {
        color: #FFFFFF;
}




/* ============ artibox (neu: moma) elements ============= */

.artibox_what {
        font-family: 'Roboto', sans-serif;
        font-weight:700;
        text-transform:uppercase;
        font-size: 95%;
        color: #956a47;
        margin-top:10px;
        line-height:120%;
        letter-spacing: 0.05em;
        padding-left:20px;
}


.artibox_list {
        padding-left: 10px;
        font-family: 'Roboto', sans-serif;
        color: #000000;
        font-size: 100%;
        line-height: 140%;
        letter-spacing: 0.05em;
}

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

.artibox_icons {width:50px; float:left; margin:0px 10px 0px 5px; }

@media all and (max-width: 1500px) {
.artibox_icons {width:40px; float:left; margin:0px 10px 0px 5px; }
}












.nobullet  {
        list-style: none;

}




.liste_p {
        padding-left: 10px;
        list-style-type: disc;
        font-family: 'Roboto', sans-serif;
        font-size: 95%;
        color: #333;
        line-height:160%;
}










/* ===================== SPANS ========================= */
span.mehr {
         display: block;
         margin-top: 30px;
         height: 30px;
         background-color: #CFCFCF;
         padding: 3px 10px 1px 2%;
         color: #FFFFFF;
         font-size: 1.7em;
         font-weight: normal;
         letter-spacing: 0.08em;
         cursor: Pointer;
}
span.mehr:hover {
         color: #5F5F5F;
}


span.aufklapp {
         color: #9F9F9F;
         cursor: Pointer;
}
span.aufklapp:hover {
         color: #FFFFFF;
}




/*  SHOW HIDE neu 03  */
.show_container {
  text-align: left;
  background-color: none;
  border: none;
  padding:0% 0% 0% 0%;
  cursor: pointer
}


.show_container div p {
  cursor: default !important;
  margin-bottom: 10px
}


.hidden>div {
  display: none
}




.show_container2 {
  text-align: left;
  transition: all 1s ease-in;
  background-color: none;
  border: none;
  padding:0% 0% 0% 0%;
  cursor: pointer;
  margin-top: 00px;
 border:0px solid #ff0000;
margin-bottom: 0px;
}


.show_container2 div p {
  cursor: default !important;
  transition: all 1s ease-in;
  margin-bottom: 00px;

}







span.mehrklein {
         display: block;
         margin-top: 00px;
         height: 30px;
         background-color: #FFFFFF;
         padding: 0px 10px 1px 0;
         color: #1AAFB4;
         font-size: 1.1em;
         font-weight: bold;
         letter-spacing: 0.08em;
         cursor: Pointer;
}
span.mehrklein:hover {
         color: #5F5F5F;
}


span.aufklappklein {
         color: #9F9F9F;
         cursor: Pointer;
}
span.aufklappklein:hover {
         color: #FFFFFF;
}









/* ===================== TYPO ========================= */



/* === h1 = slab-Überschriften === */
h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 220%;
        line-height: 1.0em;
        font-weight: 600;
        text-transform: ;
        margin-top:30px;
}




@media all and (min-width: 560px) {
        h1 {
                font-size:260%;
                line-height: 1.0em;
                margin-top:40px;
                }
}


@media all and (min-width: 640px) {
        h1 {
                font-size:360%;
                line-height: 1.0em;
                margin-top:40px;
                }
}

@media all and (min-width: 960px) {
        h1 {
                font-size:460%;
                line-height: 1.0em;
                margin-top:40px;
                }
}


@media all and (min-width: 1200px) {
        h1 {
                font-size:560%;
                line-height: 1.0em;
                margin-top:40px;
                }
}



.introtxt {
        font-family: 'Roboto', sans-serif;
        letter-spacing: 0.05em;
        line-height: 1.0em;
        font-weight: 200;
        text-transform: uppercase;
        text-align:right;
        margin:50px 40px 00px 40px;
        color:#EFEFEF;
}



@media all and (min-width: 100px) {.introtxt {font-size:140%; margin:20px 20px 00px 20px;}}

@media all and (min-width: 460px) {.introtxt {font-size:160%;}}

@media all and (min-width: 560px) {.introtxt {font-size:200%;}}

@media all and (min-width: 960px) {.introtxt {font-size:240%; margin:50px 20px 0 30%; max-width:70%}}

@media all and (min-width: 1300px) {.introtxt {font-size:300%;}}

@media all and (min-width: 1400px) {.introtxt {font-size:320%;}}

@media all and (min-width: 1500px) {.introtxt {font-size:360%;}}








/* wurde gegen SVGs ersetzt ========== */
.stylename {
        font-family: 'Roboto', sans-serif;
        font-size: 220%;
        line-height: 1.0em;
        font-weight: 900;
        text-transform: uppercase;
        margin-top:30px;
        text-align:center;
}



@media all and (min-width: 100px) {
        .stylename {font-size:160%;line-height: 1.05em;}
}

@media all and (min-width: 460px) {
        .stylename {font-size:240%;line-height: 1.05em;}
}

@media all and (min-width: 560px) {
        .stylename {font-size:360%;line-height: 1.05em;}
}

@media all and (min-width: 960px) {
        .stylename {font-size:500%;line-height: 1.05em;}
}

@media all and (min-width: 1300px) {
        .stylename {font-size:600%;line-height: 1.05em;}
}

@media all and (min-width: 1400px) {
        .stylename {font-size:700%;line-height: 1.05em;}
}

@media all and (min-width: 1500px) {
        .stylename {font-size:800%;line-height: 1.05em;}
}





h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 200%;
        font-weight: 900;
        letter-spacing: 0.03em;
        line-height: 1.05em;
        color: #3F3F3F;
        text-transform: none;
}








/* Small screens */
@media all and (min-width: 100px) {
        h2 {
                font-size:150%;
                line-height: 1.05em;
                }
}



/* Mid screens */
@media all and (min-width: 560px) {
        h2 {
                font-size: 160%;
                line-height: 1.05em;
                }
}



/* Small screens */
@media all and (min-width: 960px) {
        h2 {
                font-size:180%;
                line-height: 1.05em;
                margin-top:40px;
                }
}


 /* Small screens */
@media all and (min-width: 1200px) {
        h2 {
                font-size:240%;
                line-height: 1.05em;
                margin-top:40px;
                }
}





.preis {
        font-weight: 300;
        color: #3F3F3F;
        text-transform: none;
}












h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 200%;
        font-weight: 300;
        letter-spacing: 0.05em;
        line-height: 1.3em;
        color: #3F3F3F;

}


/* Small screens */
@media all and (max-width: 960px) {
        h3 {
                font-size: 160%;
                line-height: 1.3em;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        h3 {
                font-size: 160%;
                line-height: 1.3em;
                }
}







h4 {
        font-family: 'Roboto Slab', sans-serif;
        font-size:400%;
        font-weight: 900;
        line-height:0.9em;
        color: #F8E311;
        margin-top:50px;
        margin-bottom:70px;
        text-align:left;
}


/* Small screens */
@media all and (max-width: 960px) {
        h4 {
                font-size: 360%;
                line-height: 1.0em;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        h4 {
                font-size: 220%;
                line-height: 1.0em;
                }
}



.twosizefirst {
        font-size:100%;
}

.twosizesecond {
        font-size:75%;
}


/* Mid screens */
@media all and (max-width: 960px) {
        h4     {
        margin-top:50px;
        margin-bottom:10px;
        }
        .twosizefirst {
        font-size:80%;
        line-height:1.1em;
         }

         .twosizesecond {
        font-size:55%;
        line-height:1.1em;
         }
}


/* Small screens */
@media all and (max-width: 560px) {
        h4     {
        margin-top:50px;
        margin-bottom:10px;
        }
        .twosizefirst {
        font-size:60%;
        line-height:1.1em;
         }

         .twosizesecond {
        font-size:35%;
        line-height:1.1em;
         }
}





h5 {
        font-family: 'Rubik', sans-serif;
        font-size:210%;
        font-weight: 900;
        color: #000;
        margin-top:40px;
        margin-bottom:20px;
}

/* Small screens */
@media all and (max-width: 560px) {
        h5 {
                font-size: 150%;
                margin-top:30px;
                margin-bottom:10px;
                }
}








.h5versal {
        font-family: 'Rubik', sans-serif;
        font-size:2.1em;

        color: #000;
        text-transform: uppercase;
}
/* Small screens */
@media all and (max-width: 560px) {
        .h5versal {
                font-size: 130%;
                }
}










/* ----- H 6 ------ */
h6 {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        letter-spacing: .4em;
        font-weight: 300;
        line-height:1.4em;
        text-transform: uppercase;
        margin-top:5px;

}

/* Small screens */
@media all and (max-width: 560px) {
        h6 {
                font-size: 70%;
                font-weight: 600;

                }
}



.intro_h6 {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        letter-spacing: 0.4em;
        font-weight: 300;
        line-height:1.4em;
        text-transform: uppercase;
        margin-top:5px;
        text-align:center;
        color:#EBBD88;
        margin-bottom:30px;
}


@media all and (max-width: 960px) {
        .intro_h6 {
                font-size: 70%;
                font-weight: 300;
                margin-bottom:20px;
                }
}







p {
        font-family: 'Roboto', sans-serif;
        font-size: 105%;
        font-weight: 300;
        color: #333;
        line-height:160%;
        letter-spacing: 0.05em;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}




.white {
        color: #FFFFFF;

}


/* Small screens */
@media all and (max-width: 560px) {
        p {font-size: 90%; line-height:140%;}
}


.anlauf {
        font-family: 'Roboto', sans-serif;
        font-size: 130%;
        font-weight: normal;
        letter-spacing: .05em;
        color: #2F2F2F;
        word-spacing: 0.05em;
        line-height:150%;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}




/* Small screens */
@media all and (max-width: 960px) {
        .anlauf {
                 font-size: 110%;
                 letter-spacing: 0.01em;
                 line-height:140%;
                 margin-top:0px;
                 margin-bottom:15px;
                }
}



/* Small screens */
@media all and (max-width: 560px) {
        .anlauf {
                 font-size: 100%;
                 letter-spacing: 0.01em;
                 line-height:140%;
                 margin-top:0px;
                 margin-bottom:15px;
                }
}





.column {
        font-weight: 600;
        letter-spacing: .05em;
        color: #826440;

}



.font_4 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color: #333;
        text-align:left;
        letter-spacing: 0.05em;
        line-height:150%;
        max-width:100%;

}



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




.font_5 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color: #333;
        text-align:left;
        letter-spacing: 0.05em;
        line-height:150%;
        max-width:60%;

}



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

.font_6 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color: #333;
        text-align:left;
        letter-spacing: 0.05em;
        line-height:150%;
        max-width:40%;

}



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







.font_7 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color: #333;
        text-align:center;
        letter-spacing: 0.05em;
        line-height:150%;
        max-width:40%;
        margin-Left:30%;
}



/* Small screens */
@media all and (max-width: 1000px) {
        .font_7 {
                font-size: 70%;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        .font_7 {
                font-size: 60%;
                max-width:90%; margin-Left:5%;
                 line-height:130%;
                }
}




.font_8 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color: #333;

        letter-spacing: 0.05em;
        line-height:150%;
        max-width:40%;
        margin-left:60%;

}



/* Small screens */
@media all and (max-width: 1000px) {
        .font_8 {
                font-size: 70%;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        .font_8 {
                font-size: 60%;
                max-width:90%;
        margin-left:10%;
        line-height:130%;
                }
}






.font_9 {
        font-family: 'Roboto', sans-serif;
        font-size: 80%;
        color:#8F8F8F;
        word-spacing: 0.1em;
        line-height:150%;
        padding-left:50%;
         -moz-hyphens: none;
         -o-hyphens: none;
         -webkit-hyphens: none;
         -ms-hyphens: none;
         hyphens: none;
}



/* Small screens */
@media all and (max-width: 560px) {
        .font_9 {
                font-size: 75%;
                line-height:140%;
                padding-left:20%;
                }
}





.font_credits {
        font-family: 'Roboto', sans-serif;
        font-size: 55%;
        color: #5F5F5F;
        line-height:150%;
}


.font_ms {
        font-family: 'Roboto', sans-serif;
        font-size: 65%;
        color: #BFBFBF;
        line-height:120%;
        letter-spacing: 0.08em;
}



/* === Buttons und Kennzeichnungen innerhalb von Texten in Modalboxen ===== */
.info{
                 font-family: 'Roboto', sans-serif;
                 font-size: 70%;
                 font-weight:600;


                 color: #1F1F1F;
                 background-color:#EFEFEF;
                 border:1px solid #8F8F8F; border-radius:20px;
                 padding:4px 10px 4px 10px;
                 margin-right:0px;
                 -webkit-align-items: center;
                 align-items: center;
                 -webkit-justify-content: center;
                 justify-content: center;
                 -webkit-transition: .2s ease-in-out;
                 transition: .2s ease-in-out;


                 letter-spacing: 0.1em;
                 text-align:center;
                 text-transform: uppercase;
                  }
.info:hover
     { color: #FFFFFF; background-color:#DF0000;
         -webkit-transition: .2s ease-in-out;
          transition: .2s ease-in-out;}







.kennzeichnung{
                 font-family: 'Roboto', sans-serif;
                 font-size: 100%;
                 font-weight:600;
                 color: #FFFFFF;
                 background-color:#6F6F6F;
                 border:0px solid #8F8F8F; border-radius:20px;
                 padding:2px 5px 2px 5px;
                 -webkit-align-items: center;
                 align-items: center;
                 -webkit-justify-content: center;
                 justify-content: center;
                 text-align:center;
                  }


/* ===================== LISTEN 2 ========================= */

ul, ol {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        color: #333;
        word-spacing: 0.1em;
        line-height:1.8em;
        padding-left: 0.6em;
        margin-left: 0.6em;

}







a {
        text-decoration: none;
}



a:link {color: #000000;}
a:visited {color: #000000;}
a:link:hover {color: #FF0000;}
a:visited:hover {color: #FF0000;}

.aa:link {color: #DFDFDF;}
.aa:visited {color: #BFBFBF;}
.aa:link:hover {color: #FFFFFF;}
.aa:visited:hover {color: #BFBFBF;}



q::before
        {
        content: '„';
}


q::after
        {
        content: '“';
}




/* ===========================     --- VIDEOS --- */
.wrappervideo {
        max-width: 1400px;
        padding: 0 0px 0em 0px;
        margin: 0 auto;
         }


.backgroundvideo {
        background-color: #000;

         }

/* ===================== elastic video ========================= */
.elastic-video {
         position: relative;
         padding-bottom: 55%;
         padding-top: 15px;
         height: 0;
         overflow: hidden;
}

.elastic-video iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
}





/* ===================== einrückungen ========================= */
.padding_def {
         padding-left: 20%;
}




.padding_25 {
         padding-left: 25%;
}


.padding_50 {
         padding-left: 50%;
}




@media all and (max-width: 560px) {
        .padding_25,
        .padding_50
        {padding-left: 0%;}
}







/* ===================== lines ========================= */

hr {
        background-color: #666;
        color: #666;
        border: #666;
        height: 1px;
        align: center;
        width: 100%;
}

.dottedline,
.dottedline_gridstart
        {
        border :none;
        border-top: 1px dotted  #666;
        background-color: #FFFFFF;
        height: 1px;
        width: 100%;
}

.dottedline_gridstart
        {
        margin-top:-10px;
}

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



.dottedline_hiding
        {
        border :none;
        border-top: 1px dotted  #666;
        background-color: #FFFFFF;
        height: 1px;
        width: 100%;
}

/* Mid screens */
@media all and (max-width: 810px) {
        .dottedline_hiding {
               display:none;
                }
}



.dottedline_neg
        {
        border :none;
        border-top: 1px dotted  #DFDFDF;
        background-color: #8F8F8F;
        height: 1px;
        width: 100%;
}


.dottedline_white
        {
        border :none;
        border-top: 1px dotted  #CFCFCF;
        background-color: #FFFFFF;
        height: 1px;
        width: 100%;
}


.solidline_none
        {
        border :none;
        border-top: 1px solid  #FFFFFF;
        background-color: #FFFFFF;
        height: 0px;
        width: 100%;
}







.done {opacity: 0.25;}

@media all and (max-width: 760px) {
        .done {display:none}
}

/* ===================== colors ========================= */

.white     { color: #FFFFFF;  }
.lightgrey  { color: #EFEFEF; }
.midgrey     { color: #AFAFAF; }
.black     { color: #000000; }
.blue     { color: #18356D; }
.warn     { color: #FF0000; }

.bugrey     { color: #6F6F6F; margin-top:0px; margin-bottom:40px;}

/*  ------------------ distancer  ------------------------------------- */

.zero   {font-family: 'Roboto', sans-serif;  font-size: 0.1%; color: none; line-height:0.1%;}

.gap5    {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 10px; width: 0px;}
.gap20   {border-left: 0px solid; height: 20px; width: 0px;}
.gap40   {border-left: 0px solid; height: 40px; width: 0px;}
.gap60   {border-left: 0px solid; height: 60px; width: 0px;}
.gap80   {border-left: 0px solid; height: 80px; width: 0px;}
.gap100  {border-left: 0px solid; height: 100px; width: 0px;}


/* -------------- In und out unterschiedlicher Contents ---------------- */

/* Mid screens - schaltet bei Tablets aus: */
@media all and (max-width: 960px) {
        .displaynone_mid {
                display:none;
                }
}


/* Small screens - schaltet bei kleineren aus - bei größeren an: */
@media all and (max-width: 561px) {
        .displaynone {
                display:none;
                }
}



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


/* Hyphens - schalten bei Mobiles aus: */
@media all and (max-width: 860px) {
p,
.p_white,
.p_white_wide,
.p_gold,
.p_grey,
.p_padding,
.p_blank,
.anlauf,
.anlauf_hell
        {-moz-hyphens: none;
         -o-hyphens: none;
         -webkit-hyphens: none;
         -ms-hyphens: none;
         hyphens: none;
         }
}



.center {
       text-align:center;
}




/*  ----- distancer  --- */

.zero   {font-family: 'Roboto', sans-serif;  font-size: 0.1%; color: none; line-height:0.1%;}

.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 10px; width: 0px;}
.gap20   {border-left: 0px solid; height: 20px; width: 0px;}
.gap40   {border-left: 0px solid; height: 40px; width: 0px;}
.gap60   {border-left: 0px solid; height: 60px; width: 0px;}
.gap80   {border-left: 0px solid; height: 80px; width: 0px;}
.gap100   {border-left: 0px solid; height: 100px; width: 0px;}


@media all and (max-width: 860px) {
.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 5px; width: 0px;}
.gap20   {border-left: 0px solid; height: 10px; width: 0px;}
.gap40   {border-left: 0px solid; height: 20px; width: 0px;}
.gap60   {border-left: 0px solid; height: 30px; width: 0px;}
.gap80   {border-left: 0px solid; height: 40px; width: 0px;}
.gap100   {border-left: 0px solid; height: 50px; width: 0px;}
}

/*  ----- displaying  --- */
.displaymob_none {display: none;}
         @media all and (min-width: 560px) {.displaymob_none {display: block;}
}




.displaysmart_none {display: none;}
         @media all and (min-width: 560px) {.displaysmart_none {display: block;}
}


.displaysmart_on {display: none;}
         @media all and (max-width: 559px) {.displaysmart_on {display: block;}
}






@keyframes fadein{
        from{
        opacity:0;}to{opacity:1;}}
        @-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}