*{
    margin:0;
    padding:0;
    text-decoration:none;
    font-family: 'Roboto', sans-serif, helvetica, arial, verdana;
}

h1{
    color:white;
    font-size:2em;
    text-transform:uppercase;
    font-weight:300;
}
h1 span {
    margin: 0 0 30px 0;
    background-color: #042452;
    padding: 10px;
    line-height: 2em;
}
h1 span.bold{
    font-weight:700;
}

h2{
    font-size:4.5em;
    font-weight:500;
    margin:0 0 40px 0;
    color:#042452;  
}
h2 span{
    font-size:0.9em;
    font-weight:300;
    margin:0 0 20px 0;
}
h3{
    font-size: 2.5em;
    font-weight: 100;
    margin: 0 0 30px 0;
    color:#be1522; 
}  
.datenschutz h3{
    color:#be1522;
    margin: 50px 0 20px 0;
}
p{
    margin: 0 0 20px 0;
    font-weight: 300;
    color: #555;
    line-height: 1.4em;
    font-size: 1.4em;
    word-wrap:break-word;
}
p.hervorhebung{
    font-weight:700;
    color:#042452;
}
a{
    color:inherit;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    border-bottom:2px solid transparent;
}
a:hover{
    color:#be1522;
    border-bottom:2px solid #be1522;
    padding-bottom:10px;
}
div ul {
    margin-bottom: 40px;
}
div ul li {
    margin: 0 0 0px 40px;
    font-weight: 300;
    color: #555;
    line-height: 1.4em;
    font-size: 1.4em;
}

.wrapper{
    width:80%;
    height:auto;
    margin:auto;
}




/* -----------------------------------------------------------------------  Allgemein  ------------ */


.spalten{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
button{
    padding: 10px;
    background-color: white;
    color: #042452;
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;
    font-size: 1.5em;
    border: none;
    text-transform: uppercase;
    font-weight: 300;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
button:hover{
    background-color:#042452;
    color:white;
}

.mehr-informationen {
    text-align: center;
    width: 400px;
    padding: 50px 0;
    margin: auto;
    position: relative;
}
.fa-angle-double-down.active{
    transform: scaleY(-1);
}

.mehr-informationen-tab{
    display:none;
}

#scroll-to-top:hover {
    cursor: pointer;
    padding-right: 120px;
}
#scroll-to-top {
    position: fixed;
    right: 0px;
    bottom: 40px;
    z-index: 100;
    padding: 10px 50px 10px 10px;
    background-color: white;
    border-radius: 50px 0 0 50px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}


/* -----------------------------------------------------------------------  header  --------------- */


header{
    width:100%;
    height:auto;
    background:url("pictures/jastschenko-trockenbau-titelbild.jpg");
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

header .logo{
    float:left;
    width:300px;
    height:auto;
}
header nav{
    font-size:1em;
    text-transform: uppercase;
    padding-top:40px;
}
header ul{
    text-align: right;
    padding-top:10px;
}
header ul li{
    display:inline;
    margin:0 0 0 20px;
    color:#042452;
    font-weight:500;
    letter-spacing: 4px;
}
#schrift{
    padding: 35% 0 12% 0;
}

/* -----------------------------------------------------------------------  Über uns  ---------------- */

#uber-uns{
    padding: 50px 50px;
}
#uber-uns .spalten > *{
    width:31%;
}
#uber-uns .wrapper{
    width:100%;
}
#uber-uns .spalten div{
    width:32%;
    padding: 40px;
    box-sizing: border-box;
}
#uber-uns img{
    max-height:600px;
}

/* -----------------------------------------------------------------------  Unsere Leistungen  ------- */

#unsere-leistungen{
    padding: 125px 0 0 0;
    background-color:#be1522;
}
#unsere-leistungen h2,#unsere-leistungen p{
    color:white;
}
#unsere-leistungen .spalten > *{
    width:48%;
}

#buttons {
    padding: 50px 0;
}

.fa-angle-double-down {
    text-align: center;
    font-size: 4em;
    color: white;
    width: 100%;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.fas.fa-angle-double-down:hover {
    color:#042452;
    cursor:pointer;
    padding-top: 10px;
}


/* -----------------------------------------------------------------------  Leistungen im Detail - --- */


#leistungen-im-detail{
    padding: 125px 0;
    background-color:#820e17;
    color:white;
    -webkit-box-shadow: inset 0px 185px 31px -164px rgba(0,0,0,0.23);
    -moz-box-shadow: inset 0px 185px 31px -164px rgba(0,0,0,0.23);
    box-shadow: inset 0px 185px 31px -164px rgba(0,0,0,0.23);
}
#leistungen-im-detail .spalten > *{
    width:48%;
}
#leistungen-im-detail ul li {
    font-size: 1.5em;
    font-weight: 100;
    line-height: 1.5em;
    margin-bottom: 10px;
    color:#bbb;
}

#leistungen-im-detail h3{
    color:white;
}

/* -----------------------------------------------------------------------  Referenzen - ------------- */

#referenzen{
    padding:125px 0;
    background-color:#f5f5f5;
}
#referenzen .wrapper .spalten > *{
    width:32%;
}
#referenzen .spalten{
    margin:0 0 2% 0;
}
#referenzen h3{
    color:#820e17;
}
#referenzen img {
    width: 100%;
    height:auto;
}

/* -----------------------------------------------------------------------  Vorschaubild  ------------ */


#vorschaubild{
    background:url("pictures/jastschenko-trockenbau-fertige-wohnung.jpg");
    width:100%;
    height:auto
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 40% 0% 10% 50%;
    box-sizing: border-box;
}
#vorschaubild h2{
    color:white;
    font-size:3em;
}



/* -----------------------------------------------------------------------  Kontaktdaten  ------------ */


address{
    padding:125px 0;
    font-style: normal;
}

address article{
    width:48%;
}

address .apell {
    font-size: 1.5em;
    font-weight: 100;
    text-transform: uppercase;
    color: #042452;
}
address .apell .hervorhebung {
    font-size: 2em;
    text-transform: uppercase;
}


/* -----------------------------------------------------------------------  Footer  ------------------ */


footer section{
    width:100%;
    background-color:#be1522;
    padding:70px 0;
}
footer section .logo{
    margin:auto;
    display: block;
} 

footer nav{
    text-align:center;
    color:#777;
    background-color:#f1f1f1;
    padding:30px 0;
}

footer ul li{
    display:inline;
    text-transform: uppercase;
    padding:0 20px;
}











/* -----------------------------------------------------------------------  Tabletansicht ----------- */
/* --------------------------------------------------------- */

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

#uber-uns p{
    font-size:1.2em
}
    h2{
        font-size:3.5em;
    }
}



/* -----------------------------------------------------------------------  Mobilansicht  ----------- */
/* --------------------------------------------------------- */

@media screen and (max-width:1000px){
    .spalten{
        display: block;
    }
    .spalten >*{
        width:100%!important;
    }
    
    h1{
        font-size:1em;
    }
    h1 span{
        line-height: 2.8em;
    }
    h2{
        font-size:1.9em;
        font-weight:700;
        margin: 0 0 20px 0;
    }
    h3{
        font-size:1.5em;
    }
    p{
        font-size: 1.1em;
    }
    header nav ul{
        display:none;
    }
    header nav{
        margin-bottom:170px;
    }
    div ul li{
        font-size:1.1em;
    }
/* ---------------------------------------  Allgemein  ---------------- */

    button{
        font-size: 1em;
    }
    .mehr-informationen{
        width:100%
    }
    #scroll-to-top {
    position: fixed;
    right: 0px;
    bottom: 32px;
    z-index: 100;
    padding: 10px 20px 10px 10px;
    background-color: white;
    border-radius: 50px 0 0 50px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 4px 5px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 5px 10px rgba(0,0,0,0.5);
    -o-box-shadow: 4px 5px 10px rgba(0,0,0,0.5);
    box-shadow: 4px 5px 10px rgba(0,0,0,0.5);
    width: 20px;
    height: auto;
}
    #scroll-to-top:hover {
        cursor: pointer;
        padding-right: 20px;
    }
    
/* ---------------------------------------  Header  ---------------- */


    header .logo {
        max-width:300px;
        width: 100%;
        margin-bottom: 20px;
    }
    header{
        background-position: -40px;
    }
    
/* ---------------------------------------  Über uns  ---------------- */

    #uber-uns{
        padding:50px 0;
    }
    #uber-uns .wrapper{
    width:80%;
}
    #uber-uns .spalten div{
        padding:0;
    }

    
/* -----------------------------------------------------------------------  Unsere Leistungen  ------- */

    #unsere-leistungen{
        padding: 50px 0 0 0;
    }
    
    #leistungen-im-detail ul li{
        font-size: 1.1em;
    }
    
    #buttons {
        padding: 25px 0 0 0;
    }

    
/* -----------------------------------------------------------------------  Leistungen im Detail - --- */


#leistungen-im-detail{
    padding: 50px 0;
}
    
/* -----------------------------------------------------------------------  Referenzen - ------------- */

#referenzen{
    padding:50px 0;
}
    
/* ---------------------------------------  Vorschaubild ---------------- */

    #vorschaubild{
        padding:0;
        background-attachment: local;
    }
    #vorschaubild h2 {
        font-size: 1.5em;
        padding: 50px 0;
        text-align: center;
        color:white;
}
    #vorschaubild h2 span{
        color: #be1522;
        font-weight:500;
    }
    address{
        padding: 50px 0;
    }
    address .apell{
        font-size:1em;
        margin-top:50px;
    }
    footer section .logo {

    width: 70%;
}
}