﻿
/**************/
/*Defaults*/
/*************/

    #wrappr{
        position: absolute;
        overflow: auto;
            overflow-x:hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        height: 100%;
        top: 0;
        right:0;
        z-index: 80;
    }


    html, body {
        background : #0f0f0f;
        overflow : auto;
        margin: 0;
        padding: 0;
        height: 100%;
        text-align:center;
        border: none;
        color:#000;
        font-size: 0.99em;
        line-height: 1.8em;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
    }
    .hd{
        position:absolute;
        overflow:hidden;
        right:0;
        top:0;
        margin:0;
        padding:0;
        margin-right:-130px;
        text-align:right;
        opacity:0.8;

    }
     .hd img{
        width:100%;
        max-width:1200px;
        height:auto;
    }



    #halign{
        margin:auto;
        max-width:1280px;
        z-index:15;
        margin-top:3%;
    }

    a:link {
        color:#357dd4;
        text-decoration : none;
        background-color : transparent;
        font-size:1.0em;
        font-weight: 600;
    }
    a:visited {
        color:#00aeef3;
        text-decoration : none;
        background-color : transparent;
        font-weight: 600;
    }
    a:hover {
        color: #000;
        text-decoration : none;
        background-color : transparent;
        font-weight: 600;

    }
      h1 {
        margin: 0;
        margin-bottom:12px;
        padding: 0;
        font-size: 1.7em;
        line-height:1.45em;
        font-weight:400;
    }

     h2 {
        margin: 0;
        margin-bottom:6px;
        margin-top:24px;
        padding: 0;
        font-size: 0.95em;
        line-height: 1.35em;
        color:#357dd4;
        font-weight:700;
    }
    h3 {
        margin: 0;
        padding: 0;
        font-size: 0.95em;
        line-height: 1.25em;
        color:#000;
        font-weight:700;
    }
    h4 {
        margin: 0;
        margin-bottom:3px;
        padding: 0;
        font-size: 1.2em;
        line-height: 1.3em;
        color:#000;
        font-weight:700;
    }


    /*************/
    /* FX */
    /*************/
     /*Langsamer rollover bei divs */

    a:hover, div:hover {
       opacity: 1;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
       }
    .clear{
        clear:both;
    }
    .ct8{
        -moz-hyphens: auto; /*auto umbruch im Content*/
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;

    }
    /*init hamburger*/
    /* menu btn */

      .header .menu-btn {
        display: none;
    }

    .header .menu-btn:checked ~ .menu {
        max-height: 800px;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
    }

    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
        top: 0;
    }
        .header .menu {
            position:absolute;
            clear: none;
            right:-8%;
            top:38;
            max-height: none;
            width:60%;
        z-index:700;
        font-weight:600;
        }
        .header .menu-icon {
            display: none;
        }

    .sham7{
    display:none;
    }

    /* // init hamburger */
    /*************/
    /* Template */
    /*************/



    .logo{
        position:relative;
        z-index:60;
        padding:3.0% 0 4% 1.5%;
        opacity:0.9;
        text-align:center;
        width:94%;
    }
    .logo img{
        position:relative;
        width:50%;
        height:auto;
        margin-left:-60px;

        float:left;

    }
    .logo img:hover{
          opacity: 0.7;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
    }



    /*************/
    /* hmnu */
    /*************/



    ul.navlist
    {
        max-width:96%;
         list-style: none;
        display: flex;
        align-items: right;
        justify-content: right;
        list-style: none;
        z-index:140;
        position:relative;
        margin:17% 8.5% 0 0;

    }

    ul.navlist li
    {
        display:block;
        background-color:transparent;
        text-indent:0;
        font-size:1.4em;
        text-transform: uppercase;
        margin:0;
        text-decoration:none;
        text-align:left;
        padding:8px 36px 8px 0;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;



    }


    ul.navlist li a
    {
         display:block;
         color:#fff;
         font-weight:600;

    }
    ul.navlist li:last-child{
        padding-right:0px;
    }

    ul.navlist li.active a
    {
        color:#fff;
        position:relative;

    }
    ul.navlist li a:hover
    {
       color:#357dd4;
       opacity:0.7;
    }



    /***********************/
    /*Aktell Kacheln*/
    /**********************/

    .flexbx9{
       display: flex;
       margin:0;
       padding:0;

    }
    .flxit9{
        width:50%;
        padding:24px 8px 0 8px;
        text-align:left;
        line-height:1.4em;
        /*border-right:2px solid #0f64b1;*/
        margin:0;
    }

    .flxit9 img{
        width:100%;
        height:auto;
        padding:8px 0 0 0;
    }

    .flxit9:nth-child(1){
        Padding-left:0;
        border-radius:8px 0 0 0;
    }
    .flxit9:last-child{
        margin-right:0;
        padding-right:0;
        /*border-right:0px solid #0f64b1;*/
         border-radius: 0  8px 0 0;
        }


    .head6{
        background:#0f64b1;
        color:#f4f4f4;
        padding:22px 12px 22px 12px;
        margin-top:-24px;
        border-radius:5px;
        text-transform: uppercase;


    }


    .flxit9 a{
        color:#f4f4f4;
        display:inline-block;
        font-weight:400;
        width:100%;
        height:100%;

    }
    .flxit9 a:hover{
      opacity: 0.9;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out
    }
    .top9{
        margin-top:12px;
    }
    .flexbx10{
       display: flex;
       height:100%;
       flex-direction:column;
       background:#2b2b2b;
       border-radius:5px;


    }
    .flexbx10a{
       height:100%

    }
    .bg99{
        background:#2b2b2b;
        padding: 24px 0 10px 8px;
        font-size:0.98em;
    }

    .bot10{
        text-align:right;
        padding-right:12px;
        color:#357dd4;
        height:24px;
        font-size:1.68em;
    }
    .bot11{
        padding-right:7px;

    }

    .sm8{
    font-size:0.68em;
     font-weight:700;
     color:#fff;
    }
    .tlt8{
     font-size:1.3em;
     font-weight:700;
     color:#fff;
     font-family: "Raleway", sans-serif;
     font-optical-sizing: auto;
    }



    /*************/
    /* content */
    /*************/

    .content{
        position:relative;
        width:95%;
        max-width:1473px;
        color:#fff;
        text-align:left;
        z-index:40;
        min-height:1800px;
        margin:2% 0 0 0;
        padding:0;

    }
    .wpmd4{
         background:#0f0f0f;
        margin-top:5%;
    }
    .ul8{
        margin:0;
        padding:0;
        margin: 12px 0 12px 13px;
        list-style: none; /* Remove default bullets */
    }
    .ul8 li{
        line-height:2em;
      }
    .ul8 li:before{
      content: "\2022";
      color:#357dd4;
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
  }

    /**********************/
    /* Content Container */
    /*********************/
    .ctbx{
        display:flex;
        width:100%;
        margin:0 0 4% 0;
        padding:0 ;
        line-height:1.5em;
        font-size:1em;
    }
    .ctbx a:link, .ctbx a:visited{
        color:#357dd4;
    }
    .ctbx a:hover{
        opacity:0.7;
    }

      .ctbx:nth-of-type(even){
        flex-direction: row-reverse;
    }
    .ctflx{
       display:flex;
       width:49%;

    }
    .ctflx:nth-of-type(even){
       width:2px;
       background-color:#0f64b1;
       margin:0 1% 0 1%;
       }
    /*Layout 10*/
    .pad5{
        width:100%;
    }

    .pad5 img{
        width:100%;
        height:auto;
    }
    .pad5 h1, .pad5 h2{
        font-size:1.8em;
        font-weight:700;
        color:#357dd4;
        margin:0;
        padding:0;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        margin-bottom:-1px;
    }
    .pad5 h2{
        margin:0 0 19px 0;
    }


     .pad5 p{
        font-weight:700;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        opacity:0.9;
     }
     b{
         color:#357dd4;
     }
     .c15{
         float:right;
         font-size:3em;
         margin-right:32px;
     }
     .c15 a{
         color:#357dd4;
     }
     .sup { vertical-align: super; }

    /*Link sektion Layouts*/
     .flxplnk2{
        display:flex;
        justify-content:flex-end;
        width:100%;
        margin:12px 0 18px 0;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-size:1em;
        font-weight:700;
     }
     .flxbxplnk2 a:link{
         color:#357dd4;
     }

     .flxbxplnk2 a:visited{
        color:#357dd4;
     }

    .plnk2tx{
        display:flex;
        align-items:center;
        margin-top:8px;
            }

     .dg8{
         font-size:1.8em;
         margin-left:12px;
     }
     .plnk2tx:hover, .dg8:hover {
         color:#f4f4f4;
         opacity:0.7;
     }

     /*layout 12*/
     .ctflx12{
       width:100%;
       font-size: 0.95em;
    }
    .pad5bx12{
        color:#fff;
        background:#0f64b1;
        padding:24px 6px 22px 20px;
        border-radius:5px;
    }
     .pad5bx12 h2{
        color:#fff;
        margin:0;
        padding:0;
    }
    .pad5bx12 h1{
        color:#fff;
    }

    /*Tabelle flex*/
    .flxtb12{
        display:flex;
        width:100%;
        margin-top:46px;
    }
    .flbx12{
        width:25%;
        border-right: 2px solid #0f64b1;
        padding: 0 8px 0 8px;
    }
    .flbx12 h2{

        }
    .flbx12:first-child{
        padding-left:0;
        }
    .flbx12:last-child{
        border-right:0;
        padding-right:0;
    }
    .flbx12  ul{
        margin:0 0 32px 24px;
        padding:0;
        width:100%;

    }
    .flbx12  li a:link{
        color:#f4f4f4;
        font-weight:400;
        font-size:0.95em;
        line-height:1.9em;
    }
    .flbx12  li a:visited{
        color:#f4f4f4;
    }
    .flbx12  li a:hover{
        color:#357dd4;
        opacity:0.7;
    }

    .dg9 {
        color:#357dd4;
        font-size:0.8em;
    }
    .blk3{
       background:#0f0f0f;
       margin-bottom:-36px;
    }
    .pad5bx12{
        margin-bottom:24px;
    }









/*************/
/* impress-galerie */
/*************/
.flxit93{
    display:flex;
    flex-wrap:wrap;
    width:99%;
    margin:36px 24px 0 0;


}
.flxit94{
    width:50%;
    padding:0 16px 20px 0;
    max-width:276px;
}

.flxit94 img {
    width:100%;
    height:auto;
    border-radius: 8px 8px 0 0;
}
.bottom{
    background:#357dd4;
    text-align:center;
    border-radius: 0 0 8px 8px;
}

/*************/
/* footer */
/*************/
.footer{
    width:100%;
    align-items:center;
    display:flex;
    justify-content: space-between;
    background:#0f64b1;
    color:#fff;
    border-radius:8px;
    padding: 24px 0 24px  0 ;
}
.ftr{
    padding: 0 18px 0 24px;
    line-height:1.6em;
}

.foot6{
    color:#fff;
    font-weight:400;
  padding-right:3%;
}
.footer a:link{
    color:#fff;
    font-weight:400;
}
.footer a:hover{

   opacity:0.7;
}
.footer a:visited{
    color:#fff;
}
.ftl9:hover{
    opacity:0.7;
}
.footer img  {
    position:relative;
    margin-bottom:-9px;
}



/*************/
/* Screen bis 1604px)*/
/*************/
@media screen and (max-width: 1604px) {
body {
    /*background-color:fuchsia; */
}
 #halign{
    padding-left:4%;
}
}/*end*/

@media screen and (max-width: 1326px) {

.flxit94{
    max-width:266px;
}

}/*end*/

/*************/
/* Screen bis 1314px)*/
/*************/
@media screen and (max-width: 1314px) {
body {
    /*background-color:lime;    */
}
#halign{
    padding-left:6%;
}
.flxit94{
    padding:0 24px 24px 0;
    max-width:292px;
}

}/*end*/

/*************/
/* Screen bis 11198x)*/
/*************/
@media screen and (max-width: 1198px) {
body {
   /* background-color:cyan;*/
}
 html, body {

        font-size: 0.89em;
}

}/*end*/


/*************/
/* Tablet bis 1024px */
/*************/
@media screen and (max-width: 1024px) {
body {
/*background-color:aqua; */

.flxit94{
    padding:0 24px 24px 0;
    max-width:400px;
}
}


/*hamburger*/
/* header */


.header {
    position:absolute;
    right:5%;
    margin-top:0%;
    z-index:99999;
    width:70%;

}

.header ul {
    padding: 0 0 0 0;
    margin-top:5%;
    margin-left:30%;
    list-style: none;
    overflow: hidden;



}

.header li a {
    display: block;
    padding: 10px 10px;
    border-right: 0px solid #0f64b1;
    text-decoration: none;
    color:#fff;
}

.header li a:hover,
.header .menu-btn:hover {
   background-color: #000;
     text-shadow: -1px -1px 0 #000   , 1px -1px 0 #000   , -1px 1px 0 #000   , 1px 1px 0 #000   ;
}
ul.navlist
{
     display: inherit;
    z-index:99999;
      background-color: #000;
    webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
ul.navlist li
{
    font-size:1.5em;
    text-align:left;
    padding-left:8%;
    text-shadow: -1px -1px 0 #000 , 1px -1px 0 #000 , -1px 1px 0 #000 , 1px 1px 0 #000 ;
}

ul.navlist li a
{
 color:#fff;

}
ul.navlist li a:hover
{
 color:#fff;

}
ul.navlist li:first-child{
       margin-top:10%;
}

/* menu */

    .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 20px 20px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #f4f4f4;
    display: block;
    height: 6px;
    position: relative;
    transition: background .2s ease-out;
    width: 28px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #f4f4f4;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 9px;
}

.header .menu-icon .navicon:after {
    top: -9px;
}

.header .menu-btn:checked ~ .menu {
    position:relative;
    padding-bottom: 48px;
}
 .sham7{
    display:block;
    font-size:0.4em;
}


/*//hamburger*/






}/*end*/

/*************/
/* Tablet bis bis 919px  */
/*************/
@media screen and (max-width: 919px) {
body {
/*background-color:orange; */
}
.pad5 h1, .pad5bx12 h1,.pad5 h2, .tlt8 {
  font-size:1.5em;

}
.flxit94{
    width:45%;
    padding:0 24px 24px 0;
    max-width:100%;
}

}/*end*/
/*************/
/* Mobile bis 754px  */
/*************/
@media screen and (max-width: 754px) {
body {
/*background-color:maroon;  */
}
 html, body {

        font-size: 1em;
}
.header {
    right:3%;
    width:100%;
}
.hd{
    opacity:0.5;
    }
.logo img{
    margin-left:-14px;
    width:100%;
    max-width:736px;
    opacity:1;
}
.flexbx9{
    flex-wrap:wrap;
}
.flxit9{
    width:100%;
    border:0;
    padding-right:0;
    padding-left:0;
}

.content{

}
.ctbx{
    flex-wrap:wrap;


}
.ctflx{
    width:100%;
     margin-bottom:36px;
}
.flxtb12{
    flex-wrap:wrap;
}
.flbx12{
    width:100%;
}
.footer{
    width:100%;
    flex-wrap:wrap;
}
.ftr{
    width:100%;
}
.ftr:last-child{
    margin-top:24px;
}
.flxit94{
    width:90%;
    padding:0 24px 0px 0;
    max-width:100%;
}

}/*end*/

@media screen and (max-width: 560px) {
  .header .menu {
   font-size:0.8em;
  }
}/*end*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/* IE bis 11 Bug Fix kein Flexbox rechte boxen*/


}/*end*/


