/*
* Prefixed by:
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

*::before,
*::after,
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* root */
:root {
    --grau: #141414;
    --rot: #D26D6C;
    --weiss: #FFFFFF;
    --hell: #E2E3E1;
  }

@media (max-width: 768px) { 
    body p { 
    font-weight: 400 !important;
    }
    body h5 { 
    font-weight: 400 !important;
    }
}



/* Navigation Mobile */
@media (max-width: 768px) {
    
    .main-nav {
        background-color: var(--weiss);
        width: 60%;
        position: fixed;
        top: 6vh;
        height: 94vh;
        left: 0;
        z-index: 1000;
        color: var(--grau) ;
        -webkit-transition: all ease-in-out 200ms;
        -o-transition: all ease-in-out 200ms;
        transition: all ease-in-out 200ms;
        text-transform: uppercase;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
        -webkit-transition: -webkit-transform 0.5s ease-in;
        transition: -webkit-transform 0.5s ease-in;
        -o-transition: transform 0.5s ease-in;
        transition: transform 0.5s ease-in;
        transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
    }
    
    .main-nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        margin-top: 6rem;
        padding: 3rem 0 0 4rem;
    }

    .main-nav ul img {
       width: 5rem;
    }

    .main-nav .ul-logo {
        position: fixed;
        left : 0;
        padding: 0;
        -webkit-transform: translateY(-70%);
            -ms-transform: translateY(-70%);
                transform: translateY(-70%);
        padding-top: 1rem;
        z-index: 1000000;
        margin-top: 5rem ;
        margin-left: 4rem;
      }

    .main-nav li {
        margin-top: 2rem;
        text-transform: uppercase;
    }

    .main-nav li {
        opacity: 0;
    }

    .main-nav a {
        color: var(--grau);
    }

    .main-nav h1 {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateX(30%);
            -ms-transform: translateX(30%);
                transform: translateX(30%);
        margin-top: 2rem;
    }

    .burger {
        display: block;
        cursor: pointer;
        z-index: 1000;
    }

    .main-hero {
        padding-top: 10vh;
    }



}



/*------------------------------
 Animation Burger
--------------------------------*/
.nav-active {
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
  }
  
  @-webkit-keyframes navLinkFade {
    from{
        opacity: 0;
        -webkit-transform: translate(-50px);
                transform: translate(-50px);
    }
    to{
        opacity: 1;
        -webkit-transform: translate(0px);
                transform: translate(0px);
    }
  }
  
  @keyframes navLinkFade {
    from{
        opacity: 0;
        -webkit-transform: translate(-50px);
                transform: translate(-50px);
    }
    to{
        opacity: 1;
        -webkit-transform: translate(0px);
                transform: translate(0px);
    }
  }
  
  .toggle .line1 {
    -webkit-transform: rotate(-45deg) translate(-1rem, -0.05rem);
        -ms-transform: rotate(-45deg) translate(-1rem, -0.05rem);
            transform: rotate(-45deg) translate(-1rem, -0.05rem);
  }
  .toggle .line2 {
  opacity: 0;
  }
  
  .toggle .line3 {
    -webkit-transform: rotate(45deg) translate(-1rem, 0.05rem );
        -ms-transform: rotate(45deg) translate(-1rem, 0.05rem );
            transform: rotate(45deg) translate(-1rem, 0.05rem );
  }



  /* main hero */
  @media (max-width: 992px) {
    .hero-text{
        margin-left: 5rem;
      }

    .hero-img img {
        width: 20%;
    }
  }

  @media (max-width: 913px) {
    .content-hero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }
  }

  

  @media (max-width: 768px) {
    body p {
        font-size: 1rem;   
        line-height: 1.7rem;
    }
    .content-hero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
        padding-top: 10rem;
    }

    .hero-text {
        margin-left: 0;
    }

    .hero-img {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        padding: 0 5rem 0 0;
    }

    .hero-img img {
        width: 20%;
    }
  }

  @media (max-width: 380px) {

    .hero-img {
        padding: 0rem 5rem 2rem 0;
    }
    .hero-img img {
        width: 25%;
        display: none;
    }

    .produkt-text {
        margin-top: 5rem;
    }

  }



  /* produkt & holunder*/
  @media (max-width: 992px) {
    .produkt-text, .holunder-text {
        width: 80%;
    }

    .produkt-bilder, .holunder-bilder {
        width: 80%;
    }

    .slogan {
        font-size: calc(100% + 2rem); 
    }
  }

  @media (max-width: 768px) {
    .produkt-text, .holunder-text {
        width: 90%;
    }

    .produkt-bilder, .holunder-bilder {
        width: 90%;
        gap: 2rem;
    }

    .slogan {
        font-size: calc(100% + 2rem); 
    }
  }

  @media (max-width: 576px) { 
    .einleitung-produkt {
        flex-direction: column;
        width: 100%;
    }

    .produkt-bild {
        width: 90%;
        margin: 0 auto;
    }

    .produkt-bild img {
        margin: 0;
    }

    .produkt-text {
        padding: 0;
        margin-top: 0;
    }

    .main-produkt {
        padding: 0;
    }

    .produkt-bilder {
        -ms-grid-columns: 1fr 1rem 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .produkt-bilder .bilder {
        width: 100%;
      }

      .produkt-bilder .bilder p {
        padding-bottom: 2rem;
      } 

    .slogan {
        font-size: calc(100% + 0.8rem);
        padding: 5rem 0;
    }

    .holunder-bilder {
        width: 100%;
        gap: 0.5rem;
        padding-bottom: 4rem;
    }

    .holunder-text {
        padding-top:0;
    }
  }


  /* ueber uns */

  @media (max-width: 992px) {
    .ueber-uns-text {
        width: 80%;
    }

    .ueber-uns-bilder {
        width: 80%;
    }
  }

  @media (max-width: 768px) {
    .ueber-uns-text {
        width: 90%;
    }

    .ueber-uns-bilder {
        width: 90%;
        gap: 2rem;
    }
  }

  @media (max-width: 576px) { 
    .ueber-uns-bilder {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 5rem;
    }
    .ueber-uns-bilder img {
        width: 80%;
      }

  }


  /* herstellung */

  @media (max-width: 1200px) { 
    .herstellung-anordnung {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
        position: relative;
      }

    .herstellung-anordnung-text {
        width: 100%; 
;
    }
    .herstellung-anordnung-bild {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 2rem 0;
    }

    .herstellung-anordnung-bild img{
        width: 40%;
        margin: 0 auto;
      }

  }

  @media (max-width: 576px) { 
        .herstellung-anordnung-text{
            padding: 2rem 1rem;
        }
        .herstellung-anordnung-bild {
            padding: 1rem 0 ;
        }
        .herstellung-anordnung-bild img{
            width: 60%;
        }    
  }




  /* kunden */
  @media (max-width: 992px) {
    .kunden-anordnung {
        width: 90%;
      } 
     
    .kunden-cards a{
        font-size: calc(60% + 0.1rem);
  }
}

  @media (max-width: 768px) {
    .kunden-anordnung {
        width: 100%;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        row-gap: 3rem;
      } 

 
    .kunden-text {
            width: 90%;
    }
     
    .kunden-cards img{
        width: 80%;
    }

    .kunden-cards{
        width: 100%;
    }
     
    .kunden-cards a{
        font-size: calc(50% + 0.1rem);
  }
}


/* kontakt */
@media (max-width: 992px) {
    .main-kontakt{
        background-position: center;
    }
}

@media (max-width: 768px) {
    .kontakt-text{
        width: 55%;
    }
}

@media (max-width: 576px) { 
    .kontakt-text{
        width: 100%;
    }

    .kontakt-bestellung p, .kontakt-lieferung p {
        -ms-flex-item-align: start;
            align-self: flex-start;
        padding: 3rem 0 0 5rem;
        width: 80%;
      }
    
    .kontakt-lieferung {
        padding-bottom: 3rem;
    }

    .kontakt-text img {
        width: 3rem;
    }   
}

/* footer */
@media (max-width: 992px) {
    .footer-kontakt{
        padding-right: 10%;
      }
}

@media (max-width: 768px) {
    .main-footer h3{
        font-size: calc(100% + 0.2rem);
      }
    .main-footer p{
        font-size: calc(80% + 0.2rem);
      }
}

@media (max-width: 768px) { 
    .main-footer{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
    }
    .footer-logo{
        width: 100%;
    }
    .footer-logo img{
        width: 20%;
      }
    .footer-kontakt {
        padding: 5rem 0;
    }

    .impressum {
        position: absolute;
        bottom: 0;
        padding-left: 3rem;
      }
      
      .impressum h2 {
        position: absolute;
        bottom: 0;
        padding-top: 3rem;
      }
}


/* impressum */
@media (max-width: 576px) { 
    .main-footer {
        position: relative;
    }
    .copyright {
        position: absolute;
        bottom: 0;
        padding-bottom: 1rem !important;
    }
      

}




/* querformat handy */

@media (max-height: 576px) {
    .hero-img img {
        width: 10%;
    }
    .hero-img {
        padding-right: 5rem;
    }

    .produkt-text {
        padding-top: 15rem;
    }
}