
:root {
    --header-h: 60px;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --radius: 999px;

    /* Headings */
    --heading-size-h1: 60px;
    --heading-size-h2: 48px;
    --heading-size-h3: 40px;
    --heading-size-h4: 32px;
    --heading-size-h5: 24px;
    --heading-size-h6: 20px;
    --heading-line-height-h1: 72px; /* 120% */
    --heading-line-height-h2: 56px; /* ~117% */
    --heading-line-height-h3: 48px; /* 120% */
    --heading-line-height-h4: 40px;
    --heading-line-height-h5: 28px; /* ~117% */
    --heading-line-height-h6: 24px; /* 120% */

    /* Text */
    --type-font-family-display: "InterDisplay";
    --text-heading: #1A1A1A;
    --text-neutral-primary: #1A1A1A;
    --text-default-default: #1A1A1A;
    --text-default-secondary: #4D4D4D;
    --text-information-default: #0630FF;

    /* Colors */
    --surface-default-default: #FFF;
    --surface-default-secondary: #E6E6E6;
    --surface-default-inverse-default: #1A1A1A;
    --background-default: #F2F2F2;
    --page-default: #FFF;

    --Labels-Primary: #000;


    /* Border */
    --border-default-default: #1A1A1A;
    --border-default-quaternary: #CCC;
    --stroke-weight-s: 1px;
    --stroke-weight-m: 2px;


    /* Weitere (Abstände,...) */
    --body-size-xxs: 10px;
    --body-size-s: 14px;
    --body-size-m: 16px;
    --body-line-height-xxs: 12px;
    --body-line-height-s: 16px; /* 114.286% */
    --body-line-height-m: 20px; /* 125% */

    --spacing-jumper-gap-xs-xs-xxs: 4px;
    --spacing-jumper-gap-l: 24px;
    --spacing-jumper-gap-gutter: 32px;
    --spacing-jumper-gap-xxl: 48px;
    --spacing-jumper-gap-xl-xl-l: 32px;
    --spacing-jumper-gap-l-l-m: 24px;
    --corner-radius-l: 8px;
    --corner-radius-xl: 16px;
    --corner-radius-xxl: 40px;
    --corner-radius-round: 256px;
    --spacing-jumper-gap-l-l-m--background-default: #F2F2F2;
    --spacing-jumper-padding-margin: 48px;
    --spacing-device-breakpoint: 1440px;

    --background-blur-100: 24px;


    /* ******* Responsive ******* */
    /*Tablet*/
    @media (max-width: 768px){
        --heading-size-h1: 48px;
        --heading-size-h2: 40px;
        --heading-size-h3: 32px;
        --heading-size-h4: 28px;
        --heading-size-h5: 24px;
        --heading-size-h6: 20px;
        --spacing-jumper-padding-margin: 24px;
    }

    /*Mobile*/
    @media (max-width: 440px){
        --heading-size-h1: 32px;
        --heading-size-h2: 28px;
        --heading-size-h3: 24px;
        --heading-size-h4: 24px;
        --heading-size-h5: 20px;
        --heading-size-h6: 20px;
        --spacing-jumper-padding-margin: 16px;
    }
    
    
    /*------------  ------------ ------------*/
    
    --rz-base-900: var(--mwFarbeText);
    --rz-white: var(--mwFarbeWeiss);
    --rz-black: var(--mwFarbeSchwarz);
    --rz-primary: var(--mwFarbeOrange);
    --rz-on-primary: var(--mwFarbeSchwarz);
    --rz-primary-lighter: var(--mwFarbeOrangeHeller);
    --rz-on-primary-lighter: var(--mwFarbeOrange);
    /*    --rz-primary-light: var(--mwFarbeOrange);
    --rz-primary-lighter: var(--mwFarbeOrange);
    --rz-primary-dark: var(--mwFarbeOrange);
    --rz-primary-darker: var(--mwFarbeOrange);*/
    --rz-danger: var(--mwFarbeRot);
    --rz-on-danger: var(--mwFarbeWeiss);
    
    --rz-notification-error-background-color: var(--mwFarbeRot) !important;
    --rz-notification-error-color: var(--mwFarbeWeiss) !important;
    --rz-notification-error-icon-color: var(--mwFarbeWeiss) !important;

    --rz-info: var(--mwFarbeBlau);
    --rz-on-info: var(--mwFarbeSchwarz);
    --rz-success: var(--mwFarbeGruen);
    --rz-on-success: var(--mwFarbeWeiss);
    /*--rz-success-light: var(--mwFarbeGruen);
    --rz-success-lighter: var(--mwFarbeGruen);
    --rz-success-dark: var(--mwFarbeGruen);
    --rz-success-darker: var(--mwFarbeGruen);*/
    --rz-grid-selected-color: var(--mwFarbeOrange);
    --rz-text-font-family: Inter, sans-serif;
}

.headingH1 {
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h1);
    font-style: normal;
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--heading-line-height-h1);
    margin: 0;
}

.headingH2 {
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h2);
    font-style: normal;
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--heading-line-height-h2);
    margin: 0;
    text-align: left;
}

.headingH3{
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h3);
    font-style: normal;
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--heading-line-height-h3);
    margin: 0;
}

.headingH4{
    font-family: var(--type-font-family-display, "inter display");
    font-size: var(--heading-size-h4, 32px);
    font-style: normal;
    font-weight: 600;
    color: var(--text-default-default, #1A1A1A);
    line-height: var(--heading-line-height-h4, 40px); /* 125% */
    margin: 0;
}

.headingH5 {
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h5);
    font-style: normal;
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--heading-line-height-h5);
    margin: 0;
}
.headingH5Blue {
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h5);
    font-style: normal;
    font-weight: 600;
    color: var(--text-information-default);
    line-height: var(--heading-line-height-h5);
    margin: 0;
}

.headingH6{
    font-family: var(--type-font-family-display);
    font-size: var(--heading-size-h6);
    font-style: normal;
    font-weight: 600;
    color: var(--text-heading);
    line-height: var(--heading-line-height-h6);
    margin: 0;
}


.bodyXxs{
    font-size: var(--body-size-xxs);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-xxs); /* 120% */
}
.bodyXxsGrey{
    font-size: var(--body-size-xxs);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-xxs); /* 120% */
    margin: 0;
}

.bodyS{
    font-size: var(--body-size-s);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-s);
    margin: 0;
}
.bodySGrey{
    color: #999;
    font-size: var(--body-size-s);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-s);
    margin: 0;
}

.bodyM{
    color: var(--text-default-default);
    font-size: var(--body-size-m);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-m); /* 125% */
    margin: 0;
}
.bodyMGrey{
    color: var(--text-default-secondary);
    font-size: var(--body-size-m);
    font-style: normal;
    font-weight: 500;
    line-height: var(--body-line-height-m); /* 125% */
    margin: 0;
}

.bodySemiBold{
    font-size: var(--body-size-m, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--body-line-height-m); /* 125% */
}


.btn-primary.btnStartBigOwn,
.artikelDetailHeadAddToCartBtns .btn-primary {
    --bs-btn-color: var(--mwFarbeSchwarz);
    --bs-btn-bg: var(--mwFarbeOrange);
    --bs-btn-border-color: var(--mwFarbeOrange);
    --bs-btn-hover-color: var(--mwFarbeSchwarz);
    --bs-btn-hover-bg: var(--mwFarbeOrange);
    --bs-btn-hover-border-color: var(--mwFarbeOrange);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--mwFarbeSchwarz);
    --bs-btn-active-bg: var(--mwFarbeOrange);
    --bs-btn-active-border-color: var(--mwFarbeOrange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--mwFarbeSchwarz);
    --bs-btn-disabled-bg: var(--mwFarbeOrange);
    --bs-btn-disabled-border-color: var(--mwFarbeOrange);
    text-decoration: none !important;
    padding: 10px 80px;
    font-weight: normal;
    margin-top: 30px;
    
    border-radius: var(--mwBorderRadius);
    -moz-border-radius: var(--mwBorderRadius);
    -webkit-border-radius: var(--mwBorderRadius);
}

.artikelDetailHeadAddToCartBtns .btn-primary {
    margin: 0;
    padding: 6px 20px;
    width: 100%;
}


/* Responsive */
