html {
    --color-primary: #2771d4;
    --color-primary-semi-light: #4182D9;
    --color-primary-light: #5f92d8;
    --color-primary-lighter: #76a3e2;
    --color-primary-lightest: #d4e3f6;
    --color-primary-dark: #1E57A0;

    --color-secondary: #ff991d;
    --color-secondary-lighter: #ffefdb;
    --color-secondary-light: #ffe0bb;
    --color-secondary-dark: #f88802;
    --color-secondary-darker: #E05807;

    --color-tertiary: #029b92;
    --color-tertiary-light: #CCEBE9;
    --color-tertiary-lighter: #E5F5F4;
    --color-tertiary-dark: #006760;

    --color-negative: #ec5555;
    --color-negative-light: #fce6e6;
    --color-negative-lighter: #fef6f6;
    --color-negative-dark: #c53939;

    --color-positive: #71b800;
    --color-positive-light: #e8f2d9;
    --color-positive-lighter: #f7faf2;
    --color-positive-dark: #579a00;
    --color-positive-darker: #488306;

    --color-greyscale-50: #ffffff;
    --color-greyscale-50-rgb: 255, 255, 255;
    --color-greyscale-100: #f7f7f7;
    --color-greyscale-200: #f0f0f0;
    --color-greyscale-300: #dadada;
    --color-greyscale-400: #c5c5c5;
    --color-greyscale-500: #bababa;
    --color-greyscale-600: #999999;
    --color-greyscale-700: #666666;
    --color-greyscale-800: #333333;
    --color-greyscale-900: #000000;

    --color-separator: var(--color-greyscale-300);
    --color-error: var(--color-negative);
    --color-success: var(--color-positive);
    --color-text: var(--color-greyscale-800);
    --color-hint: var(--color-greyscale-700);
    --color-link: var(--color-primary);

    --font-family-1: Hind, Arial, Helvetica, sans-serif;
    --font-family-1-bold: 600;

    --font-size-base: 16px;
    --font-size-hint: .875rem;
    --font-size-title: 1.25rem;

    --line-height-base: 1.4375rem;
    --line-height-hint: 1.25rem;
    --line-height-title: 1.8125rem;

    --gap-size: .625rem; /* 10px */
    --content-gap-size: 3vw;
    --vertical-gap-size: 10px;
    --headline-content-gap-size: 15px;
    --headline-content-small-gap-size: 5px;

    --fd-app-header-z-index: 100;
    --fd-app-header-logo-height: 26px;
    --fd-app-header-height: 50px;

    --fd-backdrop-z-index: 110;
    --fd-layer-z-index: 120;
    --fd-drawer-z-index: 120;
    --fd-dialog-z-index: 130;

    --global-scroll-bar-gap: 0px;
}

/* semantic tokens */
html {
    --surface-inverse: var(--color-greyscale-800);
    --on-surface-inverse: var(--color-greyscale-50);
    --on-surface-inverse-primary: var(--color-primary-lighter);

    --hint-warning-surface: var(--color-secondary-lighter);
    --hint-warning-on-surface: var(--color-secondary-dark);

    /* new tokens */
    --color-icon-link-bolder: #003ea1;
    --color-icon-link: #2771d4;
    --color-icon-link-subtler: #a9c6ee;
    --color-icon-label-brand-boldest: #00003b;
    --color-icon-label-brand-bolder: #000b6e;
    --color-icon-label-brand: #2771d4;
    --color-icon-label-accent-boldest: #660000;
    --color-icon-label-accent-bolder: #7f1900;
    --color-icon-label-accent-bold: #d97300;
    --color-icon-label-accent: #f28c10;
    --color-icon-informative-bolder: #004f46;
    --color-icon-informative: #029b92;
    --color-icon-positive-bolder: #256c00;
    --color-icon-positive: #71b800;
    --color-icon-attentive-bolder: #923902;
    --color-icon-attentive: #ec610c;
    --color-icon-negative-boldest: #530000;
    --color-icon-negative-bolder: #860000;
    --color-icon-negative: #d33c3c;
    --color-icon-black: #212121; /* deprecated */
    --color-icon-neutral-boldest-fixed: #212121;
    --color-icon-neutral-boldest: #212121;
    --color-icon-neutral-bolder: #545454;
    --color-icon-neutral: #bababa;
    --color-icon-neutral-subtler: #d6d6d6;
    --color-icon-white: #ffffff;
    --color-icon-white-disabled: rgba(255, 255, 255, 0.3);
    --color-icon-disabled: #bababa;
    --color-icon-disabled-subtle: #d6d6d6;
    --color-icon-disabled-subtler: #e3e3e3;
    --color-text-headline: #212121;
    --color-text-title: #212121;
    --color-text-body: #212121;
    --color-text-body-subtle: #545454;
    --color-text-body-subtlest: #bababa;
    --color-text-link-bolder: #003ea1;
    --color-text-link: #2771d4;
    --color-text-link-subtler: #a9c6ee;
    --color-text-label-brand-boldest: #00003b;
    --color-text-label-brand-bolder: #000b6e;
    --color-text-label-brand: #2771d4;
    --color-text-label-accent-boldest: #660000;
    --color-text-label-accent-bolder: #7f1900;
    --color-text-label-accent-bold: #d97300;
    --color-text-label-accent: #f28c10;
    --color-text-label-neutral: #212121;
    --color-text-label-neutral-subtle: #545454;
    --color-text-label-neutral-subtlest: #bababa;
    --color-text-informative-bolder: #004f46;
    --color-text-informative: #029b92;
    --color-text-positive-bolder: #256c00;
    --color-text-positive: #71b800;
    --color-text-attentive-bolder: #923902;
    --color-text-attentive: #ec610c;
    --color-text-negative-boldest: #530000;
    --color-text-negative-bolder: #860000;
    --color-text-negative: #d33c3c;
    --color-text-black: #212121; /* deprecated */
    --color-text-neutral-boldest-fixed: #212121;
    --color-text-white: #ffffff;
    --color-text-white-disabled: rgba(255, 255, 255, 0.3);
    --color-text-disabled: #bababa;
    --color-text-disabled-subtle: #d6d6d6;
    --color-text-disabled-subtler: #e3e3e3;
    --color-border-brand: #2771d4;
    --color-border-brand-subtler: #a9c6ee;
    --color-border-accent: #ff991d;
    --color-border-accent-subtle: #ffad4a;
    --color-border-accent-subtler: #ffd6a5;
    --color-border-informative-bolder: #004f46;
    --color-border-informative: #029b92;
    --color-border-positive: #71b800;
    --color-border-attentive-bolder: #923902;
    --color-border-attentive: #ec610c;
    --color-border-negative-boldest: #860000;
    --color-border-negative: #d33c3c;
    --color-border-negative-subtler: #ffa1a1;
    --color-border-inverse-boldest: #ffffff;
    --color-border-inverse-subtle: rgba(255, 255, 255, 0.6);
    --color-border-inverse-subtlest: rgba(255, 255, 255, 0.2);
    --color-border-inverse-disabled: rgba(255, 255, 255, 0.3);
    --color-border-neutral-bolder: #878787;
    --color-border-neutral: #bababa;
    --color-border-neutral-subtle: #d6d6d6;
    --color-border-neutral-subtler: #e3e3e3;
    --color-border-neutral-subtlest: #f1f1f1;
    --color-border-disabled: #e3e3e3;
    --color-background-brand-bolder: #0e58bb;
    --color-background-brand-bolder-hover: #2771d4;
    --color-background-brand-bolder-pressed: #528ddd;
    --color-background-brand: #2771d4;
    --color-background-brand-hover: #0e58bb;
    --color-background-brand-pressed: #003ea1;
    --color-background-brand-loading: #a9c6ee;
    --color-background-brand-subtler: #c9dbf4;
    --color-background-brand-subtler-hover: #a9c6ee;
    --color-background-brand-subtler-pressed: #7daae5;
    --color-background-brand-subtler-loading: #e9f1fb;
    --color-background-brand-subtlest: #e9f1fb;
    --color-background-accent: #ff991d;
    --color-background-accent-hover: #f28c10;
    --color-background-accent-pressed: #d97300;
    --color-background-accent-loading: #ffd6a5;
    --color-background-accent-subtle: #ffd6a5;
    --color-background-accent-subtle-hover: #ffc277;
    --color-background-accent-subtle-pressed: #ffad4a;
    --color-background-accent-subtler: #ffebd2;
    --color-background-accent-subtler-hover: #ffd6a5;
    --color-background-accent-subtler-pressed: #ffc277;
    --color-background-accent-subtler-loading: #fff5e8;
    --color-background-accent-subtlest: #fff5e8;
    --color-background-accent-subtlest-hover: #ffebd2;
    --color-background-accent-subtlest-pressed: #ffd6a5;
    --color-background-informative: #029b92;
    --color-background-informative-subtler: #ccebe9;
    --color-background-informative-subtlest: #e6f5f4;
    --color-background-positive: #71b800;
    --color-background-positive-subtler: #e3f1cc;
    --color-background-positive-subtlest: #f1f8e5;
    --color-background-attentive: #ec610c;
    --color-background-attentive-subtler: #fcd7c0;
    --color-background-attentive-subtlest: #feefe6;
    --color-background-negative: #ec5555;
    --color-background-negative-hover: #d33c3c;
    --color-background-negative-pressed: #b92222;
    --color-background-negative-loading: #ffa1a1;
    --color-background-negative-subtler: #ffd5d5;
    --color-background-negative-subtler-hover: #ffa1a1;
    --color-background-negative-subtler-pressed: #ff8888;
    --color-background-negative-subtler-loading: #ffeeee;
    --color-background-negative-subtlest: #ffeeee;
    --color-background-inverse-boldest: #ffffff;
    --color-background-inverse-boldest-hover: rgba(255, 255, 255, 0.8);
    --color-background-inverse-boldest-pressed: #ffffff;
    --color-background-inverse-boldest-loading: rgba(255, 255, 255, 0.8);
    --color-background-inverse-subtler: rgba(255, 255, 255, 0.2);
    --color-background-inverse-subtler-hover: rgba(255, 255, 255, 0.3);
    --color-background-inverse-subtler-pressed: rgba(255, 255, 255, 0.4);
    --color-background-inverse-subtler-loading: rgba(255, 255, 255, 0.2);
    --color-background-inverse-disabled: rgba(255, 255, 255, 0.2);
    --color-background-neutral-boldest: #212121;
    --color-background-neutral-subtle: #d6d6d6;
    --color-background-neutral-subtler: #f1f1f1;
    --color-background-neutral-subtler-hover: #e3e3e3;
    --color-background-neutral-subtler-pressed: #d6d6d6;
    --color-background-neutral-subtlest: #ffffff;
    --color-background-neutral-subtlest-hover: #f1f1f1;
    --color-background-neutral-subtlest-pressed: #e3e3e3;
    --color-background-disabled-subtle: #d6d6d6;
    --color-background-disabled-subtlest: #e3e3e3;
}

/* --small-max-viewport */
@media (min-width: 414px) and (max-width: 767px) {
    html {
        --content-gap-size: 4vw;
        --fd-app-header-logo-height: 33px;
        --fd-app-header-height: 64px;
    }
}

/* --medium-viewport */
@media (min-width: 768px) and (max-width: 1219px) {
    html {
        --headline-content-gap-size: 20px;
        --content-wrapper-max-width: 830px;
        --fd-app-header-logo-height: 33px;
        --fd-app-header-height: 64px;
    }
}

/* --large-viewport */
@media (min-width: 1220px) {
    html {
        --content-wrapper-max-width: 1200px;
        --main-section-width: 830px;
        --main-aside-width: 330px;
        --headline-content-gap-size: 30px;
        --fd-app-header-logo-height: 43px;
        --fd-app-header-height: 80px;
    }
}

/* --medium-viewport and --large-viewport combined */
@media (min-width: 768px) {
    html {
        --content-gap-size: 30px;
        --vertical-gap-size: 20px;
    }
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-1);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: var(--color-greyscale-200);
    /* Fixes the auto font-size adjustments on ios devices */
    --webkit-text-size-adjust: 100%;
}

/* Hide tracking pixel so there's no unwanted border at the bottom of the page. */
img[src="//a.clicktripz.com/api/advertisers/v1/prof?advertiserID=455&format=image"] {
    display: none;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Hind Regular"), local("Hind-Regular"), url("https://media.fluege.de/fonts/hind/hind-v16-latin-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("https://media.fluege.de/fonts/hind/hind-v16-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Hind SemiBold"), local("Hind-SemiBold"), url("https://media.fluege.de/fonts/hind/hind-v16-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}