﻿
/**************/
/*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-color:#fcfdff;
        overflow : auto;
        margin: 0;
        padding: 0;
        height: 100%;
        text-align:center;
        border: none;
        color:#000;
        font-size: 0.98em;
        line-height: 1.8em;
        font-family: 'Fira Sans Condensed', sans-serif;
    }
        #halign{
        margin:auto;
        max-width:1682px;
        z-index:15;
        margin-top:0;

    }
  a:link {
       color:#000;
        text-decoration : none;
        background-color : transparent;
        font-size:1.0em;
        font-weight: 500;
    }
    a:visited {
        color:#000;
    }
    a:hover{
        color: #e30613;
        text-decoration:underline;
    }
      h1, h2 {
        color:#000;
        margin: 0;
        margin-bottom:5.5%;
        padding: 0;
        font-size: 1.2em;
        line-height:1.45em;
        font-weight:700;
    }
    h2{
        margin-bottom:12px;
    }


    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;
    }
    .bz5 {
        display:block;
    }
    .bz6 {
        display:none;
    }
    .twint{
        width:100%;
        max-width:448px;
        height:auto;
    }

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

    a:link {
       opacity: 1;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
       }
        a:link:hover{
       opacity: 0.7;
       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;

    }
    .ark12{
        font-size:1.15em;
        width:90%;
        text-align:right;

    }

/**************/
/*Init Hamburger*/
/*************/

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

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

    .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%;
            max-height: none;
            width:50%;
            z-index:700;
    }
        .header .menu-icon {
            display: none;
        }

    /* header */
 .header .menu {
            right:auto;
            top:12px;
 }

.header {
    position:absolute;
    right:1.7%;             /*Position Menue und Hamburger zum Logo*/
    margin-top:-9.2%;
    z-index:99999;
    width:45%;
}

.header ul {
    padding: 0;
    list-style: none;
    overflow: hidden;
}

ul.navlist
{
    display: inherit;
    z-index:99999;
     background:rgba(218, 218, 218, 0.9);
    webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    min-width:80%;
    margin-left:0;

}
ul.navlist li
{
    font-size:1.4em;
    line-height:2.1em;
    text-align:left;
    margin:0 0 4px 7%;
    background:#fff;
    padding:4px 8px;
    border-radius:6px;
    opacity:0.8;
}
ul.navlist li:first-child{
    padding-top:24px;
}

ul.navlist li a:link{
    font-weight:400;
    color:#000;
}
ul.navlist li a:hover{
    color:#e30613;
}
ul.navlist li a:visited{
    color:#000;
}
ul.navlist li div{
    font-size:0.85em;
    line-height:2.2em;
    padding-left:12px;
}
ul.navlist li div a:hover{
    color:#e30613;
}
ul.navlist li div:last-child{
    margin-bottom:12px;
    }



/* 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: 14px 5.8%;
    position: relative;
    user-select: none;
}

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

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

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

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

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


/*//hamburger*/
/**************/
/*Template*/
/*************/
    .template{
        position:relative;
        text-align:left;
        z-index:333;
    }
    .logo{
        width:26.54%;
        height:auto;
        max-width:446px;
        padding-top:2.2%;
        margin-left:7%;
    }
    .hnav6{
        position:absolute;
        width:150%;
        text-align:right;
        right:13%;
    }

    .hnav6 ul{
        margin-top:0%;
        margin-left:0%;
        list-style: none;
        overflow: hidden;
    }

    .hnav6 li {
        display:inline;
        padding:0 6px 0 6px;
        border-right:1px solid #000;
    }
    .hnav6 li:last-child{
       border:0;
    }
    .hnav6 li a:link{
        font-size: 1.5em;
        line-height: 1.5em;
        color:#000;
        font-weight:400;
        }
       .hnav6 li a:hover{
        color:#e30613;
        }
         .hnav6 li a:visited{
        color:#000;
        }

    .tmplimg{
        width:100%;
        height:auto;
        margin-top:2%;
        border-radius:4px 4px 0 0 ;
    }

/**************/
/*Content*/
/*************/
    .content{
        margin-top:-1%;
        padding:3.5% 3% 2.5% 7%;
        text-align:left;
        z-index:222;
      }
    .homred{
        background:#e30613;

    }

/*Layout 10*/

    .ctbx{
        display:flex;
        width:100%;
        flex-direction:column;

}
    .pad5{
        width:90%;
        font-size: 1.2em;
        line-height:1.4em;
        font-weight:400;
        margin-bottom:48px;
        -moz-hyphens: auto; /*auto umbruch im Content*/
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;

    }
.pad5 img{
    width:100%;
    height:auto;
}

/*linksec*/
.linksec{
    display:flex;
    margin-top:2.5%
}
.mg8{
    margin-top:-2.5%;
}
.linksec a{
    font-size:0.95em;
}

.lkflx{
    margin-right:3%;
}

.dg8{
    margin-right:4px;
}

/***********************/
/* Kacheln*/
/**********************/

.flexbx9 {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    margin-top: -1.5%;
    margin-bottom: 2%;
    padding: 0;

}

.flxit9 {
    width: 30%;
    padding: 24px 28px 24px 8px;
    text-align: left;
    font-size:1.1em;
    line-height: 1.4em;
    margin: 0;
}

.flxit9 img {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius:4px 4px 0 0 ;
}

.head6 {
    color: #000;
    padding: 14px 12px 24px 0px;

    border-radius: 4px;

}


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

}

.flxit9 a:hover {
     text-decoration:none;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out

}

    .flexbx10{
       display: flex;
       height:100%;
       flex-direction:column;

    }
    .flexbx10a{
       display: flex;
       flex-direction:column;
       height:100%;
    }
        .bot11{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        background:#fcfdff;
        border-radius:0 0 4px 4px ;
        margin-top:1.5%;
         height:100%;
         padding:18px 40px;

    }
    .bot11 div:nth-child(2){
        flex-basis:100%;
        min-height:180px;
    }
    .bot11 div:nth-child(3){
        border:2px solid #333333;
        text-align:center;
        font-size:0.9em;
        font-weight:500;
        color:#333333;
        padding:6px 16px;
        width:60px;
        opacity:0.8;
        border-radius:4px;
    }

    .sm8{
    font-size:0.68em;
     font-weight:700;
     color:#fff;
    }
    .tlt8{
     font-size:1.1em;
     font-weight:700;
     color:000;
     margin:0;

    }
.ft88 {
    color:#fff;
    padding:96px 0;
}

/*************/
/* impress-galerie */
/*************/
.flxit93{
    display:flex;
    flex-wrap:wrap;


}
.flxit94{
    width:22%;
    padding:0 12px 12px 0;
}

.flxit94 img {
    width:100%;
    height:auto;
}

/*************/
/* footer */
/*************/
.footer{
    padding:3.5% 3% 4% 7%;
    color:#fff;
    background:#000;
    font-weight:400;
    font-size:1.2em;
}
.footer a:link{
    color:#fff;
    font-weight:400;
    }
.footer a:hover{
    color:#e30613;
    opacity:1;
    }
.footer a:visited{
    color:#fff;
    }

.ftr{
    display:flex;
    width:97%;
    padding: 0;
    line-height:1.6em;
    text-align:left;
    justify-content:space-between;
}
.foot6{
    width:33%;
}
 .foot6:nth-child(2){
    flex-basis:54%;
}
 .foot6:nth-child(3){
    width:10%;
    text-align:right;
 }
 .txf4{
     width:65%;
 }
 .fsiz7{
     font-size: 2.8em;
     margin-bottom:18px;
     opacity: 1;
 }
 .cntr4{
     text-align:center;
 }

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

 /*************/
/* Screen bis 1224px)*/
/*************/
@media screen and (max-width: 1297px) {
    body {
     /* background:fuchsia;    */
    }
 .hnav6 li a:link{
        font-size: 1.4em;
        line-height: 1.5em;
}

}/*end */

/*************/
/* Screen bis 1224px)*/
/*************/
@media screen and (max-width: 1224px) {
    body {
     /* background:lime;  */
    }
    .hnav6{
        width:170%;
    }
.flxit9 {
    width:43%;
    }
.hnav6 li a:link{
        font-size: 1.2em;
        line-height: 1.5em;
}
}/*end*/

/*************/
/* Screen bis 1064px)*/
/*************/

@media screen and (max-width: 1064px) {
    body {
   /*  background:cyan;   */
    }
    .hnav6{
        display:none;
    }
.logo{
    min-width:260px;
    }
.header {
    margin-top:-10.2%
}

.header .menu-icon .navicon {
    background: #4f4f4f;
    height: 6px;
    width: 36px;
}
.header .menu-icon .navicon:before {
    top: 12px;
}
.header .menu-icon .navicon:after {
    top: -12px;
}

  .pad5{
        width:97%;
}
.linksec{
    display:flex;
    flex-wrap:wrap;
    margin-top:36px;

}
.lkflx{
    margin-bottom:12px;
}

.flxit9 {
    width:45%;
    }
 .foot6:nth-child(2){
    flex-basis:64%;
}
 .txf4{
     width:75%;
 }

}/*end*/
/*************/
/* Screen bis 821px)*/
/*************/

@media screen and (max-width: 821px) {
    body {
        /*background:lime; */
    }
     h1, h2 {
        margin-bottom:7.5%;
    }
.header {
    margin-top:-14.2%;
    width:60%;
}
ul.navlist
{
    min-width:450px;
    margin-left:-30%;
}
.tmplimg{
    width:130%;
    overflow:hidden;
}
.content{
        padding-top:6%;
        padding:3.5% 0% 2.5% 0%;
      }
.flxit9 {
    width:48%;
    padding: 24px 6px 24px 6px;
    }
  .pad5{
       padding-left:7%;
       width:90%;
}
.ftr{
    display:flex;
    flex-wrap:wrap;
    width:97%;

}
.foot6{
    width:100%;
}
 .foot6:nth-child(2){
     margin:48px 0 48px 0;
    flex-basis:inherit;
    width:100%;
}
 .foot6:nth-child(3){
    margin:24px 0 56px 0;
 }
 .txf4{
     width:90%;
 }
 .flxit93{
   margin-left:5%;


}
 .flxit94{
    width:45%;
    padding:0 12px 12px 0;
}

}/*end*/

/*************/
/* Screen bis 650px)*/
/*************/

@media screen and (max-width: 650px) {
    body {
       /*background:lightblue;  */
    }


.flxit9 {
    width:100%;
    padding: 24px 0px 24px 0px;
    }


}/*end*/

/*************/
/* Screen bis 480px)*/
/*************/

@media screen and (max-width: 480px) {
    body {
        /*background:lightgreen; */
    }

  .header {
    margin-top:-28.2%;
}
ul.navlist
{
    min-width:320px;
    margin-left:-45%;
}

}/*end*/

/*************/
/* Screen bis 480px)*/
/*************/

@media screen and (max-width: 320px) {
    body {
    /*background:yellow; */
    }
    #halign{
    

}
.logo{
    min-width:180px;
    max-width:180px;
}
 .flxit94{
    width:92%;
    padding:0 0 12px 0;
}

}/*end*/