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


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

.container{

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

}

.narrow{

    max-width:var(--content);

}


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

section{

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

}

.section-light{

    background:var(--white);

}


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

header{

    position:fixed;

    top:0;
    left:0;
    right: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 rgba(0,0,0,.06);

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

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

}

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;

}


/* ==========================================================
   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 HELPERS
========================================================== */

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.center{

    display:flex;

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

}