/*==================================================
RESPONSIVE.CSS
AUTOZENTRUM KERTE
==================================================*/


/*==================================================
1400px
==================================================*/

@media (max-width:1400px){

    :root{

        --container:1200px;

    }

    .hero-content h1{

        font-size:4.5rem;

    }

}


/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

    .container{

        width:92%;

    }

    .hero-content{

        max-width:760px;

    }

    .hero-content h1{

        font-size:4rem;

    }

    .section-title h2{

        font-size:2.5rem;

    }

    .about-grid{

        gap:60px;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:45px;

    }

}


/*==================================================
1100px
==================================================*/

@media (max-width:1100px){

    nav ul{

        gap:28px;

    }

    .logo img{

        width:180px;

    }

    .btn-header{

        padding:14px 22px;

    }

    .hero-content h1{

        font-size:3.7rem;

    }

    .location-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-image{

        order:-1;

    }

}


/*==================================================
992px
==================================================*/

@media (max-width:992px){

    header .container{

        height:85px;

    }

    nav{

        position:fixed;

        top:85px;

        left:-100%;

        width:100%;

        background:#ffffff;

        transition:.35s;

        box-shadow:0 15px 30px rgba(0,0,0,.08);

    }

    nav.active{

        left:0;

    }

    nav ul{

        flex-direction:column;

        padding:35px;

        gap:25px;

        align-items:flex-start;

    }

    nav a{

        color:#111111;

    }

    .hamburger{

        display:block;

    }

    .header-buttons{

        display:none;

    }

    .hero{

        min-height:850px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

}

/*==================================================
768px
==================================================*/

@media (max-width:768px){

/*==================================================
MOBILE NAVIGATION
==================================================*/

header .container{

    justify-content:space-between;

}

.hamburger{

    display:block;

    z-index:10002;

}

nav{

    position:fixed;

    top:0;

    left:-100%;

    width:100%;

    height:100vh;

    background:#111111;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.45s ease;

    z-index:10001;

}

nav.active{

    left:0;

}

nav ul{

    display:flex;

    flex-direction:column;

    gap:35px;

    text-align:center;

}

nav ul li{

    width:100%;

}

nav a{

    font-size:1.5rem;

    color:#ffffff;

    font-weight:700;

}

nav a:hover{

    color:var(--primary);

}

header.scrolled nav a{

    color:#ffffff;

}

    section{

        padding:90px 0 !important;

    }

    .container{

        width:92%;

    }

    .hero{

        min-height:100vh;

        padding:140px 0 80px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

    }

    .hero-content .subtitle{

        font-size:.9rem;

        letter-spacing:1.5px;

    }

    .hero-content h1{

        font-size:3rem;

        line-height:1.15;

    }

    .hero-content p{

        font-size:1rem;

        margin-top:25px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

        margin-top:35px;

    }

    .hero-buttons a{

        width:100%;

        max-width:320px;

    }

}


/*==================================================
ABOUT
==================================================*/

@media (max-width:768px){

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-text{

        text-align:center;

    }

    .about-text h2{

        font-size:2.3rem;

    }

    .about-image{

        max-width:600px;

        margin:auto;

    }

}


/*==================================================
SERVICE GRID
==================================================*/

@media (max-width:768px){

    .service-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        padding:35px;

    }

}


/*==================================================
WHY GRID
==================================================*/

@media (max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        padding:35px;

    }

}


/*==================================================
MOBILE.DE
==================================================*/

@media (max-width:768px){

    .mobile-content h2{

        font-size:2.2rem;

    }

    .mobile-content p{

        font-size:1rem;

    }

}


/*==================================================
LOCATION
==================================================*/

@media (max-width:768px){

    .location-grid{

        grid-template-columns:1fr;

    }

    .location-info{

        padding:35px;

    }

    .map iframe{

        min-height:380px;

    }

}


/*==================================================
CONTACT
==================================================*/

@media (max-width:768px){

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:35px;

    }

    .contact-form button{

        width:100%;

        justify-content:center;

    }

}


/*==================================================
SECTION TITLES
==================================================*/

@media (max-width:768px){

    .section-title{

        margin-bottom:55px;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    .section-title p{

        font-size:.97rem;

    }

}


/*==================================================
FOOTER
==================================================*/

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-column h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-logo{

        margin-inline:auto;

    }

}


/*==================================================
COOKIE
==================================================*/

@media (max-width:768px){

    #cookieBanner{

        width:calc(100% - 30px);

        left:15px;

        right:15px;

        bottom:15px;

        padding:25px;

    }

    .cookie-buttons{

        flex-direction:column;

    }

}


/*==================================================
FLOATING BUTTONS
==================================================*/

@media (max-width:768px){

    #whatsappButton{

        width:55px;

        height:55px;

        right:20px;

        bottom:95px;

    }

    #backToTop{

        width:50px;

        height:50px;

        right:20px;

        bottom:25px;

    }

}

/*==================================================
576px
==================================================*/

@media (max-width:576px){

    html{

        font-size:15px;

    }

    header .container{

        height:75px;

    }

    .logo img{

        width:150px;

    }

    nav{

        top:75px;

    }

    .hero{

        min-height:100vh;

        padding:120px 0 70px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:.95rem;

        line-height:1.8;

    }

    .hero-buttons{

        gap:15px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:300px;

        padding:16px 20px;

        font-size:.95rem;

    }

}


/*==================================================
SECTIONS
==================================================*/

@media (max-width:576px){

    .section-title{

        margin-bottom:45px;

    }

    .section-title span{

        font-size:.8rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .section-title p{

        font-size:.92rem;

    }

}


/*==================================================
SERVICE
==================================================*/

@media (max-width:576px){

    .service-card{

        padding:30px;

    }

    .service-icon{

        width:65px;

        height:65px;

        font-size:1.7rem;

    }

    .service-card h3{

        font-size:1.2rem;

    }

}


/*==================================================
WHY
==================================================*/

@media (max-width:576px){

    .why-card{

        padding:30px;

    }

    .why-number{

        font-size:2.8rem;

    }

}


/*==================================================
ABOUT
==================================================*/

@media (max-width:576px){

    .about-text h2{

        font-size:2rem;

    }

    .about-text p{

        font-size:.95rem;

    }

}


/*==================================================
LOCATION
==================================================*/

@media (max-width:576px){

    .location-info{

        padding:30px;

    }

    .location-info li{

        font-size:.92rem;

    }

    .map iframe{

        min-height:320px;

    }

}


/*==================================================
CONTACT
==================================================*/

@media (max-width:576px){

    .contact-form{

        padding:30px;

    }

    .contact-form input,

    .contact-form textarea{

        padding:15px 18px;

        font-size:.95rem;

    }

}


/*==================================================
FOOTER
==================================================*/

@media (max-width:576px){

    footer{

        padding:70px 0 30px;

    }

    .footer-grid{

        gap:35px;

    }

    .footer-logo{

        width:170px;

    }

    .footer-column h3{

        font-size:1.05rem;

    }

    .footer-column p,

    .footer-column li{

        font-size:.92rem;

    }

}


/*==================================================
COOKIE
==================================================*/

@media (max-width:576px){

    #cookieBanner{

        border-radius:15px;

        padding:20px;

    }

    .cookie-content h3{

        font-size:1.05rem;

    }

    .cookie-content p{

        font-size:.9rem;

    }

}


/*==================================================
480px
==================================================*/

@media (max-width:480px){

    .container{

        width:94%;

    }

    .hero-content h1{

        font-size:2.1rem;

    }

    .hero-content p{

        font-size:.9rem;

    }

    .section-title h2{

        font-size:1.8rem;

    }

    .mobile-content h2{

        font-size:1.9rem;

    }

    .about-text h2{

        font-size:1.8rem;

    }

    .contact-form{

        padding:25px;

    }

    .location-info{

        padding:25px;

    }

}


/*==================================================
400px
==================================================*/

@media (max-width:400px){

    .hero-content h1{

        font-size:1.85rem;

    }

    .btn-primary,

    .btn-secondary{

        font-size:.9rem;

        padding:15px;

    }

    .service-card,

    .why-card,

    .contact-form,

    .location-info{

        padding:22px;

    }

    .footer-logo{

        width:150px;

    }

}


/*==================================================
360px
==================================================*/

@media (max-width:360px){

    html{

        font-size:14px;

    }

    .hero-content h1{

        font-size:1.7rem;

    }

    .section-title h2{

        font-size:1.6rem;

    }

    .mobile-content h2{

        font-size:1.7rem;

    }

    .about-text h2{

        font-size:1.6rem;

    }

    .logo img{

        width:135px;

    }

}

/*==================================================
LANDSCAPE PHONES
==================================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:700px;

        padding:120px 0 60px;

    }

    .hero-content h1{

        font-size:2.7rem;

    }

    .hero-content p{

        margin-top:18px;

    }

    .hero-buttons{

        margin-top:25px;

    }

}


/*==================================================
VERY LARGE SCREENS
==================================================*/

@media (min-width:1600px){

    :root{

        --container:1450px;

    }

    .hero-content{

        max-width:950px;

    }

    .hero-content h1{

        font-size:5.6rem;

    }

    .hero-content p{

        font-size:1.2rem;

    }

}


/*==================================================
4K SCREENS
==================================================*/

@media (min-width:2200px){

    :root{

        --container:1650px;

    }

    body{

        font-size:18px;

    }

    .hero-content h1{

        font-size:6rem;

    }

}


/*==================================================
SMALL HEIGHT DEVICES
==================================================*/

@media (max-height:700px){

    header .container{

        height:75px;

    }

    .hero{

        padding-top:120px;

    }

}


/*==================================================
MOBILE MENU IMPROVEMENTS
==================================================*/

@media (max-width:992px){

    nav{

        overflow-y:auto;

        max-height:calc(100vh - 85px);

    }

    nav ul{

        padding-bottom:40px;

    }

    nav li{

        width:100%;

    }

    nav a{

        display:block;

        width:100%;

        padding:12px 0;

    }

}


/*==================================================
BUTTON TOUCH AREA
==================================================*/

@media (pointer:coarse){

    .btn-primary,

    .btn-secondary,

    .btn-header{

        min-height:52px;

    }

}


/*==================================================
FORM TOUCH AREA
==================================================*/

@media (pointer:coarse){

    input,

    textarea,

    button{

        font-size:16px;

    }

}


/*==================================================
MAP RESPONSIVE
==================================================*/

@media (max-width:768px){

    .map{

        border-radius:16px;

    }

}


/*==================================================
FOOTER SPACING
==================================================*/

@media (max-width:480px){

    .footer-bottom{

        font-size:.85rem;

    }

}


/*==================================================
LONG WORD SUPPORT
==================================================*/

@media (max-width:576px){

    h1,
    h2,
    h3,
    p,
    a,
    li{

        word-break:break-word;

    }

}


/*==================================================
SAFE IMAGE DISPLAY
==================================================*/

@media (max-width:768px){

    img{

        object-fit:cover;

    }

}


/*==================================================
REDUCE HOVER ON TOUCH DEVICES
==================================================*/

@media (hover:none){

    .service-card:hover,

    .why-card:hover,

    .contact-box:hover,

    .btn-primary:hover,

    .btn-secondary:hover{

        transform:none;

    }

}


/*==================================================
SMOOTH SECTION SPACING
==================================================*/

@media (max-width:576px){

    section{

        scroll-margin-top:85px;

    }

}


/*==================================================
ACCESSIBILITY
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/*==================================================
END OF RESPONSIVE.CSS

Autozentrum Kerte
Responsive Version 1.0

==================================================*/