:root {
    --qui-color-main: #f07b32;
    --qui-color-main__hover: #c45612;
    --qui-color-primary: var(--qui-color-main);

    --font-size-sm: 12px;
    --font-size: 14px; /* default */
    --font-size-lg: 16px;

    /* kopiert von presentation */
    /* braucht man nicht mehr, wenn richtig in template cologne implementiert */
    --qui-fs-xs: 0.75rem;
    --qui-fs-sm: 0.875rem;
    --qui-fs-body: 16px; /* base */
    --qui-fs-md: 18px;
    --qui-fs-lg: 22px;
    --qui-fs-xl: 1.75rem;
    --qui-fs-2xl: 2.25rem;
    --qui-fs-3xl: 3rem;
    --qui-fs-4xl: 4rem;
    --qui-fs-5xl: 5rem;
    --qui-fs-6xl: 6rem;
    --qui-text-lead: var(--qui-fs-lg);
    --qui-display-1: var(--qui-fs-6xl);
    --qui-display-2: var(--qui-fs-5xl);
    --qui-display-3: var(--qui-fs-4xl);
    --qui-display-4: var(--qui-fs-3xl);

    /* kopiert von presentation */
    /* braucht man nicht mehr, wenn richtig in template cologne implementiert */
    /* heading: font size */
    --qui-fs-1: 2.488rem;
    --qui-fs-2: 2.074rem;
    --qui-fs-3: 1.728rem;
    --qui-fs-4: 1.44rem;
    --qui-fs-5: 1.2rem;
    --qui-fs-6: 1.025rem;


    /* spacing for margin, padding, etc */
    --spacing-xs: 0.875rem;
    --spacing-sm: 1rem;
    --spacing: 1.25rem; /* default */
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* text */
    --text-muted: #9ba3ad;

    /* background */
    --bg-primary: #ddd;
    --bg-secondary: #f5f5f5;

    /* border */
    --qui-border-width: 1px;
    --qui-border-type: solid;
    --qui-border-color: #9b9b9b;
    --qui-border: var(--qui-border-width) var(--qui-border-type) var(--qui-border-color);

    --_qui-cologne-header-height: 100px;
    --_qui-template-scrollMarginTop: var(--qui-template-scrollMarginTop, var(--_qui-cologne-header-height));

    --_qui-cologne-theme-border-color: var(--qui-cologne-theme-border-color, #ddd);
    --_qui-cologne-theme-border-width: var(--qui-cologne-theme-border-width, 1px);

    /* ecoyn / ecommerce */
    --_qui-order-basket-articles-image-width: var(--qui-order-basket-articles-image-width, 120px);
    --_qui-order-basket-articles-image-height: var(--qui-order-basket-articles-image-height, 120px);
    --_qui-order-articles-image-width: var(--qui-order-articles-image-width, 200px);
    --_qui-order-articles-image-height: var(--qui-order-articles-image-height, 120px);
}

@media screen and (max-width: 767px) {
    /* kopiert von presentation */
    /* braucht man nicht mehr, wenn richtig in template cologne implementiert */
    :root {
        --qui-fs-1: 2rem;
        --qui-fs-2: 1.625rem;
        --qui-fs-3: 1.375rem;
        --qui-fs-4: 1.25rem;
        --qui-fs-5: 1.125rem;

        /* font size: text */
        --qui-fs-body: 16px;
        --qui-fs-lg: 20px;
        --qui-fs-xl: 24px;
        --qui-fs-2xl: calc(.75 * 2.5rem);
        --qui-fs-3xl: calc(.75 * 3.5rem);
        --qui-fs-4xl: calc(.75 * 4.5rem);
        --qui-fs-5xl: calc(.75 * 5.5rem);
        --qui-fs-6xl: calc(.75 * 6rem);
    }
}

@media screen and (max-width: 440px) {
    /* kopiert von presentation */
    /* braucht man nicht mehr, wenn richtig in template cologne implementiert */
    :root {
        --qui-fs-1: 2rem;
        --qui-fs-2: 1.625rem;
        --qui-fs-3: 1.375rem;
        --qui-fs-4: 1.25rem;
        --qui-fs-5: 1.125rem;

        /* font size: text */
        --qui-fs-body: 16px;
        --qui-fs-md: 17px;
        --qui-fs-lg: 19px;
        --qui-fs-xl: 22px;
        --qui-fs-2xl: calc(.7 * 2.5rem);
        --qui-fs-3xl: calc(.65 * 3.5rem);
        --qui-fs-4xl: calc(.6 * 4.5rem);
        --qui-fs-5xl: calc(.55 * 5.5rem);
        --qui-fs-6xl: calc(.5 * 6.5rem);
    }
}