/* ==========================================================
   wine ott
   base.css
   Grundlagen
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}


/* ==========================================================
   DESIGN SYSTEM
========================================================== */

:root{

    color-scheme: light;

    /* Farben */

    --paper:#F7F5F0;
    --white:#FFFFFF;

    --text:#252525;
    --wine:#6A3643;
    --stone:#90725B;
    --moss:#707B65;

    --line:#E7E0D7;

    /* Layout */

    --container:1180px;
    --content:720px;

    /* Abstände */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:8rem;
    --space-xxl:12rem;

    /* Gestaltung */

    --radius:20px;

    --shadow:
        0 24px 60px rgba(0,0,0,.08);

    --transition:.35s ease;

    --h2-large:clamp(2rem,4vw,3rem);
    --h2-medium:clamp(2rem,3vw,2.5rem);
    --h2-small:clamp(1.9rem,2.8vw,2.3rem);

}


/* ==========================================================
   BASE
========================================================== */

body{

    min-height:100vh;

    background:var(--paper);

    color:var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size:18px;

    line-height:1.75;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4{

    font-weight:500;

    letter-spacing:-.03em;

    line-height:1.05;

    color:var(--text);

}

h1{

    font-size:clamp(4.5rem,9vw,8rem);

}

h2{

    font-size:var(--h2-large);
    font-weight:500;
    line-height:1.12;
    letter-spacing:-.025em;
    margin-bottom:1.4rem;

}

h3{

    font-size:1.5rem;

    margin-bottom:.75rem;

}

p{

    max-width:42rem;

    margin-bottom:1.4rem;

}

strong{

    font-weight:600;

}

small{

    color:#666;

}


/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--wine);

}


/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    width:100%;

    height:auto;

}