:root {

   --background-body: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
   

    --header-color:#2b323b;
    --header-secondary:#3a3c3d;
    --text-color:#313535;

    --color-logo:#CB2420;
    --color-logo-secondary: #e3514f;

    --underline:linear-gradient(90deg, rgba(227,81,79,1) 0%, rgba(219,143,142,0) 100%);

    --color-text-footer: #F1EDEE;

    --color-bg-slider: #DDDDDD;

    --bg-produkte:#F5F5F5;

    --color-logo-grey:#dfe1e1;
    --color-logo-border:#A0A6A6;

    --color-font-secondary:#dbdbdb;


    --icons-background:#181F25;

    --color-nav-bg:#464c52;

    --color-article-bg: #dbdbdb;

    --md-article-col:#fafffd;

    --bg-gradient: radial-gradient(343px at 46.3% 47.5%, rgb(242, 242, 242) 0%, rgb(241, 241, 241) 72.9%);
    --bg-gradient-secondary:radial-gradient(343px at 46.3% 47.5%, rgb(242, 242, 242) 0%, rgb(241, 241, 241) 72.9%);
    --bg-produkt-top:linear-gradient(60deg, #29323c 0%, #485563 100%);

    --border:linear-gradient(-135deg, #fdfcfb 0%, #e2d1c3 100%); 

    --container-background:#f0f0f0;

    --main-padding: 8em;
    
    
    --xxl-bottom: 0 4em;
    --xxl-side:  3em;
    --xxl-top:0 3em;
    --underline-margin: 2.5em;
    --xxl-margin: 4em 0;

    --large-bottom: 3em;
    --large-side: 0 4em;
    --large-top: 4em;
    --underline-margin: 2em;
    --large-margin: 3em 0;

    --md-bottom: 2em;
    --md-side: 0 3em;
    --md-top: 2em;
    --underline-margin:  2em;

    --md-img: 27em;


    --sm-bottom: 2em;
    --sm-side:2em;
    --sm-top: 2em;
    --underline-margin:  2em;

    --sm-font-size: 1.7rem;

    --sm-card-bg: linear-gradient(180deg, #fdfcfb 0%, #e3e3e3 100%); 



    --font-header:'Titillium Web', sans-serif;
    --font-under-header: 'Handlee', cursive;
    --font-text:'Biryani', sans-serif;
   
}

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

html {
    scroll-behavior: smooth;
}

html, body {
    position: relative;
}


body {

    background: var(--background-body);
    font-family: 'Biryani', sans-serif;

    font-family: 'Handlee', cursive;

    font-family: 'Oxygen', sans-serif;
    font-size:1rem;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--header-color);



}

h1 {
    font-size: 2rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 1.4em;
    letter-spacing: 1px;
    color: var(--header-color);
    font-family: var(--font-header);
    font-weight: 700;
    text-transform: uppercase;
    
}

h2 {
    font-size: 2rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 1.2em;
        letter-spacing: 1px;
    font-family: var(--font-under-header);
    font-weight: 500;
    text-align: left;
    color: var(--color-logo-secondary);


}

h3 {
    font-size: 1.7rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 1.2em;
    text-align: left;
    color: var(--header-secondary);
    font-family: var(--font-under-header);






}

h4 {
    font-size: 1.5rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 0.8em;
    font-family: var(--font-under-header);
    color: var(--header-secondary);

}

h5 {
    font-size: 1.1rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 0.8em;
}

h6 {
    font-size: 1rem;
    margin-top:0em;
    margin-bottom: 0.8rem;
    line-height: 0.8em;
}

h1 {
    font-size: calc(2rem + 1.5vw);
}

    
h2 {
    font-size: calc(1.8rem + 0.9vw); 
}

h3 {
    font-size: calc(1.6rem + 0.6vw);
  }

p {
    line-height: 1.5em;
    letter-spacing: 0.03em;  
    font-family: var(--font-text);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400; 
    color: var(--text-color);
    color:#313535;
}



li {
    list-style: none;
    color: var(--text-color);
    color:#313535;
  }

a {
    text-decoration: none;
    font-family: var(--font-text);
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: .02em;
  }