/* ==========================================================
   wine ott
   sections.css
   Seitenbereiche
========================================================== */


/* ==========================================================
   HERO
========================================================== */

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    overflow:hidden;

    padding-top:84px;

    text-align:center;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-mark{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    pointer-events:none;

}

.hero-mark::before{

    content:"";

    width:min(70vw,700px);

    aspect-ratio:1;

    background:
        url("../images/logo.svg")
        center/contain
        no-repeat;

    opacity:.07;

    transform:rotate(-8deg) scale(1.03);
}

#hero h1{

    margin-bottom:2.5rem;

    letter-spacing:-.05em;

}

.hero-location{

    max-width:640px;

    margin:0 auto;

    font-size:1.35rem;

    line-height:1.5;

}


/* ==========================================================
   EDITORIAL
========================================================== */

.editorial-grid{

    display:grid;

    grid-template-columns:1.4fr .9fr;

    gap:6rem;

    align-items:center;

}

.editorial-grid.reverse{

    grid-template-columns:1.2fr .8fr;

}

.editorial-text{

    max-width:640px;

}

.editorial-text h2{

    margin-bottom:2rem;

}

.editorial-text p{

    color:#444;

}

.editorial-image{

    margin:0;

}


/* ==========================================================
   EVENTS
========================================================== */

#events{

    padding:0 0 10rem;

}

.events-image{

    max-width:800px;

    margin:5rem auto 6rem;

}

.events-intro{

    max-width:620px;

    margin-bottom:5rem;

}

.event-list{

    border-top:1px solid var(--line);

}

.event-list article{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:3rem;

    padding:2.8rem 0;

    border-bottom:1px solid var(--line);

    transition:var(--transition);

}

#events h2{
    font-size:var(--h2-medium);
}

.event-content h3{

    margin-bottom:.75rem;

    font-size:1.45rem;

}

.event-content p{

    margin:0;

    max-width:650px;

    color:#555;

}


/* ==========================================================
   WEINE
========================================================== */

#weine{

    padding:10rem 0;

    text-align:center;

}

#weine .narrow{

    max-width:720px;

}

#weine h2{
    font-size:var(--h2-medium);
}

#weine p{

    margin-left:auto;
    margin-right:auto;

    color:#555;

}


/* ==========================================================
   KONTAKT
========================================================== */

#kontakt{

    padding:10rem 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:6rem;

    margin-top:4rem;

}

.contact-grid h3{

    margin-bottom:1rem;

}

.contact-grid a{

    color:var(--wine);

}

#kontakt h2{
    font-size:var(--h2-small);
}


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

.footer-inner p{

    margin:0;

    font-size:.9rem;

    color:#777;

}

.footer-inner nav{

    display:flex;

    gap:2rem;

}


/* ==========================================================
   LEGAL
========================================================== */

.legal{

    padding-top:12rem;

    padding-bottom:8rem;

}

.legal h1{

    font-size:clamp(2.8rem,6vw,4.5rem);

    margin-bottom:4rem;

}

.legal h2{

    margin-top:3rem;

    margin-bottom:1rem;

    font-size:1.35rem;

}

.legal p{

    max-width:700px;

    color:#555;

}

.legal a{

    color:var(--wine);

}

body.legal-page header{

    transform:none;

    opacity:1;

}