/* ==========================================================
   wine ott
   responsive.css
   Responsive Layout
========================================================== */


/* ==========================================================
   DESKTOP LARGE
========================================================== */

@media (max-width:1200px){

    .container{

        width:94%;

    }

    .editorial-grid{

        gap:4rem;

    }

    .contact-grid{

        gap:4rem;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:960px){

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

    section{

        padding:7rem 0;

    }

    .container{

        width:92%;

    }


    /* ----------------------------------------
       Header
    ---------------------------------------- */

    header{

        height:auto;

        padding:1rem 0;

    }

    .header-inner{

        height:auto;

        flex-direction:column;

        gap:1.2rem;

    }

    nav{

        display:grid;

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

        width:100%;

        max-width:420px;

        margin:auto;

        gap:.8rem 2rem;

        justify-items:center;

    }

    nav a{

        font-size:.92rem;

    }


    /* ----------------------------------------
       Hero
    ---------------------------------------- */

    #hero{

        min-height:82vh;

        padding-top:140px;

    }

    .hero-mark::before{

        width:80vw;

    }

    #hero h1{

        font-size:clamp(3.5rem,14vw,6rem);

        margin-bottom:1.75rem;

    }

    .hero-location{

        font-size:1.15rem;

        max-width:420px;

    }


    /* ----------------------------------------
       Editorial
    ---------------------------------------- */

    .editorial-grid,
    .editorial-grid.reverse{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .editorial-image{

        order:-1;

        max-width:760px;

        margin:0 auto;

    }

    .editorial-text{

        max-width:700px;

        margin:auto;

    }


    /* ----------------------------------------
       Events
    ---------------------------------------- */

    #events{

        padding-bottom:7rem;

    }

    .events-image{

        margin:4rem auto;

    }

    .events-intro{

        margin-bottom:3rem;

    }

    .event-list article{

        grid-template-columns:1fr;

        gap:1rem;

        padding:2rem 0;

    }


    /* ----------------------------------------
       Kontakt
    ---------------------------------------- */

    .contact-grid{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

    }

    .contact-grid p{

        margin-inline:auto;

    }

}


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

@media (max-width:768px){

    body{

        font-size:17px;

    }

    section{

        padding:6rem 0;

    }

    .container{

        width:90%;

    }

    h2{

        font-size:2.3rem;

        line-height:1.1;

    }


    /* Hero */

    #hero{

        min-height:75vh;

    }

    #hero h1{

        font-size:clamp(3rem,17vw,4.8rem);

    }

    .hero-location{

        font-size:1.05rem;

    }

    .scroll-indicator{

        display:none;

    }


    /* Bilder */

    .editorial-image img,
    .events-image img{

        border-radius:12px;

    }


    /* Events */

    .event-content h3{

        font-size:1.3rem;

    }

    .event-date{

        gap:.25rem;

    }

    .event-date .days{

        font-size:1.5rem;

    }


    /* Footer */

    .footer-inner{

        flex-direction:column;

        text-align:center;

        gap:1.5rem;

    }

    .footer-inner nav{

        justify-content:center;

        flex-wrap:wrap;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:600px){

    .container{

        width:88%;

    }

    body{

        font-size:16px;

    }

    h1{

        letter-spacing:-.04em;

    }

    h2{

        font-size:2rem;

    }

    .hero-location{

        max-width:280px;

    }

    .brand img{

        width:34px;

    }

    .brand span{

        font-size:.9rem;

    }

    nav{

        gap:.7rem 1rem;

    }

    .events-image{

        margin:3rem auto;

    }

    .editorial-grid{

        gap:2.5rem;

    }

    .contact-grid{

        gap:2rem;

    }

}