/* rest cloudfare */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,
cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{display:block}



ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}









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


body {
         animation:fadein 0.9s;
         -moz-animation:fadein 1.5s;
         -webkit-animation:fadein 0.9s;
         background-color:#a3a4a8;
         -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;
}


* {
    padding: 0;
    margin: 0;
}


* {     -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
         box-sizing: border-box;
         scroll-behavior: smooth;
         }



.bottomdis {
        padding-bottom: 10px;
         }





/* ----------------- IMG --------------------------------------------------------------- */
img {
}



.img_mobfocus_01 {width: 100%; height:auto; overflow:hidden;}

.img_mobfocus_01 img {width:100%; margin-left:0%;}

@media all and (max-width: 1200px)
         {.img_mobfocus_01 img {width:120%; margin-left:-10%;}
}

@media all and (max-width: 800px)
         {.img_mobfocus_01 img {width:140%; margin-left:-20%;}
}

@media all and (max-width: 740px)  {
         .img_mobfocus_01 img {width:190%; margin-left:-45%;}
         }




.imgcenter { width: 80%; display: block;  margin-left: auto;  margin-right: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
@media all and (max-width: 560px) { .imgcenter     {width: 98%;}}


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


.tx        { padding:0 5px 0 5px; margin-top:0px;}
.txleft    { padding:0 5px 0 5px; margin-top:-0px;}
.txright   { padding:0 5px 0 5px; margin-top:-0px;}
.txtopbottom { margin:-7px 0 -10px 0;}


/* ====== Tablet (medium) screens */
@media (min-width: 480px) {
  .tx      { padding:0 5px 0 5px; margin-top:0px;}
  .txleft  { padding:0 5px 0 5px; margin-top:-0px;}
  .txright { padding:0 5px 0 5px; margin-top:-0px;}
  .txtopbottom { margin:-8px 0 -11px 0;}

}


/* ====== Large screens */
@media (min-width: 760px) {
  .txleft  { width: 100%; padding:0 10px 0 5px; margin-top:4px;}
  .txright { width: 100%; padding:0 5px 0 10px; margin-top:4px;}
  .txtopbottom { width: 100%; margin:-10px 0 -12px 0;}

}


/* ====== Large screens */
@media (min-width: 1100px) {
  .txleft  { width: 100%; padding:0 20px 0 5px; margin-top:8px;}
  .txright { width: 100%; padding:0 5px 0 20px; margin-top:8px;}
  .txtopbottom { width: 100%; margin:-12px 0 -15px 0;}

}

/* ====== Large screens */
@media (min-width: 1900px) {
  .txleft  { width: 100%; padding:0 30px 0 5px; margin-top:8px;}
  .txright { width: 100%; padding:0 5px 0 30px; margin-top:8px;}
  .txtopbottom { width: 100%; margin:-12px 0 -15px 0;}

}



.img50 { width: 50%; float:left;}



/* ====== dreiecksverlauf white>black ==  */
.img_bridge1,
.img_bridge2 { width: 50%; float:left;}



@media (max-width: 760px) {
  .img_bridge1 { width: 100%; float:none;}
  .img_bridge2 { display:none;}
}



.img33_1st {width: 33.333%;  float:left; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; border-right:0px dotted #AFAFAF}
@media all and (max-width:1640px) { .img33_1st {width: 33.333%;, float:none;}}
@media all and (max-width:1440px) { .img33_1st {width: 100%;, float:none;}}
@media all and (max-width: 560px) { .img33_1st {width: 100%;, float:none;}}


.img33 {width: 33.333%; float:left; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; border-right:0px dotted #AFAFAF}
@media all and (max-width:1640px) { .img33 {width: 33.333;, float:left;}}
@media all and (max-width:1440px) { .img33 {width: 50%;, float:left; margin-top:-000px;}}
@media all and (max-width: 560px) { .img33 {width: 100%;, float:none; margin-top:0px;}}


.img33_4th {width: 33.333%;  float:left; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; border-right:0px dotted #AFAFAF}
@media all and (max-width:1640px) { .img33_4th {width: 33.333%;, float:none;}}
@media all and (max-width:1440px) { .img33_4th {width: 50%;, float:none;}}
@media all and (max-width: 560px) { .img33_4th {width: 100%;, float:none;}}








/* ---------------------  SVG-Heads ----------------------------- */

.headfull                                      {width: 70%; display: block;  margin-left: auto;  margin-right: auto; border:0px solid #FFBF00}
@media all and (max-width:1440px) { .headfull  {width: 86%;}}
@media all and (max-width: 560px) { .headfull  {width: 98%;}}



.headA                                         {width: 48%; margin-left: 50%; border:0px solid #40FF00}
@media all and (max-width:1440px) { .headA     {width: 65%; margin-left: 33%;}}
@media all and (max-width: 560px) { .headA     {width: 98%; margin-left: 1% }}


.headB                                         {width: 60%; margin-left: 2%; border:0px solid #FF0000}
@media all and (max-width:1440px) { .headB     {width: 65%; margin-left: 2%;}}
@media all and (max-width: 560px) { .headB     {width: 98%; margin-left: 1%}}


.headC                                         {width: 35%; margin-left: 30%; border:0px solid #0060FF}
@media all and (max-width:1440px) { .headC     {width: 70%; margin-left: 25%;}}
@media all and (max-width: 560px) { .headC     {width: 98%; margin-left: 1%}}


.headD                                         {width: 64%; margin-left: 33.333%; border:0px solid #0060FF}
@media all and (max-width:1440px) { .headD     {width: 70%; margin-left: 25%;}}
@media all and (max-width: 560px) { .headD     {width: 98%; margin-left: 1%}}






/* ---------------------  General ----------------------------- */



.bgcolor_white {background-color: #FFFFFF; }
.bgcolor_black {background-color: #000000; }
.bgcolor_darkgrey {background-color: #5F5F5F; }
.bgcolor_midgrey {background-color: #AFAFAF; }
.bgcolor_shinygrey {background-color: #EFEFEF; }
.bgcolor_lightgrey {background-color: #DFDFDF; }

.bgcolor_red {background-color: #8A1B22; }
.bgcolor_rosa {background-color: #F9EEFA; }
.bgcolor_flieder {background-color: #F5F2FB; }
.bgcolor_wood {background-color: #4A2413; }









h1 {font-family: 'Roboto', sans-serif;
        font-size: 300%;
        font-weight:300;
        line-height: 1.21em;
        color:#5F5F5F;
        text-transform:uppercase;
        text-align:center;
        padding:0px 20px 0px 20px;
}



.h1_on {
        font-family: 'Roboto', sans-serif;
        font-size: 300%;
        font-weight:400;
        line-height: 1.2em;
        color:#EFEFEF;
        text-transform:uppercase;
                         margin-top:50px;
                         border-top:1px solid #00E0FF;
}



h2 {font-family: 'Roboto', sans-serif; font-size: 0%; font-weight:400; line-height: 0em; color:#FFFFFF; text-transform:uppercase;
}


.h2_on {
        font-size: 100%;
        font-weight:400;
        line-height: 1.2em;
        letter-spacing:0.3em;
        color:#5F5F5F;
        text-transform:uppercase;
                         margin-top:30px;
}




h3 {font-family: 'Roboto', sans-serif; font-size: 100%; font-weight:300; line-height: 0em; color:#FFFFFF; text-transform:uppercase;}
h4 {font-family: 'Roboto', sans-serif; font-size: 120%; font-weight:300; line-height: 1.2em; color:#FFFFFF; text-transform:uppercase; letter-spacing: .2em;  margin-top:10px;}

.h3_on {
        font-size: 220%;
        line-height: 100%;
        color:#FFFFFF;
        margin-left:-2px;
        margin-top:4px;
        margin-bottom:0px;
}








p {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        line-height:160%;
        letter-spacing: .1em;
        color: #FFFFFF;
        padding-right:15px;
        text-align:center;
}


.morex {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        font-weight:400;
        line-height:100%;
        letter-spacing: .1em;
        color: #FFFFFF;
        padding-right:10px;
        text-align:right;
        text-transform:uppercase;
}


.artno {
  font-size:80%;
  margin-top: -28px;
  padding-bottom:8px;
  text-align:right;
  padding-right:5px;
  color:#BFBFBF;
}

@media all and (max-width: 960px) {
         h1         {font-size: 160%; }
         .h1_on     {font-size: 160%; }
         .h2_on     {font-size: 95%; }
         .h3_on     {font-size: 160%; }
         h4         {font-size: 120%; }

         p          {font-size: 80%; line-height:150%; }
         .morex     {font-size: 80%;}
         .artno     {font-size:70%; margin-top: -24px; padding-bottom:8px;}

}

@media all and (max-width: 560px) {
         h1         {font-size: 160%; }
         .h1_on     {font-size: 160%; }
         .h2_on     {font-size: 85%; color:#5F5F5F;}
         .h3_on     {font-size: 140%; }
         h4         {font-size: 100%; letter-spacing: .2em;}

         p          {font-size: 75%; line-height:150%; }
         .morex     {font-size: 80%;}
         .artno     {font-size:70%; margin-top: -24px; padding-bottom:8px;}

}










a {
        text-decoration: none;
        outline:none;
}



a:link {
        color: #FFFFFF;     /* weiss */
}


a:visited
        {
        color: #FFFFFF;     /* grau */
}


a:link:hover
        {
        color: #000000;     /* gelb */
}

a:visited:hover
        {
        color: #000000;     /* blau */
}



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


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


/* ----------------- Buttons --------------------------------------------------------------- */












/*  ======================== Footer  ================ */


.footerbox {
  width: 100%;
  margin: 0;
  border: 0px solid ;
  border-color: #FF0000;
  float:left;
  -webkit-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}


.footerlinks  {
        font-family: 'Roboto', sans-serif;
        font-size: 95%;
        line-height: 1.8em;
        font-weight: 400;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #7F7F7F;
        text-align:center;
}


.line_last
        {
        border-bottom: 1px solid  #003F00;
        background-color: #FFFFFF;
        margin-bottom:0;
        height: 1px;
        width: 100%;
}


.displaynone  {
        display: none;
}

@media all and (min-width: 560px) {
         .footerbox { width: 31.7%; margin: 0.5%;  }
         .footerlinks {font-size: 75%; padding-left: 0px;  }
}


@media all and (min-width: 760px) {
         .displaynone { display: block;  }
         .footerbox { width: 31.7%; margin: 0.5%;  }
         .footerlinks {font-size: 80%; padding-left: 0px;  }
}


@media all and (min-width: 1000px) {
         .displaynone { display: block;  }
         .footerbox { width: 19%; margin: 0.5%;  }
         .footerlinks {font-size: 80%; padding-left: 0px;  }
}












/*  ----- distancer  --- */
.distancer
        { border-left: 0px solid  #FFFFFF;  height: 100px;  width: 0px; }


.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: 560px) {
         .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;}

}




.white {
        color: #FFFFFF;
}




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