/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: responsive.css
   Aufgabe: Responsive Design
========================================================== */

@media (max-width:1100px){

    .beka-navigation{
        display:none;
    }

    .beka-mobile-toggle{
        display:block;
    }

    .beka-contact-wrapper{
        grid-template-columns:1fr;
    }

    .beka-hero h1{
        font-size:3.8rem;
    }

}

@media (max-width:768px){

    :root{
        --beka-section-padding:80px;
    }

    .beka-header .beka-container{
        height:72px;
    }

    .beka-logo img{
        height:48px;
    }

    .beka-hero{
        text-align:center;
    }

    .beka-hero-buttons,
    .beka-hero-features{
        justify-content:center;
    }

    .beka-gallery-grid,
    .beka-services-grid,
    .beka-process-grid,
    .beka-why-grid{
        grid-template-columns:1fr;
    }

    #beka-scroll-top{
        right:18px;
        bottom:18px;
    }

}

@media (max-width:480px){

    .beka-hero h1{
        font-size:2.8rem;
    }

    .beka-button-primary,
    .beka-button-secondary{
        width:100%;
        text-align:center;
    }

    .beka-cookie{
        left:15px;
        right:15px;
        bottom:15px;
    }

}