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



/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}



/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
}









/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* roboto-slab-100 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/roboto-slab-v24-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-slab-v24-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v24-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v24-latin-100.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v24-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v24-latin-100.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

/* roboto-slab-300 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-slab-v24-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-slab-v24-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v24-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v24-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v24-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v24-latin-300.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-slab-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-slab-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v24-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}










/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato-v23-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/lato-v23-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}




/* rubik-900 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/rubik-v21-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/rubik-v21-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/rubik-v21-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/rubik-v21-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/rubik-v21-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/rubik-v21-latin-900.svg#Rubik') format('svg'); /* Legacy iOS */
}


















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;
         margin: 0 auto;
}













.wrapper {
        max-width: 1300px;
        padding: 0 0px 1em 0px;
        margin: 0 auto;
         }

@media all and (max-width: 1330px) {
        .wrapper {
        padding: 0 20px 1em 20px;
         }
}


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


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



div {
        padding: 0;
        margin: 0;
         }







/* --- menuebalken unten --- */
.menubar {
        width: 100%;
        position: fixed;
        bottom: -80px;
        border-top: 0px solid #CEAD16;
        background: #2F2F2F;
        opacity:1;
        z-index: 50
}

.menubar:hover {
        width: 100%;
        position: fixed;
        bottom:-10px;
        border-top: 0px solid #DFDFDF;
        padding-top: 0px;
        background: #EFEFEF;
        opacity:1;
        transition: all .2s ease-in-out;
}



.menuboxhome {
        max-width: 960px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
}


.menubox {
        max-width: 960px;
        margin: 0 auto;
        padding-bottom: 10px;
        padding-top: 12px;
        margin-bottom: 100px;
}



.lastelement {
    /*    background-color: #EFEFEF;    */
        background: linear-gradient(0deg, #FFFFFF, #FFFFFF, #CFCFCF);
        height:200px;
         }



/* Mid screens */
@media all and (max-width: 810px) {

        .menubar {
        width: 100%;
        position: fixed;
        bottom: 0px;
        background-color: #EFEFEF;
         }
        .menubar:hover {
        width: 100%;
        position: fixed;
        bottom: 0px;
        padding-top: 0px;
        background-color: #EFEFEF;
         }
         .menubox {
        padding-bottom: 0px;
        padding-top: 12px;
        margin-bottom: 0px;
         }
         .lastelement {
        height:150px;
         }
}




.menucell_1 {
        width: 10%;
        float:left;
        display: block;
}


.menucell_2 {
        width: 20%;
        float:left;
        display: block;
}

.menucell_3 {
        width: 20%;
        float:left;
        display: block;
}

.menucell_4 {
        width: 20%;
        float:left;
        display: block;
}

.menucell_5 {
        width: 20%;
        float:left;
        display: block;

}

.menucell_6 {
        width: 10%;
        float:left;
        display: block;
}


.menucell_30 {
        width: 30%;
        float:left;
        display: block;
}


/* Small screens    7er          */
@media all and (max-width: 560px) {
        .menubox {
        width:100%;
        margin-bottom:62px;
         }


         .lastelement {
        height:135px;
         }

        .menucell_1 {
        width: 14.28%;
         }
        .menucell_2 {
        display: none;
         }
         .menucell_3 {
        width: 28.56%;
         }
         .menucell_4 {
        width: 28.56%;
         }
         .menucell_5 {
        width: 28.56%;
         }
         .menucell_6 {
        display: none;
         }
}





.preloads {
  width:1px;
  height:1px;
  visibility:hidden;
}


/* --- hintergrundfarben --- */
.bgcolor_blue {background-color: #68d0e7; }
.bgcolor_cyanblue {background-color: #01c5ff; }
.bgcolor_darkblue {background-color: #133645; }
.bgcolor_nightblue {background-color: #090f3e; }
.bgcolor_gold {background-color: #CEAD16; }
.bgcolor_altgold {background-color: #ab8a00; }

.bgcolor_red {background-color: #A51C8C; }

.bgcolor_orange {background-color: #F37D0B; }
.bgcolor_orange2 {background-color: #ed823a; }
.bgcolor_violet {background-color: #631B85; }


.bgcolor_green {background-color: #afd510; }
.bgcolor_petrol {background-color: #16CECB; }
.bgcolor_yellow {background-color: #FEE803; }
.bgcolor_waldmeistereis {background-color: #e6feef; }
.bgcolor_screenblue {background-color: #dcfcff; }

.bgcolor_creme {background-color: #F9F7EB; }
.bgcolor_citron {background-color: #efffb7 ; }
.bgcolor_cremegreen {background-color: #e7f2e4; }
.bgcolor_brown {background-color: #522405 ; }
.bgcolor_videoblue {background-color: #6cf6ff ; }

.bgcolor_white {background-color: #FFFFFF; }
.bgcolor_black {background-color: #000000; }
.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_swipergrey {background-color: #8F8F8F; }


.bgcolor_show {background-color: #CFCFCF; }
.bgcolor_diskurs {background-color: #f8f6f6; }

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


.bgcolor_online {background-color: #f6eee6 ; }
.bgcolor_offline {background-color: #3e4254 ; }

.bgcolor_CC {background-color:#001727;}


/* --- fades --- */
.bgcolor_fadefromgrey {background: linear-gradient(to right, #5F5F5F, #FFFFFF); }

.bgcolor_redgrad { background: linear-gradient(135deg, #A51C8C, #871BAE); margin-top:-15px;}

.bgcolor_greengrad { background: linear-gradient(135deg, #afd510, #85C619); margin-top:-0px;}



.bgcolor_fadeblacktogreen {background: linear-gradient(135deg, #000000, #005F00); }


.widegrey {
        padding: 0 1% 0em 1%;
        margin: 0;
        font-family: 'Noto Sans', sans-serif;
        background-color: #EFEFEF;
}


.wrapgrey {
        max-width: 960px;
        padding: 0 1em 2em 1em;
        margin: 0 auto;
        background-color: #EFEFEF;

}









/* NAVI NEU nur Up-Bottom unten */
nav {
        position: fixed;
        width: 42px;
        height: auto;
        bottom: 70px;
        right: 20px;
        background-color: none;
        z-index: 60;
}



@media all and (max-width: 810px) {
         nav {
        width: 32px;
        height: auto;
        bottom: 85px;
        right: 10px;
         }
}


@media all and (max-width: 560px) {
         nav {
        width: 32px;
        height: auto;
        bottom: 75px;
        right: 10px;
         }
}



nav ul {
        font-family: 'Noto Sans', sans-serif;
        padding: 0em;
        margin: 0;
        }


nav ul li {
        font-family: 'Noto Sans', sans-serif;
        list-style-type: none;
}


nav ul li a:link {
        font-family: 'Noto Sans', sans-serif;
        color: white;
}





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


.img100 {
        width: 100%;
}


.imgauto {
        width: auto;
}


.imgcenter {
        width: auto;
        display: block;
        margin-left: auto;
        margin-right: auto
}

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





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

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



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

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



/* --------------- 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%;
}

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


.img33 {
        width: 33.3333%;
}

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








.imglesen {
        width: 48%;
}


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



.ms_logo {
        width: 20px;
        float:left;
        margin-right:10px;;
}


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




.topright {
        float: right;
        width: auto;
        margin: 20px 0 1.6em 1.6em;
}


.topleft {
        float: left;
        width: auto;
        margin: 0 1.6em 1.6em 0;
}

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


.middle {
        width: auto;
        display: block;
        margin: 0 auto;
}


.picdistance {
        height:30px;
}

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
























figure {
         position: relative;
         padding: 0 0 0 50px;
         background: none;
         float: right;
         width: auto;
         margin: 0 0em 0em 0em;
         }

  figcaption {
         padding: 5px;
         text-align: left;
         font-family: 'Noto Sans', sans-serif;
         font-size: 70%;
         color: #3F3F3F;
         line-height:150%;
         }

  figure.einzel {
         display: inline-block;
         padding: 0px;
         width: 100%;
         border: 0px solid gainsboro;
         }




/* Small screens */
@media all and (max-width: 560px) {
        figure {
                float: none;
                width: 100%;
                padding: 0 0 0 0;
                }
        figcaption {
                padding: 0;
                }
}


.cd_box {
        background-color: #ebebec;
        border-top: 0px solid  #FFF;
        border-bottom: 0px solid #BFBFBF;
        border-left: 0px solid #FFFFFF;
        border-right: 0px solid #FFFFFF;
        padding-top:6px;
        padding-bottom:12px;
        box-shadow: 10px 10px 20px 0px #FFFFFF;
}





/* ===================== LISTEN ========================= */
#menuethemen {
        padding-left: 20px;
        list-style-image: url(images/themen_bullet_gold.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 150%;
        font-weight: normal;
        line-height: 1.2em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
}

.menuethemen_li_abstand {
        padding-bottom:10px;
}



/* Mid screens */
@media all and (max-width: 810px) {
        #menuethemen {
                font-size: 120%;
                }
}


/* Small screens */
@media all and (max-width: 560px) {
        #menuethemen {
                font-size: 100%;
                line-height: 1.1em;
                }
        .menuethemen_li_abstand {
                 padding-bottom:12px;
         }
}








#details {
        padding-left: 102px;
        list-style-image: url(images/themen_bulletarrow_black.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 100%;
        line-height: 2em;
        font-weight: normal;
        letter-spacing: 0.1em;
        text-transform: uppercase;
}


/* Small screens */
@media all and (max-width: 560px) {
        #details {
                padding-left: 52px;
                list-style-image: url(images/themen_bulletarrow_black_mobile.svg);
                font-size:85%;
                line-height: 1.4em;
                }
}


#info {
        padding-left: 102px;
        list-style-image: url(images/themen_bulletarrow_black.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 100%;
        line-height: 2em;
        color: #708F8F;
        font-weight: normal;
        letter-spacing: 0.1em;
        text-transform: uppercase;
}


/* Small screens */
@media all and (max-width: 560px) {
        #info {
                padding-left: 52px;
                list-style-image: url(images/themen_bulletarrow_black_mobile.svg);
                font-size:85%;
                line-height: 1.4em;
                }
}



#zurauswahl {
        padding-left: 25px;
        list-style-image: url(images/arrow_zurauswahl_up.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 100%;
        letter-spacing: .4em;
        line-height:1.9em;
        text-transform: uppercase;
        color: #C9B319;          /* gold */
}


/* Small screens */
@media all and (max-width: 560px) {
        #zurauswahl {
                padding-left: 25px;
        list-style-image: url(images/arrow_zurauswahl_up.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 70%;
        letter-spacing: .4em;
        line-height:1.9em;
                }
}


.nobullet  {
        list-style: none;

}



.listeh2  {
        padding-left: 10px;
        list-style-image: url(images/themen_bullet_gold.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 160%;
        line-height: 1.7em;
        font-weight: normal;
        letter-spacing: 0.05em;
        text-transform: uppercase;
}


.listemittel  {
        padding-left: 10px;
        list-style-image: url(images/liste_bullet_rund_green.svg);
        font-family: 'Noto Sans', sans-serif;
        color: #3ea189;
        font-size: 120%;
        line-height: 1.7em;
        font-style: normal;
        font-weight: 400;

}

/* Small screens */
@media all and (max-width: 560px) {
        .listemittel {
                font-size:100%;
                line-height: 1.5em;
                }
}


#listegross,
#listegross2 {
        padding-left: 25px;
        list-style-image: url(images/themen_bullet.png);
        font-family: 'Noto Sans', sans-serif;
        color: #1C83A5;
        font-size: 160%;
        line-height: 1.4em;
        font-weight: normal;
        letter-spacing: 0.05em;
}


#listegross2 {
        color: #3F3F3F;
}

/* Small screens */
@media all and (max-width: 560px) {
        #listegross,
        #listegross2 {
                font-size:120%;
                padding-left: 18px;
                padding-right: 5px;
                }
}



.p_listegross_addtext  {
        font-family: 'Noto Sans', sans-serif;
        color: #6F6F6F;
        font-size: 60%;
        line-height: 140%;
        font-weight: normal;
        letter-spacing: 0.05em;
}

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

                }
}




.listeklein {
        padding-left: 10px;
        list-style-image: url(images/liste_bullet_rund.svg);
        font-family: 'Noto Sans', sans-serif;
        color: #CEAD16;              /*  color: #1C83A5;        */
        font-size: 110%;
        line-height: 1.4em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
}

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



.listecase {
        padding-left: 10px;
        list-style-image: url(images/liste_bullet_rund_case.svg);
        font-family: 'Noto Sans', sans-serif;
        color: #333;
        font-size: 95%;
        line-height: 160%;
}


.listephysik {
        padding-left: 10px;
        margin-bottom: 10px;
        list-style-image: url(images/liste_bullet_rund.svg);
        font-family: 'Noto Sans', sans-serif;
        color: #1C6895;
        font-size: 95%;
        line-height: 160%;
}

.liabstand {
        margin-bottom: 1em;
}


.listemodule {
        padding-left: 10px;

        font-family: 'Noto Sans', sans-serif;
        color: #1C83A5;
        font-size: 120%;
        line-height: 1.4em;
        letter-spacing: 0.05em;
}


.liste_p {
        padding-left: 10px;
        list-style-image: url(images/liste_bullet_rund.svg);
        font-family: 'Noto Sans', sans-serif;
        font-size: 95%;
        color: #333;
        line-height:160%;
}




/* ===================== KGW ? ========================= */

#diskurs    { background-color: #EFEFEF; }
#spalte_A01 { float: left; width: 20%;  }
#spalte_A02 { float: left; width: 60%; padding: 0% 8% 0% 2%;
              font-family: 'Noto Sans', sans-serif; font-size: 1.3em; letter-spacing: 0.05em; text-transform: uppercase; }
#spalte_A03 { float: left; width: 10%; }




.download    { background-color: #e9ece9; }
.spalte_DL01 { float: left; width: 20%;  }
.spalte_DL02 { float: left; width: 60%; padding: 0% 8% 0% 2%;
              font-family: 'Noto Sans', sans-serif; font-size: 1.1em; letter-spacing: 0.05em; text-transform: uppercase; }
.spalte_DL03 { float: left; width: 10%; }



/* ===================== ALTES MENU ALS TAB ========================= */
.tab_nav_oben       {
         width: 100%;
         margin-bottom: -2em;
         border: 0px;
         cellpadding: 0;
         cellspacing: 0;
         }





/* ===================== 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 {

  padding:0% 0% 0% 0%;
  cursor: pointer
}


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

  -webkit-animation: scale 0.7s ease-in-out;
  -moz-animation: scale 0.7s ease-in-out;
  animation: scale 0.7s ease-in-out;
  }

         @keyframes scale {
                 0% {
                 transform: scale(0.9);
                 opacity: 0;
                 }
                 50% {
                 transform: scale(1);
                 opacity: 0.8;
                 }
                 100% {
                 transform: scale(1);
                 opacity: 1;
                 }
}






form,
.subscribe:hover>div,
.hidden>div {
  display: none
}








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






/* ===================== KGW?  SPALTEN COL ========================= */
.col {   position:relative;
         }
.col :first-child {
         margin-top:0 }

@media all and (min-width: 20em) {

        [class*=colgroup] .col {
        margin-left:1%;
        float:left
        }

        [class*=colgroup] .col
        {
        margin-left:1%;
        padding: 0%;
        float:left

        }
        [class*=colgroup] .col:first-of-type { margin-left:0 }
        .colgroup-5 .col {
                 width:19.2%;

                 }
        .colgroup-5 .col:nth-of-type(5n+1) {
                clear:left;
                margin-left:0
}




/* ===================== CD: andere spalten ========================= */

.zweierSpalte {
         float: left;
         width: 50%;
         padding-right: 2%;
         padding-left: 0%;
         border:0px solid;
}

/* Small screens */
@media all and (max-width: 560px) {
        .zweierSpalte {
                width: 100%;
                padding-right: 0%;
                padding-left: 0%;
                }
}


#4spaltig {
         z-index:1;
         margin: auto;
         overflow: visible;
}
.viererSpalte {
         float: left;
         width: 22%;
         padding-right: 3%;
         padding-left: 0%;
}





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

h1 {
        font-family: 'Lato', sans-serif;
        font-size: 220%;
        font-style:normal;
        line-height: 1.0em;
        font-weight: 700;
        text-transform: uppercase;
        margin-top:30px;
}

.white {
        color: #FFFFFF;
}


.h1_gold {
        color: #CEAD16;
}


.h1_eng,
.h1_eng_2 {
        line-height: 1.0em;
}



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


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

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





h2 {
        font-family: 'Noto Sans', sans-serif;
        font-size: 200%;
        font-style: normal;
        font-weight:400;
        word-spacing: 0.05em;
        line-height: 1.3em;
        color: #3F3F3F;
        text-transform: uppercase;
}



.gold {
        font-size: 200%;
        font-weight: normal;
        line-height: 1.4em;
        color: #CEAD16;
        text-transform: uppercase;
}


.h2_white {
        font-size: 200%;
        font-weight: normal;
        line-height: 1.4em;
        color: #FFFFFF;
        text-transform: uppercase;
}


/* Small screens */
@media all and (min-width: 100px) {
        h2,
        .gold,
        .h2_white {
                font-size:130%;
                line-height: 1.3em;
                }
}



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



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





.h2mid {
        font-size: 150%;
        font-weight: normal;
        word-spacing: 0.05em;
        line-height: 1.4em;
        color: #C9B319;
        text-transform: uppercase;
}



.arbeitsbeispielhead {
        font-size: 160%;
        letter-spacing: 0.1em;
        font-weight: 700;
        line-height: 1.0em;
        color: #C6B619;
}


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


/* -------------- Heads mit 2 Größen z.B. Geschäftsberichte ----  */
.doubletypeA {
        font-family: 'Rubik', sans-serif;
        font-size: 400%;
        line-height: 1.5em;
        font-weight: normal;
        color: #000000;
        text-transform: uppercase;
}


.doubletypeB {
        font-family: 'Noto Sans', sans-serif;
        font-size: 200%;
        font-weight: normal;
        line-height: 1.4em;
        color: #BFBFBF;
        text-transform: uppercase;
}

/* Small screens */
@media all and (max-width: 560px) {
        .doubletypeA {
                font-size:240%;
                }
        .doubletypeB {
                font-size:120%;
                color: #7F7F7F;
                }

}


/* ----End ---------- Heads mit 2 Größen z.B. Geschäftsberichte ----  */




.colorgold {
        color: #C9B319;
}

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




.h2_tease {
        color: #FFFFFF;
        text-transform: none;
}

.h2_themen {
        font-family: 'Noto Sans', sans-serif;
        font-size: 200%;
        font-weight: normal;
        line-height: 0.8em;
        color: #000000;
        text-transform: uppercase;
}




.thin {
        font-family: 'Roboto Slab', serif;
        font-size: 400%;
        font-weight: normal;
        color: #0F0F0F;
        text-transform: uppercase;
}

/* Small screens */
@media all and (max-width: 560px) {
       .thin     {
                font-size:240%;
                line-height: 0.8em;
                margin-top:0px;
                padding-bottom:0px;
                }
}



.thin2 {
        font-family: 'Roboto Slab', serif;
        font-size: 340%;
        font-weight: normal;
        color: #0F0F0F;
        text-transform: uppercase;
}


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

.thin3 {
        font-family: 'Roboto Slab', serif;
        font-size: 350%;
        font-weight: normal;
        color: #FFFFFF;
        text-transform: uppercase;
}




.thin4 {
        font-family: 'Roboto Slab', serif;
        font-size: 200%;
        font-weight: normal;
        color: #FFFFFF;
        text-transform: none;
}

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


.thin5 {
        font-size: 200%;
        font-weight: normal;
        word-spacing: 0.05em;
        line-height: 1.4em;
        color: #1F1F1F;
        text-transform: none;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}

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

.thin6 {
        font-family: 'Roboto Slab', serif;
        font-size: 200%;
        font-weight: normal;
        color: #7F7F7F;
        text-transform: none;
}

.thin7 {
        font-family: 'Roboto Slab', serif;
        font-size: 160%;
        font-weight: normal;
        word-spacing: 0.05em;
        line-height: 1.4em;
        color: #1F1F1F;
        text-transform: none;
}



.h2_intro
        {
        font-family: 'Roboto', serif;
        font-size: 240%;
        font-weight: 300;
        word-spacing: 0.05em;
        line-height: 1.3em;
        color: #000000;
        text-transform: none;
}

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



.h2_philo {
        font-family: 'Roboto', serif;
        font-size: 200%;
        font-weight: 300;
        word-spacing: 0.05em;
        line-height: 1.3em;
        color: #000000;
        text-transform: none;
}






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

/* Small screens */
@media all and (max-width: 560px) {
        .h2_philo {
                font-size: 130%;
                line-height: 1.25em;
                }
}


.h2_thesis {
        font-family: 'Source Serif Pro', serif;
        font-size: 400%;
        font-weight: 700;
        word-spacing: 0.05em;
        line-height: 1.0em;
        color: #000000;
        text-transform: none;
}










h3 {
        font-family: 'Noto Sans', sans-serif;
        font-size: 80%;
        letter-spacing: 0.1em;
        font-weight: 700;
        line-height: 1.6em;
        color: #C6B619;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}


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


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


.h3bu {
        font-family: 'Noto Sans', sans-serif;
        font-size: 75%;
        letter-spacing: 0.1em;
        font-weight: normal;
        line-height: 1.4em;
        color: #C6B619;
        max-width: 70%;
        padding: 0 0 0 30%;
}


.h3bu2 {
        font-family: 'Noto Sans', sans-serif;
        font-size: 75%;
        letter-spacing: 0.1em;
        font-weight: normal;
        line-height: 1.4em;
        color: #D0EDA5;
        max-width: 70%;
        padding: 0 0 0 30%;
}





h4 {
        font-family: 'Lato', sans-serif;
        font-size:400%;
        font-style: normal;
        font-weight: 900;
        line-height:0.8em;
        color: #000;
        margin-top:100px;
        margin-bottom:50px;
}



.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: 'Lato', sans-serif;
        font-size:210%;
        color: #000;
        margin-top:40px;
        margin-bottom:20px;
        font-weight:700;
}

.h5_gold {
        color: #CEAD16;
        text-transform: uppercase;
}

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








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

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

.h5versalcolor {
        font-family: 'Lato', sans-serif;
        font-size:2.5em;
        letter-spacing: .1em;

        line-height:0.1em;
        color: #C6B619;
        text-transform: uppercase;
}


.h5Vsmall {
        font-family: 'Lato', sans-serif;
        font-size:1.8em;

        line-height:1.2em;
        color: #000;
        text-transform: uppercase;
}








/* ----- H 6 ------ */
h6 {
        font-family: 'Noto Sans', sans-serif;
        font-size: 100%;
        letter-spacing: .4em;
        font-weight: normal;
        line-height:1.4em;
        text-transform: uppercase;
        color: #C9B319;          /* gold */

}

/* Small screens */
@media all and (max-width: 560px) {
        h6 {
                font-size: 70%;
                font-weight: bold;
                letter-spacing: .2em;

                }
}







p {
        font-family: 'Noto Serif', serif;
        font-size: 120%;
        font-style:normal;
        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;
}




.p_white {
        font-size: 120%;
        color: #FFFFFF;
        letter-spacing: 0.05em;
}


.p_white_wide {
        font-size: 120%;
        color: #DFDFDF;
        letter-spacing: 0.05em;
}



.p_gold {
        font-size: 120%;
        color: #C6B619;
}


.p_grey {
        font-size: 120%;
        color: #CFCFCF;
        letter-spacing: 0.05em;
}




.p_padding {
        font-size: 120%;
        color: #333;
        padding:0.5em 1em 0.5em 1.5em
}


.p_blank {
        font-size: 5%;
        color: #333;
        line-height:0.5em;
}


/* Small screens */
@media all and (max-width: 1900px) {
        p,
        .p_white,
        .p_white_wide,
        .p_grey,
        .p_gold,
        .p_padding { font-size: 105%; }
}


/* Small screens */
@media all and (max-width: 1300px) {
        p,
        .p_white,
        .p_white_wide,
        .p_grey,
        .p_gold,
        .p_padding { font-size: 100%; }
}



/* Small screens */
@media all and (max-width: 560px) {
        p,
        .p_white,
        .p_white_wide,
        .p_grey,
        .p_padding {font-size: 90%; line-height:150%;}
}







.anlauf {
        font-size: 140%;
        font-weight: 400;
        letter-spacing: .05em;
        color: #6F6F6F;
        word-spacing: 0.05em;
        line-height:150%;
}


.anlauf_hell {
        font-size: 140%;
        font-weight: normal;
        letter-spacing: .05em;
        color: #DFDFDF;
        line-height:150%;
}


/* Small screens */
@media all and (max-width: 960px) {
        .anlauf,
        .anlauf_hell {
                 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,
        .anlauf_hell {
                 font-size: 100%;
                 letter-spacing: 0.01em;
                 line-height:140%;
                 margin-top:0px;
                 margin-bottom:15px;
                }
}











.font_4 {
        font-size: 70%;
        color: #7F7F7F;
        line-height:1.4em;
}

.font_5 {
        font-size: 70%;
        font-weight: 400;
        letter-spacing: .1em;
        color: #5F5F5F;
        word-spacing: 0.1em;
        line-height:1.3em;
}


.font_6 {
        font-size: 80%;
        font-weight: 400;
        color: #333;
        word-spacing: 0.1em;
        line-height:1.8em;
}


.font_7 {
        font-size: 80%;
        font-weight: 700;
        color: #333;
        word-spacing: 0.1em;
        line-height:150%;
}


.font_8 {
        font-size: 80%;
        color: #333;

        letter-spacing: 0.00em;
        line-height:150%;
}


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

.font_9 {
        font-size: 80%;
        color:#8F8F8F;
        word-spacing: 0.1em;
        line-height:150%;
        padding-left:50%;
}



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


.font_credits {
        font-size: 55%;
        color: #5F5F5F;
        line-height:150%;
}



.fliesshead {
        font-size: 95%;
        font-weight: 700;
        letter-spacing: .1em;
        padding-top: 1.5em;
        color: #C9B319;
        line-height:1.2em;
        text-transform: uppercase;
        margin-bottom:0px;
}


.fliesshead_petrol {
        font-size: 95%;
        font-weight: 700;
        letter-spacing: .1em;
        padding-top: 1.5em;
        color: #1B9083;
        line-height:1.2em;
        text-transform: uppercase;
}




#adresshead {
         font-family: 'Noto Sans', sans-serif;
        font-size:70%;
        font-weight: 400;
        letter-spacing: 0.1em;
        line-height:1.4em;
        color: #5F5F5F;
        margin-top:15px;
        margin-bottom:0px;
}


/* Small screens */
@media all and (max-width: 560px) {
        #adresshead {
               font-size:50%;
                }
}


#adresshead_bottom {
         font-family: 'Noto Sans', sans-serif;
        font-size:65%;
        font-weight: 400;
        letter-spacing: 0.1em;
        line-height:1.0em;
        color: #9F9F9F;
        margin-top:0px;
        margin-bottom:10px;
        text-align:center;
}


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





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

ul, ol {
        font-family: 'Noto Sans', sans-serif;
        font-size: 120%;
        font-style:normal;
        font-weight:400;
        color: #333;
        word-spacing: 0.1em;
        line-height:1.8em;
        padding-left: 0.6em;
        margin-left: 0.6em;

}


.overview {
       font-size: 105%;
        color: #CEAD16;
        word-spacing: 0.1em;
        line-height:1.7em;
        letter-spacing: 0.1em;

}


.overviewcolor {
        font-size: 100%;
        color: #B6DDEF;
        word-spacing: 0.1em;
        line-height:1.7em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
}


#goodies {
        font-size: 85%;
        letter-spacing: 0em;
        font-weight: normal;
        line-height:1.6em;
        color: #666;
}


d1 {
        font-size: 85%;
        letter-spacing: 0em;
        font-weight: normal;
        line-height:1.3em;
        color: #0F0F0F;
        background-color:#7A7A7A;
}


dl {
        font-size: 85%;
        letter-spacing: 0em;
        font-weight: normal;
        line-height:1.3em;
        color: #0F0F0F;
        background-color:#7A7A7A;
}





a {
        text-decoration: none;
}



a:link {
        color: #AFAFAF;     <!-- grau -->
}


a:visited
        {
        color: #AFAFAF;     <!-- grau -->
}


a:link:hover
        {
        color: #E1C513;     <!-- gold -->
}

a:visited:hover
        {
        color: #87BE1A;     <!-- gruen -->
}



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 {padding:0% 2% 0% 2%;}

.padding_3 {padding:3px;}
.padding_5 {padding:5px;}


.margin_3 {margin:3px;}
.margin_5 {margin:5px;}

.paddingfixLR {padding:0px 20px 0px 10px;}

.padding_def {padding-left: 20%;}




.padding_25 {padding-left: 25%;}
.padding_33 {padding-left: 33%;}
.padding_50 {padding-left: 50%;}


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







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

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

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

.dottedline_adresshead
        {
        margin-top:0px;
}

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







.verticalLine,
.verticalLine_white
         {
         margin-left: auto;
         margin-right: auto;
         width: 0.0em;
         height:50px;
         background-color:#FFFFFF;
         }


.verticalLine        { border-left: 1px solid #133645;}
.verticalLine_white  { border-left: 1px solid #FFFFFF;}

@media all and (min-width: 1000px) {
        .verticalLine,
        .verticalLine_white
                     {height:100px;}
}




.arrowdown_docked {
  border-right: 1px solid #133645;
  border-bottom: 1px solid #133645;
  margin-left: auto;
  margin-right: auto;
  margin-top: -58px;
  margin-bottom: 10px;
  width: 50px;
  height:50px;
  transform: rotate(45deg);
}



.arrowdown {
  border-right: 1px solid #133645;
  border-bottom: 1px solid #133645;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  height:50px;
  transform: rotate(45deg);
}






.verticalLineShort
         {
         border-left: 1px solid #133645;
         margin-left: auto;
         margin-right: auto;
         margin-top: 20px;
         margin-bottom: 20px;
         width: 0.1em;
         height:50px;
         }



/* =====================  ========================= */

.icon1 {
        height: 25px;
        width: auto;
}


.icon2 {
        height: 35px;
        width: auto;
}


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

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

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




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