:root
{

    /*----*/
    /*Font*/
    /*----*/
    --defualt-font: 'Fraunces', serif; /*Fraunces | Vesper Libre*/

    --weight-regular: 400;
    --weight-bold: 700;
    --weight-extra-bold: 800;
    --weight-black: 900;



    /*-----------------*/
    /*Background Colors*/
    /*-----------------*/
    --webpage-background-color-main: #00140D;
    --webpage-background-color-dark: #1C191F;
    --webpage-background-color-extra-dark: #171419;

    --webpage-background-color-lable-normal: #90855B;

    --webpage-background-color-button-normal: #B4A56A;

    --webpage-background-color-button-green: #013220;

    --webpage-background-color-social: #C6BA8D;

    /*--webpage-background-color-button-green-hover: #026E46;*/
    --webpage-background-color-button-green-hover: #01281A;



    --webpage-background-card-container-light: #242028bb; /* #36303Cbb;*/
    --webpage-background-card-container-dark: #1c191fbb;

    --webpage-background-card-container-light-2: #1a161ebb;
    --webpage-background-card-container-dark-2: #141018bb;

    --webpage-background-card-container-light-3: #211a29bb; /*#27232bbb*/
    --webpage-background-card-container-dark-3: #201825bb; /*#25202bbb*/



    /*-----------*/
    /*Text Colors*/
    /*-----------*/
    --webpage-text-color-page-button: #BDB596;
    --webpage-text-color-title: #D0CAB4;
    --webpage-text-color-subtitle: #A89E75;
    --webpage-text-color-heighlight: #E3E0D3;

    --webpage-text-color-regular-light: #BDB596;
    --webpage-text-color-regular-normal: #B4A56A;
    --webpage-text-color-regular-dark: #90855B;

    --webpage-text-color-lable-light: #3B3B3B;

    --webpage-text-color-button-dark: #1E1B18;

    --webpage-text-color-green: #026E46;
    --webpage-text-color-green-2: #09a15a;
    --webpage-text-color-green-2-darker: #07703f;



    --webpage-logo-background-color: #003924;



    --webpage-creator-banner-gold: #efc004;


    /*----------*/
    /*SVG Colors*/
    /*----------*/
    --svg-color: #BDB5A3;
    --svg-color-hover: #B4A56A;



    /*----------------------*/
    /*Font Sizes - big calcs*/
    /*----------------------*/

    /*webpage design based on with 1920 width (1080p)*/
    --webpage-design-width: 1920;

    /*scale values*/
    --shrink-max-title: 0.45;
    --shrink-max: 0.4;
    --shrink-max-text: 0.65;

    --grow-max: 1.75;

    /*base sizes*/
    --base-size-title: 96; 
    --base-size-title-little: 86;
    --base-size-title-small: 60;
    --base-size-subtitle-1: 48; 
    --base-size-subtitle-2: 40;

    --base-size-text-1: 32;
    --base-size-text-2: 24;
    --base-size-text-3: 20;
    --base-size-text-4: 16;

    --base-size-text-special: 28;

    /*clamp calc*/
    --size-title: clamp(
        calc(var(--base-size-title) * var(--shrink-max-title) * 1px),      /* Minimum 75% */
        calc((var(--base-size-title) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-title) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-title-little: clamp(
        calc(var(--base-size-title-little) * var(--shrink-max-title) * 1px),      /* Minimum 75% */
        calc((var(--base-size-title-little) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-title-little) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-title-small: clamp(
        calc(var(--base-size-title-small) * var(--shrink-max-title) * 1px),      /* Minimum 75% */
        calc((var(--base-size-title-small) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-title-small) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-subtitle-1: clamp(
        calc(var(--base-size-subtitle-1) * var(--shrink-max) * 1px),      /* Minimum 75% */
        calc((var(--base-size-subtitle-1) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-subtitle-1) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-subtitle-2: clamp(
        calc(var(--base-size-subtitle-2) * var(--shrink-max) * 1px),      /* Minimum 75% */
        calc((var(--base-size-subtitle-2) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-subtitle-2) * var(--grow-max) * 1px)        /* Maximum +50% */
    );



    --size-text-1: clamp(
        calc(var(--base-size-text-1) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--base-size-text-1) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-text-1) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-text-2: clamp(
        calc(var(--base-size-text-2) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--base-size-text-2) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-text-2) * var(--grow-max) * 1px)        /* Maximum +50% */
    );
    
    --size-text-3: clamp(
        calc(var(--base-size-text-3) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--base-size-text-3) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-text-3) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-text-4: clamp(
        calc(var(--base-size-text-4) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--base-size-text-4) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-text-4) * var(--grow-max) * 1px)        /* Maximum +50% */
    );

    --size-text-special: clamp(
        calc(var(--base-size-text-special) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--base-size-text-special) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--base-size-text-special) * var(--grow-max) * 1px)        /* Maximum +50% */
    );


    /*--------------*/
    /*Border Radius*/
    /*--------------*/
    
    --base-radius: 12; /* Dein Wert aus Figma */

    /* Die Formel berechnet den Radius in vw */
    --radius-dynamic: calc((var(--base-radius) / var(--webpage-design-width)) * 100vw);



    /*-----------*/
    /*Object Size*/
    /*-----------*/
    --icon-size-150: 175; /*150*/

    --size-object-0: clamp(
        calc(var(--icon-size-150) * var(--shrink-max-text) * 1px),      /* Minimum 75% */
        calc((var(--icon-size-150) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--icon-size-150) * var(--grow-max) * 1px)        /* Maximum +50% */
    );



    /*------------*/
    /*Element Size*/
    /*------------*/

    --shrink-max-element-width: 0.75;
    --grow-max-element-width: 1.75;

    --shrink-max-element-width-mini: 0.6;
    --grow-max-element-width-mini: 1.75;


    --elemnt-base-width-big: 300;
    --elemnt-base-width-250: 250;
    --elemnt-base-width-200: 200;
    --elemnt-base-width-normal: 48;
    --elemnt-base-width-mini: 48; /*32 old svg - 48*/


    --elemnt-width-big: clamp(
        calc(var(--elemnt-base-width-big) * var(--shrink-max-element-width) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-big) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-big) * var(--grow-max-element-width) * 1px)        /* Maximum +50% */
    );



    --elemnt-width-big2: clamp(
        calc(var(--elemnt-base-width-big) * 2 * var(--shrink-max-element-width) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-big) * 2 / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-big) * 2 * var(--grow-max-element-width) * 1px)        /* Maximum +50% */
    );



    --elemnt-width-big3: clamp(
        calc(var(--elemnt-base-width-big) * var(--shrink-max-element-width) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-big) * 1.5 / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-big) * 1.5 * var(--grow-max-element-width) * 1px)        /* Maximum +50% */
    );


    --elemnt-width-250: clamp(
        calc(var(--elemnt-base-width-250) * var(--shrink-max-element-width) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-250) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-250) * var(--grow-max-element-width) * 1px)        /* Maximum +50% */
    );

    --elemnt-width-200: clamp(
        calc(var(--elemnt-base-width-200) * var(--shrink-max-element-width) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-200) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-200) * var(--grow-max-element-width) * 1px)        /* Maximum +50% */
    );

    --elemnt-width-48: clamp(
        calc(var(--elemnt-base-width-normal) * var(--shrink-max-element-width-mini) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-normal) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-normal) * var(--grow-max-element-width-mini) * 1px)        /* Maximum +50% */
    );

    --elemnt-width-mini: clamp(
        calc(var(--elemnt-base-width-mini) * var(--shrink-max-element-width-mini) * 1px),      /* Minimum 75% */
        calc((var(--elemnt-base-width-mini) / var(--webpage-design-width)) * 100vw), /* Idealwert in VW */
        calc(var(--elemnt-base-width-mini) * var(--grow-max-element-width-mini) * 1px)        /* Maximum +50% */
    );

}