/* ==========================================================
   WEINE
   wine ott
========================================================== */


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

#weine{

    padding:8rem 0 9rem;

}

#weine .section-header{

    max-width:760px;

    margin:0 auto 6rem;

    text-align:center;

}

#weine .section-intro{

    max-width:640px;

    margin:2rem auto 0;

}


/* ==========================================================
   KATEGORIEN
========================================================== */

.wine-category{

    margin:8rem 0 4rem;

}

.wine-category:first-of-type{

    margin-top:0;

}

.category-header{

    max-width:700px;

}

.category-header h3{

    margin:.4rem 0 1.5rem;

}

.category-header p{

    max-width:560px;

}

.category-subtitle{

    margin:.4rem 0 .8rem;

    color:var(--text-light);

    font-size:.9rem;

    font-weight:500;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/* ==========================================================
   WEIN
========================================================== */

.wine{

    margin:6rem 0 8rem;

}

.wine:last-child{

    margin-bottom:0;

}

.wine-grid{

    display:grid;

    grid-template-columns:

        minmax(380px,520px)
        minmax(340px,1fr);

    gap:6rem;

    align-items:center;

}

.wine-reverse .wine-image{

    order:2;

}

.wine-reverse .wine-content{

    order:1;

}

/* ==========================================================
   BILDER
========================================================== */

.wine-image{

    overflow:hidden;

}

.wine-image img{

    display:block;

    width:100%;

    aspect-ratio:2 / 3;

    object-fit:cover;

    transition:
        transform .9s ease,
        filter .9s ease;

}

.wine:hover img{

    transform:scale(1.015);

}


/* Individuelle Bildausschnitte */

.wine-hans img{

    object-position:center 35%;

}

.wine-ottello img{

    object-position:center;

}

.wine-bdn img{

    object-position:center 20%;

}

.wine-spg img{

    object-position:center 45%;

}


/* ==========================================================
   TYPOGRAFIE
========================================================== */

.wine-content{

    max-width:620px;

}

.wine-classification{

    display:inline-block;

    margin-bottom:1.2rem;

    color:var(--accent);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.wine-content h3{

    margin:0;

}

.wine-lead{

    margin-bottom:2rem;

    max-width:38rem;

    font-size:1.25rem;

    line-height:1.6;

}

.wine-content p{

    max-width:38rem;

}


/* ==========================================================
   METADATEN
========================================================== */

.wine-meta{

    display:flex;

    flex-wrap:wrap;

    gap:3rem;

    margin-top:3rem;

    padding-top:1.75rem;

    border-top:1px solid rgba(0,0,0,.08);

}

.wine-meta>div{

    min-width:120px;

}

.wine-meta span{

    display:block;

    margin-bottom:.45rem;

    color:var(--accent);

    font-size:.72rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}


/* ==========================================================
   DETAILS
========================================================== */

.wine + .wine{

    position:relative;

}

.wine + .wine::before{

    content:"";

    position:absolute;

    top:-6rem;

    left:50%;

    width:80px;

    height:1px;

    background:rgba(0,0,0,.06);

    transform:translateX(-50%);

}

/* ==========================================================
   LAGENWEIN
========================================================== */

/*
HTML:
<section class="wine-category lagen">
*/

.wine-category.lagen{

    position:relative;

    margin:14rem 0 8rem;

}

.wine-category.lagen::before{

    content:"";

    position:absolute;

    top:-7rem;
    left:50%;

    width:120px;
    height:1px;

    background:rgba(0,0,0,.06);

    transform:translateX(-50%);

}


/* ==========================================================
   HOCHBERG
========================================================== */

.wine-feature{

    margin-top:0;
    margin-bottom:16rem;

}

.wine-feature .wine-grid{

    grid-template-columns:
        minmax(520px,680px)
        minmax(320px,520px);

    gap:11rem;

    align-items:start;

}

.wine-feature .wine-image{

    position:relative;

}

.wine-feature .wine-image img{

    aspect-ratio:2 / 3;

    object-position:center 45%;

}

.wine-feature .wine-content{

    max-width:520px;

    padding-top:4rem;

}

.wine-feature .wine-classification{

    margin-bottom:1rem;

}

.wine-feature h3{

    margin:0;

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

    line-height:1.05;

}

.wine-origin{

    margin:.75rem 0 2.5rem;

    color:var(--text-light);

    font-style:italic;

}

.wine-feature .wine-lead{

    margin-bottom:2.5rem;

}

.wine-feature .wine-meta{

    margin-top:4rem;

}


/* ==========================================================
   BILDUNTERSCHRIFT
========================================================== */

.wine-image figcaption{

    margin-top:1rem;

    color:var(--text-light);

    font-size:.82rem;

    font-style:italic;

}


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

@media (max-width:1024px){

    .wine-grid{

        gap:5rem;

    }

    .wine-feature .wine-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .wine-feature .wine-content{

        padding-top:0;

        max-width:640px;

    }

}


@media (max-width:900px){

    .wine-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .wine-reverse .wine-image,
    .wine-reverse .wine-content{

        order:initial;

    }

    .wine{

        margin:7rem 0 9rem;

    }

    .wine-category{

        margin:8rem 0 4rem;

    }

    .wine-category.lagen{

        margin-top:10rem;

    }

}


@media (max-width:640px){

    #weine{

        padding:6rem 0 8rem;

    }

    #weine .section-header{

        margin-bottom:6rem;

    }

    .wine{

        margin:5rem 0 7rem;

    }

    .wine-grid{

        gap:2.5rem;

    }

    .wine-content{

        max-width:100%;

    }

    .wine-feature{

        margin-bottom:10rem;

    }

    .wine-feature h3{

        font-size:2.3rem;

    }

    .wine-lead{

        font-size:1.1rem;

    }

    .wine-meta{

        gap:2rem;

    }

}
/* ==========================================================
   WEINBERATUNG
========================================================== */

.wine-service{

    padding-top:6rem;

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

}

.wine-service .container{

    text-align:center;

}

.wine-service h2{

    max-width:720px;

    margin:0 auto 2rem;

}

.wine-service .lead{

    max-width:700px;

    margin:0 auto 2rem;

}

.wine-service p{

    max-width:700px;

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

}

.wine-service-actions{

    margin-top:3rem;

}