* {
    box-sizing: border-box;

    margin:  0;
    padding: 0;

    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4;
    hyphens: auto;
    hyphenate-limit-chars: auto 5;
    hyphenate-limit-lines: 2;
}

body{
    font-family: 'Jost', verdana, sans-serif;

    font-size: 1.1rem;
    font-weight: 300;

    color: #131315;

    background-image: url(../_img/hg-06-mid.jpg);
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top center;
}

h1{font-weight: 400; margin-bottom: 1rem;}
h2{font-weight: 400; margin-bottom: 1rem;}
h3{font-weight: 400; margin-bottom: 1rem;}
h4{font-weight: 300; margin-bottom: 1rem;}
h5{font-weight: 300; margin-bottom: 1rem;}
h6{font-weight: 300; margin-bottom: 1rem;}

h1, h2, h3, h4, h5, h6, p{

}

.h2-4{
    font-size: 4.5rem;
    font-weight: 600;
}


p{
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4;
    hyphens: auto;
    hyphenate-limit-chars: auto 5;
    hyphenate-limit-lines: 2
}
p, ul{
    margin-bottom: 1.2rem;
}

a, a:active, a:visited{
    color: #131313;

    text-decoration: none;

    cursor: pointer;
}

img{
    width: 100%;

    vertical-align: bottom;
}

ul{
    margin-left: 1.2rem;
}
ul li{
    margin-bottom: 1rem;
}

input, textarea, button, select, .textarea {
    font-family: 'Jost', verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;

    background-color: transparent;
}
input, textarea, .textarea{
    display: inline-block;

    border: thin solid #ccc;
    _border-radius: 0.4375rem;

    line-height: 2rem;
}
textarea{
    width: 100%;

    margin:  0 0 5px 0;
    padding: 10px 10px;

    font-size: 16px;
    line-height: 24px;
}
input[type="text"], input[type="tel"], input[type="email"]{
    width: 100%;

    padding: 0 0.6rem;
}




.s-10{ width: 10%; }
.s-20{ width: 20%; }
.s-30{ width: 30%; }
.s-40{ width: 40%; }
.s-50{ width: 50%; }
.s-60{ width: 60%; }
.s-70{ width: 70%; }
.s-80{ width: 80%; }
.s-90{ width: 90%; }
.s-100{ width: 100%; }



.f{
    display: flex;
}
.f-wrap{
    flex-wrap: wrap;
}

.gutter > div{

    margin-left: 1rem;

    margin-bottom: 1rem;
}
.gutter > div:last-child{

    margin-right: 1rem;

}

.space-between{
    justify-content: space-between;
}

.c-1{ width: calc(100%/12*1); }
.c-2{ width: calc(100%/12*2); }
.c-3{ width: calc(100%/12*3); }
.c-4{ width: calc(100%/12*4); }
.c-5{ width: calc(100%/12*5); }
.c-6{ width: calc(100%/12*6); }
.c-7{ width: calc(100%/12*7); }
.c-8{ width: calc(100%/12*8); }
.c-9{ width: calc(100%/12*9); }
.c-10{ width: calc(100%/12*10); }
.c-11{ width: calc(100%/12*11); }
.c-12{ width: calc(100%/12*12); }


.colum-set{
    display: flex;
    flex-wrap: wrap;

    margin: 0 -0.6rem;
}
.colum-set > div{
    align-self: flex-start;

    padding: 0 0.6rem;
}
.colum-set .s1{width: calc(100%/1);}
.colum-set .s2{width: calc(100%/2);}
.colum-set .s3{width: calc(100%/3);}
.colum-set .s3-2{width: calc(100%/3*2);}
.colum-set .s3-1{width: calc(100%/3*1);}
.colum-set .s4{width: calc(100%/4);}
.colum-set .s5{width: calc(100%/5);}
.colum-set .s6{width: calc(100%/6);}
.justifyContentCenter{
    justify-content: center;
}





header{
    width: 100%;

    margin: auto;

    padding: 3% 3.5% 0% 2.5%;

    background-image: url(../_img/hg-06-top.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}
header .row-1{
    display: flex;
    flex-direction: row;

    padding: 5px 0 0 0;

    border-bottom: solid thin #13131550;
}
header .row-1 .left{
    width: 50%;

    font-weight: 200;
}
header .row-1 .datum{
    width: 50%;

    text-align: right;

    font-weight: 200;
}
header .row-2{
    display: flex;
    align-self: center;

    padding: 1rem 0 1rem 0;
}
header .row-2 .page-logo{
    width: 15%;
}
header .row-2 .page-logo img{
    width: 100%;
}
header .row-2 .page-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 70%;
}
header .row-2 .page-title .page-title-zeile-1{
    text-align: center;

    font-family: 'spectral';
    font-size: 7rem;
    font-weight: bold;
    line-height: 6rem;
}
header .row-2 .page-title .page-title-zeile-2{
    text-align: center;

    font-family: 'Open Sans';
    font-size: 1.25rem;
    font-weight: 100;
    line-height: 1.25rem;
}
header .row-3 .menu{
    border-top: thin solid #13131350;
    border-bottom: thin solid #13131350;
}
header .row-3 .menu ul{
    display: flex;
    justify-content: center;

    margin: 0;

    list-style: none;
}
header .row-3 .menu ul li{
    margin: 0;

    padding: 5px 15px;
}


#content{
    display: flex;

    margin: auto;

    padding: 1.2rem 3.5% 0% 2.5%;

    text-align: justify;
}

#content aside#aside-left{
    width: 15%;

    padding: 0 1.2rem 0 0;

    border-right: solid thin #13131550;
}
#content aside#aside-right{
    width: 15%;

    padding: 0 0 0 1.2rem;

    border-left: solid thin #13131550;
}

#content main{
    width: 70%;

    padding: 0% 1.2rem 1.2rem 1.2rem;
}



footer{
    min-height: 100px;

    margin-top: 1.2rem;

    padding: 0 3.5% 0% 2.5%;

    background-image: url(../_img/hg-06-foo.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
}




.box-set{
    display: flex;
    flex-wrap: wrap;

    margin-right: -1.2rem;
}
.box-set > .box {
    width: calc(100%/3);

    padding: 0 1.2rem 1.2rem 0;
}
.box > .inner {
    padding: 20px;

    border: solid thin #13131350;
}
.box .top{
    margin: 0 0 15px 0;
    _background-color: #13131315;
}
.box .top .logo {
    width: 50%;

    margin: auto;

    border: solid thin #13131350;
    border-radius: 200px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}
.box .top .logo img{
    width: 100%;
}
.box .mid .title{
    text-align: center;
}
.box .mid .title .company{
    min-height: 6.8rem;

    font-family: 'spectral';
    font-size: 1.25rem;
    line-height: 1.9rem;
    font-weight: 300;
}
.box .mid .title .ap {
    font-size: 1rem;
    font-weight: 300;
}
.box .mid .toggler{
    text-align: center;

    cursor: pointer;
}
.box .mid .text{
    display: none;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4;
}
.box .mid .text ul{
    margin-left: 2rem;
}




.border-top{border-top: solid thin #13131550;}

.padding-top{padding-top: 1.2rem;}
.padding-bottom{padding-bottom: 1.2rem;}

.txt-l{text-align: left;}
.txt-r{text-align: right;}

.msg_err{
    display: inline-block;

    _margin: 5px 0;
    _padding: 10px 15px;

    color: #0262b4;

    _background-color: #ffcc00;

    _border: solid thin #ffcc00;
}


.bt, .bt-rnd{
    display: inline-block;

    padding: 10px;
    border: none;

    text-align: center;

    cursor: pointer;

    transition: all 0.25s;
}
.bt-border{
    border: solid thin #131315;
}
.bt-rnd{

    border-radius: 5px;

}
.bt-100{
    width: 100%;
}
.bt-red{
    color: #ffffff;
    background: #850000;
}
.bt-red:hover{
    box-shadow: 0px 0.1rem 0.5rem #85000080, 0 0.25rem 1rem #373c4333;
}
.bt-green{
    color: #ffffff;
    background: #008500;
}
.bt-green:hover{
    box-shadow: 0px 0.1rem 0.5rem #00850080, 0 0.25rem 1rem #373c4333;
}
.bt-yellow{
    color: #ffffff;
    background: #ffcc00;
}
.bt-blue{
    color: #ffffff;
    background: #0262b4;
}
.bt-blue:hover{
    box-shadow: 0px 0.1rem 0.5rem #0262b480, 0 0.25rem 1rem #373c4333;
}
.bt-disabled{
    color: #ffffff;
    background: #cccccc;

    cursor: default;
}


.cookiehinweis{

    position: absolute;
    
    z-index: 9999;

    top: 0px;

    width: 100%;
    
    padding: 25% 25% 75% 25%;

    background-color: rgba(255,255,255, 0.85);
    
}
.cookiehinweis .inner{

    padding: 5%;
    
    background-color: #ffffff;

    box-shadow: 0 0 15px rgba( 0, 0, 0, 0.25 );

}


.firmen_logos_aside div{
    margin-bottom: 1.2rem;

    background-color: #cccccc50;
}
.firmen_logos_aside div img{
    padding: 1.2rem;
}


.rubriken_content .rubriken{
    padding: 1.2rem 0;

    background-color: #cccccc50;

    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
}

.kundennetzerk_der_brz .f{
    flex-wrap: wrap;
}
.kundennetzerk_der_brz .item{
    width: calc(92%/5); /* 100% - 4 * 2% vom margin */
    margin: 0 2% 2% 0;
    padding: 0 2%;
    background-color: #cccccc50;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}
.kundennetzerk_der_brz .item:nth-child(5n + 5){
    margin: 0 0 2% 0;
}

.dienstleistungen-single{

}
.dienstleistungen-single .top .logo{
    width: 50%;

    margin: auto;

    border: solid thin #13131350;
    border-radius: 200px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}
.dienstleistungen-single .top .company{
    text-align: center;

    margin-top: 0.6rem;
}
.dienstleistungen-single .mid{
    margin-bottom: 1.8rem;
}


/* Formular */
#anschreiben{
    display: none;
}
.anschreiben {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}


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

    .h2-4{
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: 600;
    }

    header .row-1 {
        flex-wrap: wrap;
    }
    header .row-1 .left {
        width: 100%;

        text-align: center;

        font-size: 0.9rem;
        font-weight: 200;
    }
    header .row-1 .datum {
        width: 100%;

        text-align: center;

        font-weight: 200;
    }

    header .row-2{
        flex-wrap: wrap;
    }
    header .row-2 .page-logo{
        order: 2;
        text-align: center;

        width: 50%;
    }
    header .row-2 .page-logo img{
        order: 3;
        text-align: center;

        width: 50%;
    }
    header .row-2 .page-title {
        order: 1;

        width: 100%;

        padding: 0 0 1rem 0;
    }
    header .row-2 .page-title .page-title-zeile-1 {
        padding: 0 0 0.5rem 0;
        font-size: 4rem;
        font-weight: bold;
        line-height: 4rem;
    }

    header .row-3 .menu ul {
        flex-direction: column;
    }



    #content{
        flex-wrap: wrap;
    }
    #content aside#aside-left{
        display: none;
    }
    #content aside#aside-right{
        width: 100%;

        padding: 1.2rem 1rem 0 1rem;

        border-left: 0;
        border-top: solid thin #13131550;
    }
    #content main {
        width: 100%;
        padding: 0% 1rem 1rem 1rem;
    }



    .f{
        flex-wrap: wrap;
    }

    .s-10{ width: 100%; }
    .s-20{ width: 100%; }
    .s-30{ width: 100%; }
    .s-40{ width: 100%; }
    .s-50{ width: 100%; }
    .s-60{ width: 100%; }
    .s-70{ width: 100%; }
    .s-80{ width: 100%; }
    .s-90{ width: 100%; }
    .s-100{ width: 100%; }

    .colum-set{
        display: flex;
        flex-wrap: wrap;

        margin: 0 -0.6rem;
    }
    .colum-set > div{
        align-self: flex-start;

        padding: 0 0.6rem;
    }
    .colum-set .s1{width: 100%;}
    .colum-set .s2{width: 100%;}
    .colum-set .s3{width: 100%;}
    .colum-set .s3-2{width: 100%;}
    .colum-set .s3-1{width: 100%;}
    .colum-set .s4{width: 100%;}
    .colum-set .s5{width: 100%;}
    .colum-set .s6{width: 100%;}
    .justifyContentCenter{
        justify-content: center;
    }




    .box-set > .box {
        width: calc(100%/1);
        padding: 0 1.2rem 1.2rem 0;
    }

    .rubriken_content .s3{width: 100%;margin-bottom: 1rem;}

    .kundennetzerk_der_brz .f{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .kundennetzerk_der_brz .item{
        width: calc(100%/2.2);
        margin: 0 0 1rem 0;
    }

    .title{
        text-align: left;
    }
}