@import url('https://fonts.googleapis.com/css?family=Raleway:400,600,700');
/*	Resets	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article, aside, canvas, figure, figure, img, figcaption, hgroup,
footer, header, nav, section, audio, video {
  display: block;
}

a img, select{
  border: 0;
}

// mobile select reset
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
input,
button{
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Mobile Highlight on Links Remove */
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* ion colours (easy to forget) */
::ion 	 	{background:@orange;color:#fff;}
::-moz-ion 	{background:@orange;color:#fff;}
img::ion 		{background: transparent;color:#fff;}
img::-moz-ion	{background: transparent;color:#fff;}
body {-webkit-tap-highlight-color:@orange;}

.clearfix {
  *zoom: 1;
  &:after{
    clear:both;
    content: " ";
    display: block;
    height:0;
  }
}

.transition(@time){
  -webkit-transition: all (@time) ease-out;
  -moz-transition: all (@time) ease-out;
  -ms-transition: all (@time) ease-out;
  -o-transition: all (@time) ease-out;
  transition: all (@time) ease-out;
}
.transitionLinear(@time){
  -webkit-transition: all (@time) linear;
  -moz-transition: all (@time) linear;
  -ms-transition: all (@time) linear;
  -o-transition: all (@time) linear;
  transition: all (@time) linear;
}
.pointer{
  cursor:pointer;
}
/* ------------------------- Animation ---------------------------------------------- */

/* ------------------------- Classes //  Variables ---------------------------------- */
/* -- Font-Colors -- */
@mainfont: #303030;
@orange:#ff5001;
@link:#df5301;
@footerorange:#e95f11;
@footerfont:#b2b2b2;
/* -- BG-Colors -- */
.darkgrey(@opacity){
  background: rgba(26,26,26,@opacity)
}
@darkgrey: #1a1a1a;

/*
.blueOverlay{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: @blue;
  opacity: 0;
  .transition(0.5s);
}
.greyOverlay{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #1a1a1a;
  opacity: .3;
  .transition(.5s);
}*/
/* -------------------------- preloader ------------------------------ */

/* ------------------------------------------------------------------- */

/* -------------------------- slider    ------------------------------ */

/* ------------------------------------------------------------------- */

html{
  font-family:'Raleway', sans-serif;
  color:@mainfont;
  font-size:18px;
}
body{
  a{
    text-decoration: none;
  }
  .orangeText{
    color:@orange;
  }
  .row{
    >div{
      float: left;
      position: relative;
      top: 0;
      left: 0;
    }
    .col3{
      width:33%;
    }
    .col1{
      width:100%;
    }
    .col50{
      width:50%;
    }
    .col80{
      width:80%;
    }
    .col20{
      width:20%;
    }
  }
  >div{
  width: 100%;
    >nav, > div {
      max-width: 980px;
      padding:0 20px;
      margin:0 auto;
    }
  }
  #nav{
    background:@darkgrey;
    position: fixed;
    z-index: 500;
    nav{
      display: table;
      width:100%;
      color:white;
      text-transform:uppercase;
      font-weight: 600;
      font-size: .8rem;
      .clearfix;
      div{
        display: table-cell;
        vertical-align: middle;
        img{
          max-width:260px;
          padding-top:3px;
        }
      }
      #mobileBut{
        display:none;
        -ms-transform: translate(0, -4px);
        -webkit-transform: translate(0, -4px);
        transform: translate(0, -4px);
        &.active{
          a{
            color:@orange;
          }
        }
        a{
          color:white;
          &:hover{
            color:@orange
          }
          i {
            padding-left:.5rem;
          }
          .a-angle-right{
            font-size:.9rem;
          }
          .fa-mobile{
            font-size:2rem;
            //transform: translate(0, 4px);
            -ms-transform: translate(0, 4px); /* IE 9 */
            -webkit-transform: translate(0, 4px); /* Safari */
            transform: translate(0, 4px);
          }
        }
      }
      ul{
        text-align: right;
        list-style: none;
        display: inline-block;float:right;
        li{
          float:left;
          padding:1.5rem 0;
          a{
            color:white;
            padding: 0 14px;
            &:hover{
              color:@orange;
            }
          }
        }
      }
    }
  }
  #slider{
    background:transparent url('img/bg_mood.png') no-repeat 0 0;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    padding-top:70px;
    width:100%;
    min-height:682px;
    &.preise{
      #sliderTextContainer{
        h2{
          font-weight: 300;
        }
      }
    }
    > div{
      position: relative;
      padding:5.5rem 20px;
      .sliderPic{
        width:50%;
        position: absolute;
        right:1%;
        top:0;
        z-index: 50;
        text-align: right;
        img{
          max-width:90%;
          display:none;
          &.active{
            display:inline-block;
          }
          &#preisPic{
            padding: 13% 10% 0 0;
          }
        }
      }
      #sliderTextContainer{
        position: relative;
        z-index:80;
        div{
          //position:absolute;
          text-transform: uppercase;
          z-index: 100;
          max-width: 80%;
          display:none;
          &.active{
            display:block;
          }
          h1{
            font-size: 2.7rem;
            font-weight:600;
            margin-bottom:1.5rem;
            .orangeText{
              font-weight:700;
            }
          }
          h2{
            font-size:1.5rem;
          }
          &.sliderText1{
            z-index:101;
          }
          &.sliderText2{
            z-index:102;
          }
        }
      }
      div{
      }
      .calltoAction{
        z-index:100;
        position: relative;
        text-transform: uppercase;
        margin-top:5.5rem;
        .clearfix;
        a {
          position: relative;
          background: @orange;
          color:white;
          font-size:1.2rem;
          font-weight: 600;
          padding: 0.8rem 1.2rem;
          display: inline-block;
          margin-top:1.5rem;
          z-index: 1;
          &::before{
            content: '';
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            top: 0;
            z-index: -1;
            background: white;
            .transition(.2s);
          }
          &:hover{
            color:@orange;
            &::before{
              bottom:0;
            }
          }
        }
        select {
          position: relative;
          background: @darkgrey url('img/arrow_down.png') 92% center no-repeat;
          color:white;
          font-size:1.2rem;
          font-weight: 600;
          padding: 0.7rem 65px 0.7rem 1.2rem;
          display: inline-block;
          margin-top:1.5rem;
          max-width:100%;
          overflow:hidden;

          white-space:nowrap;
          text-overflow:ellipsis;
          option{
            padding:.3rem 1rem;
          }
        }
        .col20{
          text-align: right;
          padding-left: 1.5rem;
          width:auto;
          position: absolute;
          right:0;
          bottom:0;
          top:auto;
          left:auto;
        }
        .col80{
          width:80%;
        }
      }
    }
  }
  #content{
    background:white;
    a{
      color:@orange;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
    >div {
      padding:40px 20px;
    }
    h1{
      color: @orange;
      font-size:1.5rem;
      text-transform: uppercase;
      margin-bottom:1.6rem;
    }
    p{
      margin-bottom: 1rem;
      &:last-of-type{
        margin-bottom:2rem;
      }
    }
    &.start{
      #herstellerWrapper{
        .clearfix;
        img{
          max-width:150px;
          background:@darkgrey;
          float:left;
          margin:0 5px 5px 0;
          &:hover{
            background: @orange;
          }
        }
      }
    }
    &.preise{
      >div{
        h1{
          color:@darkgrey;
          &:last-of-type{
            margin-top:2.5rem;
          }
        }
        .kostenstelle{
          margin-bottom:1.2rem;
          position: relative;
          .clearfix;
          .column{
            float:left;
            &:first-of-type{
              max-width:85%;
              .maengel{
                display:inline-block;
                font-weight:700;
                margin-bottom: .3rem;
              }
              .defekt, .defektItem{
                font-size:.9rem;
                padding-right:.3rem;
              }
              .defekt{
                color:@orange;
              }
            }
            &.filler{
              padding-left:.6rem;
              span{
                width:100%;
                content: " ";
                display:inline-block;
                height: .9rem;
                border-bottom:dotted 2px #ddd;
              }
            }
            &:last-of-type{
              position: absolute;
              right: 0;
              color:@orange;
              font-weight: 700;
              width:10%;
              text-align: right;
            }
          }
        }
      }
    }
  }
  #footer{
    background: @darkgrey;
    >div{
      padding:2rem 20px;
      .row{
        margin-bottom: 3rem;
        .clearfix;
        &:last-of-type{
          margin-bottom:0;
          >div{
            &#sitemap{
              margin-right: 18px;
              h3{
                margin-bottom: 1.1rem;

              }
            }
            &#spnsWrapper{
              .clearfix;
              #navigationssysteme, #smartphones{
                float:left;
                > div{
                  .clearfix;
                  > div{
                    float:left;
                    img{
                      max-width:75px;
                      width:100%;
                    }
                  }
                }
              }
              #smartphones {
                width: 44.5%;
                > div {
                  > div {
                    width:25%;
                  }
                }
              }
              #navigationssysteme {
                width: 55.5%;
                > div {
                  > div {
                    width:20%;
                  }
                }
              }
            }
            h3{
              font-size:.9rem;
              color:@orange;
              text-transform: uppercase;
            }
            ul{
              list-style: none;
              float:left;
              margin-right:25px;
              li{
                font-size: .8rem;
                a{
                  display: block;
                  color:@footerfont;
                  width:100%;
                  margin: 7px 0;
                  &:first-of-type {
                    margin-top:0;
                  }
                  &:hover{
                    color:@orange;
                  }
                }
              }
            }
          }
        }
        .col3{
          text-align: center;
          padding:0 2%;
          &:first-of-type{
            padding-left:0;
          }
          &:last-of-type{
            padding-right:0;
          }
          h2{
            color:@footerorange;
            text-transform: uppercase;
            font-size:1.1rem;
            &.einzeiler{
              margin-bottom: 1.4rem;
            }
          }
          p{
            color:@footerfont;
            font-size:.9rem;
          }
          .imgWrapper{
            display:table;
            width:100%;
            height:180px;
            >div{
              display: table-cell;
              vertical-align: middle;
              img{
                max-width: 100%;
                display: inline-block;
              }
              #saturn{
                width:100%;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 900px) {
  html{
    font-size:16px;
  }
  body{
    #slider{
      > div{
        .sliderPic{
          max-width:70%;
        }
        .sliderText{
          max-width: none;
        }
      }
      &.preise {
        > div {
          .sliderPic {
            img{
              max-width: 75%;
            }
          }
        }
      }
    }
    #nav{
      nav{
        #mobileBut{
          display:table-cell;
          text-align: right;
          font-size:1rem;
          padding:1.5rem 0;
          .pointer;
        }
        ul{
          padding-top:1.5rem;
          display:none;
          position: fixed;
          left:0;
          right:0;
          top:70px;
          width:100%;
          height:100%;
          text-align:center;
          .darkgrey(.9);
          li{
            float:none;
            font-size:1.5rem;
            padding:1rem 0;
          }
        }
      }
    }
  }

}
@media screen and (max-width: 768px) {
  html{
    font-size:14px;
  }
}
@media screen and (max-width: 750px) {

  body{
    #slider{
      > div {
        padding-top:0;
        .sliderPic{
          text-align:center;
          position: relative;
          max-width:none;
          width:100%;
          margin-bottom:2rem;
          img{
            display:inline-block;
            max-height:350px;
            max-width:80%;
            width:auto;
            &#preisPic{
              padding:10% 0 0 10%;
            }
          }
        }
        #sliderTextContainer{
          div{
            max-width:none;
          }
        }
        .calltoAction{
          margin-top:1.5rem;
        }
      }
    }
    #content.preise > div .kostenstelle .column:last-of-type{
      width:12%;
    }
  }
}

@media screen and (max-width: 720px) {
  body #footer > div .row:last-of-type > div {
    &#sitemap{
      margin-bottom: 2rem;
    }
    &#spnsWrapper {
      width: 100%;
      #smartphones, #navigationssysteme {
        margin-bottom: 2rem;
        width: 100%;
        >div{
          >div{
            max-width:80px;
            img{
              max-width:none;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 560px) {
  body {
    .row {
      .col80{
      width:100%;
      }
      .col3{
        width: 100%;
        margin-bottom: 4rem;
      }
    }
    #nav nav {
      #mobileBut{
        font-size: .9rem;
        -ms-transform: translate(0, -5px); /* IE 9 */
        -webkit-transform: translate(0, -5px); /* Safari */
        transform: translate(0, -5px);
      }
      div{
        width:65%;
        img {
          width:100%;
        }
      }
    }
    #content{
      &.start{
        #herstellerWrapper{
          img {
            width:32%;
            margin: 0 3px 3px 0;
          }
        }
      }
      &.preise{
        >div{
          .kostenstelle{
            .column{
              &:first-of-type{
                .maengel{
                  font-size: 1.2rem;
                }
              }
              &.filler{
                display:none;
              }
              &.fixkosten{
                font-size:1.2rem;
                padding-top: .3rem;
                position: relative;
                width:100%;
                text-align: left;
                right:auto;
              }
            }
          }
        }
      }
    }
    #footer{
      > div {
        .row {
          margin-bottom:0;
          &:last-of-type{
            >div{
              &#sitemap{
                width: 100%;
                ul{
                  margin-right:0;
                  li{
                    float:left;
                    margin-right:25px;
                  }
                }
              }
            }
          }
          .col3 {
            .imgWrapper{
              height:150px;
              >div #saturn{
                width:70%;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  body #slider > div .calltoAction .col1:first-of-type{
    max-width:75%;
  }
  body #slider > div .calltoAction .col20{
    top:0;
    bottom:auto;
  }
  body #slider > div .calltoAction .col80 {
    width:100%;
    a{
      width:100%;
    }
  }
  body #nav nav ul li {
    font-size: 1.3rem;
    padding: .9rem 0;
  }
}