/* SETUP: DESIGN TOKENS //////////////////////////////////////////////////////////////////////////////*/ @layer setup { :root { /*FONT STACKS*/ --font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --font-stack-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; --font-stack-inter: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --font-stack-riga: "Riga", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --font-stack-asap: "Asap var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --font-family-copy: "Riga"; /*FONT SIZES*/ --font-size-xs: 0.75rem; /* 12px */ --font-size-s: 0.875rem; /* 14px */ --font-size-m: 1rem; /* 16px */ --font-size-l: 1.125rem; /* 18px */ /*20px für linkbox*/ --font-size-xl: 1.5rem; /* 24px */ --font-size-xxl: 2rem; /* 32px */ --font-size-xxxl: 3.375rem; /* 54px */ /*LINE HEIGHT*/ --line-height-xs: calc(20 / 12); --line-height-s: calc(20 / 14); --line-height-m: calc(20 / 16); --line-height-l: calc(22 / 18); --line-height-xl: calc(28 / 24); --line-height-xxl: calc(34 / 32); --line-height-xxxl: calc(54 / 54); /*FONT WEIGHTS*/ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-bold: 700; --font-weight-copy: 400; /*BORDERS*/ --border: 1px solid var(--color-mbz-grey-300); --border-thick: var(--spacing-xs); --border-hover: 1px solid var(--color-mbz-grey-200); --border-active: 1px solid var(--color-mbz-grey-400); --border-radius: 0; /*ICONS*/ --icon-stroke-width: 1px; /*BOX SHADOWS*/ --box-shadow: rgb(0 0 0 / 0.2) 0 0.15rem 0.25rem; --box-shadow: rgb(0 0 0 / 0.1) 0 0 0 6px; /*SPACING*/ --spacing-hairline: 1px; --spacing-xxs: 2px; --spacing-xs: 0.375rem; --spacing-s: 0.625rem; --spacing-m: 1.25rem; --spacing-l: 2.5rem; --spacing-xl: 5rem; --size-column: 5.3125rem; --size-gap: var(--spacing-m); --width-page: calc((var(--size-column) * 12) + (var(--size-gap) * 11)); --size-columns-1: calc((var(--size-column) * 1) + (var(--size-gap) * 0)); --size-columns-2: calc((var(--size-column) * 2) + (var(--size-gap) * 1)); --size-columns-3: calc((var(--size-column) * 3) + (var(--size-gap) * 2)); --size-columns-4: calc((var(--size-column) * 4) + (var(--size-gap) * 3)); --size-columns-5: calc((var(--size-column) * 5) + (var(--size-gap) * 4)); --size-columns-6: calc((var(--size-column) * 6) + (var(--size-gap) * 5)); --size-columns-7: calc((var(--size-column) * 7) + (var(--size-gap) * 6)); --size-columns-8: calc((var(--size-column) * 8) + (var(--size-gap) * 7)); --size-columns-9: calc((var(--size-column) * 9) + (var(--size-gap) * 8)); --size-columns-10: calc((var(--size-column) * 10) + (var(--size-gap) * 9)); --size-columns-11: calc((var(--size-column) * 11) + (var(--size-gap) * 10)); --size-columns-12: calc((var(--size-column) * 12) + (var(--size-gap) * 11)); --size-icon: 2.625rem; --size-icon-inline: 19px; /*ANIMATIONS*/ --animation-duration: 0.3s; /* Z INDEX */ --z-index-slider-button: 4; --z-index-separator: 20; --z-index-nav-hamburger: 100; --z-index-nav-toggle: 101; --z-index-logo: 200; /* COLOR PALETTE */ --color-black: rgb(0 0 0); --color-white: rgb(255 255 255); /* mbz-red */ --color-mbz-red-25: color-mix(in srgb, var(--color-mbz-red-500) 5%, white); --color-mbz-red-50: color-mix(in srgb, var(--color-mbz-red-500) 10%, white); --color-mbz-red-100: color-mix(in srgb, var(--color-mbz-red-500) 20%, white); --color-mbz-red-200: color-mix(in srgb, var(--color-mbz-red-500) 40%, white); --color-mbz-red-300: color-mix(in srgb, var(--color-mbz-red-500) 60%, white); --color-mbz-red-400: color-mix(in srgb, var(--color-mbz-red-500) 80%, white); --color-mbz-red-500: oklch(55.74% 0.174 30.46); --color-mbz-red-600: color-mix(in srgb, var(--color-mbz-red-500) 80%, black); --color-mbz-red-700: color-mix(in srgb, var(--color-mbz-red-500) 60%, black); --color-mbz-red-800: color-mix(in srgb, var(--color-mbz-red-500) 40%, black); --color-mbz-red-900: color-mix(in srgb, var(--color-mbz-red-500) 20%, black); --color-mbz-red: var(--color-mbz-red-500); --color-red: var(--color-mbz-red-500); /* mbz-yellow */ --color-mbz-yellow-25: color-mix(in srgb, var(--color-mbz-yellow-500) 5%, white); --color-mbz-yellow-50: color-mix(in srgb, var(--color-mbz-yellow-500) 10%, white); --color-mbz-yellow-100: color-mix(in srgb, var(--color-mbz-yellow-500) 20%, white); --color-mbz-yellow-200: color-mix(in srgb, var(--color-mbz-yellow-500) 40%, white); --color-mbz-yellow-300: color-mix(in srgb, var(--color-mbz-yellow-500) 60%, white); --color-mbz-yellow-400: color-mix(in srgb, var(--color-mbz-yellow-500) 80%, white); --color-mbz-yellow-500: oklch(81.09% 0.13 89.88); --color-mbz-yellow-600: color-mix(in srgb, var(--color-mbz-yellow-500) 80%, black); --color-mbz-yellow-700: color-mix(in srgb, var(--color-mbz-yellow-500) 60%, black); --color-mbz-yellow-800: color-mix(in srgb, var(--color-mbz-yellow-500) 40%, black); --color-mbz-yellow-900: color-mix(in srgb, var(--color-mbz-yellow-500) 20%, black); --color-mbz-yellow: var(--color-mbz-yellow-500); --color-yellow: var(--color-mbz-yellow-500); /* mbz-beige */ --color-mbz-beige-25: color-mix(in srgb, var(--color-mbz-beige-500) 5%, white); --color-mbz-beige-50: color-mix(in srgb, var(--color-mbz-beige-500) 10%, white); --color-mbz-beige-50: #f8f4f2; --color-mbz-beige-100: color-mix(in srgb, var(--color-mbz-beige-500) 20%, white); --color-mbz-beige-200: color-mix(in srgb, var(--color-mbz-beige-500) 40%, white); --color-mbz-beige-300: color-mix(in srgb, var(--color-mbz-beige-500) 60%, white); --color-mbz-beige-400: color-mix(in srgb, var(--color-mbz-beige-500) 80%, white); --color-mbz-beige-500: oklch(69.19% 0.057 49.06); --color-mbz-beige-600: color-mix(in srgb, var(--color-mbz-beige-500) 80%, black); --color-mbz-beige-700: color-mix(in srgb, var(--color-mbz-beige-500) 60%, black); --color-mbz-beige-800: color-mix(in srgb, var(--color-mbz-beige-500) 40%, black); --color-mbz-beige-900: color-mix(in srgb, var(--color-mbz-beige-500) 20%, black); --color-mbz-beige: var(--color-mbz-beige-500); --color-beige: var(--color-mbz-beige-500); /* mbz-green */ --color-mbz-green-25: color-mix(in srgb, var(--color-mbz-green-500) 5%, white); --color-mbz-green-50: color-mix(in srgb, var(--color-mbz-green-500) 10%, white); --color-mbz-green-100: color-mix(in srgb, var(--color-mbz-green-500) 20%, white); --color-mbz-green-200: color-mix(in srgb, var(--color-mbz-green-500) 40%, white); --color-mbz-green-300: color-mix(in srgb, var(--color-mbz-green-500) 60%, white); --color-mbz-green-400: color-mix(in srgb, var(--color-mbz-green-500) 80%, white); --color-mbz-green-500: oklch(56.32% 0.05 125.92); --color-mbz-green-600: color-mix(in srgb, var(--color-mbz-green-500) 80%, black); --color-mbz-green-700: color-mix(in srgb, var(--color-mbz-green-500) 60%, black); --color-mbz-green-800: color-mix(in srgb, var(--color-mbz-green-500) 40%, black); --color-mbz-green-900: color-mix(in srgb, var(--color-mbz-green-500) 20%, black); --color-mbz-green: var(--color-mbz-green-500); --color-green: var(--color-mbz-green-500); /* mbz-petrol */ --color-mbz-petrol-25: color-mix(in srgb, var(--color-mbz-petrol-500) 5%, white); --color-mbz-petrol-50: color-mix(in srgb, var(--color-mbz-petrol-500) 10%, white); --color-mbz-petrol-100: color-mix(in srgb, var(--color-mbz-petrol-500) 20%, white); --color-mbz-petrol-200: color-mix(in srgb, var(--color-mbz-petrol-500) 40%, white); --color-mbz-petrol-300: color-mix(in srgb, var(--color-mbz-petrol-500) 60%, white); --color-mbz-petrol-400: color-mix(in srgb, var(--color-mbz-petrol-500) 80%, white); --color-mbz-petrol-500: oklch(66.75% 0.082 198.46); --color-mbz-petrol-600: color-mix(in srgb, var(--color-mbz-petrol-500) 80%, black); --color-mbz-petrol-700: color-mix(in srgb, var(--color-mbz-petrol-500) 60%, black); --color-mbz-petrol-800: color-mix(in srgb, var(--color-mbz-petrol-500) 40%, black); --color-mbz-petrol-900: color-mix(in srgb, var(--color-mbz-petrol-500) 20%, black); --color-mbz-petrol: var(--color-mbz-petrol-500); --color-petrol: var(--color-mbz-petrol-500); /* mbz-blue */ --color-mbz-blue-25: color-mix(in srgb, var(--color-mbz-blue-500) 5%, white); --color-mbz-blue-50: color-mix(in srgb, var(--color-mbz-blue-500) 10%, white); --color-mbz-blue-100: color-mix(in srgb, var(--color-mbz-blue-500) 20%, white); --color-mbz-blue-200: color-mix(in srgb, var(--color-mbz-blue-500) 40%, white); --color-mbz-blue-300: color-mix(in srgb, var(--color-mbz-blue-500) 60%, white); --color-mbz-blue-400: color-mix(in srgb, var(--color-mbz-blue-500) 80%, white); --color-mbz-blue-500: oklch(70.7% 0.088 217.96); --color-mbz-blue-600: color-mix(in srgb, var(--color-mbz-blue-500) 80%, black); --color-mbz-blue-700: color-mix(in srgb, var(--color-mbz-blue-500) 60%, black); --color-mbz-blue-800: color-mix(in srgb, var(--color-mbz-blue-500) 40%, black); --color-mbz-blue-900: color-mix(in srgb, var(--color-mbz-blue-500) 20%, black); --color-mbz-blue-900: #122228; --color-mbz-blue: var(--color-mbz-blue-500); --color-blue: var(--color-mbz-blue-500); /* mbz-navy */ --color-mbz-navy-25: color-mix(in srgb, var(--color-mbz-navy-500) 5%, white); --color-mbz-navy-50: color-mix(in srgb, var(--color-mbz-navy-500) 10%, white); --color-mbz-navy-100: color-mix(in srgb, var(--color-mbz-navy-500) 20%, white); --color-mbz-navy-200: color-mix(in srgb, var(--color-mbz-navy-500) 40%, white); --color-mbz-navy-300: color-mix(in srgb, var(--color-mbz-navy-500) 60%, white); --color-mbz-navy-400: color-mix(in srgb, var(--color-mbz-navy-500) 80%, white); --color-mbz-navy-500: oklch(44.13% 0.042 256.44); --color-mbz-navy-600: color-mix(in srgb, var(--color-mbz-navy-500) 80%, black); --color-mbz-navy-700: color-mix(in srgb, var(--color-mbz-navy-500) 60%, black); --color-mbz-navy-800: color-mix(in srgb, var(--color-mbz-navy-500) 40%, black); --color-mbz-navy-900: color-mix(in srgb, var(--color-mbz-navy-500) 20%, black); --color-mbz-navy: var(--color-mbz-blue-500); --color-navy: var(--color-mbz-blue-500); /* grey */ --color-mbz-grey-25: color-mix(in srgb, var(--color-mbz-grey-500) 5%, white); --color-mbz-grey-50: color-mix(in srgb, var(--color-mbz-grey-500) 10%, white); --color-mbz-grey-100: color-mix(in srgb, var(--color-mbz-grey-500) 20%, white); --color-mbz-grey-200: color-mix(in srgb, var(--color-mbz-grey-500) 40%, white); --color-mbz-grey-300: color-mix(in srgb, var(--color-mbz-grey-500) 60%, white); --color-mbz-grey-300: #afafaf; --color-mbz-grey-400: color-mix(in srgb, var(--color-mbz-grey-500) 80%, white); --color-mbz-grey-500: oklch(58.97% 0 0); --color-mbz-grey-600: color-mix(in srgb, var(--color-mbz-grey-500) 80%, black); --color-mbz-grey-700: color-mix(in srgb, var(--color-mbz-grey-500) 60%, black); --color-mbz-grey-800: color-mix(in srgb, var(--color-mbz-grey-500) 40%, black); --color-mbz-grey-900: color-mix(in srgb, var(--color-mbz-grey-500) 20%, black); /* for older iOS */ /* mbz-red */ --color-mbz-red-25: #fdf8f7; --color-mbz-red-50: #f8e8e6; --color-mbz-red-100: #f5dcd9; --color-mbz-red-200: #e8b4ae; --color-mbz-red-300: #dc8c82; --color-mbz-red-400: #d16658; --color-mbz-red-500: oklch(55.74% 0.174 30.46); --color-mbz-red-600: #973023; --color-mbz-red-700: #73241a; --color-mbz-red-800: #461510; --color-mbz-red-900: #2f0a06; --color-mbz-red: var(--color-mbz-red-500); --color-red: var(--color-mbz-red-500); /* mbz-yellow */ --color-mbz-yellow-25: #fdfcf6; --color-mbz-yellow-50: #fbf8ed; --color-mbz-yellow-100: #f9f1db; --color-mbz-yellow-200: #f5e6bf; --color-mbz-yellow-300: #edd592; --color-mbz-yellow-400: #e7c76e; --color-mbz-yellow-500: oklch(81.09% 0.13 89.88); --color-mbz-yellow-600: #aa8e40; --color-mbz-yellow-700: #8d7534; --color-mbz-yellow-800: #554720; --color-mbz-yellow-900: #3b331d; --color-mbz-yellow: var(--color-mbz-yellow-500); --color-yellow: var(--color-mbz-yellow-500); /* mbz-beige */ --color-mbz-beige-25: #fcfbfa; --color-mbz-beige-50: #f7f3f0; --color-mbz-beige-100: #f2ebe7; --color-mbz-beige-200: #e4d3cb; --color-mbz-beige-300: #d8c0b5; --color-mbz-beige-400: #cbac9c; --color-mbz-beige-500: oklch(69.19% 0.057 49.06); --color-mbz-beige-600: #937362; --color-mbz-beige-700: #6e5649; --color-mbz-beige-800: #513e36; --color-mbz-beige-900: #2b221d; --color-mbz-beige: var(--color-mbz-beige-500); --color-beige: var(--color-mbz-beige-500); /* mbz-green */ --color-mbz-green-25: #f8f8f7; --color-mbz-green-50: #eff0ed; --color-mbz-green-100: #daded7; --color-mbz-green-200: #c5cbbe; --color-mbz-green-300: #a0a994; --color-mbz-green-400: #909a81; --color-mbz-green-500: oklch(56.32% 0.05 125.92); --color-mbz-green-600: #545d45; --color-mbz-green-700: #454e39; --color-mbz-green-800: #292d22; --color-mbz-green-900: #1b1f16; --color-mbz-green: var(--color-mbz-green-500); --color-green: var(--color-mbz-green-500); /* mbz-petrol */ --color-mbz-petrol-25: #f4f9f9; --color-mbz-petrol-50: #eaf5f5; --color-mbz-petrol-100: #daecec; --color-mbz-petrol-200: #b2d8d9; --color-mbz-petrol-300: #93c7c9; --color-mbz-petrol-400: #74b6b9; --color-mbz-petrol-500: oklch(66.75% 0.082 198.46); --color-mbz-petrol-600: #43898c; --color-mbz-petrol-700: #316668; --color-mbz-petrol-800: #1f4040; --color-mbz-petrol-900: #1e2b2c; --color-mbz-petrol: var(--color-mbz-petrol-500); --color-petrol: var(--color-mbz-petrol-500); /* mbz-blue */ --color-mbz-blue-25: #f7fbfc; --color-mbz-blue-50: #ecf6f8; --color-mbz-blue-100: #d6ebf1; --color-mbz-blue-200: #b6dbe5; --color-mbz-blue-300: #98ccdb; --color-mbz-blue-400: #81c1d2; --color-mbz-blue-500: oklch(70.7% 0.088 217.96); --color-mbz-blue-600: #478a9b; --color-mbz-blue-700: #386e7d; --color-mbz-blue-800: #274b55; --color-mbz-blue-900: #1e2f35; --color-mbz-blue: var(--color-mbz-blue-500); --color-blue: var(--color-mbz-blue-500); /* mbz-navy */ --color-mbz-navy-25: #f8f8f9; --color-mbz-navy-50: #eeeff1; --color-mbz-navy-100: #d7dbdf; --color-mbz-navy-200: #abb1bc; --color-mbz-navy-300: #9099a6; --color-mbz-navy-400: #687486; --color-mbz-navy-500: oklch(44.13% 0.042 256.44); --color-mbz-navy-600: #344051; --color-mbz-navy-700: #262e3c; --color-mbz-navy-800: #1b212a; --color-mbz-navy-900: #0e1319; --color-mbz-navy: var(--color-mbz-blue-500); --color-navy: var(--color-mbz-blue-500); /* grey */ --color-mbz-grey-25: #faf9f9; --color-mbz-grey-50: #eeeeee; --color-mbz-grey-100: #dadada; --color-mbz-grey-200: #c9c9c9; --color-mbz-grey-300: #afafaf; --color-mbz-grey-400: #9a9a9a; --color-mbz-grey-500: oklch(58.97% 0 0); --color-mbz-grey-600: #676767; --color-mbz-grey-700: #484848; --color-mbz-grey-800: #2b2b2b; --color-mbz-grey-900: #181818; --color-mbz-grey: var(--color-mbz-grey-500); --color-grey: var(--color-mbz-grey); --color-text: var(--color-mbz-grey-900); } } @media (max-width: 480px) { :root { --font-size-xs: 0.75rem; /* 12px */ --font-size-s: 0.875rem; /* 14px */ --font-size-m: 1rem; /* 16px */ --font-size-l: 1.125rem; /* 18px */ /*20px für linkbox*/ --font-size-xl: 1.25rem; /* 24px */ --font-size-xxl: 1.5rem; /* 32px */ --font-size-xxxl: 2rem; /* 54px */ } }