html {
    --color-primary: #202B3F;
    --color-primary-semi-light: #2F4E69;
    --color-primary-light: #466E91;
    --color-primary-lighter: #5889B5;
    --color-primary-lightest: #83B3DE;
    --color-primary-dark: #18202F;

    --color-secondary: #F8BE10;
    --color-secondary-lighter: #FFE19A;
    --color-secondary-light: #FFD775;
    --color-secondary-dark: #EBB10D;
    --color-secondary-darker: #E0A700;

    --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: #f5f5f5;
    --color-greyscale-200: #eeeeee;
    --color-greyscale-300: #dddddd;
    --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-family-1-semi-bold: 500;

    --font-family-2: var(--font-family-1);
    --font-family-2-bold: var(--font-family-1-bold);

    --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-50);
    --on-surface-inverse: var(--color-hint);
    --on-surface-inverse-primary: var(--color-primary);

    --hint-warning-surface: #F8DFC1;
    --hint-warning-on-surface: #630000;

    /* new tokens */
    --color-icon-link-bolder: #22375c;
    --color-icon-link: #2b4573;
    --color-icon-link-subtler: #aab5c7;
    --color-icon-label-brand-boldest: #111c2e;
    --color-icon-label-brand-bolder: #1a2945;
    --color-icon-label-brand: #2b4573;
    --color-icon-label-accent-boldest: #3b0500;
    --color-icon-label-accent-bolder: #4f1900;
    --color-icon-label-accent-bold: #b57f00;
    --color-icon-label-accent: #d9a300;
    --color-icon-informative-bolder: #4a033d;
    --color-icon-informative: #702963;
    --color-icon-positive-bolder: #225a36;
    --color-icon-positive: #3da362;
    --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-neutral-boldest: #212121;
    --color-icon-black: #212121; /* deprecated */
    --color-icon-neutral-boldest-fixed: #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: #22375c;
    --color-text-link: #2b4573;
    --color-text-link-subtler: #aab5c7;
    --color-text-label-brand-boldest: #111c2e;
    --color-text-label-brand-bolder: #1a2945;
    --color-text-label-brand: #2b4573;
    --color-text-label-accent-boldest: #3b0500;
    --color-text-label-accent-bolder: #4f1900;
    --color-text-label-accent-bold: #b57f00;
    --color-text-label-accent: #d9a300;
    --color-text-label-neutral: #212121;
    --color-text-label-neutral-subtle: #545454;
    --color-text-label-neutral-subtlest: #bababa;
    --color-text-informative-bolder: #4a033d;
    --color-text-informative: #702963;
    --color-text-positive-bolder: #225a36;
    --color-text-positive: #3da362;
    --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: #2b4573;
    --color-border-brand-subtler: #aab5c7;
    --color-border-accent: #edb713;
    --color-border-accent-subtle: #f2cd5a;
    --color-border-accent-subtler: #f8e2a1;
    --color-border-informative-bolder: #4a033d;
    --color-border-informative: #702963;
    --color-border-positive: #3da362;
    --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: #273e67;
    --color-background-brand-bolder-hover: #2b4573;
    --color-background-brand-bolder-pressed: #4b6188;
    --color-background-brand: #2b4573;
    --color-background-brand-hover: #273e67;
    --color-background-brand-pressed: #22375c;
    --color-background-brand-loading: #aab5c7;
    --color-background-brand-subtler: #cad1dc;
    --color-background-brand-subtler-hover: #aab5c7;
    --color-background-brand-subtler-pressed: #6b7d9d;
    --color-background-brand-subtler-loading: #eaecf1;
    --color-background-brand-subtlest: #eaecf1;
    --color-background-accent: #edb713;
    --color-background-accent-hover: #d9a300;
    --color-background-accent-pressed: #b57f00;
    --color-background-accent-loading: #f8e2a1;
    --color-background-accent-subtle: #f8e2a1;
    --color-background-accent-subtle-hover: #f5d77d;
    --color-background-accent-subtle-pressed: #f2cd5a;
    --color-background-accent-subtler: #fbedc4;
    --color-background-accent-subtler-hover: #f8e2a1;
    --color-background-accent-subtler-pressed: #f5d77d;
    --color-background-accent-subtler-loading: #fcf4dc;
    --color-background-accent-subtlest: #fcf4dc;
    --color-background-accent-subtlest-hover: #fbedc4;
    --color-background-accent-subtlest-pressed: #f8e2a1;
    --color-background-informative: #702963;
    --color-background-informative-subtler: #e2d4e0;
    --color-background-informative-subtlest: #f1eaef;
    --color-background-positive: #3da362;
    --color-background-positive-subtler: #c5e3d0;
    --color-background-positive-subtlest: #d8ede0;
    --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-neutral-boldest: #3a3a3a;
    --color-background-inverse-disabled: rgba(255, 255, 255, 0.2);
    --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: #f1f1f1;
}

/* --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.airline-direct.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.airline-direct.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.airline-direct.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;
}