/* ==========================================================
   wine ott
   layout.css
   Seitenstruktur
========================================================== */


/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(var(--container),92%);
    margin-inline:auto;

}

.narrow{

    max-width:var(--content);

}

.wide{

    max-width:var(--content-wide);

}


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

section{

    padding:var(--space-xxl) 0;

}

.section-light{

    background:var(--white);

}


/* ==========================================================
   SITE HEADER
========================================================== */

#site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:1000;

    height:84px;

    background:rgba(247,245,240,.75);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    transform:translateY(-100%);
    opacity:0;

    transition:
        transform .45s ease,
        opacity .45s ease,
        background .35s ease;

}

#site-header.header-visible{

    transform:translateY(0);
    opacity:1;

}

.header-inner{

    height:84px;

    display:flex;

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

}


/* ==========================================================
   MAIN
========================================================== */

main{

    position:relative;

    overflow:hidden;

}


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

footer{

    padding:3rem 0;

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

}

.footer-inner{

    display:flex;

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

    gap:2rem;

}


/* ==========================================================
   GRID UTILITIES
========================================================== */

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

}

.grid-auto{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}


/* ==========================================================
   FLEX UTILITIES
========================================================== */

.flex{

    display:flex;

}

.center{

    display:flex;

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

}

.stack{

    display:flex;

    flex-direction:column;

}

.cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

}


/* ==========================================================
   SPACING UTILITIES
========================================================== */

.mt-xs{margin-top:var(--space-xs);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mt-xl{margin-top:var(--space-xl);}

.mb-xs{margin-bottom:var(--space-xs);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-xl{margin-bottom:var(--space-xl);}